/* تنسيق الأقسام لمتجر وشيج العود - آمن ودقيق */

/* تفعيل التنسيق المرن فقط للعناصر التي تلي بعضها مباشرة من نوع section */
/* هذا يضمن اصطفاف الأقسام بجانب بعضها دون التأثير على المنتجات */
main {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-content: space-between !important;
}

/* البنر الأول: عريض جداً مع مسافة سفلية 5px */
section.s-block--fixed-banner:nth-of-type(1) {
    width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
}

/* الأقسام من الثاني فصاعداً: مستطيلات متجاورة بمسافة 1px */
section.s-block--fixed-banner:nth-of-type(n+2) {
    /* حساب العرض بدقة لترك مسافة 1px في المنتصف */
    width: calc(50% - 0.5px) !important;
    flex: 0 0 calc(50% - 0.5px) !important;
    margin: 0 0 1px 0 !important; /* مسافة 1px عمودياً */
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* ضبط شكل المستطيل وإلغاء انحناء الزوايا */
section.s-block--fixed-banner:nth-of-type(n+2) .container, 
section.s-block--fixed-banner:nth-of-type(n+2) a.banner--fixed {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2 / 1 !important; 
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* ضمان تغطية الصورة للمساحة بالكامل */
section.s-block--fixed-banner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* حماية المنتجات: التأكد من أن حاويات المنتجات تأخذ العرض الكامل ولا تتأثر بالـ flex */
.s-block:not(.s-block--fixed-banner) {
    width: 100% !important;
    flex: 0 0 100% !important;
}

/* تنسيق الجوال */
@media (max-width: 767px) {
    section.s-block--fixed-banner:nth-of-type(n+2) {
        width: calc(50% - 0.5px) !important;
        flex: 0 0 calc(50% - 0.5px) !important;
    }
}