/* ==========================================================================
   HOME SCENT — REGIONS: header, footer, sections, page templates
   Requires tokens.css + theme.css.
   ========================================================================== */

/* ===================== ANNOUNCEMENT ===================== */
.announce{
  background:var(--c-text);color:var(--c-surface-3);
  font-size:var(--fs-caption);letter-spacing:.04em;text-align:center;
  padding-block:9px;padding-inline:var(--gutter)
}
.announce b{color:#fff;font-weight:var(--fw-semi)}

/* ===================== HEADER ===================== */
.header{
  position:sticky;inset-block-start:0;z-index:var(--z-header);
  background:color-mix(in srgb,var(--c-bg) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-block-end:1px solid var(--c-border)
}
.header--static{position:static}
.header__bar{position:relative;display:flex;align-items:center;gap:var(--s-5);min-height:74px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand__mark{width:34px;height:34px;flex:0 0 auto}
.brand__logo{max-height:38px;width:auto}
.brand__name{font-size:1.06rem;font-weight:var(--fw-semi);letter-spacing:.14em;line-height:1}
.brand__tag{display:block;font-size:8.5px;letter-spacing:.34em;color:var(--c-text-muted);margin-block-start:3px;text-transform:uppercase}
[dir="rtl"] .brand__name{letter-spacing:.1em}

.nav{display:flex;gap:var(--s-5);margin-inline-start:var(--s-5);flex:1 1 auto}
.nav__item{position:static}
.nav__link{
  display:inline-flex;align-items:center;gap:6px;padding-block:10px;position:relative;
  font-size:var(--fs-nav);font-weight:var(--fw-medium);color:var(--c-text-2);
  transition:color var(--dur-hover) var(--ease)
}
.nav__link:hover,.nav__link[aria-expanded="true"]{color:var(--c-brand)}
.nav__link::after{
  content:"";position:absolute;inset-block-end:2px;inset-inline:0;height:1.5px;background:var(--c-brand);
  transform:scaleX(0);transform-origin:center;transition:transform var(--dur-menu) var(--ease)
}
.nav__item:hover .nav__link::after,.nav__link[aria-expanded="true"]::after{transform:scaleX(1)}
.chev{width:12px;height:12px;opacity:.5}

/* Mega menu — anchored to the bar, never to the item (Phase 01 QA #1/#2) */
.mega{
  position:absolute;inset-block-start:100%;inset-inline:0;transform:translateY(8px);
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-3);padding:var(--s-6);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-menu) var(--ease),transform var(--dur-menu) var(--ease),visibility var(--dur-menu)
}
.nav__item:hover .mega,.nav__item:focus-within .mega,.mega[data-open]{opacity:1;visibility:visible;transform:translateY(0)}
.mega h4{font-size:var(--fs-caption);letter-spacing:.12em;color:var(--c-text-muted);text-transform:uppercase;margin-block-end:var(--s-3)}
.mega a{display:block;padding-block:5px;font-size:var(--fs-sm);color:var(--c-text-2);min-height:32px}
.mega a:hover{color:var(--c-brand)}
.mega__promo{background:var(--c-surface-2);border-radius:var(--r-md);padding:var(--s-4);align-self:start}
.mega__promo img{border-radius:var(--r-sm);margin-block-end:var(--s-3)}
.mega__promo b{font-size:var(--fs-sm)}
.mega__promo p{font-size:var(--fs-caption);color:var(--c-text-muted);margin-block:6px 10px}

.hactions{display:flex;align-items:center;gap:var(--s-2);margin-inline-start:auto}
.langswitch{
  font-size:var(--fs-caption);letter-spacing:.1em;border:1px solid var(--c-border-strong);
  border-radius:var(--r-pill);padding:6px 12px;cursor:pointer;min-height:34px;display:inline-flex;align-items:center
}
.langswitch:hover{border-color:var(--c-brand);color:var(--c-brand)}
.burger{display:none}

/* Mobile nav drawer */
.mnav__head{display:flex;justify-content:space-between;align-items:center;padding:var(--s-5);border-block-end:1px solid var(--c-border)}
.mnav__body{padding:var(--s-4);overflow-y:auto}
.mnav__body a,.mnav__body summary{display:flex;align-items:center;justify-content:space-between;padding:14px var(--s-3);border-block-end:1px solid var(--c-border);font-weight:var(--fw-medium);min-height:var(--tap-min);cursor:pointer;list-style:none}
.mnav__body summary::-webkit-details-marker{display:none}
.mnav__body summary::after{
  content:"";width:8px;height:8px;flex:0 0 auto;
  border-right:1.6px solid var(--c-brand);border-bottom:1.6px solid var(--c-brand);
  transform:rotate(45deg);transition:transform var(--dur-menu) var(--ease)
}
.mnav__body details[open] summary::after{transform:rotate(-135deg)}
.mnav__sub a{padding-inline-start:var(--s-6);font-weight:var(--fw-regular);color:var(--c-text-2)}

/* ===================== HERO ===================== */
.hero{position:relative;overflow:hidden;background:var(--c-surface-3)}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(to var(--hero-to,left),rgba(42,27,51,var(--hero-o,.8)) 0%,rgba(42,27,51,calc(var(--hero-o,.8) * .82)) 42%,rgba(42,27,51,0) 88%)}
[dir="rtl"] .hero__scrim{--hero-to:left}
[dir="ltr"] .hero__scrim{--hero-to:right}
.hero__inner{position:relative;min-height:clamp(480px,64vh,660px);display:flex;align-items:center;padding-block:var(--s-8)}
.hero--start .hero__inner{justify-content:flex-start}
.hero--center .hero__inner{justify-content:center;text-align:center}
.hero__copy{max-width:46ch;color:#fff}
.hero__title{font-size:var(--fs-display);font-weight:var(--fw-semi);letter-spacing:var(--tracking-display);line-height:1.08}
[dir="rtl"] .hero__title{line-height:1.25}
.hero__title em{display:block;font-style:italic;font-weight:var(--fw-regular);color:var(--c-brand-secondary)}
[dir="rtl"] .hero__title em{font-style:normal}
.hero__text{margin-block:var(--s-4) var(--s-5);color:rgba(255,255,255,.94);font-size:1.05rem}
.hero__cta{display:flex;gap:var(--s-3);flex-wrap:wrap}

/* ===================== VALUE STRIP ===================== */
.valuestrip{border-block-end:1px solid var(--c-border);background:var(--c-surface)}
.valuestrip ul{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5);padding-block:var(--s-5)}
.valuestrip li{display:flex;gap:var(--s-3);align-items:flex-start}
.valuestrip svg{width:22px;height:22px;stroke:var(--c-brand);fill:none;stroke-width:1.4;flex:0 0 auto;margin-block-start:2px}
.valuestrip b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semi)}
.valuestrip span{font-size:var(--fs-caption);color:var(--c-text-muted)}

/* ===================== DISCOVERY TILES ===================== */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.tile{
  position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/2;
  background:var(--c-surface-3);display:flex;align-items:flex-end;padding:var(--s-5);color:#fff;isolation:isolate
}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(26,18,31,.84),rgba(26,18,31,.06) 58%)}
.tile img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 38%;transition:transform var(--dur-image) var(--ease)}
.tile:hover img{transform:scale(1.05)}
.tile h3{font-size:1.3rem}
.tile p{font-size:var(--fs-caption);color:rgba(255,255,255,.8);margin-block-start:4px}

/* ===================== FINDER ===================== */
.finder{background:var(--c-text);color:#fff;border-radius:var(--r-xl);padding:clamp(1.75rem,4vw,3.5rem);position:relative;overflow:hidden}
.finder::before{content:"";position:absolute;inset-block-start:-40%;inset-inline-end:-10%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(169,140,190,.35),transparent 68%)}
.finder__grid{position:relative;display:grid;grid-template-columns:1fr 1.15fr;gap:var(--s-7);align-items:center}
.finder h2{font-size:var(--fs-h2);color:#fff}
.finder p{color:rgba(255,255,255,.72);font-size:var(--fs-sm);margin-block-start:var(--s-3)}
.finder__steps{display:grid;gap:var(--s-3)}
.fstep{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);padding:var(--s-4);display:flex;gap:var(--s-4);align-items:center}
.fstep__n{width:30px;height:30px;flex:0 0 auto;border-radius:var(--r-pill);background:var(--c-brand-secondary);color:var(--c-text);display:grid;place-items:center;font-weight:var(--fw-bold);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.fstep b{font-size:var(--fs-sm);display:block}
.fstep__copy span{font-size:var(--fs-caption);color:rgba(255,255,255,.72)}

/* ===================== STEPS ===================== */
.steps{counter-reset:s;display:grid;gap:var(--s-5)}
.steps li{counter-increment:s;display:flex;gap:var(--s-4)}
.steps li::before{content:counter(s);flex:0 0 auto;width:36px;height:36px;border-radius:var(--r-pill);border:1px solid var(--c-border-strong);display:grid;place-items:center;font-weight:var(--fw-semi);font-size:var(--fs-sm);color:var(--c-brand)}
.steps b{display:block;font-size:var(--fs-sm)}
.steps p{font-size:var(--fs-sm);color:var(--c-text-2)}

/* ===================== BUNDLE / FBT ===================== */
.fbt{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s-5)}
.fbt__item{display:flex;gap:var(--s-3);align-items:center;flex:1 1 210px}
.fbt__item img{width:70px;height:88px;object-fit:cover;border-radius:var(--r-sm);background:var(--c-media)}
.fbt__plus{font-size:1.5rem;color:var(--c-brand-secondary);font-weight:var(--fw-light)}
.fbt__sum{flex:0 0 auto;text-align:start;padding-inline-start:var(--s-5);border-inline-start:1px solid var(--c-border)}

/* ===================== FOOTER ===================== */
.footer{background:var(--c-text);color:var(--c-surface-3);padding-block:var(--s-8) var(--s-5);margin-block-start:var(--s-7)}
.footer__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--s-6)}
.footer__grid>*{min-width:0}
.footer h4{color:#fff;font-size:var(--fs-sm);letter-spacing:.1em;text-transform:uppercase;margin-block-end:var(--s-4)}
.footer a{display:block;padding-block:5px;font-size:var(--fs-sm);color:rgba(255,255,255,.68);min-height:30px}
.footer a:hover{color:#fff}
.footer__brand p{font-size:var(--fs-sm);color:rgba(255,255,255,.72);margin-block-start:var(--s-4);max-width:38ch}
.footer .brand__name{color:#fff}
.footer .brand__tag{color:rgba(255,255,255,.66)}
.newsletter{display:flex;gap:var(--s-2);margin-block-start:var(--s-4);max-width:420px}
.newsletter input{flex:1 1 auto;min-width:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-pill);padding-inline:var(--s-5);min-height:var(--control-h);color:#fff;font:inherit;font-size:var(--fs-sm)}
.newsletter input::placeholder{color:rgba(255,255,255,.42)}
.footer__bottom{margin-block-start:var(--s-7);padding-block-start:var(--s-5);border-block-start:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;font-size:var(--fs-caption);color:rgba(255,255,255,.5)}
.pay{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pay span{background:rgba(255,255,255,.1);border-radius:5px;padding:5px 10px;font-size:10px;letter-spacing:.05em;color:rgba(255,255,255,.8)}
.social{display:flex;gap:var(--s-2);margin-block-start:var(--s-4)}
.social a{width:38px;height:38px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;padding:0}
.social svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5}

/* ===================== PDP ===================== */
.pdp{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(1.5rem,4vw,4rem);align-items:start}
.gallery{position:sticky;inset-block-start:96px}
.gallery__main{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--c-media);aspect-ratio:4/5}
.gallery__main img{width:100%;height:100%;object-fit:contain;padding:var(--s-5)}
.gallery__thumbs{display:flex;gap:var(--s-3);margin-block-start:var(--s-3);overflow-x:auto;padding-block-end:4px;scrollbar-width:thin}
.gallery__thumbs button{flex:0 0 84px;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;border:1.5px solid var(--c-border);background:var(--c-media);padding:0;cursor:pointer}
.gallery__thumbs button[aria-current="true"]{border-color:var(--c-brand)}
.gallery__thumbs img{width:100%;height:100%;object-fit:contain;padding:6px}
.pdp__title{font-size:var(--fs-h1);font-weight:var(--fw-semi)}
.pdp__fam{font-size:var(--fs-caption);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--c-brand-secondary-text);font-weight:var(--fw-bold)}
.pdp__price{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;margin-block:var(--s-4)}
.pdp__price .vat{width:100%}
.optgroup{margin-block:var(--s-5)}
.optgroup__label{display:flex;justify-content:space-between;font-size:var(--fs-sm);font-weight:var(--fw-semi);margin-block-end:var(--s-3)}
.optgroup__label span{color:var(--c-text-muted);font-weight:var(--fw-regular)}
.buybox{border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s-5);background:var(--c-surface);margin-block:var(--s-5)}
.qtyrow{display:flex;gap:var(--s-3);align-items:stretch}
.bnpl{display:flex;align-items:center;gap:var(--s-3);font-size:var(--fs-caption);color:var(--c-text-2);margin-block-start:var(--s-4);padding-block-start:var(--s-4);border-block-start:1px solid var(--c-border);flex-wrap:wrap}
.bnpl span{background:var(--c-accent-faint);border-radius:5px;padding:4px 9px;font-weight:var(--fw-semi);color:var(--c-brand-strong)}
.notes{display:grid;gap:var(--s-3);margin-block:var(--s-5)}
.note{display:flex;gap:var(--s-4);align-items:center;background:var(--c-surface-2);border-radius:var(--r-md);padding:var(--s-4)}
.note__k{font-size:var(--fs-caption);letter-spacing:.14em;text-transform:uppercase;color:var(--c-brand-secondary-text);font-weight:var(--fw-bold);flex:0 0 88px}
.note__v{font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.specs{width:100%;font-size:var(--fs-sm)}
.specs th,.specs td{text-align:start;padding:12px 0;border-block-end:1px solid var(--c-border);vertical-align:top}
.specs th{font-weight:var(--fw-regular);color:var(--c-text-muted);width:44%}
.stickybuy{
  position:fixed;inset-block-end:0;inset-inline:0;z-index:var(--z-sticky);display:none;
  background:color-mix(in srgb,var(--c-surface) 97%,transparent);backdrop-filter:blur(12px);
  border-block-start:1px solid var(--c-border);padding:10px var(--gutter);
  padding-block-end:calc(10px + env(safe-area-inset-bottom));
  align-items:center;gap:var(--s-3);box-shadow:0 -8px 30px -14px rgba(42,27,51,.3)
}
.stickybuy .btn{flex:1 1 auto}
.stickybuy__meta{font-size:11px;color:var(--c-text-muted)}

.split--cart{grid-template-columns:1.6fr 1fr;align-items:start}
.cart__summary{position:sticky;inset-block-start:96px}
@media (max-width:900px){
  .split--cart{grid-template-columns:1fr}
  .cart__summary{position:static}
}

/* ===================== PLP ===================== */
.plp{display:grid;grid-template-columns:264px 1fr;gap:clamp(1.5rem,3vw,3rem);align-items:start}
.plp__head{padding-block:var(--s-5) var(--s-6)}
.plp__title{font-size:var(--fs-h1);font-weight:var(--fw-semi)}
.plp__intro{color:var(--c-text-2);max-width:60ch;margin-block-start:var(--s-3);font-size:var(--fs-sm)}
.plp__bar{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding-block-end:var(--s-4);margin-block-end:var(--s-5);border-block-end:1px solid var(--c-border)}
.plp__count{font-size:var(--fs-sm);color:var(--c-text-2);font-variant-numeric:tabular-nums}
.sortsel{margin-inline-start:auto;max-width:220px}
.filterbtn{display:none}
.activefilters{display:flex;gap:var(--s-2);flex-wrap:wrap;width:100%;align-items:center}
.fchip{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-caption);font-weight:var(--fw-medium);background:var(--c-surface-3);color:var(--c-brand-strong);border-radius:var(--r-pill);padding:7px 12px;cursor:pointer;min-height:34px}
.fchip::after{content:"×";font-size:14px;line-height:1;opacity:.6}
.fchip:hover::after{opacity:1}
.fclear{font-size:var(--fs-caption);color:var(--c-brand);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:7px 4px;min-height:34px}

.facets{position:sticky;inset-block-start:96px;display:grid;gap:var(--s-2)}
.facet{border:1px solid var(--c-border);border-radius:var(--r-md);background:var(--c-surface);overflow:hidden}
.facet>summary{list-style:none;cursor:pointer;padding:var(--s-4);font-size:var(--fs-sm);font-weight:var(--fw-semi);display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);min-height:var(--tap-min)}
.facet>summary::-webkit-details-marker{display:none}
.facet>summary::after{
  content:"";width:8px;height:8px;flex:0 0 auto;margin-block-end:3px;
  border-right:1.6px solid var(--c-brand);border-bottom:1.6px solid var(--c-brand);
  transform:rotate(45deg);transition:transform var(--dur-menu) var(--ease)
}
.facet[open]>summary::after{transform:rotate(-135deg);margin-block:3px 0}
.facet__body{padding:0 var(--s-4) var(--s-4);display:grid;gap:2px}
.fopt{display:flex;align-items:center;gap:var(--s-3);padding:7px 0;font-size:var(--fs-sm);cursor:pointer;color:var(--c-text-2);min-height:var(--tap-min)}
.fopt:hover{color:var(--c-brand)}
.fopt input{
  appearance:none;width:24px;height:24px;flex:0 0 auto;border:1.5px solid var(--c-border-strong);
  border-radius:4px;background:var(--c-surface);display:grid;place-content:center;cursor:pointer;margin:0
}
.fopt input:checked{background:var(--c-brand);border-color:var(--c-brand)}
/* physical borders — a tick is a symbol, not a direction */
.fopt input:checked::after{content:"";width:11px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translateY(-1px)}
.fopt input:disabled{opacity:.4;cursor:not-allowed}
.fopt:has(input:disabled){opacity:.5;cursor:not-allowed}
.fopt__n{margin-inline-start:auto;font-size:var(--fs-caption);color:var(--c-text-muted);font-variant-numeric:tabular-nums}

/* ===================== SEARCH ===================== */
.searchbar{display:flex;align-items:center;gap:var(--s-3);border:1.5px solid var(--c-border-strong);border-radius:var(--r-pill);padding-inline:var(--s-5);background:var(--c-surface);max-width:640px}
.searchbar svg{width:20px;height:20px;stroke:var(--c-text-muted);fill:none;stroke-width:1.5;flex:0 0 auto}
.searchbar input{flex:1 1 auto;border:0;background:0;font:inherit;font-size:1.05rem;padding-block:16px;color:var(--c-text);min-width:0}
.searchbar input:focus{outline:0}
.searchbar:focus-within{border-color:var(--c-brand)}
.suggest{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-block-start:var(--s-4);align-items:center}
.suggest a{font-size:var(--fs-sm);border:1px solid var(--c-border);border-radius:var(--r-pill);padding:8px 15px;color:var(--c-text-2);min-height:38px;display:inline-flex;align-items:center}
.suggest a:hover{border-color:var(--c-brand);color:var(--c-brand)}
.sgroup{margin-block-start:var(--s-7)}
.sgroup__h{font-size:var(--fs-caption);letter-spacing:.16em;text-transform:uppercase;color:var(--c-text-muted);font-weight:var(--fw-semi);margin-block-end:var(--s-4);padding-block-end:var(--s-3);border-block-end:1px solid var(--c-border)}
.srow{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-3) 0;border-block-end:1px solid var(--c-border);min-height:var(--tap-min)}
.srow img{width:56px;height:70px;object-fit:cover;border-radius:var(--r-sm);background:var(--c-media);flex:0 0 auto}
.srow b{font-size:var(--fs-sm);font-weight:var(--fw-medium);display:block}
.srow small{font-size:var(--fs-caption);color:var(--c-text-muted)}
.srow .price{margin-inline-start:auto}
.srow mark{background:var(--c-surface-3);color:inherit;border-radius:2px;padding:0 2px}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1080px){
  .grid--4{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:inline-flex}
  .pdp{grid-template-columns:1fr}
  .gallery{position:static}
  .finder__grid{grid-template-columns:1fr;gap:var(--s-5)}
  .split{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .valuestrip ul{grid-template-columns:1fr 1fr;gap:var(--s-4)}
  .stickybuy{display:flex}
  body.has-sticky{padding-block-end:84px}
  .plp{grid-template-columns:1fr}
  .filterbtn{display:inline-flex}
  .facets{
    position:fixed;inset-block:0;inset-inline-start:0;width:min(340px,88vw);z-index:var(--z-drawer);
    background:var(--c-surface);padding:var(--s-5);overflow-y:auto;display:block;visibility:hidden;
    transform:translateX(var(--dx,-100%));
    transition:transform var(--dur-drawer) var(--ease),visibility var(--dur-drawer);box-shadow:var(--shadow-3)
  }
  [dir="rtl"] .facets{--dx:100%}
  .facets[data-open]{--dx:0;visibility:visible}
  .facets .facet{margin-block-end:var(--s-2)}
  .facets__foot{display:block!important;position:sticky;inset-block-end:0;background:var(--c-surface);
    margin:var(--s-4) calc(var(--s-5) * -1) calc(var(--s-5) * -1);padding:var(--s-4) var(--s-5);
    border-block-start:1px solid var(--c-border)}
  .facets__foot .btn{inline-size:100%}
  .facets__head{display:flex!important;justify-content:space-between;align-items:center;
    margin:calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-4);padding:var(--s-4) var(--s-5);
    border-block-end:1px solid var(--c-border)}
}
@media (max-width:680px){
  .header__bar{min-height:62px;gap:var(--s-2)}
  .brand__name{font-size:.95rem}
  .grid--4,.grid--3{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:1fr}
  .tile{aspect-ratio:16/9}
  .section__head{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
  .hero__inner{min-height:auto;padding-block:var(--s-7) var(--s-8)}
  .hero__scrim{--hero-o:.88;background:linear-gradient(to top,rgba(42,27,51,.88) 0%,rgba(42,27,51,.62) 55%,rgba(42,27,51,.35) 100%)}
  [dir="rtl"] .hero__media img{object-position:76% center}
  [dir="ltr"] .hero__media img{object-position:62% center}
  .hero__cta .btn{flex:1 1 100%}
  .card__body{padding:var(--s-3)}
  .card__name{font-size:1rem}
  .card__quick{transform:none;opacity:1}
  .footer__grid{grid-template-columns:1fr}
  .fbt__sum{padding-inline-start:0;border-inline-start:0;border-block-start:1px solid var(--c-border);padding-block-start:var(--s-4);flex:1 1 100%}
  .langswitch{display:none}
  .hactions .iconbtn[data-secondary]{display:none}
  .iconbtn{width:var(--icon-btn-sm);height:var(--icon-btn-sm)}
  .sortsel{margin-inline-start:0;max-width:none;flex:1 1 100%}
}
.facets__head,.facets__foot{display:none}

/* ---- BNPL (Tabby / Tamara) ------------------------------------------------
   These blocks are rendered by Zid's own payment-widget templates. The theme
   only reserves space and inherits typography; it never styles provider marks
   and never renders an instalment figure of its own. Selectors below are the
   provider class names observed in Zid's reference theme. */
.pdp__bnpl:empty,.cart__bnpl:empty{display:none}
.pdp__bnpl{margin-block-start:var(--s-4)}
.cart__bnpl{margin-block-start:var(--s-3)}
.pdp__bnpl .tabby-promo-snippet,.cart__bnpl .tabby-promo-snippet{
  font-family:inherit;max-width:100%
}
.pdp__bnpl img,.cart__bnpl img{max-width:100%;height:auto}

/* ---- Campaign block ---- */
/* A solid plum ground sits under the artwork so the copy stays legible even if the
   campaign image fails to load — and so the contrast is real, not scrim-dependent. */
.campaign__frame{position:relative;isolation:isolate;border-radius:var(--r-lg);overflow:hidden;min-block-size:clamp(320px,38vw,480px);display:grid;background:var(--c-brand-strong)}
.campaign__bg{position:absolute;inset:0;z-index:-2;inline-size:100%;block-size:100%;object-fit:cover}
.campaign__frame::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(26,18,31,.80),rgba(26,18,31,.10) 65%)}
.campaign__body{align-self:end;padding:clamp(1.5rem,4vw,3.25rem);color:#fff;max-inline-size:56ch;display:grid;gap:var(--s-3);justify-items:start}
.campaign__body--center{justify-self:center;text-align:center;justify-items:center}
.campaign__body .eyebrow{color:var(--c-accent-soft)}
.campaign__body h2{color:#fff;font-size:var(--fs-h1)}
.campaign__text{color:rgba(255,255,255,.88)}

/* ---- Newsletter ---- */
.news{max-inline-size:62ch;margin-inline:auto;text-align:center;display:grid;gap:var(--s-3);justify-items:center}
.news__title{font-size:var(--fs-h2)}
.news__body{color:var(--c-text-2)}
.news__form{display:flex;gap:var(--s-2);inline-size:min(100%,440px);margin-block-start:var(--s-2);flex-wrap:wrap}
.news__form input{
  flex:1 1 200px;min-block-size:48px;padding-inline:var(--s-4);
  border:1px solid var(--c-border-strong);border-radius:var(--r-md);
  background:var(--c-surface);color:var(--c-text);font:inherit;font-size:var(--fs-sm)
}
.news__form input:focus-visible{outline:2px solid var(--c-brand);outline-offset:2px}
.news__form .btn{min-block-size:48px}
.news__fine{font-size:var(--fs-caption);color:var(--c-text-muted);max-inline-size:52ch}
@media(max-width:520px){.news__form .btn{inline-size:100%}}

/* ===================== CATEGORIES INDEX (/categories) =====================
   Scoped to categories.jinja. Reuses the discovery-tile media treatment for the
   image, then hangs the real navigation (name + sub-categories) underneath it,
   because sub-category links cannot legally nest inside the tile's anchor. */
.catgrid{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-5);grid-template-columns:repeat(3,1fr)}
.catcard{display:flex;flex-direction:column;gap:var(--s-3)}
.catcard__media{aspect-ratio:3/2;display:block;padding:0}
.catcard__media img{position:absolute;inset:0;z-index:-2;inline-size:100%;block-size:100%;object-fit:cover}
.catcard__title{font-size:var(--fs-h3);font-weight:var(--fw-semi);margin:0}
.catcard__title a{display:inline-flex;align-items:center;min-block-size:24px;color:var(--c-text)}
.catcard__title a:hover{color:var(--c-brand)}
.catcard__subs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.catcard__subs a{display:inline-flex;align-items:center;min-block-size:24px;font-size:var(--fs-sm);color:var(--c-text-2)}
.catcard__subs a:hover{color:var(--c-brand)}
.catcard__subs--deep{padding-inline-start:var(--s-4);border-inline-start:1px solid var(--c-border)}
.catcard__subs--deep a{font-size:var(--fs-caption);color:var(--c-text-muted)}
@media (max-width:900px){.catgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.catgrid{grid-template-columns:1fr}}