@charset "UTF-8";
/* =========================================================================
   DOSED YPSILANTI — public stylesheet
   =========================================================================

   Direction: editorial specimen catalogue.

   The shop has no product photography, so type does the work an image
   normally would. Every product is a numbered catalogue entry with its dose
   weight set large in the display face, washed in its category's accent
   colour. Hairline rules, wide-tracked micro-labels and tabular figures do
   the rest. When real photography arrives, the image slot in each card
   activates and the type steps back — nothing needs rebuilding.

   Palette, fonts and gradient atmosphere carry over from the existing brand.
   Layouts do not.

   CONTENTS
     01  Fonts
     02  Tokens
     03  Reset and base
     04  Typography
     05  Layout primitives
     06  Header, ticker, navigation
     07  Footer
     08  Buttons
     09  Forms
     10  Badges, pills, rules
     11  Product card
     12  Menu page
     13  Product detail
     14  Home
     15  Education
     16  Accordion and FAQ
     17  Cart drawer
     18  Age gate
     19  Flash messages
     20  Prose (legal pages)
     21  Utilities
     22  Motion
   ====================================================================== */


/* =========================================================================
   01  FONTS — self-hosted. No third-party font request leaks a visitor's
       IP address to another company, which matters more than usual here.
   ====================================================================== */

@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash-display-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash-display-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash-display-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash-display-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-var.woff2") format("woff2-variations"),
       url("../fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}


/* =========================================================================
   02  TOKENS
   ====================================================================== */

:root {
  /* -- Surfaces ------------------------------------------------------- */
  --bg:            #070707;
  --surface:       #101524;   /* blue-black  */
  --surface-plum:  #171126;   /* plum-black  */
  --surface-raise: #1b2133;
  --surface-sunk:  #0b0d16;

  /* -- Ink ------------------------------------------------------------ */
  --text:      #f5f2ea;
  --text-soft: #c3c1ba;   /* nudged up from the old #b8b6b0 for AA on surfaces */
  --text-mute: #97948c;   /* 6.4:1 on --bg, 5.9:1 on --surface            */

  /* -- Accents -------------------------------------------------------- */
  --teal:     #19d3ce;
  --teal-dim: #0f8f8c;
  --amber:    #e78316;
  --gold:     #ffaa24;
  --plum:     #5a2e73;
  --magenta:  #8d245f;
  --magenta-lift: #d1447f;   /* the raw magenta is too dark for text      */
  --green:    #3de084;
  --red:      #ff6b6b;

  /* -- Lines ----------------------------------------------------------
     --line and friends are decorative: panel edges, hairline dividers.
     --line-field is for anything where the border IS the control — inputs,
     selects, the variant picker. WCAG 1.4.11 wants 3:1 for those against
     both the field fill and the page, which a 10% white does not reach.
     At 38% it measures ~3.5:1, so form controls use it and nothing else
     gets heavier than it needs to be. */
  --line:        rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .18);
  --line-hair:   rgba(255, 255, 255, .06);
  --line-field:  rgba(255, 255, 255, .38);

  /* -- Radii ---------------------------------------------------------- */
  --r-xs:   8px;
  --r-sm:  12px;
  --r-md:  18px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-pill: 999px;

  /* -- Shadow --------------------------------------------------------- */
  --shadow-soft:  0 20px 60px rgba(0, 0, 0, .35);
  --shadow-lift:  0 28px 80px rgba(0, 0, 0, .5);
  --shadow-amber: 0 16px 40px rgba(231, 131, 22, .18);
  --shadow-teal:  0 16px 40px rgba(25, 211, 206, .14);

  /* -- Type ----------------------------------------------------------- */
  --font-display: "Clash Display", "Hanken Grotesk", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--2: clamp(.69rem, .67rem + .10vw, .75rem);
  --step--1: clamp(.82rem, .79rem + .14vw, .90rem);
  --step-0:  clamp(.97rem, .94rem + .16vw, 1.06rem);
  --step-1:  clamp(1.17rem, 1.10rem + .32vw, 1.38rem);
  --step-2:  clamp(1.40rem, 1.28rem + .58vw, 1.80rem);
  --step-3:  clamp(1.69rem, 1.48rem + 1.00vw, 2.34rem);
  --step-4:  clamp(2.03rem, 1.69rem + 1.65vw, 3.05rem);
  --step-5:  clamp(2.44rem, 1.90rem + 2.62vw, 3.97rem);
  --step-6:  clamp(2.93rem, 2.10rem + 4.03vw, 5.16rem);

  /* -- Space ---------------------------------------------------------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  /* -- Frame ---------------------------------------------------------- */
  --maxw:      1280px;
  --maxw-text: 46rem;
  --gutter:    clamp(1.15rem, .6rem + 2.4vw, 2.5rem);
  --header-h:  72px;
  --ticker-h:  30px;

  /* -- Motion --------------------------------------------------------- */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur-fast:  .16s;
  --dur:       .28s;
  --dur-slow:  .55s;

  color-scheme: dark;
}

/* Category accents. Each product card and category chip picks one up, which
   is what gives a photograph-free grid its variety. */
.accent-teal    { --accent: var(--teal);     --accent-ink: #0a1a1a; --accent-glow: 25,211,206; }
.accent-amber   { --accent: var(--amber);    --accent-ink: #1a0f02; --accent-glow: 231,131,22; }
.accent-gold    { --accent: var(--gold);     --accent-ink: #1a1200; --accent-glow: 255,170,36; }
.accent-plum    { --accent: #a06bd0;         --accent-ink: #150a1c; --accent-glow: 90,46,115;  }
.accent-magenta { --accent: var(--magenta-lift); --accent-ink: #1c0713; --accent-glow: 141,36,95; }
.accent-green   { --accent: var(--green);    --accent-ink: #04180d; --accent-glow: 61,224,132; }


/* =========================================================================
   03  RESET AND BASE
   ====================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--ticker-h) + 1rem);
}

html { overflow-x: hidden; }   /* last line of defence against sideways scroll */

body {
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* The brand atmosphere: teal top-left, plum top-right, over a vertical
   black → blue-black → black wash. Fixed so it does not scroll away. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(70% 55% at -6% -8%, rgba(25, 211, 206, .26), transparent 60%),
    radial-gradient(64% 52% at 106% -6%, rgba(90, 46, 115, .30), transparent 62%),
    radial-gradient(90% 60% at 50% 108%, rgba(141, 36, 95, .16), transparent 66%),
    linear-gradient(180deg, var(--bg) 0%, var(--surface) 52%, var(--bg) 100%);
}

/* Film grain. Stops the gradients reading as a stock template. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .30;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

img, svg, video { display: block; max-width: 100%; height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .22em; }
a:hover { text-decoration-color: currentColor; }

ul, ol { padding: 0; list-style: none; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

::selection { background: var(--teal); color: #04201f; }

/* One focus style everywhere, and it is always visible. */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100%;
  z-index: 200;
  padding: .7rem 1.2rem;
  background: var(--amber);
  color: #0b0b0d;
  font-weight: 600;
  border-radius: var(--r-pill);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }


/* =========================================================================
   04  TYPOGRAPHY
   ====================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.022em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); letter-spacing: -.015em; }
h4 { font-size: var(--step-1); letter-spacing: -.01em; }

p { text-wrap: pretty; }

/* Wide-tracked micro-label. Used above almost every section on the site. */
.eyebrow {
  display: inline-block;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--teal);
}
.eyebrow-mute { color: var(--text-mute); }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 40ch;
}

.dim   { color: var(--text-mute); }
.soft  { color: var(--text-soft); }

/* Prices and weights line up in columns because the figures are tabular. */
.numeric { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }


/* =========================================================================
   05  LAYOUT PRIMITIVES
   ====================================================================== */

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell-text { max-width: calc(var(--maxw-text) + var(--gutter) * 2); }

.section      { padding-block: clamp(3.5rem, 2rem + 7vw, 7rem); }
.section-tight{ padding-block: clamp(2.25rem, 1.5rem + 4vw, 4rem); }

/* A section heading with a hairline rule running to the right edge. */
.rule-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.rule-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

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

.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

.grid-auto {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
}


/* =========================================================================
   06  HEADER, TICKER, NAVIGATION
   ====================================================================== */

.ticker {
  position: relative;
  z-index: 60;
  height: var(--ticker-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(25,211,206,.14), rgba(90,46,115,.16), rgba(25,211,206,.14));
  border-bottom: 1px solid var(--line-hair);
  font-size: var(--step--2);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-soft);
  user-select: none;
}
.ticker__track {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  padding-left: 3rem;
  animation: ticker-slide 38s linear infinite;
}
.ticker__track span { display: inline-flex; align-items: center; gap: 3rem; }
.ticker__track span::after { content: "◆"; color: var(--teal); font-size: .6em; letter-spacing: 0; }

@keyframes ticker-slide { to { transform: translateX(-50%); } }

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line-hair);
  transition: border-color var(--dur) var(--ease);
}
.header--scrolled { border-bottom-color: var(--line); box-shadow: 0 12px 40px rgba(0,0,0,.4); }

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
.brand img { width: 38px; height: 38px; border-radius: 10px; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
}
.brand__sub {
  display: block;
  font-size: .58rem;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: .22rem;
}

.nav { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.nav__link {
  position: relative;
  padding: .5rem .85rem;
  border-radius: var(--r-pill);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.nav__link:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav__link[aria-current="page"] { color: var(--text); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .85rem; right: .85rem; bottom: .18rem;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
}

.header__actions { display: flex; align-items: center; gap: var(--sp-2); }

.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.icon-btn:hover { border-color: var(--line-strong); background: rgba(255,255,255,.05); }

.cart-count {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 20px; height: 20px;
  display: grid; place-items: center;
  padding-inline: 5px;
  border-radius: var(--r-pill);
  background: var(--amber);
  color: #140c02;
  font-size: .68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 2px solid var(--bg);
}
.cart-count[hidden] { display: none; }

.nav-toggle { display: none; }

/* -- Mobile ---------------------------------------------------------- */
@media (max-width: 62rem) {
  .nav-toggle { display: inline-grid; }
  .nav {
    position: fixed;
    inset: calc(var(--header-h) + var(--ticker-h)) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--sp-4) var(--gutter) var(--sp-6);
    background: color-mix(in srgb, var(--bg) 97%, transparent);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
  .nav__link {
    padding: .9rem .2rem;
    border-radius: 0;
    border-bottom: 1px solid var(--line-hair);
    font-size: var(--step-0);
  }
  .nav__link[aria-current="page"]::after { left: .2rem; right: auto; width: 22px; bottom: .55rem; }
}


/* =========================================================================
   07  FOOTER
   ====================================================================== */

.footer {
  margin-top: var(--sp-9);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.45));
}
.footer__top {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(9rem, 1fr));
  padding-block: var(--sp-8) var(--sp-7);
}
.footer__address {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.3;
  letter-spacing: -.01em;
}
.footer__hours { color: var(--teal); font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; margin-top: var(--sp-2); }
.footer__tagline { color: var(--text-mute); margin-top: var(--sp-4); max-width: 26ch; }

.footer__col h4 {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: var(--sp-3);
}
.footer__col li + li { margin-top: .55rem; }
.footer__col a { font-size: var(--step--1); color: var(--text-soft); text-decoration: none; }
.footer__col a:hover { color: var(--text); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-5);
  border-top: 1px solid var(--line-hair);
  font-size: var(--step--2);
  color: var(--text-mute);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer__legal a { text-decoration: none; }
.footer__legal a:hover { color: var(--text-soft); }


/* =========================================================================
   08  BUTTONS
   ====================================================================== */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .78rem 1.5rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { --btn-bg: var(--amber); --btn-fg: #140c02; --btn-bd: transparent; }
.btn--primary:hover { --btn-bg: var(--gold); box-shadow: var(--shadow-amber); }

.btn--teal { --btn-bg: var(--teal); --btn-fg: #04201f; --btn-bd: transparent; }
.btn--teal:hover { box-shadow: var(--shadow-teal); }

.btn--ghost:hover { background: rgba(255,255,255,.06); border-color: var(--text-mute); }

.btn--quiet { --btn-bd: transparent; color: var(--text-soft); padding-inline: .8rem; }
.btn--quiet:hover { color: var(--text); background: rgba(255,255,255,.05); }

.btn--danger { --btn-bd: rgba(255,107,107,.4); color: #ffb4b4; }
.btn--danger:hover { background: rgba(255,107,107,.12); border-color: var(--red); }

.btn--sm    { padding: .5rem 1rem; font-size: var(--step--2); }
.btn--lg    { padding: .95rem 1.9rem; font-size: var(--step-0); }
.btn--block { display: flex; width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .42;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Text link with an arrow that steps forward on hover. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--teal);
  text-decoration: none;
}
.link-arrow svg { transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }


/* =========================================================================
   09  FORMS
   ====================================================================== */

.field { display: block; margin-bottom: var(--sp-5); }

.label {
  display: block;
  margin-bottom: .45rem;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.label .req { color: var(--amber); margin-left: .2rem; }

.input, .select, .textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--line-field);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .34);
  color: var(--text);
  font-size: var(--step-0);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-mute); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: transparent;
  background: rgba(0, 0, 0, .5);
}
.textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }

.select {
  appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2397948c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.field--error .input,
.field--error .select,
.field--error .textarea { border-color: rgba(255,107,107,.6); background: rgba(255,107,107,.05); }

.field__error { display: block; margin-top: .4rem; font-size: var(--step--1); color: #ffb4b4; }
.field__hint  { display: block; margin-top: .4rem; font-size: var(--step--1); color: var(--text-mute); }

/* Checkbox / radio ---------------------------------------------------- */
.check {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  cursor: pointer;
  font-size: var(--step--1);
  color: var(--text-soft);
  line-height: 1.55;
}
.check input { width: 1.1rem; height: 1.1rem; margin-top: .18rem; accent-color: var(--teal); flex-shrink: 0; cursor: pointer; }
.check + .check { margin-top: var(--sp-3); }
.check strong { color: var(--text); font-weight: 600; display: block; }

/* Segmented option group — the variant picker and radio sets both use it. */
.options { display: flex; flex-wrap: wrap; gap: .55rem; }
.option { position: relative; }
.option input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.option__face {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .6rem 1.05rem;
  border: 1px solid var(--line-field);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.03);
  font-size: var(--step--1);
  font-weight: 500;
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.option__price { font-size: var(--step--2); color: var(--text-mute); font-variant-numeric: tabular-nums; }
.option input:hover + .option__face { border-color: var(--line-strong); background: rgba(255,255,255,.06); }
.option input:focus-visible + .option__face { outline: 2px solid var(--teal); outline-offset: 2px; }
.option input:checked + .option__face {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 15%, transparent);
  color: var(--text);
}
.option input:checked + .option__face .option__price { color: var(--teal); }
.option input:disabled + .option__face { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

/* Quantity stepper ---------------------------------------------------- */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-field); border-radius: var(--r-pill); overflow: hidden; }
.qty button { width: 2.4rem; height: 2.6rem; display: grid; place-items: center; color: var(--text-soft); transition: background-color var(--dur-fast) var(--ease); }
.qty button:hover:not(:disabled) { background: rgba(255,255,255,.07); color: var(--text); }
.qty button:disabled { opacity: .3; cursor: not-allowed; }
.qty input {
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  background: none;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }


/* =========================================================================
   10  BADGES, PILLS, RULES
   ====================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .7rem;
  border-radius: var(--r-pill);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.badge--featured { background: var(--amber); color: #140c02; }
.badge--sold     { background: rgba(255,255,255,.09); color: var(--text-mute); border: 1px solid var(--line); }
.badge--stock    { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.badge--accent   { background: color-mix(in srgb, var(--accent, var(--teal)) 16%, transparent); color: var(--accent, var(--teal)); }
.badge--quiet    { background: rgba(255,255,255,.06); color: var(--text-soft); }

/* Order status pills */
.status { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: var(--r-pill);
          font-size: var(--step--2); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--pending   { background: rgba(255,170,36,.14);  color: var(--gold); }
.status--confirmed { background: rgba(25,211,206,.14);  color: var(--teal); }
.status--ready     { background: rgba(61,224,132,.16);  color: var(--green); }
.status--picked_up { background: rgba(255,255,255,.08); color: var(--text-soft); }
.status--cancelled { background: rgba(255,107,107,.13); color: #ff9b9b; }
.status--expired   { background: rgba(255,255,255,.06); color: var(--text-mute); }

/* Key/value rows on product and order pages. */
.spec { border-top: 1px solid var(--line-hair); }
.spec__row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: .8rem 0; border-bottom: 1px solid var(--line-hair); }
.spec__key { font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); flex-shrink: 0; }
.spec__val { text-align: right; font-size: var(--step--1); color: var(--text-soft); }

/* Callout — the ID notice, cautions, disclaimers. */
.callout {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--r-sm);
  background: rgba(231,131,22,.06);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-soft);
}
.callout strong { color: var(--text); }
.callout--teal  { border-left-color: var(--teal); background: rgba(25,211,206,.06); }
.callout--red   { border-left-color: var(--red);  background: rgba(255,107,107,.07); }
.callout__icon  { flex-shrink: 0; color: var(--amber); margin-top: .18rem; }
.callout--teal .callout__icon { color: var(--teal); }
.callout--red  .callout__icon { color: var(--red); }


/* =========================================================================
   11  PRODUCT CARD — the signature component
   ====================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-lift); }
.card:focus-within { border-color: var(--accent, var(--teal)); }

/* The accent wash. This is what replaces photography. */
/* Square, because product packaging is portrait or square far more often
   than it is landscape. A wide box plus object-fit:cover chopped the top and
   bottom off every bag and carton that got uploaded. */
.card__art {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(.6rem, 4%, 1.25rem);
  background:
    radial-gradient(120% 110% at 22% 8%, rgba(var(--accent-glow, 25,211,206), .34), transparent 58%),
    radial-gradient(100% 90% at 88% 96%, rgba(var(--accent-glow, 25,211,206), .16), transparent 62%),
    linear-gradient(150deg, var(--surface), var(--surface-sunk));
  border-bottom: 1px solid var(--line-hair);
}
/* Two rules, both deliberate:
   - contain, never cover, so the whole product is visible;
   - max-* with auto width/height, so an image is only ever scaled DOWN.
   Vendor photos arrive small (some barely 170px wide). Stretching one to
   fill the box is what made uploads look soft — small and sharp beats big
   and blurry, and the admin flags anything under the recommended size. */
/* Absolutely positioned, with all four offsets at 0 and auto margins.
   For a replaced element that resolves to "intrinsic size, capped to the
   box, centred in it" — which is what we want, and it works regardless of
   how the box got its height.

   The obvious version (max-height: 100% in normal flow) silently fails
   here: .card__art is a column flex item whose height comes from
   aspect-ratio, and a percentage height against that is indefinite, so the
   cap was ignored and a 425px-tall photo overflowed a 281px box and got
   clipped. The product page looked fine only because its box is not a flex
   item. Absolute positioning gives a definite containing block, so the
   percentages resolve properly in both places. */
.card__art img {
  position: absolute;
  z-index: 0;              /* under the index and the badges */
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: calc(100% - 1.6rem);
  max-height: calc(100% - 1.6rem);
  object-fit: contain;
}

/* Dose weight, set large. The most useful number on the card. */
.card__weight {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 1.6rem + 4vw, 3.9rem);
  line-height: 1;
  letter-spacing: -.045em;
  color: color-mix(in srgb, var(--accent, var(--teal)) 82%, white);
  text-shadow: 0 0 44px rgba(var(--accent-glow, 25,211,206), .38);
  font-variant-numeric: tabular-nums;
}
.card__weight small { font-size: .42em; letter-spacing: .04em; opacity: .8; margin-left: .06em; }
.card__weight-sub {
  display: block;
  margin-top: .5rem;
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
  text-align: center;
  text-shadow: none;
}

/* Catalogue index, top-left. Ties the grid to the numbered dose tiers. */
/* The index and the badges sit over the photo, so they need a z-index: the
   image is absolutely positioned too, and absolutely positioned siblings
   with z-index:auto paint in DOM order — the image comes last in the markup
   and was covering both.

   pointer-events:none matters just as much. Raising them above the title's
   full-card click overlay would otherwise make the badge a dead spot, which
   is exactly the bug the Reserve pill had. */
.card__index {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  top: .9rem; left: 1rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: .1em;
  color: var(--text-mute);
  opacity: .75;
  /* Readable whether it lands on the gradient or on a pale photo. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}

.card__flags {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  top: .8rem; right: .85rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: flex-end;
}

.card__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-5); gap: .55rem; }

.card__cat {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent, var(--teal));
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.15;
}
.card__title a { text-decoration: none; }
/* Whole card is the click target, but only the title is in the tab order. */
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.card__desc {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text-mute);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-hair);
}
.card__price {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.card__price .from { font-family: var(--font-body); font-size: var(--step--2); font-weight: 500;
                     letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); margin-right: .3rem; }

/* Genuinely interactive controls inside a card must sit above the title's
   full-card overlay so they can be clicked. */
.card__foot form,
.card__foot a.btn,
.card__foot button { position: relative; z-index: 2; }

/* The "Reserve" / "Notify me" pill is decoration — the whole card is the
   link. It must not intercept the click, or the one spot everybody aims for
   becomes the one spot that does nothing. */
.card__cta { pointer-events: none; }

.card--sold .card__art { filter: saturate(.35) brightness(.72); }
.card--sold .card__title, .card--sold .card__price { color: var(--text-soft); }

/* List view on the menu page. */
.card--row { flex-direction: row; align-items: stretch; }
/* Fixed square rather than aspect-ratio:auto — auto let the panel stretch to
   the full height of the row, which cropped the photo to a narrow strip. */
.card--row .card__art {
  aspect-ratio: 1 / 1;
  width: clamp(7rem, 22%, 11rem);
  height: auto;
  align-self: center;
  flex-shrink: 0;
  border-bottom: 0;
  border-right: 1px solid var(--line-hair);
}
.card--row .card__weight { font-size: clamp(1.6rem, 1rem + 2.4vw, 2.4rem); }
.card--row .card__weight-sub { display: none; }
.card--row .card__desc { -webkit-line-clamp: 3; }
@media (max-width: 34rem) {
  .card--row { flex-direction: column; }
  .card--row .card__art { width: 100%; aspect-ratio: 4 / 3; border-right: 0; border-bottom: 1px solid var(--line-hair); }
}


/* =========================================================================
   12  MENU PAGE — sticky filter rail beside the grid
   ====================================================================== */

.menu-layout {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 15rem minmax(0, 1fr);
  align-items: start;
}
/* Grid items default to min-width:auto, so they refuse to shrink below their
   content and shove the whole page sideways. Every grid child in this file
   that contains a nested grid needs this. */
.menu-layout > * { min-width: 0; }

@media (max-width: 60rem) {
  .menu-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
}

.rail { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
@media (max-width: 60rem) {
  .rail { position: static; }
  .rail__group + .rail__group { margin-top: var(--sp-4); }
}

.rail__group + .rail__group { margin-top: var(--sp-6); }
.rail__title {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding-bottom: .6rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--line-hair);
}
.rail__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: .5rem .6rem;
  border-radius: var(--r-xs);
  font-size: var(--step--1);
  color: var(--text-soft);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rail__link:hover { background: rgba(255,255,255,.05); color: var(--text); }
.rail__link[aria-current="true"] { background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--text); font-weight: 600; }
.rail__count { font-size: var(--step--2); color: var(--text-mute); font-variant-numeric: tabular-nums; }
.rail__link[aria-current="true"] .rail__count { color: var(--teal); }

/* Mobile: horizontal scroll strip instead of a rail. */
@media (max-width: 60rem) {
  .rail__scroll { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: none; }
  .rail__scroll::-webkit-scrollbar { display: none; }
  .rail__scroll .rail__link { flex-shrink: 0; border: 1px solid var(--line); border-radius: var(--r-pill); padding: .45rem 1rem; }
}

.menu-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-5);
  border-bottom: 1px solid var(--line);
}
.menu-toolbar__count { font-size: var(--step--1); color: var(--text-mute); font-variant-numeric: tabular-nums; }

.search {
  position: relative;
  flex: 1 1 14rem;
  max-width: 22rem;
}
.search .input { padding-left: 2.6rem; }
.search svg { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--text-mute); pointer-events: none; }

.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px; }
.view-toggle a {
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: var(--r-pill);
  color: var(--text-mute);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.view-toggle a:hover { color: var(--text); }
.view-toggle a[aria-current="true"] { background: rgba(255,255,255,.10); color: var(--text); }

.empty {
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--text-mute);
}
.empty h3 { font-size: var(--step-2); color: var(--text); margin-bottom: var(--sp-2); }


/* =========================================================================
   13  PRODUCT DETAIL
   ====================================================================== */

.pd {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: start;
}
.pd > * { min-width: 0; }
@media (max-width: 60rem) { .pd { grid-template-columns: minmax(0, 1fr); } }

.pd__art {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4%, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(110% 100% at 20% 6%, rgba(var(--accent-glow, 25,211,206), .32), transparent 58%),
    radial-gradient(100% 90% at 92% 98%, rgba(var(--accent-glow, 25,211,206), .16), transparent 62%),
    linear-gradient(150deg, var(--surface), var(--surface-sunk));
}
/* Same pattern as the card, for the same reason — and never blown up past
   native size, since this box is ~600px wide and most supplier photos are
   smaller than that. */
.pd__art img {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: calc(100% - 3rem);
  max-height: calc(100% - 3rem);
  object-fit: contain;
}
.pd__art .card__weight { font-size: clamp(3.4rem, 2rem + 6vw, 6rem); }

/* Sticky reserve panel — never scrolls out of reach. */
.pd__panel { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
@media (max-width: 60rem) { .pd__panel { position: static; } }

.pd__cat { display: flex; align-items: center; gap: .6rem; margin-bottom: var(--sp-3); }
.pd__title { font-size: var(--step-4); margin-bottom: var(--sp-3); }
.pd__desc { color: var(--text-soft); font-size: var(--step-0); max-width: 44ch; }

.pd__price {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: var(--sp-5) 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.pd__price .unit { font-family: var(--font-body); font-size: var(--step--1); font-weight: 500;
                   letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }

.pd__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin: var(--sp-5) 0; }
.pd__actions .btn--primary { flex: 1 1 12rem; }

.pd__tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: var(--sp-2); }
.tag {
  padding: .3rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--step--2);
  color: var(--text-soft);
}

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--step--2);
              letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); margin-bottom: var(--sp-5); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--text-soft); }
.breadcrumb span[aria-hidden] { opacity: .5; }


/* =========================================================================
   14  HOME
   ====================================================================== */

.hero { position: relative; padding-block: clamp(4rem, 2rem + 10vw, 9rem) clamp(3rem, 2rem + 5vw, 6rem); }
.hero__eyebrow { margin-bottom: var(--sp-4); }
.hero__title { font-size: var(--step-6); font-weight: 600; letter-spacing: -.035em; max-width: 15ch; }
.hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--teal), var(--gold) 62%, var(--magenta-lift));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub { margin-top: var(--sp-5); max-width: 44ch; font-size: var(--step-1); color: var(--text-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

.hero__motto {
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: -.01em;
  color: var(--text-mute);
}

/* Numbered "how it works" steps. */
.steps { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); counter-reset: step; }
.step { position: relative; padding-top: var(--sp-5); border-top: 2px solid var(--line-strong); transition: border-color var(--dur) var(--ease); }
.step:hover { border-top-color: var(--teal); }
.step__n {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: .2em;
  color: var(--teal);
  margin-bottom: .6rem;
}
.step__t { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }

/* Explore tiles. */
.tiles { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.tile {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tile:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
.tile h3 { font-size: var(--step-1); }
.tile p { font-size: var(--step--1); color: var(--text-mute); }
.tile .link-arrow { margin-top: auto; padding-top: var(--sp-4); }

/* Fact grid used on the About page ("Where / What / How / Who / When / Why"). */
.facts { display: grid; gap: 1px; background: var(--line-hair); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
         grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.fact { padding: var(--sp-6) var(--sp-5); background: var(--bg); }
.fact__k { font-size: var(--step--2); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--teal); margin-bottom: var(--sp-3); }
.fact__v { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; letter-spacing: -.012em; line-height: 1.3; }


/* =========================================================================
   15  EDUCATION — dose tiers
   ====================================================================== */

.tier {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 52rem) { .tier { grid-template-columns: 1fr; gap: var(--sp-4); } }

.tier__head { position: sticky; top: calc(var(--header-h) + var(--sp-4)); align-self: start; }
@media (max-width: 52rem) { .tier__head { position: static; } }

.tier__n { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .2em; color: var(--accent, var(--teal)); }
.tier__name { font-size: var(--step-2); margin-top: .4rem; }
.tier__range {
  display: block;
  margin-top: .5rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: color-mix(in srgb, var(--accent, var(--teal)) 85%, white);
}
.tier__dur { font-size: var(--step--1); color: var(--text-mute); letter-spacing: .06em; }
.tier__summary { font-size: var(--step-1); color: var(--text-soft); margin-bottom: var(--sp-5); max-width: 48ch; }

.tier__cols { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.tier__col h4 { font-family: var(--font-body); font-size: var(--step--2); font-weight: 600; letter-spacing: .16em;
                text-transform: uppercase; color: var(--text-mute); margin-bottom: var(--sp-3); }
.tier__col li { position: relative; padding-left: 1.1rem; font-size: var(--step--1); color: var(--text-soft); line-height: 1.5; }
.tier__col li + li { margin-top: .45rem; }
.tier__col li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%;
                        background: var(--accent, var(--teal)); opacity: .8; }


/* =========================================================================
   16  ACCORDION AND FAQ
   ====================================================================== */

.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -.01em;
  transition: color var(--dur-fast) var(--ease);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--teal); }
.accordion summary::after {
  content: "";
  flex-shrink: 0;
  width: 12px; height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
  opacity: .6;
}
.accordion details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); opacity: 1; }
.accordion__body { padding-bottom: var(--sp-5); color: var(--text-soft); max-width: 60ch; }


/* =========================================================================
   17  CART DRAWER
   ====================================================================== */

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.drawer-scrim[data-open="true"] { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 100;
  width: min(27rem, 100%);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--surface), var(--bg) 60%);
  border-left: 1px solid var(--line);
  box-shadow: -30px 0 80px rgba(0,0,0,.6);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
}
.drawer[data-open="true"] { transform: none; visibility: visible; }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5); border-bottom: 1px solid var(--line);
}
.drawer__head h2 { font-size: var(--step-2); }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-5); }
.drawer__foot { padding: var(--sp-5); border-top: 1px solid var(--line); background: rgba(0,0,0,.3); }

.drawer__empty { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--text-mute); }
.drawer__empty strong { display: block; color: var(--text); font-size: var(--step-1); font-family: var(--font-display); margin-bottom: var(--sp-2); }

.line-item { display: flex; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--line-hair); }
.line-item__art {
  flex-shrink: 0;
  width: 4.2rem; height: 4.2rem;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-hair);
  background: radial-gradient(120% 110% at 25% 10%, rgba(var(--accent-glow, 25,211,206), .3), transparent 60%), var(--surface);
  font-family: var(--font-display);
  font-size: .95rem; font-weight: 600;
  color: color-mix(in srgb, var(--accent, var(--teal)) 85%, white);
  font-variant-numeric: tabular-nums;
}
/* contain here too — a cropped thumbnail in the bag is how you end up
   staring at the middle of a mylar pouch with no idea which product it is. */
.line-item__art img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--r-sm); padding: 2px; }
.line-item__main { flex: 1; min-width: 0; }
.line-item__name { font-weight: 600; font-size: var(--step--1); line-height: 1.35; }
.line-item__name a { text-decoration: none; }
.line-item__var { font-size: var(--step--2); color: var(--text-mute); margin-top: .15rem; }
.line-item__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); }
.line-item__price { font-weight: 600; font-variant-numeric: tabular-nums; }

.total-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.total-row__k { font-size: var(--step--2); letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute); }
.total-row__v { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; font-variant-numeric: tabular-nums; }


/* =========================================================================
   18  AGE GATE
   ====================================================================== */

.agegate {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: rgba(4, 4, 6, .93);
  backdrop-filter: blur(10px);
}
.agegate__card {
  width: min(27rem, 100%);
  padding: clamp(1.75rem, 1rem + 3vw, 2.75rem);
  text-align: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, var(--surface), var(--surface-plum));
  box-shadow: var(--shadow-lift);
  animation: gate-in var(--dur-slow) var(--ease-out) both;
}
@keyframes gate-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }

.agegate__logo { width: 74px; height: 74px; margin: 0 auto var(--sp-5); border-radius: var(--r-md); }
.agegate__card h1 { font-size: var(--step-3); margin-bottom: var(--sp-3); }
.agegate__card p { color: var(--text-soft); font-size: var(--step--1); margin-bottom: var(--sp-6); }
.agegate__actions { display: grid; gap: var(--sp-3); }
.agegate__foot { margin-top: var(--sp-5); font-size: var(--step--2); color: var(--text-mute); }


/* =========================================================================
   19  FLASH MESSAGES
   ====================================================================== */

.flash-stack { position: fixed; top: calc(var(--header-h) + var(--ticker-h) + var(--sp-3)); right: var(--gutter);
               z-index: 120; display: grid; gap: var(--sp-2); width: min(24rem, calc(100vw - var(--gutter) * 2)); }

.flash {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
  font-size: var(--step--1);
  animation: flash-in var(--dur) var(--ease-out) both;
}
@keyframes flash-in { from { opacity: 0; transform: translateX(16px); } }

.flash--success { border-left: 3px solid var(--green); }
.flash--error   { border-left: 3px solid var(--red); }
.flash--info    { border-left: 3px solid var(--teal); }
.flash__close { margin-left: auto; color: var(--text-mute); flex-shrink: 0; padding: 0 .2rem; }
.flash__close:hover { color: var(--text); }


/* =========================================================================
   20  PROSE — legal pages, long-form copy
   ====================================================================== */

.prose { max-width: var(--maxw-text); color: var(--text-soft); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { font-size: var(--step-2); color: var(--text); margin-top: var(--sp-7); }
.prose h3 { font-size: var(--step-1); color: var(--text); margin-top: var(--sp-6); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .45rem; }
.prose li::marker { color: var(--teal); }
.prose a { color: var(--teal); }
.prose strong { color: var(--text); }
.prose blockquote { border-left: 3px solid var(--teal); padding-left: var(--sp-4); color: var(--text-mute); font-style: italic; }
.prose code { font-family: var(--font-mono); font-size: .88em; background: rgba(0,0,0,.4); padding: .12rem .4rem; border-radius: 5px; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.prose th, .prose td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line-hair); }
.prose th { color: var(--text); font-weight: 600; }


/* =========================================================================
   21  UTILITIES
   ====================================================================== */

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

.center      { text-align: center; }
.center-x    { margin-inline: auto; }
.flow-gap    { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.push        { margin-left: auto; }
.full        { width: 100%; }
.no-wrap     { white-space: nowrap; }
[hidden]     { display: none !important; }

.divider { height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); border: 0; margin: var(--sp-6) 0; }

.panel {
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
}
.panel--sunk { background: rgba(0,0,0,.28); }


/* =========================================================================
   22  ACCOUNT AREA
   ====================================================================== */

/* -- Sign in / register / reset -------------------------------------- */
.auth {
  min-height: 62vh;
  display: grid;
  place-items: center;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem);
}
.auth__card {
  width: min(30rem, 100%);
  padding: clamp(1.75rem, 1rem + 3vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  box-shadow: var(--shadow-soft);
}
.auth__card--wide { width: min(38rem, 100%); }
.auth__head { margin-bottom: var(--sp-6); }
.auth__head h1 { font-size: var(--step-3); margin-top: .5rem; }
.auth__head p { color: var(--text-soft); font-size: var(--step--1); margin-top: var(--sp-3); }
.auth__foot {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-hair);
  font-size: var(--step--1);
  color: var(--text-mute);
  text-align: center;
}
.auth__foot a { color: var(--teal); font-weight: 600; text-decoration: none; }
.auth__foot a:hover { text-decoration: underline; }

.field-row { display: grid; gap: 0 var(--sp-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 34rem) { .field-row { grid-template-columns: 1fr; } }

/* -- Order progress timeline ----------------------------------------- */
.timeline { display: grid; gap: 0; margin: var(--sp-5) 0; }
.timeline__step { position: relative; display: flex; gap: var(--sp-4); padding-bottom: var(--sp-5); }
.timeline__step:last-child { padding-bottom: 0; }

.timeline__marker {
  position: relative;
  flex-shrink: 0;
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--bg);
  color: var(--bg);
  margin-top: .1rem;
}
/* The connecting rule between markers. */
.timeline__step:not(:last-child) .timeline__marker::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(var(--sp-5) + .3rem);
  background: var(--line-strong);
}
.timeline__step--done .timeline__marker { border-color: var(--green); background: var(--green); }
.timeline__step--done:not(:last-child) .timeline__marker::after { background: var(--green); }
.timeline__step--current .timeline__marker { border-color: var(--teal); background: var(--teal); box-shadow: 0 0 0 4px rgba(25,211,206,.18); }

.timeline__label { font-weight: 600; font-size: var(--step--1); line-height: 1.5; }
.timeline__step--pending .timeline__label { color: var(--text-mute); font-weight: 500; }
.timeline__at { display: block; font-size: var(--step--2); color: var(--text-mute); margin-top: .1rem; }

/* -- Reservation summary card ---------------------------------------- */
.order-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  overflow: hidden;
}
.order-card + .order-card { margin-top: var(--sp-4); }

.order-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-4);
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line-hair);
  background: rgba(0,0,0,.22);
}
.order-card__number {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.order-card__number a { text-decoration: none; }
.order-card__meta { font-size: var(--step--2); color: var(--text-mute); }
.order-card__body { padding: var(--sp-5); }

/* The order number, set large on the confirmation and detail screens —
   staff read this off a phone at the counter. */
.order-hero {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.order-lines { border-top: 1px solid var(--line-hair); }
.order-line {
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
  justify-content: space-between;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line-hair);
  font-size: var(--step--1);
}
.order-line__name { color: var(--text); }
.order-line__var  { color: var(--text-mute); font-size: var(--step--2); }
.order-line__qty  { color: var(--text-mute); font-variant-numeric: tabular-nums; }
.order-line__total{ font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* -- Small stat blocks ------------------------------------------------ */
.stats { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); }
.stat {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(0,0,0,.24);
}
.stat__k { font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.stat__v {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: .3rem;
}


/* =========================================================================
   23  MOTION
   ====================================================================== */

/* Staggered entrance for grids. Elements set --i on themselves. */
.reveal { animation: reveal .6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes reveal { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .ticker__track { animation: none; padding-left: 0; }
  .card:hover, .tile:hover, .btn:hover { transform: none; }
}