/* =========================================
   BANNER - UNIFIED (DESKTOP + MOBILE)
   ========================================= */

:root {
    --hdr-h: 140px; /* fallback للديسكتوب */
}

@media (max-width: 767px) {
    :root { --hdr-h: 80px; } /* fallback للموبايل - عدّله حسب الهيدر عندك */
}

.home-slider,
.s-slider,
.banner,
section[class*="banner"] {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: var(--hdr-h) calc(50% - 50vw) 0 !important; /* ينزل تحت الهيدر + full width */
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
}

.home-slider img,
.s-slider img,
.banner img,
section[class*="banner"] img,
.home-slider picture,
.s-slider picture,
.banner picture,
section[class*="banner"] picture {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.home-slider img,
.s-slider img,
.banner img,
section[class*="banner"] img {
    object-fit: cover !important; /* بدل fill عشان الصورة ما تتمطش */
    aspect-ratio: auto !important;
}

.container:has(.home-slider),
.container:has(.s-slider),
.container:has(.banner),
.container:has(section[class*="banner"]) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}