/* Add custom CSS styles below */ 
/* =========================================
   ثيم أبيض كامل + العبارة الذهبية
   + إزالة الظلال + تقليل الفراغات
========================================= */

/* الخلفية العامة */
body,
.site-wrapper,
.main-content,
.app-inner,
.store-page {
    background: #ffffff !important;
}

/* الهيدر */
.main-nav-container,
header,
.main-header,
.navbar {
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
    position: relative !important;
}

/* الفوتر */
footer,
.store-footer {
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
}

/* البطاقات والمنتجات */
.product,
.product-card,
.card,
.category-card,
.offer-card,
.banner,
.section {
    background: #ffffff !important;
    box-shadow: none !important;
    border: 1px solid #f1f1f1 !important;
}

/* إزالة الظلال */
* {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* =========================================
   العبارة الذهبية
========================================= */

.main-nav-container {
    margin-bottom: 15px !important;
}

/* العبارة */
.main-nav-container::after {

    content: "------ مخازن معكم في كل بيت ------";

    position: absolute;
    top: 100%;
    left: 50%;

    transform: translateX(-50%);

    width: 100%;
    text-align: center;
    white-space: nowrap;

    font-size: 30px;
    font-weight: 900;
    font-family: 'Tajawal', sans-serif;

    letter-spacing: 1px;
    z-index: 99;

    /* اللون الذهبي */
    background: linear-gradient(to bottom, #E4C157 0%, #B88A14 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================================
   إزالة الفراغات بين البنرات
========================================= */

section,
.s-block,
.container,
.s-block--banners,
.s-slider-block,
.banner-entry,
.swiper,
.swiper-wrapper,
.swiper-slide {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* البنرات */
.s-slider-block__display-container {
    margin: 0 !important;
    padding: 0 !important;
}

/* إزالة الفراغ الكبير */
.s-block--banners:first-child {
    margin-bottom: -20px !important;
}

.s-block--banners + .s-block--banners {
    margin-top: -20px !important;
}

/* تأثير الهوفر */
button:hover,
.btn:hover,
.s-button-element:hover {
    opacity: 0.9;
}

/* =========================================
   الجوال
========================================= */

@media (max-width: 768px) {

    .main-nav-container {
        margin-bottom: 5px !important;
    }

    .main-nav-container::after {

        content: "--- مخازن معكم في كل بيت ---";

        font-size: 20px;
        top: 98%;
    }

    .s-block--banners:first-child {
        margin-bottom: -14px !important;
    }

    .s-block--banners + .s-block--banners {
        margin-top: -14px !important;
    }
}

/* =========================================
   إظهار العبارة الذهبية في الرئيسية فقط
========================================= */

/* إخفاء العبارة بشكل افتراضي */
.main-nav-container::after {
    display: none !important;
}

/* إظهارها في الصفحة الرئيسية فقط */
.home-page .main-nav-container::after,
.index .main-nav-container::after,
body.home .main-nav-container::after {

    display: block !important;

    content: "------ مخازن معكم في كل بيت ------";

    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    text-align: center;
    white-space: nowrap;

    font-size: 30px;
    font-weight: 900;
    font-family: 'Tajawal', sans-serif;

    background: linear-gradient(to bottom, #E4C157 0%, #B88A14 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    z-index: 99;
}

/* للجوال */
@media (max-width: 768px) {

    .home-page .main-nav-container::after,
    .index .main-nav-container::after,
    body.home .main-nav-container::after {

        content: "--- مخازن معكم في كل بيت ---";
        font-size: 20px;
        top: 98%;
    }
}

/* =========================================
   إخفاء العبارة الذهبية من صفحات المنتجات
========================================= */

/* إخفاء العبارة داخل صفحة المنتج */
body.product-single .main-nav-container::after,
body.product .main-nav-container::after,
.product-page .main-nav-container::after,
.s-product-page .main-nav-container::after,
.template-product .main-nav-container::after {
    display: none !important;
}