/* ===========================================================================
   ARORA SHOP — site.css
   ---------------------------------------------------------------------------
   Direction: "ink and gold leaf".
   The palette comes out of the subject's own materials — the blue-black of a
   night sarovar and of dumalla cloth, parkarma marble, gold leaf, sarbloh
   steel. Kesri appears once or twice per screen at most, the way a nishan
   sahib is the single saffron thing against the sky.

   The page deliberately inverts tone at its midpoint: the cinematic is ink,
   the shop is marble. Walking out of the darbar into daylight is the actual
   experience, and the product photography needs a light surface to sit on.
   A single gold hairline — the seam — runs the whole height of the document
   and survives the inversion. It is the pul: the thread from gate to sanctum.

   Type: Fraunces for display, kept light and wide-tracked so it reads as
   inscription rather than editorial serif. Anek Gurmukhi was designed for
   Gurmukhi and has a matching Latin, so the bilingual signboard headings —
   Gurmukhi line above, English below, as on the shop's own board — stay in
   one voice. Instrument Sans carries everything else.
   =========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  color-scheme: dark;

  /* ink — night water, dumalla cloth */
  --ink:      #0a0f1a;
  --ink-1:    #0e1524;
  --ink-2:    #141d30;
  --ink-3:    #1c2740;
  --ink-4:    #27354f;

  /* marble — the parkarma */
  --marble:   #f3f0e8;
  --marble-1: #ebe7db;
  --marble-2: #ded8c6;
  --marble-3: #c9c1a9;

  /* gold leaf */
  --gold:     #d9ae45;
  --gold-hi:  #f2d98a;
  --gold-dim: #8c7332;
  --gold-ghost: rgba(217, 174, 69, .18);

  /* sarbloh */
  --steel:    #6c7583;
  --steel-1:  #414a57;

  /* the one hot accent */
  --kesri:    #e4651b;

  /* states */
  --ok:   #2f7d5b;
  --warn: #a8791a;
  --bad:  #b4392b;

  /* type */
  --display: 'Fraunces', 'Hoefler Text', 'Palatino Linotype', Palatino, Georgia, serif;
  --body:    'Instrument Sans', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --gurmukhi:'Anek Gurmukhi', 'Noto Sans Gurmukhi', Raavi, 'Gurmukhi MN', 'Mukta Mahee', sans-serif;
  --mono:    ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;

  --t-hero: clamp(2.9rem, 8.4vw, 8.75rem);
  --t-1:    clamp(2.05rem, 4.7vw, 4.4rem);
  --t-2:    clamp(1.55rem, 2.7vw, 2.6rem);
  --t-3:    clamp(1.18rem, 1.5vw, 1.42rem);
  --t-b:    1.0625rem;
  --t-s:    .8750rem;
  --t-xs:   .7500rem;

  /* rhythm */
  --gut:  clamp(1.25rem, 4vw, 2.75rem);
  --bay:  clamp(4.5rem, 11vh, 9rem);
  --shell: 1420px;
  --text-w: 62ch;

  /* stone and steel don't have soft corners */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;

  --seam: 1px;
  --ease: cubic-bezier(.22, .68, 0, 1);
  --ease-o: cubic-bezier(.16, 1, .3, 1);

  /* height of the fading announcement strip above the header — 0 until
     ui.js measures the strip and sets this, so the header sits flush
     against the top on any page that never shows one (or on admin) */
  --ann-h: 0px;
}

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* keeps anything sticky (the header) clear of a notch or Dynamic Island
     when the page is drawn edge-to-edge under it (viewport-fit=cover) */
  scroll-padding-top: env(safe-area-inset-top, 0px);
}
html.reduced { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--marble);
  font-family: var(--body);
  font-size: var(--t-b);
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* the phone's own status bar and gesture/home-indicator bar sit *outside*
     this padding — this just stops our own content (and the fixed header
     below) from being drawn underneath either one on a phone with a notch
     or a bottom gesture bar */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 3px;
}

::selection { background: var(--gold); color: var(--ink); }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Several components below set an explicit `display`, which outranks the
   browser's own [hidden] rule — so anything toggled with the hidden attribute
   would stay stubbornly visible. State it once, with weight, here. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------- typography */
[lang="pa"] body, [data-lang="pa"] body { font-family: var(--gurmukhi); }
[data-lang="pa"] .display, [data-lang="pa"] .sign-en { font-family: var(--gurmukhi); }
.gur { font-family: var(--gurmukhi); }

.display {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.018em;
  font-variation-settings: 'SOFT' 24;
}

.t-hero { font-size: var(--t-hero); }
.t-1    { font-size: var(--t-1); }
.t-2    { font-size: var(--t-2); }
.t-3    { font-size: var(--t-3); line-height: 1.22; letter-spacing: -.008em; }

/* the eyebrow: small, wide, uppercase, always paired with a gold tick */
.eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: .7em;
}
.eyebrow::before {
  content: '';
  width: 1.9em;
  height: 1px;
  background: currentColor;
  opacity: .7;
  flex: none;
}
.eyebrow.centre { justify-content: center; }
[data-lang="pa"] .eyebrow { letter-spacing: .08em; }

/* the signboard: Gurmukhi above, English below — as painted on the shop */
.sign { display: grid; gap: .28em; }
.sign-pa {
  font-family: var(--gurmukhi);
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.32rem);
  letter-spacing: .01em;
  color: var(--gold);
  opacity: .92;
}
.sign-en { font-family: var(--display); }

.lede {
  font-size: clamp(1.06rem, 1.35vw, 1.28rem);
  line-height: 1.58;
  color: color-mix(in srgb, var(--marble) 78%, transparent);
  max-width: var(--text-w);
}
.muted { color: var(--steel); }
.small { font-size: var(--t-s); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: -.01em; }

/* ------------------------------------------------------------------ layout */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.bay { padding-block: var(--bay); }
.stack   { display: grid; gap: 1.1rem; }
.stack-s { display: grid; gap: .55rem; }
.stack-l { display: grid; gap: 2.2rem; }
.row { display: flex; align-items: center; gap: 1rem; }
.row-wrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.grow { flex: 1 1 auto; min-width: 0; }

/* section head: heading left, action right, hairline under both */
.head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--gold-ghost);
  margin-bottom: clamp(1.75rem, 4vw, 3.25rem);
}

/* ------------------------------------------------ the seam (gold hairline) */
/* Retired at the shopkeeper's request — it read as a stray line down the
   page rather than a design touch. The rule stays (harmless) in case it's
   ever wanted back; only the one line below turns it off everywhere. */
.seam { display: none !important; }
.seam {
  position: fixed;
  top: 0; bottom: 0;
  left: max(var(--gut), calc(50% - var(--shell) / 2 + var(--gut)));
  width: var(--seam);
  background: linear-gradient(180deg,
    transparent 0%,
    var(--gold-dim) 6%,
    var(--gold) 42%,
    var(--gold-hi) 50%,
    var(--gold) 58%,
    var(--gold-dim) 94%,
    transparent 100%);
  opacity: .5;
  z-index: 4;
  pointer-events: none;
}
.seam::after {
  content: '';
  position: absolute;
  left: -1.5px; right: -1.5px;
  top: 0;
  height: 26vh;
  background: linear-gradient(180deg, transparent, var(--gold-hi) 50%, transparent);
  filter: blur(1px);
  transform: translateY(calc(var(--seam-run, 0) * (100vh - 26vh)));
}
.on-marble .seam { opacity: .75; }
@media (max-width: 760px) { .seam { display: none; } }

/* progress rail across the very top */
.progress {
  position: fixed; top: var(--ann-h, 0px); left: 0; right: 0; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 60;
  will-change: transform;
  transition: top .35s var(--ease-o);
}

/* ------------------------------------------------------------------ header */
.hdr {
  position: fixed; top: var(--ann-h, 0px); left: 0; right: 0;
  z-index: 50;
  padding-block: 1.05rem;
  padding-top: calc(1.05rem + env(safe-area-inset-top, 0px));
  transition: padding .5s var(--ease), background .5s linear, border-color .5s linear, top .35s var(--ease-o);
  border-bottom: 1px solid transparent;
}
.hdr::before {
  content: '';
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  opacity: 0;
  transition: opacity .5s linear;
}
.hdr.is-stuck { padding-block: .68rem; padding-top: calc(.68rem + env(safe-area-inset-top, 0px)); border-bottom-color: var(--gold-ghost); }
.hdr.is-stuck::before { opacity: 1; }
.hdr > * { position: relative; }

.brand { display: flex; align-items: center; gap: .8rem; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-txt { display: grid; line-height: 1; }
.brand-en {
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 400;
  letter-spacing: -.01em;
}
.brand-pa {
  font-family: var(--gurmukhi);
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--gold);
  margin-top: .22em;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav-a {
  font-size: var(--t-s);
  font-weight: 500;
  letter-spacing: .04em;
  padding-block: .3rem;
  position: relative;
  color: color-mix(in srgb, var(--marble) 82%, transparent);
  transition: color .3s;
}
.nav-a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--ease-o);
}
.nav-a:hover, .nav-a[aria-current="page"] { color: var(--marble); }
.nav-a:hover::after, .nav-a[aria-current="page"]::after { transform: scaleX(1); }

.tools { display: flex; align-items: center; gap: .55rem; }

/* language toggle — reads as a stamped steel switch */
.lang {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--ink-4);
  padding: .38rem .72rem;
  border-radius: var(--r-1);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: border-color .3s, color .3s, background .3s;
}
.lang:hover { border-color: var(--gold); color: var(--gold-hi); }
.lang .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex: none; }

.cart-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--ink-4);
  padding: .38rem .72rem .38rem .62rem;
  border-radius: var(--r-1);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: border-color .3s, color .3s;
}
.cart-btn:hover { border-color: var(--gold); color: var(--gold-hi); }
.cart-n {
  min-width: 1.35em; height: 1.35em;
  display: grid; place-items: center;
  background: var(--gold); color: var(--ink);
  border-radius: 999px;
  font-size: .68rem; font-weight: 700;
  padding-inline: .3em;
  font-variant-numeric: tabular-nums;
}
.cart-n[data-n="0"] { background: var(--ink-4); color: var(--steel); }

/* header WhatsApp icon — a plain round button, deliberately quiet until
   hovered, then picks up WhatsApp's own green rather than the site gold, so
   it still reads instantly as "this one goes to WhatsApp" */
.wa-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.15rem; height: 2.15rem;
  border: 1px solid var(--ink-4);
  border-radius: 50%;
  color: var(--steel);
  transition: border-color .25s, color .25s, background .25s;
  flex: none;
}
.wa-btn:hover { border-color: #25d366; color: #25d366; background: color-mix(in srgb, #25d366 12%, transparent); }
.lit .wa-btn { border-color: var(--marble-3); color: var(--ink-2, #333); }
.lit .wa-btn:hover { border-color: #25d366; color: #128c4a; }

/* floating WhatsApp button — sits in the bottom-right corner on every
   customer page (never on Admin), independent of the small header icon
   above, for anyone who scrolls straight past the header. */
.wa-float {
  position: fixed;
  right: calc(1.1rem + env(safe-area-inset-right, 0px));
  bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
  width: 3.4rem; height: 3.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .55);
  z-index: 70;
  transition: transform .25s var(--ease-o), box-shadow .25s;
  opacity: 0; transform: translateY(12px) scale(.9);
  animation: waIn .6s var(--ease-o) .3s forwards;
}
.wa-float::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25d366; opacity: .55;
  animation: waRing 2.6s ease-out infinite;
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 14px 30px -8px rgba(0, 0, 0, .6); }
.wa-float svg { width: 30px; height: 30px; position: relative; }
@keyframes waIn { to { opacity: 1; transform: none; } }
@keyframes waRing {
  0%   { transform: scale(1);    opacity: .55; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* announcement strip — a thin, fading bar pinned above the header. Content
   and on/off switch come from Admin → Content; ui.js measures its own
   height into --ann-h so the fixed header (and the scroll-progress rail)
   shift down to sit flush beneath it, on every page that has one. */
.ann-bar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 51;
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  padding: .55rem calc(2.4rem + env(safe-area-inset-right, 0px)) .55rem calc(.9rem + env(safe-area-inset-left, 0px));
  padding-top: calc(.55rem + env(safe-area-inset-top, 0px));
  background: linear-gradient(90deg, var(--ink-2), var(--ink-3) 50%, var(--ink-2));
  color: var(--gold-hi);
  border-bottom: 1px solid var(--gold-ghost);
  font-size: var(--t-xs);
  letter-spacing: .01em;
  text-align: center;
  opacity: 0;
  animation: annIn .6s var(--ease-o) forwards;
}
.ann-bar.ann-out { animation: annOut .35s var(--ease) forwards; }
.ann-bar-x {
  position: absolute; right: calc(.6rem + env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%);
  width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
  border-radius: 50%; color: inherit; opacity: .75;
  transition: opacity .2s, background .2s;
}
.ann-bar-x:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.ann-bar-x svg { width: 13px; height: 13px; }
@keyframes annIn  { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes annOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-100%); } }

/* branded loading screen — a brief, deliberate curtain over the very first
   paint: the mark glows and breathes gently at the centre, the wordmark
   settles in beneath it, and a slim gold line sweeps underneath rather than
   a generic spinner, so it reads as this shop's own rather than a stock
   loading widget. Sits in the DOM before everything else, so it covers the
   page whether the stylesheet or the catalogue is still settling in. */
.site-loader {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-items: center; gap: .1rem;
  background:
    radial-gradient(60% 60% at 50% 42%, color-mix(in srgb, var(--gold) 7%, transparent), transparent 70%),
    var(--ink);
  transition: opacity .6s var(--ease), visibility .6s;
}
.site-loader-glow {
  position: absolute; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 22%, transparent), transparent 72%);
  opacity: 0; filter: blur(2px);
  animation: loaderGlow 2.6s ease-in-out .15s infinite;
}
.site-loader-mark {
  width: 64px; height: 64px; opacity: 0; position: relative;
  animation: loaderRise .8s var(--ease-o) .1s forwards, loaderBreathe 2.6s ease-in-out 1s infinite;
}
.site-loader-word {
  position: relative;
  margin-top: 1.1rem;
  font-family: var(--display); font-weight: 400; font-size: 1rem;
  letter-spacing: .34em; text-transform: uppercase;
  color: color-mix(in srgb, var(--marble) 92%, transparent);
  opacity: 0;
  animation: loaderRise .8s var(--ease-o) .45s forwards;
}
.site-loader-word span { color: var(--gold); }
.site-loader-bar {
  position: relative;
  margin-top: 1.5rem;
  width: 92px; height: 2px; border-radius: 2px;
  background: var(--ink-3);
  overflow: hidden;
  opacity: 0;
  animation: loaderRise .6s var(--ease-o) .7s forwards;
}
.site-loader-bar span {
  display: block; width: 40%; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: loaderSweep 1.3s ease-in-out 1s infinite;
}
.site-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes loaderRise    { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes loaderBreathe { 0%, 100% { transform: scale(1); opacity: .96; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes loaderGlow    { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: .7; transform: scale(1.06); } }
@keyframes loaderSweep   { 0% { transform: translateX(-120%); } 100% { transform: translateX(340%); } }

@media (prefers-reduced-motion: reduce) {
  .wa-float, .wa-float::before, .ann-bar, .ann-bar.ann-out,
  .site-loader-mark, .site-loader-glow, .site-loader-bar span { animation: none !important; }
  .wa-float { opacity: 1; transform: none; }
  .ann-bar { opacity: 1; }
  .site-loader-mark, .site-loader-word, .site-loader-bar { opacity: 1 !important; transform: none !important; }
}

.burger { display: none; width: 40px; height: 40px; place-items: center; }
.burger span, .burger span::before, .burger span::after {
  content: ''; display: block; width: 20px; height: 1.5px; background: currentColor;
  transition: transform .4s var(--ease-o), opacity .3s;
}
.burger span::before { transform: translateY(-6px); }
.burger span::after  { transform: translateY(4.5px); }
.nav-open .burger span { transform: rotate(45deg); }
.nav-open .burger span::before { opacity: 0; }
.nav-open .burger span::after  { transform: rotate(-90deg); }

/* ----------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .92rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: var(--r-1);
  font-size: var(--t-s);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease-o), box-shadow .35s, color .3s, background .3s, border-color .3s;
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-110%);
  transition: transform .7s var(--ease-o);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -12px rgba(217,174,69,.7); }
.btn:hover::after { transform: translateX(110%); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .42; pointer-events: none; }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--marble);
  border-color: var(--ink-4);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-hi); box-shadow: none; }
.btn-line {
  --btn-bg: transparent;
  --btn-fg: var(--gold);
  border-color: var(--gold);
}
.btn-line:hover { background: var(--gold); color: var(--ink); }
.btn-s { padding: .62rem 1.05rem; font-size: var(--t-xs); }
.btn-full { width: 100%; }

/* a text link that behaves like a plate being slid open */
.link {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--t-s); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold);
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--gold-ghost);
  transition: border-color .35s, gap .35s var(--ease-o), color .3s;
}
.link:hover { border-color: var(--gold); gap: .95rem; color: var(--gold-hi); }
.link .arw { transition: transform .35s var(--ease-o); }
.link:hover .arw { transform: translateX(2px); }

/* ------------------------------------------------------------------ badges */
.tag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .3rem .55rem;
  border-radius: var(--r-1);
  background: var(--ink-3);
  color: var(--marble);
  border: 1px solid transparent;
}
.tag-sale  { background: var(--kesri); color: #fff; }
.tag-gold  { background: var(--gold); color: var(--ink); }
.tag-out   { background: transparent; border-color: var(--steel-1); color: var(--steel); }
.tag-low   { background: transparent; border-color: var(--warn); color: #d9a63a; }
.tag-quiet { background: transparent; border-color: var(--ink-4); color: var(--steel); }

.stars { display: inline-flex; align-items: center; gap: .3rem; color: var(--gold); font-size: .8rem; }

/* ------------------------------------------------------------------- forms */
.field { display: grid; gap: .42rem; }
.label {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--steel);
}
.input, .select, .textarea {
  width: 100%;
  background: var(--ink-1);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-1);
  padding: .78rem .9rem;
  font-size: var(--t-b);
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--steel-1); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(217,174,69,.16);
}
.textarea { resize: vertical; min-height: 6.5rem; line-height: 1.55; }
.select {
  appearance: none;
  padding-right: 2.4rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--steel) 50%), linear-gradient(135deg, var(--steel) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.input.err, .select.err, .textarea.err { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--ink-1)); }
.hint { font-size: var(--t-xs); color: var(--steel); }

.check { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; }
.check.disabled { opacity: .4; cursor: not-allowed; }
.check input { appearance: none; width: 1.15rem; height: 1.15rem; flex: none; margin-top: .2rem;
  border: 1px solid var(--ink-4); border-radius: var(--r-1); background: var(--ink-1); transition: .2s; }
.check input:checked { background: var(--gold); border-color: var(--gold);
  background-image: linear-gradient(45deg, transparent 46%, var(--ink) 46% 54%, transparent 54%),
                    linear-gradient(-45deg, transparent 46%, var(--ink) 46% 54%, transparent 54%); }
.check input:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

/* quantity stepper — machined, not rounded */
.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--ink-4); border-radius: var(--r-1); }
.qty button { width: 2.5rem; display: grid; place-items: center; color: var(--steel); transition: color .2s, background .2s; }
.qty button:hover { color: var(--gold); background: var(--ink-2); }
.qty input {
  width: 3.1rem; text-align: center; background: none; border: 0;
  border-inline: 1px solid var(--ink-4);
  font-variant-numeric: tabular-nums; font-weight: 600;
  padding-block: .6rem;
}
.qty input:focus { outline: none; background: var(--ink-2); }

/* ==========================================================================
   MARBLE — the tonal inversion. Everything below the cinematic runs light.
   ========================================================================== */
.marble {
  background: var(--marble);
  color: var(--ink);
  position: relative;
}
.marble::before {
  /* the veining: two barely-there diagonal washes, no texture image needed */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 12% 0%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(90% 60% at 88% 30%, rgba(201,193,169,.35), transparent 65%),
    linear-gradient(158deg, transparent 38%, rgba(201,193,169,.22) 39.4%, transparent 40.4%),
    linear-gradient(163deg, transparent 61%, rgba(201,193,169,.16) 62%, transparent 63%);
  pointer-events: none;
}
.marble > * { position: relative; }

.marble .lede { color: color-mix(in srgb, var(--ink) 72%, transparent); }
.marble .muted { color: color-mix(in srgb, var(--ink) 52%, transparent); }
.marble .eyebrow { color: var(--gold-dim); }
.marble .head { border-bottom-color: var(--marble-3); }
.marble .link { color: var(--gold-dim); border-bottom-color: var(--marble-3); }
.marble .link:hover { color: #6d5722; border-color: var(--gold-dim); }
.marble .btn-ghost { --btn-fg: var(--ink); border-color: var(--marble-3); }
.marble .btn-ghost:hover { border-color: var(--gold-dim); color: var(--gold-dim); }
.marble .sign-pa { color: var(--gold-dim); opacity: 1; }
.marble .input, .marble .select, .marble .textarea { background: #fff; border-color: var(--marble-3); color: var(--ink); }
.marble .input:focus, .marble .select:focus, .marble .textarea:focus { border-color: var(--gold-dim); box-shadow: 0 0 0 3px rgba(140,115,50,.14); }
.marble .label { color: color-mix(in srgb, var(--ink) 55%, transparent); }
.marble .tag-quiet { border-color: var(--marble-3); color: color-mix(in srgb, var(--ink) 55%, transparent); }
.marble .qty { border-color: var(--marble-3); }
.marble .qty input { border-inline-color: var(--marble-3); }
.marble .qty button:hover { background: var(--marble-1); color: var(--gold-dim); }
.marble .check input { background: #fff; border-color: var(--marble-3); }
/* .marble .check input and .check input:checked are equal specificity, and the
   marble rule above comes later in the file — so without this, a ticked radio
   or checkbox inside a marble (light) section like checkout's payment options
   was silently painted back to plain white by the rule above, and never
   looked ticked even though it truly was checked underneath. This rule is
   written one class more specific so it always wins over the plain marble
   rule, on top of coming later in the file too. */
.marble .check input:checked { background: var(--gold); border-color: var(--gold);
  background-image: linear-gradient(45deg, transparent 46%, var(--ink) 46% 54%, transparent 54%),
                    linear-gradient(-45deg, transparent 46%, var(--ink) 46% 54%, transparent 54%); }

/* the seam widens into the marble edge at the inversion */
.inversion {
  height: 0;
  position: relative;
  background: var(--marble);
}
.inversion::before {
  content: '';
  position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold-hi) 50%, var(--gold) 82%, transparent);
}

/* --------------------------------------------------------- category cards */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--marble-3);
  border: 1px solid var(--marble-3);
}
.cat {
  background: var(--marble);
  padding: clamp(1.4rem, 2.4vw, 2.1rem);
  display: grid;
  /* number, Gurmukhi, English, blurb, action — the blurb row eats the slack
     so the action always sits on the bottom edge of the tile */
  grid-template-rows: auto auto auto 1fr auto;
  gap: .7rem;
  position: relative;
  min-height: 15rem;
  transition: background .45s var(--ease-o);
}
.cat::after {
  content: '';
  position: absolute; left: 0; bottom: 0; right: 0; height: 2px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .55s var(--ease-o);
}
.cat:hover { background: #fff; }
.cat:hover::after { transform: scaleX(1); }
/* the tiles are also [data-stagger] reveal targets, and that rule sets its own
   `transition` shorthand — restate both here, above it, so hover keeps easing */
.cat-grid > a.cat {
  transition: background .45s var(--ease-o),
              opacity .9s var(--ease-o),
              transform .9s var(--ease-o);
}
.cat-n {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--gold-dim);
}
.cat-pa { font-family: var(--gurmukhi); font-size: 1.42rem; font-weight: 500; line-height: 1.3; }
.cat-en { font-family: var(--display); font-size: 1.3rem; font-weight: 400; letter-spacing: -.01em; }
.cat-b { font-size: var(--t-s); color: color-mix(in srgb, var(--ink) 58%, transparent); }
.cat-go {
  margin-top: auto;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-dim);
  display: flex; align-items: center; gap: .5rem;
  transition: gap .35s var(--ease-o);
}
.cat:hover .cat-go { gap: .9rem; }

/* ---------------------------------------------------------- product cards */
.p-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.card {
  display: grid;
  grid-template-rows: auto 1fr;
  background: #fff;
  border: 1px solid var(--marble-2);
  border-radius: var(--r-2);
  overflow: hidden;
  position: relative;
  transition: transform .5s var(--ease-o), box-shadow .5s var(--ease-o), border-color .4s;
}
.card:hover {
  transform: translateY(-5px);
  border-color: var(--marble-3);
  box-shadow: 0 22px 44px -26px rgba(10,15,26,.34);
}
.card-shot {
  position: relative;
  aspect-ratio: 1;
  background: var(--marble-1);
  overflow: hidden;
}
.card-shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-o);
}
.card:hover .card-shot img { transform: scale(1.055); }
.card-flags { position: absolute; top: .7rem; left: .7rem; z-index: 2; display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.card-link { position: absolute; inset: 0; z-index: 1; }
.card-body { padding: 1rem 1.05rem 1.15rem; display: grid; gap: .5rem; align-content: start; color: var(--ink); }
.card-cat {
  font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-dim);
}
.card-pa { font-family: var(--gurmukhi); font-size: 1.02rem; font-weight: 500; line-height: 1.35; color: color-mix(in srgb, var(--ink) 76%, transparent); }
.card-en { font-family: var(--display); font-size: 1.06rem; font-weight: 400; line-height: 1.24; letter-spacing: -.006em; }
.card-t { display: grid; gap: .1rem; }
.card-t:hover .card-en { color: var(--gold-dim); }
.card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-top: .15rem; }
.price { display: flex; align-items: baseline; gap: .5rem; font-variant-numeric: tabular-nums; }
.price-now { font-size: 1.14rem; font-weight: 700; letter-spacing: -.01em; }
.price-was { font-size: .875rem; color: color-mix(in srgb, var(--ink) 40%, transparent); text-decoration: line-through; }
.card-add {
  position: absolute;
  right: .7rem; bottom: .7rem;
  z-index: 3;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  background: var(--ink); color: var(--gold);
  border-radius: var(--r-1);
  opacity: 0; transform: translateY(8px) scale(.9);
  transition: opacity .4s var(--ease-o), transform .4s var(--ease-o), background .25s, color .25s;
}
.card:hover .card-add, .card:focus-within .card-add { opacity: 1; transform: none; }
.card-add:hover { background: var(--gold); color: var(--ink); }
.card-add.done { background: var(--ok); color: #fff; }
.card.is-out .card-shot img { filter: grayscale(.75) opacity(.6); }

/* ---------------------------------------------------------- shop filterbar */
.bar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding-block: 1rem;
  border-bottom: 1px solid var(--marble-3);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--marble) 92%, transparent);
  backdrop-filter: blur(10px);
}
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip {
  padding: .5rem .9rem;
  border: 1px solid var(--marble-3);
  border-radius: 999px;
  font-size: var(--t-s); font-weight: 600;
  white-space: nowrap;
  transition: .28s;
}
.chip:hover { border-color: var(--gold-dim); color: var(--gold-dim); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--marble); }
.search {
  display: flex; align-items: center; gap: .55rem;
  border: 1px solid var(--marble-3); border-radius: var(--r-1);
  padding: .1rem .8rem; background: #fff;
  min-width: 12rem;
}
.search input { border: 0; background: none; padding: .62rem 0; width: 100%; }
.search input:focus { outline: none; }
.search:focus-within { border-color: var(--gold-dim); }

/* -------------------------------------------------------- product detail */
.pd { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.75rem, 4vw, 4.5rem); align-items: start; }
.pd-shot {
  background: #fff; border: 1px solid var(--marble-2); border-radius: var(--r-2);
  overflow: hidden; position: relative;
}
.pd-shot img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pd-zoom { position: absolute; inset: 0; cursor: zoom-in; }
.pd-shot.zoomed img { transform: scale(1.9); cursor: zoom-out; }
.pd-shot img { transition: transform .7s var(--ease-o); }
.pd-title { font-family: var(--display); font-size: clamp(1.85rem, 3.2vw, 2.9rem); font-weight: 300; line-height: 1.06; letter-spacing: -.018em; }
.pd-pa { font-family: var(--gurmukhi); font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 500; color: var(--gold-dim); }
.pd-price { display: flex; align-items: baseline; gap: .75rem; font-variant-numeric: tabular-nums; }
.pd-price .price-now { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.pd-price .price-was { font-size: 1.05rem; }
.specs { border-top: 1px solid var(--marble-3); }
.specs div {
  display: grid; grid-template-columns: minmax(7rem, 34%) 1fr;
  gap: 1rem; padding: .72rem 0;
  border-bottom: 1px solid var(--marble-2);
  font-size: var(--t-s);
}
.specs dt, .specs .k { color: color-mix(in srgb, var(--ink) 52%, transparent); font-weight: 600; letter-spacing: .04em; }
.notice {
  display: flex; gap: .8rem;
  padding: .95rem 1.1rem;
  background: color-mix(in srgb, var(--kesri) 8%, transparent);
  border-left: 2px solid var(--kesri);
  border-radius: var(--r-1);
  font-size: var(--t-s);
  line-height: 1.55;
}
.notice b { color: var(--kesri); letter-spacing: .04em; }

/* -------------------------------------------------------------- UPI panel */
.upi-box {
  background: #fff; border: 1px solid var(--marble-2); border-radius: var(--r-2);
  padding: clamp(1.1rem, 2vw, 1.5rem);
  display: grid; gap: 1rem;
}
.upi-box .row-wrap { align-items: flex-start; }
.upi-qr {
  width: 8.5rem; height: 8.5rem; object-fit: contain; flex: none;
  background: #fff; border: 1px solid var(--marble-2); border-radius: var(--r-1);
  padding: .4rem;
}
/* the live, amount-baked-in QR is drawn into this box as a <canvas> by
   qrcode.min.js — stretch whatever it draws to fill the same frame a static
   uploaded QR image would have used */
#co-upi-qr-dyn canvas, #co-upi-qr-dyn img { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------ cart layout */
.cart-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
.line {
  display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 1.1rem;
  padding: 1.15rem 0; border-bottom: 1px solid var(--marble-2);
  align-items: center;
}
.line-shot { width: 5.5rem; aspect-ratio: 1; background: #fff; border: 1px solid var(--marble-2); border-radius: var(--r-1); overflow: hidden; }
.line-shot img { width: 100%; height: 100%; object-fit: cover; }
.panel {
  background: #fff; border: 1px solid var(--marble-2); border-radius: var(--r-2);
  padding: clamp(1.15rem, 2vw, 1.6rem);
  position: sticky; top: calc(5.5rem + var(--ann-h, 0px));
  display: grid; gap: .85rem;
}
.tot { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.tot.grand {
  border-top: 1px solid var(--marble-3);
  padding-top: .85rem; margin-top: .3rem;
  font-size: 1.15rem; font-weight: 700;
}
.tot .free { color: var(--ok); font-weight: 700; }
.saved { color: var(--kesri); font-weight: 600; }
.ship-bar { height: 3px; background: var(--marble-2); border-radius: 999px; overflow: hidden; }
.ship-bar i { display: block; height: 100%; background: var(--gold); transition: width .6s var(--ease-o); }

.empty { display: grid; gap: 1.1rem; justify-items: start; padding-block: clamp(2.5rem, 8vh, 6rem); }
.empty-mk { width: 64px; opacity: .35; }

/* ------------------------------------------------------------ toast/ drawer */
.toast {
  position: fixed; z-index: 90;
  left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 140%);
  background: var(--ink-2);
  color: var(--marble);
  border: 1px solid var(--gold);
  border-radius: var(--r-1);
  padding: .8rem 1.15rem;
  font-size: var(--t-s); font-weight: 600;
  display: flex; align-items: center; gap: .7rem;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.8);
  transition: transform .55s var(--ease-o);
  max-width: calc(100vw - 2rem);
}
.toast.on { transform: translate(-50%, 0); }
.toast .tick { color: var(--gold); }
.toast.bad { border-color: var(--bad); }
.toast.bad .tick { color: var(--bad); }

/* ------------------------------------------------------------------ footer */
.ftr { background: var(--ink); color: var(--marble); padding-block: clamp(3rem, 7vh, 5.5rem) 2rem; }
.ftr-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 3.5rem); }
.ftr h4 { font-size: var(--t-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.ftr li + li { margin-top: .55rem; }
.ftr a { font-size: var(--t-s); color: color-mix(in srgb, var(--marble) 76%, transparent); transition: color .25s; }
.ftr a:hover { color: var(--gold-hi); }
.ftr-note {
  margin-top: clamp(2.25rem, 5vh, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-3);
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  font-size: var(--t-xs); color: var(--steel);
}
.ftr-legal { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.ftr-legal a { font-size: var(--t-xs); color: var(--steel); }
.ftr-legal a:hover { color: var(--gold-hi); }
.maryada {
  grid-column: 1 / -1;
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--ink-3);
  border-left: 2px solid var(--gold);
  border-radius: var(--r-1);
  font-size: var(--t-s);
  line-height: 1.55;
  color: color-mix(in srgb, var(--marble) 74%, transparent);
  max-width: 76ch;
}

/* ================================================================ motion */
[data-reveal] > [data-stagger],
[data-reveal].fade {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--ease-o), transform .9s var(--ease-o);
}
[data-reveal].in > [data-stagger],
[data-reveal].in.fade { opacity: 1; transform: none; }

/* split headings: each word rides up from behind a mask */
[data-split] .sw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
[data-split] .sw > i {
  display: inline-block; font-style: inherit;
  transform: translateY(110%);
  transition: transform 1.05s var(--ease-o);
}
[data-split].in .sw > i, .in [data-split] .sw > i { transform: none; }

[data-skew] { will-change: transform; }
[data-parallax] { will-change: transform; }

/* ==================================================== interior pages ====
   index.html is ink from the first pixel, so the fixed header can sit on it
   transparently in light type. Shop, product, cart and checkout open on
   marble instead, so that same header has to invert. One class on <html>
   does it — everything below is scoped to `.lit`. */
/* On a short page (an empty cart, "My Orders" with nothing in it yet) the
   footer used to end wherever the content happened to, leaving a stretch of
   bare marble hanging below it. Pinning it to the bottom of the viewport
   when there isn't enough content to push it there naturally fixes that
   without changing anything about a page that's already tall enough. */
.lit body { background: var(--marble); color: var(--ink); display: flex; flex-direction: column; min-height: 100vh; }
.lit body > main.marble { flex: 1 0 auto; }
.lit body > footer.ftr { flex-shrink: 0; }
.lit main { padding-top: calc(clamp(5.25rem, 8vh, 6.75rem) + var(--ann-h, 0px)); transition: padding-top .35s var(--ease-o); }
.lit .hdr::before { background: color-mix(in srgb, var(--marble) 86%, transparent); }
.lit .hdr.is-stuck { border-bottom-color: var(--marble-3); }
.lit .brand-pa { color: var(--gold-dim); }
.lit .nav-a { color: color-mix(in srgb, var(--ink) 68%, transparent); }
.lit .nav-a:hover, .lit .nav-a[aria-current="page"] { color: var(--ink); }
.lit .lang, .lit .cart-btn {
  border-color: var(--marble-3);
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.lit .lang:hover, .lit .cart-btn:hover { border-color: var(--gold-dim); color: var(--ink); }
.lit .cart-n[data-n="0"] { background: var(--marble-2); color: color-mix(in srgb, var(--ink) 55%, transparent); }
.lit .nav-a { border-bottom-color: var(--marble-2); }

/* breadcrumb — quiet, monospaced, never competes with the title */
.crumb {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}
.crumb a { color: inherit; transition: color .25s; }
.crumb a:hover { color: var(--gold-dim); }
.crumb i { font-style: normal; opacity: .5; }
.crumb b { color: var(--ink); font-weight: 600; }

/* interior page masthead */
.page-top { padding-block: clamp(1.5rem, 4vh, 3rem) clamp(1.25rem, 3vh, 2.25rem); }
.page-top .sign { margin-top: .9rem; }
.page-top .lede { margin-top: .9rem; max-width: var(--text-w); }

/* legal pages — Privacy, Refund and Terms share this one layout: a quiet
   contents rail down the side on desktop, numbered sections, and the same
   marble/ink/gold voice as the rest of the shop rather than a bare wall
   of text pasted out of a generator. */
.policy {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, var(--text-w));
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 8vh, 5.5rem);
  align-items: start;
}
.policy-updated {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .06em;
  text-transform: uppercase; color: color-mix(in srgb, var(--ink) 50%, transparent);
  margin-bottom: 1.75rem;
}
.policy-toc {
  position: sticky; top: calc(clamp(5.25rem, 8vh, 6.75rem) + var(--ann-h, 0px) + 1rem);
  display: grid; gap: .65rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--marble-3); border-left: 2px solid var(--gold);
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--marble) 60%, transparent);
}
.policy-toc a {
  font-size: var(--t-s); color: color-mix(in srgb, var(--ink) 68%, transparent);
  transition: color .2s;
}
.policy-toc a:hover { color: var(--gold-dim); }
.policy-body h2 {
  font-family: var(--display); font-weight: 500; font-size: var(--t-2);
  margin-top: clamp(2.25rem, 5vh, 3rem); margin-bottom: .85rem;
  display: flex; align-items: baseline; gap: .6rem; scroll-margin-top: calc(clamp(5.25rem, 8vh, 6.75rem) + var(--ann-h, 0px) + 1rem);
}
.policy-body h2 > i { font-style: normal; color: var(--gold-dim); font-family: var(--mono); font-size: var(--t-s); }
.policy-body section:first-of-type h2 { margin-top: 0; }
.policy-body p, .policy-body li {
  font-size: var(--t-b); line-height: 1.75;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
}
.policy-body p + p, .policy-body ul { margin-top: .9rem; }
.policy-body ul { padding-left: 1.3rem; display: grid; gap: .5rem; list-style: disc; }
.policy-body strong { color: var(--ink); font-weight: 600; }
.policy-body a { color: var(--gold-dim); text-decoration: underline; text-underline-offset: .15em; }
.policy-note {
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
  padding: 1rem 1.15rem;
  border: 1px solid var(--marble-3); border-left: 2px solid var(--gold);
  border-radius: var(--r-1);
  font-size: var(--t-s);
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
@media (max-width: 900px) {
  .policy { grid-template-columns: 1fr; }
  .policy-toc { position: static; }
}

/* the filter bar's sticky offset has to clear the fixed header */
.lit .bar { top: calc(clamp(3.6rem, 6vh, 4.4rem) + env(safe-area-inset-top, 0px) + var(--ann-h, 0px)); }
.bar .grow { min-width: 1rem; }
.count {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  white-space: nowrap;
}
.sortwrap { display: flex; align-items: center; gap: .5rem; }
.sortwrap .select { padding-block: .55rem; font-size: var(--t-s); min-width: 11rem; }
.bar .select, .bar .search { background: #fff; }

/* product detail — the pieces the base sheet does not already cover */
.pd-side { display: grid; gap: 1.15rem; align-content: start; }
.pd-buy { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.pd-buy .btn { flex: 1 1 12rem; justify-content: center; }
.pd-gal { display: grid; gap: .6rem; grid-template-columns: repeat(4, 1fr); margin-top: .6rem; }
.pd-gal button {
  background: #fff; border: 1px solid var(--marble-2); border-radius: var(--r-1);
  overflow: hidden; aspect-ratio: 1; transition: border-color .3s;
}
.pd-gal button.on { border-color: var(--gold-dim); }
.pd-gal img { width: 100%; height: 100%; object-fit: cover; }
.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-in  { color: var(--ok); }
.pill-low { color: var(--warn); }
.pill-out { color: var(--bad); }
.pill-new { color: var(--warn); }
.pill-packed { color: var(--gold-dim); }
.pill-shipped { color: #9b6fd6; }
.pill-done { color: var(--ok); }
.pill-cancelled { color: var(--bad); }
.pd-desc { max-width: 58ch; }
.pd-desc p + p { margin-top: .85rem; }
.pd-block { border-top: 1px solid var(--marble-3); padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.pd-block h3 {
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-dim); margin-bottom: 1rem;
}
.rel { padding-top: clamp(2.5rem, 6vh, 4.5rem); }

/* skeleton shown until the catalogue paints — stops a bare white flash */
.skel { display: grid; gap: 1rem; }
.skel i {
  display: block; height: 1rem; border-radius: var(--r-1);
  background: linear-gradient(90deg, var(--marble-1), var(--marble-2), var(--marble-1));
  background-size: 200% 100%;
  animation: skel 1.4s linear infinite;
}
.skel i:nth-child(2) { width: 62%; }
.skel i:nth-child(3) { width: 34%; }
@keyframes skel { to { background-position: -200% 0; } }

@media (max-width: 860px) {
  .lit .nav-a { color: color-mix(in srgb, var(--marble) 82%, transparent); }
  .lit .nav-a:hover, .lit .nav-a[aria-current="page"] { color: var(--marble); }
}
@media (max-width: 560px) {
  .pd-gal { grid-template-columns: repeat(4, 1fr); gap: .4rem; }
  .sortwrap .select { min-width: 8.5rem; }
}

/* ============================================================ responsive */
@media (max-width: 1180px) {
  .ftr-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .pd { grid-template-columns: 1fr; }
  .cart-wrap { grid-template-columns: 1fr; }
  .panel { position: static; }
}
@media (max-width: 860px) {
  .burger { display: grid; }
  .nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(85vw, 22rem);
    background: var(--ink-1);
    border-left: 1px solid var(--ink-3);
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: .4rem;
    padding: 2rem var(--gut);
    padding-top: calc(2rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(100%);
    transition: transform .6s var(--ease-o);
    z-index: 55;
    overflow-y: auto;
  }
  .nav-open .nav { transform: none; }
  .nav-a { font-size: 1.35rem; font-family: var(--display); font-weight: 300; letter-spacing: 0; text-transform: none; padding-block: .7rem; border-bottom: 1px solid var(--ink-3); }
  .nav-a::after { display: none; }
  .nav-scrim {
    position: fixed; inset: 0; background: rgba(4,7,13,.72);
    opacity: 0; pointer-events: none; transition: opacity .5s; z-index: 54;
    backdrop-filter: blur(3px);
  }
  .nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
}
@media (max-width: 560px) {
  .p-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
  .card-body { padding: .8rem .85rem 1rem; }
  .card-en { font-size: .96rem; }
  .card-add { opacity: 1; transform: none; width: 2.3rem; height: 2.3rem; }
  .line { grid-template-columns: 4.25rem 1fr; }
  .line-shot { width: 4.25rem; }
  .ftr-grid { grid-template-columns: 1fr; }
  .brand-pa { display: none; }

  /* the header's tools row was getting crowded on a narrow phone once the
     WhatsApp button joined the lang toggle, account and cart — the language
     switch drops its text and shows only the gold dot, everything else
     keeps its full tap target */
  .tools { gap: .4rem; }
  .lang span:not(.dot) { display: none; }
  .lang { padding: .5rem; }
  .cart-btn { padding: .5rem .55rem; }
  .cart-btn .cart-n { margin-left: -.1rem; }
}

/* ======================================================== reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] > [data-stagger], [data-reveal].fade { opacity: 1; transform: none; }
  [data-split] .sw > i { transform: none; }
  .btn:hover, .card:hover { transform: none; }
}

@media print {
  .hdr, .seam, .progress, .ftr, .btn, .nav { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ===================================================================== auth
   The account button in the header, its dropdown, and the sign-in/sign-up
   modal used across every customer-facing page. Built from the same tokens
   and button/field classes as the rest of the site so it never looks like a
   bolt-on. */
.acct-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--ink-4);
  padding: .38rem .72rem;
  border-radius: var(--r-1);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .06em;
  transition: border-color .3s, color .3s;
  max-width: 10rem;
}
.acct-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-btn:hover { border-color: var(--gold); color: var(--gold-hi); }
.lit .acct-btn, .lit .lang, .lit .cart-btn { border-color: var(--marble-3); color: var(--ink); }
.lit .acct-btn:hover { border-color: var(--gold-dim); color: var(--ink); }

.acct-wrap { position: relative; }
.acct-menu {
  position: absolute; top: calc(100% + .5rem); right: 0;
  min-width: 11rem;
  background: var(--ink-1); border: 1px solid var(--ink-4);
  border-radius: var(--r-1);
  padding: .4rem;
  display: grid; gap: .1rem;
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.6);
  z-index: 70;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.acct-menu.on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.acct-menu a, .acct-menu button {
  display: block; width: 100%; text-align: left;
  padding: .55rem .65rem; border-radius: calc(var(--r-1) - .2rem);
  font-size: var(--t-xs); color: var(--marble);
}
.acct-menu a:hover, .acct-menu button:hover { background: var(--ink-3); color: var(--gold-hi); }

.modal-scrim {
  position: fixed; inset: 0; z-index: 96;
  background: rgba(4,7,13,.72);
  display: grid; place-items: center;
  padding: max(1.2rem, env(safe-area-inset-top, 0px)) 1.2rem max(1.2rem, env(safe-area-inset-bottom, 0px));
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.modal-scrim.on { opacity: 1; pointer-events: auto; }
.modal-card {
  width: 100%; max-width: 26rem;
  background: var(--ink-1); border: 1px solid var(--ink-4);
  border-radius: var(--r-2);
  padding: 1.6rem;
  display: grid; gap: 1.1rem;
  transform: translateY(10px); transition: transform .3s;
  max-height: 90vh; overflow-y: auto;
}
.modal-scrim.on .modal-card { transform: translateY(0); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.modal-x { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; color: var(--steel); border-radius: 999px; }
.modal-x:hover { color: var(--gold-hi); background: var(--ink-3); }
.modal-tabs { display: flex; gap: .4rem; border-bottom: 1px solid var(--ink-3); }
.modal-tab {
  padding: .5rem .3rem .7rem; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--steel);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.modal-tab[aria-selected="true"] { color: var(--gold-hi); border-color: var(--gold); }
.modal-google {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; padding: .75rem 1rem;
  border: 1px solid var(--ink-4); border-radius: var(--r-1);
  background: var(--marble); color: #1f1f1f; font-weight: 600; font-size: var(--t-s);
  transition: box-shadow .25s;
}
.modal-google:hover { box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); }
.modal-or { display: flex; align-items: center; gap: .8rem; color: var(--steel); font-size: var(--t-xs); }
.modal-or::before, .modal-or::after { content: ''; flex: 1; height: 1px; background: var(--ink-4); }

/* ===================================================================== reviews
   Star-rating picker used on the product page and the home page review form,
   plus the list of reviews a product has collected. */
.rate-pick { display: inline-flex; gap: .15rem; }
.rate-pick button { width: 1.7rem; height: 1.7rem; display: grid; place-items: center; color: var(--ink-4); font-size: 1.25rem; line-height: 1; }
.marble .rate-pick button { color: var(--marble-3); }
.rate-pick button.on { color: var(--gold); }
.review-list { display: grid; gap: 1rem; margin-top: 1rem; }
.review-item { border: 1px solid var(--marble-3); border-radius: var(--r-1); padding: 1rem 1.1rem; display: grid; gap: .4rem; }
.review-item .who { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.review-item .who b { font-size: var(--t-s); }
.review-item .when { color: color-mix(in srgb, var(--ink) 50%, transparent); font-size: var(--t-xs); }

/* ===================================================================== coupon
   The little apply/remove strip in the cart summary and checkout summary. */
.coupon-row { display: flex; gap: .5rem; }
.coupon-row .input { flex: 1; }
.coupon-chip {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .55rem .8rem; border-radius: var(--r-1);
  background: color-mix(in srgb, var(--ok) 12%, var(--ink-1));
  border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
  font-size: var(--t-xs);
}
.marble .coupon-chip { background: color-mix(in srgb, var(--ok) 10%, #fff); }
.coupon-chip button { color: var(--bad); font-weight: 700; }

/* ===================================================================== orders
   The customer's own "My Orders" page. */
.myorder { border: 1px solid var(--marble-3); border-radius: var(--r-1); padding: 1.1rem 1.2rem; display: grid; gap: .6rem; }
.myorder .who { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.myorder .lines { display: grid; gap: .3rem; border-top: 1px solid var(--marble-3); padding-top: .6rem; }

/* ----------------------------------------------------- order tracker (My Orders)
   An Amazon-style step tracker: a node per stage, joined by a line that
   fills in gold as the order moves along, with its own small icon per
   stage and a soft pulse on whichever stage is current right now. */
.otrack { border-top: 1px solid var(--marble-3); padding-top: 1.1rem; margin-top: .1rem; }

.otrack-steps { display: flex; align-items: flex-start; }
.otrack-step {
  position: relative; flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: .5rem; text-align: center; min-width: 0;
}
.otrack-step .otrack-line {
  position: absolute; top: 16px; left: -50%; width: 100%; height: 2px;
  background: var(--marble-2); z-index: 0; transition: background .4s var(--ease-o);
}
.otrack-step:first-child .otrack-line { display: none; }
.otrack-step.done .otrack-line { background: var(--gold); }

.otrack-node {
  position: relative; z-index: 1; width: 33px; height: 33px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  background: #fff; border: 2px solid var(--marble-2); color: var(--marble-3);
  transition: background .35s var(--ease-o), border-color .35s var(--ease-o), color .35s var(--ease-o), box-shadow .35s var(--ease-o);
}
.otrack-step.done .otrack-node { background: var(--gold); border-color: var(--gold); color: #fff; }
.otrack-step.now .otrack-node {
  border-color: var(--gold); color: var(--gold-dim); background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent);
  animation: otrack-pulse 1.8s ease-in-out infinite;
}
.otrack-lbl {
  font-size: var(--t-xs); color: var(--marble-3); font-weight: 500; line-height: 1.25;
  max-width: 6rem; overflow-wrap: break-word;
}
.otrack-step.done .otrack-lbl, .otrack-step.now .otrack-lbl { color: var(--ink); font-weight: 700; }

@keyframes otrack-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--gold) 10%, transparent); }
}

.otrack-cancelled {
  display: flex; align-items: center; gap: .5rem; color: var(--bad);
  font-size: var(--t-s); font-weight: 600; margin: 0;
}

.otrack-info {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem;
  font-size: var(--t-s); color: var(--ink-2, #333);
  margin-top: 1.1rem; padding-top: .8rem; border-top: 1px dashed var(--marble-2);
}
.otrack-info span { display: flex; flex-direction: column; gap: .1rem; }
.otrack-info b { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--marble-3); }
.otrack-link { margin-left: auto; }

@media (max-width: 560px) {
  .otrack-lbl { font-size: .68rem; max-width: 4.4rem; }
  .otrack-node { width: 28px; height: 28px; }
  .otrack-step .otrack-line { top: 13px; }
  .otrack-link { margin-left: 0; }
}

@media (max-width: 720px) {
  .acct-btn span { display: none; }
}