/* Add custom CSS styles below */ 
/* Add custom CSS styles below */
body.index{background-color:#fff;}
.navbar-brand img {max-height: 5rem;}
body.index header.store-header + section.s-block.s-block--fixed-banner {
  margin-top:0 !important;
}
body.index salla-slider.photos-slider .swiper {
  padding-bottom: 0 !important;
}
[dir=rtl] .carousel-slider .swiper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
section.s-block.s-block--photos-slider {
  margin-top:0 !important;
}
section.s-block.s-block--photos-slider img {
  border-radius: 0 !important;
}
section.s-block.s-block--photos-slider .swiper-slide {
  margin: 0 !important;
  padding:0 !important; 
  width: 100% !important;
  border-radius: 0 !important;
}

/* Product */
.s-product-card-entry {
  border:1px solid #6D4937 !important;
  box-shadow: 0 0 5px 0px #68686894 !important;
}
.s-products-slider-card {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}
.s-slider-block__title h2 {
  color: #090909 !important;
}
.s-product-card-image {
  background-color:transparent !important;
}
.s-slider-nav-arrow {
  border-color: #6D4937 !important;
  background-color: #6D4937 !important;
}
.s-slider-nav-arrow svg, .s-slider-nav-arrow:not(:disabled):hover svg {
  fill: #ffffff !important;
}
.product-index-offers .s-products-list-vertical-cards,.product-index .s-products-list-vertical-cards {
 margin:0.2rem; 
}
/* End product */

.s-button-primary-outline {
  background-color: #6D4937 !important;
  color: #fff !important;
}


/**/
.s-block--fixed-banner .container {
  max-width:100% !important;
  padding:0 !important;
  margin: 0 !important;
}
.banner--fixed img {
  border-radius:0 !important;
  background-color: transparent !important;
}

/*** FLEX ***/
section.s-block.s-block--banners.container div.grid {
  display:flex !important;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
section.s-block.s-block--banners.container div.grid a.banner-entry {
  width: 20%;
  background-color: transparent !important;
  border-radius: 0 !important;
  height:375px !important;
}
@media(max-width:767px) {
  section.s-block.s-block--banners.container div.grid a.banner-entry {
    width: 31%;
    height: 180px !important;
  }
  .store-footer__inner * {
  justify-content: center;
  text-align: center;
}	
}
.banner-entry > div {
  background-size:contain !important;
  background-repeat: no-repeat;
}

.store-footer .store-footer__inner {
  background-color: #7E6551 !important;
}
.store-footer {
  color: #fff !important;
}


/* الكود الأصلي الخاص بك مع إضافة transition */
.lazy__bg.lazy.bg-no-repeat.entered.loaded {
    height: 296px;
    width: 248px;
    transition: transform 0.3s ease-in-out; /* تحديد مدة ونوع الحركة */
    cursor: pointer; /* لتوضيح أن العنصر قابل للتفاعل */
}

/* إضافة تأثير الهوفر */
.lazy__bg.lazy.bg-no-repeat.entered.loaded:hover {
    transform: scale(1.05); /* تكبير العنصر بنسبة 5% */
}

.s-button-primary-outline {
    background-color: #7E6551 !important;
    color: #fff !important;
}

.lazy__bg.lazy.bg-no-repeat.entered.loaded {
    height: 178px;
    width: 172px;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}

/* الكود الخاص بك مع تعديل العرض */
.lazy__bg.lazy.bg-no-repeat.entered.loaded {
    height: 109px;
    width: 108px;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    display: inline-block !important; /* يجعلها تقبل الوقوف بجانب بعضها */
    margin: 5px !important; /* مسافة بسيطة بين المربعات */
}

/* لإجبار الحاوية الأم على صفهم بجانب بعض */
.lazy__bg.lazy.bg-no-repeat.entered.loaded:parent, 
section.s-block .container { 
    display: flex !important;
    flex-wrap: wrap !important; /* ينزل للسطر التالي فقط إذا انتهت المساحة */
    justify-content: center !important; /* لتوسيطهم في الصفحة */
}


/* استهداف شاشات الجوال (أقل من 768 بكسل) */
@media (max-width: 767px) {
    /* 1. تحويل الحاوية إلى صف أفقي يسمح بالتمرير أو الرص بجانب بعض */
    section.s-block--banners .grid {
        display: flex !important;
        flex-direction: row !important; /* العناصر بجانب بعضها */
        flex-wrap: nowrap !important; /* منع العناصر من النزول لسطر جديد */
        overflow-x: auto !important; /* السماح بالتمرير الأفقي إذا زادت العناصر */
        gap: 10px !important; /* المسافة بين المربعات */
        padding: 10px 0 !important;
        grid-template-columns: none !important; /* إلغاء نظام الأعمدة */
    }

    /* 2. تثبيت مقاسات الكروت في الموبايل */
    section.s-block--banners .banner-entry {
        flex: 0 0 108px !important; /* منع الكارت من التمدد أو الانكماش عن 108 بكسل */
        width: 108px !important;
        height: 109px !important;
        display: block !important;
    }

    /* 3. ضبط الخلفية والصورة */
    section.s-block--banners .lazy__bg {
        width: 100% !important;
        height: 100% !important;
        background-size: cover !important;
        border-radius: 0px !important; /* زوايا حادة */
    }
}

/* إخفاء شريط التمرير (اختياري لجعل الشكل أنظف) */
section.s-block--banners .grid::-webkit-scrollbar {
    display: none;
}




.lazy__bg.lazy.bg-no-repeat.entered.loaded {
    height: 231px !important;
    width: 260px !important;
    transition: transform 0.3s ease-in-out !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin: 5px !important;
}


@media (max-width: 767px) {
    section.s-block.s-block--banners.container div.grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        flex-direction: unset !important;
        gap: 8px !important;
    }

    section.s-block.s-block--banners.container div.grid a.banner-entry {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1/1 !important;
    }

    section.s-block.s-block--banners.container div.grid a.banner-entry .lazy__bg {
        height: 100% !important;
        aspect-ratio: 1/1 !important;
        background-size: contain !important;
        background-position: center !important;
    }

   section.s-block.s-block--banners.container div.grid a.banner-entry .lazy__bg {
        width: 171px !important;
        height: 173px !important;
        background-size: contain !important;
        background-position: center !important;
        transition: transform 0.3s ease-in-out !important;
        cursor: pointer !important;
        display: inline-block !important;
        margin: 5px !important;
    }
}