/* كود دقيق بناءً على صورة الفحص لتقسيم الصور لعمودين */
@media (max-width: 767px) {
    /* استهداف عنصر الشبكة (Grid) داخل قسم البنرات */
    .s-block--banners .grid, 
    .s-block--banners .two-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* إجبار التقسيم لعمودين */
        gap: 10px !important; /* مسافة بين الصور */
    }

    /* إصلاح عرض الصور داخل الشبكة */
    .s-block--banners .grid img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
}
/*
/* =========================================================
   نظام التوزيع الدقيق (بعد حساب البنر الرئيسي)
   الترتيب: 1=الرئيسي | 2,3=جوال | 4,5=كمبيوتر
   ========================================================= */

/* ---------------------------------------------------------
   1. إعدادات الكمبيوتر (إخفاء أقسام الجوال)
   نخفي القسم رقم 2 ورقم 3
   --------------------------------------------------------- */
@media (min-width: 768px) {
    /* إخفاء صور الجوال الأولى */
    .s-block--banners:nth-of-type(2) {
        display: none !important;
    }
    /* إخفاء صور الجوال الثانية */
    .s-block--banners:nth-of-type(3) {
        display: none !important;
    }
}

/* ---------------------------------------------------------
   2. إعدادات الجوال (إخفاء أقسام الكمبيوتر)
   نخفي القسم رقم 4 ورقم 5 (وما يليهم احتياطاً)
   --------------------------------------------------------- */
@media (max-width: 767px) {
    /* إخفاء صور الكمبيوتر الأولى */
    .s-block--banners:nth-of-type(4) {
        display: none !important;
    }
    /* إخفاء صور الكمبيوتر الثانية */
    .s-block--banners:nth-of-type(5) {
        display: none !important;
    }
    
    /* احتياطاً لو أضفت صوراً أخرى للكمبيوتر مستقبلاً */
    .s-block--banners:nth-of-type(6) {
        display: none !important;
    }
}

/* =========================================================
   إصلاح المسافات: إلصاق الصور ببعضها + مسافة في النهاية فقط
   ========================================================= */

/* 1. إجبار جميع أقسام البنرات على الالتصاق ببعضها (إلغاء الهوامش) */
.s-block--banners {
    margin-bottom: 0px !important; 
    padding-bottom: 0px !important;
}

/* 2. إضافة مسافة للجوال فقط (بعد القسم الأخير للجوال - رقم 3) */
@media (max-width: 767px) {
    .s-block--banners:nth-of-type(3) {
        margin-bottom: 40px !important; /* مسافة تدفع البنر اللي تحته */
    }
}

/* 3. إضافة مسافة للكمبيوتر فقط (بعد القسم الأخير للكمبيوتر - رقم 5) */
@media (min-width: 768px) {
    .s-block--banners:nth-of-type(5) {
        margin-bottom: 40px !important; /* مسافة تدفع البنر اللي تحته */
    }
/* ==========================================================
   إصلاح شامل 100%: توسيع المساحة + سطر واحد + قائمة منسدلة
   ========================================================== */
/* ==========================================================
   إصلاح جذري: إزالة خصائص الجوال من قائمة الكمبيوتر
   ========================================================= */
/* ==========================================================
   إصلاح نهائي: تنظيف القائمة + إخفاء عناصر الجوال الدخيلة
   ========================================================= */
/* ==========================================================
   تقسيم الهيدر إلى 3 مناطق منفصلة (لمنع التداخل مع الشعار)
   ========================================================= */
/* ==========================================================
   تقسيم الهيدر إلى 3 مناطق منفصلة (لمنع التداخل مع الشعار)
  @media (min-width: 992px) {
    /* 1. ضبط المحاذاة (عشان تكون مسطرة مع الشعار) */
    .site-header .header-wrapper,
    .site-header .container,
    .header-content {
        align-items: center !important;
    }

  
    /* 2. القائمة الرئيسية (مكانها وترتيبها) */
    .site-header .main-menu,
    #mobile-menu {
        flex: 0 0 55% !important;
        max-width: 60% !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. ترتيب العناصر في سطر واحد */
    .site-header .main-menu > ul,
    #mobile-menu > ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 15px !important;
        width: 100% !important;
        margin-top: -5px !important; /* الرفعة البسيطة للمحاذاة */

    /* =========================================
       6. تثبيت الشعار والأيقونات
       ========================================= */
    .site-header .logo, .header-logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    .site-header .header-tools {
        flex: 0 0 40% !important;
        justify-content: flex-end !important;
    }
    /* إخفاء خيارات الجوال */
    .mm-next, .mm-prev, .mm-navbar, .mm-title { display: none !important; }
}/* 3. محاذاة القائمة (الرفع للأعلى بقوة) */
.site-header .main-menu li a,
#mobile-menu li a {
    white-space: nowrap !important;
    font-size: 15px !important;
    
    /* تقريب الكلمات */
    padding: 10px 0 !important;
    margin: 0 4px !important;
    
    display: inline-flex !important;
    align-items: center !important;
    
    /* 🛑 هنا الحل الجذري 🛑 */
    position: relative !important; /* يسمح لنا بالتحريك الحر */
    
    /* الرقم بالسالب (-) يرفعها فوق */
    /* الرقم بالموجب (+) ينزلها تحت */
    top: -3px !important; 
}