/* ═══════════════════════════════════════════════════════════════════════════
   Ink Magic Merch — storefront

   Direction E, "Ink". Built from the founder's actual logo rather than from a
   description of it. Two things in that file drive everything here:

   1. "INK MAGIC" is WHITE KNOCKOUT lettering. It has no dark form of its own —
      it reads only because the illustrated swirls mass up dark behind it. The
      wordmark can never be recoloured or set on a flat light field, so the site
      is dark-led. This is the mark's native habitat.

   2. The palette is jewel-toned, and far more saturated than any description of
      it suggested. Every value below was sampled out of the PNG.

   Brightness on this site comes from saturation, not from white space. The
   ground is near-black so the pink and the teal can actually be at full
   strength — the same colours on white would have to be muted to stay legible.

   The lettering is custom hand-drawn. Nothing available matches it, and a
   near-miss reads as a mistake, so nothing here tries. Display type is a plain
   condensed grotesque and the mark stays the only voice in that register.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Typefaces (self-hosted; the CSP has no third-party font origin) ──────── */
@font-face {
  font-family: 'Bebas Neue';
  src: url('/assets/fonts/bebas.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrainsmono-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
}

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* Ink — the linework of the mark, and the ground of the site. */
  --ink-900: #0C090E;   /* page */
  --ink-800: #151119;   /* raised surfaces, cards */
  --ink-700: #1F1926;   /* insets, image wells */
  --ink-600: #2A2333;
  --ink-500: #4C4459;

  /* Crimson-pink — the left-hand swirl. Primary. */
  --pink-300: #F09CBD;
  --pink-200: #E88AAC;
  --pink-100: #E36196;  /* the readable pink on ink */
  --pink-500: #D02764;  /* fills */
  --pink-600: #A9204F;
  --pink-700: #6C204C;  /* plum, where the two inks overlap */

  /* Teal / cyan — the right-hand swirl. Secondary. */
  --teal-100: #A1DBE3;
  --teal-200: #67CCD8;  /* ice — the readable accent on ink */
  --teal-300: #289AC7;
  --teal-500: #2494A3;
  --teal-600: #1B7684;
  --teal-700: #12314D;  /* the deep navy at the base of the mark */

  /* Light end */
  --paper-0:  #FFFFFF;
  --paper-50: #F8F8F8;
  --paper-100:#E9E5EC;

  /* The mark's own blend, for panels and rules. */
  --gradient-ink: linear-gradient(102deg, #D02764 0%, #6C204C 52%, #1B7684 100%);
  --gradient-text: linear-gradient(96deg, #E36196, #67CCD8);
  --glow: radial-gradient(60% 70% at 18% 0%, rgba(208,39,100,.30), transparent 68%),
          radial-gradient(56% 66% at 84% 12%, rgba(36,148,163,.28), transparent 70%);

  /* Status — pushed light enough to clear AA on the ink ground. */
  --go:      #5FD3AE;
  --go-bg:   rgba(95,211,174,.14);
  --warn:    #E8B75E;
  --warn-bg: rgba(232,183,94,.14);
  --stop:    #FF8095;
  --stop-bg: rgba(255,128,149,.14);
  --note:    #7FC4E8;
  --note-bg: rgba(127,196,232,.14);

  /* Surfaces */
  --bg:          var(--ink-900);
  --bg-subtle:   var(--ink-800);
  --bg-raised:   var(--ink-800);
  --bg-inset:    var(--ink-700);
  --border:      rgba(248,248,248,.12);
  --border-firm: rgba(248,248,248,.22);

  /* Text. Measured on --bg: paper 17.6:1, muted 7.4:1, subtle 4.8:1. */
  --text:        var(--paper-50);
  --text-muted:  #A79FAE;
  --text-subtle: #8A8292;

  --brand:            var(--pink-500);
  --brand-hover:      var(--pink-600);
  --brand-on:         #ffffff;
  --brand-readable:   var(--pink-100);   /* pink as text on the ink ground */
  --brand-soft:       rgba(208,39,100,.16);
  --accent:           var(--teal-500);
  --accent-readable:  var(--teal-200);   /* ice — 9.9:1 on ink */
  --accent-soft:      rgba(36,148,163,.16);
  --focus:            var(--teal-200);
  --focus-ring:       0 0 0 3px rgba(103,204,216,.42);

  /* Type */
  --display: 'Bebas Neue', 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --text-2xs:  0.6875rem;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-5xl:  4rem;
  --text-6xl:  5.25rem;

  /* Space — 4px rhythm */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;

  /* Shape */
  --radius-sm:   6px;
  --radius:      8px;
  --radius-md:   11px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-full: 9999px;

  /* On a dark ground a shadow cannot describe elevation — nothing is lighter
     than the thing it sits on. Depth here comes from the hairline border and,
     for the brand fills, a coloured bloom. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow:    0 2px 6px rgba(0,0,0,.5);
  --shadow-md: 0 8px 20px rgba(0,0,0,.55);
  --shadow-lg: 0 18px 40px rgba(0,0,0,.6);
  --shadow-xl: 0 30px 64px rgba(0,0,0,.68);
  --shadow-pink: 0 10px 30px rgba(208,39,100,.36);
  --shadow-teal: 0 10px 30px rgba(36,148,163,.32);

  --container: 80rem;
  --header-h: 4.75rem;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --rule: 1px solid var(--border);
}

/* The site is single-theme by design. The wordmark is white knockout, so a
   light ground would need a dark plate behind the logo on every page and the
   jewel palette would have to be muted to stay legible — a different design,
   not a variant of this one. The theme toggle was removed with it; the OS
   preference is honoured by there being nothing to fight. */
/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul, ol { padding: 0; list-style: none; }

/* Bebas is a caps-only face, so headings are uppercase by construction rather
   than by transform — which also means no lowercase to lose. Body copy stays
   sentence case; the contrast between the two is the whole point of pairing a
   condensed display face with a neutral text face. */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .94;
  letter-spacing: .012em;
}
h1 { line-height: .92; }

a { color: var(--accent-readable); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-readable); }

:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm);
  box-shadow: var(--focus-ring);
}

::selection { background: var(--pink-300); color: var(--bg); }

/* ── Brand furniture ─────────────────────────────────────────────────────────
   The mark is two inks colliding, so the one recurring device is that
   collision: a hairline of --gradient-ink. It appears at the top edge of the
   page and nowhere else, which is what keeps it a signature rather than a
   decoration. */
.density-bar {
  display: block; height: 3px; width: 100%;
  background: var(--gradient-ink);
}
/* When the announcement bar is present it already carries the gradient
   directly beneath this, which reads as one thick clumsy band. */
.density-bar:has(+ .announce) { display: none; }
.density-bar span { display: none; }

/* Retired with the press-proof direction. Kept as a no-op so any template
   still emitting the markup renders nothing rather than a stray box. */
.regmark { display: none; }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }
@media (min-width: 640px) { .container { padding-inline: var(--sp-8); } }
.container--narrow { max-width: 46rem; }
.container--mid { max-width: 62rem; }

.main { flex: 1; }
.section { padding-block: var(--sp-16); }
@media (min-width: 768px) { .section { padding-block: var(--sp-20); } }
.section--tight { padding-block: var(--sp-10); }
.section--subtle { background: var(--bg-subtle); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-8); }

.row { display: flex; gap: var(--sp-4); align-items: center; }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.row--top { align-items: flex-start; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--text); color: var(--bg);
  padding: var(--sp-3) var(--sp-5); font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ── Typography ──────────────────────────────────────────────────────────── */
/* Eyebrows are one of the three places the system allows uppercase.
   Set in the sans at 12/600/+0.18em, not the mono — mono is reserved for
   things that are literally manufacturing facts. */
.eyebrow {
  font-family: var(--body);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent-readable);
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.eyebrow::before { content: ''; width: 1.625rem; height: 2px; background: currentColor; flex-shrink: 0; }

.section-title { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.lede {
  font-size: var(--text-lg); line-height: 1.65; color: var(--text-muted);
  max-width: 56ch; text-transform: none; font-family: var(--body);
}
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); font-size: var(--text-sm); }
.tabular, .price { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.prose { max-width: 66ch; }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { font-size: var(--text-2xl); margin-top: var(--sp-10); }
.prose h3 { font-size: var(--text-lg); margin-top: var(--sp-8); }
.prose ul, .prose ol { padding-left: var(--sp-6); }
.prose ul { list-style: square; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--brand); }
.prose li + li { margin-top: var(--sp-2); }
.prose a { text-decoration: underline; }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { padding: var(--sp-2) var(--sp-3); border-bottom: var(--rule); text-align: left; }
.prose th { font-size: var(--text-sm); font-weight: 600; }

/* ── Buttons ─────────────────────────────────────────────────────────────────
   The primary action carries the mark's own blend — pink through plum into
   teal — the one place the brand gradient appears at control scale. Set in the
   display face: Bebas at this size reads as a stamped label and keeps buttons
   visually distinct from the body copy around them. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 12px 26px; min-height: 46px;
  font-family: var(--display); font-size: 1.1875rem; font-weight: 400;
  letter-spacing: .05em; line-height: 1.1; text-transform: uppercase;
  border: 1px solid transparent; border-radius: var(--radius);
  background: var(--gradient-ink); color: var(--brand-on);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: filter .14s var(--ease), transform .14s var(--ease),
              box-shadow .14s var(--ease), background-color .14s var(--ease),
              color .14s var(--ease), border-color .14s var(--ease);
}
.btn:hover {
  filter: brightness(1.14); color: var(--brand-on);
  transform: translateY(-1px); box-shadow: var(--shadow-pink);
}
.btn:active { transform: translateY(1px); box-shadow: none; filter: none; }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--bg-inset); color: var(--text-subtle); border-color: transparent;
  cursor: not-allowed; transform: none; box-shadow: none; filter: none;
}

/* Secondary is a hairline outline. On a dark ground an outline is quieter than
   any fill, which is what a secondary action should be. */
.btn--secondary {
  background: none; color: var(--text);
  border: 1.5px solid var(--border-firm); box-shadow: none;
}
.btn--secondary:hover {
  background: none; color: var(--accent-readable);
  border-color: var(--accent-readable); box-shadow: none; filter: none;
}

.btn--ghost { background: none; color: var(--text-muted); border-color: transparent; }
.btn--ghost:hover { background: var(--bg-inset); color: var(--text); border-color: transparent; box-shadow: none; transform: none; filter: none; }

/* The inverse: paper on ink. Reserved for the one action sitting on a brand fill. */
.btn--ink, .btn--onink { background: var(--paper-0); color: var(--bg); border-color: transparent; }
.btn--ink:hover, .btn--onink:hover { background: var(--teal-200); color: var(--bg); box-shadow: none; filter: none; }

.btn--danger { background: var(--stop); border-color: transparent; color: #2A0710; }
.btn--danger:hover { background: #FF9FAF; box-shadow: none; filter: none; }

.btn--lg { padding: 15px 32px; min-height: 54px; font-size: 1.375rem; }
.btn--sm { padding: 8px 15px; min-height: 36px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn--icon { padding: var(--sp-2); min-height: 0; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: .25rem var(--sp-2);
  font-family: var(--body); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; line-height: 1.4;
  border-radius: var(--radius-full);
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border-firm);
}
.badge--brand   { background: var(--pink-500); color: #fff; border-color: transparent; }
.badge--success { background: var(--go-bg);   color: var(--go);   border-color: transparent; }
.badge--warn    { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.badge--danger  { background: var(--stop-bg); color: var(--stop); border-color: transparent; }
.badge--info    { background: var(--note-bg); color: var(--note); border-color: transparent; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.field { display: block; }
.field + .field { margin-top: var(--sp-5); }

.label {
  display: block; margin-bottom: var(--sp-2);
  font-family: var(--body); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text);
}
.label .req { color: var(--brand-readable); }

.input, .select, .textarea {
  width: 100%;
  padding: .6875rem var(--sp-3);
  font-family: var(--body); font-size: var(--text-base);
  color: var(--text);
  background: var(--bg-inset);
  border: 1px solid var(--border-firm);
  border-radius: var(--radius);
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent-readable);
  box-shadow: var(--focus-ring);
}
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--bg-subtle); color: var(--text-subtle); cursor: not-allowed;
}
.textarea { min-height: 8rem; resize: vertical; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%238b8173' d='M6 8.5 2 4.5h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sp-3) center; background-size: 11px;
  padding-right: var(--sp-8);
}

.input--error, .select--error, .textarea--error { border-color: var(--stop); }
.field-error {
  display: block; margin-top: var(--sp-2);
  font-size: var(--text-sm); color: var(--stop); font-weight: 500;
}
.field-hint { display: block; margin-top: var(--sp-2); font-size: var(--text-sm); color: var(--text-muted); }

.check { display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer; }
.check input[type="checkbox"], .check input[type="radio"] {
  width: 1.125rem; height: 1.125rem; margin-top: .1875rem;
  accent-color: var(--brand); flex-shrink: 0; cursor: pointer;
}
.check span { font-size: var(--text-sm); }

.field-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) {
  .field-grid--2 { grid-template-columns: 1fr 1fr; }
  .field-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .field-grid--2-1 { grid-template-columns: 2fr 1fr; }
}

/* ── Cards ───────────────────────────────────────────────────────────────────
   White on paper, hairline border, resting at shadow-sm. The border is what
   makes the edge legible; the shadow is what makes it sit on the page. */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.card--pad { padding: var(--sp-6); }
.card__header {
  padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  font-size: var(--text-base); font-weight: 600;
}
.card__body { padding: var(--sp-6); }
.card__footer { padding: var(--sp-5) var(--sp-6); border-top: 1px solid var(--border); background: var(--bg-subtle); }

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); border-radius: var(--radius);
  border-left: 3px solid currentColor;
  font-size: var(--text-sm);
}
.alert--success { background: var(--go-bg);   color: var(--go); }
.alert--error   { background: var(--stop-bg); color: var(--stop); }
.alert--warn    { background: var(--warn-bg); color: var(--warn); }
.alert--info    { background: var(--note-bg); color: var(--note); }
.alert__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; }

/* ── Announcement + test bar ─────────────────────────────────────────────── */
.announce {
  background: var(--gradient-ink); color: #fff;
  font-size: var(--text-sm); font-weight: 500; text-align: center; padding: var(--sp-2) var(--sp-4);
}
.announce a { color: #fff; font-weight: 700; text-underline-offset: 2px; text-decoration: underline; }

/* Has to be unmissable to staff without out-shouting the brand to a shopper,
   so it reads as a margin note on the sheet rather than a warning banner. */
.testbar {
  background: var(--bg-subtle); color: var(--text-muted);
  font-family: var(--mono); font-size: var(--text-xs);
  letter-spacing: .06em; text-align: center; padding: var(--sp-2) var(--sp-4);
  border-bottom: var(--rule);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
}
.testbar::before {
  content: ''; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--warn); flex-shrink: 0;
}
.testbar strong { color: var(--text); font-weight: 500; }
.testbar a { color: var(--accent-readable); }

/* ── Header ──────────────────────────────────────────────────────────────────
   Opaque, hairline bottom border, no blur and no shrink on scroll. The system
   is explicit about this: print work needs opaque colour, so the UI does too. */
.header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.header__inner {
  display: flex; align-items: center; gap: var(--sp-3); height: var(--header-h);
  min-width: 0;   /* lets the flex children shrink instead of overflowing */
}
@media (min-width: 640px) { .header__inner { gap: var(--sp-6); } }

.logo { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; min-width: 0; }
.logo:hover { color: inherit; }
/* The real mark. It is a dense illustration and turns to mush below roughly
   60px, so it gets a genuine 2.75rem here and the wordmark beside it carries
   the name at small sizes. A tighter secondary lockup would let this shrink. */
.logo__mark {
  width: 2.875rem; height: 2.875rem; flex-shrink: 0;
  background: url('/assets/img/logo-260.webp') center/contain no-repeat;
  text-indent: -9999px; overflow: hidden;
}
.logo__mark::before, .logo__mark::after { content: none; }

.logo__text {
  font-family: var(--display); font-weight: 400; font-size: 1.375rem;
  letter-spacing: .045em; text-transform: uppercase; color: var(--text); line-height: 1;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (min-width: 480px) { .logo__text { font-size: 1.5rem; } }
.logo__text small {
  display: block; font-family: var(--body); font-size: .625rem; font-weight: 600;
  letter-spacing: .18em; color: var(--text-subtle); margin-top: .3125rem; text-transform: uppercase;
}
/* Below this the strapline costs more room than it earns. */
@media (max-width: 419px) { .logo__text small { display: none; } }

.header__actions { flex-shrink: 0; }

.nav { display: none; gap: var(--sp-1); align-items: center; flex: 1; }
@media (min-width: 1024px) { .nav { display: flex; } }

.nav__link {
  position: relative;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--body); font-size: var(--text-sm); font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text); text-decoration: none;
}
.nav__link::after {
  content: ''; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: .375rem;
  height: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--text); }

/* A group is a block wrapper around a link; without this it sits on a
   different baseline to the bare links beside it. */
.nav__group { position: relative; display: flex; align-items: center; }
.nav__panel {
  position: absolute; top: calc(100% + .5rem); left: 0;
  min-width: 14rem; padding: var(--sp-2);
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s;
}
.nav__group:hover .nav__panel, .nav__group:focus-within .nav__panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__panel a {
  display: block; padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm); color: var(--text); text-decoration: none; border-radius: var(--radius-sm);
}
.nav__panel a:hover { background: var(--bg-subtle); color: var(--brand-readable); }

.header__actions { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; }
/* On a phone, cart and account earn their space; the theme toggle does not —
   the OS preference already sets the right default. */
@media (max-width: 479px) { #themeToggle { display: none; } }

.icon-btn {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border: none; background: transparent; color: var(--text);
  border-radius: var(--radius); cursor: pointer; position: relative; text-decoration: none;
  transition: background-color .14s var(--ease);
}
.icon-btn:hover { background: var(--bg-subtle); color: var(--text); }
.icon-btn svg { width: 1.1875rem; height: 1.1875rem; }

.cart-badge {
  position: absolute; top: .25rem; right: .1875rem;
  min-width: 1.125rem; height: 1.125rem; padding: 0 .25rem;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .625rem; font-weight: 500; line-height: 1;
  background: var(--brand); color: #fff; border-radius: var(--radius-full);
  border: 2px solid var(--bg);
}

.search-form { display: none; position: relative; flex: 1; max-width: 20rem; }
@media (min-width: 768px) { .search-form { display: block; } }
.search-form .input {
  padding-left: var(--sp-10); padding-block: .5rem;
  background: transparent; border-color: var(--border-firm);
  font-size: var(--text-sm);
}
.search-form .input:focus { box-shadow: var(--focus-ring); }
.search-form svg {
  position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%);
  width: 1.0625rem; height: 1.0625rem; color: var(--text-subtle); pointer-events: none;
}

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 150; visibility: hidden; opacity: 0;
  transition: opacity .2s var(--ease), visibility .2s; }
.drawer.is-open { visibility: visible; opacity: 1; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(20,17,15,.6); }
.drawer__panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(21rem, 86vw);
  background: var(--bg); border-right: 1px solid var(--border);
  padding: var(--sp-5); overflow-y: auto;
  transform: translateX(-100%); transition: transform .28s var(--ease);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__panel a {
  display: block; padding: var(--sp-3) var(--sp-1);
  font-family: var(--body); font-size: var(--text-base); font-weight: 500;
  color: var(--text); text-decoration: none;
  border-bottom: var(--rule);
}
.drawer__panel a:hover { color: var(--brand-readable); }
.drawer__panel .sub a {
  padding-left: var(--sp-5); font-family: var(--body); font-size: var(--text-sm);
  text-transform: none; letter-spacing: 0; color: var(--text-muted);
}

/* ═══ HERO ═══════════════════════════════════════════════════════════════
   Paper, not a photograph — the system forbids photographic hero
   backgrounds, because the artwork is supposed to be the hero. The only
   warmth added behind it is --gradient-ink-soft, the palest transcription of
   the two swirls, fading out before it reaches the copy so nothing sits on
   a tint that could drag the text contrast down.
   ═══════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative; overflow: hidden;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--glow);
  pointer-events: none;
}

.hero__inner {
  position: relative; z-index: 1;
  display: grid; gap: var(--sp-10); align-items: center;
  padding-block: var(--sp-16);
}
@media (min-width: 940px) {
  .hero__inner { grid-template-columns: 1.05fr .95fr; gap: var(--sp-16); padding-block: var(--sp-20); }
}

/* The headline. Bebas is condensed enough to carry two words per line at
   hero scale; the second half takes the pink-to-ice blend so the gradient
   appears once per page instead of on every heading. */
.overprint {
  position: relative;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(3rem, 8.4vw, 7.25rem);
  line-height: .92;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--text);
  animation: hero-rise .6s var(--ease) both;
}
.overprint__glow {
  background: var(--gradient-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Retired devices from earlier directions, kept as no-ops. */
.overprint__plate { display: none; }
.overprint__ink { display: inline; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .overprint { animation: none; } }

.hero p.lede { font-size: var(--text-lg); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* The mark carries the hero until real product photography exists. It brings
   its own dark mass, so it needs no plate behind it — just room to breathe and
   a bloom picked from its own two inks. */
.hero__art { display: grid; place-items: center; }
.hero__art img {
  width: 100%; max-width: 30rem; height: auto;
  filter: drop-shadow(0 26px 60px rgba(208,39,100,.34));
}
@media (max-width: 939px) { .hero__art img { max-width: 22rem; } }

/* Three checkable facts under the buttons. */
.hero__proof {
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  margin-top: var(--sp-8); padding: 0; list-style: none;
  font-size: var(--text-sm); color: var(--text-muted);
}
.hero__proof strong { color: var(--text); font-weight: 600; }

/* Kept for any template still using the single-shot hero media tile. */
.hero__media {
  display: block; position: relative;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; aspect-ratio: 1; background: var(--bg-raised);
  box-shadow: var(--shadow-lg);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.hero__media:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Text over artwork gets a solid capsule, never a blurred plate. */
.hero__caption {
  position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg); color: var(--text);
  border-radius: var(--radius);
  font-size: var(--text-sm); font-weight: 500;
  display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center;
}
.hero__caption span:last-child {
  font-family: var(--mono); font-size: var(--text-2xs); letter-spacing: .06em;
  color: var(--teal-200); text-transform: uppercase; flex-shrink: 0;
}

/* ── Spec rail — the shop's real cure settings ───────────────────────────────
   Mono, because these are literally manufacturing facts. On paper rather
   than ink now: the page already spends its one full-bleed ink section on
   "how it's printed", and two dark bands in the first screen read as heavy. */
.specrail {
  border-block: 1px solid var(--border);
  background: var(--bg-subtle);
  overflow-x: auto;
  scrollbar-width: none;
}
.specrail::-webkit-scrollbar { display: none; }
.specrail__track {
  display: flex; gap: var(--sp-6); align-items: center;
  padding-block: var(--sp-4);
  font-family: var(--mono); font-size: var(--text-xs);
  white-space: nowrap;
}
.specrail__item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.specrail__key {
  color: var(--text); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
}
.specrail__val { color: var(--text-muted); }
.specrail__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Three checkable facts under the hero buttons. Aqua icons, muted text —
   supporting detail, not a second call to action. */
.hero__proof {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  margin-top: var(--sp-6); padding: 0; list-style: none;
}
.hero__proof li {
  display: inline-flex; align-items: center; gap: .4375rem;
  font-size: var(--text-sm); font-weight: 500; color: var(--text-muted);
}
.hero__proof svg { width: 1rem; height: 1rem; color: var(--accent-readable); flex-shrink: 0; }

/* One tall tile beside two square ones. On a phone the collage collapses to
   the lead tile alone — three cropped thumbnails in a column tell you less
   about the artwork than one image at full width. */
.hero__collage { display: grid; gap: var(--sp-4); }
.hero__collage .hero__media:nth-child(n+2) { display: none; }
@media (min-width: 700px) {
  /* The container needs a definite height or the 1fr rows fall back to
     max-content and the two square tiles run past the bottom of the tall one.
     Sizing the grid itself and letting every tile fill its area is what keeps
     the two columns flush; the images are object-fit:cover, so nothing
     distorts. 7/5 lands the lead tile at almost exactly 4:5. */
  .hero__collage {
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 7 / 5;
  }
  /* Same specificity as the mobile :nth-child rule above, so it has to repeat
     the selector to win rather than relying on source order alone. */
  .hero__collage .hero__media:nth-child(n+2) { display: block; }
  .hero__collage .hero__media { aspect-ratio: auto; height: 100%; }
  .hero__collage .hero__media:first-child { grid-row: span 2; }
}

/* ── Category strip ──────────────────────────────────────────────────────── */
.catstrip {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px)  { .catstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .catstrip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.catstrip__item {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3); text-align: center; text-decoration: none;
  color: var(--text);
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform .22s var(--ease), border-color .22s var(--ease);
}
.catstrip__item:hover {
  color: var(--text); transform: translateY(-3px); border-color: rgba(208,39,100,.55);
}
.catstrip__thumb {
  width: 3.5rem; height: 3.5rem; border-radius: var(--radius-full);
  overflow: hidden; background: var(--bg-inset); flex-shrink: 0;
}
.catstrip__thumb img { width: 100%; height: 100%; object-fit: cover; }
.catstrip__item strong { font-family: var(--display); font-size: 1.1875rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }
.catstrip__count {
  font-family: var(--mono); font-size: var(--text-2xs); color: var(--text-subtle);
}

/* ── Ink band — the one full-bleed dark section allowed per page ─────────── */
.inkband {
  background: var(--bg-subtle); border-block: 1px solid var(--border);
  padding-block: var(--sp-20); margin-block: var(--sp-16);
}
.inkband h2, .inkband h3 { color: var(--text); }
.eyebrow--on-ink { color: var(--accent-readable); }
.lede--on-ink { color: var(--text-muted); }

.inkband__steps { display: grid; gap: var(--sp-8); }
@media (min-width: 820px) { .inkband__steps { grid-template-columns: repeat(3, 1fr); } }
.inkband__step { border-top: 1px solid var(--border); padding-top: var(--sp-6); }
.inkband__num {
  display: block; font-family: var(--display); font-size: 2rem; line-height: 1;
  background: var(--gradient-text); -webkit-background-clip: text; background-clip: text;
  color: transparent; margin-bottom: var(--sp-3);
}
.inkband__step h3 { font-size: var(--text-2xl); }
.inkband__step p {
  font-size: var(--text-base); color: var(--text-muted); margin-top: var(--sp-3);
}
.inkband__spec {
  display: inline-block; margin-top: var(--sp-4);
  font-family: var(--mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: .04em; color: var(--accent-readable);
}
.inkband__note { font-size: var(--text-sm) !important; margin-top: var(--sp-2) !important; }

/* ── Bulk & teams panel ──────────────────────────────────────────────────── */
.bulk {
  display: grid; gap: var(--sp-8); align-items: center;
  padding: var(--sp-10);
  background: var(--gradient-ink); color: #fff;
  border-radius: var(--radius-xl);
}
@media (min-width: 820px) { .bulk { grid-template-columns: 1.6fr 1fr; gap: var(--sp-12); } }
.bulk h2 { color: #fff; font-size: clamp(1.875rem, 3.8vw, 2.75rem); }
.bulk p { color: #fff; font-size: var(--text-lg); line-height: 1.6; max-width: 34rem; }
.eyebrow--on-brand { color: #fff; }
.bulk__action { display: grid; gap: var(--sp-3); }
.bulk__note { font-size: var(--text-sm); color: #fff; text-align: center; }

/* On the brand fill, the only legible button is a white one. */
.btn--onink { background: var(--paper-0); color: var(--bg); border-color: transparent; }
.btn--onink:hover { background: var(--paper-100); color: var(--bg); box-shadow: var(--shadow-lg); }

/* ── Trust strip ─────────────────────────────────────────────────────────── */
.trust {
  display: grid; gap: var(--sp-6); grid-template-columns: repeat(2, 1fr);
  padding-block: var(--sp-10); border-bottom: var(--rule);
}
@media (min-width: 900px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust__item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.trust__item svg {
  width: 1.375rem; height: 1.375rem; color: var(--accent-readable);
  flex-shrink: 0; margin-top: .125rem;
}
.trust__item strong {
  display: block; font-size: var(--text-base); font-weight: 600; margin-bottom: .125rem;
}
.trust__item span { font-size: var(--text-sm); color: var(--text-muted); }

/* ── Grids ───────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--sp-5); }
.grid--products { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 640px)  { .grid--products { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { .grid--products { grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sp-6); } }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%,18rem),1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%,15rem),1fr)); }

/* ── Product card ────────────────────────────────────────────────────────── */
.pcard { position: relative; display: flex; flex-direction: column; }
.pcard__media {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-subtle);
  transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
.pcard:hover .pcard__media { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: rgba(103,204,216,.5); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s var(--ease); }
.pcard__media .hover-img { position: absolute; inset: 0; opacity: 0; }
.pcard:hover .hover-img { opacity: 1; }

.pcard__flags {
  position: absolute; top: var(--sp-2); left: var(--sp-2); z-index: 2;
  display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start;
}
.pcard__wish {
  position: absolute; top: var(--sp-2); right: var(--sp-2); z-index: 2;
  width: 1.875rem; height: 1.875rem; display: grid; place-items: center;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--text-muted);
}
.pcard__wish:hover, .pcard__wish.is-saved { color: var(--brand); }
.pcard__wish svg { width: .9375rem; height: .9375rem; }

.pcard__body { padding-top: var(--sp-3); display: flex; flex-direction: column; gap: .3125rem; }
.pcard__title {
  font-family: var(--display); font-size: 1.3125rem; font-weight: 400; line-height: 1.05;
  letter-spacing: .015em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
}
.pcard__title:hover { color: var(--accent-readable); }
.pcard__title::after { content: ''; position: absolute; inset: 0; }
.pcard__meta {
  font-size: var(--text-sm); color: var(--text-muted);
  letter-spacing: .04em;
}
.pcard__price { font-family: var(--display); font-size: 1.375rem; color: var(--accent-readable); font-variant-numeric: tabular-nums; }
.pcard__price del { color: var(--text-subtle); font-weight: 400; margin-right: var(--sp-1); }
.pcard__price ins { color: var(--brand); text-decoration: none; }

.swatches { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .25rem; }
.swatch { width: .8125rem; height: .8125rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border-firm); flex-shrink: 0; }
.swatch--more { font-family: var(--mono); font-size: .625rem; color: var(--text-subtle); line-height: .8125rem; }

/* ── Listing ─────────────────────────────────────────────────────────────── */
.listing { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 1024px) { .listing { grid-template-columns: 14rem 1fr; gap: var(--sp-10); } }

.filters { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
.filters__group + .filters__group { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: var(--rule); }
.filters__title {
  font-family: var(--mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--sp-3);
}
.filters__list { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 15rem; overflow-y: auto; }
.filters__list label { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--text-sm); cursor: pointer; }
.filters__list .count { margin-left: auto; font-family: var(--mono); font-size: var(--text-xs); color: var(--text-subtle); }

.listing__toolbar {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between;
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-6); border-bottom: 1px solid var(--border);
}
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: .3125rem var(--sp-3);
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-muted); text-decoration: none;
}
.chip:hover { border-color: var(--text); color: var(--text); }

/* ── Product detail ──────────────────────────────────────────────────────── */
.pdp { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 940px) { .pdp { grid-template-columns: 1.1fr 1fr; gap: var(--sp-12); } }

.gallery { display: flex; flex-direction: column; gap: var(--sp-3); }
.gallery__main {
  aspect-ratio: 1; overflow: hidden; background: var(--bg-subtle);
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.gallery__thumb {
  width: 4.25rem; height: 4.25rem; padding: 0; overflow: hidden;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-subtle); cursor: pointer;
}
.gallery__thumb.is-active { border-color: var(--text); border-width: 1.5px; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.pdp__price {
  font-family: var(--mono); font-size: var(--text-3xl); font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.pdp__price del { font-size: var(--text-xl); color: var(--text-subtle); font-weight: 400; margin-right: var(--sp-2); }

.option-group + .option-group { margin-top: var(--sp-6); }
.option-group__label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--sp-3);
}
.option-group__label .value { font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: 0; }

.colour-options { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.colour-option { position: relative; cursor: pointer; }
.colour-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.colour-option span {
  display: block; width: 2.125rem; height: 2.125rem;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.colour-option input:checked + span { border-color: var(--text); box-shadow: 0 0 0 1.5px var(--text); }
.colour-option input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.size-options { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.size-option { position: relative; }
.size-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.size-option span {
  display: grid; place-items: center; min-width: 3rem; height: 2.75rem; padding-inline: var(--sp-3);
  font-family: var(--mono); font-size: var(--text-sm); font-weight: 500; letter-spacing: .04em;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; transition: all .14s var(--ease);
}
.size-option:hover span { border-color: var(--text); }
.size-option input:checked + span { background: var(--text); color: var(--bg); border-color: var(--text); }
.size-option input:disabled + span {
  opacity: .35; cursor: not-allowed;
  background-image: linear-gradient(to top right, transparent 47%, var(--border-firm) 47%, var(--border-firm) 53%, transparent 53%);
}
.size-option input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.qty button { width: 2.5rem; height: 2.75rem; border: none; background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: var(--text-lg); }
.qty button:hover { background: var(--bg-subtle); color: var(--text); }
.qty input {
  width: 3rem; height: 2.75rem; text-align: center; border: none; background: transparent;
  font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.accordion { border-top: 1px solid var(--border); }
.accordion__item { border-bottom: var(--rule); }
.accordion__trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-4) 0; background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; text-align: left; color: var(--text);
}
.accordion__trigger svg { width: 1rem; height: 1rem; transition: transform .2s var(--ease); flex-shrink: 0; }
.accordion__item[open] .accordion__trigger svg { transform: rotate(180deg); }
.accordion__panel { padding-bottom: var(--sp-5); font-size: var(--text-sm); color: var(--text-muted); }

.spec-list { display: grid; gap: var(--sp-2); }
.spec-list div { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--text-sm); }
.spec-list dt { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-subtle); }
.spec-list dd { font-weight: 500; text-align: right; }

/* ── Cart ────────────────────────────────────────────────────────────────── */
.cart-layout { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 900px) { .cart-layout { grid-template-columns: 1fr 21rem; gap: var(--sp-10); } }

.cart-item { display: grid; gap: var(--sp-4); grid-template-columns: 5rem 1fr;
  padding: var(--sp-5) 0; border-bottom: var(--rule); }
@media (min-width: 640px) { .cart-item { grid-template-columns: 6rem 1fr auto; align-items: start; } }
.cart-item__media { aspect-ratio: 1; overflow: hidden; background: var(--bg-subtle);
  border: 1px solid var(--border); border-radius: var(--radius); }
.cart-item__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__title { font-weight: 600; font-size: var(--text-sm); color: var(--text); text-decoration: none; }
.cart-item__title:hover { color: var(--brand-readable); }

.summary { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
.summary__line { display: flex; justify-content: space-between; gap: var(--sp-4);
  font-size: var(--text-sm); padding-block: var(--sp-2); }
.summary__line--total {
  font-family: var(--mono); font-size: var(--text-lg); font-weight: 500;
  border-top: 1px solid var(--border); margin-top: var(--sp-2); padding-top: var(--sp-3);
}
.summary__line .tabular { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.progress-bar { height: 5px; background: var(--bg-subtle); border: 1px solid var(--border-firm); overflow: hidden; }
.progress-bar__fill {
  height: 100%;
  background: var(--gradient-ink);
  transition: width .4s var(--ease);
}

/* ── Checkout ────────────────────────────────────────────────────────────── */
.checkout { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 900px) { .checkout { grid-template-columns: 1fr 23rem; gap: var(--sp-12); } }

.checkout-step + .checkout-step { margin-top: var(--sp-10); }
.checkout-step__title { display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--text-lg); margin-bottom: var(--sp-5); }
.checkout-step__num {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex-shrink: 0;
  background: var(--text); color: var(--bg);
  font-family: var(--body); font-size: var(--text-sm); font-weight: 600;
  border-radius: var(--radius-full);
}

.rate-option {
  display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-4); cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.rate-option + .rate-option { margin-top: var(--sp-2); }
.rate-option:hover { border-color: var(--text); }
.rate-option:has(input:checked) { border-color: var(--text); background: var(--bg-subtle); }
.rate-option input { accent-color: var(--brand); width: 1.125rem; height: 1.125rem; }
.rate-option__price { margin-left: auto; font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }

.mini-item { display: flex; gap: var(--sp-3); align-items: center; font-size: var(--text-sm); }
.mini-item__media {
  position: relative; width: 3.25rem; height: 3.25rem; flex-shrink: 0; overflow: hidden;
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.mini-item__media img { width: 100%; height: 100%; object-fit: cover; }
.mini-item__qty {
  position: absolute; top: -.375rem; right: -.375rem;
  min-width: 1.25rem; height: 1.25rem; padding: 0 .25rem; display: grid; place-items: center;
  font-family: var(--mono); font-size: .625rem; font-weight: 500;
  background: var(--text); color: var(--bg); border-radius: var(--radius-full);
  border: 2px solid var(--bg-raised);
}

/* ── Order status ────────────────────────────────────────────────────────── */
.steps { display: flex; gap: 0; overflow-x: auto; padding-bottom: var(--sp-2); }
.step { flex: 1; min-width: 7rem; text-align: center; position: relative; }
.step::before {
  content: ''; position: absolute; top: .875rem; left: -50%; right: 50%;
  height: 2px; background: var(--border-firm);
}
.step:first-child::before { display: none; }
.step.is-done::before { background: var(--brand); }
.step__dot {
  position: relative; z-index: 1; width: 1.75rem; height: 1.75rem; margin: 0 auto var(--sp-2);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text-subtle); font-family: var(--mono); font-size: var(--text-xs);
}
.step.is-done .step__dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.step.is-current .step__dot { border-color: var(--text); color: var(--text); box-shadow: var(--focus-ring); }
.step__label { font-size: var(--text-sm); font-weight: 500; color: var(--text-subtle); }
.step.is-done .step__label, .step.is-current .step__label { color: var(--text); }

.timeline { position: relative; padding-left: var(--sp-6); }
.timeline::before { content: ''; position: absolute; left: .3125rem; top: .5rem; bottom: .5rem;
  width: 1px; background: var(--border-firm); }
.timeline__item { position: relative; padding-bottom: var(--sp-5); }
.timeline__item::before {
  content: ''; position: absolute; left: calc(-1 * var(--sp-6) + .0625rem); top: .4375rem;
  width: .625rem; height: .625rem; background: var(--brand); box-shadow: 0 0 0 3px var(--bg);
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th {
  text-align: left; font-weight: 600; color: var(--text-muted);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em;
  padding: var(--sp-3); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table td { padding: var(--sp-3); border-bottom: var(--rule); vertical-align: middle; }
.table tbody tr:hover { background: var(--bg-subtle); }
.table .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination { display: flex; gap: var(--sp-1); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-12); }
.pagination a, .pagination span {
  display: grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding-inline: var(--sp-2);
  font-family: var(--mono); font-size: var(--text-sm);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none;
}
.pagination a:hover { border-color: var(--text); }
.pagination .is-current { background: var(--text); color: var(--bg); border-color: var(--text); }
.pagination .is-disabled { opacity: .35; pointer-events: none; }

/* ── Empty states ────────────────────────────────────────────────────────── */
.empty { text-align: center; padding: var(--sp-20) var(--sp-4); }
.empty svg { width: 2.75rem; height: 2.75rem; color: var(--text-subtle); margin: 0 auto var(--sp-5); }
.empty h2 { font-size: var(--text-xl); margin-bottom: var(--sp-3); }
.empty p { color: var(--text-muted); max-width: 34rem; margin: 0 auto var(--sp-6); }

/* ── Method pill ─────────────────────────────────────────────────────────── */
.method-pill {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: .1875rem var(--sp-2);
  font-family: var(--mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .07em;
  border-radius: var(--radius-sm); color: #fff;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
/* ── Footer ──────────────────────────────────────────────────────────────────
   The whole site is the ink field now, so the footer separates from the page
   by going one step darker than the raised surfaces, not by inverting. */
.footer {
  margin-top: var(--sp-24);
  background: #08060A;
  padding-block: var(--sp-16) var(--sp-8);
  border-top: 1px solid var(--border);
}
.footer a { color: var(--text); text-decoration: none; opacity: .8; }
.footer a:hover { opacity: 1; color: var(--accent-readable); }
.footer__grid { display: grid; gap: var(--sp-8); }
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.6fr repeat(3,1fr); gap: var(--sp-10); } }
.footer h3 {
  font-family: var(--display); font-size: 1.125rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .07em; color: var(--accent-readable);
  margin-bottom: var(--sp-4);
}
.footer li + li { margin-top: var(--sp-2); }
.footer li a { font-size: var(--text-sm); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center;
  margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid var(--border);
  font-size: var(--text-sm); color: var(--text-subtle);
}
.footer .logo__text { color: var(--text); }
.footer .logo__text small { color: var(--text-subtle); }
/* The mark can take more room down here than it gets in the header. */
.footer .logo__mark { width: 5.5rem; height: 5.5rem; }

.newsletter { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); max-width: 21rem; }
.newsletter .input {
  background: rgba(248,248,248,.05); border-color: var(--border-firm); color: var(--text);
  font-size: var(--text-sm);
}
.newsletter .input::placeholder { color: var(--text-subtle); }
.newsletter .input:focus { border-color: var(--accent-readable); box-shadow: var(--focus-ring); }
.newsletter .btn { padding-inline: var(--sp-5); }

.socials { display: flex; gap: var(--sp-2); margin-top: var(--sp-6); }
.socials a {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--border-firm); border-radius: var(--radius-full); opacity: 1;
}
.socials a:hover { border-color: var(--accent-readable); color: var(--accent-readable); }
.socials svg { width: 1.0625rem; height: 1.0625rem; }

/* ── Toasts ──────────────────────────────────────────────────────────────── */
.toasts {
  position: fixed; bottom: var(--sp-4); right: var(--sp-4); z-index: 200;
  display: flex; flex-direction: column; gap: var(--sp-2);
  max-width: min(24rem, calc(100vw - 2rem));
}
.toast {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  background: var(--text); color: var(--bg);
  border-radius: var(--radius-sm); border-left: 3px solid var(--brand);
  box-shadow: var(--shadow-lg); font-size: var(--text-sm);
  animation: toast-in .25s var(--ease);
}
.toast--success { border-left-color: var(--go); }
.toast--error { border-left-color: var(--stop); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.toast.is-leaving { opacity: 0; transform: translateX(1rem); transition: all .2s var(--ease); }

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
.crumbs {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-subtle);
}
.crumbs a { color: var(--text-subtle); text-decoration: none; }
.crumbs a:hover { color: var(--brand-readable); }
.crumbs li { display: flex; align-items: center; }
.crumbs li:not(:last-child)::after { content: '/'; margin-left: var(--sp-2); color: var(--border-firm); }

/* ── Utilities ───────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-0{margin-top:0} .mt-2{margin-top:var(--sp-2)} .mt-4{margin-top:var(--sp-4)}
.mt-6{margin-top:var(--sp-6)} .mt-8{margin-top:var(--sp-8)} .mt-12{margin-top:var(--sp-12)}
.mb-2{margin-bottom:var(--sp-2)} .mb-4{margin-bottom:var(--sp-4)}
.mb-6{margin-bottom:var(--sp-6)} .mb-8{margin-bottom:var(--sp-8)}
.w-full{width:100%} .flex-1{flex:1}
.gap-2{gap:var(--sp-2)} .gap-4{gap:var(--sp-4)}

@media print {
  .header, .footer, .announce, .testbar, .toasts, .density-bar, .specrail, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .card { border: 1px solid #999; box-shadow: none; }
  a { text-decoration: none; color: #000; }
}