/* ============================================================================
   RaveH3 — theme.css
   The one stylesheet. Every page links exactly this file:

       <link rel="stylesheet" href="/assets/theme.css">

   Single theme: neon-on-black, painted explicitly. There is deliberately NO
   prefers-color-scheme block anywhere in this file — the site is dark, always,
   and every colour (including the body background) is stated outright so a
   host page, a UA default or an embedded context can never leak through.

   ── HOUSE RULES (please keep them) ─────────────────────────────────────────
   1. FLAT SPECIFICITY. Almost everything here is a single class at 0,1,0.
      An earlier version of this codebase lost an afternoon to a fight between
      element selectors and class selectors styling the same box. So: one hook
      per thing, classes not elements wherever a class is possible, and no
      descendant chain deeper than two steps.
   2. NO `.section`, NO `.cta`. Those two names were the collision. Page
      sections are `.sec`; the loud button is `.btn-primary`.
   3. `[hidden]` wins over everything (declared !important at the bottom of the
      reset). You can put `hidden` on a flex/grid box and it will hide.
   4. Mobile first. Verified to produce zero horizontal page scroll at 360px.
      Anything intrinsically wide (tables, code, long rows) goes inside
      `.table-wrap`, which scrolls itself.

   ── CLASS INVENTORY (the contract for page authors) ────────────────────────
   LAYOUT      .shell  .shell.tight  .sec  .sec-head  .sec-title  .sec-kicker
               .sec-note  .stack  .stack-lg  .row  .row-end  .spacer
               .grid-2  .grid-3  .table-wrap  .sr-only  .skip-link
   ATMOSPHERE  .splat .splat-a .splat-b .splat-c  .speck      (fixed, inert)
   NAV         .nav  .nav-inner  .brand  .brand-mark  .brand-text
               .nav-links  .nav-link  .nav-link.is-active
               .cart-pill  .cart-ico  .cart-count  .cart-count.is-empty
               (all of it is emitted by app.js renderNav() — you rarely hand-write it)
   MASTHEAD    .masthead  .masthead-logo  .eyebrow  h1  .tagline  .colophon
   SURFACES    .panel  .panel-flat  .subpanel  .empty  .divider
   BUTTONS     .btn  .btn-primary  .btn-ghost  .btn-danger
               .btn-sm  .btn-lg  .btn-block  [disabled]  .linkish
   FORMS       .field  .f (label)  .inp (input/textarea/select)  .hint
               .choice  .choice-card  .choice-name  .choice-hint
               .checkline  (checkbox + label on one line)
   PRODUCT     .grid-products  .pcard  .pcard-media  .pcard-body  .pcard-name
               .pcard-blurb  .pcard-foot  .pcard.is-soldout  .pcard.is-quiet
               .price  .price-row  .price-was  .price-note
               .badge  .badge-soldout  .badge-vote  .badge-open
               .tag  .tag-open  .tag-vote  .tag-quiet
   PRODUCT PG  .product  .product-side  .product-main  .product-title
   PREVIEWS    .preview  .preview.sz-sm  .preview.sz-lg  .preview-cap
               .tee-svg  .tee-logo  .patch-ring  .flag-mock  .flag-hoist
               .generic-mock  .ico  .ico-sm  .ico-lg   (emitted by previews.js;
               an .ico dropped straight into .pcard-media is auto-enlarged)
   QUANTITY    .row-list  .qrow  .qrow-name  .qrow-price  .qrow-amt
               .qrow-amt.has  .stepper  .line-total
   TABLES      .table  .table .amt  .table .tot-row  .table .subtle
   MESSAGES    .note  .note-warn  .note-err  .note-ok
               .banner  .banner-warn  .banner-err
               .toast-host  .toast  .toast.is-err  .toast.is-ok
   TYPE UTIL   .mono  .money  .muted  .tiny  .nowrap  .clamp-2
   STATE       .is-active  .is-empty  .is-soldout  .is-busy  .skel
   ============================================================================ */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root{
  --bg:#0a0a10;
  --panel:#14121f;
  --panel-2:#1b1830;
  --line:#2c2745;
  --ink:#f4f2ff;
  --muted:#a49ec4;
  --pink:#ff3ec8;
  --cyan:#2fd4f0;
  --yellow:#f5e027;
  --lime:#8aff3e;
  --violet:#8b5cf6;
  --grad:linear-gradient(100deg,#ff3ec8 5%,#f5e027 42%,#2fd4f0 72%,#8aff3e 100%);
  --display:"Avenir Next Condensed","Avenir Next","Futura","Trebuchet MS",system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,monospace;

  /* derived, so pages don't re-invent them */
  --accent:var(--pink);          /* per-card override, set inline from product.accent */
  --nav-h:58px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --shell-w:1080px;
  --shell-tight:760px;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  min-height:100vh;
  overflow-x:hidden;
}
img,svg,video{max-width:100%}
img{display:block;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px}
[hidden]{display:none !important}

/* ── Atmosphere: UV splatter + speck field. Fixed, inert, behind everything. ─ */
.splat{position:fixed;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0}
.splat-a{width:44vw;height:44vw;left:-14vw;top:-12vw;background:radial-gradient(circle,rgba(255,62,200,.20),transparent 65%)}
.splat-b{width:38vw;height:38vw;right:-12vw;top:22vh;background:radial-gradient(circle,rgba(47,212,240,.15),transparent 65%)}
.splat-c{width:34vw;height:34vw;left:6vw;bottom:-16vw;background:radial-gradient(circle,rgba(245,224,39,.10),transparent 65%)}
.speck{
  position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    radial-gradient(2px 2px at 12% 24%, rgba(255,62,200,.8), transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 12%, rgba(47,212,240,.8), transparent 100%),
    radial-gradient(2px 2px at 88% 66%, rgba(245,224,39,.7), transparent 100%),
    radial-gradient(1.5px 1.5px at 30% 82%, rgba(138,255,62,.7), transparent 100%),
    radial-gradient(2px 2px at 56% 40%, rgba(139,92,246,.7), transparent 100%),
    radial-gradient(1.5px 1.5px at 44% 8%,  rgba(255,62,200,.6), transparent 100%),
    radial-gradient(2px 2px at 68% 90%, rgba(47,212,240,.6), transparent 100%);
}

/* ── Shell ────────────────────────────────────────────────────────────────── */
.shell{position:relative;z-index:1;width:100%;max-width:var(--shell-w);margin:0 auto;padding:28px 16px 72px}
.shell.tight{max-width:var(--shell-tight)}
@media (min-width:560px){ .shell{padding:36px 20px 80px} }

/* ── Sticky nav ───────────────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:30;
  background:rgba(10,10,16,.86);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
/* Mobile first and genuinely tight: at 360px the wordmark, three section links
   and the cart pill have to coexist in 336px of usable width. Everything below
   is sized so they do, and only then relaxes upward. */
.nav-inner{
  max-width:var(--shell-w);margin:0 auto;
  min-height:var(--nav-h);
  display:flex;align-items:center;gap:6px;
  padding:8px 10px;
}
@media (min-width:420px){ .nav-inner{gap:10px;padding:8px 12px} }
@media (min-width:560px){ .nav-inner{gap:16px;padding:8px 20px} }

.brand{display:flex;align-items:center;gap:6px;flex:none;color:var(--ink);text-decoration:none}
.brand:hover{text-decoration:none}
.brand-mark{
  width:24px;height:24px;flex:none;border-radius:7px;object-fit:cover;
  background:#000;mix-blend-mode:screen;
}
.brand-text{
  font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:.92rem;letter-spacing:.02em;line-height:1;white-space:nowrap;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
@media (min-width:420px){
  .brand{gap:8px}
  .brand-mark{width:28px;height:28px}
  .brand-text{font-size:1.05rem}
}

.nav-links{
  display:flex;align-items:center;gap:4px;
  margin-left:auto;min-width:0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.nav-links::-webkit-scrollbar{display:none}
.nav-link{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;white-space:nowrap;
  padding:7px 6px;border-radius:8px;border:1px solid transparent;
}
.nav-link:hover{color:var(--ink);text-decoration:none}
.nav-link.is-active{color:var(--ink);border-color:var(--line);background:var(--panel-2)}
@media (min-width:420px){ .nav-link{font-size:.7rem;letter-spacing:.14em;padding:8px 8px} }
@media (min-width:560px){ .nav-link{font-size:.74rem;padding:8px 12px} }

.cart-pill{
  flex:none;display:inline-flex;align-items:center;gap:5px;
  padding:6px 9px;border-radius:99px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);
  text-decoration:none;line-height:1;
}
@media (min-width:420px){ .cart-pill{gap:7px;padding:7px 11px} }
.cart-pill:hover{border-color:var(--pink);text-decoration:none}
.cart-pill.is-active{border-color:var(--cyan)}
.cart-ico{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cart-count{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.76rem;font-weight:700;
  min-width:1.9em;padding:2px 6px;border-radius:99px;text-align:center;
  background:var(--pink);color:#0b0410;
}
.cart-count.is-empty{background:var(--panel-2);color:var(--muted)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--panel);color:var(--ink);border:1px solid var(--cyan);
  padding:10px 14px;border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0}

/* ── Masthead (home hero) ─────────────────────────────────────────────────── */
.masthead{display:flex;align-items:center;gap:18px;margin-bottom:28px;flex-wrap:wrap}
.masthead-logo{
  width:104px;height:auto;border-radius:18px;flex:none;background:#000;
  box-shadow:0 0 0 1px var(--line),0 0 34px rgba(255,62,200,.35),0 0 70px rgba(47,212,240,.18);
}
@media (min-width:560px){ .masthead{gap:26px;margin-bottom:34px} .masthead-logo{width:150px} }
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:6px;
}
h1{
  font-family:var(--display);font-weight:900;font-style:italic;
  font-size:clamp(2.1rem,7vw,3.9rem);line-height:.95;letter-spacing:.01em;
  text-transform:uppercase;text-wrap:balance;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,62,200,.35));
}
h2,h3,h4{font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:.015em;text-wrap:balance}
h2{font-size:clamp(1.45rem,4.5vw,2rem);line-height:1.05}
h3{font-size:1.2rem;line-height:1.15}
h4{font-size:1rem;line-height:1.2}
.tagline{color:var(--muted);margin-top:10px;max-width:52ch}
.colophon{
  margin-top:40px;text-align:center;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.colophon span{color:var(--pink)}
.colophon a{color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--muted)}
.colophon a:hover{color:var(--ink);border-bottom-color:var(--ink);text-decoration:none}

/* ── Page sections (SHOP / VOTE / SUGGEST). NOT `.section`. ───────────────── */
.sec{margin:0 0 44px;scroll-margin-top:calc(var(--nav-h) + 14px)}
.sec:last-child{margin-bottom:0}
.sec-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.sec-title{
  font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.5rem,5vw,2.15rem);line-height:1;letter-spacing:.015em;margin:0;
}
.sec-kicker{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);display:block;margin-bottom:6px;
}
.sec-note{color:var(--muted);max-width:64ch;margin:8px 0 18px}

/* ── Generic layout helpers ───────────────────────────────────────────────── */
.stack{display:grid;gap:14px}
.stack-lg{display:grid;gap:26px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.row-end{justify-content:flex-end}
.spacer{margin-left:auto}
.grid-2{display:grid;grid-template-columns:1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:560px){ .grid-2{grid-template-columns:1fr 1fr;gap:16px} }
@media (min-width:760px){ .grid-3{grid-template-columns:repeat(3,1fr);gap:16px} }
.grid-2 > *,.grid-3 > *{min-width:0}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.divider{height:1px;background:var(--line);border:0;margin:22px 0}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ── Surfaces ─────────────────────────────────────────────────────────────── */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 16px}
@media (min-width:560px){ .panel{padding:26px 24px} }
.panel-flat{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:16px}
.subpanel{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
.empty{
  background:var(--panel);border:1px dashed var(--line);border-radius:var(--r-lg);
  padding:34px 20px;text-align:center;color:var(--muted);
}
.empty h3{color:var(--ink);margin-bottom:8px}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;
  border-radius:12px;padding:12px 20px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);
  transition:border-color .15s,filter .15s,transform .15s;
}
.btn:hover{border-color:var(--muted);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{border:0;background:var(--grad);color:#0b0410;box-shadow:0 0 24px rgba(255,62,200,.32)}
.btn-primary:hover{filter:brightness(1.1)}
.btn-ghost{background:transparent}
.btn-danger{background:transparent;border-color:rgba(255,62,200,.45);color:#ffb8e8}
.btn-danger:hover{border-color:var(--pink)}
.btn-sm{padding:8px 13px;border-radius:10px;font-size:.86rem}
.btn-lg{padding:15px 26px;font-size:1.05rem}
.btn-block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;filter:none;box-shadow:none}
.btn.is-busy{cursor:progress;opacity:.7}
.linkish{
  background:none;border:0;padding:0;color:var(--cyan);cursor:pointer;
  font:inherit;text-decoration:underline;text-underline-offset:2px;
}

/* ── Forms ────────────────────────────────────────────────────────────────── */
.field{margin-bottom:14px}
.f{display:block;font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:6px}
.f b{color:var(--pink)}
.inp,
input[type=text],input[type=email],input[type=tel],input[type=search],
input[type=number],input[type=url],textarea,select{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--ink);padding:11px 13px;font:inherit;
}
textarea{min-height:110px;resize:vertical}
/* Password fields get an eye button (passwordToggles() in app.js). */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:46px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.pw-eye:hover{color:var(--ink);background:var(--panel-2)}
.pw-eye[aria-pressed="true"]{color:var(--cyan)}
select{appearance:none;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 12px) 52%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.inp:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--cyan);outline-offset:1px;border-color:var(--cyan);
}
.inp::placeholder,input::placeholder,textarea::placeholder{color:#6f688f}
.inp[aria-invalid="true"],input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--pink)}
.hint{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:5px}
.checkline{display:flex;align-items:flex-start;gap:10px;color:var(--muted);font-size:.9rem}
.checkline input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--pink)}

/* radio/checkbox "cards" (delivery method, payment method, vote toggles) */
.choice{position:relative;display:block;cursor:pointer}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice-card{
  display:block;height:100%;background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:14px 16px;transition:border-color .15s,box-shadow .15s;
}
.choice input:focus-visible + .choice-card{outline:2px solid var(--cyan);outline-offset:2px}
.choice input:checked + .choice-card{
  border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 22px color-mix(in srgb,var(--accent) 40%,transparent);
}
.choice input:disabled + .choice-card{opacity:.5;cursor:not-allowed}
.choice-name{font-weight:700;display:block}
.choice-hint{font-family:var(--mono);font-size:.74rem;color:var(--muted);display:block;margin-top:2px}
.choice input:checked + .choice-card .choice-hint{color:var(--accent)}

/* ── Product grid + card ──────────────────────────────────────────────────── */
.grid-products{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),1fr));
}
@media (min-width:560px){ .grid-products{gap:16px} }
.pcard{
  --accent:var(--pink);
  position:relative;display:flex;flex-direction:column;min-width:0;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;color:var(--ink);text-decoration:none;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.pcard:hover{
  text-decoration:none;transform:translateY(-2px);border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),0 0 26px color-mix(in srgb,var(--accent) 32%,transparent);
}
.pcard:focus-within{border-color:var(--cyan)}
/* Fixed height, not min-height: a tee mock is tall and a flag mock is wide, so
   letting the media box follow its contents left every card's title on a
   different baseline and the grid read as ragged. One height, contents
   centred, everything below it lines up across the row. */
.pcard-media{
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);border-bottom:1px solid var(--line);
  padding:12px;height:176px;overflow:hidden;
}
.pcard-media .ico{width:46px;height:46px}
.pcard-body{display:flex;flex-direction:column;gap:6px;padding:14px 14px 12px;flex:1 1 auto;min-width:0}
/* Every card body has the same three rows — a two-line name box, the price
   line, a tier line — whether or not the text needs them, so a long name or
   a missing tier never pushes one card's price below its neighbour's. */
.pcard-name{font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;font-size:1.12rem;line-height:1.1;
  min-height:2.2em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .price-row{flex-wrap:nowrap;margin-top:auto}
.pcard .price-row .price-note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pcard-tiers{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted);min-height:1.2em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard-blurb{color:var(--muted);font-size:.88rem;line-height:1.45}
.pcard-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 14px 14px;margin-top:auto}
.pcard-foot .btn{flex:1 1 auto}
.pcard.is-soldout{opacity:.62}
.pcard.is-soldout:hover{transform:none;box-shadow:none;border-color:var(--line)}
.pcard.is-quiet:hover{transform:none;box-shadow:none;border-color:var(--line)}

.price-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.price{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:1.05rem;font-weight:700;color:var(--yellow);white-space:nowrap;
}
.price-was{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:.85rem;color:var(--muted);text-decoration:line-through;
}
.price-note{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted)}

/* ── Rich text (assets/richtext.js output) ───────────────────────────────── */
.rich p{margin:0 0 10px}
.rich p:last-child,.rich ul:last-child,.rich ol:last-child{margin-bottom:0}
.rich ul,.rich ol{margin:0 0 10px 20px;padding:0}
.rich li{margin:2px 0}
.rich h4{font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;font-size:1.05rem;margin:12px 0 6px;color:var(--ink)}
.rich a{color:var(--cyan);text-decoration:underline}
.rich b{color:var(--ink)}

/* ── Badges + tags ────────────────────────────────────────────────────────── */
.badge{
  position:absolute;top:10px;right:10px;z-index:2;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;padding:4px 8px;border-radius:99px;white-space:nowrap;
  background:var(--panel-2);border:1px solid var(--line);color:var(--muted);
}
.badge-soldout{background:#2a1420;border-color:rgba(255,62,200,.5);color:#ffb8e8}
.badge-vote{background:transparent;border-color:var(--cyan);color:var(--cyan)}
.badge-open{background:var(--lime);border-color:var(--lime);color:#0b0410}

.tag{
  display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 9px;border-radius:99px;white-space:nowrap;
  border:1px solid var(--line);color:var(--muted);
}
.tag-open{color:#0b0410;background:var(--lime);border-color:var(--lime);font-weight:700}
.tag-vote{color:var(--cyan);border-color:var(--cyan)}
.tag-quiet{color:var(--muted)}

/* ── Product detail page ──────────────────────────────────────────────────── */
.product{display:grid;grid-template-columns:1fr;gap:22px;align-items:start}
.product > *{min-width:0}
@media (min-width:760px){
  .product{grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:32px}
}
.product-title{margin-bottom:6px}
.product-side{position:relative}
.product-main{display:flex;flex-direction:column;gap:14px}

/* ── Previews (emitted by previews.js) ────────────────────────────────────── */
.preview{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;
  display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;
}
.preview-cap{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-align:center;
}
/* small = card thumbnail: no chrome, it sits inside .pcard-media already, and
   every mock is capped so it fits that box's fixed height without clipping */
.preview.sz-sm{border:0;background:transparent;padding:0;gap:7px;height:100%;justify-content:center}
.preview.sz-sm .preview-cap{font-size:.6rem;letter-spacing:.12em}
.preview.sz-sm .tee-svg{max-width:118px;max-height:126px}
.preview.sz-sm .patch-ring{width:106px;height:106px;padding:6px}
.preview.sz-sm .generic-mock{max-width:106px}
.preview.sz-sm .flag-mock{max-width:158px}
/* large = product-page hero */
.preview.sz-lg{padding:24px}
.preview.sz-lg .tee-svg{max-width:300px}
.preview.sz-lg .patch-ring{width:230px;height:230px}
.preview.sz-lg .generic-mock{max-width:260px}

.tee-svg{width:100%;max-width:230px;height:auto}
/* logo art is a black-ground JPEG — screen drops the black so it prints onto the
   garment. The patch is deliberately NOT screened: its black ground reads as
   the black twill backing inside the merrowed ring. */
.tee-logo,.flag-mock img,.generic-mock img{mix-blend-mode:screen}
.patch-ring{
  width:190px;height:190px;max-width:100%;border-radius:50%;padding:11px;
  background:repeating-conic-gradient(var(--pink) 0deg 4deg,#b3218a 4deg 8deg);
  box-shadow:0 0 26px rgba(255,62,200,.35);
}
.patch-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#000}
.flag-mock{
  position:relative;width:100%;aspect-ratio:5/3;background:#0d0d15;border:1px solid var(--line);
  border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 0 26px rgba(47,212,240,.22);
}
.flag-mock img{height:86%;width:auto;max-width:70%;object-fit:contain}
.flag-hoist{position:absolute;left:0;top:0;bottom:0;width:16px;background:#e8e6f2}
.flag-hoist::before,.flag-hoist::after{
  content:"";position:absolute;left:4px;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fdfdfd,#8f8fa3 70%);
}
.flag-hoist::before{top:8px}
.flag-hoist::after{bottom:8px}
.generic-mock{
  width:100%;max-width:200px;aspect-ratio:1;border-radius:16px;background:#0d0d15;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 0 26px rgba(139,92,246,.22);
}
.generic-mock img{width:80%;height:auto;border-radius:10px}
.ico{
  width:30px;height:30px;flex:none;
  stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.ico-sm{width:20px;height:20px}
.ico-lg{width:56px;height:56px;stroke-width:1.4}

/* ── Quantity rows + stepper ──────────────────────────────────────────────── */
.row-list{display:flex;flex-direction:column;gap:9px}
/* Always wrappable. A qrow lives inside the product page's right-hand column,
   which at tablet widths is only ~290px wide — name + price + stepper + amount
   genuinely does not fit on one line there, and forcing nowrap pushed the
   amount past the viewport edge. Wrapping costs nothing on wide screens
   (flex only wraps when it must) and never bleeds on narrow ones. */
.qrow{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel-2);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0;
}
@media (min-width:560px){ .qrow{gap:12px;padding:10px 14px} }
.qrow.is-soldout{opacity:.55}
.qrow-name{font-weight:700;min-width:6.5ch}
.qrow-price{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--muted);margin-right:auto;min-width:0}
.qrow-amt{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.9rem;color:var(--muted);
  min-width:8ch;text-align:right;margin-left:auto;
}
.qrow-amt.has{color:var(--lime)}
.stepper{display:flex;align-items:center;gap:2px;flex:none}
.stepper button{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--bg);
  color:var(--ink);font-size:1.1rem;font-weight:700;cursor:pointer;line-height:1;padding:0;
}
.stepper button:hover{border-color:var(--pink);color:var(--pink)}
.stepper button:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
.stepper button[disabled]{opacity:.4;cursor:not-allowed}
.stepper input{
  width:52px;text-align:center;background:transparent;border:0;color:var(--ink);
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1rem;padding:4px 2px;
  -moz-appearance:textfield;appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper input:focus-visible{outline:2px solid var(--cyan);border-radius:6px}
.line-total{
  margin-top:16px;display:flex;justify-content:flex-end;gap:10px;align-items:baseline;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
}
.line-total span{color:var(--muted);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.line-total b{font-size:1.25rem;color:var(--yellow)}

/* ── Tables (cart, review, receipt) ───────────────────────────────────────── */
.table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.table th{
  text-align:left;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:500;padding:0 8px 10px 0;white-space:nowrap;
}
.table td{padding:9px 8px 9px 0;border-top:1px solid var(--line);vertical-align:top}
.table th:last-child,.table td:last-child{text-align:right;padding-right:0}
.table .amt{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.table .subtle{color:var(--muted);font-size:.86rem}
.table .tot-row td{border-top:2px solid var(--line);padding-top:12px}
.table .tot-row .amt{color:var(--yellow);font-size:1.15rem;font-weight:700}

/* ── Messages ─────────────────────────────────────────────────────────────── */
.note{
  padding:12px 15px;border-radius:12px;font-size:.9rem;color:var(--muted);
  background:rgba(47,212,240,.06);border:1px solid rgba(47,212,240,.3);
}
.note b{color:var(--cyan)}
.note-warn{background:rgba(245,224,39,.08);border-color:rgba(245,224,39,.45);color:var(--ink)}
.note-warn b{color:var(--yellow)}
.note-err{background:rgba(255,62,200,.10);border-color:rgba(255,62,200,.45);color:#ffb8e8}
.note-err b{color:var(--pink)}
.note-ok{background:rgba(138,255,62,.08);border-color:rgba(138,255,62,.4);color:var(--ink)}
.note-ok b{color:var(--lime)}

.banner{
  margin:0 0 20px;padding:12px 16px;border-radius:12px;font-size:.94rem;color:var(--ink);
  background:rgba(47,212,240,.07);border:1px solid rgba(47,212,240,.35);
}
.banner-warn{background:rgba(245,224,39,.08);border-color:rgba(245,224,39,.42)}
.banner-err{background:rgba(255,62,200,.10);border-color:rgba(255,62,200,.45)}

.toast-host{
  position:fixed;left:0;right:0;bottom:16px;z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:0 12px;pointer-events:none;
}
.toast{
  max-width:min(92vw,420px);pointer-events:auto;
  background:var(--panel);border:1px solid var(--cyan);border-radius:12px;
  padding:11px 16px;font-size:.92rem;color:var(--ink);
  box-shadow:0 8px 30px rgba(0,0,0,.55),0 0 22px rgba(47,212,240,.2);
  animation:toast-in .18s ease;
}
.toast.is-ok{border-color:var(--lime);box-shadow:0 8px 30px rgba(0,0,0,.55),0 0 22px rgba(138,255,62,.2)}
.toast.is-err{border-color:var(--pink);box-shadow:0 8px 30px rgba(0,0,0,.55),0 0 22px rgba(255,62,200,.24)}
.toast.is-leaving{opacity:0;transition:opacity .2s ease}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Type utilities ───────────────────────────────────────────────────────── */
.mono{font-family:var(--mono)}
.money{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.muted{color:var(--muted)}
.tiny{font-size:.78rem}
.nowrap{white-space:nowrap}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── Loading placeholder. Never a blocking spinner — content renders first. ─ */
.skel{
  background:linear-gradient(90deg,var(--panel-2) 25%,#241f3d 50%,var(--panel-2) 75%);
  background-size:400% 100%;border-radius:8px;color:transparent;
  animation:skel 1.4s ease infinite;
}
@keyframes skel{from{background-position:100% 0}to{background-position:0 0}}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .pcard:hover{transform:none}
  .btn:active{transform:none}
}

/* The tagline's struck word: "a drinking club with a ~running~ raving problem". */
.tagline s,.lede s,.colophon s,.onon s{text-decoration-line:line-through;text-decoration-thickness:2px;
  text-decoration-color:var(--pink);opacity:.6}

/* ── Product media (emitted by media.js) ─────────────────────────────────────
   Uploaded photos and video. A card fills its fixed media box edge to edge;
   the product-page hero is a square panel that letterboxes instead of
   cropping, so a tall shirt photo and a wide flag photo both fit whole. */
.pmedia{margin:0;position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;background:#0e0c17;overflow:hidden}
.pmedia img,.pmedia video{width:100%;height:100%;object-fit:cover;display:block}
.pmedia.sz-lg{aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--r-md)}
.pmedia.sz-lg img,.pmedia.sz-lg video{object-fit:contain}
.pmedia-blank{display:block;width:100%;height:100%;background:linear-gradient(135deg,#1b1830,#0e0c17)}
.pmedia-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:rgba(10,10,16,.78);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:.85rem;padding-left:3px;pointer-events:none}
.pcard-media.has-media{padding:0}
.cline-media .pmedia{border-radius:6px}
.mthumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.mthumb{width:58px;height:58px;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  background:#0e0c17;padding:0;cursor:pointer;position:relative;flex:none}
.mthumb img{width:100%;height:100%;object-fit:cover;display:block}
.mthumb:hover{border-color:var(--muted)}
.mthumb.is-active{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan)}
.mthumb .pmedia-play{width:22px;height:22px;font-size:.55rem;padding-left:2px}

/* ── Account pill (emitted by app.js renderNav) ──────────────────────────────
   Sits between the section links and the cart. Lit lime when a member is
   signed in on this browser. Same box as .cart-pill so the two read as a pair. */
.acct-pill{
  flex:none;position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:var(--panel);color:var(--muted);text-decoration:none;
}
.acct-pill:hover{border-color:var(--cyan);color:var(--cyan);text-decoration:none}
.acct-pill.is-active{border-color:var(--cyan);color:var(--ink)}
.acct-pill.is-in{color:var(--lime);border-color:rgba(138,255,62,.5)}
.acct-ico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.acct-dot{position:absolute;right:-1px;top:-1px;width:9px;height:9px;border-radius:50%;background:var(--lime);border:2px solid var(--bg)}

/* Brand is the graffiti wordmark (2026-09-11): sized by height so it fits the bar,
   width follows the image's own ratio. */
.brand-wordmark{height:44px;width:auto;flex:none;display:block;filter:drop-shadow(0 0 10px rgba(255,62,200,.35))}
@media (min-width:560px){ .brand-wordmark{height:50px} }

/* Footer links (emitted by app.js renderFooterLinks) sit after the tagline. */
.foot-links a{color:var(--cyan);text-decoration:none}
.foot-links a:hover{text-decoration:underline}