/* Add custom CSS styles below */ 
/* إزالة الشيب/الموجة من البنر */
.full-banner-entry:before,
.full-banner-entry:after {
    display: none !important;
    opacity: 0 !important;
}

/* ضبط البنر بدون قص */
.full-banner-entry {
    overflow: visible !important;
}



/* =========================
   2) تعديل سكشن المميزات
   ========================= */

/* حذف أي خلفية أو إطار */
.s-block--features_item,
.s-block--features__item,
.s-block--features__item-inner {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* تقليل المسافات */
.s-block--features_item,
.s-block--features__item-inner {
    padding: 8px 0 !important;
}

/* ضبط الأيقونة والنص ليكونوا مدمجين */
.s-block--features__icon {
    background: none !important;
    box-shadow: none !important;
}

/* إلغاء أي مسافة بين سكشن المميزات وسكشن العروض */

/* سكشن المميزات */
section.s-block--features {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* سكشن العروض */
section#best-offers-2-slider,
section.s-block--best-offers {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* تقليل أي مساحات عامة فوق وتحت الأقسام */
section.s-block {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}




/******************************************
  حركة للكارت عند الهوفر (best offers + كل الكروت)
******************************************/

/* الكارت نفسه */
.s-product-card-entry,
.product-card-entry,
.m-product-card,
[class*="product-card-entry"] {
    border-radius: 18px;                 /* لو حابب زوايا ناعمة */
    overflow: hidden;
    transition: transform .25s ease,
                box-shadow .25s ease;
    will-change: transform;
}

/* هوفر: الكارت يتحرك لفوق شوية ويتعمله ظل خفيف */
.s-product-card-entry:hover,
.product-card-entry:hover,
.m-product-card:hover,
[class*="product-card-entry"]:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 14px 28px rgba(0,0,0,0.12);
}

/******************************************
  تكبير بسيط لصورة المنتج عند الهوفر
******************************************/

.s-product-card-image img,
.product-card-image img,
[class*="product-card-image"] img {
    transition: transform .3s ease;
}

/* لما نعدّي بالماوس على الكارت */
.s-product-card-entry:hover .s-product-card-image img,
.product-card-entry:hover .product-card-image img,
.m-product-card:hover .product-card-image img,
[class*="product-card-entry"]:hover [class*="product-card-image"] img {
    transform: scale(1.06);
}



/******************************************
 🔹 تأثير الحركة على بنرات الأقسام — تصغير عند الهوفر
******************************************/

/* الحاوية العامة للبنر */
.banner-entry {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    transition: transform .25s ease, box-shadow .25s ease;
    will-change: transform;
}

/* عند المرور — تصغير لطيف + ظل خفيف */
.banner-entry:hover {
    transform: translateY(-4px) scale(.96);
    box-shadow: 0 12px 28px rgba(0,0,0,.14);
}

/******************************************
 🔹 حركة الصورة داخل البنر
******************************************/
.banner-entry img {
    transition: transform .35s ease;
}

/* تصغير الصورة بدل التكبير */
.banner-entry:hover img {
    transform: scale(.95);
}

/******************************************
 🔹 طبقة تعتيم خفيفة للنص (اختياري — لطيف)
******************************************/
.banner-entry:after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background .3s ease;
}

.banner-entry:hover:after {
    background: rgba(0,0,0,.10);
}


/* =========================================================
   START: SALLA FULL BANNER (MOBILE – NO QUALITY LOSS)
   ========================================================= */

@media (max-width: 768px) {

  /* سكشن البنر نفسه */
  .s-block--full-banner {
    height: 140px !important;       /* عدلها: 90 / 110 / 130 */
    min-height: 140px !important;
    max-height: 140px !important;
    overflow: hidden !important;
  }

  /* العنصر اللي عليه background-image */
  .s-block--full-banner .full-banner-entry {
    height: 100% !important;
    min-height: 100% !important;

    background-size: cover !important;      /* بدون تشويه */
    background-position: center center !important;
    background-repeat: no-repeat !important;

    transform: none !important;
    filter: none !important;
  }

  /* المحتوى اللي فوق البنر (النص + الزر) */
  .s-block--full-banner .overlay {
    opacity: 0.6 !important; /* سيبه أو عدله حسب وضوح النص */
  }

}

/* =========================================================
   END: SALLA FULL BANNER (MOBILE – NO QUALITY LOSS)
   ========================================================= */


/* =========================================================
   START: SALLA FEATURES (MOBILE – ONE ROW + ULTRA COMPACT)
   ========================================================= */

@media (max-width: 768px){

  /* سكشن المميزات */
  section.s-block--features{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* الجريد: نخليه صف واحد أفقي */
  section.s-block--features > .grid{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;                 /* مسافة صغيرة جدا */
    overflow-x: auto !important;         /* سكرول أفقي ناعم */
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 4px 2px !important;
  }

  /* نخفي شكل السكرول (اختياري) */
  section.s-block--features > .grid::-webkit-scrollbar{
    height: 0 !important;
  }

  /* كل عنصر: حجم صغير جداً */
  section.s-block--features .s-block--features__item{
    flex: 0 0 auto !important;
    width: 115px !important;             /* عدّلها: 95 / 110 / 130 */
    min-width: 115px !important;
    padding: 6px 6px !important;         /* الحشو صغير جدا */
    margin: 0 !important;
    text-align: center !important;
    scroll-snap-align: start;
    border-radius: 10px !important;
  }

  /* الأيقونة */
  section.s-block--features .s-block--features__item img,
  section.s-block--features .s-block--features__item svg{
    width: 28px !important;
    height: 28px !important;
    margin: 0 auto 4px !important;
  }

  /* العنوان */
  section.s-block--features .s-block--features__item h2,
  section.s-block--features .s-block--features__item .title,
  section.s-block--features .s-block--features__item strong{
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  /* الوصف */
  section.s-block--features .s-block--features__item p{
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin: 2px 0 0 !important;
    opacity: .85;
  }
}

/* =========================================================
   END: SALLA FEATURES (MOBILE – ONE ROW + ULTRA COMPACT)
   ========================================================= */
/* =========================================================
   START: FIX FEATURES CENTER (MOBILE)
   - توسيط عناصر المميزات في الموبايل
   ========================================================= */

@media (max-width: 768px){

  /* الحاوية اللي فيها عناصر المميزات */
  section.s-block--features > .grid{
    display: flex !important;
    flex-wrap: nowrap !important;              /* خليهم في صف واحد */
    justify-content: space-evenly !important;  /* توزيع متساوي + توسيط */
    align-items: center !important;
    width: 100% !important;
    gap: 0 !important;                         /* نشيل الجاب لو بيبوّظ التوسيط */
  }

  /* كل عنصر ميزة */
  section.s-block--features .s-block--features__item{
    text-align: center !important;
    margin: 0 !important;
  }

  /* توسيط الأيقونة */
  section.s-block--features .s-block--features__item .icon,
  section.s-block--features .s-block--features__item img,
  section.s-block--features .s-block--features__item svg{
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
}

/* =========================================================
   END: FIX FEATURES CENTER (MOBILE)
   ========================================================= */