/* 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: #025EBC !important;
    color: #fff !important;
}

.store-footer .store-footer__inner {
    background-color: #025EBC !important;
}

/* تغيير لون خلفية الموقع بالكامل إلى الأزرق الداكن */
body, 
#app, 
.app-inner, 
#main-content {
    background-color: #000712 !important;
}

:root {
    --color-bg: #000712 !important;
    --color-background: #000712 !important;
}

.s-product-card-entry {
   
    background-color: #000712;
}

.s-product-card-content-title a {
    color: #1f2937;
    color: rgb(253 253 253);
}
.s-product-card-price, .s-product-card-starting-price h4 {
    color: white;
}

section.s-block.s-block--banners.container div.grid a.banner-entry {
    width: 23%;
    background-color: transparent !important;
    border-radius: 0 !important;
    height: 351px !important;
}




d-size: contain !important;
    background-position: center !important;
}


/* 1. تجهيز الكروت والصور عشان الحركة تكون ناعمة وسلسة */
.s-block--banners:has(.lazy__bg[data-bg*="c4bcaa81"]) .banner-entry {
    transition: all 0.3s ease-in-out !important;
    border-radius: 12px !important; /* حواف دائرية عشان الظل يبان بشكل أنيق */
}

.s-block--banners:has(.lazy__bg[data-bg*="c4bcaa81"]) .lazy__bg {
    transition: transform 0.4s ease-in-out !important;
}

/* 2. تأثير الهوفر على الكارت نفسه (رفع لأعلى + إضاءة نيون خفيفة) */
.s-block--banners:has(.lazy__bg[data-bg*="c4bcaa81"]) .banner-entry:hover {
    transform: translateY(-8px) !important; /* بيرفع الكارت 8 بيكسل لأعلى */
    /* ظل أسود مع توهج أزرق فاتح يليق مع ألوان المتجر */
    box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.5), 0px 0px 15px rgba(0, 184, 255, 0.3) !important; 
    z-index: 10 !important; /* عشان الكارت يظهر فوق الباقي وهو بيتحرك */
}

/* 3. تأثير الهوفر على الصورة (تكبير من الداخل - زووم) */
.s-block--banners:has(.lazy__bg[data-bg*="c4bcaa81"]) .banner-entry:hover .lazy__bg {
    transform: scale(1.06) !important; /* بيكبر الصورة بنسبة 6% */
}

/* 1. استهداف السكشن وتحويله لصف أفقي لا ينكسر */
.s-block--banners:has(.lazy__bg[data-bg*="12ff3c53"]) .grid {
    display: flex !important;
    flex-wrap: nowrap !important; 
    overflow-x: auto !important; 
    gap: 15px !important; 
    padding-bottom: 20px !important;
}

/* إخفاء شريط التمرير */
.s-block--banners:has(.lazy__bg[data-bg*="12ff3c53"]) .grid::-webkit-scrollbar {
    height: 0px; 
    background: transparent;
}

/* 2. إعداد الكروت عشان تحافظ على حجمها وتتمدد براحتها */
.s-block--banners:has(.lazy__bg[data-bg*="12ff3c53"]) .banner-entry {
    flex: 0 0 auto !important; 
    
    /* تقدر تغير المقاسات دي زي ما تحب للكروت التلاتة */
    width: 350px !important; 
    height: 350px !important; 
    
    display: block !important;
    position: relative !important;
    transition: all 0.3s ease-in-out !important;
    border-radius: 12px !important; 
}

/* 3. ضبط الصورة الداخلية */
.s-block--banners:has(.lazy__bg[data-bg*="12ff3c53"]) .lazy__bg {
    width: 100% !important;
    height: 100% !important;
    background-size: contain !important;
    background-position: center !important;
    transition: transform 0.4s ease-in-out !important;
}

/* 4. تأثير الهوفر (رفع لأعلى + إضاءة + زووم) */
.s-block--banners:has(.lazy__bg[data-bg*="12ff3c53"]) .banner-entry:hover {
    transform: translateY(-8px) !important; 
    box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.5), 0px 0px 15px rgba(0, 184, 255, 0.3) !important; 
    z-index: 10 !important; 
}

.s-block--banners:has(.lazy__bg[data-bg*="12ff3c53"]) .banner-entry:hover .lazy__bg {
    transform: scale(1.06) !important; 
}


/* ========================================= */
/* تظبيط مقاسات السكشن الأول (4 كروت) على الموبايل */
/* ========================================= */

@media (max-width: 768px) {
    /* تقليل المسافات بين الكروت عشان تناسب حجم شاشة الموبايل */
    .s-block--banners:has(.lazy__bg[data-bg*="c4bcaa81"]) .grid {
        gap: 10px !important; 
        padding-bottom: 15px !important;
    }

    /* تصغير حجم الكروت */
    .s-block--banners:has(.lazy__bg[data-bg*="c4bcaa81"]) .banner-entry {
        /* المقاس ده هيخلي كارت ونص تقريباً يظهروا في الشاشة */
        flex: 0 0 240px !important; 
        width: 240px !important; 
        height: 240px !important; 
    }
    
    /* لو حابب تلغي تأثير الرفع (الهوفر) على الموبايل عشان الشاشات التاتش، فعل السطرين دول: */
    /* .s-block--banners:has(.lazy__bg[data-bg*="c4bcaa81"]) .banner-entry:hover {
        transform: none !important;
        box-shadow: none !important;
    } */
}


/* تقليل المسافات الرأسية بين الكروت في الموبايل */
@media (max-width: 768px) {
    section.s-block.s-block--banners.container div.grid {
        gap: 10px !important; /* تقليل المسافة العامة */
        row-gap: 10px !important; /* إجبار المتصفح على تقليل المسافة الرأسية تحديداً */
    }

    /* أحياناً الكروت نفسها بيكون ليها هامش سفلي بيزود المسافة، السطر ده بيلغيه */
    section.s-block.s-block--banners.container div.grid .banner-entry {
        margin-bottom: 0 !important; 
    }
}


@media (max-width: 768px) {
    /* تظبيط ارتفاع الإطار الخارجي ليطابق الصورة */
    section.s-block.s-block--banners.container div.grid a.banner-entry {
        height: 188px !important; /* نلغي الارتفاع الثابت الكبير */
        aspect-ratio: 16 / 9 !important; /* نسبة الطول للعرض عشان البوردر يقفل على الصورة (تقدر تغيرها لـ 4/3 لو الصورة مربعة شوية) */
    }

    /* إجبار الصورة إنها تملأ الإطار الجديد بالكامل */
    section.s-block.s-block--banners.container div.grid a.banner-entry .lazy__bg {
        background-size: cover !important; 
        background-position: center !important;
    }
}


@media (max-width: 768px) {
    /* 1. كسر حماية كلاس one-row وتحويله لشبكة من عمودين */
    section.s-block--banners div.grid.one-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* عمودين متساويين */
        gap: 10px !important;
    }

    /* 2. تظبيط الكارت نفسه عشان يقفل على الصورة */
    section.s-block--banners div.grid.one-row a.banner-entry {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important; /* لو صورك في السكشن ده مستطيلة، خليها 16 / 9 */
        margin: 0 !important;
    }

    /* 3. إجبار الصورة على تعبئة الكارت بالكامل (لإلغاء الفراغ الأسود) */
    section.s-block--banners div.grid.one-row a.banner-entry .lazy__bg {
        background-size: cover !important;
        background-position: center !important;
    }

    /* 4. لمسة احترافية: إجبار الكارت التالت إنه ياخد مساحة العمودين تحت عشان يقفل الشكل صح */
    section.s-block--banners div.grid.one-row a.banner-entry:nth-child(3) {
        grid-column: span 2 !important; 
        aspect-ratio: 21 / 9 !important; /* نسبة تناسب العرض الكامل عشان ميطلعش ممطوط */
    }
}

@media (max-width: 768px) {

  section.s-block--banners.container div.grid.one-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

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

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

}

@media (max-width: 768px) {
    /* 1. كسر حماية كلاس one-row وتحويله لشبكة من عمودين */
    section.s-block--banners div.grid.one-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* عمودين متساويين */
        gap: 10px !important;
    }

    /* 2. تظبيط الكارت نفسه عشان يقفل على الصورة */
    section.s-block--banners div.grid.one-row a.banner-entry {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important; /* لو صورك في السكشن ده مستطيلة، خليها 16 / 9 */
        margin: 0 !important;
    }

    /* 3. إجبار الصورة على تعبئة الكارت بالكامل (لإلغاء الفراغ الأسود) */
    section.s-block--banners div.grid.one-row a.banner-entry .lazy__bg {
        background-size: cover !important;
        background-position: center !important;
    }

    /* 4. لمسة احترافية: إجبار الكارت التالت إنه ياخد مساحة العمودين تحت عشان يقفل الشكل صح */
    section.s-block--banners div.grid.one-row a.banner-entry:nth-child(3) {
        grid-column: span 2 !important; 
        aspect-ratio: 21 / 9 !important; /* نسبة تناسب العرض الكامل عشان ميطلعش ممطوط */
    }
}