/* $MERCH · "Made Wearable". A streetwear store for internet culture: the photography and the product grid lead, the
   brand brings the energy. Big ink and paper areas; acid lime only where it earns it (the main CTA, highlights, key
   moments); lavender as the playful second accent (chips, badges, the $MERCH half of the split). Space Grotesk Bold
   with tight tracking for display and headings, Inter for reading, JetBrains Mono only for small labels. Pill buttons
   and chips, softly rounded panels; photos stay square like a good apparel store. Shadows only on floating things. */
:root {
  --bg: #F6F3EB;          /* PAPER: the page, never pure white */
  --surface: #EDE9DF;     /* panels */
  --well: #E6E1D5;        /* behind photos until they land */
  --paper: #FBFAF6;       /* inputs, menus */
  --text: #171717;        /* INK */
  --text-2: #45433E;
  --text-3: #6B6862;      /* AA on paper */
  --line: rgba(23, 23, 23, .12);
  --line-2: rgba(23, 23, 23, .3);
  --ink: #171717;
  --on-ink: #F6F3EB;
  --ink-2: rgba(246, 243, 235, .72); /* secondary text on ink */
  --lime: #D6FF3F;        /* ACID LIME: the main CTA and key moments */
  --lime-d: #C5F01E;
  --lav: #B7A5F5;         /* LAVENDER: chips, badges, playful accents */
  --lav-l: #E7E0FC;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --radius: 16px;
  --pad: 16px;
  --top-h: 60px;
  --max: 1440px;
}
@media (min-width: 720px) { :root { --pad: 28px; } }
@media (min-width: 1200px) { :root { --pad: 44px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 400 15px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
html.drawer-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { user-select: none; -webkit-user-select: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, figure { margin: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
::selection { background: var(--lime); color: var(--ink); }
#main:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 70; background: var(--text); color: var(--bg); padding: 10px 14px; font: 600 14px var(--body); }
.skip:focus { top: 12px; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); position: relative; }
code { font-family: var(--mono); }
[hidden] { display: none !important; }
/* Status lines (status.js): each shows only in its state, and none before /api/config has answered. */
html:not([data-store="open"]) [data-when="open"], html:not([data-store="soon"]) [data-when="soon"],
html:not([data-buys="on"]) [data-when="buys-on"], html:not([data-buys="off"]) [data-when="buys-off"],
html:not([data-card="fourthwall"]) [data-when="card-fourthwall"], html:not([data-card="stripe"]) [data-when="card-stripe"],
html:not([data-crypto="on"]) [data-when="crypto"], html:not([data-pay="both"]) [data-when="pay-both"],
html:not([data-pay="card"]) [data-when="pay-card"], html:not([data-pay="crypto"]) [data-when="pay-crypto"] { display: none !important; }
.cap { text-transform: capitalize; }

/* Type: display headings are Space Grotesk 700, sentence case, tight; small labels are mono caps. */
.eyebrow, .flabel, .lbl { display: inline-block; font: 500 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.mono { font-family: var(--mono); letter-spacing: .01em; }
.lbl { color: var(--text); }
.lbl.muted { color: var(--text-3); }
.fine { font: 400 12.5px/1.55 var(--body); color: var(--text-3); }
.sub, .sec-sub, .lede { font: 400 16px/1.55 var(--body); color: var(--text-2); max-width: 58ch; }
.lede { font-size: 18px; }
.linkish, .text-link { padding: 0; border: 0; background: none; font: 500 14px/1.4 var(--body); color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer; transition: color .15s; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font: 600 14.5px/1 var(--display); letter-spacing: -.005em; text-underline-offset: 5px; }
.linkish:hover, .text-link:hover { color: var(--text-3); }
.form-msg { min-height: 20px; font: 500 13px/1.5 var(--body); color: var(--text-2); }
.form-msg.err { color: var(--text); font-weight: 600; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border: 1.5px solid var(--text); border-radius: 999px; background: transparent; color: var(--text); font: 600 15px/1 var(--display); letter-spacing: -.01em; white-space: nowrap; cursor: pointer; transition: background-color .18s, color .18s, border-color .18s; }
.btn:hover { background: var(--text); color: var(--bg); }
/* The main CTA: acid lime with ink type. Everything else is ink, outline or ghost. */
.btn.primary { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.btn.primary:hover { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.btn.primary.is-added { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.btn.ink { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn.ink:hover { background: #2E2E2C; }
.btn.outline { border-color: var(--text); }
.btn.ghost { border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }
.btn.ghost:hover { background: transparent; color: var(--text-3); }
.btn.light { border-color: var(--bg); color: var(--bg); }
.btn.light:hover { background: var(--bg); color: var(--text); }
.btn.lg { min-height: 54px; padding: 0 34px; font-size: 16.5px; }
.btn.sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.btn.block { width: 100%; }
.btn.grow { flex: 1; }
.btn.is-busy { pointer-events: none; opacity: .75; }
.btn:disabled { opacity: .45; cursor: default; }
.btn:disabled:hover { background: transparent; color: var(--text); }
.btn.primary:disabled:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--text); flex: none; transition: opacity .15s; }
.icon-btn:hover { opacity: .65; }

/* ---------- Announcement bar ---------- */
.ann { background: var(--text); color: var(--bg); }
.ann-in { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; min-height: 36px; position: relative; }
.ann-msg { font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.ca-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; min-width: 0; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; font: 500 11.5px/1 var(--mono); cursor: pointer; transition: border-color .15s, background-color .15s; }
.ca-chip:hover { border-color: currentColor; }
.ca-chip .k { font: 500 11px/1 var(--mono); letter-spacing: .06em; }
.ca-chip code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16ch; opacity: .8; }
.ann .ca-chip { border-color: rgba(246, 243, 235, .3); color: var(--on-ink); }
.ann .ca-chip:hover { border-color: var(--lime); }
.ca-copy { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
/* The $MERCH item: ticker, CA with copy, Buy. Hidden as a whole until coin.json has the CA. */
.ann-coin { display: flex; align-items: center; gap: 10px; white-space: nowrap; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ann-coin > .k { font-weight: 500; color: var(--lime); }
.ann-buy { display: inline-flex; align-items: center; min-height: 32px; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 960px) { .ann-in { display: grid; grid-template-columns: 1fr auto 1fr; } .ann-msg { grid-column: 2; } .ann-coin { grid-column: 3; justify-self: end; } }
@media (max-width: 719px) { .ann-in { flex-wrap: wrap; gap: 0 14px; padding-top: 4px; padding-bottom: 4px; } .ann-msg { font-size: 10.5px; letter-spacing: .1em; } .ann-coin { font-size: 10.5px; } .ann .ca-chip code { max-width: 9ch; } }

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.top-in { max-width: var(--max); margin: 0 auto; padding: 6px var(--pad); display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "menu brand acts" "search search make"; align-items: center; gap: 4px 8px; }
.menu-btn { grid-area: menu; margin-left: -10px; }
.brand { grid-area: brand; justify-self: center; display: flex; align-items: center; min-height: 44px; }
.brand-word { height: 30px; width: auto; }
.brand-txt { font: 700 26px/1 var(--display); letter-spacing: -.035em; color: var(--text); }
.top-acts { grid-area: acts; display: flex; align-items: center; gap: 2px; margin-right: -10px; }
/* $MERCH's Buy (outline, never the page's primary) and X sit next to the bag; under 720px they live in the menu. */
.top-buy { margin-right: 6px; }
@media (max-width: 719px) { .top-buy { display: none !important; } }
.nav-merch { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.top-nav .nav-merch a.btn { min-height: 44px; padding: 0 18px; font-size: 14px; letter-spacing: -.01em; }
.top-nav .nav-merch a.btn::after { display: none; }
.nav-x svg { flex: none; }
.cart-n { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 9px; background: var(--lime); color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); font: 600 10.5px/1 var(--body); font-variant-numeric: tabular-nums; }
.top-nav { grid-column: 1 / -1; display: none; flex-direction: column; padding: 4px 0 12px; border-top: 1px solid var(--line); }
.top-nav.open { display: flex; }
.top-nav a, .nav-coll-btn { display: flex; align-items: center; gap: 6px; min-height: 46px; padding: 0; border: 0; background: none; font: 500 16px/1 var(--display); letter-spacing: -.01em; color: var(--text); position: relative; }
.top-nav a[aria-current="page"]::after, .top-nav a:hover::after, .nav-coll-btn:hover::after, .nav-coll-btn[aria-expanded="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 2px; border-radius: 1px; background: currentColor; }
.top-nav a[aria-current="page"]::after { background: var(--lav); height: 3px; }
.nav-coll-btn svg { transition: transform .2s var(--ease); }
.nav-coll-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.coll-menu { padding: 4px 0 8px 12px; }
.coll-menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.coll-menu-list a { display: flex; align-items: center; gap: 12px; min-height: 44px; font: 500 14px/1.2 var(--body); letter-spacing: 0; text-transform: none; }
.coll-menu-list a::after { display: none; }
.coll-menu-list img { width: 52px; height: 36px; object-fit: cover; background: var(--well); flex: none; border-radius: 6px; }
.coll-menu-list b { font: 700 15px/1 var(--display); letter-spacing: -.01em; }
.coll-menu-list span { color: var(--text-3); font-size: 13px; }
.search { grid-area: search; position: relative; display: flex; align-items: center; min-width: 0; height: 44px; padding-left: 12px; border: 1.5px solid var(--line-2); border-radius: 999px; background: var(--paper); transition: border-color .15s, box-shadow .15s; }
.search-ico { flex: none; margin: 0 6px 0 2px; color: var(--text-2); }
.search-in { flex: 1; min-width: 0; height: 100%; border: 0; background: none; padding: 0 4px; font: 400 14px/1 var(--body); -webkit-appearance: none; appearance: none; }
.search-in::placeholder { color: var(--text-3); opacity: 1; }
.search-in::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-in:focus-visible { outline: none; }
.search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--lime); }
.search-go { flex: none; width: 36px; height: 36px; margin-right: 3px; border: 0; border-radius: 50%; background: var(--ink); color: var(--lime); display: grid; place-items: center; transition: background-color .15s, color .15s; }
.search-go:hover { background: var(--lime); color: var(--ink); }
.search.is-busy .search-go { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.search-pop { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 5; display: grid; gap: 8px; padding: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(23, 23, 23, .14); }
.search-msg { font: 400 13.5px/1.45 var(--body); color: var(--text-2); }
.search-msg:empty { display: none; }
.search-msg.err { color: var(--text); font-weight: 600; }
.search-msg.busy::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: dots 1s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
/* The full desktop bar (brand, nav, search, Buy + X + bag) needs 1200px; below that the menu holds the nav. */
@media (min-width: 1200px) {
  :root { --top-h: 72px; }
  .nav-merch { display: none; }
  .top-in { grid-template-columns: auto 1fr minmax(200px, 280px) auto auto; grid-template-areas: "brand nav search make acts"; gap: 24px; padding-top: 10px; padding-bottom: 10px; }
  .menu-btn { display: none; }
  .brand { justify-self: start; }
  .brand-word { height: 38px; }
  .top-nav { grid-area: nav; grid-column: auto; display: flex; flex-direction: row; align-items: center; gap: 22px; padding: 0; border: 0; justify-self: center; }
  .top-nav a, .nav-coll-btn { font-size: 15px; min-height: 52px; }
  .top-nav a[aria-current="page"]::after, .top-nav a:hover::after, .nav-coll-btn:hover::after, .nav-coll-btn[aria-expanded="true"]::after { bottom: 14px; }
  .nav-about { display: none !important; }
  .nav-coll { position: relative; }
  .coll-menu { position: absolute; top: calc(100% + 11px); left: 50%; transform: translateX(-50%); width: 340px; padding: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(23, 23, 23, .14); }
  .coll-menu-list a { padding: 4px 6px; border-radius: 10px; }
  .coll-menu-list a:hover { background: var(--well); }
}
@media (min-width: 1200px) and (max-width: 1360px) { .top-in { gap: 16px; grid-template-columns: auto 1fr minmax(150px, 210px) auto auto; } .top-nav { gap: 14px; } .top-nav a, .nav-coll-btn { font-size: 14.5px; } }
/* Make merch for any coin: the paste box in a dialog (paste.js), on every store page. Under 720px it says "Make merch". */
.make-btn { grid-area: make; gap: 6px; padding: 0 16px; }
.make-btn svg { flex: none; }
.make-more { display: none; }
@media (min-width: 720px) { .make-more { display: inline; } }
@media (min-width: 1200px) and (max-width: 1499px) { .make-more { display: none; } .top-buy { display: none !important; } }
@media (max-width: 519px) { .cart-page .make-txt, .cart-page .make-more { display: none; } .cart-page .make-btn { width: 44px; padding: 0; } }
.cart-page .top-in, .order-page .top-in, .admin-page .top-in, .policy-page .top-in { display: flex; justify-content: space-between; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---------- Pick list (ticker matches) ---------- */
.pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 340px; overflow-y: auto; }
.pick-list:empty { display: none; }
.pick-row { width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "logo main" "logo meta"; gap: 2px 10px; align-items: center; min-height: 54px; padding: 8px; border: 1px solid transparent; border-radius: 12px; background: none; text-align: left; transition: background-color .15s; }
.pick-row:hover { background: var(--well); }
.pick-logo { grid-area: logo; position: relative; width: 32px; height: 32px; display: grid; place-items: center; background: var(--well); font: 700 13px/1 var(--display); overflow: hidden; border-radius: 50%; }
.pick-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pick-main { grid-area: main; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 13px/1.3 var(--body); color: var(--text-2); }
.pick-main b { font: 700 15px/1 var(--display); letter-spacing: -.01em; color: var(--text); }
.pick-meta { grid-area: meta; display: flex; align-items: center; gap: 8px; min-width: 0; font: 400 12px/1.2 var(--body); color: var(--text-3); }
.pick-meta code { font-size: 11.5px; }
.chain-ico { width: 14px; height: 14px; flex: none; }

/* ---------- Photos ---------- */
/* Every photo box carries its studio tone (--tone) so it never flashes white while it loads. */
.ph { position: relative; display: block; overflow: hidden; background: var(--tone, var(--well)); }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Until its photo has loaded the box is a plain block of that photo's studio tone; the photo fades in over it once
   loaded (onload adds .is-in). Nothing is drawn in the box and no text sits on it. */
.ph img[data-swap], .gal-item img[data-swap] { transition: opacity .4s var(--ease), transform 1s var(--ease); }
.ph img[data-swap]:not(.is-in), .gal-item img[data-swap]:not(.is-in) { opacity: 0; }
.img-fb { display: grid; place-items: center; width: 100%; height: 100%; background: var(--well); color: var(--text-2); font: 700 clamp(18px, 4vw, 30px)/1 var(--display); letter-spacing: -.02em; }

/* ---------- Home hero ---------- */
.hero { position: relative; display: grid; min-height: clamp(520px, 82vh, 860px); color: var(--on-ink); overflow: hidden; background: #2A2724; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23, 23, 23, 0) 34%, rgba(23, 23, 23, .66) 100%), linear-gradient(90deg, rgba(23, 23, 23, .34), rgba(23, 23, 23, 0) 62%); }
.hero-copy { align-self: end; width: 100%; display: grid; gap: 14px; justify-items: start; padding-top: 120px; padding-bottom: clamp(36px, 7vh, 72px); }
.hero h1 { font: 700 clamp(46px, 8.6vw, 116px)/.9 var(--display); letter-spacing: -.045em; max-width: 9.5ch; text-wrap: balance; text-shadow: 0 2px 28px rgba(0, 0, 0, .2); }
.hero-tag { display: inline-flex; align-items: center; gap: .5em; padding: 7px 14px; border-radius: 999px; background: rgba(23, 23, 23, .58); font: 500 clamp(12.5px, 1.6vw, 15px)/1.3 var(--mono); letter-spacing: .01em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-tag [aria-hidden] { color: var(--lime); }
.hero-sub { font: 400 clamp(15.5px, 2vw, 18px)/1.45 var(--body); max-width: 44ch; color: rgba(246, 243, 235, .92); }
.hero-cta { margin-top: 8px; }
.hero-shop { color: var(--lime); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.hero-shop:hover { color: var(--on-ink); }

/* ---------- Paste any coin's CA → get its merch (paste.js): the home's box, and the same box in a dialog ---------- */
.paste { display: grid; gap: 10px; width: 100%; max-width: 640px; margin: 6px 0 4px; padding: 18px; border-radius: 20px; background: var(--bg); color: var(--text); box-shadow: 0 18px 50px rgba(23, 23, 23, .3); }
.paste-h { font: 700 clamp(22px, 2.8vw, 30px)/1.08 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.paste-arrow { display: inline-block; padding: 0 .28em; border-radius: 999px; background: var(--lime); color: var(--ink); }
.paste-row { display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 16px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); transition: box-shadow .15s; }
.paste-row:focus-within { box-shadow: 0 0 0 3px var(--lime); }
.paste-in { flex: 1; min-width: 0; height: 46px; border: 0; background: none; padding: 0; font: 500 14.5px/1 var(--mono); letter-spacing: -.01em; text-overflow: ellipsis; -webkit-appearance: none; appearance: none; }
.paste-in::placeholder { color: var(--text-3); opacity: .5; }
.paste-in:focus-visible { outline: none; }
.paste-in[aria-invalid="true"] { color: var(--text); }
.paste-clip { flex: none; height: 44px; padding: 0 16px; border: 1.5px solid var(--line-2); border-radius: 999px; background: none; font: 600 14px/1 var(--display); transition: border-color .15s; }
.paste-clip:hover { border-color: var(--ink); }
.paste-go { flex: none; min-height: 46px; padding: 0 22px; }
.paste-chains { font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.paste-msg { font: 400 14px/1.45 var(--body); color: var(--text-2); }
.paste-msg:empty { display: none; }
.paste-msg.err { color: var(--text); font-weight: 600; }
.paste-msg.busy::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: dots 1s steps(4) infinite; }
.paste-retry { justify-self: start; }
.paste .pick-list { max-height: 260px; }
@media (max-width: 519px) {
  .paste { padding: 14px; }
  .paste-row { flex-wrap: wrap; padding: 4px; border-radius: 16px; }
  .paste-in { flex-basis: 100%; height: 44px; padding: 0 10px; font-size: 13.5px; }
  .paste-go { flex: 1; }
}
/* The collection page's way to make another coin's merch: a quiet lavender strip under the cover. */
.paste-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; width: 100%; min-height: 48px; margin-top: 12px; padding: 8px 16px; border: 0; border-radius: 12px; background: var(--lav-l); color: var(--ink); font: 500 15px/1.2 var(--display); letter-spacing: -.01em; transition: background-color .15s; }
.paste-strip b { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.paste-strip:hover { background: var(--lav); }
/* The dialog: the same box, flat on the paper sheet; the first-visit intro adds its headline and a way out. */
.paste-dialog { padding: 22px 22px calc(22px + env(safe-area-inset-bottom)); }
.paste-dialog .paste { margin: 0; padding: 0; max-width: none; background: none; box-shadow: none; }
.paste-dialog .paste-h { padding-right: 40px; }
.paste-x { position: absolute; top: 10px; right: 10px; z-index: 1; }
.paste-intro { display: grid; gap: 14px; margin-bottom: 18px; padding-right: 40px; }
.paste-intro:not([hidden]) + .paste .paste-h { font-size: 18px; padding-right: 0; }
.paste-mark { width: 54px; height: auto; }
.paste-intro-h { font: 700 clamp(32px, 6vw, 46px)/1.12 var(--display); letter-spacing: -.045em; text-wrap: balance; }
.paste-intro-h .hl { background: var(--lime); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 .12em; border-radius: 6px; }
.paste-later { margin-top: 14px; }
.paste-later .linkish { min-height: 40px; color: var(--text-2); }

.split-line { padding-top: 22px; padding-bottom: 22px; text-align: center; font: 500 15px/1.5 var(--body); color: var(--text); border-bottom: 1px solid var(--line); }
.split-line a { margin-left: 6px; color: var(--text); text-decoration: underline; text-decoration-color: var(--lav); text-decoration-thickness: 2px; text-underline-offset: 4px; white-space: nowrap; }

/* ---------- Sections ---------- */
.sec { padding-top: 56px; padding-bottom: 8px; }
@media (min-width: 960px) { .sec { padding-top: 84px; } }
.sec-head { display: grid; gap: 8px; margin-bottom: 24px; }
.sec-head.row { grid-template-columns: 1fr auto; align-items: end; gap: 8px 24px; }
.sec-head h2, .more h2 { font: 700 clamp(28px, 4.2vw, 44px)/1 var(--display); letter-spacing: -.035em; }
.shelf-note { margin-top: 18px; font: 400 14px/1.5 var(--body); color: var(--text-2); }

/* Shop by category */
/* phones: a 2-column grid (an odd last tile takes the full row); tablets: a snap-scrolling row; desktop: 5 across */
.cat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
@media (max-width: 719px) {
  .cat-row > .cat-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cat-row > .cat-tile:last-child:nth-child(odd) .ph { aspect-ratio: 2 / 1; }
  .cat-row > .cat-tile:last-child:nth-child(odd) .ph img { object-position: 50% 30%; }
}
.cat-row::-webkit-scrollbar { display: none; }
@media (min-width: 720px) { .cat-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(180px, 28%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 6px; scrollbar-width: none; } }
@media (min-width: 1080px) { .cat-row { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; gap: 16px; } }
.cat-tile { display: grid; gap: 12px; scroll-snap-align: start; }
.cat-tile .ph { aspect-ratio: 4 / 5; }
.cat-tile .ph img { transition: transform .9s var(--ease); }
.cat-tile:hover .ph img { transform: scale(1.035); }
.cat-tile b { font: 700 17px/1 var(--display); letter-spacing: -.02em; }
.cat-tile span { font: 400 13px/1 var(--body); color: var(--text-3); margin-left: 8px; }

/* Collections: big image cards */
.coll-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .coll-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .coll-grid > :first-child { grid-column: 1 / -1; } }
.ccard { position: relative; display: block; overflow: hidden; color: var(--on-ink); isolation: isolate; border-radius: var(--radius); }
.ccard .ph { aspect-ratio: 3 / 2; }
.coll-grid > :first-child .ph { aspect-ratio: 3 / 2; }
@media (min-width: 720px) { .coll-grid > :first-child .ph { aspect-ratio: 21 / 9; } }
.ccard .ph img { transition: transform 1.1s var(--ease); }
.ccard:hover .ph img { transform: scale(1.03); }
.ccard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 23, 23, 0) 45%, rgba(23, 23, 23, .66)); pointer-events: none; }
.ccard-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: 8px; padding: 18px; }
@media (min-width: 960px) { .ccard-copy { padding: 28px 30px; } }
.ccard-name { font: 700 clamp(28px, 3.8vw, 48px)/.95 var(--display); letter-spacing: -.035em; }
.ccard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 500 13px/1 var(--body); }
.ccard-go { margin-left: auto; display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; background: var(--on-ink); color: var(--ink); font: 600 14px/1 var(--display); letter-spacing: -.01em; transition: background-color .18s; }
.ccard:hover .ccard-go, .ccard:focus-visible .ccard-go { background: var(--lime); }
/* Badges and chips: lavender */
.chain-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 0; border-radius: 13px; background: var(--lav); color: var(--ink); font: 500 11.5px/1 var(--body); white-space: nowrap; }
.chain-chip img { width: 13px; height: 13px; }
.chain-chip:empty { display: none; }
/* A generated collection whose photoshoot is still landing: a quiet note on the cover, never a banner. */
.shoot-chip { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border: 1px solid currentColor; border-radius: 13px; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .78; white-space: nowrap; }
.shoot-chip[hidden] { display: none; }
.shoot-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.cover.plain .shoot-chip i { background: var(--lav); }
.tick { font: 700 15px/1 var(--display); letter-spacing: -.01em; }

/* Editorial split */
.edit { display: grid; gap: 24px; padding-top: 64px; align-items: center; }
.edit-media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--well); border-radius: var(--radius); }
.edit-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.edit-media:hover img { transform: scale(1.025); }
.edit-copy { display: grid; gap: 16px; justify-items: start; max-width: 480px; }
.edit-copy h2 { font: 700 clamp(36px, 5.4vw, 68px)/.92 var(--display); letter-spacing: -.045em; }
@media (min-width: 840px) { .edit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; padding-top: 96px; } .edit-copy { padding: 0 0 0 4%; } }

.find { display: grid; gap: 18px; margin-top: 72px; margin-bottom: 80px; padding-top: 40px; padding-bottom: 40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); align-items: center; }
.find h2 { font: 700 clamp(26px, 3.6vw, 38px)/1 var(--display); letter-spacing: -.035em; margin-bottom: 8px; }
@media (min-width: 840px) { .find { grid-template-columns: 1fr auto; gap: 48px; } }

/* How it works: three hang tags, each a picture first (the search, a real piece, its split receipt) */
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 840px) { .how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.how-step { position: relative; display: grid; align-content: start; gap: 8px; padding: 14px 14px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; }
.how-step::before { content: ""; position: absolute; top: 14px; right: 14px; z-index: 1; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--bg); } /* the hang tag's punched hole */
.how-step h3 { font: 700 24px/1 var(--display); letter-spacing: -.03em; padding: 0 4px; }
.how-step > p:last-child { padding: 0 4px; font: 400 14.5px/1.5 var(--body); color: var(--text-2); max-width: 36ch; }
.how-n { margin-top: 10px; padding: 0 4px; font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--text-3); }
.how-vis { min-height: 156px; display: grid; align-content: center; gap: 14px; padding: 18px; background: var(--surface); border-radius: 12px; }
.how-field { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: 999px; background: var(--paper); font: 500 12.5px/1 var(--mono); color: var(--text-3); }
.how-field svg { color: var(--text-2); flex: none; }
.how-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.how-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--lav-l); font: 700 14px/1 var(--display); letter-spacing: -.01em; transition: background-color .15s, color .15s; }
.how-chip:hover { background: var(--lav); }
.how-pick { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.how-pick .ph { width: 92px; aspect-ratio: 4 / 5; border-radius: 8px; }
.how-tag { position: relative; display: grid; gap: 6px; min-width: 0; padding: 12px 14px 12px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.how-tag::before { content: ""; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.how-tag b { font: 700 15px/1.2 var(--display); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.how-tag span { justify-self: start; padding: 4px 8px; border-radius: 6px; background: var(--lime); font: 500 15px/1 var(--mono); font-variant-numeric: tabular-nums; }
.how-split { gap: 0; font-variant-numeric: tabular-nums; }
.how-split-h { padding-bottom: 10px; font: 500 11px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.how-split-l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font: 500 14px/1.2 var(--body); }
.how-split-l b { font: 500 15px/1.2 var(--mono); }
/* the two buys: lime = the coin you wore, lavender = $MERCH */
.how-split-l.is-coin span::before, .how-split-l.is-merch span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--lime); box-shadow: inset 0 0 0 1.5px var(--ink); vertical-align: -1px; }
.how-split-l.is-merch span::before { background: var(--lav); }
.how-split-l.is-make span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); vertical-align: -1px; }

/* Most-merched coins: a ranked rack of the shop's coins */
.mm-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 720px) { .mm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; } }
@media (min-width: 1200px) { .mm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mm-card { display: flex; align-items: center; gap: 14px; min-height: 96px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); transition: border-color .18s; }
.mm-card:hover, .mm-card:focus-visible { border-color: var(--text); }
.mm-rank { flex: none; width: 2ch; font: 500 13px/1 var(--mono); color: var(--text-3); font-variant-numeric: tabular-nums; }
.no-rank .mm-rank { display: none; }
.mm-card .ph { flex: none; width: 72px; aspect-ratio: 1; border-radius: 10px; }
.mm-card .ph img { transition: transform .9s var(--ease); }
.mm-card:hover .ph img { transform: scale(1.05); }
.mm-body { flex: 1; display: grid; gap: 5px; min-width: 0; }
.mm-body b { font: 700 20px/1 var(--display); letter-spacing: -.025em; }
.mm-name, .mm-stat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-name { font: 400 13px/1.3 var(--body); color: var(--text-2); }
.mm-stat { font: 500 12px/1.2 var(--mono); color: var(--text-3); font-variant-numeric: tabular-nums; }
.mm-card .chain-chip { flex: none; color: var(--text-2); }
@media (max-width: 419px) { .mm-card .chain-chip { display: none; } .mm-card .ph { width: 60px; } }

/* ---------- Product cards ---------- */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
@media (min-width: 840px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 18px; } }
@media (min-width: 1200px) { .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pcard { min-width: 0; }
.pcard-link { display: grid; gap: 12px; }
.pcard .ph { aspect-ratio: 4 / 5; }
.pcard .ph img { transition: opacity .45s var(--ease), transform .9s var(--ease); }
.pcard .ph .alt { opacity: 0; }
.pcard-link:hover .ph .alt, .pcard-link:focus-visible .ph .alt { opacity: 1; }
.pcard-link:hover .ph img:not(.alt) { transform: scale(1.03); }
.pcard-link:focus-visible { outline-offset: 4px; }
.pcard-body { display: grid; gap: 4px; }
.pcard-t { font: 500 14.5px/1.3 var(--body); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.pcard-p { font: 400 14px/1.3 var(--body); font-variant-numeric: tabular-nums; }
.pcard-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; font: 400 12.5px/1 var(--body); color: var(--text-3); }
.dots { display: inline-flex; gap: 5px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(23, 23, 23, .25); }
.pcard-coin { font: 500 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.pcard.is-skel .ph { background: var(--well); }
.bar { display: block; height: 12px; margin-top: 10px; background: var(--well); }
.bar.w60 { width: 62%; } .bar.w30 { width: 34%; height: 10px; }
.img-wait::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, transparent 20%, rgba(251, 250, 246, .35) 50%, transparent 80%); transform: translateX(-100%); animation: shimmer 1.4s var(--ease) infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---------- Listing pages ---------- */
.view[data-view="shop"], .view[data-view="product"], .view[data-view="missing"] { padding-top: 18px; padding-bottom: 88px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 400 12.5px/1.4 var(--body); color: var(--text-3); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; }
.crumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--text); }
.list-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 20px 0 22px; }
.list-head h1 { font: 700 clamp(40px, 6vw, 72px)/.92 var(--display); letter-spacing: -.045em; }
.list-count { font: 400 14px/1 var(--body); color: var(--text-3); }

/* ---------- Your creations (/creations) and the tray of ones being made (paste.js) ---------- */
.view[data-view="creations"] { padding-top: 18px; padding-bottom: 88px; }
.cr-head { justify-content: space-between; align-items: end; max-width: 880px; }
.cr-head h1 { margin-bottom: 10px; }
.cr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 880px; }
.cr-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id stage" "meta go"; gap: 8px 16px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); transition: border-color .15s; }
.cr-link:hover { border-color: var(--ink); }
.cr-id { grid-area: id; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.cr-tick { font: 700 22px/1 var(--display); letter-spacing: -.03em; overflow-wrap: anywhere; }
.cr-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 14px/1.2 var(--body); color: var(--text-3); }
.cr-meta { grid-area: meta; display: flex; align-items: center; gap: 8px; min-width: 0; font: 400 12px/1.2 var(--body); color: var(--text-3); }
.cr-meta code { font-size: 12px; }
.cr-stage { grid-area: stage; justify-self: end; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--lav-l); font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.cr-stage.is-pending::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: pulse 1.4s ease-in-out infinite; }
.cr-stage.is-live { background: var(--lime); }
.cr-stage.is-blocked, .cr-stage.is-gone, .cr-stage.is-failed { background: var(--well); color: var(--text-2); }
.cr-go { grid-area: go; justify-self: end; font: 600 13.5px/1 var(--display); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.tray { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 45; width: max-content; max-width: min(340px, calc(100vw - 32px)); background: var(--ink); color: var(--on-ink); border-radius: 18px; box-shadow: 0 12px 32px rgba(23, 23, 23, .28); }
.tray-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 14px; border: 0; background: none; color: inherit; font: 600 13.5px/1.2 var(--display); letter-spacing: -.005em; text-align: left; }
.tray-head:focus-visible { outline-color: var(--lime); border-radius: 18px; }
.tray-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); animation: pulse 1.6s ease-in-out infinite; }
.tray-chev { flex: none; transition: transform .2s var(--ease); }
.tray.is-open .tray-chev { transform: rotate(180deg); }
.tray-body { display: grid; gap: 2px; padding: 4px 14px 8px; border-top: 1px solid rgba(246, 243, 235, .16); }
.tray-list { list-style: none; margin: 0; padding: 0; display: grid; }
.tray-list:empty { display: none; }
.tray-list a { display: flex; align-items: center; min-height: 40px; font: 500 13px/1.3 var(--body); color: var(--ink-2); overflow-wrap: anywhere; }
.tray-list a:hover, .tray-all:hover { color: var(--lime); }
.tray-all { display: inline-flex; align-items: center; min-height: 40px; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-ink); }
body[data-page="creations"] .tray, html.drawer-open .tray { display: none; }
.live-note { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 65; display: flex; align-items: center; gap: 4px 14px; max-width: calc(100vw - 32px); padding: 2px 4px 2px 18px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 600 14px/1.3 var(--display); box-shadow: 0 12px 32px rgba(23, 23, 23, .24); }
.live-note a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
@media (max-width: 719px) {
  .tray { left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .tray:not(.is-open) { max-width: min(250px, calc(100vw - 24px)); }
  .live-note { left: 12px; right: 12px; bottom: calc(66px + env(safe-area-inset-bottom)); border-radius: 16px; }
  .live-note span:first-child { flex: 1; }
}
.cat-tabs { display: flex; gap: 22px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 18px; scrollbar-width: none; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tabs a, .cat-tabs [role=tab] { flex: none; position: relative; display: inline-flex; align-items: center; min-height: 46px; padding: 0; border: 0; background: none; font: 600 15px/1 var(--display); letter-spacing: -.01em; color: var(--text-3); transition: color .15s; }
.cat-tabs a:hover, .cat-tabs [role=tab]:hover { color: var(--text); }
.cat-tabs [aria-current="page"], .cat-tabs [aria-selected="true"] { color: var(--text); }
.cat-tabs [aria-current="page"]::after, .cat-tabs [aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px 2px 0 0; background: var(--text); }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-bottom: 28px; }
.fgroup { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%; }
.fchips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.fchips::-webkit-scrollbar { display: none; }
.fchip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 18px; background: none; font: 500 13px/1 var(--body); transition: background-color .15s, color .15s, border-color .15s; }
.fchip:hover { border-color: var(--text); }
.fchip[aria-pressed="true"] { background: var(--lav); border-color: var(--lav); color: var(--ink); font-weight: 600; }
.fdots { display: flex; flex-wrap: wrap; gap: 4px; }
.fdot { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: none; transition: border-color .15s; }
.fdot i { width: 20px; height: 20px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(23, 23, 23, .25); }
.fdot:hover { border-color: var(--line-2); }
.fdot[aria-pressed="true"] { border-color: var(--text); }
.fclear { margin-left: auto; }
.empty-state, .state-msg { display: grid; gap: 14px; justify-items: start; padding: 40px 0; }
.state-t { font: 700 clamp(28px, 4vw, 44px)/1 var(--display); letter-spacing: -.035em; }
.state-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.state-acts .btn[hidden] { display: none; }
.making-line { font: 500 16px/1.4 var(--body); font-variant-numeric: tabular-nums; color: var(--text); min-height: 1.4em; }
.making .fine { max-width: 52ch; }

/* ---------- Collection page ---------- */
.cover { position: relative; display: grid; min-height: clamp(380px, 64vh, 720px); color: var(--on-ink); overflow: hidden; background: #2A2724; isolation: isolate; }
.cover-media { position: absolute; inset: 0; z-index: -2; }
.cover-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23, 23, 23, .05) 30%, rgba(23, 23, 23, .64)); }
.cover-copy { align-self: end; width: 100%; display: grid; gap: 12px; justify-items: start; padding-top: 80px; padding-bottom: clamp(28px, 6vh, 56px); }
.cover-copy .eyebrow { color: rgba(246, 243, 235, .85); }
.cover h1 { font: 700 clamp(44px, 8vw, 104px)/.9 var(--display); letter-spacing: -.045em; overflow-wrap: anywhere; }
.cover-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font: 400 14px/1 var(--body); }
.cover.plain { min-height: 0; color: var(--text); background: var(--surface); }
.cover.plain::after { display: none; }
.cover.plain .cover-copy { padding-top: 48px; padding-bottom: 40px; }
.cover.plain .cover-copy:has(.cover-logo) { grid-template-columns: auto 1fr; column-gap: 24px; align-items: center; }
.cover.plain .cover-copy:has(.cover-logo) > :not(.cover-logo) { grid-column: 2; }
.cover.plain .cover-copy .eyebrow { color: var(--text-3); }
.cover-logo { grid-row: 1 / span 3; width: clamp(72px, 12vw, 120px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: var(--well); }
.coll-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; padding: 12px 0 8px; }
.coll-share { display: flex; gap: 20px; }
.view[data-view="collection"] .pgrid { padding-top: 6px; }
.coll-state { padding: 28px 0; }
.lookbook { display: grid; gap: 16px; margin-top: 88px; align-items: end; }
.lookbook figure { overflow: hidden; background: var(--well); aspect-ratio: 4 / 5; border-radius: var(--radius); }
.lookbook img { width: 100%; height: 100%; object-fit: cover; }
.look-copy { display: grid; gap: 12px; }
.look-line { font: 700 clamp(28px, 3.8vw, 48px)/1 var(--display); letter-spacing: -.035em; }
@media (min-width: 840px) { .lookbook { grid-template-columns: 1.15fr .85fr; gap: 20px; } .look-b { margin-bottom: 0; } .look-copy { grid-column: 1 / -1; max-width: 640px; margin-top: 12px; } }
.coll-fine { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 64px; margin-bottom: 88px; padding-top: 18px; border-top: 1px solid var(--line); font: 400 13px/1.5 var(--body); color: var(--text-3); }
.coll-fine .ca-chip { color: var(--text-2); }
.printing { display: grid; gap: 14px; max-width: 620px; }
.printing-t { font: 700 clamp(30px, 4vw, 44px)/1 var(--display); letter-spacing: -.035em; }
.printing-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font: 500 14px/1.3 var(--body); color: var(--text-3); }
.printing-steps li { display: flex; align-items: center; gap: 12px; }
.printing-steps li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1px solid currentColor; flex: none; }
.printing-steps li.done { color: var(--text); }
.printing-steps li.done::before { background: var(--text); border-color: var(--text); }
.printing-steps li.now { color: var(--text); font-weight: 600; }
.printing-steps li.now::before { background: var(--lime); border-color: var(--ink); }
.printing-bar { height: 4px; border-radius: 2px; background: var(--well); overflow: hidden; }
.printing-bar i { display: block; width: 30%; height: 100%; border-radius: 2px; background: var(--ink); animation: sweep 1.6s var(--ease) infinite; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
/* The making card's steps: each with its time (the step in progress: its time left; the ones to come: their usual time),
   the current one's lime dot breathing; then the clock (elapsed · to go). */
.making-steps li { flex-wrap: wrap; column-gap: 12px; row-gap: 2px; }
.making-steps .step-n { font: 400 13px/1.3 var(--body); font-variant-numeric: tabular-nums; color: var(--text-3); }
.making-steps .step-n:empty { display: none; }
.making-steps li.now::before { animation: step-now 1.4s var(--ease) infinite; }
@keyframes step-now { 50% { transform: scale(1.35); box-shadow: 0 0 0 4px rgba(214, 255, 63, .35); } }
.making-clock { min-height: 1.3em; font: 500 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--text-3); }
/* A collection whose designs passed, while its product photos print: the designs on their garment colour, then each
   product's tile, its design on the garment until its photo lands. */
.coll-designs { display: grid; gap: 12px; margin: 4px 0 36px; }
.coll-designs-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 12px; }
@media (min-width: 840px) { .coll-designs-row { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } }
.pdesign { margin: 0; display: grid; gap: 10px; }
.pdesign-art { position: relative; display: block; aspect-ratio: 1; border-radius: var(--radius); background: var(--ground, var(--well)); overflow: hidden; }
.pdesign-art img { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; }
.pdesign figcaption { display: grid; gap: 4px; }
.pdesign figcaption b { font: 700 20px/1.1 var(--display); letter-spacing: -.03em; }
.pdesign figcaption span { font: 500 14.5px/1.35 var(--body); }
.pdesign figcaption small { font: 400 13px/1.45 var(--body); color: var(--text-3); }
.ptile .ptile-ph { background: var(--ground, var(--well)); }
.ptile .ph .ptile-art { inset: 20%; width: 60%; height: 60%; object-fit: contain; }
.ptile .ph .ptile-photo { opacity: 0; }
.ptile .ph .ptile-photo.is-in { opacity: 1; }
.ptile-wait { position: absolute; left: 10px; bottom: 10px; padding: 6px 9px; border-radius: 999px; background: var(--lav); color: var(--ink); font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; animation: pulse 1.8s var(--ease) infinite; }

/* ---------- Product page ---------- */
.pdp { display: grid; gap: 28px; padding-top: 14px; }
.pdp-skel .ph { aspect-ratio: 4 / 5; max-width: 640px; }
.gal { min-width: 0; }
.gal-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--pad) * -1); }
.gal-track::-webkit-scrollbar { display: none; }
.gal-item { position: relative; scroll-snap-align: start; aspect-ratio: 4 / 5; overflow: hidden; background: var(--tone, var(--well)); margin: 0; }
.gal-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gal-item.is-square img { object-fit: contain; }
.gal-item.is-detail img { transform: scale(2); transform-origin: var(--fo, 50% 45%); }
.gal-item.is-art { background: var(--paper); }
.gal-item.is-art img { object-fit: contain; padding: 12%; }
.gal-item figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(246, 243, 235, .92); font: 500 11px/1 var(--mono); color: var(--text-2); }
.gal-dots { display: flex; justify-content: center; gap: 6px; padding: 12px 0 0; }
.gal-dots button { width: 28px; height: 28px; padding: 0; border: 0; background: none; display: grid; place-items: center; }
.gal-dots button i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); transition: background-color .2s, transform .2s; }
.gal-dots button[aria-current="true"] i { background: var(--text); transform: scale(1.3); }
@media (min-width: 960px) {
  .pdp { grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr); gap: 56px; align-items: start; }
  .gal-track { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; gap: 10px; margin: 0; }
  .gal-dots { display: none; }
  .pinfo { position: sticky; top: calc(var(--top-h) + 24px); }
}
.pinfo { display: grid; gap: 22px; align-content: start; min-width: 0; }
.pinfo-head { display: grid; gap: 10px; }
.pinfo-coll { justify-self: start; display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--lav); color: var(--ink); font: 500 11.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; transition: background-color .15s; }
.pinfo-coll:hover { background: var(--lav-l); }
.pinfo-t { font: 700 clamp(30px, 3.6vw, 44px)/.98 var(--display); letter-spacing: -.035em; }
.pinfo-p { font: 600 20px/1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pinfo-desc { font: 400 15px/1.6 var(--body); color: var(--text-2); }
.opt { display: grid; gap: 10px; }
.opt-l { display: flex; align-items: baseline; gap: 10px; font: 500 11.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.opt-l b { font: 400 14px/1 var(--body); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.opt-l .linkish { margin-left: auto; font-size: 13px; letter-spacing: 0; text-transform: none; min-height: 32px; }
.opt-buy { display: flex; gap: 10px; align-items: stretch; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.sw { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: none; transition: border-color .15s; }
.sw i { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(23, 23, 23, .25); }
.sw:hover { border-color: var(--line-2); }
.sw[aria-checked="true"] { border: 2px solid var(--text); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg [role=radio] { min-height: 44px; min-width: 52px; padding: 0 16px; border: 1.5px solid var(--line-2); border-radius: 999px; background: transparent; font: 500 14px/1 var(--body); transition: background-color .15s, color .15s, border-color .15s; }
.seg [role=radio]:hover { border-color: var(--text); }
.seg [role=radio][aria-checked="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.seg.tight [role=radio] { min-height: 36px; min-width: 0; padding: 0 12px; font-size: 12.5px; }
.seg [role=radio]:disabled { color: var(--text-3); background: transparent; text-decoration: line-through; cursor: not-allowed; opacity: .6; }
.one-size { font: 400 14px/1 var(--body); padding: 4px 0; color: var(--text-2); }
.qty { display: inline-flex; align-items: stretch; border: 1.5px solid var(--line-2); border-radius: 999px; overflow: hidden; flex: none; }
.qty button { width: 42px; min-height: 51px; border: 0; background: none; font: 400 18px/1 var(--body); }
.qty button:hover:not(:disabled) { background: var(--well); }
.qty button:disabled { color: var(--text-3); cursor: default; }
.qty output { display: grid; place-items: center; min-width: 34px; font: 500 15px/1 var(--body); font-variant-numeric: tabular-nums; }
.qty.sm button { min-height: 36px; width: 34px; font-size: 16px; }
.pay-note { font: 400 13px/1.5 var(--body); color: var(--text-3); margin-top: -10px; }
.pay-note:empty { display: none; }
/* Two checkouts: card (Fourthwall / fallback) and USDC / SOL, each with its note under it */
.pay-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.pay-quick:empty { display: none; }
.pq { display: grid; gap: 4px; }
.pq .pay-note, .pay-btns .pay-note { margin-top: 0; }
.pay-btns { display: grid; gap: 8px; }
.pay-btns .btn + .pay-note { margin-bottom: 4px; }
.route-split { margin: 6px 0 0; max-width: none; font-variant-numeric: tabular-nums; }
.route-split thead th { font: 500 11px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); text-align: right; }
.route-split thead th:first-child { text-align: left; }
.route-split td small, .plain-table td small { display: block; font: 400 11.5px/1.3 var(--body); color: var(--text-3); }
.plain-table thead th { font: 500 11px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); text-align: right; }
.plain-table thead th:first-child { text-align: left; }
/* Crypto checkout dialog */
.pay-dialog { max-width: 520px; }
.pay-sum { display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; background: var(--surface); font: 400 13.5px/1.45 var(--body); font-variant-numeric: tabular-nums; }
.pay-sum-t { font: 500 14px/1.3 var(--body); }
.pay-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--text-2); }
.pay-lines li, .pay-sub { display: flex; justify-content: space-between; gap: 12px; }
.pay-sub { padding-top: 6px; border-top: 1px solid var(--line); font-weight: 600; }
.pay-ship { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0; }
.pay-ship legend { padding: 0; margin-bottom: 4px; }
.pay-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.f-err { font: 500 12.5px/1.4 var(--body); color: var(--text); }
.f-err:empty { display: none; }
.field[aria-invalid="true"] { border-color: var(--text); box-shadow: 0 0 0 3px var(--lav); }
.pick { position: relative; }
.pick-list { position: absolute; z-index: 3; left: 0; right: 0; top: calc(100% - 22px); margin: 0; padding: 6px; list-style: none; max-height: 248px; overflow-y: auto; background: var(--bg); border: 1.5px solid var(--text); border-radius: 12px; box-shadow: 0 12px 28px rgba(23, 23, 23, .18); }
.pick-list [role=option] { min-height: 40px; display: flex; align-items: center; padding: 0 12px; border-radius: 8px; font: 400 14px/1.3 var(--body); cursor: pointer; }
.pick-list [role=option][aria-selected="true"], .pick-list [role=option]:hover { background: var(--lime); color: var(--ink); }
.pick-none { padding: 10px 12px; font: 400 13px/1.4 var(--body); color: var(--text-3); }
/* The Solana Pay request on the order page */
.pay-qr { display: grid; place-items: center; margin: 12px 0; }
.pay-qr svg { width: min(260px, 100%); height: auto; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.pay-wallets { display: grid; gap: 8px; margin: 4px 0 6px; }
.pay-wallet { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.pay-wallet img { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.pay-wallet[disabled] { opacity: .6; cursor: progress; }
.summary .btn { margin: 4px 0 8px; }
.r-copy { font: 500 13px/1.4 var(--mono); }
/* Admin: checkout health */
.health { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.hbox { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-radius: 12px; background: var(--surface); font: 400 13.5px/1.4 var(--body); overflow-wrap: anywhere; }
.hbox.no { background: var(--well); }
.sm-field { min-width: 0; width: 180px; padding: 8px 10px; font-size: 12.5px; margin-right: 6px; }
.pdp-split { display: grid; gap: 10px; }
.pdp-split a, .nk-note a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
/* The napkin: "$25 tee → $12.28 makes it · $6.36 buys $MERCH · $6.36 buys $PEPE", one line over a bar of the three
   shares (makes it: ink, $MERCH: lavender, the coin: lime). The words alone say it; the bar is a glance. */
.napkin { display: grid; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); font-variant-numeric: tabular-nums; }
.nk-line { font: 500 15px/1.5 var(--body); color: var(--text-2); overflow-wrap: anywhere; }
.nk-line b { font: 600 15px/1.2 var(--mono); color: var(--text); }
.nk-price { white-space: nowrap; }
.nk-part { white-space: nowrap; }
.nk-part::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); vertical-align: 0; }
.nk-make::before, i.nk-make { background: var(--ink); }
.nk-merch::before, i.nk-merch { background: var(--lav); }
.nk-coin::before, i.nk-coin { background: var(--lime); }
.nk-bar { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--ink); }
.nk-bar i { display: block; flex: 1 1 0; min-width: 4px; }
.nk-note { font: 400 13px/1.5 var(--body); color: var(--text-3); }
.napkin.is-cart { margin: 4px 0 6px; padding: 12px 14px; }
.napkin.is-cart .nk-line, .napkin.is-cart .nk-line b { font-size: 14px; }
/* in the bag the three shares stack, one per line, so the napkin always fits the drawer */
.napkin.is-cart .nk-line { display: grid; gap: 2px; }
.napkin.is-cart .nk-line .nk-sep { display: none; }
[data-about-napkin] { margin: 14px 0 18px; }
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 54px; cursor: pointer; font: 600 16px/1 var(--display); letter-spacing: -.01em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .25s var(--ease); }
.acc details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.acc .acc-body { padding-bottom: 20px; }
.acc p { font: 400 14px/1.6 var(--body); color: var(--text-2); }
.specs { margin: 0; display: grid; }
.specs > div { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 6px 0; font: 400 14px/1.5 var(--body); }
.specs dt { color: var(--text-3); }
.specs dd { margin: 0; }
.more { margin-top: 88px; }

/* Size guide */
.size-table, .plain-table { width: 100%; border-collapse: collapse; font: 400 14px/1.4 var(--body); font-variant-numeric: tabular-nums; }
.size-table th, .size-table td, .plain-table th, .plain-table td { padding: 11px 8px 11px 0; border-bottom: 1px solid var(--line); text-align: left; }
.size-table thead th { font: 500 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); border-bottom-color: var(--text); }
.size-table tr.on { background: var(--well); }
.plain-table { max-width: 520px; margin: 18px 0 10px; }
.plain-table th { font-weight: 400; color: var(--text-2); }
.plain-table td { text-align: right; padding-right: 0; }
.plain-table tr.sum th, .plain-table tr.sum td { font-weight: 600; color: var(--text); border-top: 1px solid var(--text); }

/* ---------- How it works ---------- */
.view[data-view="about"] { padding-top: 18px; padding-bottom: 96px; }
.about { max-width: 920px; }
.about-head { display: grid; gap: 16px; padding: 24px 0 8px; }
.about-head h1 { font: 700 clamp(44px, 7vw, 84px)/.9 var(--display); letter-spacing: -.045em; }
.about-sec { display: grid; gap: 14px; padding-top: 48px; margin-top: 48px; border-top: 1px solid var(--line); }
.about-sec h2 { font: 700 clamp(24px, 3.2vw, 34px)/1 var(--display); letter-spacing: -.03em; }
.about-sec h3 { font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; margin-top: 18px; }
.about-sec > p { font: 400 15.5px/1.65 var(--body); color: var(--text-2); max-width: 66ch; }
.about-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 22px; counter-reset: s; }
.steps li { counter-increment: s; display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid var(--text); }
.steps li::before { content: "0" counter(s); font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--text-3); }
.steps b { font: 700 21px/1.1 var(--display); letter-spacing: -.025em; }
.steps p { font: 400 14.5px/1.6 var(--body); color: var(--text-2); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.wallet-row { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.wallet-row code { font-size: 13.5px; overflow-wrap: anywhere; }
.wallet-chain { display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.wallet-chain img { width: 16px; height: 16px; }
.wallet-actions { display: flex; flex-wrap: wrap; gap: 0 22px; }
.holdings { display: grid; gap: 8px; }
.hold-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0 24px; }
.hold-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hold-t { font: 700 15px/1 var(--display); letter-spacing: -.01em; }
.hold-n { font: 400 14px/1 var(--body); font-variant-numeric: tabular-nums; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; }
.feed:empty { display: none; }
.rcpt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font: 400 14px/1.5 var(--body); }
.rcpt-who b { font-weight: 600; }
.rcpt-who a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.rcpt time { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.buys2 { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 13px; color: var(--text-3); }
.buy2 { display: inline-flex; align-items: center; gap: 6px; }
.buy2.is-done { color: var(--text); }
.buy2 a { text-decoration: underline; text-underline-offset: 3px; }
.feed-state { font: 400 13px/1 var(--body); color: var(--text-3); }
.feed-state[data-s="live"] { color: var(--text); }
.feed-state[data-s="live"]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--lime); box-shadow: inset 0 0 0 1.5px var(--ink); vertical-align: 0; }
.feed-empty { font: 400 15px/1.5 var(--body); color: var(--text-2); padding: 8px 0; }
.lb-t { margin-top: 28px !important; }
.lb { list-style: none; margin: 0; padding: 0; display: grid; }
.lb li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px solid var(--line); font: 400 14px/1 var(--body); }
.lb-rank { color: var(--text-3); font-variant-numeric: tabular-nums; }
.lb-coin { display: inline-flex; align-items: center; gap: 10px; font: 700 15px/1 var(--display); letter-spacing: -.01em; min-height: 44px; }
.lb-coin:hover { text-decoration: underline; text-underline-offset: 3px; }
.lb-logo { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--well); }
.lb-n { font-variant-numeric: tabular-nums; color: var(--text-2); }
.lb-empty { display: block !important; padding: 14px 0; color: var(--text-2); }
.size-guides { display: grid; gap: 24px; margin-top: 8px; }
@media (min-width: 760px) { .size-guides { grid-template-columns: 1fr 1fr; gap: 36px; } }
.pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.code-box { border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; }
.code-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 6px 6px 8px; border-bottom: 1px solid var(--line); }
.code { margin: 0; padding: 16px; background: var(--paper); overflow-x: auto; font: 500 12.5px/1.65 var(--mono); white-space: pre; }
.link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.link-row code { font-size: 13px; overflow-wrap: anywhere; color: var(--text-2); }

/* ---------- Footer ---------- */
/* The $MERCH coin strip, above the footer: a shelf label for the shop's own coin */
.coin-strip { border-top: 1px solid var(--line); }
.coin-strip-in { display: grid; gap: 18px; padding-top: 28px; padding-bottom: 28px; align-items: center; }
@media (min-width: 1080px) { .coin-strip-in { grid-template-columns: minmax(0, 1fr) auto auto; gap: 32px; } }
.cs-id { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }
.cs-mark { flex: none; width: 54px; height: 40px; }
.cs-name { flex: 1 1 220px; min-width: 0; display: grid; gap: 4px; }
.cs-name h2 { font: 700 30px/1 var(--display); letter-spacing: -.035em; }
.cs-name p { font: 400 14px/1.45 var(--body); color: var(--text-2); }
.cs-chain { color: var(--text-2); }
.cs-ca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cs-pad { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.cs-ca-btn { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line-2); border-radius: 999px; background: var(--paper); color: var(--text); cursor: pointer; transition: border-color .15s; }
.cs-ca-btn:hover { border-color: var(--text); }
.cs-ca-btn .k { padding: 3px 6px; border-radius: 4px; background: var(--lime); font: 500 11px/1 var(--mono); letter-spacing: .04em; }
.cs-ca-btn code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.cs-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.cs-acts:not(:has(> :not([hidden]))) { display: none; }

/* The footer is ink: "From CA to cotton." (CA in lime, cotton. in lavender) with the paper hang tag swaying beside it,
   then the links in paper. */
.foot { background: var(--ink); color: var(--on-ink); padding: 56px 0 40px; }
.foot .wrap { display: grid; gap: 36px; }
.foot :focus-visible { outline-color: var(--lime); }
.foot-band { position: relative; display: grid; gap: 24px; align-items: center; padding-bottom: 8px; }
@media (min-width: 840px) { .foot-band { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } }
.foot-band-copy { display: grid; gap: 18px; }
.foot-hook { font: 700 clamp(52px, 9vw, 128px)/.88 var(--display); letter-spacing: -.05em; max-width: 9ch; }
.foot-hook em { font-style: normal; }
.foot-hook .is-lime { color: var(--lime); }
.foot-hook .is-lav { color: var(--lav); }
.foot-hook.sm { font-size: clamp(38px, 6vw, 64px); max-width: none; }
.foot-split { font: 500 clamp(15px, 1.8vw, 18px)/1.45 var(--body); color: var(--ink-2); max-width: 44ch; }
.foot-tag { justify-self: start; width: clamp(150px, 22vw, 270px); padding: 12px 18px 0 0; }
@media (min-width: 840px) { .foot-tag { justify-self: end; } }
.foot-tag img { width: 100%; height: auto; transform-origin: 26% 92%; }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; padding-top: 32px; border-top: 1px solid rgba(246, 243, 235, .16); }
.foot-brand { grid-column: 1 / -1; display: grid; gap: 10px; justify-items: start; }
.foot-brand .fine { color: var(--ink-2); }
@media (min-width: 900px) { .foot-cols { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); } .foot-brand { grid-column: auto; } }
.foot-word { width: 160px; height: auto; }
.foot .brand-txt { color: var(--on-ink); }
.foot-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.foot-links h2 { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lav); margin-bottom: 10px; }
.foot-links a, .foot-ca { min-height: 36px; display: inline-flex; align-items: center; padding: 0; border: 0; background: none; font: 400 14px/1 var(--body); color: var(--ink-2); transition: color .15s; }
.foot-links a:hover, .foot-ca:hover { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.foot-ca { gap: 10px; cursor: pointer; }
.foot-ca code { font-size: 13px; color: var(--on-ink); }
.foot-coin { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding-top: 20px; border-top: 1px solid rgba(246, 243, 235, .16); }
.foot-coin > b { font: 700 16px/1 var(--display); letter-spacing: -.01em; color: var(--lime); }
.foot-coin a { min-height: 36px; display: inline-flex; align-items: center; font: 400 14px/1 var(--body); color: var(--ink-2); }
.foot-coin a:hover { color: var(--lime); }
.foot-status { font: 400 14px/1.55 var(--body); color: var(--ink-2); max-width: 80ch; }
html:not([data-store]) .foot-status, html[data-store="open"][data-buys="on"] .foot-status { display: none; }
.foot-legal { font: 400 12.5px/1.6 var(--body); color: rgba(246, 243, 235, .6); max-width: 80ch; padding-top: 24px; border-top: 1px solid rgba(246, 243, 235, .16); }

/* ---------- Drawer (bag) + dialogs ---------- */
.drawer-root { position: fixed; inset: 0; z-index: 50; }
.scrim { position: absolute; inset: 0; background: rgba(23, 23, 23, .45); }
.drawer { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; max-height: 92dvh; display: flex; flex-direction: column; background: var(--bg); border-radius: 20px 20px 0 0; box-shadow: 0 -18px 40px rgba(23, 23, 23, .2); }
.drawer:focus { outline: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 22px; border-bottom: 1px solid var(--line); flex: none; }
.drawer-t { font: 700 22px/1 var(--display); letter-spacing: -.03em; }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 18px 22px calc(24px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; }
/* a grid column grows to its widest unbreakable content: keep everything in the bag inside the drawer's width */
.drawer-body > *, .drawer-body .napkin, .drawer-body .napkin > * { min-width: 0; }
@media (min-width: 720px) { .drawer { top: 0; left: auto; width: 460px; max-height: none; border-radius: 0; box-shadow: -18px 0 40px rgba(23, 23, 23, .16); } .drawer-body { padding: 22px 26px 32px; } }
.dialog-root { position: fixed; inset: 0; z-index: 55; display: grid; place-items: end center; }
.dialog { position: relative; width: 100%; max-width: 560px; max-height: 92dvh; overflow-y: auto; background: var(--bg); border-radius: 20px 20px 0 0; box-shadow: 0 -18px 40px rgba(23, 23, 23, .2); }
.dialog:focus { outline: none; }
.dialog-body { display: grid; gap: 16px; padding: 20px 22px calc(22px + env(safe-area-inset-bottom)); }
.d-row { display: grid; gap: 8px; }
.field { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--paper); font: 400 14px/1.45 var(--body); color: var(--text); resize: vertical; -webkit-appearance: none; appearance: none; }
.field::placeholder { color: var(--text-3); opacity: 1; }
.field:focus-visible { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px var(--lime); }
@media (min-width: 720px) { .dialog-root { place-items: center; } .dialog { border-radius: 20px; } }

/* ---------- Bag (drawer + /cart) ---------- */
.ship-to { display: grid; gap: 8px; }
.cart-note { font: 400 13px/1.5 var(--body); color: var(--text-2); padding: 12px 14px; border-radius: 12px; background: var(--surface); }
.cgroup { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--text); }
.cgroup-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cgroup-h .linkish { font-size: 13px; }
.clines { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.cline { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.cline.is-off { opacity: .55; }
.cline-img { display: block; aspect-ratio: 4 / 5; background: var(--well); overflow: hidden; }
.cline-img img { width: 100%; height: 100%; object-fit: cover; }
.cline-main { display: grid; gap: 4px; min-width: 0; }
.cline-t { font: 500 14.5px/1.3 var(--body); }
.cline-t:hover { text-decoration: underline; text-underline-offset: 3px; }
.cline-v { font: 400 13px/1.4 var(--body); color: var(--text-3); }
.cline-row { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.cline-row .linkish { font-size: 13px; min-height: 32px; }
.cline-p { font: 500 14px/1.2 var(--body); font-variant-numeric: tabular-nums; }
.csum { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); font: 400 14px/1.5 var(--body); font-variant-numeric: tabular-nums; }
.csum p { display: flex; justify-content: space-between; gap: 12px; }
.csum-total { font-weight: 600; padding-top: 6px; }
.csplit { margin: 4px 0 10px; font: 400 13px/1.5 var(--body); color: var(--text-3); }
.cart-empty { display: grid; gap: 12px; justify-items: start; padding: 12px 0; }
.cart-empty-big { font: 700 26px/1 var(--display); letter-spacing: -.03em; }
.cart-wrap { padding-top: 32px; padding-bottom: 72px; max-width: 860px; }
.cart-h { font: 700 clamp(40px, 7vw, 68px)/.92 var(--display); letter-spacing: -.045em; }
.cart-page-body { display: grid; gap: 22px; }
.sec-head .eyebrow { margin-bottom: 2px; }
@media (min-width: 720px) { .cart-page-body .cline { grid-template-columns: 112px minmax(0, 1fr) auto; } }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 70; max-width: calc(100vw - 32px); transform: translate(-50%, 16px); opacity: 0; background: var(--ink); color: var(--on-ink); border-radius: 999px; padding: 12px 20px; font: 500 13.5px/1.35 var(--body); box-shadow: 0 10px 28px rgba(23, 23, 23, .24); transition: opacity .2s ease-out, transform .2s ease-out; pointer-events: none; overflow-wrap: anywhere; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Order page ---------- */
.order-wrap { display: grid; gap: 32px; padding-top: 32px; padding-bottom: 64px; }
.order-copy { display: grid; gap: 16px; align-content: start; min-width: 0; }
.order-title { font: 700 clamp(38px, 7vw, 72px)/.92 var(--display); letter-spacing: -.045em; }
.order-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.timeline { list-style: none; margin: 4px 0 0 6px; padding: 0; display: grid; border-left: 1px solid var(--line-2); }
.tl-step { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-height: 44px; padding: 10px 0 8px 22px; font: 400 13px/1.4 var(--body); color: var(--text-3); }
.tl-step b { font: 700 16px/1.2 var(--display); letter-spacing: -.015em; color: var(--text-3); }
.tl-dot { position: absolute; left: -6px; top: 14px; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg); }
.tl-step.done b, .tl-step.now b, .tl-step.refunded b { color: var(--text); }
.tl-step.done .tl-dot { background: var(--text); border-color: var(--text); }
.tl-step.now .tl-dot { background: var(--lime); border: 1.5px solid var(--ink); }
.tl-step.now span { color: var(--text); }
.tl-step.refunded .tl-dot { background: var(--bg); border-color: var(--text); }
.order-stage { align-self: start; }
.summary { display: grid; gap: 2px; padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; font: 400 14px/1.6 var(--body); font-variant-numeric: tabular-nums; }
.summary .r-line { display: flex; justify-content: space-between; gap: 12px; }
.summary b { font-weight: 600; }
.summary hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; width: 100%; }
.summary .r-brand { font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.summary .r-item { color: var(--text-3); font-size: 13px; }
.summary .r-total { font-weight: 600; }
.summary .r-hold, .summary .r-fine { font-size: 13px; color: var(--text-3); }
.summary .r-tx { text-decoration: underline; text-underline-offset: 3px; }
.r-mock { width: 140px; height: 175px; margin: 0 0 14px; object-fit: cover; background: var(--well); border-radius: 10px; }
@media (min-width: 960px) { .order-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; padding-top: 56px; } }

/* ---------- Operator console ---------- */
.card { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--paper); padding: 18px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.admin-tag { margin-left: 8px; }
.admin { display: grid; gap: 16px; padding-top: 24px; padding-bottom: 48px; }
/* Console tabs: one group of cards at a time; the count is what needs a look there. */
.admin-tabs { position: sticky; top: 64px; z-index: 20; display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.admin-tabs [role=tab] { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--line-2); border-radius: 999px; background: transparent; font: 600 14px/1 var(--body); white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; }
.admin-tabs [role=tab]:hover { border-color: var(--text); }
.admin-tabs [role=tab][aria-selected="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.admin-tabs [role=tab]:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.tab-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #C3302A; color: #fff; font: 600 12px/22px var(--body); text-align: center; }
.tab-n[hidden] { display: none; }
.admin-body { display: grid; gap: 16px; }
.gate { max-width: 520px; margin: 40px auto; }
.gate-title { font: 700 36px/.95 var(--display); letter-spacing: -.035em; }
.gate-form, .inline-form, .sig-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gate-form .field { flex: 1; min-width: 200px; }
.inline-form .field { max-width: 260px; }
.sig-form .field { min-width: 180px; flex: 1; padding: 8px 10px; font-size: 12.5px; }
.sig-form .field.amt { min-width: 84px; max-width: 96px; flex: none; }
.qs .sig-form { margin-top: 6px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.alerts { display: grid; gap: 8px; }
.alerts:empty { display: none; }
.alert { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px 12px 20px; border: 1px solid var(--text); border-radius: 12px; background: var(--paper); box-shadow: inset 6px 0 0 var(--lime); font: 400 13px/1.45 var(--body); }
.alert p { min-width: 0; overflow-wrap: anywhere; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 13px/1.4 var(--body); }
.checks li { display: inline-flex; gap: 6px; align-items: center; }
.checks li.ok span { font-weight: 600; }
.checks li.no { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.launch { list-style: none; margin: 0; padding: 0; display: grid; font: 400 13px/1.45 var(--body); }
.launch:empty { display: none; }
.launch li { display: grid; grid-template-columns: 22px minmax(0, 150px) minmax(0, 1fr); gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.launch .mark { font-weight: 700; text-align: center; }
.launch .why { color: var(--text-2); overflow-wrap: anywhere; min-width: 0; }
.launch li.warn .mark { color: var(--text-3); }
.launch li.fail { background: var(--well); }
@media (max-width: 559px) { .launch li { grid-template-columns: 22px minmax(0, 1fr); } .launch .why { grid-column: 2; } }
.tbl-wrap { overflow-x: auto; min-width: 0; }
.tbl-wrap:has(table:empty) { display: none; }
.tbl { width: 100%; border-collapse: collapse; font: 400 13px/1.4 var(--body); font-variant-numeric: tabular-nums; }
.tbl th { text-align: left; font: 500 10.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 6px 8px; border-bottom: 1px solid var(--text); white-space: nowrap; }
.tbl td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl td small { color: var(--text-3); }
.tbl .num { text-align: right; white-space: nowrap; }
.tbl .note { max-width: 280px; color: var(--text-2); overflow-wrap: anywhere; }
.tbl .acts { white-space: nowrap; }
.tbl .acts .btn + .btn { margin-left: 6px; }
.tbl a { text-decoration: underline; text-underline-offset: 3px; }
.tbl .empty, .empty { color: var(--text-3); padding: 14px 8px; font: 400 13px/1.5 var(--body); }
/* Review tab: a person's decision on held, blocked and reported coins */
.review-rule { margin: 0 0 10px; }
.review-art { display: block; width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: var(--line); }
.review-tbl .why b { display: block; }
.review-hist summary { cursor: pointer; padding: 14px 0 8px; }
.st { display: inline-block; padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 999px; font: 500 10.5px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.st-confirmed, .st-shipped, .st-delivered, .st-pass { border-color: var(--lav); background: var(--lav); color: var(--ink); }
.st-refunded, .st-failed, .st-block, .st-flag { border-color: var(--text); background: var(--text); color: var(--bg); }
.queue-sum { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: end; }
.qs { display: grid; gap: 2px; }
.qs b { font: 700 30px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.qs span { font: 400 12px/1.3 var(--body); color: var(--text-2); }

/* ---------- Entrance start state (only while Motion is expected) ---------- */
html.fx-pending [data-enter] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.fx-pending [data-enter] { opacity: 1; }
  .btn, .toast, .pcard .ph img, .ccard .ph img, .cat-tile .ph img, .ph img[data-swap], .gal-item img[data-swap], .edit-media img, .sw, .acc summary::after, .ccard-go, .how-chip, .search { transition: none; }
  .making-steps li.now::before, .ptile-wait, .printing-bar i, .search-msg.busy::after, .img-wait::before, .search.is-busy .search-go, .paste-msg.busy::after, .tray-dot, .cr-stage.is-pending::before { animation: none; }
  .paste-row, .paste-clip, .paste-strip, .cr-link, .tray-chev, .ptile .ph .ptile-photo { transition: none; }
}
.coin-links { display: flex; flex-wrap: wrap; gap: 0 22px; }

/* ---------- Footer policy links + policy pages (/terms, /refunds, /privacy, /takedown) ---------- */
.foot-policies { display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot-policies a { min-height: 40px; display: inline-flex; align-items: center; font: 400 13.5px/1 var(--body); color: var(--ink-2); transition: color .15s; }
.foot-policies a:hover { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.foot-policies + .foot-legal { padding-top: 16px; }
.policy { display: grid; gap: 28px; padding-top: 32px; padding-bottom: 72px; max-width: calc(760px + 2 * var(--pad)); }
.policy-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.policy-nav a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; font: 500 14px/1 var(--body); color: var(--text-2); transition: background .15s, color .15s, border-color .15s; }
.policy-nav a:hover { border-color: var(--text); color: var(--text); }
.policy-nav a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.policy-head { display: grid; gap: 14px; }
.policy-title { font: 700 clamp(38px, 7vw, 64px)/.95 var(--display); letter-spacing: -.045em; }
.policy-body { display: grid; gap: 12px; max-width: 68ch; }
.policy-body h2 { font: 700 22px/1.2 var(--display); letter-spacing: -.03em; margin-top: 18px; }
.policy-body p, .policy-body li { font: 400 16px/1.6 var(--body); color: var(--text-2); }
.policy-body b { color: var(--text); font-weight: 600; }
.policy-body ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.policy-link { text-decoration: underline; text-decoration-color: var(--lav); text-decoration-thickness: 2px; text-underline-offset: 3px; color: var(--text); }
.policy-link:hover { text-decoration-color: var(--text); }
.policy-ask { margin-top: 24px; padding: 18px 20px; border-radius: var(--radius); background: var(--surface); font: 600 16px/1.4 var(--display); color: var(--text); }
@media (min-width: 960px) { .policy { padding-top: 48px; } }

/* the order page's napkin bar (same colours as the product napkin) */
.receipt .nk-bar, #receipt .nk-bar { margin: 6px 0 2px; }