/* Add custom CSS styles below */ 
 :root {
    --main-color: #366d94;
    --white-color: white;
    --black-color:black;
}

/********************* body ************************/

body{
    background-color:var(--white-color);
}
/********************* header ************************/
i.header-btn__icon.icon.sicon-cart, i.header-btn__icon.sicon-user {
    color: var(--main-color);
    background-color: var(--white-color);
    border-radius: 20px;
}
.inner.bg-inherit {
    background-color: var(--main-color);
}
span.header-btn__icon.icon.sicon-search {
    color: var(--white-color);
}
/************  slider **************/
body.index > div.app-inner > .s-block.banners-slider.banners-slider--0.slide:first-of-type {
    margin-top: 20px !important;
}
@media (max-width: 480px){
  body.index > div.app-inner > .s-block.banners-slider.banners-slider--0.slide:first-of-type {
    margin-top: 0px !important;
}
}




المنتجات
/************  products **************/

button.s-button-element.s-button-btn.s-button-outline.s-button-sm.s-button-wide.s-button-primary-outline {
        background-color:  var(--main-color);
    border-radius:30px;
    color:var(--white-color);

}
button.s-button-element.s-button-btn.s-button-outline.s-button-sm.s-button-wide.s-button-primary-outline:hover{
     background-color: var(--main-color);

}
/************  Section 2 **************/
@media (max-width: 480px){
  salla-slider .slide--one-fourth{
    max-width:150px;
}
}


/************  Features **************/
.s-block--enhanced-features__item.group.overflow-hidden {
    background-color: var(--main-color);
    color:var(--white-color);
}

.s-block--enhanced-features__item h2 {
    color:white;
}
 .s-block--enhanced-features__item p{
     display:none;
 }
@media (max-width: 380px){
    .s-block--enhanced-features__item.group.overflow-hidden{
        padding-block:5px
    }
    section.s-block.s-block--enhanced-features.container .grid {
        gap:3px
    }
}

/************ footer **************/

.store-footer__inner{
     position: relative;
    margin-top:15rem;
    background-color:#366d94!important;
    color:white
}

.store-footer__inner::before {
    content:"";
    position:absolute;
    background-image:url("https://i.postimg.cc/rpZtNVRt/f.png");
    width: 100%;
    height: 290px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    left:50%;
    t;
    top: -100px!important;
    transform: translate(-50%, -50%);
}


@media (max-width: 767px){
  
    .store-footer__inner{
    margin-top:60px;
}
    /* .store-footer__inner::before {
    content:"";
    position:absolute;
    background-image:url("https://i.postimg.cc/rpZtNVRt/f.png");
    width: 100%;
    height: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    left:0%;
    top: -158px!important;
    transform:translatey(-50%);
}   */
    
.store-footer__inner::before {
    content:"";
    position:absolute;
    background-image:url("https://i.postimg.cc/rpZtNVRt/f.png");
     width: 100%;
     height: 100px;
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
     left:50%;
     top: -28px!important;
     transform: translate(-50%, -50%);
    
}
}

/* moved out of CSS - was breaking the next rule */


/*==================================================================
  تحسين ثبات الصفحة (CLS) — أُضيف في 7 سبتمبر 2026
  السبب: CLS مقاس 0.47-0.61 (المقبول اقل من 0.1)
  الهدف: حجز مساحة العناصر التي تُحمّل متأخرة لمنع قفز المحتوى
==================================================================*/

/* 1) حجز مساحة كتل صفحة المنتج التي تُحمّل متأخرة */
.s-blocks-wrapper.simplified-products{min-height:600px}
.s-blocks-wrapper.product-more-info{min-height:265px}
@media (max-width:768px){
  .s-blocks-wrapper.simplified-products{min-height:460px}
}

/* 2) حجز مساحة سلايدر المنتجات قبل تهيئة Swiper */
.s-products-slider-slider .s-slider-container:not(.swiper-initialized){min-height:540px}
@media (max-width:768px){
  .s-products-slider-slider .s-slider-container:not(.swiper-initialized){min-height:420px}
}

/* 3) شبكة أمان: منع انهيار التخطيط عند فشل تهيئة سلايدر المنتجات
      (رُصدت حالة وصل فيها ارتفاع السلايدر الى 7433 بكسل) */
.s-products-slider-slider .s-slider-container:not(.swiper-initialized){max-height:640px;overflow:hidden}
@media (max-width:768px){
  .s-products-slider-slider .s-slider-container:not(.swiper-initialized){max-height:500px}
}

/* 4) تثبيت نسب الصور (69 صورة من 171 بلا width/height) */
.product-single__slide-image{aspect-ratio:1/1;object-fit:cover}
.s-product-card-image img{aspect-ratio:1/1;object-fit:cover}

/* 5) عزل تخطيط بطاقات المنتجات لمنع اعادة الحساب المتسلسل */
.s-products-slider-card{contain:layout}
/*================= نهاية تحسين CLS =================*/

/*--- ضبط اضافي بعد القياس (المرحلة 2) ---*/
/* معرض صور المنتج: الشرائح مربعة 1:1 - حجز مستقل عن عرض الشاشة */
.details-slider .homeslider__slide{aspect-ratio:1/1}
/* شريط الصور المصغرة اسفل المعرض */
salla-slider.details-slider{min-height:0}
/* ضبط دقيق لارتفاع كتلة المنتجات المشابهة (المقاس الفعلي 609px) */
.s-blocks-wrapper.simplified-products{min-height:610px}
/* حجز مساحة كتلة التقييمات قبل تحميلها */
salla-comments:not(.hydrated){display:block;min-height:190px}
/*--- نهاية المرحلة 2 ---*/

/*--- المرحلة 3: منع تذبذب كتلة المنتجات المشابهة ---
  رُصد ان الكتلة تنكمش 446px ثم تتمدد 392px خلال ملي ثانيتين
  عند تهيئة السلايدر، مما يحرك كل ما تحتها مرتين.
  الحل: تثبيت ارتفاعها حتى تكتمل التهيئة ثم تحريرها. */
.s-blocks-wrapper.simplified-products{max-height:620px;overflow:hidden}
.s-blocks-wrapper.simplified-products:has(.swiper-initialized){max-height:none;overflow:visible}
/*--- نهاية المرحلة 3 ---*/