/* ==================================================
   Sul4Hub – Clean & Fixed CSS (Processed)
   ✅ Includes: FINAL fix for product-entry__sub-title color
   ================================================== */

/* ------------------------------
   (1) Tabs / Custom Buttons
   ------------------------------ */
.btns-container{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  padding:18px 12px;
  margin:28px auto;
  flex-wrap:wrap;
}

.btns-container .tag-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  padding:14px 26px;
  border-radius:14px;
  border:1px solid rgba(64,143,180,.45);

  background:transparent;
  color:#408fb4;
  font-size:17px;
  font-weight:800;
  white-space:nowrap;

  cursor:pointer;
  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease,
    border-color .25s ease;
}

.btns-container .tag-btn:hover{
  background:rgba(64,143,180,.12);
  border-color:rgba(64,143,180,.9);
  color:#6fb6da;
  transform:translateY(-2px);
}

.btns-container .tag-btn.active{
  background:linear-gradient(135deg,#408fb4 0%,#34789a 100%);
  color:#ffffff;
  border-color:transparent;
  box-shadow:none;
}

/* 🔵 بدل البرتقالي → أزرق متناسق */
.btns-container .tag-btn.last-clicked{
  background:rgba(58,164,217,.18);        /* #3aa4d9 */
  border-color:#5bbdf0;
  color:#eaf6ff;
}

.btns-container .tag-btn.active.last-clicked{
  background:linear-gradient(135deg,#408fb4 0%,#34789a 100%);
  color:#ffffff;
  border-color:transparent;
}

.btns-container .tag-btn.active:hover{
  transform:none;
}

.btns-container .tag-btn.last-clicked:hover{
  background:rgba(58,164,217,.22);
  border-color:#5bbdf0;
  color:#ffffff;
  transform:none;
}

@media (max-width:768px){
  .btns-container{
    gap:10px;
  }

  .btns-container .tag-btn{
    padding:12px 20px;
    font-size:15px;
    border-radius:12px;
  }
}


/* ------------------------------
   (2) Dark Mode Background (safer)
   ------------------------------ */
html.dark #app{
  background-color:#1E232E !important;
}

html.dark .dark\:bg-dark{
  background-color:#1E232E !important;
}


/* ------------------------------
   (3) Product Card – custom-salla-product-card
   ------------------------------ */
custom-salla-product-card{
  background:#2a3850 !important;
  border:1px solid rgba(64,143,180,.28) !important;
  border-radius:15px !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  height:auto !important;
  padding-bottom:0 !important;
}

.swiper-slide{ height:auto !important; }

custom-salla-product-card .product-entry__image,
custom-salla-product-card .product-entry__thumb{
  overflow:hidden !important;
  border-radius:12px !important;
}

custom-salla-product-card .product-entry__image a,
custom-salla-product-card .product-entry__thumb a{
  display:block !important;
  width:100% !important;
  aspect-ratio:16/9 !important;
}

custom-salla-product-card .product-entry__image img,
custom-salla-product-card .product-entry__thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center top !important;
  display:block !important;
}

custom-salla-product-card .product-entry__content{
  display:flex !important;
  flex-direction:column !important;
  padding:8px 12px 6px !important;
}

custom-salla-product-card .product-entry__content .flex.flex-col.gap-1{
  gap:4px !important;
  width:99% !important;
  margin:0 auto !important;
  text-align:center !important;
  min-height:4.1em !important;
}

custom-salla-product-card .product-entry__title{
  margin:0 !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
}

custom-salla-product-card .product-entry__title a{
  color:#e9f6ff !important;
  text-decoration:none !important;
  transition:color .2s ease;

  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;

  min-height:2.7em !important;
}

custom-salla-product-card .product-entry__title a:hover{ color:#408fb4 !important; }

custom-salla-product-card .product-entry__subtitle{
  margin:0 !important;
  font-size:12px !important;
  opacity:.85 !important;
  line-height:1.4 !important;

  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:1 !important;
  overflow:hidden !important;

  min-height:1.4em !important;
}

custom-salla-product-card .product-entry__subtitle:empty::before{ content:"\00a0"; }

custom-salla-product-card .product-entry__content .flex.flex-col.gap-1::after{
  content:"";
  display:block;
  height:0;
}

/* ✅ Gold subtitle inside product cards */
custom-salla-product-card p.product-entry__subtitle{
  --tw-text-opacity: 1 !important;
  opacity: 1 !important;
  color: var(--pd-subtitle-custom-dark) !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
}

html:not(.dark) custom-salla-product-card p.product-entry__subtitle{
  color: var(--pd-subtitle-custom-light) !important;
}

.product-entry p.product-entry__subtitle,
.product-entry--vertical p.product-entry__subtitle,
.s-products-list p.product-entry__subtitle{
  --tw-text-opacity: 1 !important;
  opacity: 1 !important;
  color: var(--pd-subtitle-custom-dark) !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
}
html:not(.dark) .product-entry p.product-entry__subtitle,
html:not(.dark) .product-entry--vertical p.product-entry__subtitle,
html:not(.dark) .s-products-list p.product-entry__subtitle{
  color: var(--pd-subtitle-custom-light) !important;
}

/* السعر */
custom-salla-product-card .price-wrapper{
  margin:6px auto !important;
  justify-content:center !important;
  width:99% !important;
}

custom-salla-product-card .total-price{
  font-size:16px !important;
  font-weight:800 !important;
  color:#5abaf6 !important;
}

/* زر الإضافة */
custom-salla-product-card .add-to-cart-conatiner{
  width:92% !important;
  margin:8px auto 8px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}

custom-salla-product-card .add-to-cart-conatiner button.s-button-element,
custom-salla-product-card .add-to-cart-conatiner .s-button-element{
  width:100% !important;
  border-radius:12px !important;
  padding:10px 16px !important;
}

/* إخفاء زر المفضلة داخل الكرت فقط */
custom-salla-product-card .btn--wishlist,
custom-salla-product-card .heart-next-add-button{
  display:none !important;
}

/* ---- Out of stock ---- */
custom-salla-product-card .out-of-stock{ display:none !important; }
custom-salla-product-card .out-of-stock.hidden{ display:none !important; }

@supports(selector(:has(*))){
  custom-salla-product-card:has(.out-of-stock:not(.hidden)) .add-to-cart-conatiner{
    display:none !important;
  }
  custom-salla-product-card:has(.out-of-stock:not(.hidden)) .out-of-stock{
    display:flex !important;
    width:92% !important;
    margin:8px auto !important;
    min-height:44px !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(0,0,0,.25) !important;
    border-radius:10px !important;
    opacity:.75 !important;
  }
}

@media (max-width:768px){
  custom-salla-product-card .product-entry__title{ font-size:13px !important; }
  custom-salla-product-card .add-to-cart-conatiner{ width:94% !important; }
  @supports(selector(:has(*))){
    custom-salla-product-card:has(.out-of-stock:not(.hidden)) .out-of-stock{ width:94% !important; }
  }
}


/* ==================================================
   (4) Product Page – Variables & Styles
   ================================================== */
:root{
  --pd-text-light: rgba(15, 23, 42, .92);
  --pd-text-dark:  rgba(255, 255, 255, .92);

  --pd-card-bg-light: rgba(2, 6, 23, .03);
  --pd-card-bd-light: rgba(15, 23, 42, .10);

  --pd-card-bg-dark: rgba(255,255,255,.03);
  --pd-card-bd-dark: rgba(255,255,255,.10);

  --pd-card-pad: 18px;

  --pd-discount-bg-light: rgba(0, 138, 216, 0.10);
  --pd-discount-bd-light: rgba(0, 138, 216, 0.25);
  --pd-discount-tx-light: rgba(15, 23, 42, 0.95);

  --pd-discount-bg-dark:  rgba(0, 138, 216, 0.18);
  --pd-discount-bd-dark:  rgba(0, 138, 216, 0.35);
  --pd-discount-tx-dark:  rgba(255, 255, 255, 0.95);

  --pd-cols-gap: 18px;

  --pd-badge-tx: #eaf4ff;
  --pd-badge-bd: rgba(120, 210, 255, 0.25);
  --pd-badge-font: 15px;
  --pd-badge-pad-y: 10px;
  --pd-badge-pad-x: 16px;
  --pd-badge-radius: 12px;

  /* ذهبي للعنوان الترويجي */
  --pd-subtitle-custom-light: rgba(250, 204, 21, .95);
  --pd-subtitle-custom-dark:  rgba(250, 204, 21, .92);

  /* لون “تم شراؤه ... مرة” */
  --pd-purchases-light: rgba(185, 28, 28, .78);
  --pd-purchases-dark:  rgba(252, 165, 165, .78);
}


/* --------------------------------------------------
   (A-EXTRA) subtitle داخل صفحة المنتج فقط
   -------------------------------------------------- */
html:not(.dark) .product-details-col .product-entry__subtitle{
  color: var(--pd-subtitle-custom-light) !important;
  font-weight: 800 !important;
  --tw-text-opacity: 1 !important;
  opacity: 1 !important;
}
html.dark .product-details-col .product-entry__subtitle{
  color: var(--pd-subtitle-custom-dark) !important;
  font-weight: 800 !important;
  --tw-text-opacity: 1 !important;
  opacity: 1 !important;
}


/* ==================================================
   ✅ Model Number Frame (FULL ROW)
   - Frame includes "رقم الموديل" + value
   ================================================== */
.product-details-col
ul.product-metadata.flex.flex-col.gap-2.product-details__item
> li.product-metadata__item-mini:not(.visually-hidden):has(> strong, > span.opacity-80){
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;

  padding: 10px 14px !important;
  margin: 10px 0 !important;

  border-radius: 14px !important;
  background: var(--pd-card-bg-dark) !important;
  border: 1px solid var(--pd-card-bd-dark) !important;
}

html:not(.dark)
.product-details-col
ul.product-metadata.flex.flex-col.gap-2.product-details__item
> li.product-metadata__item-mini:not(.visually-hidden):has(> strong, > span.opacity-80){
  background: var(--pd-card-bg-light) !important;
  border: 1px solid var(--pd-card-bd-light) !important;
}

.product-details-col
ul.product-metadata.flex.flex-col.gap-2.product-details__item
> li.product-metadata__item-mini:not(.visually-hidden):has(> strong, > span.opacity-80)
> span.opacity-80{
  --tw-text-opacity: 1 !important;
  opacity: 1 !important;
}


/* --------------------------------------------------
   (B) وصف المنتج (الكرت)
   -------------------------------------------------- */
.product-details-col .leading-6{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  padding: 14px var(--pd-card-pad) !important;
  margin-top: 14px !important;
  margin-bottom: 1.25em !important;

  line-height: 1.9 !important;
  font-size: 1.05rem !important;
  position: relative !important;
}

.product-details-col .leading-6::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 14px !important;
  pointer-events: none !important;
}

html:not(.dark) .product-details-col .leading-6::before{
  background: var(--pd-card-bg-light) !important;
  border: 1px solid var(--pd-card-bd-light) !important;
}
html:not(.dark) .product-details-col .leading-6{
  color: var(--pd-text-light) !important;
}

html.dark .product-details-col .leading-6::before{
  background: var(--pd-card-bg-dark) !important;
  border: 1px solid var(--pd-card-bd-dark) !important;
}
html.dark .product-details-col .leading-6{
  color: var(--pd-text-dark) !important;
}

.product-details-col .leading-6 > *{
  position: relative !important;
  z-index: 1 !important;
  padding: 0 !important;
}

.product-details-col .leading-6 p{ margin: 0 0 10px !important; }
.product-details-col .leading-6 p:empty{ display:none !important; }
.product-details-col .leading-6 p br:only-child{ display:none !important; }

.product-details-col .leading-6 ul,
.product-details-col .leading-6 ol{
  margin: 10px 0 12px !important;
  padding-inline-start: 22px !important;
}
.product-details-col .leading-6 li{
  margin: 6px 0 !important;
  list-style: disc !important;
}

.product-details-col .leading-6 img{
  width: 100% !important;
  height: auto !important;
  display:block !important;
  margin: 12px 0 !important;
  border-radius: 12px !important;
}


/* --------------------------------------------------
   ✅ FIX: Discount Code Card Styling (safe)
   -------------------------------------------------- */
@supports(selector(:has(*))){
  .product-details-col .leading-6 span:has(a){
    position: relative !important;
    z-index: 1 !important;

    display: block !important;
    width: 100% !important;

    padding: 12px 14px !important;
    margin-top: 12px !important;

    border-radius: 14px !important;
    font-weight: 800 !important;
    line-height: 1.7 !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;

    background: var(--pd-discount-bg-dark) !important;
    border: 1px solid var(--pd-discount-bd-dark) !important;
    color: var(--pd-discount-tx-dark) !important;

    box-shadow: none !important;
  }

  html:not(.dark) .product-details-col .leading-6 span:has(a){
    background: var(--pd-discount-bg-light) !important;
    border: 1px solid var(--pd-discount-bd-light) !important;
    color: var(--pd-discount-tx-light) !important;
  }

  .product-details-col .leading-6 span:has(a) svg,
  .product-details-col .leading-6 span:has(a) img,
  .product-details-col .leading-6 span:has(a) i{
    display:none !important;
  }

  .product-details-col .leading-6 span:has(a) a{
    color: inherit !important;
    text-decoration: underline !important;
    font-weight: 800 !important;
  }
}

/* fallback قديم */
.product-details-col .leading-6 span[style*="0, 138, 216"]{
  position: relative !important;
  z-index: 1 !important;

  display: block !important;
  width: 100% !important;

  padding: 12px 14px !important;
  margin-top: 12px !important;

  border-radius: 14px !important;
  font-weight: 800 !important;
  line-height: 1.7 !important;

  white-space: normal !important;
  overflow-wrap: anywhere !important;

  box-shadow: none !important;
}
.product-details-col .leading-6 span[style*="0, 138, 216"]::before,
.product-details-col .leading-6 span[style*="0, 138, 216"]::after{
  content:none !important;
  display:none !important;
}
.product-details-col .leading-6 span[style*="0, 138, 216"] svg,
.product-details-col .leading-6 span[style*="0, 138, 216"] img,
.product-details-col .leading-6 span[style*="0, 138, 216"] i{
  display:none !important;
}
html:not(.dark) .product-details-col .leading-6 span[style*="0, 138, 216"]{
  background: var(--pd-discount-bg-light) !important;
  border: 1px solid var(--pd-discount-bd-light) !important;
  color: var(--pd-discount-tx-light) !important;
}
html.dark .product-details-col .leading-6 span[style*="0, 138, 216"]{
  background: var(--pd-discount-bg-dark) !important;
  border: 1px solid var(--pd-discount-bd-dark) !important;
  color: var(--pd-discount-tx-dark) !important;
}
.product-details-col .leading-6 span[style*="0, 138, 216"] a{
  color: inherit !important;
  text-decoration: underline !important;
  font-weight: 800 !important;
}


/* --------------------------------------------------
   (D) لون نص "تم شراؤه ... مرة"
   -------------------------------------------------- */
html:not(.dark) .product-details-col .leading-6 + *{
  color: var(--pd-purchases-light) !important;
  font-weight: 700 !important;
}
html.dark .product-details-col .leading-6 + *{
  color: var(--pd-purchases-dark) !important;
  font-weight: 700 !important;
}
.product-details-col .leading-6 + ul.product-metadata{
  color: inherit !important;
  font-weight: inherit !important;
}


/* --------------------------------------------------
   (E) تقسيم الأعمدة (Desktop)
   -------------------------------------------------- */
@media (min-width: 1024px){
  .container--product-single .flex.flex-col.lg\:flex-row.items-start,
  .flex.flex-col.lg\:flex-row.lg\:pb-16.items-start{
    gap: var(--pd-cols-gap) !important;
    align-items: flex-start !important;
  }

  .container--product-single .main-content,
  .container--product-single .product-details-col{
    margin: 0 !important;
  }

  .container--product-single .main-content,
  .flex.flex-col.lg\:flex-row.lg\:pb-16.items-start > .main-content{
    flex: 0 0 38% !important;
    max-width: 38% !important;
    width: 38% !important;
  }

  .container--product-single .product-details-col,
  .flex.flex-col.lg\:flex-row.lg\:pb-16.items-start > .product-details-col{
    flex: 0 0 62% !important;
    max-width: 62% !important;
    width: 62% !important;
  }
}


/* --------------------------------------------------
   (F) منطقة الصور – إزالة الخلفيات/الحدود بدون تخريب السلايدر
   -------------------------------------------------- */
.main-content,
.images-wrapper,
.images-wrapper .details-slider,
salla-slider.details-slider,
salla-slider.details-slider .swiper,
salla-slider.details-slider .s-slider-container,
salla-slider.details-slider .swiper-wrapper,
salla-slider.details-slider .magnify-wrapper,
.images-wrapper .details-slider .swiper-slide{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* تكبير الصورة */
.images-wrapper .details-slider .homeslider__slide{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}
.images-wrapper .details-slider .homeslider__slide img{
  max-width: 96% !important;
  max-height: 96% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  filter: none !important;
}
@media (max-width: 768px){
  .images-wrapper .details-slider .homeslider__slide img{
    max-width: 98% !important;
    max-height: 98% !important;
  }
}

/* شارة العرض على الصورة */
.images-wrapper{ position: relative !important; }
.images-wrapper > .promotion-title{
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;

  display: inline-flex !important;
  width: fit-content !important;
  max-width: calc(100% - 32px) !important;

  align-items: center !important;
  justify-content: center !important;

  padding: var(--pd-badge-pad-y) var(--pd-badge-pad-x) !important;
  margin: 0 !important;

  font-size: var(--pd-badge-font) !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  border-radius: var(--pd-badge-radius) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  background: #3aa4d9 !important;
  color: var(--pd-badge-tx) !important;
  border: 1px solid var(--pd-badge-bd) !important;

  box-shadow: 0 10px 22px rgba(0,0,0,.28) !important;
  transform: none !important;
  z-index: 9999 !important;
  pointer-events: none !important;
}
.images-wrapper > .promotion-title.\!top-0{ top: 16px !important; }
.images-wrapper > .promotion-title svg,
.images-wrapper > .promotion-title img,
.images-wrapper > .promotion-title i{ display:none !important; }


/* ==================================================
   (5) Default Avatar (safer approach)
   ================================================== */
img[src*="avatar_male.png"],
img[src*="avatar_female.png"]{
  content: url("https://cdn.salla.sa/form-builder/r5PU20xLUwLcBMbZLsFKvjZfOAVqQzX8auzbET7m.png") !important;
  object-fit: cover !important;
}


/* ==================================================
   (6) Section Title with Side Lines
   ================================================== */
.s-block__title{
  position: relative !important;
  width: 100% !important;
  padding: 28px 0 !important;
}
.s-block__title .right-side{
  width: 100% !important;
  text-align: center !important;
}
.s-block__title .right-side > h2{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;

  gap: 18px !important;
  margin: 0 auto 6px !important;

  font-weight: 800 !important;
  line-height: 1.5 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.s-block__title .right-side > h2::before,
.s-block__title .right-side > h2::after{
  content: "" !important;
  height: 1px !important;
  flex: 1 1 auto !important;
  opacity: .28 !important;
  background: currentColor !important;
}
.s-block__title .right-side > p{
  margin: 0 !important;
  font-size: .95rem !important;
  opacity: .72 !important;
}

/* لايت */
html:not(.dark) .s-block__title .right-side > h2{ color: #0f172a !important; }
html:not(.dark) .s-block__title .right-side > h2::before,
html:not(.dark) .s-block__title .right-side > h2::after{ opacity: .22 !important; }
html:not(.dark) .s-block__title .right-side > p{ color: rgba(15,23,42,.72) !important; }

/* دارك */
html.dark .s-block__title .right-side > h2{ color: #e6f1ff !important; }
html.dark .s-block__title .right-side > h2::before,
html.dark .s-block__title .right-side > h2::after{ opacity: .26 !important; }
html.dark .s-block__title .right-side > p{ color: rgba(255,255,255,.72) !important; }

@media (max-width: 768px){
  .s-block__title{ padding: 22px 0 !important; }
  .s-block__title .right-side > h2{
    gap: 12px !important;
    font-size: 1.05rem !important;
  }
}

/* ==================================================
   ✅ FINAL OVERRIDE (Place at very end)
   Fix: "مع تمارا أسهل" color not changing
   Scope: Product page only
   ================================================== */
/* ✅ Fix: لون "مع تمارا أسهل" فقط */
h3.product-entry__sub-title.text-sm.opacity-60.leading-6.mb-2\.5{
  color:#2159b6 !important;
  --tw-text-opacity: 1 !important;
  opacity: 1 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  padding: 0 !important;
  margin: 0 0 8px !important;

  display: inline-block !important;
  width: auto !important;
}

/* احتياط: لو فيه ستايل يضيف خطوط/زخرفة */
h3.product-entry__sub-title::before,
h3.product-entry__sub-title::after{
  content: none !important;
  display: none !important;
}

/* ==================================================
   Statistics Block (Dark/Light) - Background + Text
   Target: عنوان "إحصائيات المتجر" والوصف تحته
   ================================================== */

/* لايت: خلّه مثل ما هو (أبيض/رمادي فاتح) + نص غامق واضح */
html:not(.dark) .s-block--statistics{
  background-color: #f8fafc !important;  /* فاتح نظيف */
}

/* الدارك: خلفية مخصصة (بدل #1b2334) */
html.dark .s-block--statistics{
  background-color: #0f172a !important;  /* كحلي غامق أنيق */
}

/* ✅ تثبيت لون النص داخل العمود الأيسر (العنوان + الوصف) */
html:not(.dark) .s-block--statistics .s-block__title .right-side h2{
  color: #0f172a !important;
}
html:not(.dark) .s-block--statistics .s-block__title .right-side p{
  color: rgba(15, 23, 42, .72) !important;
}

/* دارك: نص فاتح وواضح */
html.dark .s-block--statistics .s-block__title .right-side h2{
  color: #e6f1ff !important;
}
html.dark .s-block--statistics .s-block__title .right-side p{
  color: rgba(230, 241, 255, .72) !important;
}

/* (اختياري بسيط) عنوان "إحصائياتنا" الصغير */
html.dark .s-block--statistics .s-block__title .right-side > span{
  color: #6fb6da !important;
}


/* ==================================================
   Fixed Banners – Mobile Layout Fix
   - عرض بنرين متجاورين
   - تصغير البنرات قليلًا
   ================================================== */

/* على الجوال فقط */
@media (max-width: 768px){

  /* تحويل الجريد إلى عمودين */
  .s-block--fixed-banner .grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* إظهار بنرات الجوال فقط */
  .s-block--fixed-banner .banner.block.md\:hidden{
    display: block !important;
  }

  /* تصغير البنر نفسه */
  .s-block--fixed-banner .banner{
    border-radius: 12px !important;
  }

  /* تصغير الصورة داخل البنر مع الحفاظ على الجودة */
  .s-block--fixed-banner .banner img{
    width: 100% !important;
    height: auto !important;
    transform: scale(0.96);      /* تصغير خفيف */
    transform-origin: center;
  }
}

/* شاشات أصغر جدًا (اختياري – تحسين إضافي) */
@media (max-width: 420px){
  .s-block--fixed-banner .banner img{
    transform: scale(0.94);
  }
}