/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 

/* =============================== */
/* حل نهائي لمشكلة CLS في الصفحة الرئيسية لمواقع سلة */
/* =============================== */

/* 1) ضبط السلايدر الرئيسي - Hero Slider */
.s-block--hero-slider .swiper-lazy-wrap,
.s-block--hero-slider .swiper-slide {
    min-height: 100px !important; /* ارتفاع افتراضي لتجنب CLS */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2) البانرات الثابتة Fixed Banner */
.s-block--fixed-banner .swiper-lazy-wrap,
.s-block--fixed-banner .swiper-slide {
    min-height: 100px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3) أقسام البانرات التي بدون سلايدر (banners) */
.s-block--banners .lazy,
.s-block--banners .swiper-lazy-wrap {
    min-height: 80px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 4) صور العروض (Best Offers Sliders) */
.s-block--best-offers .swiper-slide {
    min-height: 240px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 5) منع الصورة من تكبير أو قص أو تغيير الأبعاد */
/* هذا يحافظ على الصورة كاملة */
.s-block img.lazy,
.s-block img.swiper-lazy,
.s-block img.loaded {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* 6) تحسين ظهور الصور مع اللايزي لود بدون shifts */
.swiper-lazy-wrap {
    position: relative;
    overflow: hidden;
}

/* 7) حل مشكلة الانتقال المفاجئ عند تحميل الصور */
img.lazy {
    opacity: 0;
}
img.lazy.loaded {
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
}


.salla-advertisement {
  top: 1rem;
  bottom: auto;
}



section.brands div {
  border-radius: 1.5rem !important;
}

@media screen and (min-width: 50px) and (max-width: 765px) {
  section.s-block.paddingminus {
    margin-top: -70px !important;
    z-index: 1 !important;
  }
}

.s-block--fixed-banner {
  padding-top: 10px;
  padding-bottom: 0px;
}

.swiper-pagination {
  bottom: 40px !important;
}