/* ═══════════════════════════════════════════════════════════════════════════
   FitGlam — shared design system for the store pages.

   The homepage (index.html) keeps its own inline sheet: it is a hand-tuned
   artefact and rewriting it to import this would risk a layout that took two
   rebuilds to get right. This file speaks the SAME language — same tokens, same
   easing, same type scale — so /shop, /product, /cart, /order and /admin read as
   one site rather than a store bolted onto a landing page.

   Brand isolation: these tokens are FitGlam's only. Nothing here is shared with
   Handled, Mane, CGF or FlairHQ.
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root{
  --ink:#0A0A0A;
  --deep:#101215;
  --cream:#F5F1EB;
  --paper:#FAFAF8;
  --gold:#B8935A;
  --gold-on-light:#87683A;      /* 4.58:1 on cream, 4.94:1 on paper — clears AA */
  --line:rgba(10,10,10,0.10);
  --line-strong:rgba(10,10,10,0.22);
  --muted:rgba(10,10,10,0.62);  /* 4.9:1 on paper */
  --faint:rgba(10,10,10,0.42);
  --ease:cubic-bezier(0.19,1,0.22,1);
  --ease-settle:cubic-bezier(0.16,0.86,0.32,1);
  --ok:#2F6B4F;
  --warn:#8A5A1E;
  --bad:#8C2F2F;
  --marquee-h:54px;
  --topbar-h:95px;
  --chrome-h:calc(var(--marquee-h) + var(--topbar-h));
  --band:clamp(72px,9vh,104px);
  --gutter:clamp(20px,5vw,48px);
  --page:1240px;
}
@media (max-width:900px){ :root{ --topbar-h:83px } }
@media (max-width:600px){ :root{ --marquee-h:46px; --topbar-h:75px } }

html{ font-size:16px; scroll-behavior:smooth; }

body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  color:var(--ink); background:var(--paper); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100svh; overflow-x:hidden; font-weight:400; letter-spacing:-0.005em;
}

/* The analog grain that ties every FitGlam surface together. */
body::before{
  content:''; position:fixed; inset:0; z-index:999; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply; opacity:0.55;
}

a{ color:inherit; text-decoration:none }
img{ display:block; max-width:100% }
::selection{ background:var(--ink); color:var(--paper) }

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

/* ─── Type ────────────────────────────────────────────────────────────────── */

.display{
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:400;
  line-height:1.05; letter-spacing:-0.02em;
}
h1.display{ font-size:clamp(2.2rem,5vw,3.6rem) }
h2.display{ font-size:clamp(1.9rem,4vw,3rem) }
h3.display{ font-size:clamp(1.3rem,2vw,1.7rem) }

.eyebrow{
  font-size:10px; font-weight:700; letter-spacing:0.42em; text-transform:uppercase;
  color:var(--gold-on-light);
}
.eyebrow--dark{ color:var(--gold) }

.label{
  font-size:10.5px; font-weight:600; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--muted); font-variant-numeric:tabular-nums;
}
.lede{ font-size:clamp(0.98rem,1.5vw,1.06rem); line-height:1.7; color:var(--muted); text-wrap:pretty }
.num{ font-variant-numeric:tabular-nums }

/* ─── Layout ──────────────────────────────────────────────────────────────── */

.wrap{ max-width:var(--page); margin:0 auto; padding-inline:var(--gutter) }
.wrap--wide{ max-width:1480px }
.section{ padding-block:var(--band) }
.stack > * + *{ margin-top:var(--stack,16px) }

.section-head{
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:18px;
  border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:40px;
}
.section-title{
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:400;
  font-size:clamp(1.9rem,4vw,3rem); letter-spacing:-0.018em; line-height:1.05;
  display:inline-flex; align-items:baseline; gap:20px; text-wrap:balance;
}
.section-num{
  font-family:'Manrope',sans-serif; font-style:normal; font-weight:600;
  font-size:0.72rem; letter-spacing:0.34em; color:var(--gold-on-light);
  display:inline-flex; align-items:center; gap:14px; position:relative; top:-0.15em;
}
.section-num::after{ content:''; width:32px; height:1px; background:var(--gold); opacity:0.5; margin-left:-0.28em }

/* ─── Announcement marquee (shared chrome) ────────────────────────────────── */

.marquee{
  height:var(--marquee-h); display:flex; align-items:center; overflow:hidden;
  background:var(--ink); color:var(--paper); position:relative; z-index:19;
  border-bottom:1px solid rgba(184,147,90,0.26);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 clamp(24px,6vw,120px),#000 calc(100% - clamp(24px,6vw,120px)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 clamp(24px,6vw,120px),#000 calc(100% - clamp(24px,6vw,120px)),transparent 100%);
}
.marquee-track{
  display:flex; gap:0; animation:marquee 66s linear infinite;
  width:max-content; white-space:nowrap; line-height:1;
  font-size:11px; font-weight:600; letter-spacing:0.26em; text-transform:uppercase;
  color:rgba(250,250,248,0.94);
}
.marquee-track span{ display:inline-flex; align-items:center; gap:0 }
.marquee-track span::after{
  content:'✦'; color:var(--gold); font-size:9px; letter-spacing:0; margin:0 34px 0 36px; opacity:0.9;
}
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ─── Top bar ─────────────────────────────────────────────────────────────── */

.topbar{
  position:sticky; top:0; z-index:18;
  background:rgba(250,250,248,0.90);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
  padding:22px var(--gutter);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
  transition:padding 0.4s var(--ease), background 0.4s var(--ease);
}
.topbar.scrolled{ padding-block:14px }
.topbar-left{ grid-column:1; justify-self:start; display:inline-flex; align-items:center; gap:clamp(14px,2vw,26px) }
.brand{ grid-column:2; justify-self:center; display:inline-flex; align-items:center }
.topbar-right{ grid-column:3; justify-self:end; display:inline-flex; align-items:center; gap:clamp(14px,2vw,22px) }

.brand-mark{
  height:50px; width:auto; aspect-ratio:2814/3414; display:block; color:var(--ink);
  transition:transform 0.6s var(--ease), opacity 0.5s var(--ease), height 0.4s var(--ease);
}
.brand:hover .brand-mark{ transform:scale(1.06); opacity:0.8 }
.topbar.scrolled .brand-mark{ height:38px }
@media (max-width:600px){ .brand-mark{ height:38px } .topbar.scrolled .brand-mark{ height:33px } }

.navlink{
  font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink); position:relative; transition:color 0.3s var(--ease); white-space:nowrap;
}
.navlink::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:0 50%;
  transition:transform 0.45s var(--ease);
}
.navlink:hover::after, .navlink[aria-current="page"]::after{ transform:scaleX(1) }
.navlink[aria-current="page"]{ color:var(--gold-on-light) }
@media (max-width:640px){ .navlink--hide-sm{ display:none } }

/* Cart button — the count badge is the only thing on the page allowed to pop. */
.cart-btn{
  display:inline-flex; align-items:center; gap:9px; position:relative;
  font-size:11px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink); background:none; border:0; cursor:pointer; font-family:inherit;
  padding:6px 2px; transition:color 0.3s var(--ease);
}
.cart-btn:hover{ color:var(--gold-on-light) }
.cart-btn svg{ width:17px; height:17px }
.cart-count{
  min-width:19px; height:19px; padding:0 5px; border-radius:19px;
  background:var(--ink); color:var(--paper);
  font-size:10px; font-weight:700; letter-spacing:0; line-height:19px; text-align:center;
  transition:transform 0.4s var(--ease-settle), background 0.3s var(--ease);
}
.cart-count[data-empty="true"]{ background:transparent; color:var(--faint); box-shadow:inset 0 0 0 1px var(--line-strong) }
.cart-count.bump{ animation:countBump 0.5s var(--ease-settle) }
@keyframes countBump{ 0%{transform:scale(1)} 35%{transform:scale(1.42)} 100%{transform:scale(1)} }

.ig-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase;
  transition:color 0.3s var(--ease);
}
.ig-link:hover{ color:var(--gold-on-light) }
.ig-link svg{ width:15px; height:15px; transition:transform 0.5s var(--ease) }
.ig-link:hover svg{ transform:rotate(-8deg) }
@media (max-width:600px){ .ig-link span{ display:none } }

/* ─── Buttons ─────────────────────────────────────────────────────────────────
   One physical model across the whole site: the surface lifts toward the light
   on hover and presses back down on :active. Nothing glows for decoration. */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:16px 30px; border:0; cursor:pointer; font-family:inherit;
  font-size:11px; font-weight:700; letter-spacing:0.26em; text-transform:uppercase;
  background:var(--ink); color:var(--paper); text-align:center;
  transition:background 0.4s var(--ease), color 0.4s var(--ease),
             transform 0.28s var(--ease-settle), box-shadow 0.4s var(--ease), padding 0.4s var(--ease);
  box-shadow:0 10px 26px -14px rgba(10,10,10,0.6);
}
.btn:hover{ background:var(--gold); color:var(--ink); transform:translateY(-2px); box-shadow:0 18px 36px -16px rgba(10,10,10,0.55) }
.btn:active{ transform:translateY(0); box-shadow:0 6px 14px -10px rgba(10,10,10,0.6) }
.btn svg{ width:13px; height:13px; transition:transform 0.5s var(--ease) }
.btn:hover svg{ transform:translateX(5px) }

.btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-strong) }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); box-shadow:inset 0 0 0 1px var(--ink) }
.btn--light{ background:var(--paper); color:var(--ink) }
.btn--light:hover{ background:var(--gold); color:var(--ink) }
.btn--gold{ background:var(--gold); color:var(--ink) }
.btn--gold:hover{ background:var(--ink); color:var(--paper) }
.btn--block{ width:100%; }
.btn--sm{ padding:11px 18px; font-size:10px; letter-spacing:0.2em; gap:8px }
.btn--danger{ background:var(--bad); color:#fff }
.btn--danger:hover{ background:#6d2424; color:#fff }
.btn[disabled], .btn[aria-disabled="true"]{
  opacity:0.42; cursor:not-allowed; transform:none; box-shadow:none; background:var(--ink);
}
.btn[disabled]:hover{ background:var(--ink); color:var(--paper); transform:none }

.btn.is-busy{ pointer-events:none; position:relative; color:transparent }
.btn.is-busy::after{
  content:''; position:absolute; width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(250,250,248,0.35); border-top-color:var(--paper);
  animation:spin 0.7s linear infinite;
}
.btn--ghost.is-busy::after, .btn--light.is-busy::after, .btn--gold.is-busy::after{
  border-color:rgba(10,10,10,0.25); border-top-color:var(--ink);
}
@keyframes spin{ to{ transform:rotate(360deg) } }

.linkish{
  font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--gold-on-light); border-bottom:1px solid currentColor; padding-bottom:2px;
  background:none; border-top:0; border-left:0; border-right:0; cursor:pointer; font-family:inherit;
  transition:color 0.3s var(--ease);
}
.linkish:hover{ color:var(--ink) }

/* ─── Forms ───────────────────────────────────────────────────────────────── */

.field{ display:block }
.field > span, .field-label{
  display:block; font-size:10px; font-weight:700; letter-spacing:0.28em;
  text-transform:uppercase; color:var(--muted); margin-bottom:9px;
}
.input, .select, .textarea{
  width:100%; font:inherit; font-size:16px;      /* 16px or iOS zooms the page on focus */
  padding:14px 16px; color:var(--ink); background:#fff;
  border:1px solid var(--line-strong); border-radius:0; outline:none;
  transition:border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.textarea{ min-height:96px; resize:vertical; line-height:1.6 }
.select{ appearance:none; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230A0A0A' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px;
}
.input:focus, .select:focus, .textarea:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,147,90,0.16) }
.input::placeholder, .textarea::placeholder{ color:var(--faint) }
.input[aria-invalid="true"]{ border-color:var(--bad) }
.field-hint{ font-size:12px; color:var(--muted); margin-top:7px; line-height:1.5 }
.field-error{ font-size:12.5px; color:var(--bad); margin-top:7px; line-height:1.5 }
.field-row{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) }

/* ─── Notices ─────────────────────────────────────────────────────────────── */

.notice{
  padding:16px 18px; border-left:2px solid var(--gold);
  background:var(--cream); font-size:13.5px; line-height:1.6; color:var(--ink);
}
.notice b{ display:block; font-weight:700; letter-spacing:0.02em; margin-bottom:3px }
.notice--bad{ border-left-color:var(--bad); background:rgba(140,47,47,0.06) }
.notice--ok{ border-left-color:var(--ok); background:rgba(47,107,79,0.07) }
.notice--warn{ border-left-color:var(--warn); background:rgba(138,90,30,0.08) }
.notice a{ color:var(--gold-on-light); text-decoration:underline; text-underline-offset:3px }

.pill{
  display:inline-flex; align-items:center; gap:7px;
  font-size:9.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase;
  padding:5px 10px; background:var(--cream); color:var(--muted); white-space:nowrap;
}
.pill--ok{ background:rgba(47,107,79,0.12); color:#235239 }
.pill--warn{ background:rgba(138,90,30,0.14); color:#6d470f }
.pill--bad{ background:rgba(140,47,47,0.12); color:#6d2424 }
.pill--gold{ background:rgba(184,147,90,0.18); color:#6f5227 }
.pill--ink{ background:var(--ink); color:var(--paper) }
.pill i{ width:8px; height:8px; border-radius:50%; background:currentColor; display:inline-block }

/* ─── Product card ────────────────────────────────────────────────────────── */

.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,24px) }
@media (max-width:1180px){ .product-grid{ grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.4vw,30px) } }
@media (max-width:620px){ .product-grid{ grid-template-columns:1fr; gap:40px } }

.pcard{ display:block; color:inherit; position:relative }
.pcard-media{
  position:relative; overflow:hidden; aspect-ratio:3/4; background:var(--cream);
  transition:box-shadow 0.7s var(--ease);
}
.pcard:hover .pcard-media{ box-shadow:0 34px 70px -26px rgba(10,10,10,0.42) }
.pcard-track{
  position:absolute; inset:0; z-index:1; display:flex;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
}
.pcard-track::-webkit-scrollbar{ display:none }
.pcard-frame{ position:relative; flex:0 0 100%; height:100%; overflow:hidden; scroll-snap-align:start; scroll-snap-stop:always }
.pcard-frame img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:var(--pos,center 34%);
  transition:transform 1.3s var(--ease);
}
.pcard:hover .pcard-frame img{ transform:scale(1.045) }
@media (hover:none){ .pcard:hover .pcard-frame img{ transform:none } }
/* Measured regrade for the dark-garment frames only. A regrade, not a regeneration. */
.lift{ filter:brightness(1.15) contrast(1.04) saturate(1.02) }

.pcard-badge{
  position:absolute; top:14px; left:14px; z-index:3;
  font-size:9.5px; font-weight:700; letter-spacing:0.3em; text-transform:uppercase;
  color:rgba(10,10,10,0.66); padding:6px 11px; background:rgba(250,250,248,0.86);
  transition:background 0.5s var(--ease), color 0.5s var(--ease);
}
.pcard:hover .pcard-badge{ background:var(--gold); color:var(--ink) }
.pcard-flag{
  position:absolute; top:14px; right:14px; z-index:3;
  font-size:9px; font-weight:700; letter-spacing:0.24em; text-transform:uppercase;
  padding:6px 10px; background:var(--ink); color:var(--paper);
}
.pcard-flag--soldout{ background:rgba(250,250,248,0.92); color:var(--ink) }
.pcard-flag--low{ background:var(--gold); color:var(--ink) }

.pcard-dots{
  position:absolute; left:14px; bottom:14px; z-index:3;
  display:flex; align-items:center; gap:0; padding:3px 7px; background:rgba(250,250,248,0.94);
}
.pcard-dot{
  appearance:none; background:none; border:0; margin:0; padding:0; font:inherit;
  width:24px; height:24px; display:grid; place-items:center; cursor:pointer;  /* 24px clears SC 2.5.8 */
}
.pcard-dot::before{
  content:''; display:block; width:11px; height:11px; border-radius:50%;
  background:transparent; transform:scale(0.64);
  box-shadow:inset 0 0 0 2.2px rgba(10,10,10,0.45);
  transition:transform 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
/* State is size + fill, never colour alone — black would be invisible otherwise. */
.pcard-dot[aria-current="true"]::before{ transform:scale(1); background:var(--sw,#0A0A0A); box-shadow:0 0 0 1px rgba(10,10,10,0.55) }
.pcard-dot:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px }
.pcard-swatch{ width:24px; height:24px; display:grid; place-items:center }
.pcard-swatch::before{ content:''; display:block; width:11px; height:11px; border-radius:50%; background:var(--sw,#0A0A0A); box-shadow:0 0 0 1px rgba(10,10,10,0.55) }

.pcard-info{ padding:22px 2px 0 }
.pcard-name{
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:400;
  font-size:clamp(1.26rem,1.5vw,1.52rem); line-height:1.12; text-wrap:balance;
}
.pcard-meta{
  display:grid; grid-template-columns:1fr auto; align-items:baseline; column-gap:12px;
  padding:9px 2px 0; font-size:10.5px; font-weight:600; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--muted);
}
.pcard-price{ color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap }
.pcard-price s{ color:var(--faint); margin-right:7px }

/* ─── Size selector ───────────────────────────────────────────────────────── */

.size-row{ display:flex; flex-wrap:wrap; gap:8px }
.size-opt{
  position:relative; min-width:56px; padding:13px 10px; text-align:center; cursor:pointer;
  font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  background:#fff; box-shadow:inset 0 0 0 1px var(--line-strong);
  transition:box-shadow 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.size-opt input{ position:absolute; opacity:0; width:100%; height:100%; left:0; top:0; cursor:pointer; margin:0 }
.size-opt:hover{ box-shadow:inset 0 0 0 1px var(--ink) }
.size-opt:has(input:checked){ background:var(--ink); color:var(--paper); box-shadow:inset 0 0 0 1px var(--ink) }
.size-opt:has(input:focus-visible){ outline:2px solid var(--ink); outline-offset:3px }
/* Sold out is struck through, not hidden: knowing your size sold out is information. */
.size-opt[data-available="0"]{ color:var(--faint); cursor:not-allowed; background:var(--cream) }
.size-opt[data-available="0"]::after{
  content:''; position:absolute; inset:0; margin:auto; height:1px; background:var(--faint); transform:rotate(-14deg);
}
.size-opt[data-available="0"]:hover{ box-shadow:inset 0 0 0 1px var(--line-strong) }
.size-left{ display:block; font-size:8.5px; letter-spacing:0.1em; color:var(--gold-on-light); margin-top:3px; font-weight:600 }
.size-opt:has(input:checked) .size-left{ color:var(--gold) }

/* ─── Colour selector ─────────────────────────────────────────────────────── */

.swatch-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.swatch{
  position:relative; width:34px; height:34px; cursor:pointer; display:grid; place-items:center;
  border-radius:50%; box-shadow:inset 0 0 0 1px rgba(10,10,10,0.14);
  transition:box-shadow 0.3s var(--ease), transform 0.3s var(--ease-settle);
}
.swatch input{ position:absolute; opacity:0; width:100%; height:100%; left:0; top:0; cursor:pointer; margin:0 }
.swatch::before{
  content:''; width:22px; height:22px; border-radius:50%; background:var(--sw,#0A0A0A);
  box-shadow:0 0 0 1px rgba(10,10,10,0.2);
  transition:width 0.3s var(--ease-settle), height 0.3s var(--ease-settle);
}
.swatch:hover{ transform:scale(1.06) }
.swatch:has(input:checked){ box-shadow:inset 0 0 0 1.5px var(--ink) }
.swatch:has(input:checked)::before{ width:16px; height:16px }
.swatch:has(input:focus-visible){ outline:2px solid var(--ink); outline-offset:2px }

/* ─── Quantity stepper ────────────────────────────────────────────────────── */

.qty{ display:inline-flex; align-items:center; box-shadow:inset 0 0 0 1px var(--line-strong); background:#fff }
.qty button{
  width:40px; height:42px; border:0; background:none; cursor:pointer; font:inherit;
  font-size:16px; color:var(--ink); transition:background 0.25s var(--ease);
}
.qty button:hover:not([disabled]){ background:var(--cream) }
.qty button[disabled]{ color:var(--faint); cursor:not-allowed }
.qty output{ min-width:34px; text-align:center; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums }

/* ─── Tables ──────────────────────────────────────────────────────────────── */

.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }
table.data{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:560px }
table.data th{
  text-align:left; font-size:9.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--muted); padding:0 14px 11px; border-bottom:1px solid var(--line-strong); white-space:nowrap;
}
table.data td{ padding:14px; border-bottom:1px solid var(--line); vertical-align:middle }
table.data tbody tr{ transition:background 0.2s var(--ease) }
table.data tbody tr:hover{ background:rgba(245,241,235,0.55) }
table.data td.num, table.data th.num{ text-align:right; font-variant-numeric:tabular-nums }

/* ─── Empty state ─────────────────────────────────────────────────────────── */

.empty{ text-align:center; padding:clamp(48px,10vh,96px) 20px; color:var(--muted) }
.empty .display{ margin-bottom:12px; color:var(--ink) }
.empty p{ max-width:40ch; margin:0 auto 26px; line-height:1.7 }

/* ─── Footer ──────────────────────────────────────────────────────────────── */

footer.site{
  border-top:1px solid var(--line); background:var(--paper); padding:44px var(--gutter);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
  font-size:11px; color:var(--muted); letter-spacing:0.2em; text-transform:uppercase; font-weight:500;
}
footer.site > *:last-child{ justify-self:end }
footer.site a{ transition:color 0.3s var(--ease) }
footer.site a:hover{ color:var(--gold-on-light) }
.footer-brand{ display:inline-flex; align-items:center; gap:14px }
.footer-brand .brand-mark{ height:44px }
.footer-links{ display:inline-flex; gap:clamp(12px,2vw,22px); flex-wrap:wrap }
@media (max-width:760px){
  footer.site{ grid-template-columns:1fr; justify-items:center; gap:18px; text-align:center }
  footer.site > *:last-child{ justify-self:center }
}

/* ─── Reveal ──────────────────────────────────────────────────────────────────
   Readable at 420ms while still settling for 780ms. Stagger is an index written
   once at load, not nth-child rules that only ever cover the first few children. */

[data-reveal], [data-reveal-stagger] > *{
  opacity:0; transform:translate3d(0,var(--rv-y,28px),0);
  transition:opacity 0.42s linear var(--rv-d,0s),
             transform 0.78s var(--ease-settle) var(--rv-d,0s);
}
[data-reveal].in, [data-reveal-stagger].in > *{ opacity:1; transform:none }
.product-grid > :nth-child(odd){ --rv-y:40px }
.product-grid > :nth-child(2){ --rv-y:14px }
.pcard-frame img{ transform:scale(1.08) }
[data-reveal-stagger].in .pcard-frame img{ transform:scale(1) }

/* Toast — the only thing that interrupts. One at a time, bottom-centre on a
   phone where a corner toast lands under a thumb. */
.toast{
  position:fixed; left:50%; bottom:28px; z-index:9998;
  transform:translate(-50%,24px); opacity:0; visibility:hidden; pointer-events:none;
  display:inline-flex; align-items:center; gap:14px; max-width:min(92vw,460px);
  padding:15px 22px; background:var(--ink); color:var(--paper);
  font-size:12.5px; letter-spacing:0.04em; line-height:1.45;
  box-shadow:0 22px 50px -18px rgba(10,10,10,0.7);
  transition:opacity 0.42s var(--ease), transform 0.52s var(--ease-settle), visibility 0.42s var(--ease);
}
.toast.show{ opacity:1; visibility:visible; transform:translate(-50%,0) }
.toast a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; white-space:nowrap }

/* Scroll progress — X is progress, Y swells with scroll velocity. One composited
   transform instead of animating `width` sixty times a second. */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:9996; pointer-events:none;
  background:linear-gradient(90deg,var(--gold),rgba(184,147,90,0.4));
  transform-origin:0 50%; transform:scaleX(var(--sp,0)) scaleY(calc(1 + var(--sva,0) * 1.9));
  box-shadow:0 0 calc(12px + var(--sva,0) * 22px) rgba(184,147,90,calc(0.35 + var(--sva,0) * 0.4));
  will-change:transform;
}

/* ─── Skeletons — the store renders from an API, so the first paint has a shape
       already. A page that jumps from blank to full reads as broken. ───────── */

.skel{ position:relative; overflow:hidden; background:var(--cream) }
.skel::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.65),transparent);
  transform:translateX(-100%); animation:shimmer 1.5s var(--ease) infinite;
}
@keyframes shimmer{ to{ transform:translateX(100%) } }
.skel-line{ height:11px; margin-top:10px }
.skel-media{ aspect-ratio:3/4 }

/* ─── Focus ───────────────────────────────────────────────────────────────── */

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--ink); outline-offset:3px; border-radius:1px;
}
.on-dark :where(a,button,input):focus-visible{ outline-color:var(--paper) }

/* ─── Dark bands ──────────────────────────────────────────────────────────── */

.band-dark{ background:var(--deep); color:var(--paper) }
.band-dark .label, .band-dark .lede{ color:rgba(250,250,248,0.74) }
.band-ink{ background:var(--ink); color:var(--paper) }

/* ─── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:0.01ms !important; animation-iteration-count:1 !important;
    transition-duration:0.01ms !important; scroll-behavior:auto !important;
  }
  /* A 0.01ms duration still waits out a delay — zero those too. */
  *,*::before,*::after{ transition-delay:0 !important; animation-delay:0 !important }
  [data-reveal], [data-reveal-stagger] > *{ opacity:1; transform:none }
  .pcard-frame img{ transform:none }
  .marquee{ -webkit-mask-image:none; mask-image:none }
  .marquee-track{ animation:none; justify-content:center; width:100% }
  .marquee-track span:nth-child(n+2){ display:none }
  .marquee-track span::after{ display:none }
  .skel::after{ animation:none }
}