/* Add custom CSS styles below */ 

/* يرجع المنتجات تنزل تحت فوق الخلفية */
.slider-with-bg--4 .container.-mt-62 {
    margin-top: -180px !important;
    position: relative !important;
    z-index: 5 !important;
    bottom: 173px !important;
}

/* الجوال */
@media (max-width: 768px) {
    .slider-with-bg--4 .container.-mt-62 {
        margin-top: -120px !important;
    }
}

/* تخلي خلفية السكشن تظهر كاملة بكل المقاسات */
.slider-with-bg--4 .slider-bg {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 650px !important;
}

/* إصلاح خلفية الجوال بدون تخريب */
@media (max-width: 768px) {
    .slider-with-bg--4 .slider-bg {
        min-height: 620px !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
    /* المنتجات تكون فوق الجزء السفلي من الخلفية */
    .slider-with-bg--4 .container.-mt-62 {
        margin-top: -160px !important;
        position: relative !important;
        z-index: 3 !important;
    }
}

.s-block--slider-with-bg .slider-bg:before {
  height: 0% !important;
}

@media (min-width: 768px) {
    .navbar-brand img {
        height: 100px !important;
        width: auto;
        object-fit: contain;
    }
}

.header:first-of-type {
  display: none !important;
}

.swal2-container {
    z-index: 999999 !important; /* رفعه فوق الهيدر */
}


/* 🎯 10. ضبط ارتفاع السلايدر للجوال (450px) للرئيسي فقط 🎯 */
@media (max-width: 767px) {
    /* استهدفنا الـ Advanced Slider تحديداً لتجنب التأثير على سلايدر المنتجات */
    .advanced-slider__slide, 
    .advanced-slider__caption,
    .advanced-slider__image {
        height: 450px !important;
        min-height: 450px !important;
    }

    /* هذا يضمن أن الحاوية الأم تتبع هذا الارتفاع أيضاً */
    .advanced-slider {
        height: 450px !important;
    }

    /* إجبار الصور داخل السلايدر المتقدم فقط على التكيف */
    .advanced-slider .advanced-slider__image {
        height: 450px !important;
        object-fit: cover !important;
        object-position: center !important;
    }
}