/* ==========================================================================
   Relic Collectibles storefront
   One stylesheet, five pages. No frameworks, no external requests.

   Palette strategy: RESTRAINED. Warm near-white paper, warm near-black ink,
   one accent. The accent is Oklahoma red dirt (clay) - a local, specific
   color, not the neon-on-black reflex every card site reaches for.
   Committed to a single light theme on purpose: this shop should feel like
   a bright glass counter, not a basement.
   ========================================================================== */

/* --- reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }
/* Layout rules below set display on containers that JS also toggles with the
   hidden attribute. Without this, display:grid would defeat hidden. */
[hidden] { display: none !important; }

/* --- tokens --------------------------------------------------------------- */

:root {
  color-scheme: light;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
          Helvetica, Arial, sans-serif;

  /* ink + paper, both tinted warm so nothing is pure #000 / #fff */
  --ink:        oklch(0.19 0.014 58);
  --ink-2:      oklch(0.44 0.012 58);
  /* AA on paper and paper-2 at small sizes. Do not lighten. */
  --ink-3:      oklch(0.52 0.010 60);
  --paper:      oklch(0.992 0.004 84);
  --paper-2:    oklch(0.968 0.006 76);
  --paper-3:    oklch(0.945 0.008 74);
  --line:       oklch(0.905 0.008 72);
  --line-soft:  oklch(0.945 0.006 72);

  /* the one accent. AA on both paper tones. */
  --clay:       oklch(0.530 0.152 38);
  --clay-deep:  oklch(0.475 0.140 36);
  --clay-tint:  oklch(0.962 0.030 48);
  --clay-line:  oklch(0.880 0.060 44);

  --good:       oklch(0.520 0.108 152);
  --good-tint:  oklch(0.965 0.030 152);
  --good-line:  oklch(0.860 0.060 152);
  --good-text:  oklch(0.380 0.090 152);
  --warn-tint:  oklch(0.972 0.038 84);
  --warn-line:  oklch(0.880 0.070 84);
  --warn-text:  oklch(0.420 0.080 84);

  /* Error is its own role. In dark the accent turns gold, and gold reads as
     "selected", never as "wrong". */
  --danger:      var(--clay);
  --danger-tint: var(--clay-tint);
  --danger-line: var(--clay-line);
  --danger-text: var(--clay-deep);

  /* Text that sits ON the accent fill. */
  --on-accent:   #fff;
  /* Misc surfaces that were literals before dark mode existed. */
  --chip-on-n:   oklch(0.78 0.01 60);
  --sk-sweep:    oklch(1 0 0 / 0.62);
  --banner-bg:   var(--ink);
  --banner-fg:   var(--paper);
  /* The brand R's letter fill. Constant logo black on light paper; in dark
     it lifts to the logo's own charcoal so the letterform reads against the
     near-black masthead instead of leaving only the gold rim. */
  --logo-ink:    #131316;

  /* type ramp: ratio never under 1.25, fluid on the brand surface */
  --t--1: 0.8125rem;
  --t-0:  1.0625rem;
  --t-1:  clamp(1.25rem, 1.10rem + 0.6vw, 1.5rem);
  --t-2:  clamp(1.65rem, 1.30rem + 1.5vw, 2.25rem);
  --t-3:  clamp(2.10rem, 1.50rem + 2.8vw, 3.40rem);
  --t-4:  clamp(2.40rem, 1.60rem + 3.6vw, 3.90rem);
  /* Capped so the hero lede, CTAs, and proof row clear a 720px fold. */
  --t-5:  clamp(2.75rem, 1.60rem + 5.2vw, 4.75rem);

  --sp-1: 0.375rem;
  --sp-2: 0.75rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --band:  clamp(4.5rem, 10vw, 9.5rem);
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 68ch;

  /* One height for every interactive control, one for the small variants.
     Nothing in the UI is allowed to invent its own. */
  --control-h:    3.5rem;
  --control-h-sm: 2.75rem;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px oklch(0.19 0.014 58 / 0.05),
              0 6px 18px oklch(0.19 0.014 58 / 0.05);
  --shadow-2: 0 2px 4px oklch(0.19 0.014 58 / 0.06),
              0 18px 46px oklch(0.19 0.014 58 / 0.10);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quint */
  --fast: 160ms;
  --med:  260ms;
  --slow: 620ms;
}

/* --- dark theme ----------------------------------------------------------
   Black and gold, taken from the shop's own logo. Only the token values
   change: every rule below this point is written against the tokens, so the
   light theme above stays exactly as it was.
   Two selectors on purpose: the media query follows the system when the
   visitor has expressed no preference, and the attribute wins in both
   directions once they use the toggle. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  /* Warm near-black from the logo card, not a blue-grey. */
  --ink:        oklch(0.955 0.008 85);
  --ink-2:      oklch(0.800 0.010 82);
  --ink-3:      oklch(0.680 0.012 82);
  --paper:      oklch(0.170 0.012 70);
  --paper-2:    oklch(0.215 0.014 70);
  --paper-3:    oklch(0.260 0.015 70);
  --line:       oklch(0.340 0.016 72);
  --line-soft:  oklch(0.270 0.014 72);

  /* The accent becomes the logo gold. Hover goes lighter, not darker. */
  --clay:       oklch(0.800 0.128 86);
  --clay-deep:  oklch(0.880 0.110 88);
  --clay-tint:  oklch(0.290 0.055 86);
  --clay-line:  oklch(0.430 0.075 86);
  --on-accent:  oklch(0.170 0.012 70);

  /* Error stays red. Gold would read as "selected", never as "wrong". */
  --danger:      oklch(0.720 0.150 32);
  --danger-tint: oklch(0.280 0.060 32);
  --danger-line: oklch(0.420 0.090 32);
  --danger-text: oklch(0.790 0.130 32);

  --good:       oklch(0.760 0.130 152);
  --good-tint:  oklch(0.260 0.050 152);
  --good-line:  oklch(0.400 0.070 152);
  --good-text:  oklch(0.830 0.110 152);
  --warn-tint:  oklch(0.280 0.050 84);
  --warn-line:  oklch(0.430 0.070 84);
  --warn-text:  oklch(0.860 0.100 84);

  --chip-on-n:  oklch(0.450 0.012 70);
  --logo-ink:   #2b2b31;
  --sk-sweep:   oklch(1 0 0 / 0.085);
  --banner-bg:  oklch(0.260 0.055 84);
  --banner-fg:  oklch(0.950 0.030 85);

  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.50),
              0 6px 18px oklch(0 0 0 / 0.45);
  --shadow-2: 0 2px 4px oklch(0 0 0 / 0.55),
              0 18px 46px oklch(0 0 0 / 0.55);
  }
}
:root[data-theme="dark"] {
  /* Warm near-black from the logo card, not a blue-grey. */
  --ink:        oklch(0.955 0.008 85);
  --ink-2:      oklch(0.800 0.010 82);
  --ink-3:      oklch(0.680 0.012 82);
  --paper:      oklch(0.170 0.012 70);
  --paper-2:    oklch(0.215 0.014 70);
  --paper-3:    oklch(0.260 0.015 70);
  --line:       oklch(0.340 0.016 72);
  --line-soft:  oklch(0.270 0.014 72);

  /* The accent becomes the logo gold. Hover goes lighter, not darker. */
  --clay:       oklch(0.800 0.128 86);
  --clay-deep:  oklch(0.880 0.110 88);
  --clay-tint:  oklch(0.290 0.055 86);
  --clay-line:  oklch(0.430 0.075 86);
  --on-accent:  oklch(0.170 0.012 70);

  /* Error stays red. Gold would read as "selected", never as "wrong". */
  --danger:      oklch(0.720 0.150 32);
  --danger-tint: oklch(0.280 0.060 32);
  --danger-line: oklch(0.420 0.090 32);
  --danger-text: oklch(0.790 0.130 32);

  --good:       oklch(0.760 0.130 152);
  --good-tint:  oklch(0.260 0.050 152);
  --good-line:  oklch(0.400 0.070 152);
  --good-text:  oklch(0.830 0.110 152);
  --warn-tint:  oklch(0.280 0.050 84);
  --warn-line:  oklch(0.430 0.070 84);
  --warn-text:  oklch(0.860 0.100 84);

  --chip-on-n:  oklch(0.450 0.012 70);
  --logo-ink:   #2b2b31;
  --sk-sweep:   oklch(1 0 0 / 0.085);
  --banner-bg:  oklch(0.260 0.055 84);
  --banner-fg:  oklch(0.950 0.030 85);

  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.50),
              0 6px 18px oklch(0 0 0 / 0.45);
  --shadow-2: 0 2px 4px oklch(0 0 0 / 0.55),
              0 18px 46px oklch(0 0 0 / 0.55);
}
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

/* --- base ----------------------------------------------------------------- */

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
  font-family: var(--font);
  font-size: var(--t-0);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  letter-spacing: -0.011em;
}

h1, h2, h3 { line-height: 1.03; letter-spacing: -0.035em; font-weight: 680; }
h1 { font-size: var(--t-4); }
h2 { font-size: var(--t-3); }
h3 { font-size: var(--t-1); letter-spacing: -0.022em; line-height: 1.2; }

p { max-width: var(--measure); }

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

:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap-tight { max-width: 940px; }
.wrap-narrow { max-width: 720px; }

.band { padding-block: var(--band); }
.band-2 { background: var(--paper-2); }
.band-3 { background: var(--paper-3); }
.hairline { border-top: 1px solid var(--line-soft); }

.eyebrow {
  font-size: var(--t--1);
  font-weight: 620;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--clay);
}
.lede { font-size: var(--t-1); color: var(--ink-2); line-height: 1.45; letter-spacing: -0.015em; }
.muted { color: var(--ink-2); }
.quiet { color: var(--ink-3); font-size: var(--t--1); }
.nums  { font-variant-numeric: tabular-nums; }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--sp-3); top: -4rem; z-index: 90;
  background: var(--ink); color: var(--paper);
  padding: 0.7rem 1.1rem; border-radius: var(--r-sm); font-weight: 600;
  transition: top var(--fast) var(--ease);
}
.skip:focus { top: 0.75rem; }

/* --- header --------------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid transparent;
  background: var(--paper);
  transition: border-color var(--med) var(--ease), background var(--med) var(--ease);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .masthead {
    background: color-mix(in oklab, var(--paper) 80%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
  }
}
.masthead[data-stuck="1"] { border-bottom-color: var(--line); }

.masthead-in {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  height: 4.25rem;
}
/* Type lockup echoing the logo: RELIC in the accent (gold in dark, clay in
   light) over COLLECTIBLES in tracked caps. No image file yet. */
.brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 1.05rem; text-decoration: none; padding-block: 0.5rem;
  white-space: nowrap;
}
/* The lockup carries no city line; OKC lives in the page content instead. */
.brand .sub { display: none; }
/* Two-line lockup matching the client's horizontal logo: RELIC over a
   smaller, wider-tracked COLLECTIBLES, both in the accent (gold in dark -
   the logo's own colorway; clay in light). */
.wordmark { display: inline-flex; flex-direction: column; line-height: 1; gap: 0.16em; }
.wm-1 {
  color: var(--clay); font-weight: 680; text-transform: uppercase;
  letter-spacing: 0.12em;
}
.wm-2 {
  color: var(--clay); font-weight: 560; text-transform: uppercase;
  letter-spacing: 0.30em; font-size: 0.42em;
}
@media (max-width: 480px) { .wm-2 { display: none; } }

/* Sun / moon toggle. 44px target, state announced with aria-pressed. */
.theme-btn {
  flex: none; cursor: pointer;
  width: var(--control-h-sm); height: var(--control-h-sm);
  display: grid; place-items: center; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.theme-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.theme-btn:active { transform: scale(0.94); }
.theme-btn svg { width: 1.05rem; height: 1.05rem; }
.theme-btn .i-sun { display: none; }
.theme-btn[data-mode="dark"] .i-sun { display: block; }
.theme-btn[data-mode="dark"] .i-moon { display: none; }
/* The mark is the logo's angular R (SVG injected by relic.js), sized to the
   wordmark's cap height and self-aligned to the baseline row. Fallback: if JS
   never runs, the empty span shows a small accent diamond. */
.brand .mark {
  display: inline-block; width: 0.62rem; height: 0.62rem; border-radius: 2px;
  background: var(--clay); transform: rotate(45deg) translateY(-0.06rem);
}
.brand .mark.mark-r {
  /* The R stands taller than the two-line wordmark, as in the lockup. */
  width: auto; height: 2.05em; border-radius: 0;
  background: none; transform: none; align-self: center;
}
.brand .mark.mark-r svg { height: 100%; width: auto; display: block; }
.brand .sub {
  font-size: var(--t--1); font-weight: 500; color: var(--ink-3);
  letter-spacing: -0.01em;
}
@media (max-width: 560px) { .brand .sub { display: none; } }
.brand { white-space: nowrap; }
@media (max-width: 400px) { .brand { padding-block: 0.65rem; } }
@media (max-width: 360px) { .brand { font-size: 1.05rem; } }

.mast-nav { display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 1.75rem); }
.mast-link {
  text-decoration: none; font-size: 0.95rem; font-weight: 520; color: var(--ink-2);
  transition: color var(--fast) var(--ease);
}
.mast-link:hover { color: var(--ink); }
/* Below 720 the nav collapses to one link plus the cart. That link stays
   visible at every width down to 320: brand + Visit + Cart fits inside 375. */
@media (max-width: 720px) {
  .mast-link { display: none; }
  .mast-link-keep {
    display: inline-flex; align-items: center; min-height: var(--control-h-sm);
    padding-inline: 0.25rem;
  }
}

.cart-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  height: var(--control-h-sm); padding: 0 1.05rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--paper);
  font-size: 0.95rem; font-weight: 560; text-decoration: none; cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.cart-btn:hover { border-color: var(--ink-3); }
.cart-btn:active { transform: scale(0.97); }
.cart-count {
  min-width: 1.4rem; height: 1.4rem; padding-inline: 0.35rem;
  display: inline-grid; place-items: center;
  border-radius: var(--r-pill); background: var(--clay); color: var(--on-accent);
  font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cart-count[hidden] { display: none; }
.cart-btn[data-bump="1"] { animation: bump 420ms var(--ease); }
@keyframes bump { 30% { transform: scale(1.09); } 100% { transform: scale(1); } }

/* --- buttons -------------------------------------------------------------- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: var(--control-h); padding: 0 1.6rem; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: 1.0rem; font-weight: 600; letter-spacing: -0.012em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease),
              border-color var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.42; cursor: not-allowed; transform: none;
}
.btn-accent { --btn-bg: var(--clay); --btn-fg: var(--on-accent); }
.btn-accent:hover { --btn-bg: var(--clay-deep); }
.btn-ghost {
  --btn-bg: transparent; --btn-fg: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--ink-3); --btn-bg: var(--paper-2); }
.btn-sm { height: var(--control-h-sm); padding: 0 1.15rem; font-size: 0.92rem; }
.btn-wide { width: 100%; }
.btn[data-busy="1"] { pointer-events: none; opacity: 0.6; }

.textlink {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--clay-line);
  padding-bottom: 1px;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.textlink:hover { border-bottom-color: var(--clay); color: var(--clay-deep); }

/* --- hero ----------------------------------------------------------------- */

.hero { padding-block: clamp(2.25rem, 4.5vw, 3.75rem) clamp(2.75rem, 6vw, 5rem); overflow: clip; }
.hero-grid {
  display: grid; gap: clamp(2.5rem, 6vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
}
.hero h1 {
  font-size: var(--t-5);
  letter-spacing: -0.045em;
  max-width: 15ch;
  text-wrap: balance;
  margin-block: 0.9rem 1.1rem;
}
.hero .lede { max-width: 44ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.75rem; }
.hero-facts {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem;
  margin-top: 1.9rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft);
  font-size: 0.95rem; color: var(--ink-2);
}
.hero-facts b { color: var(--ink); font-weight: 620; }

/* fanned card art: the hero image, generated not photographed */
.fan { position: relative; display: grid; place-items: center; min-height: 340px; }
.fan-card {
  width: clamp(150px, 30vw, 232px); border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-2); background: var(--paper);
  transition: transform var(--slow) var(--ease);
}
.fan-card:nth-child(1) { transform: rotate(-8deg) translate(-58%, 2%); }
.fan-card:nth-child(2) { transform: rotate(1deg) translateY(-5%); z-index: 2; }
.fan-card:nth-child(3) { transform: rotate(9deg) translate(58%, 4%); }
.fan-card { position: absolute; }
.fan:hover .fan-card:nth-child(1) { transform: rotate(-11deg) translate(-66%, 0%); }
.fan:hover .fan-card:nth-child(3) { transform: rotate(12deg) translate(66%, 2%); }
.fan:hover .fan-card:nth-child(2) { transform: rotate(0deg) translateY(-9%); }
@media (max-width: 939px) { .fan { min-height: 300px; } }

/* --- category rail -------------------------------------------------------- */

.rail-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-4);
}
.rail {
  display: flex; gap: 0.75rem; overflow-x: auto; padding-block: 0.35rem 1.25rem;
  scroll-snap-type: x proximity; scrollbar-width: thin;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
}
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
/* On phones the scrollbar is noise. A right edge fade says "keep going". */
@media (max-width: 720px) {
  .rail {
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
  }
  .rail::-webkit-scrollbar { display: none; }
}
.chip {
  scroll-snap-align: start; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.55rem; flex: none;
  height: var(--control-h); padding: 0 1.25rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--paper);
  font-size: 0.95rem; font-weight: 560; color: var(--ink);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease),
              color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.chip:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.chip .n { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.chip[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.chip[aria-pressed="true"] .n { color: var(--chip-on-n); }

/* --- shop controls -------------------------------------------------------- */

.shop-head {
  display: grid; gap: var(--sp-3);
  grid-template-columns: minmax(0, 1fr);
  align-items: end; margin-bottom: var(--sp-4);
}
@media (min-width: 860px) {
  .shop-head { grid-template-columns: minmax(24rem, 1fr) auto; align-items: end; }
}
#shop-h { max-width: 16ch; text-wrap: balance; }

.controls { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
/* One column, one width, one height. Three ragged control widths in a 335px
   column was the phone failure. */
@media (max-width: 859px) {
  .controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.65rem; }
  .controls .field, .controls .select { width: 100%; }
  .controls .field input { width: 100%; }
  .controls .select select { width: 100%; }
}

.field {
  display: flex; align-items: center; gap: 0.4rem;
  height: var(--control-h);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--paper); padding: 0 0.35rem 0 1.15rem;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.field:focus-within { border-color: var(--ink-3); box-shadow: 0 0 0 4px var(--clay-tint); }
.field input {
  border: 0; outline: 0; background: none; padding: 0; height: 100%;
  width: min(46vw, 250px); font-size: 0.98rem;
}
.field input::placeholder { color: var(--ink-3); }
.field .x {
  cursor: pointer; width: 2.5rem; height: 2.5rem; color: var(--ink-3); font-size: 1.05rem;
  line-height: 1; border-radius: var(--r-pill); flex: none;
}
.field .x:hover { color: var(--ink); background: var(--paper-2); }

.select {
  position: relative; display: inline-flex; align-items: center;
  height: var(--control-h);
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper);
  transition: border-color var(--fast) var(--ease);
}
.select:hover { border-color: var(--ink-3); }
.select:focus-within { border-color: var(--ink-3); box-shadow: 0 0 0 4px var(--clay-tint); }
.select select {
  appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: none;
  height: 100%; padding: 0 2.5rem 0 1.15rem; font-size: 0.95rem; font-weight: 540;
  cursor: pointer; border-radius: var(--r-pill);
}
.select::after {
  content: ""; position: absolute; right: 1.05rem; width: 0.5rem; height: 0.5rem;
  border-right: 1.6px solid var(--ink-2); border-bottom: 1.6px solid var(--ink-2);
  transform: translateY(-2px) rotate(45deg); pointer-events: none;
}

.result-line { font-size: 0.95rem; color: var(--ink-2); }

/* --- shop bar: search first, chips beside it, both sticky inside #shop ---- */

.shop-bar {
  position: sticky; top: 4.25rem; z-index: 40;
  margin-inline: calc(var(--gutter) * -1);
  padding: 0.85rem var(--gutter) 0.15rem;
  margin-bottom: var(--sp-4);
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .shop-bar {
    background: color-mix(in oklab, var(--paper) 86%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
  }
}
.shop-search { margin-bottom: 0.65rem; }
.shop-search .field { width: 100%; }
.shop-search .field input { width: 100%; }
@media (max-width: 859px) {
  .shop-bar { padding-top: 0.6rem; }
  .shop-search .field { height: var(--control-h-sm); }
  .shop-bar .chip { height: var(--control-h-sm); padding-inline: 1rem; }
}

/* Phones: 205px of permanent chrome was too much of an 812px screen. Only the
   chips stay pinned; search scrolls away; each shelf head pins under them so a
   rail is never unlabeled. */
@media (max-width: 720px) {
  .shop-bar {
    position: static; padding: 0; margin-inline: 0; border-bottom: 0;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* Chips cannot truly pin here: sticky range is bounded by the short
     .shop-bar parent, so a "sticky" chips row pins for a few px then leaves,
     stranding the shelf label mid-air. Let search + chips scroll away and pin
     ONLY the shelf label right under the masthead: 68 + 44 = 112px of chrome. */
  .shop-chips {
    margin-inline: calc(var(--gutter) * -1);
    padding: 0.4rem var(--gutter) 0.1rem;
  }
  .shelf-head {
    position: sticky; top: 4.25rem; z-index: 30;
    background: var(--paper); padding-block: 0.5rem 0.35rem;
    /* Full-bleed so tile content cannot peek past the label's right edge. */
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  }
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  @media (max-width: 720px) {
    .shop-chips {
      background: color-mix(in oklab, var(--paper) 86%, transparent);
      -webkit-backdrop-filter: saturate(180%) blur(16px);
      backdrop-filter: saturate(180%) blur(16px);
    }
  }
}

/* --- grouped browse: one shelf per category ------------------------------ */

.shelf { margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.shelf-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.9rem;
}
.shelf-head h3 { font-size: var(--t-1); letter-spacing: -0.028em; }
.shelf-head .n { color: var(--ink-3); font-size: 0.9rem; font-weight: 500; margin-left: 0.5rem; }
.shelf-more {
  flex: none; white-space: nowrap;
  cursor: pointer; font-size: 0.92rem; font-weight: 580; color: var(--clay);
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: var(--control-h-sm);
  padding-inline: 0.4rem; margin-inline: -0.4rem;
}
.shelf-more:hover { color: var(--clay-deep); }
.shelf-rail {
  display: flex; gap: clamp(0.85rem, 1.5vw, 1.25rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  /* Snap must respect the gutter padding or the first tile snaps to
     scrollLeft=gutter at rest and the left fade lies. */
  scroll-padding-inline: var(--gutter);
  padding-block: 0.25rem 0.5rem;
}
.shelf-rail::-webkit-scrollbar { display: none; }
.shelf-rail .card, .shelf-row .card {
  flex: none; width: clamp(132px, 40vw, 148px); scroll-snap-align: start;
}

/* Fades track the scroll position: none at rest, right while more remains,
   left once moved, both in the middle. A static right fade on a rail that
   cannot scroll is a lie about there being more. */
.shelf-rail[data-edge="right"], .shelf-row[data-edge="right"] {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 3rem), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 3rem), transparent 100%);
}
.shelf-rail[data-edge="left"], .shelf-row[data-edge="left"] {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 100%);
}
.shelf-rail[data-edge="both"], .shelf-row[data-edge="both"] {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
}

/* A shelf that fits is a plain row, not a scroller with dead space. Below the
   desktop breakpoint the same shelf genuinely overflows, so it scrolls. */
.shelf-row {
  display: flex; flex-wrap: wrap; gap: clamp(0.85rem, 1.5vw, 1.25rem);
  padding-block: 0.25rem 0.5rem;
}
@media (max-width: 859px) {
  .shelf-row {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .shelf-row::-webkit-scrollbar { display: none; }
}

/* --- flat results -------------------------------------------------------- */

.results-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 0.85rem var(--sp-3); margin-bottom: var(--sp-3);
}
.results-title { font-size: var(--t-2); letter-spacing: -0.032em; }
.results-tools { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.backlink {
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem;
  height: var(--control-h); padding-inline: 1.1rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--paper);
  font-size: 0.93rem; font-weight: 560; color: var(--ink-2);
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.backlink:hover { border-color: var(--ink-3); color: var(--ink); }
@media (max-width: 859px) { .backlink { height: var(--control-h-sm); } }

.more-wrap { display: flex; justify-content: center; margin-top: var(--sp-4); }
.more-wrap p { margin-top: 0.6rem; text-align: center; }

/* --- language facet ------------------------------------------------------ */
/* Only rendered when the visible set actually spans more than one language. */

.lang-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin-bottom: var(--sp-3);
}
.lang-row .lbl-inline {
  font-size: var(--t--1); font-weight: 620; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); margin-right: 0.25rem;
}
.lang-chip {
  cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.4rem;
  height: var(--control-h-sm); padding: 0 0.95rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--paper);
  font-size: 0.88rem; font-weight: 560; color: var(--ink-2);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease),
              color var(--fast) var(--ease);
}
.lang-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.lang-chip[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.lang-chip .n { font-variant-numeric: tabular-nums; opacity: 0.62; font-size: 0.8rem; }

.factrow .lang-inline {
  display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.35rem;
  border-radius: 4px; background: var(--paper-3); color: var(--ink-2);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
}

/* --- show schedule ------------------------------------------------------- */

.sched-wrap { overflow-x: auto; }
.sched {
  width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums;
  min-width: 30rem;
}
.sched th, .sched td {
  text-align: left; padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--line-soft); font-size: 0.98rem;
}
.sched thead th {
  font-size: var(--t--1); font-weight: 620; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); padding-bottom: 0.6rem;
}
.sched tbody th { font-weight: 620; white-space: nowrap; }
.sched[data-hide-past="1"] tr.is-past { display: none; }
.sched tr.is-past { color: var(--ink-3); }
.sched tr.is-next th { color: var(--ink); }
.next-badge {
  display: inline-block; margin-left: 0.6rem; padding: 0.16rem 0.45rem;
  border-radius: 5px; background: var(--clay); color: var(--on-accent);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
}
.tag {
  display: inline-block; padding: 0.2rem 0.55rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); font-size: 0.78rem; font-weight: 560;
  white-space: nowrap; color: var(--ink-2);
}
.tag-both { border-color: var(--clay-line); color: var(--clay-deep); }

/* Honeypot: off screen for people, still fillable by a bot. */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

.factgrid { display: grid; gap: 1.25rem; }
@media (min-width: 620px) { .factgrid { grid-template-columns: 1fr 1fr; } }

/* Sports: one section, three ways in. */
.shelf-subs { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; margin-top: 0.45rem; }
.shelf-sub {
  cursor: pointer; font-size: 0.88rem; color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  padding-block: 0.3rem;
}
.shelf-sub:hover { color: var(--ink); border-bottom-color: var(--clay); }
.shelf-sub .n { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* --- product grid --------------------------------------------------------- */

/* Dense by intent: this is a glass case, not a poster wall. 140px tiles put
   7 across the 1112px content column at 1280, where 220px put 4. */
.grid {
  display: grid; gap: clamp(0.85rem, 1.5vw, 1.25rem);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  align-items: start;
  overflow: clip;
}
@media (max-width: 420px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
}

.card {
  display: grid; grid-template-rows: auto 1fr; gap: 0.55rem;
  /* minmax(0,1fr): otherwise the implicit column grows to the widest nowrap
     text line and the art (width:100%) follows it past the card box. */
  grid-template-columns: minmax(0, 1fr);
  text-decoration: none; color: inherit;
  border-radius: var(--r-md);
  transition: transform var(--med) var(--ease);
}
/* Fixed row structure so price baselines line up across every row of the grid.
   minmax(0,1fr) here too: the implicit auto column sizes to max-content and
   lets nowrap meta text blow past the tile. */
.card-body {
  display: grid; grid-template-rows: auto auto; align-content: start; gap: 0.3rem;
  grid-template-columns: minmax(0, 1fr);
}
.card:hover { transform: translateY(-4px); }
.card-art {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  background: var(--paper-2); box-shadow: var(--shadow-1);
  transition: box-shadow var(--med) var(--ease);
  /* Width is authoritative; height follows the ratio. Without this the 1fr
     card row stretches the art and aspect-ratio widens it past the column. */
  width: 100%; max-width: 100%; height: auto; align-self: start;
  aspect-ratio: 5 / 7;
}
.card:hover .card-art { box-shadow: var(--shadow-2); }
/* Absolute so the SVG's intrinsic size can never widen the art box. */
.card-art svg, .card-art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Top right. The RELIC mark now sits bottom left, so the two never collide. */
.card-flag {
  position: absolute; top: 0.5rem; right: 0.5rem;
  padding: 0.25rem 0.5rem; border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--ink) 88%, transparent); color: var(--paper);
  font-size: 0.62rem; font-weight: 640; letter-spacing: 0.05em; text-transform: uppercase;
}
/* Tile chrome shrinks with the tile. The art keeps its 5:7 ratio. */
/* Name outranks price: bigger and heavier, so the tile reads name-first. */
.card-name {
  font-weight: 650; font-size: 1rem; line-height: 1.3; letter-spacing: -0.02em;
  min-height: calc(2 * 1.3em);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 0.45rem; min-width: 0; }
.card-price {
  font-weight: 560; font-size: 0.8125rem; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em; flex: none;
}
/* min-width:0 is load bearing: a flex item defaults to min-width:auto, which
   ignores the ellipsis and lets a long line push into the next tile. */
.card-sub {
  font-size: 0.75rem; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; max-width: 45%;
}
/* Language rides the meta row, so the art top carries at most one badge. */
.lang-mini {
  flex: none; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em;
  color: var(--ink-2); background: var(--paper-3);
  padding: 0.1rem 0.32rem; border-radius: 4px;
}
.card-left { font-size: 0.75rem; color: var(--ink-2); font-weight: 560; }

/* --- skeletons ------------------------------------------------------------ */

.sk { position: relative; overflow: hidden; background: var(--paper-3); border-radius: var(--r-sm); }
.sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--sk-sweep), transparent);
  transform: translateX(-100%);
  animation: sweep 1.5s infinite;
}
@keyframes sweep { 100% { transform: translateX(100%); } }
.sk-art { aspect-ratio: 5 / 7; border-radius: var(--r-md); }
.sk-line { height: 0.85rem; }
.sk-line.w70 { width: 70%; }
.sk-line.w40 { width: 40%; }

/* --- notices -------------------------------------------------------------- */

.notice {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper-2); padding: 1.1rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.notice h3 { font-size: 1.02rem; letter-spacing: -0.02em; }
.notice p { font-size: 0.96rem; color: var(--ink-2); }
.notice-warn { background: var(--warn-tint); border-color: var(--warn-line); }
.notice-stop { background: var(--danger-tint); border-color: var(--danger-line); }
.notice-good { background: var(--good-tint); border-color: var(--good-line); }
.notice ul { display: grid; gap: 0.3rem; font-size: 0.96rem; color: var(--ink-2); }
.notice li::before { content: "- "; color: var(--ink-3); }

.empty {
  text-align: center; padding: clamp(3rem, 8vw, 5.5rem) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper-2);
}
/* An empty cart should not leave a dead column beside it. */
.cols:has([data-empty]) { grid-template-columns: minmax(0, 1fr); }
[data-empty] { max-width: 560px; margin-inline: auto; width: 100%; }
.empty h3 { margin-bottom: 0.5rem; }
.empty p { margin-inline: auto; }

/* --- steps ---------------------------------------------------------------- */

.steps { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { display: grid; gap: 0.65rem; align-content: start; }
.step .n {
  font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -0.05em;
  line-height: 0.9; color: var(--clay); font-variant-numeric: tabular-nums;
}
.step h3 { margin-top: 0.35rem; }
.step p { color: var(--ink-2); font-size: 1rem; }

/* --- what we do ----------------------------------------------------------- */

.dolist { border-top: 1px solid var(--line); }
.dorow {
  display: grid; gap: 0.35rem 2.5rem; align-items: baseline;
  padding-block: clamp(1.3rem, 2.6vw, 1.9rem);
  border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr);
  transition: padding-left var(--med) var(--ease);
}
@media (min-width: 760px) {
  .dorow { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); }
  .dorow:hover { padding-left: 0.6rem; }
}
.dorow h3 { font-size: var(--t-2); letter-spacing: -0.035em; font-weight: 660; }
.dorow p { color: var(--ink-2); }

/* --- visit ---------------------------------------------------------------- */

.visit-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 860px) { .visit-grid { grid-template-columns: 1fr 1fr; } }
.dl { display: grid; gap: 1.5rem; }
.dl dt {
  font-size: var(--t--1); font-weight: 620; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.35rem;
}
.dl dd { font-size: 1.12rem; letter-spacing: -0.02em; }
.dl dd a { text-decoration: none; border-bottom: 1px solid var(--clay-line); }
.hours-list { display: grid; gap: 0.2rem; font-variant-numeric: tabular-nums; }
.tbd {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--ink-3); font-size: 1rem;
}
.tbd::before {
  content: "SOON"; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  padding: 0.18rem 0.4rem; border-radius: 4px; flex: none;
  background: var(--paper-3); color: var(--ink-2);
}

/* --- footer --------------------------------------------------------------- */

.foot { padding-block: var(--sp-6) var(--sp-5); border-top: 1px solid var(--line); }
.foot-grid {
  display: grid; gap: var(--sp-4); align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
@media (min-width: 560px) and (max-width: 759px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
.foot h4 {
  font-size: var(--t--1); font-weight: 620; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.9rem;
}
.foot ul { display: grid; gap: 0; }
.foot a {
  text-decoration: none; color: var(--ink-2); font-size: 0.98rem;
  display: inline-block; padding-block: 0.6rem;
}
.foot a:hover { color: var(--ink); }
.foot-base {
  margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between;
  font-size: var(--t--1); color: var(--ink-3);
}

/* --- item page ------------------------------------------------------------ */

.crumbs { font-size: 0.92rem; color: var(--ink-3); padding-block: 0.9rem 0; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs span { padding-inline: 0.45rem; }

.detail {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(2rem, 5vw, 3.5rem) var(--band);
  align-items: start;
}
@media (min-width: 900px) {
  .detail { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); }
  .detail-art { position: sticky; top: 6rem; }
}
.detail-art {
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2);
  max-width: 460px; aspect-ratio: 5 / 7; background: var(--paper-2);
}
/* Phones: cap the art so the price and the buy button stay above the fold. */
@media (max-width: 639px) {
  .detail-art {
    height: min(36vh, 300px); width: calc(min(36vh, 300px) * 5 / 7);
    max-width: 100%; justify-self: center;
  }
  .detail { padding-block: 1.25rem var(--band); gap: 1.5rem; }
  .crumbs { padding-block: 0.55rem 0; }
}
.detail-art svg, .detail-art img { width: 100%; height: 100%; }
.detail h1 { font-size: var(--t-3); max-width: 18ch; margin-block: 0.7rem 0.9rem; }
.detail-price {
  font-size: var(--t-2); font-weight: 660; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums; margin-bottom: 0.4rem;
}
.stockline { display: flex; align-items: center; gap: 0.5rem; font-size: 0.98rem; margin-bottom: 2rem; }
.dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--good); }
.dot.out { background: var(--ink-3); }

.buybox {
  display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center;
  padding-block: 1.5rem; border-block: 1px solid var(--line);
}
/* No overflow:hidden and no flexible children: that combination clipped the
   plus button on narrow cart rows. */
.stepper {
  display: inline-flex; align-items: center; flex: none;
  height: var(--control-h);
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper);
}
.stepper button {
  flex: none; width: var(--control-h); height: 100%;
  display: grid; place-items: center; cursor: pointer; color: var(--ink);
  border-radius: var(--r-pill);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.stepper button svg { width: 0.95rem; height: 0.95rem; }
.stepper button:hover:not(:disabled) { background: var(--paper-2); }
.stepper button:disabled { color: var(--ink-3); cursor: not-allowed; }
.stepper output {
  flex: none; min-width: 2.4rem; text-align: center; font-weight: 640;
  font-variant-numeric: tabular-nums;
}
/* Reserved height so confirming an add never shifts the facts below it. */
.addnote {
  min-height: 1.6rem; margin-top: 0.9rem;
  font-size: 0.98rem; font-weight: 560; color: var(--ink);
}
.addnote:empty { min-height: 1.6rem; }

.factlist { display: grid; gap: 0.9rem; margin-top: 2rem; }
.factrow {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.75rem;
  font-size: 0.98rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line-soft);
}
.factrow dt { color: var(--ink-3); }
@media (max-width: 520px) { .factrow { grid-template-columns: 7.5rem minmax(0, 1fr); } }

/* --- forms + checkout ----------------------------------------------------- */

.page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--sp-4); }
.page-head h1 { font-size: var(--t-3); }
.page-head p { margin-top: 0.8rem; }

.cols {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
  padding-bottom: var(--band);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 940px) { .cols { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); } }
@media (min-width: 940px) { .col-side { position: sticky; top: 6rem; } }

/* The column, not the panel, owns the rhythm. A sibling margin could not span
   the form element sitting between two panels, so the gaps came out 0 / 20. */
.cols > div, .cols > aside { display: grid; gap: var(--sp-3); align-content: start; }
.cols > div > form { display: grid; gap: var(--sp-3); }
.cols > div > [data-cart-notices]:empty { display: none; }

.panel {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); padding: clamp(1.25rem, 3vw, 2rem);
}
.panel > h2 {
  font-size: var(--t-1); letter-spacing: -0.025em; margin-bottom: 1.25rem;
}
.panel-quiet { background: var(--paper-2); }

/* Flat grid: name, money and controls are all direct children, so the money
   holds row one at every width and the controls get the full row below. */
.lineitem {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 0.25rem 1rem;
  padding-block: 1.15rem; border-bottom: 1px solid var(--line-soft); align-items: start;
}
.lineitem:last-child { border-bottom: 0; padding-bottom: 0; }
.lineitem:first-child { padding-top: 0; }
.lineitem .thumb {
  grid-column: 1; grid-row: 1 / span 2;
  width: 62px; border-radius: 7px; overflow: hidden; background: var(--paper-2);
  aspect-ratio: 5 / 7;
}
.lineitem .thumb svg { width: 100%; height: 100%; }
.lineitem .li-main { grid-column: 2; grid-row: 1; min-width: 0; }
.lineitem h3 { font-size: 1rem; font-weight: 600; letter-spacing: -0.018em; }
.lineitem .li-sub { font-size: var(--t--1); color: var(--ink-3); margin-top: 0.2rem; }
.lineitem .li-right {
  grid-column: 3; grid-row: 1;
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-weight: 620;
}
.li-tools {
  grid-column: 2 / -1; grid-row: 2;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem; margin-top: 0.7rem;
}

@media (max-width: 560px) {
  .lineitem { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; }
  .lineitem .thumb { width: 52px; }
}
/* Height auto so the BUTTON is a true 44px, not 44 minus the container border. */
.stepper-sm { height: auto; }
.stepper-sm button { width: var(--control-h-sm); height: var(--control-h-sm); }
.stepper-sm button svg { width: 0.85rem; height: 0.85rem; }
.stepper-sm output { min-width: 2rem; font-size: 0.95rem; }
/* min-height buys the 44px target, negative margin keeps the visual position. */
.linkbtn {
  cursor: pointer; font-size: var(--t--1); color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center; min-height: var(--control-h-sm);
  padding-inline: 0.5rem; margin-inline: -0.5rem; margin-block: -0.4rem;
}
.linkbtn:hover { color: var(--clay-deep); }

.seg { display: grid; gap: 0.75rem; }
@media (min-width: 560px) { .seg { grid-template-columns: 1fr 1fr; } }
.seg label {
  position: relative; display: block; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.05rem 1.15rem; background: var(--paper);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.seg label:hover { border-color: var(--ink-3); }
/* One 2px border, padding compensated, so selection does not nudge the text. */
.seg label:has(input:checked) {
  border: 2px solid var(--ink); padding: calc(1.05rem - 1px) calc(1.15rem - 1px);
  background: var(--paper-2);
}
.seg label:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--clay-tint); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg .t { display: block; font-weight: 620; letter-spacing: -0.02em; }
.seg .d { display: block; font-size: var(--t--1); color: var(--ink-2); margin-top: 0.25rem; }

.fieldset { display: grid; gap: 1rem; border: 0; padding: 0; }
.row2 { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .row2 { grid-template-columns: 1fr 1fr; } }
.row3 { display: grid; gap: 1rem; grid-template-columns: 2fr 1fr 1.2fr; }
@media (max-width: 559px) { .row3 { grid-template-columns: minmax(0, 1fr); } }

/* align-content:start stops a hint row from stretching its sibling field. */
.lbl { display: grid; gap: 0.4rem; align-content: start; font-size: 0.93rem; font-weight: 560; }
.lbl .hint { font-weight: 400; color: var(--ink-2); font-size: var(--t--1); }
.inp {
  width: 100%; height: var(--control-h); padding: 0 1rem; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--paper); font-size: 1rem;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.inp:hover { border-color: var(--ink-3); }
.inp:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 4px var(--clay-tint); }
.inp[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-tint); }
.err { color: var(--danger-text); font-size: var(--t--1); font-weight: 560; }
.err:empty { display: none; }

.totals { display: grid; gap: 0.7rem; margin-top: 0.4rem; }
.trow {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.98rem; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.trow b { color: var(--ink); font-weight: 560; }
.trow.grand {
  border-top: 1px solid var(--line); margin-top: 0.5rem; padding-top: 0.9rem;
  font-size: 1.25rem; color: var(--ink); font-weight: 680; letter-spacing: -0.03em;
}
.freebar {
  margin-top: 0.9rem; padding: 0.75rem 0.9rem; border-radius: var(--r-sm);
  background: var(--paper-2); font-size: var(--t--1); color: var(--ink-2);
}

/* --- demo pay ------------------------------------------------------------- */

.demo-banner {
  position: sticky; top: 0; z-index: 70;
  background: var(--banner-bg); color: var(--banner-fg); text-align: center;
  padding: 0.7rem var(--gutter); font-size: 0.92rem; font-weight: 560;
  letter-spacing: 0.01em;
}
/* The banner owns the top slot on this page, so the masthead sits under it. */
.demo-banner ~ .masthead { top: 2.75rem; z-index: 60; }
.demo-banner b { color: oklch(0.86 0.13 84); font-weight: 700; letter-spacing: 0.08em; }
.paycard {
  max-width: 560px; margin-inline: auto;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--paper);
  box-shadow: var(--shadow-1);
}
.paycard h1 { font-size: var(--t-2); margin-bottom: 0.6rem; }

/* --- confirmed ------------------------------------------------------------ */

.confirm-head { padding-block: clamp(3rem, 8vw, 6rem) var(--sp-4); }
.confirm-head h1 { font-size: var(--t-4); letter-spacing: -0.045em; }
.orderno {
  display: inline-block; margin-top: 1.5rem; padding: 0.6rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper-2);
  font-variant-numeric: tabular-nums; font-weight: 640; letter-spacing: 0.02em;
}
.status-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.8rem; border-radius: var(--r-pill);
  background: var(--good-tint); color: var(--good-text);
  font-size: var(--t--1); font-weight: 640;
}
.status-pill.wait { background: var(--warn-tint); color: var(--warn-text); }
.status-pill.stop { background: var(--danger-tint); color: var(--danger-text); }

/* --- reveal on scroll ----------------------------------------------------- */

.rv { opacity: 0; transform: translateY(18px); }
.rv-on { opacity: 1; transform: none; transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.rv-d1 { transition-delay: 70ms; }
.rv-d2 { transition-delay: 140ms; }
.rv-d3 { transition-delay: 210ms; }

@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;
  }
  .rv { opacity: 1; transform: none; }
}

/* ---- upcoming shows -------------------------------------------------------
   A slim strip under the hero, and a plain list on the events hub. Both are
   filled by page-shows.js from assets/show-dates.js. */
.showbar { border-block: 1px solid var(--line); background: var(--paper-2); }
.showbar[hidden] { display: none; }
.showbar-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  max-width: 1240px;
  margin-inline: auto;
  padding: 0.85rem var(--gutter);
  text-decoration: none;
  color: inherit;
}
.showbar-in:hover .showbar-go { color: var(--clay); }
.showbar-lead {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
}
.showbar-date { font-weight: 650; }
.showbar-meta { color: var(--ink-3); font-size: 0.94rem; }
/* Pushes the call to action to the far end on wide screens, and lets it drop
   onto its own line on a phone instead of crushing the date. */
.showbar-go { margin-left: auto; font-weight: 600; font-size: 0.94rem; }
@media (max-width: 40rem) {
  .showbar-meta { width: 100%; }
  .showbar-go { margin-left: 0; }
}

.showlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.showrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.showrow:first-child { border-top: 1px solid var(--line); }
.showrow-date { font-weight: 650; min-width: 7.5rem; }
.showrow-hours { color: var(--ink-3); font-size: 0.94rem; margin-left: auto; }
@media (max-width: 40rem) { .showrow-hours { margin-left: 0; width: 100%; } }