/* 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: #6D4937 !important;
}
.store-footer {
  color: #fff !important;
}


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


.store-footer .store-footer__inner {
    background-color: #56143C !important;
}


.s-block--banners .grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

.s-block--banners .banner-entry {
    flex: 1 !important;
    min-width: 0 !important;
}


/* حل مشكلة تداخل النصوص وجعل الأقسام قابلة للتمرير الأفقي على الجوال */
@media (max-width: 768px) {
    /* تفعيل التمرير الأفقي للحاوية الكبيرة التي تجمع الأقسام */
    div.lazy__bg.lazy.bg-no-repeat.entered.loaded {
        width: 100px !important; /* هذا العرض المناسب جداً ليظهر النص كاملاً بدون انضغاط */
        height: 180px !important; 
        background-size: contain !important;
        background-position: center !important;
        flex-shrink: 0 !important; /* يمنع المتصفح من ضغط الأيقونة أفقياً */
    }

    /* كود إضافي للتأكد من أن الصف بالكامل يقبل السحب الجانبي ولا ينزل لسطر جديد */
    .home-sections .banners-grid, 
    div.lazy__bg.lazy.bg-no-repeat.entered.loadedHeader,
    [class*="banners"] {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 10px !important;
        gap: 12px !important; /* مسافة بسيطة وممتازة بين الأيقونات */
    }

    /* إخفاء شريط التمرير المشوه ليظل المظهر أنيقاً */
    .home-sections .banners-grid::-webkit-scrollbar,
    [class*="banners"]::-webkit-scrollbar {
        display: none !important;
    }
}

/* كود ضبط عرض النصوص ومنع قص الكلمات على الجوال */
@media (max-width: 768px) {
    
    /* استهدف عنصر النص الموضح في لوحة الفحص */
    h3.text-with-border {
        width: 100% !important; /* إلغاء العرض الثابت والسماح للنص بالفرد */
        max-width: 100% !important;
        min-width: 100% !important;
        
        padding-left: 2px !important; /* تصفير وتقليل المسافات الجانبية المخنوقة */
        padding-right: 2px !important;
        
        font-size: 13px !important; /* حجم خط مثالي ومتناسق لمنع خروج الحروف */
        white-space: normal !important; /* السماح للكلمات بالالتفاف بشكل صحيح */
        overflow: visible !important; /* إجبار المتصفح على إظهار الحروف كاملة وعدم إخفائها */
    }
}