/* ═════════════════════════════════════════════════════════
   NIHARA DESIGNZ — MARKETPLACE DESIGN SYSTEM  ·  v5
   ─────────────────────────────────────────────────────────
   Bright, gradient-driven commerce UI. Colour is used as
   information: every category owns a hue, discounts are
   always brass, ratings always green, delivery always teal.

    1  Tokens & gradients      9  Deal band + countdown
    2  Reset                  10  Product card
    3  Typography             11  Banners & tiles
    4  Layout                 12  Listing page
    5  Motion                 13  Product page
    6  Controls               14  Cart · checkout · account
    7  Header + category bar  15  Overlays
    8  Hero + promo tiles     16  Responsive
   ═════════════════════════════════════════════════════════ */


/* ═══ 1 · TOKENS — BLACK & GOLD ════════════════════════
   One family: near-black surfaces, metallic accents. Each
   category still owns an accent, but every accent is a
   metal — gold, brass, bronze, copper, amber, antique,
   olive-brass and champagne.
   ═══════════════════════════════════════════════════════ */
:root {
  /* Brand gold */
  --brand:     #D4AF37;
  --brand-lt:  #F2DFA0;
  --brand-dk:  #9A7A20;
  --coal:      #0E0E11;

  /* Metallic accent pairs */
  --gold-1:      #F2DFA0;  --gold-2:      #9A7A20;
  --brass-1:     #E8D07A;  --brass-2:     #8E6F16;
  --bronze-1:    #DDB37A;  --bronze-2:    #7E5A28;
  --antique-1:   #D6C39A;  --antique-2:   #6F5C33;
  --olive-1:     #D2CB94;  --olive-2:     #6E6733;
  --copper-1:    #E6AC80;  --copper-2:    #8C5227;
  --amber-1:     #F6D28A;  --amber-2:     #A0701A;
  --champagne-1: #F5EBCB;  --champagne-2: #B7A377;

  --g-brand:     linear-gradient(120deg, var(--brand-lt), var(--brand) 46%, var(--brand-dk));
  --g-gold:      linear-gradient(125deg, var(--gold-1), var(--gold-2));
  --g-brass:     linear-gradient(125deg, var(--brass-1), var(--brass-2));
  --g-bronze:    linear-gradient(125deg, var(--bronze-1), var(--bronze-2));
  --g-antique:   linear-gradient(125deg, var(--antique-1), var(--antique-2));
  --g-olive:     linear-gradient(125deg, var(--olive-1), var(--olive-2));
  --g-copper:    linear-gradient(125deg, var(--copper-1), var(--copper-2));
  --g-amber:     linear-gradient(125deg, var(--amber-1), var(--amber-2));
  --g-champagne: linear-gradient(125deg, var(--champagne-1), var(--champagne-2));
  --g-hero:      linear-gradient(115deg, #14110D 0%, #241D0F 48%, #3A2E12 100%);
  --g-strip:     linear-gradient(90deg, #9A7A20, #D4AF37 34%, #F2DFA0 52%, #D4AF37 70%, #9A7A20);
  --g-deal:      linear-gradient(120deg, #F2DFA0, #D4AF37 48%, #9A7A20);

  /* Warm charcoal pads behind product photography */
  --t-gold:#FBF5E6; --t-brass:#FAF4E3; --t-bronze:#FAF2E8; --t-antique:#F8F5EC;
  --t-olive:#F7F6E8; --t-copper:#FCF2EB; --t-amber:#FDF6E5; --t-champagne:#FAF8F2;

  /* Ink & structure — white ground, near-black ink */
  --ink:      #14110D;
  --ink-2:    #5A544C;
  --ink-3:    #78716A;   /* 4.81:1 on white — small text clears AA */
  --line:     #E8E3DA;
  --line-2:   #D5CEC2;
  --white:    #FFFFFF;
  --bg:       #FFFFFF;
  --surface:  #FFFFFF;
  --surface-2:#F7F5F0;
  --veil:     rgba(20,17,13,.55);
  --on-dark:  #F6F1E4;
  --on-dark-2:#A9A296;
  --on-gold:  #14110D;

  /* Bright gold reads 2.1:1 on white — far below AA — so gold TEXT on a
     light ground uses --brand-ink (4.91:1). Bright gold stays for fills,
     rules, icons and anything sitting on black. */
  --brand-ink: #8A6D14;

  /* Semantic — all inside the gold family */
  --ok:      #8A6D14;   --ok-bg:   #FBF5E6;
  /* Low stock. 7.62:1 on white — the only non-gold ink in the palette,
     and it earns that by being the one thing that is time-critical. */
  --warn-ink: #8A3D0F;
  --sale:    #8A6D14;   --sale-bg: #FDF6E5;
  --info:    #5A544C;   --info-bg: #F7F5F0;

  /* Type */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Plus Jakarta Sans", Manrope, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --f-d1:   clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
  --f-d2:   clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --f-d3:   clamp(1.24rem, 1.1rem + .74vw, 1.6rem);
  --f-d4:   clamp(1.06rem, 1rem + .34vw, 1.22rem);
  --f-lead: clamp(.9375rem, .92rem + .22vw, 1.06rem);
  --f-body: .9375rem;
  --f-sm:   .8125rem;
  --f-xs:   .75rem;
  --f-cap:  .6875rem;
  --f-mi:   .625rem;

  /* Space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px;

  --band:    clamp(36px, 3.6vw, 64px);
  --gap:     clamp(12px, 1.2vw, 20px);
  /* The row gap ran at 2.2× the column gap — 37px between rows against
     17px between columns at 1440 — which read as rows drifting apart
     while columns stayed tight. It also has to clear a text block that
     is now around 140px tall, so it needs to separate rows without
     opening a corridor. 1.5× is the ratio that does both. */
  --gap-y:   clamp(20px, 1.8vw, 26px);

  /* Radius — friendly, marketplace-round */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px; --r-pill: 999px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(20,17,13,.05), 0 2px 8px rgba(20,17,13,.05);
  --sh-2: 0 4px 14px rgba(20,17,13,.08), 0 14px 32px rgba(20,17,13,.08);
  --sh-3: 0 14px 32px rgba(20,17,13,.12), 0 34px 70px rgba(20,17,13,.14);
  --sh-nav: 0 1px 0 var(--line), 0 6px 22px rgba(20,17,13,.09);
  --sh-col: 0 10px 26px -6px var(--sh-tint, rgba(212,175,55,.35));

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --out:  cubic-bezier(.16,1,.3,1);
  --f:.18s; --b:.34s; --s:.6s;

  /* Frame */
  --max:  1480px;
  --max-mid: 1080px;
  --pad:  clamp(14px, 2.6vw, 44px);

  /* Chrome */
  --strip-h: 0px;
  --bar-h:   76px;
  --cat-h:   50px;
  --tap:     44px;
  --hero-h:  440px;
}

[data-theme="dark"] {
  --ink:#F6F1E4; --ink-2:#A9A296; --ink-3:#8F877A;
  --line:#24242A; --line-2:#34343C;
  --white:#121214; --bg:#08080A; --surface:#121214; --surface-2:#191920;
  --veil:rgba(0,0,0,.74); --brand-ink:#D4AF37;
  --t-gold:#1C170D; --t-brass:#1B170C; --t-bronze:#1B150F; --t-antique:#1A170F;
  --t-olive:#191810; --t-copper:#1D1510; --t-amber:#1E180D; --t-champagne:#1B1A16;
  --ok:#D4AF37; --ok-bg:#1C170D; --sale:#E8C25A; --sale-bg:#211A0C; --info:#C9BC96; --info-bg:#1A1A16;
  --sh-1:0 1px 2px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.4);
  --sh-2:0 6px 18px rgba(0,0,0,.55),0 16px 36px rgba(0,0,0,.45);
  --sh-3:0 16px 40px rgba(0,0,0,.6),0 40px 80px rgba(0,0,0,.55);
  --sh-nav:0 1px 0 rgba(212,175,55,.22),0 8px 30px rgba(0,0,0,.6);
}

/* ═══ 2 · RESET ════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 20px); }

body {
  font-family: var(--sans); font-size: var(--f-body); line-height: 1.6;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body.locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--line); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
p, h1, h2, h3, h4, h5, li, a, span, b, strong { overflow-wrap: break-word; }

::selection { background: var(--gold-2); color: #fff; }
:focus-visible { outline: 2px solid var(--antique-2); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

.skip { position: fixed; left: 14px; top: -90px; z-index: 300; background: var(--coal); color: #fff; padding: 12px 20px; border-radius: var(--r-sm); transition: top var(--b) var(--ease); }
.skip:focus { top: 14px; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--line); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-1); }

/* ═══ 3 · TYPOGRAPHY ═══════════════════════════════════ */
h1, h2, h3, h4, h5 { font-family: var(--sans); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
h1, .d1 { font-size: var(--f-d1); }
h2, .d2 { font-size: var(--f-d2); }
h3, .d3 { font-size: var(--f-d3); }
h4, .d4 { font-size: var(--f-d4); font-weight: 700; }
.script { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; }

.lead  { font-size: var(--f-lead); line-height: 1.62; color: var(--ink-2); }
.body  { font-size: var(--f-body); color: var(--ink-2); }
.small { font-size: var(--f-sm); line-height: 1.55; color: var(--ink-2); }
.mut   { color: var(--ink-3); }

/* Gradient text — used sparingly on section titles */
.grad-text {
  background: var(--g, var(--g-gold));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--f-cap); font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1; color: var(--gold-2);
}
.eyebrow::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--g, var(--g-gold)); }

/* Section header — title left, action right, coloured accent bar */
.head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s4) var(--s8); flex-wrap: wrap; margin-bottom: var(--s6);
}
.head .txt { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.head h2 { display: flex; align-items: center; gap: var(--s3); }
.head h2::before {
  content: ""; width: 6px; height: 1.05em; border-radius: 3px; flex: none;
  background: var(--g, var(--g-gold));
}
.head .acts { display: flex; align-items: center; gap: var(--s2); }

/* ═══ 4 · LAYOUT ═══════════════════════════════════════ */
.shell     { width: 100%; max-width: var(--max);     margin-inline: auto; padding-inline: var(--pad); }
.shell-mid { width: 100%; max-width: var(--max-mid); margin-inline: auto; padding-inline: var(--pad); }

.band     { padding-block: var(--band); }
.band-sm  { padding-block: clamp(24px, 2.4vw, 40px); }
.on-white { background: var(--surface); }
.on-tint  { background: var(--bg); }

.cols { display: grid; gap: var(--gap); }
.c2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.c3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.c4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.c6 { grid-template-columns: repeat(6, minmax(0,1fr)); }

.row { display: flex; }
.col { flex-direction: column; }
.wrapx { flex-wrap: wrap; }
.btw { justify-content: space-between; }
.mid { align-items: center; }
.mid-x { justify-content: center; }
.g1{gap:var(--s1)} .g2{gap:var(--s2)} .g3{gap:var(--s3)} .g4{gap:var(--s4)}
.g5{gap:var(--s5)} .g6{gap:var(--s6)} .g8{gap:var(--s8)} .g10{gap:var(--s10)}
.t2{margin-top:var(--s2)} .t3{margin-top:var(--s3)} .t4{margin-top:var(--s4)}
.t5{margin-top:var(--s5)} .t6{margin-top:var(--s6)} .t8{margin-top:var(--s8)}
.t10{margin-top:var(--s10)} .t12{margin-top:var(--s12)} .t16{margin-top:var(--s16)}
.tc { text-align: center; }
.none { display: none !important; }
.hr { height: 1px; background: var(--line); border: 0; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.with-aside { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: var(--s6); align-items: start; }
.with-aside > aside { position: sticky; top: calc(var(--bar-h) + var(--s4)); }

.frame { position: relative; overflow: hidden; background: var(--line); border-radius: var(--r-lg); }
.frame > img { width: 100%; height: 100%; object-fit: cover; }
.ar-11 { aspect-ratio: 1; } .ar-34 { aspect-ratio: 3/4; } .ar-45 { aspect-ratio: 4/5; }
.ar-32 { aspect-ratio: 3/2; } .ar-169 { aspect-ratio: 16/9; }

/* ═══ 5 · MOTION ═══════════════════════════════════════ */
/* Reveal-on-scroll is an enhancement, never a prerequisite for seeing the
   content. The starting state only applies once JS has run and added
   .nd-js to <html>; if the script fails, everything renders plainly. */
.nd-js .up { opacity: 0; transform: translate3d(0,20px,0); transition: opacity .7s var(--out), transform .7s var(--out); transition-delay: calc(var(--i,0) * 55ms); }
.nd-js .up.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html { scroll-behavior: auto; }
  .up { opacity: 1 !important; transform: none !important; }
}

/* ═══ 6 · CONTROLS ═════════════════════════════════════ */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 46px; padding: 0 clamp(18px, 1.8vw, 28px);
  border: 0; border-radius: var(--r-pill);
  font-family: var(--sans); font-size: var(--f-sm); font-weight: 700;
  letter-spacing: .02em; line-height: 1; white-space: nowrap; cursor: pointer;
  color: #fff; background: var(--coal);
  transition: transform var(--f) var(--ease), box-shadow var(--b) var(--ease), filter var(--f) var(--ease), background var(--f) var(--ease), color var(--f) var(--ease);
}
@media (hover: hover) { .btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); filter: saturate(1.08); } }
.btn:active { transform: translateY(0) scale(.98); }
.btn[disabled], .btn:disabled { opacity: .4; pointer-events: none; }

.btn-grad    { background: var(--g, var(--g-gold)); --sh-tint: rgba(113,40,214,.42); }
.btn-grad:hover { box-shadow: var(--sh-col); }
.btn-brand   { background: var(--g-brand); color: #3A2708; --sh-tint: rgba(224,169,59,.45); }
.btn-brand:hover { box-shadow: var(--sh-col); }
.btn-brass    { background: var(--g-brass); --sh-tint: rgba(200,30,107,.42); }
.btn-brass:hover { box-shadow: var(--sh-col); }
.btn-dark    { background: var(--coal); }
.btn-line    { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--gold-1); color: var(--gold-2); }
.btn-soft    { background: var(--t-gold); color: var(--gold-2); }
.btn-soft:hover { background: var(--gold-2); color: #fff; }
.btn-white   { background: rgba(255,255,255,.95); color: var(--ink); }
.btn-glass   { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-glass:hover { background: rgba(255,255,255,.3); }
.btn-quiet   { background: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--bg); color: var(--ink); }

.btn-sm { min-height: 38px; padding-inline: 16px; font-size: var(--f-xs); }
.btn-lg { min-height: 54px; padding-inline: clamp(24px, 2.4vw, 36px); font-size: var(--f-body); }
.btn-full { width: 100%; }

.btn.busy { color: transparent !important; pointer-events: none; }
.btn.busy::after { content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation: spin .7s linear infinite; }
.btn-line.busy::after, .btn-brand.busy::after { border-color: rgba(27,21,38,.2); border-top-color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Text link */
.ln { font-size: var(--f-sm); font-weight: 700; color: var(--gold-2); display: inline-flex; align-items: center; gap: 5px; }
.ln svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform var(--f) var(--ease); }
.ln:hover svg { transform: translateX(3px); }

/* Icon control */
.ic { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); flex: none; border-radius: var(--r-md); color: var(--ink); transition: background var(--f) var(--ease), color var(--f) var(--ease), transform var(--f) var(--ease); }
@media (hover: hover) { .ic:hover { background: var(--t-gold); color: var(--gold-2); } }
.ic:active { transform: scale(.93); }
.ic > svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ic .dot {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; background: var(--g-brass); color: #fff;
  border-radius: var(--r-pill); font-size: 10px; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 2px var(--white);
}

/* Round arrow */
.arrow { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); transition: background var(--f), color var(--f), opacity var(--f), transform var(--f); }
.arrow svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.arrow:hover { background: var(--g-gold); color: #fff; }
.arrow:disabled { opacity: .3; pointer-events: none; }

/* Chips / tags */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: var(--r-sm); font-size: var(--f-mi); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1; white-space: nowrap; background: var(--line); color: var(--ink-2); }
.chip-grad  { background: var(--g, var(--g-gold)); color: #fff; }
.chip-sale  { background: var(--g-brass); color: #fff; }
.chip-new   { background: var(--g-olive); color: #fff; }
.chip-gold  { background: var(--g-brand); color: #3A2708; }
.chip-ok    { background: var(--ok-bg); color: var(--ok); }
.chip-info  { background: var(--info-bg); color: var(--info); }
.chip-soft  { background: var(--t-gold); color: var(--gold-2); }

/* Rating pill — always green, marketplace convention */
.rate { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: var(--r-sm); background: var(--ok); color: #fff; font-size: var(--f-mi); font-weight: 800; line-height: 1; }
.rate svg { width: 10px; height: 10px; fill: currentColor; }
.rate-n { font-size: var(--f-mi); color: var(--ink-3); font-weight: 600; }

/* Panels */
.panel { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: clamp(16px, 1.6vw, 26px); }
.panel-line { box-shadow: inset 0 0 0 1px var(--line); }
.panel-tint { background: var(--bg); box-shadow: none; }

/* Fields */
.field { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.field > label, .lbl { font-size: var(--f-cap); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.in, .sel, .ta {
  width: 100%; min-width: 0; max-width: 100%; min-height: 48px; padding: 12px var(--s4);
  background-color: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md);
  font-size: var(--f-body); color: var(--ink);
  transition: border-color var(--f) var(--ease), box-shadow var(--f) var(--ease);
}
.ta { min-height: 112px; resize: vertical; line-height: 1.6; }
.in::placeholder, .ta::placeholder { color: var(--ink-3); }
.in:focus, .sel:focus, .ta:focus { outline: none; border-color: var(--gold-1); box-shadow: 0 0 0 3px rgba(181,123,251,.2); }
.sel { appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5470' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 16px; }
.chk { display: flex; align-items: center; gap: var(--s3); cursor: pointer; font-size: var(--f-sm); color: var(--ink-2); min-height: 32px; }
.chk input { width: 17px; height: 17px; flex: none; accent-color: var(--gold-2); cursor: pointer; }
.chk:hover { color: var(--ink); }

.opt { display: flex; align-items: center; gap: var(--s4); cursor: pointer; padding: var(--s4); border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: border-color var(--f), background var(--f); }
.opt:hover { border-color: var(--gold-1); }
.opt:has(input:checked) { border-color: var(--gold-2); background: var(--t-gold); }
.opt input { width: 18px; height: 18px; flex: none; accent-color: var(--gold-2); }
.opt .txt { flex: 1; min-width: 0; }
.opt .txt b { display: block; font-size: var(--f-body); }

.swatches { display: flex; flex-wrap: wrap; gap: var(--s3); }
.sw { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 2px solid var(--white); box-shadow: 0 0 0 1.5px var(--line-2); cursor: pointer; transition: transform var(--f), box-shadow var(--f); }
.sw:hover { transform: scale(1.1); }
.sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--gold-2); }

.sizes { display: flex; flex-wrap: wrap; gap: var(--s2); }
.size { min-width: 54px; height: 44px; padding: 0 var(--s4); display: inline-grid; place-items: center; border: 1.5px solid var(--line); border-radius: var(--r-md); font-size: var(--f-sm); font-weight: 700; cursor: pointer; transition: all var(--f); }
.size:hover { border-color: var(--gold-1); }
.size[aria-pressed="true"] { background: var(--g-gold); border-color: transparent; color: #fff; }

.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-pill); overflow: hidden; flex: none; }
.stepper button { width: 34px; height: 34px; font-size: 15px; font-weight: 700; line-height: 1; color: var(--gold-2); transition: background var(--f); }
.stepper button:hover { background: var(--t-gold); }
.stepper span { min-width: 30px; text-align: center; font-weight: 800; font-size: var(--f-sm); font-variant-numeric: tabular-nums; }

/* Disclosure */
.disc { border-bottom: 1px solid var(--line); }
.disc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4) 0; min-height: 54px; text-align: left; font-size: var(--f-body); font-weight: 700; color: var(--ink); }
.disc-btn:hover { color: var(--gold-2); }
.disc-btn .pm { width: 14px; height: 14px; position: relative; flex: none; }
.disc-btn .pm::before, .disc-btn .pm::after { content:""; position:absolute; inset:0; margin:auto; background: currentColor; border-radius: 2px; transition: transform var(--b) var(--ease); }
.disc-btn .pm::before { width: 100%; height: 2px; }
.disc-btn .pm::after  { width: 2px; height: 100%; }
.disc-btn[aria-expanded="true"] .pm::after { transform: scaleY(0); }
.disc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--b) var(--ease); }
.disc-panel > div { overflow: hidden; }
/* .facet is the listing-page variant of .disc — it needs the same
   expand rule, otherwise every filter group stays clipped to 0fr
   and the checkboxes inside cannot be seen or clicked. */
.disc.open > .disc-panel,
.facet.open > .disc-panel { grid-template-rows: 1fr; }
.disc-panel .inner { padding-bottom: var(--s5); color: var(--ink-2); font-size: var(--f-body); }

/* Tabs */
.tabs { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: 9px 16px; min-height: 40px; border-radius: var(--r-pill); white-space: nowrap; font-size: var(--f-sm); font-weight: 700; color: var(--ink-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: all var(--f); }
.tab:hover { color: var(--gold-2); box-shadow: inset 0 0 0 1px var(--gold-1); }
.tab.on { background: var(--g-gold); color: #fff; box-shadow: none; }

/* Trail */
.trail { display: flex; flex-wrap: wrap; align-items: center; gap: 5px var(--s2); font-size: var(--f-sm); color: var(--ink-3); }
.trail a:hover { color: var(--gold-2); }
.trail [aria-current] { color: var(--ink); font-weight: 600; }

/* Pager */
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s2); }
.pager a, .pager span { min-width: 42px; height: 42px; padding-inline: 8px; display: grid; place-items: center; border-radius: var(--r-md); font-size: var(--f-sm); font-weight: 700; color: var(--ink-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.pager a:hover { color: var(--gold-2); box-shadow: inset 0 0 0 1px var(--gold-1); }
.pager .now { background: var(--g-gold); color: #fff; box-shadow: none; }

/* Hint */
.hint { position: relative; }
@media (hover: hover) and (min-width: 1025px) {
  .hint::after { content: attr(data-hint); position: absolute; top: calc(100% + 2px); left: 50%; transform: translate(-50%,-5px); opacity: 0; pointer-events: none; z-index: 5; background: var(--coal); color: #fff; padding: 5px 10px; border-radius: var(--r-sm); font-size: 11px; white-space: nowrap; transition: opacity var(--f), transform var(--f); }
  .hint:hover::after { opacity: 1; transform: translate(-50%,0); }
}

.blank { grid-column: 1/-1; text-align: center; padding-block: var(--s16); display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.blank svg { width: 46px; height: 46px; stroke: var(--line-2); fill: none; stroke-width: 1.4; }

/* ═══ 7 · HEADER ═══════════════════════════════════════ */
.hdr { position: sticky; top: 0; z-index: 80; transition: box-shadow var(--b) var(--ease); }
.hdr.pinned { box-shadow: var(--sh-nav); }

@keyframes stripFlow { to { background-position: 220% 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(5px); } }

.bar { background: var(--surface); }
.bar-in { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: clamp(14px, 2.2vw, 40px); min-height: var(--bar-h); }
.bar-l { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.bar-r { display: flex; align-items: center; justify-content: flex-end; gap: var(--s1); }

/* ── Department switcher — first item on the category row ──
   It rides in the lower nav rather than the masthead, so the
   department and the categories it scopes read as one line. */
.aud { position: relative; flex: none; }
.aud-btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  height: 34px; padding: 0 14px; border-radius: 0;
  background: var(--coal); color: var(--brand);
  transition: filter var(--f) var(--ease);
}
.aud-btn:hover { filter: brightness(1.35); }
.aud-v { font-size: var(--f-sm); font-weight: 800; color: var(--brand); white-space: nowrap; letter-spacing: .02em; }
.aud-chev { width: 7px; height: 7px; flex: none; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(45deg) translate(-2px,-2px); transition: transform var(--b) var(--ease); }
.aud.open .aud-chev { transform: rotate(225deg) translate(-2px,-2px); }

.aud-menu {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 30;
  min-width: 236px; padding: 6px; border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--sh-3), inset 0 0 0 1px var(--line);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--b) var(--ease), transform var(--b) var(--ease), visibility var(--b);
}
.aud.open .aud-menu { opacity: 1; visibility: visible; transform: none; }
.aud-menu button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 10px 12px; border-radius: var(--r-sm); text-align: left;
  transition: background var(--f) var(--ease);
}
.aud-menu button:hover { background: var(--surface-2); }
.aud-menu button b { display: block; font-size: var(--f-sm); font-weight: 800; color: var(--ink); }
.aud-menu button > span > span { display: block; font-size: var(--f-mi); color: var(--ink-3); margin-top: 1px; }
.aud-menu button svg { width: 15px; height: 15px; flex: none; stroke: var(--brand-ink); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.aud-menu button[aria-selected="true"] { background: var(--t-gold); }
.aud-menu button[aria-selected="true"] svg { opacity: 1; }

/* Drawer variant — a segmented row */
.aud-seg { display: grid; grid-auto-flow: column; gap: 4px; padding: 4px; margin-bottom: var(--s4); background: var(--surface-2); border-radius: var(--r-md); }
.aud-seg button { padding: 9px 6px; border-radius: var(--r-sm); font-size: var(--f-sm); font-weight: 700; color: var(--ink-2); transition: background var(--f), color var(--f); }
.aud-seg button:hover { color: var(--ink); }
.aud-seg button.on { background: var(--coal); color: var(--brand); }

/* Brand */
.logo { display: inline-flex; align-items: center; gap: var(--s2); flex: none; }
.logo > svg, .logo > img { width: 46px; height: 46px; flex: none; }
.logo .wm { display: flex; flex-direction: column; gap: 3px; }
.logo .nm { font-family: var(--serif); font-size: clamp(1rem, .82rem + .5vw, 1.34rem); font-weight: 600; letter-spacing: .12em; line-height: 1; white-space: nowrap; background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.logo .tl { font-size: 7px; font-weight: 800; letter-spacing: .22em; color: var(--ink-3); line-height: 1; white-space: nowrap; }

/* Search — gradient-buttoned pill */
.search { position: relative; width: 100%; max-width: 680px; margin-inline: auto; }
.search input {
  width: 100%; height: 48px; padding: 0 116px 0 44px;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-pill);
  font-size: var(--f-body); color: var(--ink);
  transition: border-color var(--f), box-shadow var(--f), background var(--f);
}
.search input::placeholder { color: var(--ink-3); }
.search input:focus { outline: none; background: var(--surface); border-color: var(--gold-1); box-shadow: 0 0 0 3px rgba(181,123,251,.18); }
/* The icon's own paths carry stroke="currentColor", and a presentation
   attribute on the child beats a stroke inherited from the parent — so
   the colour has to be set with `color`, not `stroke`, or the glyph
   falls back to the inherited near-black text colour and disappears. */
.search .mag { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); stroke: currentColor; fill: none; stroke-width: 2; pointer-events: none; }
.search .mag * { stroke: currentColor; fill: none; }
.search:focus-within .mag { color: var(--gold-2); }
.search .go {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  height: 38px; padding: 0 20px; border-radius: var(--r-pill);
  background: var(--g-gold); color: #fff;
  font-size: var(--f-xs); font-weight: 800; letter-spacing: .04em;
  transition: filter var(--f), box-shadow var(--b);
}
.search .go:hover { filter: saturate(1.15) brightness(1.05); box-shadow: 0 6px 16px -4px rgba(113,40,214,.5); }

.sheet { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: var(--s5); max-height: 70svh; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--b), transform var(--b), visibility var(--b); }
.sheet.open { opacity: 1; visibility: visible; transform: none; }
.sheet h6 { font-size: var(--f-cap); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s3); }
.sheet .terms { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sheet .terms a { padding: 7px 14px; border-radius: var(--r-pill); font-size: var(--f-sm); font-weight: 600; background: var(--bg); color: var(--ink-2); transition: all var(--f); }
.sheet .terms a:nth-child(6n+1):hover { background: var(--g-gold); color: #fff; }
.sheet .terms a:nth-child(6n+2):hover { background: var(--g-brass); color: #fff; }
.sheet .terms a:nth-child(6n+3):hover { background: var(--g-bronze); color: #fff; }
.sheet .terms a:nth-child(6n+4):hover { background: var(--g-amber); color: #fff; }
.sheet .terms a:nth-child(6n+5):hover { background: var(--g-olive); color: #fff; }
.sheet .terms a:nth-child(6n+6):hover { background: var(--g-champagne); color: #fff; }
.sheet-hits { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s4); margin-top: var(--s4); }
.hit { display: flex; flex-direction: column; gap: 6px; }
.hit img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); background: var(--line); }
.hit b { font-size: var(--f-sm); font-weight: 700; line-height: 1.3; }
.hit span { font-size: var(--f-sm); font-weight: 800; color: var(--sale); }

/* Login */
.login { position: relative; overflow: hidden; margin-left: var(--s2); min-height: 44px; padding: 0 20px; display: inline-flex; align-items: center; gap: var(--s2); border-radius: var(--r-pill); background: var(--g-brand); color: #3A2708; font-size: var(--f-sm); font-weight: 800; white-space: nowrap; transition: box-shadow var(--b), transform var(--f), filter var(--f); }
.login svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
.login::after { content:""; position:absolute; top:0; bottom:0; width:40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); transform: translateX(-260%); pointer-events:none; }
@media (hover: hover) {
  .login:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -6px rgba(224,169,59,.6); filter: saturate(1.1); }
  .login:hover::after { animation: sheen .85s var(--out); }
}
@keyframes sheen { from { transform: translateX(-260%); } to { transform: translateX(260%); } }

/* Category bar — colour-coded */
.catbar { background: var(--surface); border-top: 1px solid var(--line); box-shadow: inset 0 -1px 0 var(--line); }
.catbar { position: relative; }
/* Department pill · then the scrolling category list */
.catbar-shell { display: flex; align-items: center; gap: var(--s3); }
.catbar-shell > .aud { position: relative; flex: none; }
.catbar-shell > .aud::after {
  content: ""; position: absolute; right: calc(var(--s3) / -2); top: 50%;
  transform: translateY(-50%); width: 1px; height: 22px; background: var(--line-2);
}
.catbar-in {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--s1); min-height: var(--cat-h);
}
/* The row only needs to scroll where it cannot fit. Making it a scroll
   container on the desktop as well put the mega panel inside a scroller,
   which is what stopped the dropdown appearing. */
@media (max-width: 1180px) {
  .catbar-in {
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
}
.catbar-in::-webkit-scrollbar { display: none; }
.catbar-in > li { scroll-snap-align: start; }
/* Fade the trailing edge so a clipped chip reads as "there is more" */
.catbar::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 44px;
  background: linear-gradient(90deg, transparent, var(--surface));
  pointer-events: none; opacity: 0; transition: opacity var(--b) var(--ease);
}
.catbar.scrollable::after { opacity: 1; }
.hdr.pinned .catbar::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.9)); }
.catbar li { display: flex; flex: none; }
.catbar a.top {
  position: relative; display: flex; align-items: center; gap: 6px;
  height: var(--cat-h); padding: 0 var(--s3); border-radius: var(--r-sm);
  font-size: var(--f-sm); font-weight: 700; color: var(--ink); white-space: nowrap;
  transition: color var(--f) var(--ease), background var(--f) var(--ease);
}
.catbar a.top .dotc { width: 7px; height: 7px; border-radius: 50%; background: var(--g, var(--g-gold)); flex: none; }
.catbar a.top::after { content:""; position: absolute; left: var(--s3); right: var(--s3); bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--g, var(--g-gold)); transform: scaleX(0); transform-origin: center; transition: transform var(--b) var(--ease); }
.catbar a.top:hover, .catbar a.top[aria-current] { color: var(--c, var(--gold-2)); }
.catbar a.top:hover::after, .catbar a.top[aria-current]::after, .drop.open > a.top::after { transform: scaleX(1); }
.catbar .chev {
  position: relative; width: 26px; height: var(--cat-h); flex: none;
  margin-left: -6px; color: inherit; cursor: pointer;
}
.catbar .chev::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 6px; height: 6px; opacity: .55;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform var(--b) var(--ease), opacity var(--f);
}
.catbar .chev:hover::before { opacity: 1; }
.drop.open > .chev::before { transform: rotate(225deg) translate(-2px,-2px); opacity: 1; }

/* Mega */
.drop { position: static; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); box-shadow: var(--sh-3); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s; max-height: calc(100svh - var(--bar-h)); overflow-y: auto; z-index: 79; border-top: 3px solid transparent; border-image: var(--g, var(--g-gold)) 1; }
.drop.open > .mega, .drop:focus-within > .mega { opacity: 1; visibility: visible; transform: none; }
.mega-in { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)) minmax(230px,1fr); gap: clamp(20px,2.4vw,44px); padding-block: clamp(24px,2.4vw,40px); }
.mega h5 { font-size: var(--f-cap); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c, var(--gold-2)); margin-bottom: var(--s3); }
.mega ul { display: flex; flex-direction: column; }
.mega ul a { display: block; padding: 6px 0; font-size: var(--f-sm); color: var(--ink-2); transition: color var(--f), transform var(--f); }
.mega ul a:hover { color: var(--ink); transform: translateX(5px); }
.mega-card { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3.1; }
.mega-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--out); }
.mega-card:hover img { transform: scale(1.06); }
.mega-card figcaption { position: absolute; inset: auto 0 0 0; padding: var(--s4); background: linear-gradient(transparent, rgba(20,12,30,.9)); color: #fff; }
.mega-card em { display: block; font-style: normal; font-size: var(--f-mi); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.mega-card strong { display: block; font-size: 1.06rem; font-weight: 800; margin-top: 3px; }

/* Burger */
.burger { display: none; }
.burger i { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--b) var(--ease), opacity var(--f); }
.burger i + i { margin-top: 5px; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer nav */
.dnav { position: fixed; inset: 0 0 0 auto; width: min(420px, 90vw); z-index: 98; background: var(--surface); box-shadow: var(--sh-3); transform: translateX(102%); visibility: hidden; transition: transform .42s var(--out), visibility .42s; display: flex; flex-direction: column; overscroll-behavior: contain; }
.dnav.open { transform: none; visibility: visible; }
.dnav-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); min-height: var(--bar-h); }
.dnav-body { flex: 1; overflow-y: auto; padding: var(--s4); }
.dnav-foot { border-top: 1px solid var(--line); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); background: var(--bg); }

.dgrp { border-bottom: 1px solid var(--line); }
.dgrp > a, .dgrp > button { width: 100%; display: flex; align-items: center; gap: var(--s3); justify-content: space-between; padding: var(--s3) 0; min-height: 54px; text-align: left; font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.dgrp .swatchdot { width: 10px; height: 10px; border-radius: 50%; background: var(--g, var(--g-gold)); flex: none; }
.dgrp .lft { display: flex; align-items: center; gap: var(--s3); }
.dgrp .pm { position: relative; width: 14px; height: 14px; flex: none; }
.dgrp .pm::before, .dgrp .pm::after { content:""; position:absolute; inset:0; margin:auto; background: currentColor; border-radius: 2px; transition: transform var(--b); }
.dgrp .pm::before { width: 100%; height: 2px; }
.dgrp .pm::after { width: 2px; height: 100%; }
.dgrp.open .pm::after { transform: scaleY(0); }
.dsub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--b) var(--ease); }
.dsub > div { overflow: hidden; }
.dgrp.open > .dsub { grid-template-rows: 1fr; }
.dsub a { display: block; padding: 9px 0 9px var(--s5); min-height: 42px; font-size: var(--f-sm); color: var(--ink-2); }
.dsub a:hover { color: var(--gold-2); }
.msearch { padding-bottom: var(--s4); border-bottom: 1px solid var(--line); margin-bottom: var(--s3); }
.msearch .search { max-width: none; }
.msearch .search input { padding-right: var(--s5); }

/* ═══ 8 · HERO + PROMO TILES ═══════════════════════════ */
.hero-wrap { display: block; }
.hero { position: relative; height: var(--hero-h); overflow: hidden; border-radius: 0; background: var(--line); isolation: isolate; touch-action: pan-y; }
.hero-view { position: absolute; inset: 0; overflow: hidden; }
.hero-track { display: flex; height: 100%; will-change: transform; transition: transform .7s var(--out); }
.hero-track.still { transition: none; }
.hero-cell { flex: 0 0 100%; height: 100%; position: relative; }
.hero-cell img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.hero-cell::after { content:""; position:absolute; inset:0; background: var(--tint, linear-gradient(100deg, rgba(43,27,61,.9) 0%, rgba(113,40,214,.62) 42%, rgba(200,30,107,.28) 74%, transparent 100%)); }

.hero-layer { position: absolute; inset: 0; z-index: 2; display: grid; align-items: center; pointer-events: none; padding-inline: clamp(20px, 3.4vw, 56px); }
.hero-copy { grid-area: 1/1; max-width: 560px; color: #fff; pointer-events: none; transition: opacity .5s var(--out), transform .5s var(--out); }
.nd-js .hero-copy { opacity: 0; transform: translateY(16px); }
.nd-js .hero-copy.live, .hero-copy.live { opacity: 1; transform: none; pointer-events: auto; }
.hero-badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 13px; border-radius: var(--r-pill); background: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); font-size: var(--f-mi); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hero-copy h1, .hero-copy h2 { color: #fff; font-size: clamp(1.65rem, 1rem + 2.3vw, 2.9rem); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; margin-block: var(--s3) var(--s2); }
.hero-copy h1 em, .hero-copy h2 em { font-style: normal; background: linear-gradient(100deg, #FFE9A8, #FFB13C); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero-copy p { color: rgba(255,255,255,.9); font-size: var(--f-lead); max-width: 42ch; }
.hero-acts { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

.hero-ctrl { position: absolute; left: 0; right: 0; bottom: clamp(14px, 1.8vw, 22px); z-index: 4; display: flex; align-items: center; gap: var(--s4); padding-inline: clamp(20px, 3.4vw, 56px); pointer-events: none; }
.hero-bars { display: flex; gap: 6px; pointer-events: auto; }
.hero-bars button { width: 26px; height: 20px; padding: 9px 0 0; }
.hero-bars button::before { content:""; display: block; width: 100%; height: 3px; border-radius: 3px; background: rgba(255,255,255,.45); transition: background var(--b); }
.hero-bars button[aria-selected="true"]::before { background: linear-gradient(90deg, #FFE9A8, #FFB13C); }
.hero-nav { display: flex; gap: var(--s2); margin-left: auto; pointer-events: auto; }
.hero-nav button { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background var(--f), color var(--f); }
.hero-nav button svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hero-nav button:hover { background: #fff; color: var(--gold-2); }
.hero-line { position: absolute; left: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #FFE9A8, #FFB13C); width: 0; z-index: 4; }
.hero-line.run { transition: width linear; }

/* Promo tiles beside the hero */
.promos { display: grid; grid-template-rows: 1fr 1fr; gap: var(--gap); }
.promo { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: var(--s5); border-radius: var(--r-xl); overflow: hidden; color: #fff; background: var(--g, var(--g-gold)); isolation: isolate; min-height: 0; }
.promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; z-index: -1; mix-blend-mode: luminosity; }
.promo .kicker { font-size: var(--f-mi); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.promo b { font-size: clamp(1.1rem, .95rem + .6vw, 1.42rem); font-weight: 800; line-height: 1.16; letter-spacing: -.02em; }
.promo span.sub { font-size: var(--f-sm); opacity: .92; }
.promo .go { display: inline-flex; align-items: center; gap: 5px; margin-top: var(--s2); font-size: var(--f-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.promo .go svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; transition: transform var(--f); }
.promo:hover .go svg { transform: translateX(4px); }
.promo::after { content:""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.28), transparent 60%); pointer-events: none; }

/* ═══ 9 · CATEGORY TILES · DEAL BAND ═══════════════════ */
.tiles { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: var(--gap); }
.tile-cat { display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center; }
.tile-cat .ring { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--tint, var(--t-gold)); padding: 5px; transition: transform var(--b) var(--out), box-shadow var(--b); }
.tile-cat .ring::before { content:""; position: absolute; inset: 0; border-radius: inherit; background: var(--g, var(--g-gold)); opacity: 0; transition: opacity var(--b); }
.tile-cat .ring img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transition: transform .8s var(--out); }
@media (hover: hover) {
  .tile-cat:hover .ring { transform: translateY(-5px); box-shadow: var(--sh-col); }
  .tile-cat:hover .ring::before { opacity: 1; }
  .tile-cat:hover .ring img { transform: scale(1.07); }
  .tile-cat:hover .cname { color: var(--c, var(--gold-2)); }
}
.tile-cat .cname { font-size: var(--f-sm); font-weight: 700; line-height: 1.25; transition: color var(--f); }
.tile-cat .cnum { display: block; font-size: var(--f-mi); color: var(--ink-3); font-weight: 600; margin-top: 2px; }

/* Final tile in the row doubles as the section's call to action */
.tile-all .ring { background: var(--coal); display: grid; place-items: center; padding: 0; }
.tile-all .ring::before { display: none; }
.tile-all .ring svg { width: 30%; height: 30%; stroke: var(--brand); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--b) var(--out); }
.tile-all:hover .ring svg { transform: translateX(4px); }
.tile-all .cname { color: var(--brand-ink); }

/* Deal band — no frame at all: a black heading bar, then the same
   cards on the same white ground as every other section. */
.deal { border-radius: 0; background: transparent; color: var(--ink); position: relative; isolation: isolate; }
.deal::after { content:""; position: absolute; inset: 0; background: radial-gradient(90% 120% at 0% 0%, rgba(255,255,255,.24), transparent 55%); pointer-events: none; z-index: -1; }
.deal-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding: var(--s5) clamp(16px,2vw,28px); }
.deal-top h2 { color: #fff; display: flex; align-items: center; gap: var(--s3); font-size: var(--f-d2); }
.deal-top h2::before { display: none; }
.deal-top .bolt { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.22); flex: none; }
.deal-top .bolt svg { width: 16px; height: 16px; fill: #FFE9A8; }
.clock { display: flex; align-items: center; gap: var(--s2); }
.clock .lbl2 { font-size: var(--f-xs); font-weight: 700; opacity: .9; }
.clock .unit { min-width: 44px; padding: 6px 8px; border-radius: var(--r-sm); background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-align: center; }
.clock .unit b { display: block; font-size: 1.06rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.clock .unit span { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; opacity: .85; margin-top: 2px; }
.deal-body { background: transparent; padding: var(--s5) 0 0; }

/* ═══ 10 · PRODUCT CARD (v6 retail) ════════════════════ */
.grid-p { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--gap-y) var(--gap); align-items: stretch; }
.grid-p.p4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-p.p3 { grid-template-columns: repeat(3, minmax(0,1fr)); }

.pc {
  /* THE text block's rhythm, and the only place it is set.
     Two values, identical at every width:
       --pc-lead   photograph → text
       --pc-block  between label, name and price block
       --pc-step   between the lines inside the price block
     There used to be five unrelated numbers here, four of which
     changed between mobile and web, which is what made the spacing
     read as arbitrary. */
  --pc-lead: 10px; --pc-block: 6px; --pc-step: 5px;
  --pc-inset: 10px; position: relative; display: flex; flex-direction: column; height: 100%; min-width: 0; background: transparent; }

/* Photograph on a soft pad */
/* No container behind the photograph — the image is the card.
   The pad is plain white so nothing reads as a box, and it only
   shows for the moment before the image paints. */
.pc-shot {
  /* 3:4, matching the photography. Declared here and nowhere else —
     a second rule further down used to override this one. */
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--surface); border-radius: 0;
}
.pc-shot a.hit { position: absolute; inset: 0; z-index: 1; display: block; }
.pc-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s var(--ease), transform .9s var(--out); }
.pc-shot img.b { opacity: 0; }
@media (hover: hover) {
  .pc:hover .pc-shot img.a { opacity: 0; }
  .pc:hover .pc-shot img.b { opacity: 1; transform: scale(1.04); }
}

/* Status flag — top-left */
.pc-flag {
  position: absolute; top: var(--pc-inset); left: var(--pc-inset); z-index: 3;
  padding: 5px 9px; background: #fff; color: var(--ink);
  font-size: var(--f-mi); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  border-radius: 0;
}

/* Chips stack up from the bottom-left — no magic offsets */
.pc-chips {
  position: absolute; left: var(--pc-inset); bottom: var(--pc-inset); z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  transition: opacity var(--b) var(--ease);
}
.pc-score {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 9px; background: #fff; border-radius: 0;
  font-size: var(--f-mi); line-height: 1; color: var(--ink); box-shadow: var(--sh-1);
}
.pc-score svg { width: 11px; height: 11px; fill: var(--ink); }
.pc-score b { font-weight: 800; }
.pc-score span { color: var(--ink-3); }

/* House mark — the only maker chip; there are no other sellers */
.pc-house {
  padding: 5px 9px; background: var(--coal); color: var(--brand);
  font-size: var(--f-mi); font-weight: 800; letter-spacing: .1em; line-height: 1;
  border-radius: 0;
}

/* Colour-variant count — bottom-right, on the same baseline */
.pc-colours {
  position: absolute; right: var(--pc-inset); bottom: var(--pc-inset); z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px 4px 5px; background: #fff; border-radius: 0;
  font-size: var(--f-mi); font-weight: 700; color: var(--ink-2); line-height: 1;
  box-shadow: var(--sh-1); transition: opacity var(--b) var(--ease);
}
.pc-colours i { width: 13px; height: 13px; border-radius: 50%; background: var(--g, var(--g-gold)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }

/* Quick view */
.pc-peek {
  position: absolute; left: var(--pc-inset); right: var(--pc-inset); bottom: var(--pc-inset); z-index: 4;
  height: 38px; border-radius: 0; display: grid; place-items: center;
  background: var(--coal); color: var(--brand);
  font-size: var(--f-xs); font-weight: 800; letter-spacing: .04em;
  transition: transform var(--b) var(--out), opacity var(--b);
}
@media (hover: hover) and (min-width: 1025px) {
  .pc-peek { opacity: 0; transform: translateY(10px); }
  .pc:hover .pc-peek, .pc-peek:focus-visible { opacity: 1; transform: none; }
  .pc:hover .pc-chips, .pc:hover .pc-colours { opacity: 0; }
}
@media (max-width: 1024px) { .pc-peek { display: none; } }

/* Text block — a single rhythm, and a foot that pins to the base
   so price, tag and note align across every card in a row */
.pc-info {
  display: flex; flex-direction: column; flex: 1;
  padding-top: var(--pc-lead);
  gap: var(--pc-block);
}
.pc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.pc-label { font-size: var(--f-sm); font-weight: 800; color: var(--ink); line-height: 1.35; }
.pc-name {
  font-size: var(--f-sm); font-weight: 400; color: var(--ink-2);
  line-height: 1.35;
  /* Two lines, not one. At two columns on a phone a card is about 165px
     wide and one line cut "Kuthampully Tissue Kasavu Saree" to three
     words — the shopper could not tell two pieces apart. The height is
     reserved for both lines either way, so price rows still align across
     a row whether a name wraps or not. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  /* min-height: 1.7em;              */
  transition: color var(--f);
}
.pc:hover .pc-name { color: var(--ink); }

.pc-save {
  flex: none; width: 24px; height: 24px; margin: -1px -2px 0 0;
  display: grid; place-items: center; background: none; color: var(--ink);
  transition: color var(--f) var(--ease), transform var(--f);
}
.pc-save svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pc-save:hover { color: var(--brand-ink); transform: scale(1.1); }
.pc-save.on { color: var(--brand-ink); }
.pc-save.on svg { fill: currentColor; animation: pop .38s var(--out); }
@keyframes pop { 0%{transform:scale(1)} 42%{transform:scale(1.3)} 72%{transform:scale(.94)} 100%{transform:scale(1)} }

/* No `margin-top: auto` here. The card stretches to the tallest in its
   row, and pushing the foot to the bottom of that stretched box opened a
   gap in the middle of every card shorter than its neighbour — which is
   most of them. The price block follows the name at a fixed distance
   instead, and the leftover height falls below the card where nothing
   shows it. Prices still line up across a row because the label and the
   two-line name above them are the same height on every card. */
.pc-foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pc-step); }
.pc-cost { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px var(--s2); }
.pc-cost b { font-size: clamp(.95rem, .82rem + .38vw, 1.06rem); font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: 1.2; }
.pc-cost s { font-size: var(--f-sm); color: var(--ink-3); }
.pc-cost .cut { font-size: var(--f-sm); font-weight: 800; color: var(--brand-ink); }

.pc-tag {
  padding: 3px 8px; border-radius: 0;
  background: var(--surface-2); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--f-mi); font-weight: 800; font-style: normal;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.3;
  /* Wraps rather than truncating. An ellipsis mid-word on a chip reads
     as a rendering fault, and these labels are short enough that two
     lines is the worst case. */
  max-width: 100%; overflow-wrap: anywhere;
}
/* Gold is reserved for the one that is worth money. When every card
   wore it the colour stopped meaning anything. */
.pc-tag-save { background: var(--brand); color: var(--on-gold); box-shadow: none; }
.pc-tag-ship { background: var(--t-gold); color: var(--ink-on-tint); box-shadow: inset 0 0 0 1px var(--line-2); }

/* Low stock, deal cards only */
.pc-left {
  display: flex; align-items: baseline; gap: 5px;
  max-width: 100%; min-width: 0;
  font-size: var(--f-mi); font-weight: 700; color: var(--warn-ink);
  line-height: 1.3; overflow-wrap: anywhere;
}
.pc-left::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: none; transform: translateY(-1px);
}
.pc-note { font-size: var(--f-sm); color: var(--ink-2); line-height: 1.35; }

/* ═══ 11 · BANNERS & RAILS ═════════════════════════════ */
/* Rails sit inside the page gutter — they used to break out of the
   shell with a negative margin, so the first and last card ran under
   the edge of the container instead of lining up with everything else. */
.rail { display: grid; grid-auto-flow: column; gap: var(--gap); grid-auto-columns: clamp(178px, 16vw, 236px); overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: none; margin-inline: 0; padding: 4px 0 var(--s4); }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail.wide { grid-auto-columns: clamp(260px, 30vw, 400px); }

.banner { position: relative; display: flex; align-items: center; overflow: hidden; border-radius: 0; min-height: clamp(200px, 24vw, 320px); background: var(--g, var(--g-antique)); color: #fff; isolation: isolate; }
.banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; z-index: -1; mix-blend-mode: luminosity; }
.banner::after { content:""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 120% at 0% 50%, rgba(0,0,0,.4), transparent 62%); }
.banner .inner { padding: clamp(22px, 3vw, 52px); max-width: 620px; }
.banner h2 { color: #fff; font-size: var(--f-d2); }
.banner h2::before { display: none; }
.banner p { color: rgba(255,255,255,.9); margin-block: var(--s3) var(--s5); }
.banner .acts { display: flex; flex-wrap: wrap; gap: var(--s3); }

.strip-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap); }
.scard { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: clamp(160px, 17vw, 220px); padding: var(--s5); border-radius: 0; overflow: hidden; color: #fff; background: var(--g, var(--g-bronze)); isolation: isolate; }
.scard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; z-index: -1; mix-blend-mode: luminosity; }
.scard::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, transparent 30%, rgba(15,8,25,.62)); }
.scard .kicker { font-size: var(--f-mi); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .92; }
.scard b { font-size: clamp(1.16rem, 1rem + .7vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.scard .go { display: inline-flex; align-items: center; gap: 5px; margin-top: var(--s2); font-size: var(--f-xs); font-weight: 800; }
.scard .go svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; transition: transform var(--f); }
.scard:hover .go svg { transform: translateX(4px); }

/* Trust row */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--gap); }
.trust-item { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); }
.trust-item .ib { width: 42px; height: 42px; border-radius: var(--r-md); display: grid; place-items: center; flex: none; background: var(--g, var(--g-gold)); color: #fff; }
.trust-item .ib svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.trust-item b { display: block; font-size: var(--f-sm); font-weight: 800; }
.trust-item span { display: block; font-size: var(--f-mi); color: var(--ink-3); }

/* Reviews */
.rev { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); height: 100%; }
.rev .stars5 { display: inline-flex; gap: 2px; }
.rev .stars5 svg { width: 14px; height: 14px; fill: var(--amber-1); }
.rev p { font-size: var(--f-sm); color: var(--ink-2); line-height: 1.62; flex: 1; }
.rev .who { display: flex; align-items: center; gap: var(--s3); }
.rev .who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.rev .who b { display: block; font-size: var(--f-sm); font-weight: 700; }
.rev .who span { display: block; font-size: var(--f-mi); color: var(--ink-3); }

/* Newsletter */
.signup { border-radius: var(--r-xl); overflow: hidden; background: var(--g-hero); color: #fff; position: relative; isolation: isolate; padding: clamp(26px, 3.4vw, 56px); }
.signup::after { content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(80% 120% at 100% 0%, rgba(255,255,255,.24), transparent 60%); }
.signup-in { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(24px,3vw,56px); align-items: center; }
.signup h2 { color: #fff; }
.signup h2::before { display: none; }
.signup p { color: rgba(255,255,255,.9); }
.signup form { display: flex; gap: var(--s2); }
.signup .in { flex: 1; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); color: #fff; border-radius: var(--r-pill); }
.signup .in::placeholder { color: rgba(255,255,255,.7); }
.signup .in:focus { background: rgba(255,255,255,.24); border-color: #fff; box-shadow: none; }

/* Masthead */
.masthead { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: var(--s5) var(--s6); }
.masthead h1 { margin-top: var(--s2); }
.masthead p { max-width: 62ch; margin-top: var(--s2); }

/* Footer */
.foot { background: var(--coal); color: var(--on-dark-2); padding-top: var(--s16); position: relative; }
.foot::before { content:""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--g-strip); }
.foot h5 { font-size: var(--f-cap); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: var(--s4); }
/* Brand block plus four link columns now that the drawer's menu lives here */
.foot-top { display: grid; grid-template-columns: minmax(0,1.5fr) repeat(4, minmax(0,1fr)); gap: clamp(20px,2.4vw,44px); padding-bottom: var(--s16); }
.foot ul { display: flex; flex-direction: column; }
.foot ul a { display: inline-block; padding: 5px 0; font-size: var(--f-sm); color: var(--on-dark-2); transition: color var(--f); }
.foot ul a:hover { color: #fff; }
.foot p { color: var(--on-dark-2); font-size: var(--f-sm); }
.foot-btm { border-top: 1px solid rgba(255,255,255,.12); padding-block: var(--s5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); font-size: var(--f-sm); }
.foot-legal { display: flex; flex-wrap: wrap; gap: var(--s4); }
.foot-legal a:hover { color: #fff; }

/* ═══ 12 · LISTING ═════════════════════════════════════ */
.shop { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: var(--s6); align-items: start; }
/* The filter column stays put on the left while the results scroll past.
   It only scrolls inside itself when it is taller than the space left
   under the header, and that inner scrollbar is hidden — a visible one
   drew a permanent grey rule down the right edge. */
.facets {
  position: sticky; top: calc(var(--bar-h) + var(--cat-h) + var(--s3));
  max-height: calc(100svh - var(--bar-h) - var(--cat-h) - var(--s6));
  overflow-y: auto; overscroll-behavior: contain; align-self: start;
  scrollbar-width: none; -ms-overflow-style: none;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--s4);
}
.facets::-webkit-scrollbar { width: 0; height: 0; display: none; }
.facet { border-bottom: 1px solid var(--line); }
.facet:last-of-type { border-bottom: 0; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); margin-bottom: var(--s4); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.toolbar .sel { min-height: 42px; min-width: 190px; }
.pills { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pills:empty { display: none; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 6px 6px 12px; min-height: 32px; background: var(--t-gold); color: var(--gold-2); border-radius: var(--r-pill); font-size: var(--f-xs); font-weight: 700; }
.pill button { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; font-size: 14px; line-height: 1; color: inherit; }
.pill button:hover { background: rgba(255,255,255,.7); }
.facet-veil { display: none; }

/* ═══ 13 · PRODUCT PAGE ════════════════════════════════ */
.pdp { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: var(--s8); align-items: start; }
.gal { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: var(--s3); }
.gal-thumbs { display: flex; flex-direction: column; gap: var(--s2); }
.gal-thumbs button { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 1; border: 2px solid transparent; background: var(--line); transition: border-color var(--f); }
.gal-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gal-thumbs button.on { border-color: var(--gold-2); }
.gal-stage { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--t-gold); border-radius: var(--r-lg); cursor: zoom-in; }
.gal-stage img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--s) var(--out); }
.gal-stage.zoom img { transform: scale(1.85); }
.gal-stage .zt { position: absolute; right: var(--s3); bottom: var(--s3); z-index: 2; pointer-events: none; background: rgba(255,255,255,.94); border-radius: var(--r-pill); padding: 6px 12px; font-size: var(--f-mi); font-weight: 700; }

.pdp-side { position: sticky; top: calc(var(--bar-h) + var(--s4)); display: flex; flex-direction: column; gap: var(--s4); }
.cost-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.cost-row .now { font-size: clamp(1.5rem,1.2rem + 1vw,2rem); font-weight: 800; letter-spacing: -.03em; }
.cost-row .was { color: var(--ink-3); text-decoration: line-through; }
.cost-row .cut { color: var(--sale); font-weight: 800; font-size: var(--f-sm); }
.pdp-acts { display: flex; flex-wrap: wrap; gap: var(--s3); }
.pdp-acts .btn { flex: 1 1 170px; }
.pdp-acts .ic { width: 48px; height: 48px; box-shadow: inset 0 0 0 1.5px var(--line); border-radius: var(--r-md); }

.assure { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s3); }
.assure-item { display: flex; gap: var(--s3); align-items: center; padding: var(--s3); border-radius: var(--r-md); background: var(--tint, var(--t-gold)); }
.assure-item svg { width: 20px; height: 20px; flex: none; stroke: var(--c, var(--gold-2)); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.assure-item b { display: block; font-size: var(--f-xs); font-weight: 800; }
.assure-item span { font-size: var(--f-mi); color: var(--ink-3); }

.specs td { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--f-sm); vertical-align: top; }
.specs tr:last-child td { border-bottom: 0; }
.specs td:first-child { color: var(--ink-3); width: 42%; }

/* ═══ 14 · CART · CHECKOUT · ACCOUNT ═══════════════════ */
.line { display: grid; grid-template-columns: 84px minmax(0,1fr) auto; gap: var(--s4); padding-block: var(--s4); border-bottom: 1px solid var(--line); }
.line > img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--r-md); }
.line .info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.line .info strong { font-size: var(--f-body); font-weight: 700; line-height: 1.35; }
.line .info span { font-size: var(--f-sm); color: var(--ink-3); }
.line .tail { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; text-align: right; white-space: nowrap; }
.line .drop-it { font-size: var(--f-sm); color: var(--ink-3); font-weight: 600; }
.line .drop-it:hover { color: var(--sale); }
.line-lg > img { width: 100%; height: auto; aspect-ratio: 1; }
.line-lg { grid-template-columns: clamp(88px,9vw,112px) minmax(0,1fr) auto; }

.tot { display: flex; justify-content: space-between; gap: var(--s4); font-size: var(--f-sm); color: var(--ink-2); }
.tot.sum { font-size: var(--f-lead); color: var(--ink); font-weight: 800; padding-top: var(--s3); border-top: 1px solid var(--line); }
.tot-stack { display: flex; flex-direction: column; gap: var(--s3); }

.co-bar { border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 40; }
.co-bar .shell { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding-block: var(--s3); }
.progress { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.pstep { display: flex; align-items: center; gap: var(--s2); font-size: var(--f-xs); font-weight: 700; color: var(--ink-3); }
.pstep i { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; background: var(--line); color: var(--ink-2); }
.pstep.on { color: var(--ink); }
.pstep.on i { background: var(--g-gold); color: #fff; }
.pstep.done i { background: var(--g-olive); color: #fff; }
.pgap { width: clamp(14px,3vw,32px); height: 2px; border-radius: 2px; background: var(--line); flex: none; }

.mini { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: var(--s3); padding-block: var(--s3); border-bottom: 1px solid var(--line); align-items: center; }
.mini .th { position: relative; flex: none; }
.mini .th img { width: 58px; height: 58px; object-fit: cover; border-radius: var(--r-md); }
.mini .th b { position: absolute; top: -6px; right: -6px; width: 21px; height: 21px; border-radius: 50%; background: var(--g-gold); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.mini .nm { font-size: var(--f-sm); font-weight: 700; display: block; line-height: 1.3; }

.acct { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: var(--s6); align-items: start; }
.acct-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--bar-h) + var(--s4)); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--s3); }
.acct-nav a { display: flex; align-items: center; gap: var(--s3); padding: 11px var(--s3); min-height: 44px; border-radius: var(--r-md); font-size: var(--f-sm); font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: all var(--f); }
.acct-nav a:hover { background: var(--bg); color: var(--ink); }
.acct-nav a.on { background: var(--g-gold); color: #fff; }
.acct-nav svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.tile { border-radius: var(--r-lg); padding: var(--s4); background: var(--g, var(--g-gold)); color: #fff; display: flex; flex-direction: column; gap: 3px; position: relative; overflow: hidden; isolation: isolate; }
.tile::after { content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(90% 110% at 100% 0%, rgba(255,255,255,.26), transparent 58%); }
.tile .k { font-size: var(--f-mi); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .92; }
.tile b { font-size: clamp(1.4rem,1.2rem + .7vw,1.85rem); font-weight: 800; line-height: 1.1; }
.tile span.s { font-size: var(--f-mi); opacity: .9; }
.ord { border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); padding: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; justify-content: space-between; }
.ord .minis { display: flex; flex: none; }
.ord .minis img { width: 46px; height: 46px; object-fit: cover; border-radius: var(--r-md); border: 2px solid var(--surface); margin-left: -12px; }
.ord .minis img:first-child { margin-left: 0; }

/* ═══ 15 · OVERLAYS ════════════════════════════════════ */
.veil { position: fixed; inset: 0; z-index: 90; background: var(--veil); opacity: 0; visibility: hidden; transition: opacity var(--b), visibility var(--b); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.veil.open { opacity: 1; visibility: visible; }

.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 92vw); z-index: 97; background: var(--surface); box-shadow: var(--sh-3); transform: translateX(102%); visibility: hidden; transition: transform .42s var(--out), visibility .42s; display: flex; flex-direction: column; overscroll-behavior: contain; }
.drawer.open { transform: none; visibility: visible; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); min-height: var(--bar-h); }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--s2) var(--s5) var(--s5); }
.drawer-foot { border-top: 1px solid var(--line); padding: var(--s4) var(--s5); background: var(--bg); display: flex; flex-direction: column; gap: var(--s3); }

/* The modal carries its own frosted backdrop — the shared .veil sits at
   z-index 90, below the modal at 99, so it can never blur behind one. */
.modal { position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; padding: clamp(12px,3vw,32px); opacity: 0; visibility: hidden; transition: opacity var(--b), visibility var(--b); }
.modal::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(20,17,13,.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .modal::before { background: rgba(20,17,13,.78); }
}
.modal.open { opacity: 1; visibility: visible; }
.modal-box { position: relative; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-3); width: min(900px,100%); max-height: min(88svh,780px); overflow: auto; transform: translateY(16px) scale(.985); transition: transform var(--b) var(--out); }
.modal.open .modal-box { transform: none; }
.modal-x { position: absolute; top: var(--s3); right: var(--s3); z-index: 3; background: rgba(255,255,255,.95); box-shadow: var(--sh-1); }
.peek { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.peek > img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; background: var(--t-gold); }
.peek-body { padding: clamp(20px,2.4vw,40px); display: flex; flex-direction: column; gap: var(--s4); }

.toasts { position: fixed; bottom: var(--s5); left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: var(--s2); align-items: center; width: max-content; max-width: calc(100vw - 28px); pointer-events: none; }
.toast { display: flex; align-items: center; gap: var(--s3); background: var(--coal); color: #fff; padding: 12px var(--s5); border-radius: var(--r-pill); box-shadow: var(--sh-3); font-size: var(--f-sm); font-weight: 600; animation: toastUp .38s var(--out); }
.toast svg { width: 16px; height: 16px; flex: none; stroke: #45D48A; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.toast.bye { animation: toastOut .28s var(--ease) forwards; }
@keyframes toastUp { from { opacity:0; transform: translateY(12px); } }
@keyframes toastOut { to { opacity:0; transform: translateY(8px); } }

/* Layout-shift guards */
#hdr-slot:empty { display:block; min-height: calc(var(--bar-h) + var(--cat-h)); background: var(--coal); }
#foot-slot:empty { display:block; min-height: 520px; background: var(--coal); }
.tiles:empty { min-height: clamp(150px,15vw,210px); }
.grid-p:empty { min-height: clamp(420px,42vw,620px); }
.rail:empty { min-height: clamp(300px,30vw,400px); }
.hero-track:empty { min-height: var(--hero-h); }
.gal-thumbs:empty { min-height: 90px; }
.pc, .tile-cat .ring, .scard, .promo, .mega-card { contain: paint; }

/* ═══ 15b · CONTENT COMPONENTS ═════════════════════════
   Used by the product, heritage and listing pages.
   ═══════════════════════════════════════════════════════ */

/* Small-caps label */
.cap { display: inline-block; font-size: var(--f-cap); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1; color: var(--c, var(--gold-2)); }

/* Gradient accent text */
.gold { background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.it { font-style: italic; }

/* Big index numeral */
.idx { display: block; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; background: var(--g, var(--g-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* Breadcrumb separator */
.trail .sep { opacity: .4; }

/* Underlined micro link */
.ul { position: relative; display: inline-block; padding-bottom: 3px; font-size: var(--f-xs); font-weight: 800; letter-spacing: .04em; color: var(--gold-2); background: none; border: 0; cursor: pointer; }
.ul::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; border-radius: 2px; background: var(--g-gold); transform-origin: right; transition: transform var(--b) var(--ease); }
@media (hover: hover) { .ul:hover::after { animation: swipe .55s var(--out); } }
@keyframes swipe { 0%{transform:scaleX(1);transform-origin:right} 48%{transform:scaleX(0);transform-origin:right} 52%{transform:scaleX(0);transform-origin:left} 100%{transform:scaleX(1);transform-origin:left} }

/* Star row (product page) */
.stars { display: inline-flex; align-items: center; gap: 2px; }
.stars svg { width: 14px; height: 14px; flex: none; fill: var(--amber-1); }
.stars .no { fill: var(--line-2); }
.stars .n { margin-left: 6px; font-size: var(--f-sm); color: var(--ink-3); font-weight: 600; white-space: nowrap; }

/* Tag aliases → chip */
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-sm); font-size: var(--f-mi); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1; white-space: nowrap; background: var(--g-gold); color: #fff; }
.tag-soft { background: var(--t-gold); color: var(--gold-2); }

/* Two-column split */
.split { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); gap: clamp(24px, 3.4vw, 64px); align-items: center; }
.split.tight { gap: clamp(20px, 2.4vw, 44px); }

/* Numbered process steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap); }
.step { padding: var(--s5); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); }
.step .idx, .step .chip { margin-bottom: var(--s2); }
.step b { display: block; font-size: var(--f-body); font-weight: 800; margin-bottom: 4px; }
.step p { font-size: var(--f-sm); color: var(--ink-2); line-height: 1.55; }

/* Editorial banner → same treatment as .banner */
.editorial { position: relative; display: flex; align-items: center; overflow: hidden; border-radius: 0; min-height: clamp(220px, 25vw, 340px); background: var(--g, var(--g-gold)); color: #fff; isolation: isolate; }
.editorial > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; z-index: -1; mix-blend-mode: luminosity; }
.editorial::after { content:""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 120% at 0% 50%, rgba(0,0,0,.42), transparent 62%); }
.editorial .inner { padding: clamp(22px, 3vw, 52px); max-width: 620px; }
.editorial h2 { color: #fff; }
.editorial h2::before { display: none; }
.editorial .cap { color: #FFE9A8; }
.editorial p { color: rgba(255,255,255,.9); margin-block: var(--s3) var(--s5); }
.editorial .acts { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Curtain reveal for imagery */
.nd-js .curtain { clip-path: inset(0 0 101% 0); transition: clip-path .9s var(--out); transition-delay: calc(var(--i,0) * 55ms); }
.nd-js .curtain.in { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .curtain { clip-path: none !important; } }

@media (max-width: 1024px) {
  .split { grid-template-columns: minmax(0,1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .editorial { min-height: 240px; }
}
@media (max-width: 767px) {
  .steps { grid-template-columns: minmax(0,1fr); }
  .editorial::after { background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,.5)); }
  .editorial .inner { max-width: none; }
}

/* ═══ 15c · BLACK & GOLD ON WHITE ══════════════════════
   White page, near-black ink, gold as the accent metal.
   Black is used for weight (strip, footer, primary buttons,
   deal header); gold for highlight (CTAs, badges, rules).
   Gold TEXT on light always uses --brand-ink, never the
   bright fill colour, which is only 2.1:1 on white.
   ═══════════════════════════════════════════════════════ */

/* Buttons — black is primary, gold is the hero CTA.
   The hover background MUST exclude every colour variant. Unqualified,
   `.btn:hover` (0,2,0) outranks `.btn-white` / `.btn-brand` (0,1,0), so a
   white or gold button turned near-black on hover while keeping its dark
   text — the label vanished. Size modifiers are not excluded, only colours. */
.btn { background: var(--coal); color: #fff; }
.btn:not(.btn-grad):not(.btn-brand):not(.btn-brass):not(.btn-white):not(.btn-line):not(.btn-glass):not(.btn-quiet):not(.btn-soft):not(.btn-dark):hover {
  background: #221D16;
}
.btn-grad, .btn-brand { background: var(--g-brand); color: var(--on-gold); --sh-tint: rgba(212,175,55,.42); }
.btn-grad:hover, .btn-brand:hover { box-shadow: var(--sh-col); }
.btn-brass { background: var(--g-brass); color: var(--on-gold); }
.btn-dark  { background: var(--coal); color: #fff; }
.btn-line  { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-line:hover { background: var(--coal); color: #fff; box-shadow: none; }
.btn-soft  { background: var(--t-gold); color: var(--brand-ink); }
.btn-soft:hover { background: var(--g-brand); color: var(--on-gold); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: var(--surface-2); }
.btn-glass { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-glass:hover { background: rgba(255,255,255,.3); }
.btn-quiet { background: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--surface-2); color: var(--ink); }

/* Accent text — always the darkened gold on a light ground */
.ln, .ul, .eyebrow, .cap, .pc-cat, .pc-ship { color: var(--brand-ink); }
.ul::after { background: var(--g-brand); }
.head h2::before { background: var(--g, var(--g-brand)); }
.grad-text { background: var(--g, var(--g-brand)); }
.stars svg, .rev .stars5 svg { fill: var(--brand); }

/* Chips */
.chip      { background: var(--surface-2); color: var(--ink-2); }
.chip-grad, .chip-gold, .chip-sale { background: var(--g-brand); color: var(--on-gold); }
.chip-new  { background: var(--coal); color: var(--brand); }
.chip-ok   { background: var(--t-gold);  color: var(--brand-ink); }
.chip-info { background: var(--surface-2); color: var(--ink-2); }
.chip-soft { background: var(--t-gold);  color: var(--brand-ink); }

/* Rating pill — black with gold numerals */
.rate { background: var(--coal); color: var(--brand); }
.rate-n { color: var(--ink-3); }

/* Icon + arrow controls */
.ic { color: var(--ink); }
@media (hover: hover) { .ic:hover { background: var(--t-gold); color: var(--brand-ink); } }
.ic .dot { background: var(--coal); color: var(--brand); box-shadow: 0 0 0 2px var(--surface); }
.arrow { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-1); }
.arrow:hover { background: var(--coal); color: var(--brand); box-shadow: none; }

/* ── Masthead: one black block (strip + bar + category nav) ── */
.bar    { background: var(--coal); }
/* Category bar sits white under the black masthead, and turns to
   frosted glass once the page scrolls beneath it */
.catbar {
  background: var(--surface);
  border-top: 0;
  box-shadow: inset 0 -1px 0 var(--line);
  transition: background var(--b) var(--ease), box-shadow var(--b) var(--ease),
              -webkit-backdrop-filter var(--b) var(--ease), backdrop-filter var(--b) var(--ease);
}
.hdr.pinned:has(.drop.open) .catbar,
.hdr.pinned:has(.aud.open) .catbar {
  background: var(--surface);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.hdr.pinned .catbar {
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 -1px 0 rgba(20,17,13,.1), 0 6px 22px rgba(20,17,13,.07);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hdr.pinned .catbar { background: rgba(255,255,255,.95); }
}
.hdr.pinned { box-shadow: 0 6px 24px rgba(20,17,13,.24); }

.bar .ic { color: #fff; }
@media (hover: hover) { .bar .ic:hover { background: rgba(212,175,55,.16); color: var(--brand); } }
.bar .ic .dot { background: var(--brand); color: var(--on-gold); box-shadow: 0 0 0 2px var(--coal); }
.bar .burger { color: #fff; }

/* Wordmark reads gold on black; the tagline goes warm grey */
.bar .logo .tl { color: rgba(255,255,255,.62); }

/* Search sits centred, dark-on-dark with a gold submit */
.search input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; }
.search input::placeholder { color: rgba(255,255,255,.55); }
.search input:focus { background: rgba(255,255,255,.13); border-color: var(--brand); box-shadow: 0 0 0 3px rgba(212,175,55,.22); }
/* Gold magnifier — a white-on-black icon at 60% was nearly invisible */
.search .mag { color: var(--brand); opacity: 1; stroke-width: 2.2; }
.search:focus-within .mag { color: var(--brand-lt); }
/* The drawer search sits on white, so it cannot inherit the black-bar
   treatment above — it needs its own light field and dark gold icon */
.msearch .search input { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); }
.msearch .search input::placeholder { color: var(--ink-3); }
.msearch .search input:focus { background: var(--surface); border-color: var(--brand); }
.msearch .search .mag,
.msearch .search:focus-within .mag { color: var(--brand-ink); }
.search .go { background: var(--g-brand); color: var(--on-gold); }
.search .go:hover { filter: brightness(1.06); box-shadow: 0 6px 16px -4px rgba(212,175,55,.5); }

/* Category nav on black */
.catbar a.top { color: var(--ink); }
.catbar a.top:hover, .catbar a.top[aria-current] { color: var(--brand-ink); }
.catbar a.top::after { background: var(--g-brand); }
.catbar .chev { opacity: .45; }

/* The mega panel drops onto white so product links stay legible */
.mega { border-top: 2px solid var(--brand); }
.drawer-nav, .dnav { background: var(--surface); }
.dnav-top { background: var(--coal); }
.dnav-top .logo .nm { background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.dnav-top .ic { color: #fff; }
.sheet { background: var(--surface); box-shadow: var(--sh-3), inset 0 0 0 1px var(--line); }
.sheet h6 { color: var(--ink-3); }
.sheet .terms a { background: var(--surface-2); color: var(--ink-2); }
.sheet .terms a:hover { background: var(--coal) !important; color: var(--brand) !important; }
.hit span { color: var(--brand-ink); }
.login { background: var(--g-brand); color: var(--on-gold); }
.mega { background: var(--surface); box-shadow: var(--sh-3); }
.mega h5 { color: var(--brand-ink); }
.mega ul a:hover { color: var(--ink); }

/* Panels & cards — white with a hairline */
.panel, .trust-item, .rev, .step, .toolbar, .acct-nav, .ord, .facets {
  background: var(--surface); box-shadow: var(--sh-1), inset 0 0 0 1px var(--line);
}
.pc { background: transparent; box-shadow: none; }
.dnav, .drawer, .modal-box { background: var(--surface); }
.drawer-foot, .dnav-foot { background: var(--surface-2); }
.panel-tint { background: var(--surface-2); box-shadow: none; }

/* Product card chrome */
/* .modal-x, .pc-save { background: rgba(255,255,255,.94); color: var(--ink-2); box-shadow: var(--sh-1); } */
.pc-save:hover, .pc-save.on { color: var(--brand-ink); }
.pc-peek { background: rgba(255,255,255,.96); color: var(--ink); box-shadow: var(--sh-1); }
.pc-peek:hover { background: var(--coal); color: var(--brand); }
.pc-off { background: var(--g-brand); color: var(--on-gold); }
.pc-cost .was { color: var(--ink-3); }

/* Feature surfaces — photo under a black wash, gold accents */
.promo, .scard, .banner, .editorial {
  background: var(--coal); color: #fff; box-shadow: none;
}
.promo img, .scard img, .banner > img, .editorial > img { opacity: .6; mix-blend-mode: normal; }
.promo::after { background: linear-gradient(100deg, rgba(20,17,13,.94), rgba(20,17,13,.62) 62%, rgba(20,17,13,.28)); }
.scard::after { background: linear-gradient(180deg, rgba(20,17,13,.2) 18%, rgba(20,17,13,.92)); }
.banner::after, .editorial::after { background: linear-gradient(96deg, rgba(20,17,13,.94), rgba(20,17,13,.66) 48%, rgba(20,17,13,.18)); }
.promo .kicker, .scard .kicker, .promo .go, .scard .go { color: var(--brand); }
.banner h2, .editorial h2, .promo b, .scard b { color: #fff; }
.banner p, .editorial p { color: rgba(255,255,255,.86); }
.editorial .cap { color: var(--brand); }

/* Newsletter — black block with gold heading */
.signup { background: var(--g-hero); color: #fff; box-shadow: none; }
.signup::after { background: radial-gradient(80% 120% at 100% 0%, rgba(212,175,55,.18), transparent 62%); }
.signup h2 { color: var(--brand); }
.signup p { color: rgba(255,255,255,.86); }
.signup .in { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.26); color: #fff; }
.signup .in::placeholder { color: rgba(255,255,255,.6); }
.signup .in:focus { background: rgba(255,255,255,.16); border-color: var(--brand); box-shadow: none; }

/* Deal band — black heading, no frame around it or the cards */
.deal { background: transparent; box-shadow: none; }
.deal::after { display: none; }
.deal-top { background: var(--coal); color: #fff; border: 0; box-shadow: none; }
.deal-top h2 { color: var(--brand); }
.deal-top .bolt { background: rgba(212,175,55,.18); }
.deal-top .bolt svg { fill: var(--brand); }
.clock .unit { background: rgba(255,255,255,.1); }
.clock .unit b { color: var(--brand); }
.deal-body { background: transparent; }

/* Account stat tiles — black with gold figures */
.tile { background: var(--coal); color: #fff; box-shadow: var(--sh-1); }
.tile::after { background: radial-gradient(90% 110% at 100% 0%, rgba(212,175,55,.16), transparent 58%); }
.tile b { color: var(--brand); }
.tile .k, .tile span.s { color: rgba(255,255,255,.68); }

/* Category tiles + trust icons */
.tile-cat .ring { background: var(--tint, var(--t-gold)); box-shadow: inset 0 0 0 1px var(--line); }
.tile-cat .cname { color: var(--ink); }
.tile-cat:hover .cname { color: var(--brand-ink); }
.trust-item .ib { background: var(--coal); color: var(--brand); }

/* Forms
   background-color, NOT the `background` shorthand — the shorthand
   resets background-size and background-position, which blew the
   select's chevron up to fill the field and parked it on the left. */
.in, .sel, .ta { background-color: var(--surface); border-color: var(--line-2); }
.in:focus, .sel:focus, .ta:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(212,175,55,.2); }
.sel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A544C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px 16px;
}
.chk input, .opt input { accent-color: var(--brand-ink); }
.opt:has(input:checked) { border-color: var(--brand); background: var(--t-gold); }
.size[aria-pressed="true"] { background: var(--coal); color: var(--brand); }
.sw { border-color: #fff; box-shadow: 0 0 0 1.5px var(--line-2); }
.sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--brand-ink); }
.stepper button { color: var(--brand-ink); }
.stepper button:hover { background: var(--t-gold); }

/* Filters, tabs, pager */
.disc-btn:hover, .acct-nav a:hover, .trail a:hover { color: var(--brand-ink); }
.acct-nav a.on, .tab.on, .pager .now { background: var(--coal); color: var(--brand); box-shadow: none; }
.tab { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.tab:hover { color: var(--brand-ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.pager a, .pager span { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.pager a:hover { color: var(--brand-ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.pill { background: var(--t-gold); color: var(--brand-ink); }
.pill button:hover { background: rgba(20,17,13,.1); }
.masthead { background: var(--surface-2); border-bottom-color: var(--line); }
.on-tint { background: var(--surface-2); }
.on-white { background: var(--surface); }

/* Footer — black with gold */
.foot { background: var(--coal); }
.foot h5 { color: var(--brand); }
.foot ul a:hover, .foot-legal a:hover { color: var(--brand); }
.toast { background: var(--coal); color: #fff; box-shadow: var(--sh-3); }
.toast svg { stroke: var(--brand); }

/* Layout-shift guards */
#hdr-slot:empty { background: var(--coal); }
#foot-slot:empty { background: var(--coal); }

.count-n { margin-left: auto; margin-right: var(--s3); font-size: var(--f-mi); font-weight: 700; color: var(--ink-3); }

/* ═══ 16 · RESPONSIVE ══════════════════════════════════ */
@media (min-width: 1700px) { :root { --max: 1620px; --pad: clamp(40px,3vw,72px); } }

@media (max-width: 1400px) {
  .grid-p { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .tiles { grid-template-columns: repeat(8, minmax(0,1fr)); }
  .search { max-width: 520px; }
}

@media (max-width: 1180px) {
  :root { --bar-h: 70px; --cat-h: 46px; }
  .burger { display: inline-flex; }
  /* The bar stays and scrolls sideways. The mega panels stay too — the
     chevron button opens them, so hover is no longer required. */
  .catbar-in { gap: 2px; }
  .catbar a.top { padding: 0 10px; font-size: var(--f-xs); }
  .catbar .chev { width: 22px; }
  .login { display: none; }
  .hero-wrap { grid-template-columns: minmax(0,1fr); }
  .promos { grid-template-rows: none; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .promo { min-height: 128px; }
  .sheet-hits { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .foot-top { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .foot-top > *:first-child { grid-column: 1/-1; }
}

@media (max-width: 1024px) {
  .grid-p { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .tiles { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .strip-cards { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .trust { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .c4, .c6 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .pdp { grid-template-columns: minmax(0,1fr); }
  .pdp-side { position: static; }
  .gal { grid-template-columns: minmax(0,1fr); }
  .gal-thumbs { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .gal-thumbs::-webkit-scrollbar { display: none; }
  .gal-thumbs button { flex: 0 0 68px; }
  .acct { grid-template-columns: minmax(0,1fr); }
  .acct-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .acct-nav::-webkit-scrollbar { display: none; }
  .with-aside { grid-template-columns: minmax(0,1fr); }
  .with-aside > aside { position: static; }
  .peek { grid-template-columns: minmax(0,1fr); }
  .peek > img { min-height: 0; aspect-ratio: 4/3; }
  .signup-in { grid-template-columns: minmax(0,1fr); }
  .shop { grid-template-columns: minmax(0,1fr); }
  .facets { position: fixed; inset: 0 auto 0 0; width: min(340px,88vw); z-index: 95; max-height: none; height: 100%; border-radius: 0; transform: translateX(-102%); visibility: hidden; transition: transform .42s var(--out), visibility .42s; padding: var(--s4) var(--s4) var(--s16); overflow-y: auto; overscroll-behavior: contain; }
  .facets.open { transform: none; visibility: visible; }
  .facet-veil { display: block; position: fixed; inset: 0; z-index: 94; background: var(--veil); opacity: 0; visibility: hidden; transition: opacity var(--b), visibility var(--b); }
  .facet-veil.open { opacity: 1; visibility: visible; }
}

@media (max-width: 900px) {
  .grid-p, .grid-p.p3, .grid-p.p4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tiles { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .strip-cards { grid-template-columns: minmax(0,1fr); }
  .c3, .c4, .c6 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .banner { min-height: 260px; }
  .banner::after { background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,.5)); }
  .signup form { flex-direction: column; }
  .signup form .btn { width: 100%; }
}

@media (max-width: 767px) {
  :root {
    --bar-h: 62px; --strip-h: 34px; --tap: 42px;
    --pad: 14px; --gap: 10px; --gap-y: 15px;   /* the same 1.5× ratio */
    --band: clamp(26px,5vw,40px);
    --hero-h: 340px;
  }
  .c2, .c3, .c4, .c6 { grid-template-columns: minmax(0,1fr); }
  .tiles { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .trust { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .trust-item { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .foot-top { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s6); padding-bottom: var(--s10); }
  .foot-btm { justify-content: flex-start; }
  .foot-legal { order: 3; width: 100%; }
  .sheet-hits { grid-template-columns: repeat(2, minmax(0,1fr)); }

  /* The phone bar's grid, gaps and slots are defined once, in
     section 57. Four sections used to declare .bar-in at the same
     breakpoint and only source order decided which won — change one
     and the layout moved for reasons nothing in that section explained. */
  .logo > svg, .logo > img { width: 36px; height: 36px; }
  .logo .nm { font-size: .88rem; letter-spacing: .07em; }
  .logo .tl { display: none; }
  .ic > svg { width: 20px; height: 20px; }

  .hero { border-radius: 0; }
  .hero-cell::after { background: linear-gradient(4deg, rgba(30,16,48,.92) 12%, rgba(113,40,214,.5) 62%, rgba(200,30,107,.24)); }
  .hero-layer { align-items: end; padding-bottom: 54px; }
  .hero-copy { max-width: 100%; }
  .hero-copy p { display: none; }
  .hero-acts .btn { flex: 1 1 100%; }
  .hero-nav { display: none; }
  .promos { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .promo { padding: var(--s4); min-height: 112px; border-radius: var(--r-lg); }

  .rail { grid-auto-columns: 46vw; }
  .rail.wide { grid-auto-columns: 82vw; }
  .head .acts .arrow { display: none; }
  .deal-top { padding: var(--s4); }
  .clock .unit { min-width: 38px; }

  /* The card's own responsive rules live in section 65. What was here
     indented the text 12px while the photograph stayed flush, and set
     top/right on .pc-save, which has not been absolutely positioned
     since the card was rebuilt — along with .pc-flags and .pc-cost .now,
     neither of which exists any more. */

  .assure { grid-template-columns: minmax(0,1fr); }
  .pdp-acts .btn { flex: 1 1 100%; }
  .pdp-acts .ic { width: 100%; }

  .line { grid-template-columns: 72px minmax(0,1fr); }
  .line > img { width: 72px; height: 72px; }
  .line .tail { grid-column: 2; align-items: flex-start; text-align: left; flex-direction: row; justify-content: space-between; width: 100%; }
  .line-lg { grid-template-columns: 84px minmax(0,1fr); }
  .ord { flex-direction: column; align-items: flex-start; }
  .ord > div { width: 100%; }
  .co-bar .shell { min-height: 60px; }
  .co-bar .progress { order: 3; width: 100%; justify-content: space-between; gap: 3px; }
  .co-bar .pgap { flex: 1; width: auto; }
  /* Labels now sit inside the step's own button/link */
  .pstep > a > span, .pstep > button > span { display: none; }
  .drawer-top, .dnav-top { min-height: 58px; }
  .toasts { bottom: var(--s3); }
  .modal-box { max-height: 92svh; }
  .signup { padding: var(--s6) var(--s5); border-radius: var(--r-lg); }
}

@media (max-width: 560px) { .bar-r .hint[data-hint="Wishlist"] { display: none; } }

@media (max-width: 440px) {
  .logo > svg, .logo > img { width: 34px; height: 34px; }
  .logo .nm { font-size: .82rem; letter-spacing: .05em; }
}

@media (max-width: 380px) {
  :root { --pad: 12px; --gap: 8px; --tap: 40px; }
  .tiles { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .pc-cost .was { display: none; }
  .btn { padding-inline: 14px; }
  .clock .unit { min-width: 34px; padding: 5px 6px; }
}

@media print {
  .hdr, .foot, .drawer, .veil, .dnav, .modal, .toasts, .hero-ctrl { display: none !important; }
  body { background: #fff; color: #000; }
  .up { opacity: 1 !important; transform: none !important; }
}

/* ═══ 22 · SQUARED CARDS ═══════════════════════════════
   One card language across the whole site: no rounded
   corners on any panel, tile, photo frame or product card,
   and no box behind a product. Controls — buttons, chips,
   inputs, the circular category rings — keep their shape,
   because they are not cards.
   Placed last so it also wins over the breakpoint blocks
   above, which used to restore a radius on small screens.
   ═════════════════════════════════════════════════════ */
.panel, .panel-tint, .frame, .trust-item, .rev, .step, .ord, .tile,
.toolbar, .facets, .acct-nav, .mega-card, .gal-stage, .gal-thumbs button,
.hit img, .line > img, .line-lg > img, .mini .th img, .ord .minis img,
.signup, .modal-box, .promo, .scard, .banner, .editorial, .deal, .deal-top,
.pc, .pc-shot, .assure-item, .trust-item .ib {
  border-radius: 0;
}

/* No product card carries a container of its own — the photograph
   is the card, on the same white ground in every section. */
.pc, .grid-p .pc, .rail .pc, .deal .pc {
  background: transparent; box-shadow: none; border: 0; padding: 0;
}
.pc-shot { background: var(--surface); box-shadow: none; }

/* A section header carrying only a title and its right-hand action */
.head-tight { margin-bottom: var(--s4); align-items: center; }

/* ── Department pill on the category row, tightened for small screens ── */
@media (max-width: 1180px) {
  .catbar-shell { gap: var(--s2); }
  .aud-btn { height: 30px; padding: 0 10px; }
  .aud-v { font-size: var(--f-xs); }
}
@media (max-width: 560px) {
  .catbar-shell { gap: 8px; }
  .aud-btn { padding: 0 8px; gap: 6px; }
  .catbar-shell > .aud::after { display: none; }
  .aud-menu { min-width: 210px; }
}

/* The filter panel only scrolls when it is a mobile drawer, and even
   then without a visible scrollbar rule. */
@media (max-width: 1024px) {
  .facets { position: fixed; }
  .facets { scrollbar-width: none; -ms-overflow-style: none; }
  .facets::-webkit-scrollbar { width: 0; height: 0; display: none; }
}

/* ═══ 23 · PRODUCT REVIEWS ═════════════════════════════
   A summary band across the top, then the reviews in a rail
   with four in view and the rest a scroll or an arrow away.
   Cards carry the customer's photograph when they sent one.
   ═════════════════════════════════════════════════════ */
.revsum {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 56px); flex-wrap: wrap;
  padding: clamp(18px, 2vw, 28px); margin-bottom: var(--gap);
  background: var(--coal); color: #fff;
}
.revsum-score { display: flex; flex-direction: column; gap: 4px; flex: none; }
.revsum-n { font-family: var(--serif); font-size: clamp(2.4rem, 1.9rem + 2vw, 3.4rem); font-weight: 600; line-height: 1; color: var(--brand); }
.revsum .stars svg { fill: var(--brand); width: 16px; height: 16px; }
.revsum-c { font-size: var(--f-sm); color: rgba(255,255,255,.72); }

.revbars { display: flex; flex-direction: column; gap: 7px; flex: 1 1 320px; min-width: 0; }
.revbar { display: grid; grid-template-columns: 32px minmax(0,1fr) 38px; align-items: center; gap: var(--s2); }
.revbar-s { font-size: var(--f-xs); font-weight: 700; color: rgba(255,255,255,.86); white-space: nowrap; }
.revbar-s i { font-style: normal; color: var(--brand); margin-left: 1px; }
.revbar-t { height: 6px; background: rgba(255,255,255,.16); overflow: hidden; }
.revbar-t i { display: block; height: 100%; background: var(--g-brand); }
.revbar-p { font-size: var(--f-mi); color: rgba(255,255,255,.6); text-align: right; font-variant-numeric: tabular-nums; }

/* Four across. .rail is a grid with grid-auto-columns, not flex, so the
   card width has to be set on the track — a flex-basis would do nothing. */
.revlist { grid-auto-columns: calc((100% - var(--gap) * 3) / 4); align-items: stretch; }
.revcard {
  display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  scroll-snap-align: start; min-width: 0;
}
.revcard-top { display: flex; align-items: center; gap: var(--s3); }
.revcard-face { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; flex: none; background: var(--line); }
.revcard-top > div { min-width: 0; flex: 1; }
.revcard-top b { display: block; font-size: var(--f-sm); font-weight: 800; color: var(--ink); }
.revcard-top span { display: block; font-size: var(--f-mi); color: var(--ink-3); }
.revcard-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.revcard-ok { flex: none; padding: 4px 8px; background: var(--t-gold); font-size: var(--f-mi); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.revcard p { font-size: var(--f-sm); color: var(--ink-2); line-height: 1.62; margin: 0; }

/* Customer photograph — only rendered when the review has one */
.revcard-shot { position: relative; display: block; margin-top: auto; overflow: hidden; aspect-ratio: 4/3; background: var(--surface-2); cursor: zoom-in; }
.revcard-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--out); }
.revcard-shot:hover img { transform: scale(1.05); }
.revcard-shot-n {
  position: absolute; left: 8px; bottom: 8px;
  padding: 4px 8px; background: rgba(20,17,13,.82); color: var(--brand);
  font-size: var(--f-mi); font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
/* A text-only review pushes its quote down so card feet still align */
.revcard:not(.has-shot) p { flex: 1; }

/* Full-size photo in the modal */
.modal-shot { width: min(760px, 100%); background: var(--coal); }
.shotfull { display: block; width: 100%; height: auto; max-height: 82svh; object-fit: contain; }

/* Homepage testimonial cards carry the photo too */
.rev-shot { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--surface-2); }

@media (max-width: 1180px) { .revlist { grid-auto-columns: calc((100% - var(--gap) * 2) / 3); } }
@media (max-width: 860px)  { .revlist { grid-auto-columns: calc((100% - var(--gap)) / 2); } }
@media (max-width: 560px)  {
  .revlist { grid-auto-columns: 82%; }
  .revsum { gap: var(--s4); }
  .revsum-score { flex: 1 1 100%; }
}

/* Homepage hero sits right under the nav */
.band-flush { padding-top: 5px; }

/* ── Sort bar ────────────────────────────────────────────
   Two groups that stay on one line while there is room and
   stack cleanly when there is not, instead of the select
   overflowing its panel on narrow screens. */
.toolbar { flex-wrap: wrap; }
.toolbar-l, .toolbar-r { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.toolbar-l { flex: 1 1 auto; }
.toolbar-r { flex: 0 0 auto; }
.toolbar-r .lbl { flex: none; margin: 0; }
.toolbar .sel { min-height: 42px; min-width: 190px; max-width: 100%; }

@media (max-width: 640px) {
  .toolbar { align-items: stretch; gap: var(--s2); }
  .toolbar-l, .toolbar-r { flex: 1 1 100%; }
  .toolbar-r .sel { flex: 1 1 auto; min-width: 0; }
  .toolbar-l #filterBtn { flex: none; }
  .toolbar-l #count { margin-left: auto; text-align: right; }
}

/* ═══ 24 · SIGN-IN POPUP ═══════════════════════════════
   Black brand panel on the left, the form on the right.
   Mobile number first — the OTP route Indian retail uses —
   with Google, Apple and Facebook underneath.
   ═════════════════════════════════════════════════════ */
.modal-auth { width: min(760px, 100%); }
.auth { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); min-height: 460px; }

.auth-side { background: var(--coal); color: #fff; padding: clamp(22px, 2.6vw, 38px); display: flex; flex-direction: column; gap: var(--s3); }
.auth-side .cap { color: var(--brand); }
.auth-side h3 { color: #fff; }
.auth-side h3::before { display: none; }
.auth-side > p { font-size: var(--f-sm); color: rgba(255,255,255,.74); line-height: 1.6; }
.auth-perks { display: flex; flex-direction: column; gap: var(--s3); margin-top: auto; list-style: none; padding: 0; }
.auth-perks li { display: flex; align-items: flex-start; gap: var(--s2); font-size: var(--f-sm); color: rgba(255,255,255,.86); }
.auth-perks svg { width: 15px; height: 15px; flex: none; margin-top: 3px; stroke: var(--brand); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.auth-main { padding: clamp(22px, 2.6vw, 38px); display: flex; flex-direction: column; gap: var(--s4); justify-content: center; }
.auth-form { display: flex; flex-direction: column; gap: var(--s2); }

.phone { display: flex; align-items: stretch; }
.phone-cc {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 0 12px; background: var(--surface-2);
  border: 1.5px solid var(--line-2); border-right: 0;
  font-size: var(--f-body); font-weight: 700; color: var(--ink); white-space: nowrap;
}
.phone-cc svg { width: 20px; height: 14px; flex: none; box-shadow: 0 0 0 1px rgba(20,17,13,.12); }
.phone .in { flex: 1 1 auto; min-width: 0; border-radius: 0; letter-spacing: .06em; }

.auth-hint { font-size: var(--f-mi); color: var(--ink-3); margin: 2px 0 var(--s2); }

.auth-or { display: flex; align-items: center; gap: var(--s3); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-or span { font-size: var(--f-mi); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

.auth-socials { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s2); }
.auth-social {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--tap); padding: 0 8px;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-2);
  font-size: var(--f-sm); font-weight: 700; color: var(--ink);
  transition: box-shadow var(--f) var(--ease), background var(--f) var(--ease);
}
.auth-social:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.auth-social svg { width: 18px; height: 18px; flex: none; }
.auth-legal { font-size: var(--f-mi); color: var(--ink-3); text-align: center; line-height: 1.5; }
.auth-legal a { color: var(--brand-ink); font-weight: 700; text-decoration: underline; }

@media (max-width: 700px) {
  .auth { grid-template-columns: minmax(0,1fr); min-height: 0; }
  .auth-side { gap: var(--s2); padding: var(--s5) var(--s5) var(--s4); }
  .auth-perks { display: none; }
  .auth-main { padding: var(--s5); gap: var(--s3); }
}
@media (max-width: 380px) {
  .auth-socials { grid-template-columns: minmax(0,1fr); }
  .auth-social { justify-content: flex-start; padding-inline: 16px; }
}

/* ═══ 25 · CHECKOUT — STEP BY STEP ═════════════════════
   One step visible at a time, each a squared white card
   with a numbered head, its fields, and its own footer of
   Back / Continue. The summary is a sticky panel on the
   desktop and a tappable total bar on the phone.
   ═════════════════════════════════════════════════════ */
.co-wrap { align-items: start; }

.costep { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.costep[hidden] { display: none; }
.costep-h { display: flex; align-items: flex-start; gap: var(--s3); padding: clamp(18px, 2vw, 26px); border-bottom: 1px solid var(--line); }
.costep-h h2 { margin: 0; font-size: var(--f-d3); }
.costep-h h2::before { display: none; }
.costep-h p { margin-top: 3px; }
.costep-n { flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: var(--coal); color: var(--brand); font-size: var(--f-sm); font-weight: 800; }
.costep-b { padding: clamp(18px, 2vw, 26px); }
.costep-f { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: clamp(14px, 1.6vw, 20px) clamp(18px, 2vw, 26px); border-top: 1px solid var(--line); background: var(--surface-2); }
.costep-f .btn { flex: 0 1 auto; }
.costep-f .btn-brand { margin-left: auto; }

.opt-note { text-transform: none; letter-spacing: 0; color: var(--ink-3); font-weight: 500; }
.opt-cost { white-space: nowrap; }
.mini-p { font-size: .9375rem; white-space: nowrap; }
.tot-off { color: var(--brand-ink); font-weight: 700; }
.colink { text-decoration: underline; }


/* Progress bar — every step is a live control, in both directions */
.progress { list-style: none; margin: 0; padding: 0; }
.pstep { position: relative; padding-right: clamp(14px, 3vw, 32px); }
.pstep:last-child { padding-right: 0; }
.pstep::after { content: ""; position: absolute; right: clamp(5px, 1.2vw, 12px); top: 50%; width: clamp(6px, 1.4vw, 16px); height: 2px; background: var(--line); }
.pstep:last-child::after { display: none; }
.pstep > a, .pstep > button {
  display: flex; align-items: center; gap: var(--s2);
  min-height: var(--tap); padding: 0 6px; cursor: pointer;
  font: inherit; color: inherit; background: none; border: 0;
  transition: color var(--f) var(--ease);
}
.pstep > a:hover, .pstep > button:hover { color: var(--brand-ink); }
.pstep > a:hover i, .pstep > button:hover i { background: var(--t-gold); color: var(--brand-ink); }
.pstep.done i { background: var(--g-brand); color: var(--on-gold); }
.pstep.on i { background: var(--coal); color: var(--brand); }
.pstep.on > button i, .pstep.on > button:hover i { background: var(--coal); color: var(--brand); }

/* Order summary */
.cosum { position: sticky; top: var(--s4); align-self: start; }
.cosum-toggle { display: none; }
.cosum-h { margin-bottom: var(--s4); }

@media (max-width: 1024px) {
  /* On a phone the summary collapses to a single total bar that
     opens on tap, so it never buries the step you are filling in. */
  .cosum { position: sticky; top: 0; z-index: 30; padding: 0; }
  .cosum-h { display: none; }
  .cosum-toggle {
    display: flex; align-items: center; gap: var(--s3); width: 100%;
    min-height: 54px; padding: 0 var(--s4);
    font-size: var(--f-sm); font-weight: 700; color: var(--ink); text-align: left;
  }
  .cosum-toggle b { margin-left: auto; font-size: var(--f-lead); font-weight: 800; }
  .cosum-toggle .pm { position: relative; width: 12px; height: 12px; flex: none; }
  .cosum-toggle .pm::before, .cosum-toggle .pm::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--ink-2); transition: transform var(--b) var(--ease); }
  .cosum-toggle .pm::before { width: 12px; height: 2px; }
  .cosum-toggle .pm::after  { width: 2px; height: 12px; }
  .cosum.open .cosum-toggle .pm::after { transform: scaleY(0); }
  .cosum-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--b) var(--ease); }
  .cosum.open .cosum-body { grid-template-rows: 1fr; }
  .cosum-body > .cosum-in { min-height: 0; overflow: hidden; }
  .cosum.open .cosum-body > .cosum-in { padding: 0 var(--s4) var(--s4); }
}

@media (max-width: 560px) {
  .costep-f { flex-direction: column-reverse; align-items: stretch; }
  .costep-f .btn { width: 100%; margin-left: 0; }
  .cols.c3 { grid-template-columns: minmax(0,1fr); }
  .co-bar .shell { gap: var(--s2); }
  .co-bar .logo .wm { display: none; }
}

/* .tag-gold is used for a default address chip but was never defined,
   so those chips fell back to the plain .tag gradient. */
.tag-gold { background: var(--coal); color: var(--brand); }
.tag-soft { background: var(--t-gold); color: var(--brand-ink); }

/* --brand-ink on a gold tint is only 4.4:1 — below AA. Chips sitting on
   a tint get their own deeper gold, which the dark flip inverts. */
:root { --ink-on-tint: #7A600F; }          /* 5.5:1 on --t-gold */
[data-theme="dark"] { --ink-on-tint: #E8C25A; }
.tag-soft, .chip-ok, .chip-soft, .revcard-ok { color: var(--ink-on-tint); }

/* ═══ 26 · SAVED ADDRESSES ═════════════════════════════
   The one you are delivering to sorts to the front and
   carries a gold rule; the rest offer "Deliver here".
   ═════════════════════════════════════════════════════ */
.addr {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s4); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow var(--f) var(--ease);
}
.addr.on { box-shadow: inset 0 0 0 2px var(--brand); }
.addr p { margin: 0; }
.addr .btn { align-self: flex-start; margin-top: var(--s2); }
.addr-on {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  margin-top: var(--s2); font-size: var(--f-xs); font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-on-tint);
}
.addr-on svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Selects on narrow screens ───────────────────────────
   A <select> will not shrink below its widest option unless
   it is told it may, so the State field used to push the
   three-column address row wider than its container.      */
.field { min-width: 0; }
.cols > * { min-width: 0; }
.sel { text-overflow: ellipsis; }

@media (max-width: 860px) {
  .cols.c3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cols.c3 > *:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .cols.c2, .cols.c3 { grid-template-columns: minmax(0,1fr); }
  .cols.c3 > *:last-child { grid-column: auto; }
  .sel { padding-right: 36px; background-position: right 10px center; }
}

/* ═══ 27 · ANIMATED FOOTER WORDMARK ════════════════════
   NIHARA alone, set in Italiana — a high-contrast fashion
   display face, deliberately unlike the Cormorant used for
   headings. It sits on the footer's own black with no band,
   rule or panel behind it, so it reads as part of the page
   rather than a separate strip.

   Three layers of motion: the letters rise in sequence, then
   breathe on a slow loop; gold drifts through the fill; and a
   thread crosses beneath like a shuttle on the loom. All of it
   is cancelled under prefers-reduced-motion.
   ═════════════════════════════════════════════════════ */
.footmark {
  position: relative; overflow: hidden;
  background: transparent;                   /* the footer's own coal */
  border: 0;                                 /* no rule, no seam */
  padding: clamp(20px, 3.4vw, 46px) var(--pad) clamp(18px, 2.4vw, 30px);
  text-align: center;
}
.footmark-in { max-width: var(--max); margin-inline: auto; }

.footmark-word {
  display: flex; align-items: baseline; justify-content: center;
  font-family: 'Italiana', 'Cormorant Garamond', serif;
  font-weight: 400; line-height: 1;
  /* Only what shows before the script runs — fitMark() in site.js then
     measures the rendered word and sets the size that fills the footer.
     Tracking is fixed and modest so that measured ratio holds at every
     size; a clamped letter-spacing would change the ratio as the screen
     changed and the measurement would no longer be true.
     THIS IS THE ONLY PLACE font-size, letter-spacing and text-indent are
     set on the wordmark. Three rules used to set all three. */
  font-size: clamp(3rem, 1.4rem + 11vw, 10rem);
  letter-spacing: .05em;
  text-indent: .05em;                         /* balance the trailing track */
}
.footmark-word span {
  display: inline-block;
  background: var(--g-brand); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* Hidden only when the script is alive to reveal it again */
.nd-js .footmark-word span { opacity: 0; transform: translateY(.3em); }
/* Rise once, then breathe and shimmer for as long as it is on screen */
.footmark.in .footmark-word span {
  animation:
    markRise .72s var(--out) forwards,
    markFloat 5.2s ease-in-out 1s infinite,
    markSheen 7s linear 1s infinite;
  animation-delay: calc(var(--n) * 70ms), calc(1s + var(--n) * 110ms), calc(1s + var(--n) * 90ms);
}
@keyframes markRise  { to { opacity: 1; transform: none; } }
@keyframes markFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-.055em); }
}
@keyframes markSheen {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* The shuttle thread */
.footmark-loom { position: relative; height: 2px; margin: clamp(10px, 1.4vw, 20px) auto 0; background: rgba(255,255,255,.1); max-width: min(680px, 78%); overflow: hidden; }
.footmark-loom i { position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(90deg, transparent, var(--brand), transparent); transform: translateX(-110%); }
.footmark.in .footmark-loom i { animation: shuttle 4.2s var(--ease) 1.1s infinite; }
@keyframes shuttle {
  0%   { transform: translateX(-110%); }
  46%  { transform: translateX(260%); }
  54%  { transform: translateX(260%); }
  100% { transform: translateX(-110%); }
}

.footmark-tag {
  display: block; margin-top: clamp(9px, 1.1vw, 15px);
  font-size: var(--f-mi); font-weight: 800; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.nd-js .footmark-tag { opacity: 0; transform: translateY(6px); }
.footmark.in .footmark-tag { animation: markRise .7s var(--out) .9s forwards; }

@media (max-width: 560px) {
  .footmark-word { letter-spacing: .06em; text-indent: .06em; }
  .footmark-tag { letter-spacing: .2em; }
}

@media (prefers-reduced-motion: reduce) {
  .footmark .footmark-word span,
  .footmark .footmark-tag { opacity: 1; transform: none; animation: none; }
  .footmark .footmark-loom i { animation: none; transform: translateX(-110%); }
}

/* Footer payment line — a statement, not a wall of provider logos */
.foot-pay { font-size: var(--f-sm); color: var(--on-dark-2); }

/* ═══ 29 · MOBILE TAB BAR ══════════════════════════════
   Fixed bottom navigation on phones: Home, Categories,
   Wishlist, Cart, Profile. Hidden from 900px up, where
   the masthead already carries all five.
   ═════════════════════════════════════════════════════ */
.tabs-m { display: none; }

@media (max-width: 900px) {
  .tabs-m {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 88;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    background: var(--coal);
    box-shadow: 0 -6px 22px rgba(20,17,13,.22);
    /* Clear the home indicator on notched phones */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabs-m a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 58px; padding: 6px 2px;
    font-size: 10px; font-weight: 700; letter-spacing: .02em;
    color: rgba(255,255,255,.66);
    transition: color var(--f) var(--ease);
  }
  .tabs-m a[aria-current="page"] { color: var(--brand); }
  .tabs-m a:active { color: var(--brand-lt); }

  .tabs-ic { position: relative; display: block; line-height: 0; }
  .tabs-m svg {
    width: 22px; height: 22px;
    stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  }
  .tabs-n {
    position: absolute; top: -5px; right: -9px; min-width: 16px; height: 16px;
    display: grid; place-items: center; padding: 0 4px;
    background: var(--brand); color: var(--on-gold);
    font-size: 9px; font-weight: 800; line-height: 1;
    box-shadow: 0 0 0 2px var(--coal);
  }

  /* The bar floats over the page, so the footer needs clearance or its
     last row sits underneath it and cannot be reached. */
  body.has-tabs { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  body.has-tabs .facets { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}

/* ═══ 30 · MOBILE MASTHEAD ═════════════════════════════
   Phones get: department pill, centred wordmark and a search
   icon on the top row, categories on the row below, tab bar
   at the foot. No hamburger — the tab bar and the footer
   carry the full link list. Layout lives in section 57.
   ═════════════════════════════════════════════════════ */
.aud-mob  { display: none; }          /* top bar, phones only */
.aud-desk { display: block; }         /* category row, wide screens */

@media (max-width: 900px) {
  .aud-desk { display: none; }
  .aud-mob  { display: block; }

  /* Layout in section 57. This block only decides which department
     control is visible. */

  /* Department pill, compact, sitting against the search field */
  .aud-mob .aud-btn { height: 36px; padding: 0 10px; gap: 6px; }
  .aud-mob .aud-v { font-size: var(--f-xs); }
  .aud-mob .aud-menu { left: 0; min-width: 210px; }

  /* Category row is the whole lower nav now */
  .catbar-shell { gap: 0; }
  .catbar-shell > .aud::after { display: none; }
}

@media (max-width: 420px) {
  .tabs-m a { font-size: 9px; }
  .aud-mob .aud-btn { padding: 0 8px; }
}

/* ═══ 31 · QUICK FILTER BAR ════════════════════════════
   Filter · Sort · Weave · Category · Price in one scrolling
   row above the grid, with a sheet of options beneath.
   ═════════════════════════════════════════════════════ */
.qbar {
  position: relative;
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s3); padding-bottom: 2px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.qbar::-webkit-scrollbar { display: none; }

.qchip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 38px; padding: 0 12px; scroll-snap-align: start;
  background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: var(--f-sm); font-weight: 700; white-space: nowrap;
  transition: box-shadow var(--f) var(--ease), background var(--f) var(--ease);
}
.qchip:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.qchip.on { background: var(--coal); color: var(--brand); box-shadow: none; }
.qchip svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qv { font-weight: 500; color: var(--ink-2); max-width: 12ch; overflow: hidden; text-overflow: ellipsis; }
.qchip.on .qv { color: rgba(255,255,255,.78); }
.qcv { width: 6px; height: 6px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px,-2px); opacity: .55; }
.qn { min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; background: var(--g-brand); color: var(--on-gold); font-size: var(--f-mi); font-weight: 800; }

.qsheet {
  position: relative; z-index: 20;
  margin-bottom: var(--s4); padding: var(--s3) var(--s4) var(--s4);
  background: var(--surface); box-shadow: var(--sh-2), inset 0 0 0 1px var(--line);
}
.qsheet[hidden] { display: none; }
.qsheet-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.qsheet-top b { font-size: var(--f-sm); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.qsheet-body { display: flex; flex-wrap: wrap; gap: var(--s2); }
.qopt {
  min-height: 40px; padding: 0 14px;
  background: var(--surface-2); color: var(--ink);
  font-size: var(--f-sm); font-weight: 600; text-align: left;
  transition: background var(--f) var(--ease), color var(--f) var(--ease);
}
.qopt:hover { background: var(--t-gold); color: var(--ink-on-tint); }
.qopt.on { background: var(--coal); color: var(--brand); font-weight: 800; }

@media (max-width: 640px) {
  .qsheet-body { flex-direction: column; }
  .qopt { width: 100%; }
}

/* ═══ 32 · MOBILE BANNER + DEAL ════════════════════════ */
@media (max-width: 640px) {
  /* Banner CTAs: smaller, and side by side rather than stacked */
  .banner .acts, .editorial .acts, .hero-copy .acts {
    flex-wrap: nowrap; gap: var(--s2);
  }
  .banner .acts .btn, .editorial .acts .btn, .hero-copy .acts .btn {
    flex: 1 1 0; min-width: 0;
    min-height: 40px; padding: 0 12px;
    font-size: var(--f-xs); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .banner .inner, .editorial .inner { padding: var(--s5); max-width: none; }
  .banner p, .editorial p { margin-block: var(--s2) var(--s4); font-size: var(--f-sm); }

  /* Deal of the Day — the black head wrapped badly and the countdown
     pushed the "View all deals" button off the row. */
  .deal-top {
    display: grid; grid-template-columns: minmax(0,1fr);
    gap: var(--s3); padding: var(--s4);
  }
  .deal-top h2 { font-size: var(--f-d3); gap: var(--s2); }
  .deal-top .bolt { width: 26px; height: 26px; }
  .deal-top .bolt svg { width: 14px; height: 14px; }
  .deal-top .row { width: 100%; justify-content: space-between; gap: var(--s2); flex-wrap: nowrap; }
  .clock { gap: 5px; flex: none; }
  .clock .lbl2 { display: none; }
  .clock .unit { min-width: 38px; padding: 5px 6px; }
  .clock .unit b { font-size: .94rem; }
  .clock .unit span { font-size: 8px; }
  .deal-top .btn { flex: none; min-height: 36px; padding: 0 12px; font-size: var(--f-xs); white-space: nowrap; }
  .deal-body { padding-top: var(--s4); }
}

@media (max-width: 380px) {
  .deal-top .btn { padding: 0 9px; }
  .clock .unit { min-width: 33px; padding: 4px 5px; }
}

/* ═══ 33 · LISTING PAGE ON MOBILE ══════════════════════
   Straight from the nav into the controls and the grid.
   The breadcrumb, display title, blurb and the category
   circles all sit above the fold on a phone and push the
   products out of sight — the category bar in the header
   already covers what the circles were doing.
   ═════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .masthead-plp { display: none; }
  .circles-band { display: none; }
  .results-band { padding-top: var(--s3); }

  /* The quick bar leads the page, so it earns a little more room */
  .qbar { margin-bottom: var(--s3); padding-top: 2px; }
  .toolbar { padding: var(--s2) var(--s3); margin-bottom: var(--s3); }
  .toolbar-r { display: none; }        /* Sort lives in the quick bar here */
  .toolbar-l { flex: 1 1 100%; justify-content: space-between; }
}

/* The h1 still exists for search engines and screen readers */
@media (max-width: 900px) {
  .masthead-plp h1 {
    display: block;
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .masthead-plp { display: block; padding: 0; border: 0; background: none; }
  .masthead-plp .trail, .masthead-plp .lead { display: none; }
}

/* ═══ 34 · OUR STORY ═══════════════════════════════════
   Rebuilt. The old version stacked eight full-bleed bands
   that all looked alike and broke below 900px. This one
   alternates: an editorial split hero, a figure strip, two
   image/text splits that flip, a quote, a card set, a
   timeline and one dark refusal panel.

   Everything sizes from clamp() and every grid collapses
   to a single column at 860px, so there is one breakpoint
   to reason about rather than six.
   Square corners throughout, per the house rule.
   ═══════════════════════════════════════════════════════ */

/* Shared bits ------------------------------------------------ */
.ab2-eye {
  display: inline-block; margin-bottom: var(--s3);
  font-size: var(--f-xs); font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-ink);
}
.ab2-txt p { color: var(--ink-2); max-width: 56ch; }
.ab2-txt p + p { margin-top: var(--s4); }
.ab2-head { max-width: 62ch; margin-bottom: clamp(20px, 3vw, 36px); }
.ab2-head .d2 { margin: 0; }
.ab2-acts { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: clamp(20px, 2.6vw, 30px); }
.ab2-fig { margin: 0; overflow: hidden; background: var(--surface-2); }
.ab2-fig img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }

/* 1 · Hero — photograph on one side, statement on the other.
   No text over the image, so nothing has to be legible against
   an unpredictable photograph at an unpredictable width. */
.ab2-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.ab2-hero-img { margin: 0; overflow: hidden; background: var(--coal); }
.ab2-hero-img img {
  display: block; width: 100%; height: 100%;
  min-height: clamp(300px, 46vw, 620px);
  object-fit: cover;
}
.ab2-hero-txt {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 4.4vw, 76px) clamp(20px, 4vw, 68px);
}
.ab2-hero-txt h1 {
  margin: 0 0 var(--s4);
  font-family: var(--serif);
  font-weight: 500; line-height: 1.02;
  font-size: clamp(2.5rem, 6.4vw, 4.6rem);
  letter-spacing: -.015em;
}
.ab2-lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  line-height: 1.45; color: var(--ink); margin: 0 0 var(--s4);
}
.ab2-hero-txt > p:not(.ab2-lead) { color: var(--ink-2); max-width: 46ch; margin: 0; }

/* 2 · Figures — a thin black rule between hero and story. */
.ab2-figs { background: var(--coal); color: var(--on-dark); padding-block: clamp(22px, 3vw, 38px); }
.ab2-figs ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
}
.ab2-figs li { text-align: center; }
.ab2-figs b {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1;
  color: var(--brand);
}
.ab2-figs span {
  display: block; margin-top: 6px;
  font-size: var(--f-xs); line-height: 1.35; color: var(--on-dark-2);
  letter-spacing: .04em;
}

/* 3 & 8 · Image / text splits. `-alt` puts the image first;
   on one column the image always comes after the words, since
   an unread photograph at the top of a phone screen is just
   a scroll tax. */
.ab2-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
}
.ab2-split .d2 { margin: 0 0 var(--s4); }
/* The closing split leads with the photograph, so the narrower
   column has to move to the left to keep both splits balanced. */
.ab2-split-alt { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }

/* 4 · Quote */
.ab2-quote {
  background: var(--surface-2);
  border-block: 1px solid var(--line);
  padding-block: clamp(38px, 6vw, 84px);
  text-align: center;
}
.ab2-quote p {
  margin: 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.5rem, 3.6vw, 2.5rem); line-height: 1.28;
  color: var(--ink);
}
.ab2-quote em { font-style: italic; color: var(--brand-ink); }
.ab2-quote span {
  display: block; margin-top: var(--s5);
  font-size: var(--f-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}

/* 5 · Cards */
.ab2-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.ab2-cards article {
  padding: clamp(20px, 2.4vw, 30px);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
}
.ab2-cards b {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: 1.75rem; line-height: 1; color: var(--brand-ink);
  margin-bottom: var(--s3);
}
.ab2-cards h3 { margin: 0 0 var(--s2); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.ab2-cards p { margin: 0; font-size: var(--f-body); color: var(--ink-2); }

/* 6 · Timeline — a rule down the left with a marker per entry.
   The rule is drawn on the <ol>, not on each <li>, so it cannot
   end up with gaps between items. */
.ab2-time {
  list-style: none; margin: 0; padding: 0 0 0 clamp(22px, 2.4vw, 30px);
  position: relative;
  display: grid; gap: clamp(22px, 3vw, 34px);
  border-left: 1px solid var(--line-2);
}
.ab2-time li { position: relative; }
.ab2-time li::before {
  content: ""; position: absolute;
  left: calc(-1 * clamp(22px, 2.4vw, 30px) - 4px); top: 7px;
  width: 7px; height: 7px; background: var(--brand);
  outline: 3px solid var(--surface-2);
}
.ab2-time b {
  display: block; font-size: var(--f-xs); font-weight: 800;
  letter-spacing: .16em; color: var(--brand-ink); margin-bottom: 2px;
}
.ab2-time h3 { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 700; }
.ab2-time p { margin: 0; font-size: var(--f-body); color: var(--ink-2); max-width: 62ch; }

/* 7 · Refusals — the one dark panel on the page. */
.ab2-no { background: var(--coal); color: var(--on-dark); padding-block: clamp(40px, 5.5vw, 76px); }
.ab2-no .ab2-eye { color: var(--brand); }
.ab2-no .d2 { color: var(--on-dark); margin: 0; }
.ab2-no ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 30px);
}
.ab2-no li {
  display: flex; gap: var(--s4); align-items: baseline;
  padding-top: var(--s4);
  border-top: 1px solid rgba(255,255,255,.16);
}
.ab2-no li span {
  flex: none; font-family: var(--serif); font-weight: 500;
  font-size: 1.75rem; line-height: 1; color: var(--brand);
}
.ab2-no li p { margin: 0; color: var(--on-dark-2); font-size: var(--f-body); }

/* Responsive ------------------------------------------------- */
@media (max-width: 1080px) {
  .ab2-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab2-cards article:last-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  /* One column everywhere. The hero photograph becomes a wide
     crop above the words so it never eats a whole phone screen. */
  .ab2-hero { grid-template-columns: minmax(0, 1fr); }
  .ab2-hero-img img { min-height: 0; aspect-ratio: 16 / 11; }
  .ab2-hero-txt { padding: clamp(24px, 6vw, 40px) var(--pad) clamp(28px, 7vw, 44px); }
  .ab2-figs ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); }

  .ab2-split { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  /* Words first on a phone, whichever order the markup uses. */
  .ab2-split .ab2-txt { order: 1; }
  .ab2-split .ab2-fig { order: 2; }
  .ab2-fig img { aspect-ratio: 3 / 2; }

  .ab2-cards { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .ab2-cards article:last-child { grid-column: auto; }
  .ab2-no ol { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .ab2-acts { gap: var(--s2); }
  .ab2-acts .btn { flex: 1 1 auto; min-width: 0; padding-inline: 14px; }
  .ab2-figs ul { gap: var(--s4) var(--s3); }
  .ab2-figs span { font-size: 11px; }
  .ab2-quote p br { display: none; }
  .ab2-time { padding-left: 18px; }
  .ab2-time li::before { left: -22px; }
}

/* ═══ 35 · CATEGORIES PAGE ═════════════════════════════
   Group rail on the left, tiles on the right. Two taps to
   anything in the catalogue from the mobile tab bar.
   ═════════════════════════════════════════════════════ */
.catpage { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: clamp(18px, 2.6vw, 44px); align-items: start; }
.catrail { display: flex; flex-direction: column; position: sticky; top: calc(var(--bar-h) + var(--cat-h) + var(--s3)); }
.catrail button {
  text-align: left; padding: 13px var(--s4); min-height: var(--tap);
  font-size: var(--f-sm); font-weight: 600; color: var(--ink-2);
  border-left: 2px solid var(--line);
  transition: color var(--f) var(--ease), border-color var(--f) var(--ease), background var(--f) var(--ease);
}
.catrail button:hover { color: var(--ink); background: var(--surface-2); }
.catrail button.on { color: var(--ink); font-weight: 800; border-left-color: var(--brand); background: var(--surface-2); }

.catgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--gap-y) var(--gap); }
.cattile { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cattile-i { display: block; aspect-ratio: 3/4; overflow: hidden; background: var(--surface-2); }
.cattile-i img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--out); }
.cattile:hover .cattile-i img { transform: scale(1.05); }
.cattile b { font-size: var(--f-sm); font-weight: 700; color: var(--ink); line-height: 1.3; }
.cattile:hover b { color: var(--brand-ink); }
.cattile-n { font-size: var(--f-mi); color: var(--ink-3); }

@media (max-width: 1024px) { .catgrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px) {
  .catpage { grid-template-columns: 116px minmax(0, 1fr); gap: var(--s4); }
  .catrail { position: sticky; top: calc(var(--bar-h) + var(--cat-h)); background: var(--surface-2); }
  .catrail button { padding: 12px var(--s3); font-size: var(--f-xs); }
  .catgrid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4); }
  .cat-band { padding-top: var(--s3); }
}
@media (max-width: 420px) { .catpage { grid-template-columns: 96px minmax(0,1fr); } }

/* ═══ 36 · LISTING CONTROLS, SPLIT BY DEVICE ═══════════
   Desktop keeps one plain Sort control with no panel around
   it; the phone keeps the scrolling chips and loses the card.
   Neither device shows both sets.
   ═════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  /* No chip row on the desktop — the sidebar already does this */
  .qbar, .qsheet { display: none !important; }

  /* Sort on its own, no box */
  .toolbar {
    background: none; box-shadow: none; border-radius: 0;
    padding: 0; margin-bottom: var(--s5);
    border-bottom: 1px solid var(--line); padding-bottom: var(--s3);
  }
  .toolbar .sel { min-height: 40px; }
}

@media (max-width: 900px) {
  /* No card behind the filter/count row on a phone */
  .toolbar {
    background: none; box-shadow: none; border-radius: 0;
    padding: 0; margin-bottom: var(--s2);
  }
  .toolbar-l { padding: 0; }
  .circles-band { display: none; }
}

/* ═══ 37 · RESPONSIVE SWEEP ════════════════════════════
   Fixes for the cases the audit flagged: dropdowns and
   selects with hard min-widths that cannot shrink inside a
   narrow parent, and grids whose fixed first column had no
   small-screen override.
   ═════════════════════════════════════════════════════ */

/* A menu wider than the viewport gets clipped off the right edge */
.aud-menu { min-width: min(236px, calc(100vw - var(--pad) * 2)); max-width: calc(100vw - var(--pad) * 2); }
.aud-mob .aud-menu { min-width: min(210px, calc(100vw - var(--pad) * 2)); }
/* Anchor the mobile menu to the left edge of the bar, not the button,
   so it cannot run off-screen when the button sits near the edge */
@media (max-width: 480px) { .aud-mob .aud-menu { left: 0; right: auto; } }

/* Select had min-width 190px inside a column that can be narrower */
.toolbar .sel { min-width: min(190px, 100%); }

/* Bag line thumbnails: 58px + gap + price was overflowing at 320px */
@media (max-width: 380px) {
  .mini { grid-template-columns: 46px minmax(0,1fr) auto; gap: var(--s2); }
  .mini .th img { width: 46px; height: 46px; }
  .mini-p { font-size: .82rem; }
}

/* Mega panel: five columns never fitted under about 1280px, and it is
   hidden below 1180 anyway — give it room in the band between. */
@media (max-width: 1320px) {
  .mega-in { grid-template-columns: repeat(3, minmax(0,1fr)) minmax(200px,1fr); }
  .mega-in > div:nth-child(4) { display: none; }
}

/* No overflow rule on html or body.
   `overflow-x: hidden` there makes them a scroll container and kills
   `position: sticky`. `overflow-x: clip` is worse: per spec, pairing clip
   on one axis with visible on the other computes the visible axis to clip
   too — so the viewport got clipped vertically and everything below the
   first screen, the footer included, vanished.
   Horizontal overflow is contained at its source instead: the rails,
   category bar and chip rows each scroll themselves, grids use
   minmax(0,...), and long words wrap. */
img, svg, video { max-width: 100%; }
.shell, .shell-mid, .band, .band-sm { min-width: 0; }

/* Long words — product names, email addresses — wrap instead of
   stretching their container past the viewport */
.pc-name, .revcard p, .cattile b, .ab2-cards p, .tline p, .ab2-time p,
.mini .nm, .line .info strong { overflow-wrap: anywhere; }

/* The categories panel beside the group rail */
.catmain { min-width: 0; }

/* ═══ 38 · TAB BAR — WHITE, GLASS ON SCROLL ════════════
   White ground with a hairline, frosting once the page moves
   under it. The active tab reads in ink, not gold; only the
   count badges stay gold, and they are round.
   ═════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .tabs-m {
    background: var(--surface);
    box-shadow: inset 0 1px 0 var(--line), 0 -4px 18px rgba(20,17,13,.06);
    transition: background var(--b) var(--ease), box-shadow var(--b) var(--ease),
                -webkit-backdrop-filter var(--b) var(--ease), backdrop-filter var(--b) var(--ease);
  }
  /* --ink-3 measured 4.15:1 once the bar frosts over page content —
     below AA. --ink-2 holds up on white and on the frosted state. */
  .tabs-m a { color: var(--ink-2); }
  .tabs-m a[aria-current="page"] { color: var(--ink); font-weight: 800; }
  .tabs-m a[aria-current="page"] svg { stroke-width: 2.1; }
  .tabs-m a:active { color: var(--ink-2); }

  /* Frosted once the page scrolls beneath it */
  .tabs-m.glass {
    background: rgba(255,255,255,.62);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: inset 0 1px 0 rgba(20,17,13,.1), 0 -6px 22px rgba(20,17,13,.09);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tabs-m.glass { background: rgba(255,255,255,.95); }
  }

  /* Badges: still gold, now circular, ringed against white */
  .tabs-n {
    border-radius: 50%;
    min-width: 17px; height: 17px; padding: 0 3px;
    background: var(--g-brand); color: var(--on-gold);
    box-shadow: 0 0 0 2px var(--surface);
  }
}

/* ═══ 39 · MOBILE BAR — MENU REPLACES THE BAG ══════════ */
@media (max-width: 900px) {
  /* No menu icon and no bag on the phone bar: categories live on the row
     below and in the tab bar, the cart lives in the tab bar. What is left
     is the department pill and a search icon. */
  .burger { display: none; }
  /* Which controls appear. Where they sit is section 57's business. */
  .bar-r .hint[data-hint="Bag"] { display: none; }
  .bar-r .hint[data-hint="Search"] { display: inline-flex; }
}

/* ═══ 40 · DEAL OF THE DAY — MOBILE HEAD ═══════════════
   The old head crammed a title, a countdown and a button into
   one black bar. On a phone it becomes a title line with a gold
   rule, then the clock and a plain text link beneath it.
   ═════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .deal-top {
    display: block; padding: var(--s4) var(--s4) var(--s3);
    background: var(--coal);
  }
  .deal-top h2 {
    display: flex; align-items: center; gap: var(--s2);
    font-size: 1.06rem; letter-spacing: -.01em; margin: 0;
  }
  .deal-top h2::after {
    content: ""; flex: 1; height: 1px; margin-left: var(--s2);
    background: linear-gradient(90deg, var(--brand), transparent);
  }
  .deal-top .bolt { width: 22px; height: 22px; }
  .deal-top .bolt svg { width: 12px; height: 12px; }

  .deal-top .row {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s3); width: 100%; margin-top: var(--s3); flex-wrap: nowrap;
  }
  .clock { gap: 4px; }
  .clock .lbl2 { display: none; }
  .clock .unit {
    min-width: 0; padding: 0; background: none; backdrop-filter: none;
    display: flex; align-items: baseline; gap: 2px;
  }
  .clock .unit + .unit::before { content: ":"; color: rgba(255,255,255,.4); margin-right: 3px; }
  .clock .unit b { font-size: 1rem; color: var(--brand); }
  .clock .unit span { font-size: 8px; opacity: .6; }

  /* The CTA stops pretending to be a button in a black bar */
  .deal-top .btn {
    background: none; box-shadow: none; padding: 0; min-height: 0;
    color: var(--brand); font-size: var(--f-xs); font-weight: 800;
    letter-spacing: .04em; text-decoration: underline; text-underline-offset: 3px;
    white-space: nowrap; flex: none;
  }
  .deal-top .btn:hover { filter: none; color: var(--brand-lt); }

  /* Banner CTAs smaller again, still one line */
  .banner .acts .btn, .editorial .acts .btn, .hero-copy .acts .btn {
    min-height: 34px; padding: 0 8px; font-size: 11px; letter-spacing: 0;
  }
}

/* ═══ 41 · LISTING — MOBILE HAS NO TOOLBAR AT ALL ══════ */
@media (max-width: 900px) {
  /* The Filters button and the "N pieces" count both come off; the
     chip row above the grid already carries filtering. */
  .toolbar { display: none; }
  .results-band { padding-top: var(--s2); }
  .qbar { margin-top: var(--s2); }
}

/* ═══ 42 · REVIEWS AS AN EXPANDER ══════════════════════ */
.revdisc { box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); }
.revdisc > .disc-btn { padding: var(--s4) var(--s5); }
.revdisc-t { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--f-lead); font-weight: 800; }
.revdisc-m { display: inline-flex; align-items: center; gap: 7px; font-size: var(--f-sm); font-weight: 600; color: var(--ink-2); }
.revdisc-m .stars svg { width: 13px; height: 13px; }
.revdisc-m b { font-weight: 800; color: var(--ink); }
.revdisc-m i { font-style: normal; color: var(--ink-3); }
.revdisc .inner { padding: 0 var(--s5) var(--s5); }
.revhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.revhead-nav { display: flex; gap: var(--s2); }
.revdisc .revsum { margin-bottom: var(--s4); }

@media (max-width: 640px) {
  .revdisc > .disc-btn { padding: var(--s4); }
  .revdisc .inner { padding: 0 var(--s4) var(--s4); }
  .revdisc-t { font-size: var(--f-body); }
  .revhead-nav { display: none; }   /* swipe the rail instead */
}

/* ═══ 43 · SIDE DRAWER ON SMALL SCREENS ════════════════
   The drawer had no rules of its own below 900px: the four
   quick tiles overflowed their labels, nothing cleared the
   home indicator, and it duplicated the search that now sits
   in the top bar.
   ═════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .dnav { width: min(400px, 92vw); height: 100dvh; }
  .dnav-top { min-height: 58px; padding: var(--s2) var(--s3); }
  .dnav-top .logo > svg, .dnav-top .logo > img { width: 34px; height: 34px; }
  .dnav-top .logo .tl { display: none; }

  /* Search already lives in the masthead on phones */
  .msearch { display: none; }

  .dnav-body { padding: var(--s3); }

  .aud-seg button { padding: 10px 4px; font-size: var(--f-xs); }

  /* Clear the home indicator, and leave room above the tab bar */
  .dnav-foot { padding: var(--s3) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 380px) {
  .dnav { width: 94vw; }
  .dgrp > button, .dgrp > a { font-size: var(--f-sm); }
}

/* ═══ 44 · MOBILE HERO ═════════════════════════════════
   Reworked for a phone: a taller portrait crop with the wash
   running bottom-up instead of left-to-right, the copy sitting
   on the floor of the frame, one primary CTA at full width and
   the secondary as a quiet link. Controls move out of the way.
   ═════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  :root { --hero-h: 460px; }

  .hero-cell img { object-position: center 22%; }
  /* Left-weighted wash leaves the copy on a bright crop when the frame
     is portrait — bottom-up keeps the text on the dark half. */
  .hero-cell::after {
    background: linear-gradient(180deg,
      rgba(14,14,17,.34) 0%, rgba(14,14,17,.14) 34%,
      rgba(14,14,17,.78) 68%, rgba(14,14,17,.95) 100%);
  }

  .hero-layer { align-items: end; padding: 0 var(--s4) calc(var(--s10) + 6px); }
  .hero-copy { max-width: none; }
  .hero-badge {
    height: 24px; padding: 0 10px; font-size: 9px; letter-spacing: .14em;
    background: var(--brand); color: var(--on-gold); box-shadow: none; backdrop-filter: none;
  }
  .hero-copy h1, .hero-copy h2 {
    font-size: clamp(1.5rem, 1.1rem + 3.4vw, 2.1rem);
    line-height: 1.14; margin-block: var(--s3) var(--s2);
  }
  .hero-copy p {
    font-size: var(--f-sm); color: rgba(255,255,255,.84);
    max-width: 34ch;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hero-acts { gap: var(--s2); margin-top: var(--s4); flex-wrap: nowrap; align-items: center; }
  .hero-acts .btn { min-height: 44px; font-size: var(--f-sm); padding: 0 18px; }
  .hero-acts .btn:first-child { flex: 1 1 auto; }
  /* Second CTA stops being a glass button and becomes a quiet link */
  .hero-acts .btn:nth-child(2) {
    flex: none; background: none; box-shadow: none; padding: 0 4px;
    color: #fff; text-decoration: underline; text-underline-offset: 4px;
    min-height: 44px;
  }
  .hero-acts .btn:nth-child(2):hover { background: none; color: var(--brand-lt); }

  /* Progress bars centre themselves; the arrows go */
  .hero-ctrl { bottom: 12px; padding-inline: var(--s4); justify-content: center; }
  .hero-nav { display: none; }
  .hero-bars { margin: 0 auto; }
  .hero-bars button { width: 22px; }
}

@media (max-width: 400px) {
  :root { --hero-h: 420px; }
  .hero-copy p { -webkit-line-clamp: 2; }
}

/* ═══ 45 · SIDE PANEL, REBUILT ═════════════════════════
   The panel exists to show the category listing, so that is
   what it leads with: department, then every category as an
   expandable row, then the account shortcuts. Sized in rem
   and dvh so it holds up from 320px upward.
   ═════════════════════════════════════════════════════ */
.dnav-h {
  font-size: var(--f-cap); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand);
}
.dnav-h2 { display: block; color: var(--ink-3); margin: var(--s6) 0 var(--s2); }

.dcats { display: flex; flex-direction: column; }
.dgrp:first-child { border-top: 1px solid var(--line); }
.dchev {
  width: 7px; height: 7px; flex: none; opacity: .45;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.dsub-all { font-weight: 800; color: var(--brand-ink) !important; }
.dsub a { position: relative; }
.dsub a::before {
  content: ""; position: absolute; left: var(--s3); top: 50%;
  width: 10px; height: 1px; background: var(--line-2);
}

.dlinks { display: flex; flex-direction: column; }
.dlinks a {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 48px; padding: var(--s2) 0;
  font-size: var(--f-sm); font-weight: 600; color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  transition: color var(--f) var(--ease);
}
.dlinks a:hover { color: var(--brand-ink); }
.dlinks svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The panel header is black like the masthead it slides out from */
.dnav-top { background: var(--coal); }
.dnav-top .dnav-h { color: var(--brand); }

@media (max-width: 900px) {
  .dnav { width: min(360px, 88vw); }
  .dgrp > a, .dgrp > button { min-height: 50px; padding: var(--s2) 0; font-size: var(--f-body); }
  .dsub a { min-height: 40px; padding: 8px 0 8px var(--s6); font-size: var(--f-sm); }
  .dnav-body { padding: var(--s4) var(--s4) var(--s8); }
}

@media (max-width: 380px) {
  .dnav { width: 90vw; }
  .dgrp > a, .dgrp > button { min-height: 46px; font-size: var(--f-sm); }
  .aud-seg button { padding: 9px 2px; font-size: 11px; }
}

/* ═══ 46 · BAG QUANTITY STEPPER ════════════════════════
   Reduced from 42x44 and made to shrink with the row.
   ═════════════════════════════════════════════════════ */
.line .stepper, .mini .stepper { align-self: flex-start; }
@media (max-width: 560px) {
  .stepper button { width: 30px; height: 30px; font-size: 14px; }
  .stepper span { min-width: 26px; font-size: var(--f-xs); }
}
@media (max-width: 380px) {
  .stepper button { width: 27px; height: 28px; }
  .stepper span { min-width: 22px; }
}

/* ═══ 47 · MOBILE NAV, PINNED AND FROSTED ══════════════
   The masthead sticks and the category row below it frosts
   once the page scrolls under it — same behaviour the desktop
   has always had, now that sticky works again on mobile.
   ═════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hdr { position: sticky; top: 0; z-index: 80; }
  .hdr.pinned .bar { box-shadow: 0 1px 0 rgba(255,255,255,.08); }
  .hdr.pinned .catbar {
    background: rgba(255,255,255,.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: inset 0 -1px 0 rgba(20,17,13,.12), 0 4px 16px rgba(20,17,13,.08);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hdr.pinned .catbar { background: rgba(255,255,255,.96); }
  }
}

/* ═══ 48 · REVIEW CARDS, REDESIGNED ════════════════════
   Flat and editorial instead of a bordered box: a gold rule
   at the head, the quote set in the serif, and the reviewer
   on a single line at the foot. The photo, when there is one,
   sits full-bleed at the top of the card.
   ═════════════════════════════════════════════════════ */
.revcard {
  display: flex; flex-direction: column; gap: 0;
  padding: 0; background: none; box-shadow: none;
  border-top: 2px solid var(--brand);
}
.revcard-shot {
  order: -1; margin: 0 0 var(--s4); aspect-ratio: 4/3;
  position: relative; display: block; overflow: hidden;
  background: var(--surface-2); cursor: zoom-in;
}
.revcard-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--out); }
.revcard-shot:hover img { transform: scale(1.05); }
.revcard-shot-n {
  position: absolute; left: 8px; bottom: 8px; padding: 4px 8px;
  background: rgba(20,17,13,.82); color: var(--brand);
  font-size: var(--f-mi); font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}

/* Stars and the verified mark share the first line */
.revcard-meta { order: 1; display: flex; align-items: center; gap: var(--s3); padding-top: var(--s4); }
.revcard-meta .stars svg { width: 13px; height: 13px; }
.revcard-ok {
  margin-left: auto; padding: 0; background: none;
  font-size: var(--f-mi); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 5px;
}
.revcard-ok::before {
  content: ""; width: 13px; height: 13px; flex: none; border-radius: 50%;
  background: var(--g-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/9px no-repeat, linear-gradient(#000,#000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/9px no-repeat, linear-gradient(#000,#000);
}

/* The quote carries the card */
.revcard p {
  order: 2; flex: 1; margin: var(--s3) 0 0;
  font-family: var(--serif); font-size: 1.06rem; font-weight: 500;
  line-height: 1.5; color: var(--ink);
}
.revcard p::before { content: "“"; color: var(--brand-ink); margin-right: 1px; }
.revcard p::after  { content: "”"; color: var(--brand-ink); margin-left: 1px; }

/* Reviewer sits at the foot, one line, no avatar block */
.revcard-top { order: 3; display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.revcard-face { width: 30px; height: 30px; }
.revcard-top b { font-size: var(--f-sm); font-weight: 800; }
.revcard-top span { font-size: var(--f-mi); color: var(--ink-3); }

@media (max-width: 560px) {
  .revcard p { font-size: 1rem; }
}

/* ═══ 49 · ACCOUNT PAGE ON MOBILE ══════════════════════
   The section tabs scroll but had no edge affordance and lost
   their gold pill on a white ground; the order rows stacked
   but their inner rows still overflowed at 380px.
   ═════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .acct { gap: var(--s4); }
  .acct-nav {
    gap: 2px; padding: 4px; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
    border-radius: 0; box-shadow: inset 0 -1px 0 var(--line);
    background: var(--surface); scroll-snap-type: x proximity;
  }
  .acct-nav a { flex: none; min-height: 42px; padding: 9px var(--s3); scroll-snap-align: start; border-radius: 0; }
  .acct-nav a.on { background: none; color: var(--ink); font-weight: 800; box-shadow: inset 0 -2px 0 var(--brand); }
  .acct-nav svg { width: 16px; height: 16px; }
}

@media (max-width: 640px) {
  /* Order rows: thumbnails, then the meta, then status and price */
  .ord { padding: var(--s3); gap: var(--s3); }
  .ord .row { width: 100%; gap: var(--s3) !important; }
  .ord .minis img { width: 38px; height: 38px; margin-left: -10px; }
  .ord .tag { flex: none; }
  .ord b { font-size: var(--f-sm); }
  .ord .btn { margin-left: auto; }

  /* Profile and address forms go single column before they squeeze */
  #profile .cols.c2, #addresses .cols.c2 { grid-template-columns: minmax(0,1fr); }
  .acct .tabs { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .acct .tabs::-webkit-scrollbar { display: none; }
  .acct .tab { flex: none; }

  /* Wishlist grid: two up, and the sample note wraps rather than pushing */
  #saved .grid-p { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4); }
  #savedNote { max-width: none; }
}

@media (max-width: 380px) {
  .ord .minis img { width: 32px; height: 32px; margin-left: -9px; }
  .ord .btn { padding-inline: 12px; }
}

/* ═══ 51 · SIGN-IN PAGE ════════════════════════════════ */
.lg-band { padding-block: clamp(20px, 3vw, 56px); }
.lg { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }

.lg-side { background: var(--coal); color: #fff; padding: clamp(24px, 3vw, 48px); display: flex; flex-direction: column; }
.lg-side .cap { color: var(--brand); }
.lg-side h1 { color: #fff; margin: var(--s3) 0 var(--s4); }
.lg-side h1::before { display: none; }
.lg-side > p { font-size: var(--f-sm); color: rgba(255,255,255,.76); line-height: 1.62; }
.lg-perks { list-style: none; margin: var(--s6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.lg-perks li { display: flex; align-items: flex-start; gap: var(--s3); font-size: var(--f-sm); color: rgba(255,255,255,.88); }
.lg-perks span { width: 14px; height: 2px; flex: none; margin-top: .62em; background: var(--g-brand); }
.lg-shot { margin: var(--s8) 0 0; aspect-ratio: 16/9; overflow: hidden; }
.lg-shot img { width: 100%; height: 100%; object-fit: cover; opacity: .78; }

.lg-main { padding: clamp(24px, 3vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.lg-tabs { display: flex; gap: var(--s5); margin-bottom: var(--s6); box-shadow: inset 0 -1px 0 var(--line); }
.lg-tab { padding: 0 0 var(--s3); font-size: var(--f-sm); font-weight: 700; color: var(--ink-3); transition: color var(--f) var(--ease); }
.lg-tab:hover { color: var(--ink-2); }
.lg-tab.on { color: var(--ink); font-weight: 800; box-shadow: inset 0 -2px 0 var(--brand); }

.lg-form { display: flex; flex-direction: column; }
.lg-form .lbl { margin-bottom: var(--s2); }
.lg-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.lg-new { font-size: var(--f-sm); color: var(--ink-2); text-align: center; }

@media (max-width: 860px) {
  .lg { grid-template-columns: minmax(0,1fr); }
  .lg-side { padding: var(--s6) var(--s5); }
  .lg-perks { gap: var(--s2); margin-top: var(--s4); }
  .lg-shot { display: none; }
  .lg-main { padding: var(--s6) var(--s5); }
}
@media (max-width: 420px) {
  .lg-tabs { gap: var(--s4); }
  .lg-tab { font-size: var(--f-xs); }
}

/* ═══ 52 · GRADIENT TEXT — SOLID FALLBACK ══════════════
   Every gold "gradient text" element sets `color: transparent`
   and paints the glyphs by clipping a background to them. If
   that clip does not apply — unsupported, a font still loading,
   a paint quirk — the text is simply invisible, which is what
   turned the footer into a tall band of blank space.
   So: a solid gold colour is the default, and transparency is
   only re-applied where the browser can actually do the clip.
   ═════════════════════════════════════════════════════ */
.logo .nm, .dnav-top .logo .nm, .hero-copy h1 em, .hero-copy h2 em,
.ab2-quote em, .footmark-word span {
  color: var(--brand);
  -webkit-text-fill-color: var(--brand);
}
/* These sit on light grounds, where bright gold is only 2.1:1 */
.gold, .idx, .ab2-cards b, .ab2-time b, .revsum-n {
  color: var(--brand-ink);
  -webkit-text-fill-color: var(--brand-ink);
}
.revsum-n, .ab2-no li span { color: var(--brand); -webkit-text-fill-color: var(--brand); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .logo .nm, .dnav-top .logo .nm, .hero-copy h1 em, .hero-copy h2 em,
  .footmark-word span, .gold, .idx {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* The closing wordmark was tall enough to read as an empty band on its
   own. Tighter padding, so it no longer dominates the footer. */
.footmark { padding-block: clamp(22px, 3.2vw, 44px) clamp(18px, 2.2vw, 30px); }

@media (max-width: 900px) {
  .footmark-word { font-size: clamp(3.6rem, 1.1rem + 15vw, 7rem); }
  .footmark { padding-block: clamp(26px, 6vw, 40px) clamp(20px, 4vw, 28px); }
  .footmark-loom { max-width: min(560px, 84%); }
}

/* ═══ 53 · REVIEWER MONOGRAM ═══════════════════════════
   There are no photographs of customers, and a stock face
   would be a lie. A gold monogram carries the same weight.
   ═════════════════════════════════════════════════════ */
.revcard-face, .rev .who-i {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--coal); color: var(--brand);
  font-family: var(--serif); font-size: 1rem; font-weight: 600; line-height: 1;
}
.rev .who-i { width: 38px; height: 38px; font-size: 1.06rem; }

/* Product photography is 3:4. The card frame is set in section 10. */
.cattile-i { aspect-ratio: 3 / 4; }

/* ═══ 54 · SEARCH PAGE ═════════════════════════════════
   Its own chrome: a back arrow, the field, then department
   tabs. The site masthead is suppressed here — two search
   affordances on one screen would only compete.
   ═════════════════════════════════════════════════════ */
.srch-page #hdr-slot { display: none; }

.srchbar {
  position: sticky; top: 0; z-index: 60;
  background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--line);
}
.srchbar-in { display: flex; align-items: center; gap: var(--s3); min-height: 64px; }

.srch-back {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background var(--f) var(--ease);
}
.srch-back:hover { background: var(--surface-2); }
.srch-back svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.srch { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.srch input {
  width: 100%; min-height: 46px; padding: 0 42px 0 44px;
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--line-2); border-radius: var(--r-pill);
  font-size: var(--f-body);
}
.srch input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(212,175,55,.18); }
.srch input::placeholder { color: var(--ink-3); }
.srch-i { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--ink-2); stroke: currentColor; fill: none; stroke-width: 2; pointer-events: none; }
.srch:focus-within .srch-i { color: var(--brand-ink); }
.srch-x { position: absolute; right: 8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--ink-2); }
.srch-x:hover { background: var(--surface-2); color: var(--ink); }
.srch-x svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }

/* Department tabs */
.srch-tabs {
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
  max-width: var(--max); margin-inline: auto; padding-inline: var(--pad);
}
.srch-tabs::-webkit-scrollbar { display: none; }
.srch-tabs button {
  flex: 1 0 auto; min-width: 84px; min-height: 46px; padding: 0 var(--s4);
  font-size: var(--f-body); font-weight: 600; color: var(--ink-2); white-space: nowrap;
  transition: color var(--f) var(--ease), box-shadow var(--f) var(--ease);
}
.srch-tabs button:hover { color: var(--ink); }
.srch-tabs button.on { color: var(--ink); font-weight: 800; box-shadow: inset 0 -2px 0 var(--coal); }

/* Trending / recent */
.srch-band { padding-top: var(--s5); }
.srch-h {
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--f-cap); font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink); margin-bottom: var(--s3);
}
.srch-clr { margin-left: auto; font-size: var(--f-mi); letter-spacing: .04em; }

.srch-terms { display: flex; flex-wrap: wrap; gap: var(--s2); }
.srch-chip {
  min-height: 40px; padding: 0 16px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: var(--f-sm); font-weight: 600;
  transition: background var(--f) var(--ease), color var(--f) var(--ease), box-shadow var(--f) var(--ease);
}
.srch-chip:hover { background: var(--coal); color: var(--brand); box-shadow: none; }

.srch-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s2); }
.srch-cats a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 48px; padding: 0 var(--s4);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--f-sm); font-weight: 700; color: var(--ink);
  transition: box-shadow var(--f) var(--ease);
}
.srch-cats a:hover { box-shadow: inset 0 0 0 1.5px var(--brand); }
.srch-cats span { font-size: var(--f-mi); font-weight: 600; color: var(--ink-3); }

@media (max-width: 900px) {
  .srchbar-in { min-height: 58px; gap: var(--s2); }
  .srch-tabs button { flex: 1 1 0; min-width: 0; padding: 0 var(--s2); font-size: var(--f-sm); }
}
@media (max-width: 560px) {
  .srch input { min-height: 42px; padding-left: 40px; font-size: var(--f-sm); }
  .srch-i { left: 14px; width: 16px; height: 16px; }
  .srch-cats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .srch-terms { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .srch-terms::-webkit-scrollbar { display: none; }
  .srch-chip { flex: none; }
}

/* ═══ 55 · MOBILE SEARCH ICON, CSS-OWNED ═══════════════
   It used to ship with .none (display:none !important) and
   depend on a JS toggle to appear. Visibility belongs to the
   media query, so the icon cannot get stuck hidden.
   ═════════════════════════════════════════════════════ */
#ndSearchMob { display: none; }
#ndSearchMob .srchmob-t { display: none; }

/* ═══ 56 · MOBILE ACCOUNT MENU ═════════════════════════
   A list, not a sidebar: identity card, rewards banner, one
   row per section. Above 1024px it disappears entirely and
   the sidebar takes over.
   ═════════════════════════════════════════════════════ */
.acctm, .acctm-back { display: none; }

@media (max-width: 1024px) {
  .acctm { display: block; padding-block: var(--s4) var(--s8); background: var(--surface); }
  .acctm[hidden] { display: none; }

  /* Identity */
  .acctm-you {
    display: flex; align-items: center; gap: var(--s4);
    padding: var(--s4); background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .acctm-av {
    position: relative; flex: none;
    width: 60px; height: 60px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--coal); color: var(--brand);
    font-family: var(--serif); font-size: 1.3rem; font-weight: 600; letter-spacing: .04em;
  }
  .acctm-av i {
    position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
    padding: 2px 7px; background: var(--g-brand); color: var(--on-gold);
    font-style: normal; font-size: 9px; font-weight: 800; white-space: nowrap;
  }
  .acctm-you > div { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
  .acctm-you b { font-size: var(--f-lead); font-weight: 800; }
  .acctm-you span { font-size: var(--f-sm); color: var(--ink-3); overflow-wrap: anywhere; }
  .acctm-done { color: var(--ink-on-tint) !important; font-weight: 700; font-size: var(--f-mi) !important; }
  .acctm-go {
    flex: none; width: 38px; height: 38px; display: grid; place-items: center;
    color: var(--ink-2); border-radius: 50%;
  }
  .acctm-go:hover { background: var(--surface-2); color: var(--ink); }
  .acctm-go svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  /* Rewards banner */
  .acctm-promo {
    display: flex; align-items: center; gap: var(--s4);
    margin-top: var(--s3); padding: var(--s4);
    background: var(--t-gold); color: var(--ink);
  }
  .acctm-promo b { display: block; font-size: var(--f-sm); font-weight: 800; }
  .acctm-promo p { margin: 4px 0 6px; font-size: var(--f-mi); color: var(--ink-2); line-height: 1.5; }
  .acctm-promo .ul { font-size: var(--f-mi); font-weight: 800; color: var(--ink-on-tint); }
  .acctm-promo-i { flex: none; font-size: 30px; line-height: 1; color: var(--brand); }

  /* Section rows */
  .acctm-list { display: flex; flex-direction: column; margin-top: var(--s5); }
  .acctm-list > button, .acctm-list > a {
    display: flex; align-items: center; gap: var(--s4); width: 100%;
    min-height: 56px; padding: var(--s3) 0; text-align: left;
    font-size: var(--f-body); font-weight: 600; color: var(--ink);
    border-bottom: 1px solid var(--line);
    transition: color var(--f) var(--ease);
  }
  .acctm-list > button:first-child, .acctm-list > a:first-child { border-top: 1px solid var(--line); }
  .acctm-list > button:hover, .acctm-list > a:hover { color: var(--brand-ink); }
  .acctm-list > * > span { flex: 1; min-width: 0; }
  .acctm-ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .acctm-arw { width: 17px; height: 17px; flex: none; stroke: var(--ink-3); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .acctm-n {
    flex: none; min-width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center; padding: 0 5px;
    background: var(--g-brand); color: var(--on-gold);
    font-style: normal; font-size: var(--f-mi); font-weight: 800;
  }
  .acctm-n[hidden] { display: none; }

  /* Back bar, only while a panel is open */
  .acctm-back { display: block; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); }
  .acctm-back[hidden] { display: none; }
  .acctm-back button {
    display: flex; align-items: center; gap: var(--s2);
    min-height: 52px; font-size: var(--f-body); font-weight: 800; color: var(--ink);
  }
  .acctm-back svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

  /* The masthead and the section tabs are redundant next to the list */
  .acctm ~ .band-sm .acct-nav { display: none; }
  .acct[hidden] { display: none; }
  #main > .masthead { display: none; }
}

/* ═══ 57 · MOBILE MASTHEAD ═════════════════════════════
   THE ONE PLACE the phone bar is laid out. Sections 16, 30
   and 39 each used to declare `.bar-in` at this same
   breakpoint; only source order decided the winner, so
   editing any of them moved the bar for reasons that section
   did not explain. They now set visibility only.

   Two slots: department pill left, search and Login right.
   No mark — the tab bar and the footer carry the brand, and
   dropping it gives the row back to the controls.

   `minmax(0, 1fr)` on the outer columns, never plain `1fr` —
   `1fr` is `minmax(auto, 1fr)`, whose auto minimum refuses to
   shrink below the content, so a long department label pushed
   the bar wider than the screen instead of the label
   truncating. That is the whole overflow bug.

   `.bar-l` is dissolved with `display: contents` so the pill
   and the mark become grid items in their own right; while
   they shared a flex wrapper they could only sit together.
   ═════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .bar-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: var(--s2);
    min-height: 58px;
  }
  .bar-l { display: contents; }
  .bar-l > .aud-mob { grid-column: 1; justify-self: start; min-width: 0; }
  /* If anything has to give, it is the department label — not the bar */
  .aud-mob .aud-btn { max-width: 100%; }
  .aud-mob .aud-v { overflow: hidden; text-overflow: ellipsis; }

  .bar .logo { display: none; }      /* no mark on the phone bar */

  .bar-r { grid-column: 2; justify-self: end; gap: 2px; min-width: 0; }
  .bar-r .ic { width: 38px; height: 38px; }

  /* Wishlist and bag already have a home in the bottom tab bar, so the
     slot they were taking goes to Login — which on a phone previously
     existed ONLY inside the drawer, and the drawer has no opener here.
     That is why tapping around never produced the sign-in popup. */
  .bar-r .hint[data-hint="Wishlist"], .bar-r .hint[data-hint="Bag"] { display: none; }

  /* A real button with a word on it, not a lock glyph you have to guess at */
  .bar-r .login {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 0 14px; margin-left: 4px;
    background: var(--brand); color: var(--coal);
    font-size: var(--f-sm); font-weight: 800; letter-spacing: .02em;
    white-space: nowrap; flex: none;
  }
  .bar-r .login:active { background: var(--brand-lt); }
  .bar-r .login svg { width: 16px; height: 16px; stroke: currentColor; }
  .bar-r .login span { display: inline; }

  /* Search is an icon that opens the search page. The inline
     field stays hidden — there is no room for it on this row. */
  .bar-in .search { display: none; }
  #ndSearchMob { display: inline-flex; align-items: center; justify-content: center; }
  #ndSearchMob .srchmob-t { display: none; }
  #ndSearchMob > svg {
    width: 19px; height: 19px; flex: none;
    stroke: currentColor; fill: none; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  /* A hover tooltip is meaningless on a touchscreen */
  #ndSearchMob::after { display: none; }
}

@media (max-width: 380px) {
  .bar-r .ic { width: 32px; }
  .bar-r .login { padding: 0 10px; }
  .bar-r .login svg { display: none; }   /* the word alone is clearer than both */
  .bar-in { gap: 4px; }
}

/* ═══ 58 · CATEGORY MENUS AT EVERY WIDTH ═══════════════
   The panel used to be hidden below 1180px and to depend on
   hover above it, so on a touchscreen or in a narrow window
   there was no dropdown at all. The chevron is a button now
   and the panel simply restacks on smaller screens.
   ═════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .mega { display: block; }                    /* was: none */
  .mega-in {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: var(--s5) var(--s6);
    padding-block: var(--s5);
  }
  .mega-in > div:nth-child(4) { display: block; }
  .mega-card { display: none; }                /* the feature tile needs room */
  .mega { max-height: calc(100svh - var(--bar-h) - var(--cat-h)); }
}

@media (max-width: 640px) {
  .mega-in { grid-template-columns: minmax(0,1fr); gap: var(--s4); }
  .mega h5 { margin-bottom: var(--s2); }
  .mega ul a { padding: 8px 0; font-size: var(--f-body); }
}

/* ═══ 59 · NO ZOOM ON TAP ══════════════════════════════
   Two separate causes, both fixed here.

   1 · Double-tap-to-zoom. A browser waiting to see whether a
       second tap is coming also delays every first tap by
       ~300ms, and an accidental second tap zooms the page.
       `touch-action: manipulation` keeps panning and pinch
       zoom — which is an accessibility requirement, so it
       stays — and drops only the double-tap gesture.

   2 · iOS zooms the viewport whenever a focused field has
       text smaller than 16px. Several fields were 13–15px,
       so tapping into one visibly jumped the page. 16px is
       the threshold, not a preference.
   ═════════════════════════════════════════════════════ */
a, button, .btn, .ic, summary, [role="button"], [role="option"], [role="tab"],
label, .chip, .swatch, .sz, .tabs-m a, .aud-btn, .chev, .disc-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(212,175,55,.14);
}

@media (max-width: 900px) {
  /* 16px exactly — anything less and iOS zooms on focus */
  .in, .sel, .ta, input[type="text"], input[type="tel"], input[type="email"],
  input[type="search"], input[type="number"], input[type="password"],
  select, textarea, .bar-in .search input, #ndQ, #ndQm, #authPhone {
    font-size: 16px;
  }
}

/* ═══ 60 · MOBILE BUY BAR ══════════════════════════════
   On a phone the buy controls sat a long way down a tall
   page, so you had to scroll back up to add anything. They
   now ride at the foot of the screen, stacked directly on
   top of the tab bar rather than over it.
   ═════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* has-tabs already reserves the tab bar's height; the buy bar
     stacks on top of it, so this adds only the extra 66px. */
  body.has-buybar { padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)); }

  .pdp-acts {
    position: fixed; left: 0; right: 0; z-index: 87;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-wrap: nowrap; gap: var(--s2);
    padding: 10px var(--pad);
    background: rgba(255,255,255,.94);
    box-shadow: inset 0 1px 0 var(--line), 0 -6px 20px rgba(20,17,13,.1);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .pdp-acts {
      background: rgba(255,255,255,.82);
      -webkit-backdrop-filter: blur(18px) saturate(1.5);
      backdrop-filter: blur(18px) saturate(1.5);
    }
  }
  /* Add to Bag takes the room; Buy Now and the heart stay compact
     so all three fit on one line at 360px. */
  .pdp-acts .btn { flex: 1 1 0; min-width: 0; min-height: 46px; padding-inline: 12px; font-size: var(--f-sm); }
  .pdp-acts .ic {
    flex: none; width: 46px; height: 46px;
    border-radius: var(--r-md); box-shadow: inset 0 0 0 1.5px var(--line-2);
    background: var(--surface);
  }
  .pdp-acts .ic::after { display: none; }   /* no tooltip on touch */
}

/* ═══ 61 · ASSURANCES ON A PHONE ═══════════════════════
   Two columns turned each assurance into three wrapped
   lines. One per row, at half the height, reads as a list
   instead of a grid of boxes.
   ═════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .assure {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    background: var(--tint, var(--t-gold));
    padding: 2px var(--s3);
  }
  .assure-item {
    gap: var(--s3); padding: 9px 0; background: none; border-radius: 0;
    box-shadow: 0 1px 0 rgba(20,17,13,.07);
  }
  .assure-item:last-child { box-shadow: none; }
  .assure-item svg { width: 16px; height: 16px; }
  /* Label and note on one line rather than stacked */
  .assure-item > div {
    display: flex; align-items: baseline; gap: 6px;
    min-width: 0; flex: 1;
  }
  .assure-item b { font-size: var(--f-xs); white-space: nowrap; }
  .assure-item span {
    font-size: var(--f-mi); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .assure-item span::before { content: "· "; }
}

/* ═══ 62 · LISTING PAGE RHYTHM ═════════════════════════
   The circular category row, the quick filter chips and
   the product grid were stacked with no separation, so
   the round tiles read as if they belonged to the first
   row of products. Each block now gets its own space and
   the category row is closed with a rule.
   ═════════════════════════════════════════════════════ */
.circles-band {
  margin-bottom: var(--s8);
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--line);
}
/* Hover lifts a tile by 5px and casts a shadow — without room to
   move into, both were being clipped by the row below. */
.circles-band #circles { padding-block: var(--s2) var(--s3); }
.circles-band .tile-cat { gap: var(--s3); padding-bottom: 2px; }

/* Chips, then active filters, then the grid — each separated */
.listing .qbar, #qbar { margin-bottom: var(--s5); }
.pills:not(:empty) { margin-bottom: var(--s6); }
.pills:empty { margin-bottom: var(--s2); }
#grid.grid-p { margin-top: var(--s4); }

/* And the grid should not butt up against the pager either */
.grid-p + .pager, #empty + .pager { margin-top: var(--s10); }

@media (max-width: 900px) {
  /* The circle row is hidden on phones, so only the chip and grid
     spacing applies — tightened so it does not waste a small screen. */
  .listing .qbar, #qbar { margin-bottom: var(--s4); }
  #grid.grid-p { margin-top: var(--s3); }
  .grid-p + .pager, #empty + .pager { margin-top: var(--s8); }
}

/* ═══ 63 · FOOTER CONTACT LIST ═════════════════════════
   Replaces the row of platform icons. Where to find us
   reads better in a footer than where else to follow us,
   and it keeps Nihara as the only name on the page.
   ═════════════════════════════════════════════════════ */
.foot-reach { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s3); }
.foot-reach li { display: flex; gap: var(--s3); align-items: flex-start; }
.foot-reach svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--brand); }
.foot-reach span { font-size: var(--f-sm); line-height: 1.45; color: var(--on-dark-2); min-width: 0; }
.foot-reach b { display: block; font-size: var(--f-xs); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-dark); margin-bottom: 1px; }

@media (max-width: 640px) {
  .foot-reach { gap: var(--s2); margin-top: var(--s4); }
}

/* ═══ 64 · LIGHTBOX ════════════════════════════════════
   Full-screen image preview with a sliding carousel.
   Square corners on the frame, per the house rule; the
   controls stay round because they are controls.

   z-index 200 sits above the drawer (98), the veil (90)
   and the tab bar (88). The element is appended to <body>
   so that number actually means something — inside the
   sticky header it would be trapped under z-index 80.
   ═════════════════════════════════════════════════════ */
.lb {
  position: fixed; inset: 0; z-index: 200;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  background: rgba(9, 8, 6, .94);
  opacity: 0; transition: opacity .22s var(--ease);
  overscroll-behavior: contain;
  touch-action: pan-y;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lb { background: rgba(9, 8, 6, .82); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
}
.lb.open { opacity: 1; }
.lb[hidden] { display: none; }

/* Top bar */
.lb-bar {
  grid-row: 1; display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s4);
  padding-top: calc(var(--s3) + env(safe-area-inset-top, 0px));
}
.lb-title {
  flex: 1; min-width: 0; color: #fff;
  font-size: var(--f-sm); font-weight: 700; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-count {
  flex: none; color: var(--brand);
  font-size: var(--f-xs); font-weight: 800; letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.lb-x {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.1);
  transition: background var(--f) var(--ease);
}
.lb-x svg { width: 18px; height: 18px; }
.lb-x:hover, .lb-x:focus-visible { background: rgba(255,255,255,.2); }

/* Stage and track */
.lb-stage {
  grid-row: 2; grid-column: 1;
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  cursor: grab;
}
.lb-stage:active { cursor: grabbing; }
.lb-track {
  display: flex; width: 100%; height: 100%;
  will-change: transform;
}
.lb-slide {
  flex: 0 0 100%; margin: 0; min-width: 0;
  display: grid; place-items: center;
  padding: var(--s2) var(--s4);
}
.lb-slide img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  user-select: none; -webkit-user-drag: none;
}

/* Arrows — pointer devices only; touch swipes instead */
.lb-nav {
  position: absolute; top: 50%; z-index: 2;
  transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: none; place-items: center;
  color: #fff; background: rgba(255,255,255,.12);
  transition: background var(--f) var(--ease), opacity var(--f) var(--ease);
}
.lb-nav svg { width: 20px; height: 20px; }
.lb-nav:hover { background: rgba(255,255,255,.24); }
.lb-nav:disabled { opacity: .25; cursor: default; }
.lb-prev { left: clamp(8px, 2vw, 26px); }
.lb-next { right: clamp(8px, 2vw, 26px); }
@media (hover: hover) and (pointer: fine) {
  .lb-nav { display: grid; }
}

/* Dots — touch. Thumbnails — pointer. Never both. */
.lb-dots, .lb-thumbs {
  grid-row: 3; justify-content: center; align-items: center;
  padding: var(--s3) var(--s4);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
}
.lb-dots { display: flex; gap: 7px; }
.lb-dots button {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.32);
  transition: background var(--f) var(--ease), width var(--b) var(--ease);
}
.lb-dots button[aria-selected="true"] { background: var(--brand); width: 22px; border-radius: var(--r-pill); }

.lb-thumbs {
  display: none; gap: var(--s2);
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.lb-thumbs::-webkit-scrollbar { display: none; }
.lb-thumbs button {
  flex: none; width: 62px; height: 78px; padding: 0;
  overflow: hidden; scroll-snap-align: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
  opacity: .5; transition: opacity var(--f) var(--ease), box-shadow var(--f) var(--ease);
}
.lb-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-thumbs button[aria-selected="true"] { opacity: 1; box-shadow: inset 0 0 0 2px var(--brand); }
.lb-thumbs button:hover { opacity: .85; }

@media (hover: hover) and (pointer: fine) {
  .lb-dots   { display: none; }
  .lb-thumbs { display: flex; }
}

/* The preview is the point — give it the screen on a phone */
@media (max-width: 640px) {
  .lb-slide { padding: 0 var(--s2); }
  .lb-bar { padding-inline: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
  .lb { transition: none; }
  .lb-track { transition: none !important; }
  .lb-dots button { transition: none; }
}

/* The product page stage now opens the preview rather than
   scale-zooming in place, so it advertises that instead. */
.gal-stage { cursor: zoom-in; }

/* ═══ 65 · PRODUCT CARD — RESPONSIVE ═══════════════════
   The card's responsive behaviour, in one place. Sections
   16 and 22 each carried fragments of it, several aimed at
   an earlier card that no longer exists.

   A card is roughly 259px wide at 1440, 196px at 430 and
   141px at 320 — so everything inside it is sized against
   the narrowest case, not the widest.
   ═════════════════════════════════════════════════════ */

/* The photograph is flush to the card edge, so the text is too.
   Any inset here reads as the words being misaligned with the
   image directly above them. */
.pc-info { padding-inline: 0; }

/* Nothing in the card may set its own width in a way that stops
   the grid column shrinking */
.pc, .pc-info, .pc-top, .pc-foot, .pc-cost, .pc-name, .pc-label { min-width: 0; }

@media (max-width: 1024px) {
  /* Quick View is hover-only, and there is no hover here */
  .pc { --pc-inset: 8px; }
}

@media (max-width: 900px) {
  /* Two columns. Chips shrink so they do not cover the saree. */
  .pc-score, .pc-house, .pc-flag { padding: 4px 7px; }
  .pc-colours { padding: 3px 7px 3px 4px; }
  .pc-colours i { width: 11px; height: 11px; }
  /* Spacing is not touched here. It is one rhythm at every width —
     that is the point of the tokens on .pc. */
}

@media (max-width: 560px) {
  /* Below here the card is under 200px. The rating chip carries a
     count in brackets that no longer earns its width. */
  .pc-score span { display: none; }
  .pc-house { letter-spacing: .06em; }
  .pc-label { font-size: var(--f-xs); }
  .pc-name { font-size: var(--f-xs); }   /* min-height is in em and follows */
  .pc-note { font-size: var(--f-xs); }
  .pc-tag { padding: 3px 6px; }
}

@media (max-width: 380px) {
  /* At 320px a card is 141px wide. The struck-through price and the
     discount both compete with the price itself for one line, so the
     original price goes and the percentage stays — it is the part
     that carries the meaning. */
  .pc-cost s { display: none; }
  .pc { --pc-inset: 6px; }
  .pc-score, .pc-house { padding: 3px 6px; font-size: 10px; }
}

/* Rails: cards are laid out in one row, so they stretch to the
   tallest. Reserve the name's two lines everywhere and the row
   stays even whether or not a card carries a low-stock line. */
.rail .pc, .grid-p .pc { height: 100%; }