/* Add custom CSS styles below */ 
/* =========================================
   TOKENS (single source of truth)
========================================= */
:root{
  --brand:#2a2f33;
  --brand-color:#2a2f33;
  --brand-hover:#1b2024;
  --muted:rgba(42,47,51,.16);
  --heart-brand:#2a2f33;
}

/* =========================================
   PRODUCT DESCRIPTION (container + content)
========================================= */
.product__description{
  --desc-max:64ch;
  max-width:var(--desc-max);
  font-size:16px;
  line-height:1.9;
  color:var(--text-dark, #2a2f33);
  padding-block:10px 18px !important;
  position:relative; /* for clamp fade */
}

/* Section heads */
.product__description h3{
  margin:18px 0 10px;
  font-weight:800;
  font-size:1.05rem;
  line-height:1.6;
  letter-spacing:.2px;
  position:relative;
  padding-bottom:6px;
}
.product__description h3::after{
  content:"";
  position:absolute;
  inset-inline:0 80%;
  bottom:0;
  height:3px;
  border-radius:2px;
  background:var(--brand-color, #2a2f33);
  opacity:.9;
}

/* Lists */
.product__description ul{
  margin:8px 0 14px;
  padding:0;
  list-style:none;
}
.product__description li{
  position:relative;
  padding-inline-start:1.55em;
  margin:6px 0;
}

/* Images inside description */
.product__description img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:10px;
  background:#f7f8f9;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  margin:14px auto;
}

/* =========================================
   SECTION TITLES (global) + 3 styles
========================================= */
.s-block__title{ margin-block:clamp(18px,3.2vw,42px); }
.s-block__title .right-side{ width:100%; display:grid; place-items:center; }
.s-block__title .right-side h2{
  margin:0; text-align:center; font-weight:800;
  font-size:clamp(22px, 2.2vw + 10px, 42px);
  line-height:1.15; color:var(--brand);
  padding-bottom:clamp(10px,1.2vw,16px);
  position:relative; isolation:isolate;
}

/* STYLE 1 — Centerline + tiny caps */
.s-title--center-1 .right-side h2::before,
.s-title--center-1 .right-side h2::after{
  content:""; position:absolute; inset-block-start:55%;
  height:2px; width:clamp(44px,12vw,180px);
  background:var(--muted); transform:translateY(-50%); z-index:-1;
}
html[dir="rtl"] .s-title--center-1 .right-side h2::before{ inset-inline-start:100%; }
html[dir="rtl"] .s-title--center-1 .right-side h2::after { inset-inline-end:100%; }
html[dir="ltr"] .s-title--center-1 .right-side h2::before{ inset-inline-end:100%; }
html[dir="ltr"] .s-title--center-1 .right-side h2::after { inset-inline-start:100%; }
.s-title--center-1 .right-side h2:after,
.s-title--center-1 .right-side h2:before{ pointer-events:none; }

/* STYLE 2 — Capsule badge + soft shadow */
.s-title--center-2 .right-side h2{
  display:inline-block; padding:.5em 1.1em .6em;
  border:1px solid var(--muted); border-radius:999px;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(120%) blur(2px);
  box-shadow:0 6px 22px rgba(0,0,0,.06);
}
.s-title--center-2 .right-side h2::before,
.s-title--center-2 .right-side h2::after{
  content:""; position:absolute; inset-block-end:0; height:6px; width:36px;
  background:linear-gradient(90deg, transparent, var(--muted), transparent);
  transform:translateY(100%);
}
html[dir="rtl"] .s-title--center-2 .right-side h2::before{ inset-inline-start:12%; }
html[dir="rtl"] .s-title--center-2 .right-side h2::after { inset-inline-end:12%; }
html[dir="ltr"] .s-title--center-2 .right-side h2::before{ inset-inline-end:12%; }
html[dir="ltr"] .s-title--center-2 .right-side h2::after { inset-inline-start:12%; }

/* STYLE 3 — Highlight bar + center diamond */
.s-title--center-3 .right-side h2{ padding-bottom:.5em; }
.s-title--center-3 .right-side h2::after{
  content:""; position:absolute; inset-inline:22%; inset-block-end:0;
  height:6px; border-radius:6px;
  background:linear-gradient(90deg, rgba(42,47,51,.10), rgba(42,47,51,.30), rgba(42,47,51,.10));
}
.s-title--center-3 .right-side h2::before{
  content:""; position:absolute; inset-block-end:-3px; inset-inline-start:50%;
  width:10px; height:10px; transform:translateX(-50%) rotate(45deg);
  background:#fff; border:2px solid var(--brand); border-radius:2px;
}
@media (hover:hover){
  .s-title--center-3 .right-side h2:hover::after{ inset-inline:18%; }
  .s-title--center-1 .right-side h2{ transition:letter-spacing .2s ease; }
  .s-title--center-1 .right-side h2:hover{ letter-spacing:.2px; }
}

/* -----------------------------------------
   :has() FALLBACK (optional helper class)
   Use class="s-title-divider" on the .s-block
----------------------------------------- */
.s-block.s-title-divider .s-block__title{
  display:flex; align-items:center; gap:12px; margin-bottom:10px;
}
.s-block.s-title-divider .s-block__title h2{
  font-weight:900; letter-spacing:.2px; margin:0;
}
.s-block.s-title-divider .s-block__title::after{
  content:""; flex:1; height:1px; background:#ececec; border-radius:1px;
}

/* =========================================
   PRODUCT GALLERY (details / image sliders)
========================================= */
/* Canvas */
.details-slider .s-slider-container,
.image-slider  .s-slider-container{
  background:#f7f7f8; border-radius:14px; padding:10px;
}
/* Predictable height */
.details-slider .s-slider-container .swiper-wrapper,
.image-slider  .s-slider-container .swiper-wrapper{ min-height:420px; }
@media (max-width:768px){
  .details-slider .s-slider-container .swiper-wrapper,
  .image-slider  .s-slider-container .swiper-wrapper{ min-height:320px; }
}
/* Images */
.details-slider img,
.image-slider img,
.homeslider__slide img{
  width:100%; height:100%;
  object-fit:contain !important; object-position:center;
}
/* Wishlist pin */
.details-slider .btn--wishlist,
.image-slider  .btn--wishlist{
  position:absolute; inset-inline-end:12px; top:12px; z-index:5;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.15));
}
/* Thumbs */
.s-slider-thumbs .swiper-slide{
  width:84px !important; aspect-ratio:1/1; border-radius:10px; overflow:hidden;
  background:#f1f3f5; border:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.s-slider-thumbs .swiper-slide img{
  width:100%; height:100%; object-fit:contain; background:#fff;
}
.s-slider-thumbs .swiper-slide:hover{ border-color:rgba(42,47,51,.35); }
.s-slider-thumbs .swiper-slide-thumb-active{
  border-color:var(--brand-color, #2a2f33);
  /* baseline ring (works everywhere) */
  box-shadow:0 0 0 2px rgba(42,47,51,.18);
}
/* upgrade ring where color-mix is supported */
@supports (color: color-mix(in srgb, black, white)) {
  .s-slider-thumbs .swiper-slide-thumb-active{
    box-shadow:0 0 0 2px color-mix(in srgb, var(--brand-color, #2a2f33) 20%, transparent);
  }
}

/* =========================================
   PRICE / QUANTITY / CTA CARDS
========================================= */
section.sticky-product-bar,
section.center-between,
section.price-wrapper,
section[class*="bg-white"].p-5{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.05);
}
/* Price */
.price-wrapper .total-price{
  font-size:clamp(1.2rem, 1.1rem + .6vw, 1.6rem);
  letter-spacing:.2px;
}
.price-wrapper .before-price{ color:#9aa1a7; }
/* Quantity */
.s-quantity-input-container{
  border:1px solid #e6e8ea; border-radius:999px; padding-inline:6px; min-height:42px;
}
.s-quantity-input-button{ width:38px; height:38px; border-radius:999px; }
.s-quantity-input-input{ min-width:44px; text-align:center; font-weight:700; }
/* CTA */
.s-add-product-button-with-sticky-bar .s-button-element,
.product-form .s-button-element.s-button-primary{
  border-radius:999px !important; font-weight:800; height:48px; letter-spacing:.2px;
  background:var(--brand-color, #2a2f33) !important;
}
.s-add-product-button-with-sticky-bar .s-button-element:hover{
  background:var(--brand-hover, #1b2024) !important;
}
/* Mobile: not fixed at bottom (per your change) */
@media (max-width: 768px){
  .sticky-product-bar{ 
    position: static !important;
    bottom: auto !important;
    z-index: auto !important;
    backdrop-filter: none !important;
  }
}

/* =========================================
   DESCRIPTION CLAMP + TOGGLE (no text restyle)
========================================= */
/* Collapsed */
.product__description.is-collapsed .article--main{
  max-height:var(--desc-collapsed, 12em); /* ≈5–6 lines */
  overflow:hidden;
}
/* Fade */
.product__description.is-collapsed::after{
  content:""; position:absolute; inset:auto 0 0 0; height:56px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  pointer-events:none;
}
/* Toggle button (contrast) */
.desc-toggle{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  margin-top:10px; padding:9px 16px;
  font-weight:700; font-size:14px; line-height:1;
  color:var(--brand); background:#fff;
  border:1px solid var(--brand); border-radius:999px; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.desc-toggle:hover{
  background:var(--brand); color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  transform:translateY(-1px);
}
.desc-toggle:active{ transform:translateY(0); box-shadow:0 3px 8px rgba(0,0,0,.12); }

/* =========================================
   VERTICAL PRODUCTS LIST (unified)
========================================= */
.s-products-list.vertical-products{
  --card-radius:16px;
  --gap-mobile:6px;  /* denser mobile grid */
  --gap-desktop:16px;
  --shadow:0 4px 16px rgba(0,0,0,.06);
}
/* Title row with divider when paired (modern) */
.s-block:has(> salla-products-list.vertical-products) .s-block__title{
  display:flex; align-items:center; gap:12px; margin-bottom:10px;
}
.s-block:has(> salla-products-list.vertical-products) .s-block__title h2{
  font-weight:900; letter-spacing:.2px; margin:0;
}
.s-block:has(> salla-products-list.vertical-products) .s-block__title::after{
  content:""; flex:1; height:1px; background:#ececec; border-radius:1px;
}
/* Card */
.s-products-list.vertical-products .s-product-card-entry{
  border-radius:var(--card-radius); background:#fff; box-shadow:var(--shadow); overflow:hidden;
}
/* Image box */
.s-products-list.vertical-products .s-product-card-image{
  aspect-ratio:1/1; display:grid; place-items:center; background:#f7f7f7;
}
.s-products-list.vertical-products .s-product-card-image img{
  max-width:100%; max-height:100%; object-fit:contain; object-position:center;
}
/* Content spacing */
.s-products-list.vertical-products .s-product-card-content{ padding:8px 10px 10px; }
.s-products-list.vertical-products .s-product-card-content-title a{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-weight:800;
}
.s-products-list.vertical-products .s-product-card-content-sub{ margin-top:6px; }
.s-products-list.vertical-products .s-product-card-content-footer{ margin-top:8px; }
/* Grid */
.s-products-list.vertical-products .s-products-list-vertical-cards{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--gap-mobile); align-items:stretch; margin-top:6px;
}
@media (max-width:768px){
  .s-products-list.vertical-products .s-product-card-content{ padding:6px 8px 8px; }
  .s-products-list.vertical-products .s-product-card-content-title a{ font-size:.9rem; line-height:1.22; }
  .s-products-list.vertical-products .s-product-card-sale-price h4,
  .s-products-list.vertical-products .s-product-card-price{ font-size:.95rem; line-height:1.15; }
  .s-products-list.vertical-products .s-product-card-sale-price span{ font-size:.75rem; }
}
@media (min-width:992px){
  .s-products-list.vertical-products .s-products-list-vertical-cards{
    grid-template-columns:repeat(4,1fr); gap:var(--gap-desktop);
  }
  .s-products-list.vertical-products .s-product-card-entry{ transition:transform .18s ease; }
  .s-products-list.vertical-products .s-product-card-entry:hover{ transform:translateY(-2px); }
}

/* =========================================
   CATEGORIES / COLLECTIONS (round icons)
========================================= */
.s-block.s-block--banners{
  --cat-circle:96px; --cat-gap:12px;
  --label-gap:38px; --label-lines:3;
  --label-width-factor-mobile:1.10; --label-pad-x-mobile:6px; --label-align:center;
}
.s-block.s-block--banners .s-block__title h2{
  margin:0 0 10px; font-weight:900; letter-spacing:.2px; text-align:center;
}
/* Grid */
.s-block.s-block--banners .grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--cat-gap);                  /* master gap */
  row-gap:calc(var(--cat-gap) + 6px);  /* ✅ keep the tighter spacing */
  column-gap:14px;
  justify-items:center;
  justify-content:center;
  align-items:start;
}
@media (min-width:768px){
  .s-block.s-block--banners{ --cat-circle:112px; --cat-gap:16px; }
  .s-block.s-block--banners .grid{
    grid-template-columns:repeat(auto-fit, minmax(calc(var(--cat-circle) + 24px), 1fr));
    max-width:calc( (var(--cat-circle) + 24px) * 8 + var(--cat-gap) * 7 );
    margin-inline:auto;
  }
}
@media (min-width:1200px){ .s-block.s-block--banners{ --cat-circle:120px; } }
/* Tile */
.s-block.s-block--banners .banner-entry{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:8px 4px; text-align:center; text-decoration:none;
  background:transparent !important; box-shadow:none !important; border-radius:0 !important;
  aspect-ratio:auto !important; min-height:0; overflow:visible !important;
  width:calc(var(--cat-circle) + 0px);
}
.s-block.s-block--banners .banner-entry.has-overlay::before,
.s-block.s-block--banners .banner-entry.with-hover::after{ display:none !important; }
.s-block.s-block--banners .banner-entry .text-with-border{
  position:static !important; margin:var(--label-gap) 0 0 !important; inset:auto !important;
  transform:none !important; background:transparent !important; opacity:1 !important; z-index:auto !important;
}
/* Circle image */
.s-block.s-block--banners .banner-entry .lazy__bg{
  inline-size:var(--cat-circle); block-size:var(--cat-circle);
  border-radius:50%; background-repeat:no-repeat;
  background-position:50% 40% !important; background-size:cover !important; background-color:#efe6ff;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.s-block.s-block--banners .banner-entry.focal-center .lazy__bg{ background-position:50% 50% !important; }
.s-block.s-block--banners .banner-entry.focal-top .lazy__bg{ background-position:50% 20% !important; }
.s-block.s-block--banners .banner-entry.focal-bottom .lazy__bg{ background-position:50% 80% !important; }
/* Label */
.s-block.s-block--banners .banner-entry h3{ margin:0 !important; line-height:1.25; }
.s-block.s-block--banners .banner-entry h3 span{
  inline-size:calc(var(--cat-circle) * var(--label-width-factor-mobile));
  margin-inline:auto; padding-inline:var(--label-pad-x-mobile);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--label-lines);
  overflow:hidden; white-space:normal; word-break:normal; overflow-wrap:anywhere;
  text-align:var(--label-align); font-weight:800; color:#0e1b2a; font-size:.75rem; line-height:1.35; padding-bottom:4px;
}
@media (min-width:768px){ .s-block.s-block--banners .banner-entry h3 span{ font-size:1rem; } }
/* Desktop label knobs */
@media (min-width:992px){
  .s-block.s-block--banners{ --label-desktop-gap:65px; --label-desktop-lines:2; --label-width-factor:1.15; --label-desktop-pad-x:6px; --label-desktop-align:center; }
  .s-block.s-block--banners .banner-entry .text-with-border{ margin-top:var(--label-desktop-gap) !important; }
  .s-block.s-block--banners .banner-entry h3 span{
    inline-size:calc(var(--cat-circle) * var(--label-width-factor)); max-inline-size:none;
    margin-inline:auto; padding-inline:var(--label-desktop-pad-x); -webkit-line-clamp:var(--label-desktop-lines);
    text-align:var(--label-desktop-align); display:block; line-height:1.28; overflow-wrap:anywhere;
  }
}
/* Kill dotted frames/overlays */
.s-block.s-block--banners .banner-entry.square-photos::before,
.s-block.s-block--banners .banner-entry.square-photos::after{ content:none !important; display:none !important; }
.s-block.s-block--banners .banner-entry.square-photos{ border:none !important; background:transparent !important; }
.s-block.s-block--banners .banner-entry::before,
.s-block.s-block--banners .banner-entry::after,
.s-block.s-block--banners .banner-entry *::before,
.s-block.s-block--banners .banner-entry *::after{
  content:none !important; border:0 !important; outline:0 !important; box-shadow:none !important; background:none !important;
}
@media (min-width:992px){
  .s-block.s-block--banners .banner-entry.square-photos::before,
  .s-block.s-block--banners .banner-entry.square-photos::after,
  .s-block.s-block--banners .banner-entry .text-with-border::before,
  .s-block.s-block--banners .banner-entry .text-with-border::after{ content:none !important; display:none !important; }
  .s-block.s-block--banners .banner-entry.square-photos,
  .s-block.s-block--banners .banner-entry .text-with-border{
    border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important; background-image:none !important;
  }
}

/* =========================================
   UNIVERSAL PRODUCT CARD (lists + sliders)
========================================= */
/* Card shell */
.s-product-card-entry{
  background:#fff; border:0 !important; box-shadow:none !important;
  border-radius:8px; overflow:hidden; margin:0 !important; padding:0 !important;
}
/* Outer slides/wrappers */
.s-products-slider-card,
.s-products-list-wrapper > custom-salla-product-card{
  padding:0 !important; margin:0 !important; box-shadow:none !important; border:0 !important;
}
/* Image wrapper (square, neutral) */
.s-product-card-image{
  padding:0 !important; border:0 !important; box-shadow:none !important;
  aspect-ratio:1/1; display:grid !important; place-items:center !important;
  margin:0 !important; background:#f7f7f7; min-height:auto !important; position:relative;
}
/* Link fills box */
.s-product-card-image > a{ display:block !important; width:100% !important; height:100% !important; margin:0 !important; padding:0 !important; }
/* Image fits, never crops */
.s-product-card-image a,
.s-product-card-image img{ border:0 !important; box-shadow:none !important; outline:0 !important; }
.s-product-card-image img{
  display:block !important; width:100% !important; height:100% !important;
  object-fit:contain !important; object-position:center !important;
  max-width:none !important; max-height:none !important;
}
/* Content */
.s-product-card-content{ padding:10px 8px !important; }
.s-product-card-content-title a{
  font-size:.9rem !important; font-weight:700;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; white-space:normal; line-height:1.28;
}
.s-product-card-content-sub{ margin-top:6px; }
.s-product-card-content-footer{ margin-top:10px; }
/* Price */
.s-product-card-price,
.s-product-card-sale-price h4{ font-weight:800; }
.s-product-card-sale-price span{ opacity:.65; text-decoration:line-through; }
/* CTA in card */
.s-product-card-content-footer .s-button-element{
  width:100%; border-radius:999px; padding:10px 14px; font-weight:800;
  background:#2a2f33 !important; color:#fff !important; border:1px solid #2a2f33 !important;
  transition:transform .12s ease, box-shadow .12s ease;
}
@media (hover:hover){
  .s-product-card-content-footer .s-button-element:hover{
    transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.08);
  }
}
.s-product-card-content-footer .s-button-element:active{
  transform:translateY(0); box-shadow:0 3px 8px rgba(0,0,0,.08);
}
.s-product-card-content-footer .s-button-element .sicon-shopping-bag{
  margin-inline-start:.25rem; margin-inline-end:.35rem;
}

/* Slider: 2 per row sizing */
.s-products-slider-card{ width:calc(50% - 12px) !important; margin-inline:6px !important; }

/* =========================================
   SLIDER PADDING + GUTTERS (unchanged)
========================================= */
.s-products-slider-wrapper .s-slider-container{ padding-inline:var(--gap-mobile, 8px); }
@media (min-width:768px){
  .s-products-slider-wrapper .s-slider-container{ padding-inline:var(--gap-desktop, 16px); }
}
.s-products-slider-wrapper .s-products-slider-card,
.s-products-slider-wrapper .swiper-slide{ padding-inline:calc(var(--gap-mobile, 8px)/2) !important; }
@media (min-width:768px){
  .s-products-slider-wrapper .s-products-slider-card,
  .s-products-slider-wrapper .swiper-slide{ padding-inline:calc(var(--gap-desktop, 16px)/2) !important; }
}

/* =========================================
   BRAND BORDER ON ALL CARDS (opt-in look)
========================================= */
custom-salla-product-card.s-product-card-entry{
  border:1px solid #2a2f33 !important; border-radius:12px !important; background:#fff !important;
  box-shadow:none !important; overflow:hidden !important; transition:box-shadow .2s ease, transform .2s ease;
}
custom-salla-product-card.s-product-card-entry:hover{
  box-shadow:0 4px 14px rgba(0,0,0,.08); transform:translateY(-2px);
}

/* =========================================
   WISHLIST BUTTON (top-right over image) – lighter paint
========================================= */
.s-product-card-image{ position:relative; }
.s-product-card-image .s-product-card-wishlist-btn{
  position:absolute !important; top:2px !important; left:1px !important; z-index:10 !important;
}
.s-product-card-image .s-product-card-wishlist-btn .s-button-element{
  width:34px !important; height:34px !important; padding:0 !important; margin:0 !important;
  background:#fff !important; border:1px solid rgba(42,47,51,.18) !important;
  border-radius:6px !important; display:flex !important; align-items:center !important; justify-content:center !important;
  /* lighter shadow; no backdrop-filter */
  box-shadow:0 2px 6px rgba(16,24,40,.10) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.s-product-card-image .s-product-card-wishlist-btn .sicon-heart{ display:none !important; }
.s-product-card-image .s-product-card-wishlist-btn .s-button-element::before{
  content:""; width:18px; height:18px; display:block; background-repeat:no-repeat; background-position:center; background-size:100% 100%;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2f33' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M20.8 5.6a5.5 5.5 0 0 0-7.8 0L12 6.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-6.6 1-1a5.5 5.5 0 0 0 0-7.8z'/></svg>");
}
.s-product-card-image .s-product-card-wishlist-btn.s-product-card-wishlist-added .s-button-element{
  background:#fff !important; border-color:var(--heart-brand) !important;
}
.s-product-card-image .s-product-card-wishlist-btn.s-product-card-wishlist-added .s-button-element::before{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232a2f33'>\
<path d='M20.8 5.6a5.5 5.5 0 0 0-7.8 0L12 6.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-6.6 1-1a5.5 5.5 0 0 0 0-7.8z'/></svg>");
}
@media (hover:hover){
  .s-product-card-image .s-product-card-wishlist-btn .s-button-element:hover{
    box-shadow:0 4px 10px rgba(16,24,40,.14) !important;
  }
}

/* =========================================
   SMALL FIXES & PERF POLISH
========================================= */
/* Mobile hero banner: reserve space */
@media (max-width: 768px) {
  .full-banner-entry{
    /* Reserve height BEFORE the image loads */
    aspect-ratio: 828 / 414;        /* use the real ratio of your hero */
    min-height: 220px;              /* safety for very small screens */
    background-size: cover;
    background-position: center;
    /* Avoid reflow from inside paints */
    contain: paint;
  }
}


/* Full-banner pseudo elements reset */
.full-banner-entry::after, .full-banner-entry::before{
  height:0; width:0;
}

/* Mobile banner background scaling (fixed syntax) */
@media (max-width: 768px) {
  .full-banner-entry {
    height:auto;
    min-height:14rem;               /* tweak if desired */
  }
}

 /* Neutral canvas behind lazy images (pure cosmetic) */
img[loading="lazy"]{ background:#f6f7f8; }

/* Contain slider internals to limit layout reflow area */
.details-slider .s-slider-container,
.image-slider  .s-slider-container { contain: layout paint style; }

/* Skip initial rendering work for sections not immediately visible */
.s-block:nth-of-type(n+3){ content-visibility:auto; contain-intrinsic-size:800px 600px; }
@media (min-width: 992px){ .s-block:nth-of-type(n+4){ content-visibility:auto; } }

/* Lightweight focus-visible ring (accessibility) */
:root { --focus-ring: 0 0 0 3px color-mix(in oklab, var(--brand-color, #2a2f33) 30%, transparent); }
@supports not (color: color-mix(in oklab, black, white)) {
  :root { --focus-ring: 0 0 0 3px rgba(42,47,51,.30); }
}
a:focus-visible,
button:focus-visible,
.s-button-element:focus-visible,
.desc-toggle:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
  border-color:var(--brand-color, #2a2f33);
}

/* Make the small header icon a fixed box so it doesn't reflow text */
.header-top .lazy.w-10[alt="value added tax"],
.header .lazy.w-10[alt="value added tax"]{
  width: 70px !important;
  height: 70px !important;
  aspect-ratio: 1 / 1;
  display: inline-block;
  object-fit: contain;
}

html, body { overflow-x: hidden; }




/*#######################################*/


/* 1) Top bar uses brand color */
.top-navbar{
  background: var(--brand, #2a2f33);
  color: #fff;
}
.top-navbar a,
.top-navbar .s-contacts-topnav-link{ color:#fff; opacity:.92; }
.top-navbar a:hover{ opacity:1; }

/* 2) Cart badge adopts brand color */
.s-cart-summary-count{
  background: var(--brand, #2a2f33) !important;
  color: #fff !important;          /* keep digits readable */
}

/* Simple theme toggle visuals (emoji icon only) */
#mainnav .eh-theme-toggle{
  background: transparent;
  border: 0;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-radius: 999px;
}
#mainnav .eh-theme-toggle .eh-emoji{
  font-size: 18px; line-height: 1; display: block;
  /* If your header is dark, the emoji stays clearly visible without extra styling */
}

.eh-theme-toggle {
  padding: 24px;
}
.eh-theme-toggle .eh-emoji {
  font-size: 26px !important;
  line-height: 1;
}

@media (max-width: 480px){
  .eh-theme-toggle{ min-width:44px; min-height:44px; }
}

/* EbdaaHome — brand + theme tokens */
:root{
  /* your brand tokens (unchanged) */
  --brand:#2a2f33;
  --brand-color:#2a2f33;
  --brand-hover:#1b2024;
  --muted:rgba(42,47,51,.16);
  --heart-brand:#2a2f33;
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--brand-color, #2a2f33) 30%, transparent);

  /* theme tokens (LIGHT) – keep only colors */
  --bg:#ffffff;
  --surface:#ffffff;
  --text:#231f1e;
  --muted-text:#6b7280;
  --line:rgba(0,0,0,.08);
}

/* DARK */
:root[data-theme="dark"]{
  --bg:#1a1e23;
  --surface:#14181c;
  --text:#f4f6f8;
  --muted-text:#c7cbd1;
  --line:rgba(255,255,255,.12);
}

/* mood button: just padding + bigger icon */
.eh-theme-toggle{ padding:12px; }
.eh-theme-toggle .eh-emoji{ font-size:26px !important; }

/* Header containers */
.top-navbar,
#mainnav,
.main-nav-container,
.store-header { 
  background: var(--surface);
  color: var(--text);
}

/* Header icon color = current text */
.header-btn__icon,
.s-cart-summary-icon,
.s-user-menu-trigger-icon,
.navbar-brand svg,
#mainnav svg {
  color: var(--text);
  fill: currentColor;
  stroke: currentColor;
}

/* Account trigger chip */
.s-user-menu-trigger {
  background: color-mix(in oklab, var(--surface) 92%, var(--text) 8%);
  border: 1px solid var(--line);
  border-radius: 9999px;
}

/* Cart total & count */
.s-cart-summary-wrapper { color: var(--text); }
.s-cart-summary-total { color: var(--text); }
.s-cart-summary-count {
  background: var(--brand-color);
  color: #fff;
  border: 2px solid color-mix(in oklab, var(--brand-color), #000 25%);
}

/* Header search field */
.s-search-input {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
}
.s-search-input::placeholder { color: var(--muted-text); }

/* Burger icon uses current theme text color */
.mburger .sicon-menu,
.mburger svg {
  color: var(--text);
  fill: currentColor;
  stroke: currentColor;
}

/* Ensure comfy tap target (no layout change elsewhere) */
.mburger {
  inline-size: 44px;
  block-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px; /* soft corner to match header buttons */
}

/* Subtle hover/active surface (auto-works in both themes) */
.mburger:hover {
  background: color-mix(in oklab, var(--text) 6%, transparent);
}

/* Visible keyboard focus (uses your focus token) */
.mburger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Off-canvas sheet & panels */
.mm-ocd__content, .mm-spn, .mm-panel {
  background: var(--surface);
  color: var(--text);
}

/* List rows + links */
.mm-listview a, .mm-listitem a, .mm-listitem__text, .mm-spn a {
  color: var(--text);
}

/* Mobile burger icon uses a brand utility (text-primary); force it to follow theme */
.mburger .sicon-menu { color: var(--text) !important; }

/* Row hover/tap (subtle) */
.mm-listview a:hover, .mm-listitem a:hover, .mm-spn a:hover {
  background: color-mix(in oklab, var(--text) 6%, transparent);
}

/* Dividers / separators */
.mm-divider, .mm-listitem:after, .mm-listview:after {
  border-color: var(--line) !important;
}

/* Chevrons / arrows */
.mm-btn, .mm-listitem__btn, .mm-btn svg {
  color: var(--text);
  fill: currentColor;
  stroke: currentColor;
}

/* Ensure mmenu panels follow theme even if inline styles appear */
.mm-spn, .mm-panel { background: var(--surface) !important; color: var(--text); }

/* ✅ NEW: Mobile menu title follows theme text color */
.mm-ocd__title,
.mm-navbar__title {
  color: var(--text) !important;
}

/* 1) Hide burger on desktop (≥1024px) */
@media (min-width: 1024px){ .mburger { display: none !important; } }

/* 2) Keep burger visible on mobile and preserve tap target */
.mburger{
  inline-size:44px; block-size:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px;
}

/* 3) Make the burger icon follow theme colors (light/dark) */
.mburger .sicon-menu{
  color: var(--text) !important;
  fill: currentColor; stroke: currentColor;
}

/* Mobile menu navbar title (pseudo-element on <nav>) */
#mobile-menu.mm-spn.mm-spn--navbar.mm-spn--main::after {
  color: var(--text) !important;   /* flips with light/dark */
  opacity: 1 !important;           /* make sure it’s not dimmed */
}

/* Night BG (homepage only): flat surface + gentle top glow */
:root[data-theme="dark"] :where(.home, .index, [data-page="home"]) .app-inner{
  /* Base surface from your tokens */
  background:
    linear-gradient(to bottom, color-mix(in oklab, var(--text) 6%, transparent), transparent 220px),
    var(--bg); /* #1a1e23 per your dark tokens */
}

/* Keep section blocks transparent so the background shows through */
:root[data-theme="dark"] :where(.home, .index, [data-page="home"]) .s-block{
  background: transparent; /* prevents random white/gray stripes */
}

/* ============================
   HOME — PRODUCT CARD (DARK)
   ============================ */

/* HOME (dark mode) — product card color: higher contrast */
:root[data-theme="dark"]
:where(.home, .index, [data-page="home"]) .s-product-card-entry{
  background: color-mix(in oklab, var(--surface) 70%, black 40%); 
  border: 1px solid color-mix(in oklab, var(--text) 22%, transparent); /* clearer outline */
}

/* HOME (dark) — Section title TEXT only */
:root[data-theme="dark"]
:where(.home, .index, [data-page="home"]) .s-block__title .right-side h2{
  color: var(--text);                 /* high contrast on dark */
  font-weight: 900;                   /* stronger scan weight at night */
  text-shadow: 0 1px 0 rgba(0,0,0,.25); /* tiny lift for readability (incl. Arabic) */
}

/* If any utility class forces a light-mode color, normalize it */
:root[data-theme="dark"]
:where(.home, .index, [data-page="home"]) .s-block__title 
:where(.text-gray-800, .text-neutral-800, .text-black){
  color: var(--text) !important;
}

/* Optional: subtle brand-tinted hover (text only) */
@media (hover:hover)){
  :root[data-theme="dark"]
  :where(.home, .index, [data-page="home"]) .s-block__title .right-side h2:hover{
    color: color-mix(in oklab, var(--text) 85%, var(--brand-color) 15%);
  }
}

/* =============================
   HOME (dark) — Product card TEXT colors only
   ============================= */

/* Title (product name) */
:root[data-theme="dark"]
:where(.home, .index, [data-page="home"]) .s-product-card-content-title a{
  color: var(--text); /* main contrast text */
}

/* Subtitle (small description under title) */
:root[data-theme="dark"]
:where(.home, .index, [data-page="home"])
:where(.s-product-card-content-sub, .s-product-card-content-subtitle){
  color: var(--muted-text) !important; /* force dark token instead of text-gray-600 */
}

:root[data-theme="dark"]
:where(.home, .index, [data-page="home"]) 
.s-product-card-content-sub,
:root[data-theme="dark"]
:where(.home, .index, [data-page="home"]) 
.s-product-card-content-sub *{
  color: var(--muted-text) !important;
}

/* Current price */
:root[data-theme="dark"]
:where(.home, .index, [data-page="home"]) 
.s-product-card-price,
:root[data-theme="dark"]
:where(.home, .index, [data-page="home"]) 
.s-product-card-sale-price h4{
  color: var(--text); /* keep bright for emphasis */
}

/* Old/original price (strikethrough) */
:root[data-theme="dark"]
:where(.home, .index, [data-page="home"]) 
.s-product-card-sale-price span{
  color: var(--muted-text); /* dimmed but still visible */
}

/* HOME (dark) — Slider section title + controls */
:root[data-theme="dark"]
:where(.home, .index, [data-page="home"]) .s-slider-block__title h2{
  color: var(--text); /* main heading */
}

:root[data-theme="dark"]
:where(.home, .index, [data-page="home"]) .s-slider-block__display-all{
  color: var(--muted-text); /* "عرض الكل" link */
}

/* Nav arrows (icon + circle) */
:root[data-theme="dark"]
:where(.home, .index, [data-page="home"]) .s-slider-nav-arrow{
  background: color-mix(in oklab, var(--surface) 90%, black 10%); /* dark neutral plate */
  border: 1px solid var(--line);
  color: var(--text); /* arrow icon stroke */
}

:root[data-theme="dark"]
:where(.home, .index, [data-page="home"]) .s-slider-nav-arrow svg path{
  stroke: currentColor; /* ensure arrow path follows button text color */
  fill: currentColor;
}

/* =========================
   HOME (dark) — Trust/Features
   ========================= */

/* Section container stays transparent on dark */
:root[data-theme="dark"]
:where(.home, .index, [data-page="home"]) .s-block--features{
  background: transparent;
}

/* Feature cards: dark plate + subtle border (color only) */
:root[data-theme="dark"]
:where(.home, .index, [data-page="home"]) .s-block--features__item{
  background: color-mix(in oklab, var(--surface) 80%, black 20%); /* darker than page for contrast */
  border: 1px solid var(--line);
  color: var(--text); /* default text color inside card */
}

/* Title & paragraph colors */
:root[data-theme="dark"]
:where(.home, .index, [data-page="home"]) .s-block--features__item h2{
  color: var(--text);
}
:root[data-theme="dark"]
:where(.home, .index, [data-page="home"]) .s-block--features__item p{
  color: var(--muted-text);
}

/* Icon disc + glyph color */
:root[data-theme="dark"]
:where(.home, .index, [data-page="home"]) .s-block--features__item .feature-icon{
  background: color-mix(in oklab, var(--surface) 70%, black 30%); /* darker circle */
  border: 1px solid var(--line);
  color: var(--text); /* icon color (font icon or svg via currentColor) */
}

/* If any utility forces a white surface inside these cards */
:root[data-theme="dark"]
:where(.home, .index, [data-page="home"]) .s-block--features__item :where(.bg-white,[class*="bg-white"]){
  background: transparent !important;
}

/* ================================
   PRODUCT PAGE — BACKGROUND (DARK)
   ================================ */

/* 0) Page canvas (body/app/main) */
:root[data-theme="dark"] :where(body, #app, .app-inner, main){
  background: var(--bg); /* site canvas */
  color: var(--text);
}

/* 1) Product page shells (catch common Salla wrappers) */
:root[data-theme="dark"]
:where(.product-page, .single-product, .product, .product-details, .product-show){
  background: var(--bg);
  color: var(--text);
}

/* 2) Any white blocks inside product page → surface plate */
:root[data-theme="dark"]
:where(.product-page, .single-product, .product, .product-details, .product-show)
:where(.bg-white, [class*="bg-white"], .white-bg){
  background: var(--surface) !important;   /* replace white */
  color: var(--text);
  border-color: var(--line) !important;
}

/* 3) Common product cards/sections (price, qty, sticky bar) → surface */
:root[data-theme="dark"]
:where(.price-wrapper, .center-between, .sticky-product-bar, section[class*="bg-white"].p-5){
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--text);
}

/* 4) Gallery canvases (image/details sliders) */
:root[data-theme="dark"]
:where(.details-slider .s-slider-container, .image-slider .s-slider-container){
  background: color-mix(in oklab, var(--surface) 80%, black 20%);
  border-color: var(--line);
}

/* 5) Tabs/accordions/review boxes that default to white */
:root[data-theme="dark"]
:where(.tabs, .tab-content, .accordion, .accordion-item, .reviews, .s-reviews, .s-comments){
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}

/* 6) Kill stray inline whites (safety net for children) */
:root[data-theme="dark"]
:where(.product-page, .single-product, .product, .product-details, .product-show) 
:where(.bg-white, [style*="background:#fff"], [style*="background: #fff"], [style*="background-color:#fff"], [style*="background-color: #fff"]) {
  background: var(--surface) !important;
}

/* 7) Loader (shown before page) should not flash white on dark */
:root[data-theme="dark"] .loader-init{
  background: var(--bg) !important;
}

/* ===============================
   PRODUCT PAGE (dark) — Info + Meta
   =============================== */

/* Title + small meta (brand, SKU, availability) */
:root[data-theme="dark"]
:where(.product-page, .single-product, .product, .product-details) 
:where(h1, .product-title){ color: var(--text); }               /* product title */

:root[data-theme="dark"]
:where(.product-page, .single-product, .product, .product-details) 
:where(.product__meta, .product-meta, .s-product-sku, .s-product-availability, .s-rating, .s-reviews-count){
  color: var(--muted-text);                                     /* secondary info */
}

/* Small badges (e.g., "متوفر", "الأكثر مبيعًا") */
:root[data-theme="dark"] 
:where(.product-page, .single-product) 
:where(.badge, .s-badge){
  background: color-mix(in oklab, var(--surface) 70%, black 30%);
  color: var(--text);
  border-color: var(--line);
}

/* Icons in meta rows follow text color */
:root[data-theme="dark"]
:where(.product__meta, .product-meta, .s-product-availability, .s-product-sku) 
:where(svg, i){ color: currentColor; fill: currentColor; stroke: currentColor; }

/* ===============================
   PRODUCT PAGE (dark) — Description
   =============================== */

/* Container + body text */
:root[data-theme="dark"] .product__description{
  color: var(--text);
  background: transparent;
}

/* Section headings inside description */
:root[data-theme="dark"] .product__description :where(h2,h3,h4){
  color: var(--text);
  border-color: var(--line);
}
:root[data-theme="dark"] .product__description h3::after{
  background: var(--brand-color);
  opacity: .9;
}

/* Lists, rules, tables, links */
:root[data-theme="dark"] .product__description :where(ul,ol,hr,table,thead,tbody,tr,th,td){
  border-color: var(--line);
  color: inherit;
}
:root[data-theme="dark"] .product__description a{
  color: color-mix(in oklab, var(--text) 80%, var(--brand-color) 20%);
}

/* Images inside description (neutral plate on dark) */
:root[data-theme="dark"] .product__description img{
  background: color-mix(in oklab, var(--surface) 85%, black 15%);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* "Read more" toggle button (dark skin) */
:root[data-theme="dark"] .desc-toggle{
  color: var(--text);
  background: var(--surface);
  border-color: var(--line);
}
@media (hover:hover){
  :root[data-theme="dark"] .desc-toggle:hover{
    background: var(--brand-color);
    color:#fff;
  }
}

/* =========================
   PRODUCT PAGE — DARK THEME
   Colors only
========================= */

/* 1) Breadcrumbs */
:root[data-theme="dark"] .breadcrumbs,
:root[data-theme="dark"] .breadcrumbs a{
  color: var(--muted-text) !important;
}
:root[data-theme="dark"] .breadcrumbs .s-breadcrumb-item:last-child{
  color: var(--text) !important;
}
:root[data-theme="dark"] .breadcrumbs svg path{ 
  fill: var(--muted-text);
}

/* 2) Title */
:root[data-theme="dark"] h1.text-xl.md\:text-2xl{
  color: var(--text) !important;
}

/* 3) Price row */
:root[data-theme="dark"] .flex.whitespace-nowrap.gap-4.items-center h4{
  color: var(--text) !important;
}
:root[data-theme="dark"] .flex.whitespace-nowrap.gap-4.items-center .line-through{
  color: var(--muted-text) !important;
  opacity:.75;
}
:root[data-theme="dark"] .flex.whitespace-nowrap.gap-4.items-center i[class^="sicon-"]{
  color: currentColor; fill: currentColor;
}

/* 4) "Read more" button (you pasted its inline styles already) */
:root[data-theme="dark"] .desc-toggle{
  color: var(--text); background: var(--surface); border-color: var(--line);
}

/* 5) Product options — labels, help text */
:root[data-theme="dark"] .s-product-options-wrapper .s-product-options-option-label b{
  color: var(--text) !important;
}
:root[data-theme="dark"] .s-product-options-wrapper .s-product-options-option-label small,
:root[data-theme="dark"] .s-product-options-wrapper p{
  color: var(--muted-text) !important;
}

/* 5.a Thumbnails (color/image chips) */
:root[data-theme="dark"] .s-product-options-thumbnails-wrapper label{
  background: var(--surface);
  border: 1px solid var(--line);
}
:root[data-theme="dark"] .s-product-options-thumbnails-wrapper img{
  background: color-mix(in oklab, var(--surface) 85%, black 15%);
}
:root[data-theme="dark"] .s-product-options-thumbnails-icon svg path{
  fill: #fff;
}
/* selected ring */
:root[data-theme="dark"] .s-product-options-thumbnails-wrapper input:checked + label{
  border-color: var(--brand-color) !important;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand-color) 35%, transparent);
}

/* 5.b Dropdown (single-option) */
:root[data-theme="dark"] .s-product-options-wrapper .s-form-control{
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}
:root[data-theme="dark"] .s-product-options-wrapper .s-form-control option{
  color: var(--text); background: var(--surface);
}

/* 6) Generic outlines in this block */
:root[data-theme="dark"] .s-product-options-option-content{
  color: var(--text);
}

/* ===============================
   PRODUCT PAGE – DARK THEME ONLY
   =============================== */

/* 1) Options block: stronger contrast (card + select) */
:root[data-theme="dark"] .s-product-options-wrapper {
  background: color-mix(in oklab, var(--surface) 92%, #000 8%);
  border: 1px solid color-mix(in oklab, var(--line), #000 25%);
}
:root[data-theme="dark"] .s-form-control {
  background: #0f1317;
  color: var(--text);
  border: 1px solid rgba(255,255,255,.18);
}

/* 2) Thumbnail items: clearer “selected” state ring */
:root[data-theme="dark"] .s-product-options-thumbnails-wrapper label {
  background: #0f1317;
  border: 1px solid rgba(255,255,255,.14);
}
:root[data-theme="dark"]
input[type="radio"]:checked + label {
  border-color: var(--brand-color);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand-color) 55%, transparent);
}

/* 3) The white round “check” badge – make it visible on dark */
:root[data-theme="dark"] .s-product-options-thumbnails-icon{
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--brand-color);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  border: 1px solid color-mix(in oklab, var(--brand-color), #000 35%);
}
/* ensure the SVG picks up the color above */
:root[data-theme="dark"] .s-product-options-thumbnails-icon svg path{
  fill: currentColor !important;
}

/* 4) “Load more” (description toggle) – higher contrast */
:root[data-theme="dark"] .desc-toggle{
  background: var(--brand-color) !important;
  color: #fff !important;
  border-color: color-mix(in oklab, var(--brand-color), #000 25%) !important;
}
:root[data-theme="dark"] .desc-toggle:hover{
  background: var(--brand-hover) !important;
}

/* ===== Product page: price + qty/add-to-cart (dark only) ===== */
:root[data-theme="dark"] {

  /* containers */
  section.flex.bg-white,
  section.sticky-product-bar.bg-white {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
  }

  /* small section labels: "السعر", "الكمية" */
  section.flex.bg-white .form-label b,
  section.sticky-product-bar .form-label,
  section.sticky-product-bar .form-label b {
    color: var(--muted-text) !important;
  }

  /* price */
  .price-wrapper .total-price {
    color: #ff5a57 !important;
  }
  .price-wrapper .before-price {
    color: color-mix(in oklab, var(--muted-text) 70%, transparent) !important;
    opacity: .9 !important;
  }

  /* quantity control */
  salla-quantity-input .s-quantity-input-container {
    background: color-mix(in oklab, var(--surface) 85%, black 15%) !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
  }
  salla-quantity-input .s-quantity-input-input {
    background: var(--bg) !important;
    color: var(--text) !important;
    border-left: 1px solid var(--line) !important;
    border-right: 1px solid var(--line) !important;
  }
  salla-quantity-input .s-quantity-input-button {
    background: color-mix(in oklab, var(--surface) 70%, black 30%) !important;
    color: var(--muted-text) !important;
  }
  salla-quantity-input .s-quantity-input-button:hover {
    background: color-mix(in oklab, var(--surface) 55%, black 45%) !important;
    color: var(--text) !important;
  }

  /* Add-to-cart / Buy-now buttons */
  .sticky-product-bar__btn .s-button-element.s-button-primary.s-button-solid {
    background: var(--brand-color, var(--brand)) !important;
    color: #fff !important;
    border: 1px solid color-mix(in oklab, var(--brand-color, var(--brand)) 70%, #000 30%) !important;
  }
  .sticky-product-bar__btn .s-button-element.s-button-primary.s-button-solid:hover {
    background: var(--brand-hover) !important;
    border-color: color-mix(in oklab, var(--brand-hover) 80%, #000 20%) !important;
  }

  /* “اشترِ الآن” (mini checkout trigger) secondary button */
  .s-add-product-button-mini-checkout .s-add-product-button-mini-checkout-content,
  .s-mini-checkout .s-add-product-button-mini-checkout-content {
    color: var(--muted-text) !important;
  }

  /* subtle card shadow replacement in dark */
  section.flex.bg-white,
  section.sticky-product-bar.bg-white {
    box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 6px 18px rgba(0,0,0,.25) !important;
  }
}

/* =========================
   Related products slider – DARK
   ========================= */
:root[data-theme="dark"] {
  /* Card shell */
  .s-product-card-entry.s-product-card-vertical {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    color: var(--text) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.22) !important;
  }

  /* Title + subtitle */
  .s-product-card-content-title a {
    color: var(--text) !important;
  }
  .s-product-card-content-subtitle,
  .s-product-card-content-sub .s-product-card-price span,
  .s-product-card-sale-price span {
    color: var(--muted-text) !important;
    opacity: .85 !important;
  }

  /* Prices */
  .s-product-card-sale-price h4,
  .s-product-card-price {
    color: #ff5a57 !important; /* sale price pop */
  }

  /* Promo pill (e.g., "الأكثر مبيعاً") */
  .s-product-card-promotion-title {
    background: color-mix(in oklab, var(--brand-color, #2a2f33) 85%, white 15%) !important;
    color: #fff !important;
    border: 1px solid color-mix(in oklab, var(--brand-color, #2a2f33) 70%, #000 30%) !important;
  }

  /* Wishlist heart (outline/light) */
  .s-product-card-wishlist-btn .s-button-element.s-button-light-outline {
    background: color-mix(in oklab, var(--surface) 75%, black 25%) !important;
    border: 1px solid var(--line) !important;
    color: var(--muted-text) !important;
  }
  .s-product-card-wishlist-btn .s-button-element.s-button-light-outline:hover {
    color: var(--text) !important;
    border-color: color-mix(in oklab, var(--line) 70%, #fff 30%) !important;
    background: color-mix(in oklab, var(--surface) 55%, black 45%) !important;
  }

  /* Add to cart (outline wide) */
  .s-product-card-content-footer .s-button-element.s-button-primary-outline {
    background: color-mix(in oklab, var(--surface) 80%, black 20%) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
  }
  .s-product-card-content-footer .s-button-element.s-button-primary-outline:hover {
    background: var(--brand-color, var(--brand)) !important;
    border-color: var(--brand-color, var(--brand)) !important;
    color: #fff !important;
  }

  /* Image area background fallback (for PNGs with transparency) */
  .s-product-card-image {
    background: color-mix(in oklab, var(--surface) 85%, black 15%) !important;
  }

  /* Swiper paddles, keep visible on dark */
  .swiper .s-slider-container ~ .swiper-button-next,
  .swiper .s-slider-container ~ .swiper-button-prev {
    color: var(--text) !important;
  }
}

/* ===== Cart — dark mode fixes ===== */
:where(html.dark, body.dark, [data-theme="dark"]) {
  /* cards */
  .cart-item,
  #free-shipping,
  .shadow-default { /* order summary uses this class too */
    background: var(--surface) !important;
    color: var(--text);
    box-shadow: 0 1px 0 var(--line) inset, 0 8px 24px rgba(0,0,0,.25);
    border: 1px solid var(--line);
  }

  /* titles & muted text inside cards */
  .cart-item h1 a,
  .cart-item .text-gray-900 { color: var(--text) !important; }
  .cart-item .text-gray-500,
  #free-shipping .text-gray-500,
  .shadow-default .text-gray-500 { color: var(--muted-text) !important; }

  /* dividers & thumbnail borders */
  .cart-item .border-gray-200 { border-color: var(--line) !important; }
  .cart-item .bg-gray-100 { background: rgba(255,255,255,.06) !important; }

  /* price row */
  .cart-item .item-regular-price,
  .cart-item .item-original-price { color: var(--muted-text) !important; }
  .cart-item .item-price { color: #ef4444; } /* keep sale price vivid on dark */

  /* quantity control */
  .s-quantity-input-container{
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
  }
  .s-quantity-input-button{
    color: var(--text);
    background: transparent;
  }
  .s-quantity-input-button svg path{ fill: var(--text); }
  .s-quantity-input-input{
    background: rgba(255,255,255,.06);
    color: var(--text);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
  .s-quantity-input-input::placeholder{ color: var(--muted-text); }

  /* product options (color/size) in cart */
  .cart-item .s-product-options-option-label b{ color: var(--muted-text); }
  .cart-item .s-product-options-thumbnails-wrapper label{
    background: rgba(255,255,255,.04);
    border: 1px solid var(--line);
    border-radius: .75rem;
  }
  /* make the selected check clearly visible on dark */
  .cart-item .s-product-options-thumbnails-icon{
    background: rgba(0,0,0,.45);
    border: 2px solid rgba(255,255,255,.7);
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(0,0,0,.3) inset;
  }
  .cart-item .s-product-options-thumbnails-icon svg path{ fill: #fff; }

  /* free-shipping widget */
  #free-shipping .rounded-icon{ background: var(--brand-color); color: #fff; }
  #free-shipping .bg-border-color{ background: rgba(255,255,255,.08); } /* track */
  #free-shipping .progress-bg{
    background: var(--brand-color);
    box-shadow: 0 0 0 1px var(--line) inset;
  }
  #free-shipping i.sicon-shipping-fast{ color: var(--text); }

  /* primary buttons keep strong contrast */
  .s-button-primary.s-button-solid{
    background: var(--brand-color);
    color: #fff;
    border-color: color-mix(in oklab, #fff 10%, var(--brand-color));
  }
  .s-button-primary.s-button-outline{
    background: transparent;
    color: #fff;
    border-color: var(--line);
  }
}

/* Category titles in banners – dark mode */
[data-theme="dark"] .banner-entry .text-with-border span {
  color: var(--text, #fff) !important;   /* use your dark theme text */
}



[data-theme="dark"] .cart-item .text-primary {
  color: #fff !important;
}




/* Dark mode tokens when Salla uses .dark or .color-mode-dark */
html.dark, body.dark, body.color-mode-dark{
  --bg:#1a1e23; --surface:#14181c; --text:#f4f6f8; --muted-text:#c7cbd1; --line:rgba(255,255,255,.12);
}

/* Page card */
:where(html.dark,body.dark,body.color-mode-dark) .content--single-page{
  background:var(--surface) !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
}

/* Text colors inside */
:where(html.dark,body.dark,body.color-mode-dark) .content--single-page :where(h1,h2,h3,h4,h5,h6){
  color:var(--text) !important;
}
:where(html.dark,body.dark,body.color-mode-dark) .content--single-page :where(p,li,small){
  color:var(--muted-text) !important;
}
:where(html.dark,body.dark,body.color-mode-dark) .content--single-page a{
  color:color-mix(in oklab,var(--text) 80%, var(--brand-color,#2a2f33) 20%) !important;
}

/* Breadcrumbs */
:where(html.dark,body.dark,body.color-mode-dark) :where(.breadcrumbs, .breadcrumbs a){
  color:var(--muted-text) !important;
}
:where(html.dark,body.dark,body.color-mode-dark) .breadcrumbs .s-breadcrumb-item:last-child{
  color:var(--text) !important;
}





/* Product cards & grids */
.s-product-card-image{ aspect-ratio:1/1; }
.s-product-card-image img{ width:100%; height:100%; object-fit:contain; }

/* Category tiles */
.banner-entry .lazy__bg{ aspect-ratio:1/1; border-radius:16px; }

/* Hero/slider (adjust if yours is taller) */
.homeslider__slide, .homeslider__slide img{ aspect-ratio:16/9; object-fit:cover; }

/* Cart thumbs */
.cart-item .image, .cart-item .image img{ aspect-ratio:1/1; object-fit:contain; }


/* ===== NAV CATEGORIES — DARK MODE (desktop + mobile) ===== */
:where(html.dark, body.dark, [data-theme="dark"]) {
  /* Desktop dropdown: <div class="sub-menu w-56"> */
  .sub-menu {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    border-radius: .75rem;
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
    overflow: hidden;
  }
  .sub-menu a,
  .sub-menu span {
    color: var(--text) !important;
  }
  @media (hover:hover) {
    .sub-menu a:hover {
      background: color-mix(in oklab, var(--text) 6%, transparent) !important;
    }
  }

  /* Mobile nested list (inside drawer): <li class="lg:hidden ..."><ul>...</ul> */
  li.lg\:hidden > ul {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-top: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
  }
  li.lg\:hidden > ul a,
  li.lg\:hidden > ul span {
    color: var(--text) !important;
  }
  /* Override Tailwind’s forced gray text */
  li.lg\:hidden > ul .text-gray-500 {
    color: var(--muted-text) !important;
  }
}

/* ===== MOBILE DRAWER (mmenu) — DARK MODE ===== */
:root[data-theme="dark"] #mobile-menu,
:root[data-theme="dark"] #mobile-menu .mm-ocd__content,
:root[data-theme="dark"] #mobile-menu .mm-spn,
:root[data-theme="dark"] #mobile-menu .mm-panel {
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* Titles (top bar / section headers) */
:root[data-theme="dark"] #mobile-menu .mm-ocd__title,
:root[data-theme="dark"] #mobile-menu .mm-navbar__title {
  color: var(--text) !important;
}

/* Category & sub-category links */
:root[data-theme="dark"] #mobile-menu .mm-listview a,
:root[data-theme="dark"] #mobile-menu .mm-listitem__text {
  color: var(--text) !important;
}

/* Dividers / borders */
:root[data-theme="dark"] #mobile-menu .mm-listitem:after,
:root[data-theme="dark"] #mobile-menu .mm-listview:after,
:root[data-theme="dark"] #mobile-menu .mm-divider {
  border-color: var(--line) !important;
}

/* Chevron/arrow icons */
:root[data-theme="dark"] #mobile-menu .mm-btn,
:root[data-theme="dark"] #mobile-menu .mm-listitem__btn,
:root[data-theme="dark"] #mobile-menu .mm-btn svg {
  color: var(--text) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}



/* Fix product gallery extra space: kill Swiper's slide auto height */
.details-slider .swiper-autoheight .swiper-slide,
.image-slider  .swiper-autoheight .swiper-slide{
  height: 100% !important;        /* fill the gallery canvas */
}