/* =========================================================
   روائع الخليجية للعود
   CSS نهائي نظيف - استبدال كامل
   الهدف:
   - هيدر شفاف فوق البنر
   - شعار مركزي مرفوع
   - التصنيفات في صف واحد وبخط أوضح
   - أيقونات الحساب/القمر/السلة يسار
   - البحث والقائمة يمين
   - الحفاظ على الجوال
   ========================================================= */


/* =========================================================
   إعدادات عامة
   ========================================================= */

.quicklinks,
.quicklinks::before,
.quicklinks::after,
.quicklinks__inner {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

.quicklinks a,
.quicklinks li,
.quicklinks .main-menu-item {
    visibility: visible !important;
    opacity: 1 !important;
}


/* =========================================================
   الكمبيوتر
   ========================================================= */

@media (min-width: 1024px) {

    /* ===== الهيدر الشفاف فوق البنر ===== */
    header,
    .store-header,
    .main-header,
    .s-header,
    .s-header-v2 {
        position: absolute !important;
        top: 92px !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;

        min-height: 122px !important;

        z-index: 5000 !important;

        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

        box-shadow: none !important;
        border: 0 !important;
    }

    /* إزالة الخلفيات الداخلية فقط */
    header > div,
    header > div > div,
    header .container,
    header .container-fluid,
    header .header-inner,
    header .header-wrapper,
    header .navbar,
    header .navbar-container,
    .store-header > div,
    .main-header > div,
    .s-header > div,
    .s-header-v2 > div,
    #main-nav,
    #main-nav > div {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

        box-shadow: none !important;
        border: 0 !important;
    }


    /* =====================================================
       الشعار - مرفوع أكثر
       ===================================================== */

    header .navbar-brand,
    header .store-logo,
    header .logo,
    header [class*="logo"] {
        position: absolute !important;

        top: -42px !important;
        left: 50% !important;
        right: auto !important;

        transform: translateX(-50%) !important;

        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 9000 !important;
    }

    header .navbar-brand img,
    header .store-logo img,
    header .logo img,
    header [class*="logo"] img {
        display: block !important;
        width: auto !important;
        max-height: 62px !important;
        object-fit: contain !important;
    }


    /* =====================================================
       الروابط العلوية
       ===================================================== */

    .custom-top-links {
        position: absolute !important;

        top: 8px !important;
        right: 42px !important;
        left: auto !important;

        width: auto !important;
        height: 30px !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        gap: 14px !important;

        padding: 0 !important;
        margin: 0 !important;

        background: transparent !important;
        border: 0 !important;

        white-space: nowrap !important;

        z-index: 8800 !important;
    }

    .custom-top-links a,
    .custom-top-links span {
        color: #ffffff !important;

        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

        white-space: nowrap !important;

        text-shadow: 0 1px 3px rgba(0,0,0,.65) !important;
    }


    /* =====================================================
       مجموعة الأيقونات الحقيقية
       حساب + الوضع الليلي + السلة
       ===================================================== */

    header .header__icons {
        position: absolute !important;

        top: -10px !important;
        left: 60px !important;
        right: auto !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 16px !important;

        width: auto !important;
        height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 9100 !important;
    }

    header .header__icons > * {
        position: static !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;

        flex: 0 0 auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    header .header__icons button,
    header .header__icons a,
    header .header__icons salla-cart-summary {
        width: 38px !important;
        height: 38px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
    }

    header .header__icons .theme-mode-btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    header .header__icons svg {
        width: 24px !important;
        height: 24px !important;

        color: #ffffff !important;
        stroke: #ffffff !important;
    }


    /* =====================================================
       البحث والقائمة - يمين
       ===================================================== */

    header .s-search-trigger,
    header [class*="search-trigger"],
    header button[aria-label*="بحث"],
    header button[aria-label*="search"] {
        position: absolute !important;

        top: -10px !important;
        right: 105px !important;
        left: auto !important;

        width: 40px !important;
        height: 40px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;

        z-index: 9100 !important;
    }

    header .menu-trigger,
    header .menu-toggle,
    header [class*="menu-trigger"],
    header [class*="menu-toggle"],
    header button[aria-label*="menu"],
    header button[aria-label*="القائمة"] {
        position: absolute !important;

        top: -10px !important;
        right: 55px !important;
        left: auto !important;

        width: 40px !important;
        height: 40px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 9100 !important;
    }


    /* إخفاء مربع البحث الكبير فقط */
    header .search-wrapper,
    header .search-container,
    header form[role="search"],
    header input[type="search"],
    header .s-search-input,
    header .s-search-input-wrapper,
    header .s-search-placeholder-wrapper {
        display: none !important;
    }


    /* =====================================================
       التصنيفات - الكلاس الحقيقي من القالب
       صف واحد + خط أكبر + بدون تداخل مع الشعار
       ===================================================== */

    .right-side.mobile-main-nav {
        position: static !important;

        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        align-items: center !important;

        overflow: visible !important;
    }

    .right-side.mobile-main-nav .short-menu-items {
        position: absolute !important;

        top: 38px !important;
        left: 30px !important;
        right: 30px !important;

        width: calc(100% - 60px) !important;
        max-width: none !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        flex-flow: row nowrap !important;

        align-items: center !important;
        justify-content: space-between !important;

        gap: 5px !important;

        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap !important;
        overflow: visible !important;

        z-index: 7800 !important;
    }

    .right-side.mobile-main-nav
    .short-menu-items
    .main-menu-item.in-short-menu {
        display: inline-flex !important;

        flex: 0 0 auto !important;
        flex-shrink: 0 !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap !important;
    }

    .right-side.mobile-main-nav
    .short-menu-items
    .quicklinks-item {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: auto !important;

        margin: 0 !important;
        padding: 4px 2px !important;

        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        color: #ffffff !important;

        white-space: nowrap !important;
        word-break: keep-all !important;

        text-shadow: 0 1px 3px rgba(0,0,0,.65) !important;
    }


    /* لو ضاقت الشاشة قليلًا نحافظ على صف واحد */
    @media (max-width: 1350px) {
        .right-side.mobile-main-nav
        .short-menu-items
        .quicklinks-item {
            font-size: 12px !important;
        }

        .right-side.mobile-main-nav .short-menu-items {
            gap: 3px !important;
            left: 18px !important;
            right: 18px !important;
            width: calc(100% - 36px) !important;
        }
    }


    /* =====================================================
       الألوان
       ===================================================== */

    header a,
    header button,
    header i,
    header svg {
        color: #ffffff !important;
    }

    header svg {
        stroke: currentColor !important;
    }


    /* =====================================================
       البنر الرئيسي
       ===================================================== */

    body.index .s-block--main-slider-1,
    body.index .s-slider-block:first-child,
    body.index main > section:first-child {
        width: 100vw !important;
        max-width: 100vw !important;

        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.index .s-block--main-slider-1 .container,
    body.index .s-slider-block:first-child .container {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.index .s-block--main-slider-1 img,
    body.index .s-slider-block:first-child img {
        width: 100% !important;
        max-width: 100% !important;

        object-fit: cover !important;
    }


    /* =====================================================
       حماية الصفحات الداخلية
       ===================================================== */

    body:not(.index) main > section:first-child {
        width: auto !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    body:not(.index) main > section:first-child .container {
        max-width: 1200px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    body:not(.index) main img {
        max-width: 100% !important;
        height: auto !important;
    }
}


/* =========================================================
   التابلت
   ========================================================= */

@media (min-width: 769px) and (max-width: 1023px) {
    .custom-top-links {
        display: none !important;
    }
}

/* =========================================================
   الجوال - نسخة نهائية موحدة
   هيدر شفاف فوق البنر
   ========================================================= */

@media (max-width: 768px) {

    /* =========================================
       الهيدر والحاويات البيضاء
       ========================================= */

    header,
    .store-header,
    .main-header,
    .s-header,
    .s-header-v2,
    #mainnav,
    #main-nav,
    .main-nav,
    .main-nav-container,
    .navbar,
    .navbar-wrapper,
    .header-wrapper,
    .header-inner,
    .mobile-header,
    .mobile-header-inner {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

        box-shadow: none !important;
        border: 0 !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }


    /* الحاويات الموجودة مباشرة داخل الهيدر */

    header > div,
    header > div > div,
    header .container,
    header .container-fluid,

    #mainnav > div,
    #mainnav .container,
    #mainnav .container-fluid,

    #main-nav > div,
    #main-nav .container,
    #main-nav .container-fluid,

    .store-header > div,
    .main-header > div,
    .s-header > div,
    .s-header-v2 > div {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

        box-shadow: none !important;
        border: 0 !important;
    }


    /* إزالة الخلفيات التي تأتي من before / after */

    header::before,
    header::after,

    #mainnav::before,
    #mainnav::after,

    #main-nav::before,
    #main-nav::after,

    .store-header::before,
    .store-header::after,

    .main-header::before,
    .main-header::after,

    .navbar::before,
    .navbar::after {
        content: none !important;

        background: transparent !important;
        background-color: transparent !important;

        box-shadow: none !important;
        border: 0 !important;
    }


    /* =========================================
       وضع الهيدر فوق البنر
       ========================================= */

    header,
    .store-header,
    .main-header,
    .s-header,
    .s-header-v2 {

        position: absolute !important;

        top: 44px !important;
        right: 0 !important;
        left: 0 !important;

        width: 100% !important;

        min-height: 70px !important;
        height: 70px !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 9999 !important;
    }


    /* =========================================
       mainnav
       ========================================= */

    #mainnav,
    #main-nav {
        position: relative !important;

        width: 100% !important;
        height: 70px !important;
        min-height: 70px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
    }


    /* =========================================
       الشعار
       ========================================= */

    header .navbar-brand,
    header .store-logo,
    header .logo,
    header [class*="logo"],

    #mainnav .navbar-brand,
    #main-nav .navbar-brand {

        position: absolute !important;

        top: -6px !important;
        left: 50% !important;
        right: auto !important;

        transform: translateX(-50%) !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        z-index: 10010 !important;
    }


    header .navbar-brand img,
    header .store-logo img,
    header .logo img,
    header [class*="logo"] img,

    #mainnav .navbar-brand img,
    #main-nav .navbar-brand img {

        display: block !important;

        width: auto !important;
        max-width: 138px !important;
        max-height: 42px !important;

        object-fit: contain !important;

        margin: 0 auto !important;

        background: transparent !important;
    }


    /* =========================================
       زر القائمة
       ========================================= */

    header .menu-trigger,
    header .menu-toggle,
    header [class*="menu-trigger"],
    header [class*="menu-toggle"],

    #mainnav .menu-trigger,
    #mainnav .menu-toggle,

    #main-nav .menu-trigger,
    #main-nav .menu-toggle,

    header button[aria-label*="menu"],
    header button[aria-label*="القائمة"] {

        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: absolute !important;

        top: 13px !important;
        right: 14px !important;
        left: auto !important;

        width: 42px !important;
        height: 42px !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        background-color: transparent !important;

        border: 0 !important;
        box-shadow: none !important;

        color: #000000 !important;

        z-index: 10020 !important;
    }


    /* لون أيقونة القائمة */

    header .menu-trigger svg,
    header .menu-toggle svg,
    header [class*="menu-trigger"] svg,
    header [class*="menu-toggle"] svg {

        width: 28px !important;
        height: 28px !important;

        color: #000000 !important;
        stroke: #000000 !important;
    }


    /* =========================================
       أيقونات الهيدر
       ========================================= */

    header .header__icons {

        position: absolute !important;

        top: 10px !important;
        left: 8px !important;
        right: auto !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;

        gap: 4px !important;

        width: auto !important;
        height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        z-index: 10020 !important;
    }


    header .header__icons > * {

        position: static !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        background: transparent !important;
    }


    header .header__icons button,
    header .header__icons a,
    header .header__icons salla-cart-summary {

        width: 32px !important;
        height: 32px !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        background: transparent !important;

        border: 0 !important;
        box-shadow: none !important;
    }


    header .header__icons svg {

        width: 18px !important;
        height: 18px !important;

        color: #000000 !important;
        stroke: #000000 !important;
    }


    /* =========================================
       البحث
       ========================================= */

    header .search-wrapper,
    header .search-container,
    header form[role="search"],
    header input[type="search"],
    header input[type="text"],
    .s-search-container,
    .s-search-input-wrapper {

        display: none !important;
    }


    /* =========================================
       إخفاء التصنيفات الأفقية في الجوال
       القائمة الجانبية تبقى تعمل
       ========================================= */

    .quicklinks,
    .right-side.mobile-main-nav .short-menu-items {

        display: none !important;
    }


    /* لا نخفي mainnav نفسه */

    #mainnav,
    #main-nav {

        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }


    .custom-top-links {

        display: none !important;
    }


    /* =========================================
       منع الفراغ الأبيض فوق البنر
       ========================================= */

    body.index main,
    body.index .main-content,
    body.index .home-content {

        margin-top: 0 !important;
        padding-top: 0 !important;
    }


    body.index .s-block--main-slider-1,
    body.index .s-slider-block:first-child,
    body.index main > section:first-child {

        margin-top: 0 !important;
        padding-top: 0 !important;
    }


    /* البنر يمتد تحت الهيدر */

    body.index .s-block--main-slider-1,
    body.index .s-slider-block:first-child {

        position: relative !important;

        z-index: 1 !important;
    }


    /* =========================================
       الصفحات الداخلية
       لا نجعل الهيدر يغطي المنتجات
       ========================================= */

    body:not(.index) header,
    body:not(.index) .store-header,
    body:not(.index) .main-header,
    body:not(.index) .s-header,
    body:not(.index) .s-header-v2 {

        position: relative !important;

        top: auto !important;

        height: auto !important;
        min-height: 70px !important;
    }


    body:not(.index) main {

        margin-top: 0 !important;
        padding-top: 0 !important;
    }


    body:not(.index) main img {

        max-width: 100% !important;
        height: auto !important;
    }
}

/* =========================================================
   الجوال - تقريب أيقونات يسار الهيدر (معتمد)
   ========================================================= */
@media (max-width: 768px) {
    header .header__icons {
        gap: 0 !important;
        column-gap: 0 !important;
    }

    header .header__icons > * {
        margin-left: -2px !important;
        margin-right: -2px !important;
    }

    header .header__icons button,
    header .header__icons a,
    header .header__icons salla-cart-summary {
        width: 29px !important;
        min-width: 29px !important;
        height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    header .header__icons svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* =========================================================
   إصلاح صفحات التصنيفات والصفحات الداخلية
   منع البنر من تغطية الأصناف والمنتجات
   ========================================================= */

/* الكمبيوتر والتابلت */
@media (min-width: 769px) {

    /* الهيدر في الصفحات الداخلية لا يفرض تراكباً على المحتوى */
    body:not(.index) header,
    body:not(.index) .store-header,
    body:not(.index) .main-header,
    body:not(.index) .s-header,
    body:not(.index) .s-header-v2 {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        margin: 0 !important;
        min-height: auto !important;
        z-index: 100000 !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    /* أول قسم/بنر في الصفحة الداخلية يبقى داخل التدفق الطبيعي */
    body:not(.index) main > section:first-child {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin-top: 0 !important;
        margin-bottom: 32px !important;
        padding-bottom: 0 !important;

        clear: both !important;
        overflow: visible !important;
        z-index: 1 !important;
    }

    /* حاوية البنر لا تستخدم ارتفاعاً ثابتاً أو تموضعاً مطلقاً */
    body:not(.index) main > section:first-child .container,
    body:not(.index) main > section:first-child .container-fluid,
    body:not(.index) main > section:first-child [class*="banner"],
    body:not(.index) main > section:first-child [class*="slider"] {
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* صورة البنر نفسها */
    body:not(.index) main > section:first-child img {
        display: block !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 auto !important;
        object-fit: contain !important;
        z-index: 1 !important;
    }

    /* جميع الأقسام التالية تبدأ بعد البنر ولا تدخل تحته */
    body:not(.index) main > section:nth-child(n+2) {
        position: relative !important;
        top: auto !important;
        transform: none !important;
        clear: both !important;
        z-index: 2 !important;
    }

    /* شبكات المنتجات والتصنيفات */
    body:not(.index) .products-container,
    body:not(.index) .products-grid,
    body:not(.index) .product-grid,
    body:not(.index) [class*="products"],
    body:not(.index) [class*="product-list"] {
        position: relative !important;
        clear: both !important;
        z-index: 2 !important;
    }
}

/* =========================================
   لون التصنيفات في الصفحات الداخلية فقط
   الصفحة الرئيسية تبقى باللون الأبيض
   ========================================= */

@media (min-width: 1024px) {

    /* جميع الصفحات الداخلية */
    body:not(.index)
    .right-side.mobile-main-nav
    .short-menu-items
    .quicklinks-item,

    body:not(.index)
    .right-side.mobile-main-nav
    .short-menu-items
    .main-menu-item,

    body:not(.index)
    .right-side.mobile-main-nav
    .short-menu-items
    a {
        color: #000000 !important;
        text-shadow: none !important;
    }

    /* الصفحة الرئيسية تبقى باللون الأبيض */
    body.index
    .right-side.mobile-main-nav
    .short-menu-items
    .quicklinks-item,

    body.index
    .right-side.mobile-main-nav
    .short-menu-items
    .main-menu-item,

    body.index
    .right-side.mobile-main-nav
    .short-menu-items
    a {
        color: #ffffff !important;
        text-shadow: 0 1px 3px rgba(0,0,0,.65) !important;
    }
}
/* =========================================
   إصلاح نهائي للنقر على التصنيفات في الصفحات الداخلية
   ========================================= */

@media (min-width: 1024px) {

    /* ارفع الهيدر كاملًا فوق البنر والمحتوى */
    body:not(.index) header,
    body:not(.index) .store-header,
    body:not(.index) .main-header,
    body:not(.index) .s-header,
    body:not(.index) .s-header-v2 {
        position: relative !important;
        z-index: 100000 !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    /* منع أي طبقة شفافة داخل الهيدر من التقاط النقر */
    body:not(.index) header::before,
    body:not(.index) header::after,
    body:not(.index) .store-header::before,
    body:not(.index) .store-header::after,
    body:not(.index) .main-header::before,
    body:not(.index) .main-header::after {
        pointer-events: none !important;
    }

    /* الحاوية الرئيسية للتصنيفات */
    body:not(.index) .right-side.mobile-main-nav {
        position: static !important;
        z-index: auto !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    /* صف التصنيفات نفسه */
    body:not(.index)
    .right-side.mobile-main-nav
    .short-menu-items {
        position: absolute !important;
        z-index: 100010 !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    /* عناصر القائمة */
    body:not(.index)
    .right-side.mobile-main-nav
    .short-menu-items
    .main-menu-item,
    body:not(.index)
    .right-side.mobile-main-nav
    .short-menu-items
    li {
        position: relative !important;
        z-index: 100011 !important;
        pointer-events: auto !important;
    }

    /* الروابط نفسها */
    body:not(.index)
    .right-side.mobile-main-nav
    .short-menu-items
    .quicklinks-item,
    body:not(.index)
    .right-side.mobile-main-nav
    .short-menu-items
    a {
        position: relative !important;
        z-index: 100012 !important;

        display: inline-flex !important;
        align-items: center !important;

        pointer-events: auto !important;
        cursor: pointer !important;

        color: #000000 !important;
        text-shadow: none !important;
    }

    /* البنر والمحتوى يبقيان أسفل الهيدر */
    body:not(.index) main,
    body:not(.index) main > section,
    body:not(.index) [class*="banner"],
    body:not(.index) [class*="slider"] {
        position: relative !important;
        z-index: 1 !important;
    }
}
/* =========================================
   تكبير أسماء التصنيفات - الكمبيوتر فقط
   ========================================= */

@media (min-width: 1024px) {

    .right-side.mobile-main-nav
    .short-menu-items
    .quicklinks-item,
    
    .right-side.mobile-main-nav
    .short-menu-items
    .main-menu-item,
    
    .right-side.mobile-main-nav
    .short-menu-items
    a {
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }
}


/* =========================================================
   إصلاح نهائي - تكبير نصوص التصنيفات على الكمبيوتر
   يستهدف الرابط والنص الداخلي معاً
   ========================================================= */

@media (min-width: 1024px) {

    header .right-side.mobile-main-nav .short-menu-items,
    header .right-side.mobile-main-nav .short-menu-items * {
        box-sizing: border-box !important;
    }

    header .right-side.mobile-main-nav .short-menu-items .quicklinks-item,
    header .right-side.mobile-main-nav .short-menu-items .quicklinks-item *,
    header .right-side.mobile-main-nav .short-menu-items .main-menu-item,
    header .right-side.mobile-main-nav .short-menu-items .main-menu-item *,
    header .right-side.mobile-main-nav .short-menu-items li,
    header .right-side.mobile-main-nav .short-menu-items li *,
    header .right-side.mobile-main-nav .short-menu-items a,
    header .right-side.mobile-main-nav .short-menu-items a *,
    .right-side.mobile-main-nav .short-menu-items .quicklinks-item,
    .right-side.mobile-main-nav .short-menu-items .quicklinks-item *,
    .right-side.mobile-main-nav .short-menu-items .main-menu-item,
    .right-side.mobile-main-nav .short-menu-items .main-menu-item *,
    .right-side.mobile-main-nav .short-menu-items a,
    .right-side.mobile-main-nav .short-menu-items a * {
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    /* إبقاء التصنيفات في صف واحد */
    header .right-side.mobile-main-nav .short-menu-items,
    .right-side.mobile-main-nav .short-menu-items {
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        gap: 4px !important;
    }
}

/* الشاشات المكتبية الأضيق: لا تسمح للكود القديم بإرجاع الخط إلى 12px */
@media (min-width: 1024px) and (max-width: 1350px) {

    header .right-side.mobile-main-nav .short-menu-items .quicklinks-item,
    header .right-side.mobile-main-nav .short-menu-items .quicklinks-item *,
    header .right-side.mobile-main-nav .short-menu-items .main-menu-item,
    header .right-side.mobile-main-nav .short-menu-items .main-menu-item *,
    header .right-side.mobile-main-nav .short-menu-items a,
    header .right-side.mobile-main-nav .short-menu-items a *,
    .right-side.mobile-main-nav .short-menu-items .quicklinks-item,
    .right-side.mobile-main-nav .short-menu-items .quicklinks-item *,
    .right-side.mobile-main-nav .short-menu-items .main-menu-item,
    .right-side.mobile-main-nav .short-menu-items .main-menu-item *,
    .right-side.mobile-main-nav .short-menu-items a,
    .right-side.mobile-main-nav .short-menu-items a * {
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }
}


/* =========================================================
   التصنيفات - صفّان مع تباعد واضح بين المسميات
   الكمبيوتر فقط
   ========================================================= */

@media (min-width: 1024px) {

    /* حاوية التصنيفات */
    header .right-side.mobile-main-nav .short-menu-items,
    .right-side.mobile-main-nav .short-menu-items {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;

        align-items: center !important;
        justify-content: center !important;

        row-gap: 12px !important;
        column-gap: 24px !important;
        gap: 12px 24px !important;

        white-space: normal !important;

        left: 30px !important;
        right: 30px !important;
        width: calc(100% - 60px) !important;

        padding: 0 10px !important;
        margin: 0 !important;
    }

    /* كل عنصر تصنيف */
    header .right-side.mobile-main-nav .short-menu-items .main-menu-item,
    .right-side.mobile-main-nav .short-menu-items .main-menu-item {
        flex: 0 0 auto !important;

        margin: 0 !important;
        padding: 0 4px !important;

        white-space: nowrap !important;
    }

    /* الرابط نفسه */
    header .right-side.mobile-main-nav .short-menu-items .quicklinks-item,
    header .right-side.mobile-main-nav .short-menu-items a,
    .right-side.mobile-main-nav .short-menu-items .quicklinks-item,
    .right-side.mobile-main-nav .short-menu-items a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 3px 4px !important;

        white-space: nowrap !important;

        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;

        letter-spacing: 0 !important;
        word-spacing: 1px !important;
    }
}

/* الشاشات المكتبية الأضيق */
@media (min-width: 1024px) and (max-width: 1350px) {

    header .right-side.mobile-main-nav .short-menu-items,
    .right-side.mobile-main-nav .short-menu-items {
        row-gap: 10px !important;
        column-gap: 18px !important;
        gap: 10px 18px !important;

        left: 18px !important;
        right: 18px !important;
        width: calc(100% - 36px) !important;
    }

    header .right-side.mobile-main-nav .short-menu-items .quicklinks-item,
    header .right-side.mobile-main-nav .short-menu-items a,
    .right-side.mobile-main-nav .short-menu-items .quicklinks-item,
    .right-side.mobile-main-nav .short-menu-items a {
        font-size: 15px !important;
    }
}


/* =========================================================
   إصلاح نهائي للتصنيفات على الكمبيوتر
   إظهار جميع التصنيفات في صفين متساويين
   ========================================================= */

@media (min-width: 1024px) {

    /* اجعل حاوية التصنيفات شبكة من 6 أعمدة = صفين عند 12 تصنيف */
    header .right-side.mobile-main-nav .short-menu-items,
    .right-side.mobile-main-nav .short-menu-items {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        grid-auto-rows: auto !important;

        align-items: center !important;
        justify-items: center !important;

        row-gap: 10px !important;
        column-gap: 14px !important;
        gap: 10px 14px !important;

        top: 34px !important;
        left: 24px !important;
        right: 24px !important;
        width: calc(100% - 48px) !important;

        height: auto !important;
        max-height: none !important;
        min-height: 58px !important;

        overflow: visible !important;
        white-space: normal !important;

        padding: 0 6px !important;
        margin: 0 !important;
    }

    /* إجبار جميع التصنيفات المخفية/المنقولة على الظهور */
    header .right-side.mobile-main-nav .short-menu-items > *,
    .right-side.mobile-main-nav .short-menu-items > *,
    header .right-side.mobile-main-nav .short-menu-items li,
    .right-side.mobile-main-nav .short-menu-items li,
    header .right-side.mobile-main-nav .short-menu-items .main-menu-item,
    .right-side.mobile-main-nav .short-menu-items .main-menu-item,
    header .right-side.mobile-main-nav .short-menu-items .main-menu-item.in-short-menu,
    .right-side.mobile-main-nav .short-menu-items .main-menu-item.in-short-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: relative !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
        pointer-events: auto !important;
    }

    /* النص والرابط */
    header .right-side.mobile-main-nav .short-menu-items a,
    header .right-side.mobile-main-nav .short-menu-items a *,
    header .right-side.mobile-main-nav .short-menu-items .quicklinks-item,
    header .right-side.mobile-main-nav .short-menu-items .quicklinks-item *,
    .right-side.mobile-main-nav .short-menu-items a,
    .right-side.mobile-main-nav .short-menu-items a *,
    .right-side.mobile-main-nav .short-menu-items .quicklinks-item,
    .right-side.mobile-main-nav .short-menu-items .quicklinks-item * {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        max-width: 100% !important;

        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

        white-space: nowrap !important;

        margin: 0 !important;
        padding: 2px 3px !important;

        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* وفر ارتفاعًا كافيًا للهيدر لظهور الصف الثاني في الصفحات الداخلية */
    body:not(.index) header,
    body:not(.index) .store-header,
    body:not(.index) .main-header,
    body:not(.index) .s-header,
    body:not(.index) .s-header-v2 {
        min-height: 96px !important;
        overflow: visible !important;
    }
}

/* في الشاشات من 1024 إلى 1200 نحافظ على صفين بدون ازدحام */
@media (min-width: 1024px) and (max-width: 1200px) {

    header .right-side.mobile-main-nav .short-menu-items,
    .right-side.mobile-main-nav .short-menu-items {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        column-gap: 8px !important;
        row-gap: 8px !important;
        gap: 8px 8px !important;
        left: 12px !important;
        right: 12px !important;
        width: calc(100% - 24px) !important;
    }

    header .right-side.mobile-main-nav .short-menu-items a,
    header .right-side.mobile-main-nav .short-menu-items a *,
    .right-side.mobile-main-nav .short-menu-items a,
    .right-side.mobile-main-nav .short-menu-items a * {
        font-size: 13px !important;
    }
}
/* =========================================
   الصفحة الرئيسية فقط
   جعل التصنيفات في صف واحد
   بدون تغيير الألوان
   ========================================= */

body.home .quicklinks .short-menu-items,
body.index .quicklinks .short-menu-items,
body.page-home .quicklinks .short-menu-items {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 26px !important;
    width: 100% !important;
}

body.home .quicklinks .short-menu-items > li,
body.index .quicklinks .short-menu-items > li,
body.page-home .quicklinks .short-menu-items > li {
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}


/* =========================================
   باقي صفحات المتجر
   التصنيفات صفّين
   ========================================= */

body:not(.home):not(.index):not(.page-home) .quicklinks .short-menu-items {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 34px !important;
    row-gap: 14px !important;
}

body:not(.home):not(.index):not(.page-home) .quicklinks .short-menu-items > li {
    flex: 0 0 auto !important;
    width: auto !important;
}


/* الحفاظ على الروابط قابلة للنقر */

.quicklinks,
.quicklinks a,
.quicklinks li,
.quicklinks .main-menu-item,
.quicklinks .short-menu-items {
    pointer-events: auto !important;
}
/* =========================================================
   الصفحة الرئيسية فقط - صف واحد نهائي للتصنيفات
   لا يغير الألوان
   ========================================================= */

@media (min-width: 1024px) {

    body.index header
    .right-side.mobile-main-nav
    .short-menu-items {

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        grid-template-columns: none !important;
        grid-template-rows: none !important;

        align-items: center !important;
        justify-content: space-between !important;

        top: 38px !important;

        left: 18px !important;
        right: 18px !important;
        width: calc(100% - 36px) !important;

        gap: 6px !important;

        height: auto !important;
        min-height: 0 !important;

        padding: 0 !important;
        margin: 0 !important;

        white-space: nowrap !important;
        overflow: visible !important;
    }


    /* كل تصنيف يأخذ مساحة اسمه فقط */
    body.index header
    .right-side.mobile-main-nav
    .short-menu-items > *,

    body.index header
    .right-side.mobile-main-nav
    .short-menu-items li,

    body.index header
    .right-side.mobile-main-nav
    .short-menu-items
    .main-menu-item,

    body.index header
    .right-side.mobile-main-nav
    .short-menu-items
    .main-menu-item.in-short-menu {

        display: flex !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        flex: 0 0 auto !important;

        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap !important;
    }


    /* النصوص - بدون تغيير اللون */
    body.index header
    .right-side.mobile-main-nav
    .short-menu-items a,

    body.index header
    .right-side.mobile-main-nav
    .short-menu-items .quicklinks-item {

        width: auto !important;
        max-width: none !important;

        flex: 0 0 auto !important;

        font-size: 14px !important;
        font-weight: 700 !important;

        white-space: nowrap !important;

        margin: 0 !important;
        padding: 2px 2px !important;
    }
}

/* =========================================================
   إصلاح آمن ونهائي للنقر على الصف الثاني
   الصفحات الداخلية فقط
   بدون تغيير ارتفاع الهيدر أو الألوان أو شكل الصفوف
   ========================================================= */

@media (min-width: 1024px) {

    body:not(.index) header,
    body:not(.index) .store-header,
    body:not(.index) .main-header,
    body:not(.index) .s-header,
    body:not(.index) .s-header-v2 {
        position: relative !important;
        overflow: visible !important;
        z-index: 100000 !important;
        pointer-events: auto !important;
    }

    body:not(.index) .right-side.mobile-main-nav {
        position: static !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    body:not(.index)
    .right-side.mobile-main-nav
    .short-menu-items {
        position: absolute !important;
        z-index: 100010 !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    body:not(.index)
    .right-side.mobile-main-nav
    .short-menu-items > *,
    body:not(.index)
    .right-side.mobile-main-nav
    .short-menu-items li,
    body:not(.index)
    .right-side.mobile-main-nav
    .short-menu-items .main-menu-item {
        position: relative !important;
        z-index: 100011 !important;
        pointer-events: auto !important;
    }

    body:not(.index)
    .right-side.mobile-main-nav
    .short-menu-items a,
    body:not(.index)
    .right-side.mobile-main-nav
    .short-menu-items .quicklinks-item {
        position: relative !important;
        z-index: 100012 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    body:not(.index) header::before,
    body:not(.index) header::after,
    body:not(.index) .store-header::before,
    body:not(.index) .store-header::after,
    body:not(.index) .main-header::before,
    body:not(.index) .main-header::after,
    body:not(.index) .right-side.mobile-main-nav::before,
    body:not(.index) .right-side.mobile-main-nav::after,
    body:not(.index) .short-menu-items::before,
    body:not(.index) .short-menu-items::after {
        pointer-events: none !important;
    }
}
/* =========================================================
   إصلاح نهائي لنقر الصف الثاني - الصفحات الداخلية فقط
   بدون تغيير الشكل أو الألوان
   ========================================================= */

@media (min-width: 1024px) {

    /* إعطاء منطقة التصنيفات ارتفاعًا حقيقيًا */
    body:not(.index) .right-side.mobile-main-nav {
        position: relative !important;

        width: 100% !important;

        min-height: 82px !important;
        height: auto !important;

        overflow: visible !important;

        pointer-events: auto !important;

        z-index: 999999 !important;
    }


    /* إدخال الصفين فعليًا داخل مساحة الهيدر */
    body:not(.index)
    .right-side.mobile-main-nav
    .short-menu-items {

        position: relative !important;

        top: 34px !important;

        left: auto !important;
        right: auto !important;

        width: calc(100% - 48px) !important;

        margin-left: auto !important;
        margin-right: auto !important;

        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;

        row-gap: 10px !important;
        column-gap: 14px !important;

        overflow: visible !important;

        z-index: 1000000 !important;

        pointer-events: auto !important;
    }


    /* كل خانة من التصنيفات قابلة للنقر */
    body:not(.index)
    .right-side.mobile-main-nav
    .short-menu-items > *,

    body:not(.index)
    .right-side.mobile-main-nav
    .short-menu-items li,

    body:not(.index)
    .right-side.mobile-main-nav
    .short-menu-items
    .main-menu-item {

        position: relative !important;

        width: 100% !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        overflow: visible !important;

        pointer-events: auto !important;

        z-index: 1000001 !important;
    }


    /* الرابط نفسه يأخذ كامل مساحة التصنيف */
    body:not(.index)
    .right-side.mobile-main-nav
    .short-menu-items a,

    body:not(.index)
    .right-side.mobile-main-nav
    .short-menu-items
    .quicklinks-item {

        position: relative !important;

        display: flex !important;

        width: 100% !important;
        height: 100% !important;

        align-items: center !important;
        justify-content: center !important;

        pointer-events: auto !important;

        cursor: pointer !important;

        z-index: 1000002 !important;

        color: #000000 !important;
        text-shadow: none !important;
    }


    /* منع البنر أو المحتوى من تغطية الصف الثاني */
    body:not(.index) main,
    body:not(.index) main > section,
    body:not(.index) [class*="banner"],
    body:not(.index) [class*="slider"] {

        position: relative !important;

        z-index: 1 !important;
    }


    /* الهيدر أعلى من البنر بالكامل */
    body:not(.index) header,
    body:not(.index) .store-header,
    body:not(.index) .main-header,
    body:not(.index) .s-header,
    body:not(.index) .s-header-v2 {

        position: relative !important;

        min-height: 116px !important;

        overflow: visible !important;

        z-index: 999998 !important;
    }


    /* تعطيل أي طبقة وهمية قد تمنع النقر */
    body:not(.index) header::before,
    body:not(.index) header::after,
    body:not(.index) .store-header::before,
    body:not(.index) .store-header::after,
    body:not(.index) .main-header::before,
    body:not(.index) .main-header::after,
    body:not(.index) .right-side.mobile-main-nav::before,
    body:not(.index) .right-side.mobile-main-nav::after,
    body:not(.index) .short-menu-items::before,
    body:not(.index) .short-menu-items::after {

        pointer-events: none !important;
    }

}
/* إظهار صور المنتجات كاملة بدون قص */

.product-entry img,
.product-card img,
.product-block img,
.product-image img,
.product-entry__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #fff !important;
}

/* إعطاء مساحة مناسبة للصورة */
.product-entry .product-image,
.product-card .product-image,
.product-block .product-image {
    overflow: hidden !important;
    padding: 12px !important;
    box-sizing: border-box !important;
}
/* =========================================
   توحيد وعرض صور المنتجات بدون قص
   ========================================= */

.product-entry .product-image,
.product-card .product-image,
.product-block .product-image,
.product-entry__image,
.product-item .product-image {
    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
    background: #fff !important;
    padding: 18px !important;
    box-sizing: border-box !important;
}


/* الصورة نفسها */
.product-entry .product-image img,
.product-card .product-image img,
.product-block .product-image img,
.product-entry__image img,
.product-item .product-image img {

    width: auto !important;
    height: auto !important;

    max-width: 88% !important;
    max-height: 225px !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: auto !important;

    display: block !important;

    transform: none !important;
}
/* =========================================================
   تعديل قائمة الجوال + زر القائمة + أيقونة المستخدم
   روائع الخليجية للعود
   ========================================================= */

@media (max-width: 768px) {

    /* =========================
       قائمة التصنيفات الجانبية
       ========================= */

    #storemenu-panel {
        width: 76vw !important;
        max-width: 360px !important;
        min-width: 280px !important;

        right: 0 !important;
        left: auto !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        box-sizing: border-box !important;
    }


    /* =========================
       زر الثلاثة خطوط
       ========================= */

    #storemenu-panel-trigger {
        position: absolute !important;

        top: 18px !important;
        right: 14px !important;
        left: auto !important;

        width: 40px !important;
        height: 40px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        z-index: 10050 !important;
    }


    /* الثلاثة خطوط نفسها */
    #storemenu-panel-trigger span {
        display: block !important;

        width: 27px !important;
        height: 2px !important;

        min-width: 27px !important;

        margin: 3px 0 !important;

        border-radius: 5px !important;

        background: #000000 !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* =========================
       أيقونة المستخدم
       بجانب زر القائمة
       ========================= */

    .header__icons salla-user-menu {
        position: absolute !important;

        top: 17px !important;
        right: 58px !important;
        left: auto !important;

        width: 40px !important;
        height: 40px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        visibility: visible !important;
        opacity: 1 !important;

        z-index: 10050 !important;
    }


    .header__icons salla-user-menu .s-user-menu-trigger {
        width: 36px !important;
        height: 36px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* حجم صورة/أيقونة المستخدم */
    .header__icons salla-user-menu .s-user-menu-avatar-wrap,
    .header__icons salla-user-menu .s-user-menu-trigger-avatar {
        width: 28px !important;
        height: 28px !important;

        min-width: 28px !important;

        border-radius: 50% !important;
    }


    /* إخفاء اسم المستخدم و"حياك" في الهيدر */
    .header__icons salla-user-menu .s-user-menu-trigger-content,
    .header__icons salla-user-menu .s-user-menu-trigger-icon {
        display: none !important;
    }

}
/* =========================================================
   ضبط نهائي لهيدر الجوال
   أيقونة المستخدم + زر القائمة
   ========================================================= */

@media (max-width: 768px) {

    /* =========================================
       زر الثلاثة خطوط
       ========================================= */

    #storemenu-panel-trigger {
        position: absolute !important;

        top: 8px !important;
        right: 14px !important;
        left: auto !important;

        width: 38px !important;
        height: 38px !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 5px !important;

        padding: 0 !important;
        margin: 0 !important;

        overflow: visible !important;

        z-index: 100100 !important;
    }


    /* الخطوط الثلاثة */
    #storemenu-panel-trigger > span {
        display: block !important;

        position: static !important;

        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;

        height: 2px !important;
        min-height: 2px !important;
        max-height: 2px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        border: 0 !important;
        border-radius: 2px !important;

        background-color: #000000 !important;

        opacity: 1 !important;
        visibility: visible !important;

        flex: 0 0 2px !important;
    }


    /* =========================================
       نقل أيقونة المستخدم إلى يمين الشاشة
       ========================================= */

    header .header__icons salla-user-menu {
        position: fixed !important;

        top: 63px !important;
        right: 58px !important;

        left: auto !important;
        bottom: auto !important;

        width: 38px !important;
        min-width: 38px !important;

        height: 38px !important;
        min-height: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        transform: none !important;

        z-index: 100101 !important;

        visibility: visible !important;
        opacity: 1 !important;
    }


    header .header__icons salla-user-menu .s-user-menu-wrapper,
    header .header__icons salla-user-menu .s-user-menu-trigger-slot,
    header .header__icons salla-user-menu .s-user-menu-trigger {

        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        position: static !important;

        transform: none !important;
    }


    /* صورة الحساب */
    header .header__icons
    salla-user-menu
    .s-user-menu-avatar-wrap {

        width: 28px !important;
        height: 28px !important;

        min-width: 28px !important;

        margin: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }


    header .header__icons
    salla-user-menu
    .s-user-menu-trigger-avatar {

        width: 28px !important;
        height: 28px !important;

        min-width: 28px !important;

        display: block !important;

        object-fit: cover !important;

        border-radius: 50% !important;
    }


    /* إخفاء الاسم والسهم */
    header .header__icons
    salla-user-menu
    .s-user-menu-trigger-content,

    header .header__icons
    salla-user-menu
    .s-user-menu-trigger-icon {

        display: none !important;
    }

}
/* =========================================================
   إصلاح المحاذاة النهائية لأيقونات هيدر الجوال
   - زر القائمة على نفس خط بقية الأيقونات
   - أيقونة المستخدم تتحرك مع الهيدر ولا تبقى Fixed عند التمرير
   ========================================================= */
@media (max-width: 768px) {

    /* زر القائمة: نفس الارتفاع المرجعي لمجموعة الأيقونات */
    #storemenu-panel-trigger {
        position: absolute !important;
        top: 10px !important;
        right: 14px !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        z-index: 100100 !important;
    }

    #storemenu-panel-trigger > span {
        position: static !important;
        display: block !important;
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        height: 2px !important;
        min-height: 2px !important;
        max-height: 2px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        background: #000 !important;
        border: 0 !important;
        border-radius: 2px !important;
        flex: 0 0 2px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /*
       مهم: نلغي position:fixed السابق.
       الأيقونة تصبح مرتبطة بنفس الهيدر، لذلك عند النزول بالصفحة
       لن تنفصل عموديًا عن السلة والبحث والوضع الليلي.
    */
    header .header__icons salla-user-menu {
        position: absolute !important;
        top: -2px !important;
        left: calc(100vw - 153px) !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;

        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        visibility: visible !important;
        opacity: 1 !important;
        z-index: 100101 !important;
    }

    header .header__icons salla-user-menu .s-user-menu-wrapper,
    header .header__icons salla-user-menu .s-user-menu-trigger-slot,
    header .header__icons salla-user-menu .s-user-menu-trigger {
        position: static !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
    }
}

/* =========================================================
   ضبط أخير لمحاذاة هيدر الجوال - 2026/08/27
   الهدف:
   1) رفع زر الثلاثة خطوط إلى نفس مستوى السلة/البحث/الوضع الليلي
   2) تقريب أيقونة المستخدم من زر القائمة
   3) إبقاء أيقونة المستخدم مرتبطة بالهيدر عند التمرير
   ========================================================= */
@media (max-width: 768px) {

    /* رفع زر القائمة فقط بدون تغيير شكله أو عرضه */
    #storemenu-panel-trigger {
        top: -14px !important;
        right: 14px !important;
        left: auto !important;
        bottom: auto !important;

        transform: none !important;

        width: 38px !important;
        height: 38px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 5px !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 100200 !important;
    }

    /* إبقاء الخطوط الثلاثة متساوية تمامًا */
    #storemenu-panel-trigger > span {
        position: static !important;

        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;

        height: 2px !important;
        min-height: 2px !important;
        max-height: 2px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        flex: 0 0 2px !important;
    }

    /*
       أيقونة المستخدم:
       تبقى داخل الهيدر نفسه وليست fixed،
       وتتحرك إلى اليمين لتصبح ملاصقة لزر القائمة.
    */
    header .header__icons salla-user-menu {
        position: absolute !important;

        top: 0 !important;
        left: calc(100vw - 112px) !important;
        right: auto !important;
        bottom: auto !important;

        transform: none !important;

        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        visibility: visible !important;
        opacity: 1 !important;

        z-index: 100201 !important;
    }

    header .header__icons salla-user-menu .s-user-menu-wrapper,
    header .header__icons salla-user-menu .s-user-menu-trigger-slot,
    header .header__icons salla-user-menu .s-user-menu-trigger {
        position: static !important;

        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        transform: none !important;
    }
}


/* لون الخيار المحدد في صفحة المنتج */
.s-product-options-grid-mode input:checked + div,
.s-product-options-grid-mode input:checked + .s-product-options-grid-mode-span {
    background: #c89b5a !important;
    color: #ffffff !important;
    border-color: #c89b5a !important;
}

/* لون الخيارات غير المحددة */
.s-product-options-grid-mode-span {
    background: #ffffff !important;
    color: #222222 !important;
    border-color: #d8d8d8 !important;
}
/* ==========================================
   روائع الخليجية للعود - النص المتحرك
   ========================================== */

#oud-typing-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: 9999999;

    width: 90%;
    text-align: center;

    direction: rtl;
    pointer-events: none;
}


/* النص */
#oud-typing-text {
    display: inline-block;

    color: #ffffff;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.5;

    white-space: nowrap;

    text-shadow:
        0 2px 5px rgba(0,0,0,.55),
        0 0 15px rgba(0,0,0,.25);
}


/* مؤشر الكتابة */
#oud-typing-text::after {
    content: "|";
    display: inline-block;
    margin-right: 4px;

    animation: oudCursor .7s infinite;
}


/* وميض المؤشر */

@keyframes oudCursor {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }

}


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

@media (max-width: 767px) {

    #oud-typing-box {
        width: 94%;
    }

    #oud-typing-text {
        font-size: 25px;
        font-weight: 700;
        white-space: normal;
    }

}


/* شاشات الجوال الصغيرة */

@media (max-width: 380px) {

    #oud-typing-text {
        font-size: 22px;
    }

}
@media (max-width: 767px) {

    /* البنر الرئيسي */
    .main-slider,
    .s-slider-block__display,
    salla-slider,
    .swiper {
        height: calc(100vh - 120px) !important;
        min-height: calc(100vh - 120px) !important;
        overflow: hidden !important;
    }

    /* الشرائح داخل البنر */
    .main-slider .swiper-slide,
    .s-slider-block__display .swiper-slide,
    salla-slider .swiper-slide,
    .swiper .swiper-slide {
        height: 100% !important;
    }

    /* صورة البنر */
    .main-slider img,
    .s-slider-block__display img,
    salla-slider img,
    .swiper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

}

/* =========================================================
   روائع الخليجية للعود - فوتر نظيف نهائي
   قوس واحد فقط + نص أبيض
   يعتمد على الكلاسات التي يضيفها JavaScript
   ========================================================= */

.rg-footer-shell-final {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
    background: #050505 !important;
    background-color: #050505 !important;
    color: #ffffff !important;
    border-radius: 0 !important;
}

/* إلغاء أي pseudo قديم داخل الفوتر */
.rg-footer-shell-final::after,
.rg-footer-shell-final *::before,
.rg-footer-shell-final *::after {
    /* لا نلغي محتوى الأيقونات؛ نمنع فقط الخلفيات السوداء المتراكمة */
    background-color: transparent;
}

/* القوس الأسود الوحيد */
.rg-footer-shell-final::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: -1 !important;

    left: -3% !important;
    top: -58px !important;
    width: 106% !important;
    height: 100px !important;

    background: #050505 !important;
    background-color: #050505 !important;

    border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important;
    pointer-events: none !important;
}

/* كل محتوى الفوتر فوق القوس */
.rg-footer-shell-final > * {
    position: relative !important;
    z-index: 1 !important;
}

/* النصوص والروابط داخل الفوتر */
.rg-footer-shell-final,
.rg-footer-shell-final p,
.rg-footer-shell-final span,
.rg-footer-shell-final div,
.rg-footer-shell-final li,
.rg-footer-shell-final label,
.rg-footer-shell-final small,
.rg-footer-shell-final strong,
.rg-footer-shell-final h1,
.rg-footer-shell-final h2,
.rg-footer-shell-final h3,
.rg-footer-shell-final h4,
.rg-footer-shell-final a,
.rg-footer-shell-final a:visited,
.rg-footer-shell-final a:hover,
.rg-footer-shell-final a:focus {
    color: #ffffff !important;
    text-shadow: none !important;
}

.rg-footer-shell-final svg,
.rg-footer-shell-final svg *,
.rg-footer-shell-final i {
    color: #ffffff !important;
    stroke: currentColor !important;
}

.rg-footer-shell-final img {
    filter: none !important;
    opacity: 1 !important;
}

/* إزالة أي خلفية بيضاء داخلية */
.rg-footer-shell-final > div,
.rg-footer-shell-final > section,
.rg-footer-shell-final .container,
.rg-footer-shell-final .container-fluid {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* صف الدفع النهائي */
.rg-payment-row-final {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 8px auto 4px !important;
    padding: 0 6px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;

    grid-template-columns: none !important;
    grid-template-rows: none !important;
    scrollbar-width: none !important;
}

.rg-payment-row-final::-webkit-scrollbar {
    display: none !important;
}

.rg-payment-row-final > * {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;

    grid-column: auto !important;
    grid-row: auto !important;
}

.rg-payment-row-final img {
    display: block !important;
    width: auto !important;
    height: 24px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 52px !important;
    max-height: 24px !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 2px 4px !important;
    border-radius: 6px !important;
}

@media (max-width: 768px) {
    .rg-footer-shell-final::before {
        left: -8% !important;
        top: -40px !important;
        width: 116% !important;
        height: 78px !important;
    }

    .rg-footer-shell-final {
        padding-top: 12px !important;
        padding-bottom: 82px !important;
    }

    /* المقالات/الروابط تبقى عمودًا واحدًا */
    .rg-footer-shell-final ul,
    .rg-footer-shell-final nav {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 7px !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
    }

    .rg-footer-shell-final ul > li,
    .rg-footer-shell-final nav > * {
        width: 100% !important;
        max-width: 100% !important;
    }

    .rg-payment-row-final {
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 4px !important;
        overflow-x: hidden !important;
        padding: 0 4px !important;
    }

    .rg-payment-row-final img {
        height: 22px !important;
        max-height: 22px !important;
        max-width: 46px !important;
        padding: 2px 3px !important;
    }
}


/* =========================================================
   إطار الفوتر الأسود - قوس واحد فقط
   ========================================================= */

/* إلغاء أي أقواس سابقة على عناصر أخرى */
footer::before,
.store-footer::before,
.s-footer::before,
[class*="store-footer"]::before,
.rg-footer-shell::before {
    content: none !important;
    display: none !important;
}

/* الحاوية الخارجية فقط */
.rg-footer-black-shell {
    position: relative !important;

    background: #050505 !important;
    background-color: #050505 !important;

    color: #ffffff !important;

    border-radius: 0 !important;

    overflow: visible !important;

    isolation: isolate !important;

    margin-top: 72px !important;
}

/* القوس نصف الدائري */
.rg-footer-black-shell::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;

    z-index: -1 !important;

    left: -4% !important;
    top: -72px !important;

    width: 108% !important;
    height: 112px !important;

    background: #050505 !important;

    border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important;

    pointer-events: none !important;
}

/* ضمان أن المحتوى يبقى فوق القوس */
.rg-footer-black-shell > * {
    position: relative !important;
    z-index: 1 !important;
}

/* الكمبيوتر */
@media (min-width: 769px) {
    .rg-footer-black-shell {
        margin-top: 72px !important;
    }

    .rg-footer-black-shell::before {
        top: -72px !important;
        height: 112px !important;
        left: -4% !important;
        width: 108% !important;
    }
}

/* الجوال */
@media (max-width: 768px) {
    .rg-footer-black-shell {
        margin-top: 38px !important;
    }

    .rg-footer-black-shell::before {
        top: -38px !important;
        height: 66px !important;
        left: -8% !important;
        width: 116% !important;
    }
}


/* =========================================================
   شعار المتجر:
   - الصفحة الرئيسية: يبقى الشعار الأبيض كما هو
   - الصفحات الداخلية: تحويل الشعار إلى لون داكن ليظهر على الخلفية الفاتحة
   - لا يغيّر المقاس أو الموضع أو أي عنصر آخر
   ========================================================= */

/* الصفحة الرئيسية */
body.index header .navbar-brand img,
body.index header .store-logo img,
body.index header .logo img,
body.index header [class*="logo"] img,
body.index #mainnav .navbar-brand img,
body.index #main-nav .navbar-brand img {
    filter: none !important;
    -webkit-filter: none !important;
}

/* جميع الصفحات الداخلية */
body:not(.index) header .navbar-brand img,
body:not(.index) header .store-logo img,
body:not(.index) header .logo img,
body:not(.index) header [class*="logo"] img,
body:not(.index) #mainnav .navbar-brand img,
body:not(.index) #main-nav .navbar-brand img {
    filter: brightness(0) !important;
    -webkit-filter: brightness(0) !important;
}\n\n/* =========================================================\n   إصلاح نافذة العروض على الجوال - 2026-09-07\n   ملاحظة: التمركز والرفع الأساسيان ينفذهما JavaScript المعدل.\n   هذا الجزء احتياطي لضمان مساحة آمنة أسفل النافذة.\n   ========================================================= */\n@media (max-width: 991px) {\n    .rg-compact-offer-strip {\n        box-sizing: border-box !important;\n        max-height: calc(100dvh - 120px) !important;\n        padding-bottom: 18px !important;\n        overscroll-behavior: contain !important;\n        scrollbar-width: thin;\n    }\n}\n