/* ==========================================================================
   Storefront design system — flat, dark-first, crisp borders.
   No gradients anywhere: solid surfaces separated by 1px borders.
   Buttons: exactly four looks — .btn (neutral), .btn.primary (solid blue),
   .btn.ghost, .btn.danger — pill-shaped, in .sm / default / .lg.
   Motion: cross-page View Transitions, scroll reveals, hover lift; all off
   under prefers-reduced-motion. No web fonts, no CDN — CSP-clean.
   ========================================================================== */

:root, :root[data-theme="dark"] {
  --bg: #050506; --bg-soft: #0a0a0c; --band: #0a0a0c;
  --surface: #0c0c0e; --surface-2: #131316; --surface-3: #1a1a1e; --surface-4: #222227;
  --line: #1f1f23; --line-2: #2a2a2f; --line-3: #3a3a41;
  --text: #f5f5f7; --text-2: #a8a8b0; --text-3: #6f6f78;
  --accent: #1a73ff; --accent-rgb: 26,115,255; --accent-hover: #3b87ff; --on-accent: #ffffff;
  --green: #22c55e; --green-rgb: 34,197,94;
  --violet: #8b7cf6; --violet-rgb: 139,124,246;
  --blue: #1a73ff; --blue-rgb: 26,115,255;
  --gold: #f5b544; --gold-rgb: 245,181,68;
  --red: #f26d6d; --red-rgb: 242,109,109;
  --glass: rgba(10,10,12,.86);
  --shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 12px 32px -18px rgba(0,0,0,.9);
  --shadow-lg: 0 24px 60px -24px rgba(0,0,0,.95);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4f5f7; --bg-soft: #eceef1; --band: #ffffff;
  --surface: #ffffff; --surface-2: #f5f6f8; --surface-3: #eceef2; --surface-4: #e1e4e9;
  --line: #e2e5ea; --line-2: #d3d8df; --line-3: #b9c0ca;
  --text: #0c0f14; --text-2: #4a5260; --text-3: #818a97;
  --accent: #0b63e5; --accent-rgb: 11,99,229; --accent-hover: #0a56c7; --on-accent: #ffffff;
  --green: #15a34a; --green-rgb: 21,163,74;
  --violet: #6d5ce8; --violet-rgb: 109,92,232;
  --blue: #0b63e5; --blue-rgb: 11,99,229;
  --gold: #c7820f; --gold-rgb: 199,130,15;
  --red: #d64545; --red-rgb: 214,69,69;
  --glass: rgba(255,255,255,.9);
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 10px 26px -18px rgba(16,24,40,.25);
  --shadow-lg: 0 22px 50px -24px rgba(16,24,40,.3);
  color-scheme: light;
}
:root {
  --r-xs: 8px; --r-sm: 10px; --r: 14px; --r-lg: 18px; --r-xl: 24px;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Roboto Mono", monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ring: 0 0 0 3px rgba(var(--accent-rgb), .28);
  --maxw: 1320px;
}

/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(var(--accent-rgb), .3); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.ic { width: 18px; height: 18px; flex: none; stroke-width: 1.9; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
main { flex: 1; padding: 26px 0 72px; }
.muted { color: var(--text-2); } .faint { color: var(--text-3); }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a.link { color: var(--accent); font-weight: 600; }
a.link:hover { text-decoration: underline; }
.label-caps { font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }

/* ── page transitions ─────────────────────────────────────────────────── */
/* Page change: the new page's content slides in a little and fades up; the
   header and footer stay put. Done on arrival with plain CSS and no page
   snapshots — cross-document view transitions captured the whole (tall) page
   as one image, and on some graphics cards that briefly drew it white. */
html { background: var(--bg); }
/* It slides with `left`, not a transform, and keeps nothing once it ends: an
   element holding a transform pins every position:fixed element inside it (the
   filter sheet, the payment screen) to itself instead of to the screen. */
.page-enter { position: relative; left: 0; animation: page-in .34s cubic-bezier(0,0,.2,1) backwards; }
@keyframes page-in { from { opacity: 0; left: 14px; } }

/* ── scroll reveal ────────────────────────────────────────────────────── */
/* Nothing is hidden at first paint. The script adds .pre only to elements that
   are still below the fold, and .in when they scroll into view. */
.reveal.pre { opacity: 0; transform: translateY(6px); }
.reveal.pre.in { opacity: 1; transform: none; transition: opacity .4s ease-out, transform .4s ease-out; transition-delay: var(--d, 0s); }

/* ── progress bar ─────────────────────────────────────────────────────── */
#progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 100; background: var(--accent); transition: width .4s var(--ease), opacity .3s; opacity: 0; }
#progress.go { opacity: 1; width: 70%; transition: width 8s cubic-bezier(.1,.6,.1,1); }

/* ── buttons: the only four ───────────────────────────────────────────── */
.btn { --h: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--text); font: 650 14px/1 var(--sans); letter-spacing: -.005em;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background .16s var(--ease), border-color .16s var(--ease), transform .12s var(--ease), color .16s; }
.btn:hover { background: var(--surface-3); border-color: var(--line-3); }
.btn:active { transform: scale(.97); }
.btn .ic { width: 17px; height: 17px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.btn.danger { background: rgba(var(--red-rgb), .1); border-color: rgba(var(--red-rgb), .35); color: var(--red); }
.btn.danger:hover { background: rgba(var(--red-rgb), .16); }
.btn.sm { --h: 34px; padding: 0 13px; font-size: 13px; }
.btn.lg { --h: 50px; padding: 0 24px; font-size: 15.5px; }
.btn.block { width: 100%; }
.btn.icon { width: var(--h); padding: 0; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }

/* ── forms ────────────────────────────────────────────────────────────── */
.field { display: block; margin-bottom: 16px; }
.field > .lbl { display: flex; justify-content: space-between; font: 620 13px var(--sans); color: var(--text-2); margin-bottom: 7px; }
.input, select.input, textarea.input { width: 100%; height: 46px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--bg-soft); padding: 0 14px; outline: none; transition: border-color .15s, box-shadow .15s; }
textarea.input { height: auto; min-height: 112px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.input:hover { border-color: var(--line-3); }
.input:focus { border-color: var(--accent); box-shadow: var(--ring); }
.input.code { font: 600 22px var(--mono); letter-spacing: .4em; text-align: center; }
.input-icon { position: relative; display: block; }
.input-icon > .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.input-icon > .input { padding-left: 42px; }
.hint { font-size: 12.5px; color: var(--text-3); margin-top: 7px; }
.hint .ic, p .ic, .faint .ic { display: inline-block; vertical-align: -2px; width: 13px; height: 13px; margin-right: 3px; }
.check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; color: var(--text-2); }
.check input { width: 17px; height: 17px; accent-color: var(--accent); }

/* ── callouts & toasts ────────────────────────────────────────────────── */
.note { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: 14px; font-size: 13.5px;
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text-2); }
.note > .ic { color: var(--accent); margin-top: 1px; }
.note b, .note strong { color: var(--text); }
.note.warn { border-color: rgba(var(--gold-rgb), .35); } .note.warn > .ic { color: var(--gold); }
.note.bad { border-color: rgba(var(--red-rgb), .35); } .note.bad > .ic { color: var(--red); }
.note.info > .ic { color: var(--accent); }
.toasts { position: fixed; right: 20px; top: 96px; z-index: 90; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); }
.toast { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px 13px 15px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); font-size: 14px; animation: toast-in .4s var(--ease) both; }
.toast.ok > .ic { color: var(--green); } .toast.error > .ic { color: var(--red); } .toast > .ic { color: var(--accent); }
.toast .x { margin-left: auto; background: none; border: 0; color: var(--text-3); cursor: pointer; padding: 2px; }
.toast.hide { animation: toast-out .3s var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }

/* ── header: a floating bordered bar ──────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 50; padding: 14px 0 6px; }
.top .shell { display: flex; align-items: center; gap: 8px; height: 66px; padding: 0 10px 0 18px;
  background: var(--glass); border: 1px solid var(--line-2); border-radius: 26px;
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); transition: box-shadow .25s, border-color .25s; }
.top.scrolled .shell { box-shadow: var(--shadow-lg); border-color: var(--line-3); }
.brand { display: flex; align-items: center; gap: 10px; font: 780 18px var(--sans); letter-spacing: -.02em; min-width: 0; flex: none; margin-right: 14px; }
.brand .mark { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; font: 850 16px var(--sans); background: var(--text); color: var(--bg); }
.brand .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.mainnav { display: flex; align-items: center; gap: 2px; }
.mainnav > a, .mainnav summary { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 16px; border-radius: 999px;
  color: var(--text-2); font: 600 15px var(--sans); transition: color .15s, background .15s; cursor: pointer; list-style: none; }
.mainnav summary::-webkit-details-marker { display: none; }
.mainnav > a:hover, .mainnav summary:hover, .mainnav details[open] summary { color: var(--text); background: var(--surface-2); }
.mainnav > a.on, .mainnav summary.on { color: var(--accent); background: rgba(var(--accent-rgb), .14); }
.mainnav summary .ic { width: 15px; height: 15px; transition: transform .2s; }
.mainnav details[open] summary .ic { transform: rotate(180deg); }
.navdrop { position: relative; }
.navdrop .pop { left: 0; right: auto; top: 50px; width: 280px; }
.navdrop .pop a .emo { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); border: 1px solid var(--line-2); font-size: 15px; flex: none; }
.navdrop .pop a small { display: block; color: var(--text-3); font-size: 12px; font-weight: 500; }
.tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.searchbox { position: relative; }
.searchbox input { width: 320px; height: 46px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2);
  padding: 0 16px 0 44px; outline: none; transition: border-color .15s, box-shadow .15s, width .3s var(--ease); font-size: 15px; }
.searchbox input:focus { border-color: var(--accent); box-shadow: var(--ring); }
.searchbox > .ic { position: absolute; left: 16px; top: 14px; color: var(--text-3); width: 18px; height: 18px; }
.searchbox kbd { display: none; }
.iconbtn { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid transparent;
  background: none; color: var(--text-2); cursor: pointer; position: relative; transition: all .15s; }
.iconbtn:hover { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.iconbtn .dot { position: absolute; top: 6px; right: 5px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 99px;
  background: var(--red); color: #fff; font: 700 10px/17px var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.theme-toggle .sun { display: none; } :root[data-theme="light"] .theme-toggle .sun { display: block; } :root[data-theme="light"] .theme-toggle .moon { display: none; }
.navlink { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 999px; font: 650 15px var(--sans); color: var(--text); }
.navlink:hover { background: var(--surface-2); }
.walletchip { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 13px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface-2); font: 680 14px var(--sans); transition: border-color .15s; }
.walletchip:hover { border-color: var(--accent); }
.walletchip .ic { color: var(--accent); }
.avatar { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; font: 750 15px var(--sans);
  color: var(--accent); background: rgba(var(--accent-rgb), .14); border: 1px solid rgba(var(--accent-rgb), .3); cursor: pointer; list-style: none; flex: none; }
.avatar::-webkit-details-marker { display: none; }
.avatar.lg { width: 64px; height: 64px; font-size: 24px; }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.pop { position: absolute; right: 0; top: 54px; width: 260px; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 18px; box-shadow: var(--shadow-lg); padding: 7px; z-index: 60; transform-origin: top; animation: pop-in .16s var(--ease) both; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.pop a, .pop button { display: flex; width: 100%; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 11px; color: var(--text-2);
  font: 600 14px var(--sans); background: none; border: 0; cursor: pointer; text-align: left; }
.pop a:hover, .pop button:hover { background: var(--surface-2); color: var(--text); }
.pop .who { display: flex; gap: 11px; align-items: center; padding: 10px 11px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.pop .who b { display: block; font-size: 14px; color: var(--text); }
.pop .who span { font-size: 12px; color: var(--text-3); display: block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.pop hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.burger { display: none; }
.mobnav { display: none; }

/* ── mobile tab bar ───────────────────────────────────────────────────── */
.tabbar { display: none; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 50; background: var(--glass);
  border: 1px solid var(--line-2); border-radius: 22px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 6px; margin-bottom: env(safe-area-inset-bottom); }
.tabbar nav { display: grid; grid-template-columns: repeat(5, 1fr); }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; font: 600 10.5px var(--sans); color: var(--text-3); border-radius: 16px; position: relative; }
.tabbar a.on { color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.tabbar a .dot { position: absolute; top: 3px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 99px; background: var(--red); }

/* ── layout primitives ────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xl); padding: 24px; }
.card.soft { background: var(--surface-2); }
.card.pad-lg { padding: 30px; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.card-h h2, .h2 { font: 720 18px/1.3 var(--sans); letter-spacing: -.015em; display: flex; align-items: center; gap: 10px; }
.card-h h2 > .ic { color: var(--accent); }
.h-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); border: 1px solid var(--line-2); color: var(--accent); flex: none; }
.h-ico .ic { width: 17px; height: 17px; }
.inset { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.stack > * + * { margin-top: 16px; }
.stack-sm > * + * { margin-top: 10px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.split { display: grid; grid-template-columns: minmax(0,1fr) 420px; gap: 28px; align-items: start; }
.narrow { max-width: 480px; margin: 0 auto; }
.sticky { position: sticky; top: 104px; }
.crumbs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14.5px; font-weight: 550; color: var(--text-2); margin: 6px 0 20px; }
.crumbs a:hover { color: var(--text); }
.crumbs .ic { width: 15px; height: 15px; color: var(--text-3); }
.crumbs .sep { color: var(--text-3); }
.page-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 24px; flex-wrap: wrap; }
.page-h h1 { font: 800 clamp(26px, 3.4vw, 36px)/1.1 var(--sans); letter-spacing: -.032em; }
.page-h p { color: var(--text-2); margin-top: 8px; max-width: 660px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.eyebrow .ic { width: 15px; height: 15px; color: var(--accent); }

/* ── sections ─────────────────────────────────────────────────────────── */
section.sec { padding: 52px 0 6px; }
.sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.sec-h h2 { font: 780 clamp(22px, 2.6vw, 28px)/1.15 var(--sans); letter-spacing: -.025em; margin-top: 8px; }
.sec-h p { color: var(--text-2); margin-top: 6px; }
.band { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xl); margin-top: 52px; padding: 36px 30px; }
.wrap .band > .wrap { padding: 0; }

/* ── hero (flat) ──────────────────────────────────────────────────────── */
.hero { position: relative; border-radius: var(--r-xl); border: 1px solid var(--line-2); padding: 56px 52px; background: var(--surface); }
.hero .orb, .hero .gridlines { display: none; }
.hero-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; }
.hero h1 { font: 820 clamp(34px, 5vw, 56px)/1.04 var(--sans); letter-spacing: -.04em; margin-top: 16px; }
.hero h1 .grad { color: var(--accent); }
.hero .lead { color: var(--text-2); font-size: clamp(15px, 1.6vw, 17.5px); margin-top: 18px; max-width: 600px; }
.hero-search { margin-top: 28px; display: flex; gap: 8px; max-width: 580px; padding: 6px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line-2); }
.hero-search .input-icon { flex: 1; }
.hero-search .input { border: 0; background: transparent; height: 46px; }
.hero-search .input:focus { box-shadow: none; }
.hero .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hero .pills a { font: 600 13px var(--sans); color: var(--text-2); padding: 7px 13px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface-2); transition: all .15s; }
.hero .pills a:hover { color: var(--text); border-color: var(--accent); }
.hero-card { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 20px; }
.hero-card .live { display: inline-flex; align-items: center; gap: 7px; font: 650 12px var(--sans); color: var(--green); }
.hero-card .live i { width: 8px; height: 8px; border-radius: 99px; background: var(--green); animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.hero-card .mini { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.hero-card .mini:first-of-type { border-top: 0; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.stat { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 18px 20px; }
.stat .v { font: 800 26px/1 var(--sans); letter-spacing: -.03em; }
.stat .k { color: var(--text-3); font-size: 13px; margin-top: 7px; display: flex; align-items: center; gap: 6px; }
.stat .k .ic { width: 15px; height: 15px; color: var(--accent); }

/* ── category tiles ───────────────────────────────────────────────────── */
.cats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.cat { --h: 215; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 150px;
  padding: 20px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--surface); transition: transform .22s var(--ease), border-color .22s; }
.cat:hover { transform: translateY(-3px); border-color: var(--line-3); }
.cat .emo { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; line-height: 1;
  background: hsla(var(--h), 70%, 55%, .12); border: 1px solid hsla(var(--h), 70%, 60%, .28); }
.cat .img { position: absolute; right: 14px; bottom: 14px; width: 64px; height: 64px; border-radius: 14px; object-fit: cover; border: 1px solid var(--line-2); }
.cat h3 { font: 720 16px/1.25 var(--sans); letter-spacing: -.01em; margin-top: 18px; }
.cat .meta { color: var(--text-3); font-size: 12.5px; margin-top: 4px; }
.cat .go { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; border-radius: 99px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text-2); transition: all .2s; }
.cat .go .ic { width: 15px; height: 15px; }
.cat:hover .go { background: var(--accent); color: #fff; border-color: var(--accent); transform: rotate(-45deg); }

/* ── product cards ────────────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.prod { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  overflow: hidden; transition: transform .22s var(--ease), border-color .22s; position: relative; }
.prod:hover { transform: translateY(-3px); border-color: var(--line-3); }
.prod .media { aspect-ratio: 1 / 1; background: var(--surface-2); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; display: grid; place-items: center; }
.prod .media img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease), opacity .45s var(--ease); }
.prod:hover .media img { transform: scale(1.04); }
.prod .media .ph { font-size: 42px; transition: transform .35s var(--ease); }
.prod:hover .media .ph { transform: scale(1.1); }
.prod .badges { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.prod .pricechip { position: absolute; right: 10px; top: 10px; background: rgba(0,0,0,.72); color: #fff; font: 750 13px var(--sans); padding: 5px 11px; border-radius: 99px; border: 1px solid rgba(255,255,255,.14); }
.prod .body { padding: 15px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.prod .catname { font: 700 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.prod h3 { font: 680 15.5px/1.35 var(--sans); letter-spacing: -.01em; margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prod .foot { margin-top: auto; padding-top: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.price { font: 800 19px/1 var(--sans); letter-spacing: -.02em; }
.price s { font: 500 13px var(--sans); color: var(--text-3); margin-left: 6px; }
.prod .sub { font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.prod .sub .ic { width: 14px; height: 14px; }
.prod .add { width: 36px; height: 36px; border-radius: 99px; display: grid; place-items: center; background: var(--surface-2); color: var(--text); border: 1px solid var(--line-2); transition: all .2s; }
.prod .add .ic { width: 16px; height: 16px; }
.prod:hover .add { background: var(--accent); color: #fff; border-color: var(--accent); }
.prod.sold-out .media { opacity: .55; }

/* ── tags ─────────────────────────────────────────────────────────────── */
.tag { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 99px; font: 700 11.5px var(--sans); letter-spacing: .02em;
  background: var(--surface-3); color: var(--text-2); border: 1px solid var(--line-2); white-space: nowrap; }
.tag .ic { width: 13px; height: 13px; }
.tag.green { color: var(--green); background: rgba(var(--green-rgb), .1); border-color: rgba(var(--green-rgb), .3); }
.tag.red { color: var(--red); background: rgba(var(--red-rgb), .1); border-color: rgba(var(--red-rgb), .3); }
.tag.gold { color: var(--gold); background: rgba(var(--gold-rgb), .1); border-color: rgba(var(--gold-rgb), .32); }
.tag.blue { color: var(--accent); background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .32); }
.tag.violet { color: var(--violet); background: rgba(var(--violet-rgb), .1); border-color: rgba(var(--violet-rgb), .3); }
.tag.caps { text-transform: uppercase; letter-spacing: .08em; }
.tag.solid { background: rgba(0,0,0,.72); color: #fff; border-color: rgba(255,255,255,.14); }
.tag.solid.hot { background: #e5484d; border-color: #e5484d; }
.tag.solid.deal { background: var(--gold); color: #1a1100; border-color: var(--gold); }

/* ── shop / filters ───────────────────────────────────────────────────── */
.shop { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 26px; align-items: start; }
.filters { position: sticky; top: 104px; }
.filters .grp { padding: 18px 0; border-top: 1px solid var(--line); }
.filters .grp:first-child { border-top: 0; padding-top: 0; }
.filters h4 { font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.catlist a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 12px; color: var(--text-2); font-size: 14px; transition: all .15s; }
.catlist a:hover { background: var(--surface-2); color: var(--text); }
.catlist a.on { background: rgba(var(--accent-rgb), .12); color: var(--accent); font-weight: 650; }
.catlist .n { font-size: 12px; color: var(--text-3); }
.range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filters .checks { display: grid; gap: 12px; }
.filters .checks h4 { margin-bottom: 0; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar .count { color: var(--text-2); font-size: 14px; }
.toolbar select.input { height: 42px; width: auto; min-width: 200px; border-radius: 999px; }
.activef { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.activef a { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 12.5px; color: var(--text-2); }
.activef a:hover { border-color: var(--red); color: var(--red); }
.activef .ic { width: 13px; height: 13px; }
.filter-toggle { display: none; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; margin-bottom: 18px; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 99px; flex: none; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2); font: 600 13.5px var(--sans); transition: all .15s; }
.chip:hover { color: var(--text); border-color: var(--line-3); }
.chip.on { background: rgba(var(--accent-rgb), .14); color: var(--accent); border-color: rgba(var(--accent-rgb), .4); }
.pager { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.pg { min-width: 38px; height: 38px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--text-2); font: 650 14px var(--sans); transition: background .15s, color .15s, border-color .15s, transform .12s; }
.pg .ic { width: 16px; height: 16px; }
a.pg:hover { color: var(--text); border-color: var(--line-3); background: var(--surface-2); }
a.pg:active { transform: scale(.94); }
.pg.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pg.dis { opacity: .35; }
.pg.gap { border-color: transparent; background: none; min-width: 20px; padding: 0; }
.pg-info { margin-left: 10px; font-size: 13px; color: var(--text-3); }
.empty { text-align: center; padding: 60px 24px; color: var(--text-2); border: 1px dashed var(--line-3); border-radius: var(--r-xl); background: var(--surface); }
.empty .big-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto 16px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text-3); }
.empty .big-ic .ic { width: 26px; height: 26px; }
.empty h3 { color: var(--text); font: 720 17px var(--sans); margin-bottom: 6px; }

/* ── product page (two columns: details | order) ──────────────────────── */
.pdp { display: grid; grid-template-columns: minmax(0,1fr) 520px; gap: 30px; align-items: start; }
.pdp-media { width: 100%; max-width: 460px; aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2); background: var(--surface-2); display: grid; place-items: center; position: relative; }
.pdp-media img { width: 100%; height: 100%; object-fit: contain; }
.pdp-media .ph { font-size: 84px; }
.pdp-media .pricechip { position: absolute; right: 12px; top: 12px; background: rgba(0,0,0,.72); color: #fff; font: 800 14px var(--sans); padding: 6px 13px; border-radius: 99px; border: 1px solid rgba(255,255,255,.16); }
.pdp h1 { font: 820 clamp(28px, 3.6vw, 40px)/1.08 var(--sans); letter-spacing: -.035em; margin-top: 16px; }
.pdp .meta { color: var(--text-2); font-size: 14.5px; display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.pdp .meta span { display: inline-flex; gap: 7px; align-items: center; }
.pdp .meta .ic { width: 16px; height: 16px; color: var(--text-3); }
.seller { display: inline-flex; align-items: center; gap: 11px; margin-top: 18px; padding: 8px 18px 8px 8px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); }
.seller .av { width: 38px; height: 38px; border-radius: 99px; display: grid; place-items: center; background: var(--text); color: var(--bg); font: 850 15px var(--sans); }
.seller b { display: block; font-size: 14.5px; line-height: 1.2; } .seller span { font-size: 12.5px; color: var(--text-3); }
.order-card .oline { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.order-card .total { display: flex; justify-content: space-between; align-items: flex-end; padding: 18px 0; }
.order-card .total .big { font: 850 42px/1 var(--sans); letter-spacing: -.035em; }
.order-card .foot { display: flex; justify-content: center; align-items: center; gap: 8px; padding-top: 16px; margin-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3); }
.order-card .foot b { color: var(--text); }
.info-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.info-box > div + div { margin-top: 14px; }
.info-box b { display: block; font-size: 14.5px; }
.info-box p { color: var(--text-2); font-size: 13.5px; margin-top: 4px; }
.steps-list { display: grid; gap: 0; }
.steps-list .s { display: flex; gap: 14px; padding: 12px 0; }
.steps-list .n { width: 32px; height: 32px; border-radius: 99px; display: grid; place-items: center; flex: none; background: var(--surface-2); border: 1px solid var(--line-2); font: 700 13px var(--sans); color: var(--text-2); }
.steps-list b { display: block; font-size: 14.5px; } .steps-list p { color: var(--text-2); font-size: 13.5px; margin-top: 2px; }
.desc-sec + .desc-sec { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.desc-sec .label-caps { margin-bottom: 10px; display: block; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; height: 42px; background: var(--bg-soft); }
.qty button { width: 42px; height: 100%; border: 0; background: none; cursor: pointer; color: var(--text-2); display: grid; place-items: center; }
.qty button:hover { background: var(--surface-3); color: var(--text); }
.qty button .ic { width: 16px; height: 16px; }
.qty input { width: 54px; height: 100%; border: 0; background: none; text-align: center; outline: none; font: 700 15px var(--sans); -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.bigprice { font: 850 40px/1 var(--sans); letter-spacing: -.035em; }
.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.perk { padding: 13px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); font-size: 12.5px; color: var(--text-2); }
.perk .ic { color: var(--accent); margin-bottom: 6px; }
.perk b { display: block; color: var(--text); font-size: 13px; }
.ladder { display: grid; gap: 6px; }
.ladder div { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; padding: 9px 13px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; overflow-x: auto; }
.tabs button { background: none; border: 0; padding: 12px 14px; font: 650 14px var(--sans); color: var(--text-3); cursor: pointer; position: relative; white-space: nowrap; }
.tabs button.on { color: var(--text); }
.tabs button.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; }
.tabpane { display: none; } .tabpane.on { display: block; animation: page-in .3s var(--ease) both; }
.facts { display: grid; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; }
.facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 14px; border-top: 1px solid var(--line); background: var(--surface); }
.facts > div:first-child { border-top: 0; }
.facts dt { color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.facts dt .ic { width: 16px; height: 16px; color: var(--text-3); }
.facts dd { font-weight: 650; text-align: right; }
.rich { white-space: pre-line; color: var(--text); line-height: 1.7; overflow-wrap: anywhere; font-size: 15.5px; }
.rich b { font-weight: 700; } .rich a { color: var(--accent); text-decoration: underline; }
.rich code { font-family: var(--mono); font-size: .9em; background: var(--surface-3); padding: 1px 6px; border-radius: 6px; }
.rich pre { font-family: var(--mono); background: var(--bg-soft); border: 1px solid var(--line); padding: 12px 14px; border-radius: 12px; white-space: pre-wrap; margin: 8px 0; }
.rich blockquote { border-left: 3px solid var(--accent); padding-left: 12px; margin: 8px 0; color: var(--text-2); }
.spoiler { background: var(--text-3); color: transparent; border-radius: 4px; cursor: pointer; }
.spoiler.show, .spoiler:hover { background: none; color: inherit; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { position: relative; padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); }
.step .n { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--accent); margin-bottom: 14px; }
.step h3 { font: 720 16px var(--sans); }
.step p { color: var(--text-2); font-size: 14px; margin-top: 6px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:first-child { border-top: 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 17px 0; font: 650 15px var(--sans); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { transition: transform .22s var(--ease); color: var(--text-3); }
.faq details[open] summary .ic { transform: rotate(45deg); color: var(--accent); }
.faq details p { color: var(--text-2); padding: 0 0 18px; font-size: 14.5px; }
.cta { border-radius: var(--r-xl); padding: 48px 40px; text-align: center; border: 1px solid var(--line-2); background: var(--surface); }
.cta h2 { font: 820 clamp(24px, 3.2vw, 34px)/1.1 var(--sans); letter-spacing: -.03em; }
.cta p { color: var(--text-2); max-width: 520px; margin: 12px auto 0; }

/* ── lists ────────────────────────────────────────────────────────────── */
.list { border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.li { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-top: 1px solid var(--line); transition: background .15s; }
.li:first-child { border-top: 0; }
a.li:hover { background: var(--surface-2); }
.li .grow { flex: 1; min-width: 0; }
.li .t { font: 650 14.5px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li .s { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.li .amt { font: 720 14.5px var(--sans); white-space: nowrap; text-align: right; }
.amt.plus { color: var(--green); } .amt.minus { color: var(--text-2); }
.thumb { width: 46px; height: 46px; border-radius: 12px; flex: none; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; font-size: 21px; border: 1px solid var(--line-2); }
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb.lg { width: 60px; height: 60px; border-radius: 14px; font-size: 26px; }
.ico-tile { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text-2); }
.ico-tile.green { color: var(--green); background: rgba(var(--green-rgb), .1); border-color: rgba(var(--green-rgb), .25); }
.ico-tile.violet { color: var(--violet); background: rgba(var(--violet-rgb), .1); border-color: rgba(var(--violet-rgb), .25); }
.ico-tile.blue { color: var(--accent); background: rgba(var(--accent-rgb), .1); border-color: rgba(var(--accent-rgb), .25); }
.ico-tile.gold { color: var(--gold); background: rgba(var(--gold-rgb), .1); border-color: rgba(var(--gold-rgb), .25); }
.ico-tile.red { color: var(--red); background: rgba(var(--red-rgb), .1); border-color: rgba(var(--red-rgb), .25); }

/* ── account hub ──────────────────────────────────────────────────────── */
.acct { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 26px; align-items: start; }
.acct-side { position: sticky; top: 104px; }
.acct-main { min-width: 0; }
.acct-main .page-h h1 { font-size: clamp(24px, 3vw, 30px); }
.acct-me { display: flex; align-items: center; gap: 13px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); margin-bottom: 12px; }
.acct-me b { display: block; font-size: 15px; }
.acct-me > div > span { display: block; font-size: 12.5px; color: var(--text-3); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-nav { display: grid; gap: 2px; padding: 8px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); }
.acct-nav a, .acct-nav button { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; color: var(--text-2); font: 600 14px var(--sans); transition: all .15s; background: none; border: 0; cursor: pointer; width: 100%; text-align: left; }
.acct-nav a:hover, .acct-nav button:hover { background: var(--surface-2); color: var(--text); }
.acct-nav a.on { background: rgba(var(--accent-rgb), .12); color: var(--accent); }
.acct-nav .n { margin-left: auto; font: 700 11px var(--sans); background: var(--red); color: #fff; border-radius: 99px; padding: 1px 7px; }
.acct-nav hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.kpi { padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); transition: transform .2s var(--ease), border-color .2s; }
a.kpi:hover { transform: translateY(-2px); border-color: var(--line-3); }
.kpi .ico-tile { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 14px; }
.kpi .v { font: 800 24px/1 var(--sans); letter-spacing: -.03em; }
.kpi .k { font-size: 13px; color: var(--text-3); margin-top: 6px; }
.balance-card { border-radius: var(--r-xl); padding: 26px; background: var(--surface); border: 1px solid var(--line-2); position: relative; }
.balance-card .k { font-size: 13px; color: var(--text-2); display: flex; gap: 7px; align-items: center; }
.balance-card .k .ic { color: var(--accent); }
.balance-card .v { font: 850 42px/1 var(--sans); letter-spacing: -.035em; margin: 12px 0 20px; }

/* ── payments ─────────────────────────────────────────────────────────── */
.methods { display: grid; gap: 10px; }
.method { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.method:hover { border-color: var(--line-3); }
.method input { accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.method:has(input:checked) { border-color: var(--accent); background: rgba(var(--accent-rgb), .06); }
.method .ml { flex: 1; } .method .ml b { display: block; font-size: 15px; } .method .ml span { font-size: 12.5px; color: var(--text-3); }
.amounts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.amounts button { height: 34px; padding: 0 15px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface-2); cursor: pointer; font: 650 13px var(--sans); color: var(--text-2); transition: all .15s; }
.amounts button:hover, .amounts button.on { color: var(--accent); border-color: var(--accent); }
.nets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.net { display: flex; align-items: center; gap: 11px; padding: 14px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; font: 620 14px var(--sans); text-align: left; width: 100%; transition: all .15s; }
.net:hover { border-color: var(--accent); transform: translateY(-2px); }
.coin { width: 34px; height: 34px; border-radius: 99px; display: grid; place-items: center; font: 800 10px var(--sans); color: var(--text); flex: none; background: var(--surface-3); border: 1px solid var(--line-2); }
.pay { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
.qr { background: #fff; border-radius: 18px; padding: 14px; width: 240px; height: 240px; border: 1px solid var(--line-2); }
.qr img, .qr svg { width: 100%; height: 100%; }
.expires { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px auto 0; font-size: 13px; color: var(--text-3); width: 240px; max-width: 100%; }
.expires .ic { width: 14px; height: 14px; flex: none; }
.expires b { color: var(--text); font-variant-numeric: tabular-nums; }
.copy { display: flex; align-items: center; gap: 8px; background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: 12px; padding: 8px 8px 8px 14px; }
.copy code { flex: 1; font: 500 13.5px var(--mono); overflow-wrap: anywhere; }
.status { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 99px; font: 650 13.5px var(--sans); background: var(--surface); border: 1px solid var(--line-2); }
.status .pulse { width: 9px; height: 9px; border-radius: 99px; background: var(--gold); animation: blink 1.6s infinite; }
.status.ok { border-color: rgba(var(--green-rgb), .4); color: var(--green); }
.status.ok .pulse { background: var(--green); animation: none; }
.status.bad .pulse { background: var(--red); animation: none; }
.timeline { display: grid; }
.tl { display: flex; gap: 14px; }
.tl .dot { width: 26px; display: flex; flex-direction: column; align-items: center; }
.tl .dot i { width: 12px; height: 12px; border-radius: 99px; background: var(--line-3); margin-top: 5px; flex: none; }
.tl .dot::after { content: ""; flex: 1; width: 2px; background: var(--line-2); margin: 4px 0; }
.tl:last-child .dot::after { display: none; }
.tl.done .dot i { background: var(--green); }
.tl .c { padding-bottom: 18px; } .tl .c b { font-size: 14px; } .tl .c p { font-size: 13px; color: var(--text-3); }

/* ── delivered goods ──────────────────────────────────────────────────── */
.goods { display: grid; gap: 12px; }
.item { border: 1px solid var(--line-2); border-radius: 16px; background: var(--bg-soft); overflow: hidden; }
.item .head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); font: 650 12.5px var(--sans); color: var(--text-2); }
.item .kv { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--line); }
.item .kv:first-of-type { border-top: 0; }
.item .kv span { color: var(--text-3); font-size: 12.5px; }
.item .kv code, .item pre { font: 500 13.5px var(--mono); overflow-wrap: anywhere; white-space: pre-wrap; }
.item pre { padding: 13px 14px; }
.masked { filter: blur(5px); transition: filter .2s; cursor: pointer; user-select: none; }
.masked.show { filter: none; user-select: text; }
.copybtn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; font: 650 12px var(--sans); color: var(--text-2); transition: all .15s; }
.copybtn:hover { color: var(--text); border-color: var(--accent); }
.copybtn .ic { width: 14px; height: 14px; }
.success { text-align: center; padding: 8px 0 4px; }
.success .big-ic { width: 70px; height: 70px; border-radius: 99px; display: grid; place-items: center; margin: 0 auto 16px; background: rgba(var(--green-rgb), .12); color: var(--green); border: 1px solid rgba(var(--green-rgb), .35); animation: pop .55s var(--ease) both; }
.success .big-ic .ic { width: 32px; height: 32px; stroke-width: 2.4; }
@keyframes pop { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }

/* ── notifications ────────────────────────────────────────────────────── */
.notice { display: flex; gap: 14px; padding: 17px 20px; border-top: 1px solid var(--line); }
.notice:first-child { border-top: 0; }
.notice.new { background: rgba(var(--accent-rgb), .05); }
.notice h3 { font: 680 14.5px var(--sans); }
.notice p { font-size: 13.5px; color: var(--text-2); margin-top: 3px; }

/* ── activation: details received ─────────────────────────────────────── */
.sent-box { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 16px; border: 1px solid rgba(var(--accent-rgb), .3); background: rgba(var(--accent-rgb), .06); }
.sent-box.ok { border-color: rgba(var(--green-rgb), .3); background: rgba(var(--green-rgb), .06); }
.sent-box b { display: block; font-size: 15px; } .sent-box p { color: var(--text-2); font-size: 13.5px; margin-top: 3px; }
.resend { margin-top: 12px; }
.resend summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.resend summary::-webkit-details-marker { display: none; }
.resend summary:hover { color: var(--text); }
.resend summary .ic { width: 15px; height: 15px; }

/* ── confirmation popup ───────────────────────────────────────────────── */
.modal-backdrop { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .2s var(--ease); }
.modal-backdrop.show { opacity: 1; }
.modal { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--line-2); border-radius: 22px; padding: 24px; text-align: center; box-shadow: var(--shadow-lg); transform: translateY(10px) scale(.97); transition: transform .25s var(--ease); }
.modal-backdrop.show .modal { transform: none; }
.modal-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto 14px; background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .3); color: var(--accent); }
.modal-ic.danger { background: rgba(var(--red-rgb), .1); border-color: rgba(var(--red-rgb), .35); color: var(--red); }
.modal-ic .ic { width: 24px; height: 24px; }
.modal h3 { font: 800 19px/1.25 var(--sans); letter-spacing: -.015em; }
.modal p { color: var(--text-2); font-size: 14px; margin-top: 8px; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }

/* ── offers (every discount type) ─────────────────────────────────────── */
.ocard { border: 1px solid var(--line-2); border-radius: 18px; background: var(--surface); padding: 18px; display: grid; gap: 14px; transition: border-color .2s, transform .2s var(--ease); }
.ocard:hover { border-color: var(--line-3); }
.ocard.compact { padding: 14px; gap: 10px; background: var(--surface-2); border-radius: 16px; }
.ocard.personal { border-color: rgba(var(--gold-rgb), .45); }
.ocard.locked { background: var(--bg-soft); }
.ocard.aside { opacity: .75; }
.ocard-top { display: flex; gap: 12px; align-items: flex-start; }
.ocard-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--accent); }
.ocard-ic .ic { width: 17px; height: 17px; }
.ocard.personal .ocard-ic { color: var(--gold); border-color: rgba(var(--gold-rgb), .35); }
.ocard.locked .ocard-ic { color: var(--text-3); }
.ocard-amount { font: 800 18px/1.2 var(--sans); letter-spacing: -.015em; }
.ocard-title { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.ocard-state { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 99px; font: 700 11.5px var(--sans); white-space: nowrap; border: 1px solid var(--line-2); color: var(--text-2); background: var(--surface-2); }
.ocard-state .ic { width: 13px; height: 13px; }
.ocard.applied .ocard-state { color: var(--green); border-color: rgba(var(--green-rgb), .35); background: rgba(var(--green-rgb), .08); }
.ocard.quantity .ocard-state { color: var(--accent); border-color: rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .08); }
.ocard-scope { display: flex; gap: 6px; flex-wrap: wrap; }
.ocard-items { display: grid; gap: 6px; }
.ocard-items a { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); transition: border-color .15s; }
.ocard-items a:hover { border-color: var(--accent); }
.ocard-items .thumb { width: 34px; height: 34px; border-radius: 9px; font-size: 12px; }
.ocard-items .nm { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocard-items .pr { font-size: 13px; white-space: nowrap; } .ocard-items .pr s { color: var(--text-3); margin-right: 4px; }
.ocard-conds { list-style: none; display: grid; gap: 6px; }
.ocard-conds li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); flex-wrap: wrap; }
.ocard-conds li .ic { width: 14px; height: 14px; flex: none; }
.ocard-conds li.met .ic { color: var(--green); }
.ocard-conds li.gate .ic { color: var(--accent); }
.ocard-conds li.unmet .ic { color: var(--text-3); }
.ocard-conds li em { font-style: normal; font-size: 12px; color: var(--gold); margin-left: auto; }
.ocard-note { font-size: 12.5px; color: var(--text-3); }
.offers { margin-top: 18px; display: grid; gap: 10px; }
.deal-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 20px; }
.deal-rules b { display: block; margin-top: 10px; font-size: 14.5px; } .deal-rules p { font-size: 13px; color: var(--text-2); margin-top: 3px; }
.bulk-card:hover { border-color: var(--line-3); }
/* quick quantity picks + bulk table on the product page */
.qpick { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 0 2px; }
.qpick button { min-width: 42px; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-2); font: 650 13px var(--sans); cursor: pointer; transition: all .15s; position: relative; }
.qpick button:hover { color: var(--text); border-color: var(--line-3); }
.qpick button.deal::after { content: ""; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 99px; background: var(--gold); }
.qpick button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.bulk { margin-top: 12px; border: 1px solid var(--line-2); border-radius: 14px; padding: 12px; background: var(--surface-2); }
.bulk-h { display: flex; align-items: center; gap: 8px; font: 700 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.bulk-h .ic { width: 15px; height: 15px; color: var(--accent); }
.bulk-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; transition: background .2s, color .2s; }
.bulk-row + .bulk-row { margin-top: 2px; }
.bulk-tag { display: none; align-items: center; gap: 4px; font: 700 11px var(--sans); color: var(--accent); }
.bulk-tag .ic { width: 12px; height: 12px; }
.bulk-row.on { background: rgba(var(--accent-rgb), .12); color: var(--text); font-weight: 650; }
.bulk-row.on .bulk-tag { display: inline-flex; }
@media (max-width: 900px) { .deal-rules { grid-template-columns: 1fr; } }

/* ── stock panel on the product page ──────────────────────────────────── */
.stockbox { margin-top: 16px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface-2); }
.stockbox .sb-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); font-weight: 600; }
.stockbox .sb-label .ic { width: 16px; height: 16px; color: var(--accent); }
.stockbox .sb-count { font: 800 18px var(--sans); letter-spacing: -.01em; }
.stockbox .sb-count small { font: 600 12.5px var(--sans); color: var(--text-3); }
.sb-meter { height: 6px; border-radius: 99px; background: var(--surface-4); margin: 10px 0 8px; overflow: hidden; }
.sb-meter i { display: block; height: 100%; border-radius: inherit; background: var(--accent); animation: sb-grow .8s var(--ease) both; }
@keyframes sb-grow { from { width: 0; } }
.sb-note { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gold); margin-top: 6px; }
.sb-note.ok { color: var(--text-3); }
.sb-note .ic { width: 14px; height: 14px; }
.stockbox.low { border-color: rgba(var(--gold-rgb), .4); }
.stockbox.low .sb-meter i { background: var(--gold); }

/* ── two-factor page ──────────────────────────────────────────────────── */
.tfa-hero { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 18px; padding: 26px; }
.tfa-hero h1 { font: 800 clamp(22px, 2.6vw, 28px)/1.15 var(--sans); letter-spacing: -.025em; }
.tfa-hero p { color: var(--text-2); margin-top: 8px; max-width: 640px; font-size: 14.5px; }
.tfa-shield { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: none; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-3); }
.tfa-shield .ic { width: 26px; height: 26px; }
.tfa-hero.on .tfa-shield { color: var(--green); border-color: rgba(var(--green-rgb), .35); background: rgba(var(--green-rgb), .08); animation: pop .55s var(--ease) both; }
.tfa-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.tfa-steps { margin-top: 12px; }
.tfa-step { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.tfa-step:first-child { border-top: 0; }
.tfa-step .n { width: 32px; height: 32px; border-radius: 99px; display: grid; place-items: center; flex: none; background: var(--surface-2); border: 1px solid var(--line-2); font: 700 13px var(--sans); color: var(--accent); }
.tfa-step .n .ic { width: 15px; height: 15px; }
.tfa-step b { display: block; font-size: 14.5px; } .tfa-step p { color: var(--text-2); font-size: 13.5px; margin-top: 3px; }
.tfa-confirm { margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--line); max-width: 420px; }
.tfa-qr-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.tfa-qr-card .qr { width: 220px; height: 220px; margin-top: 4px; }
.tfa-danger { border-color: rgba(var(--red-rgb), .3); }
@media (max-width: 1024px) { .tfa-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .tfa-hero { flex-direction: column; padding: 20px; } }

/* ── auth pages ───────────────────────────────────────────────────────── */
.auth-page { padding: 8px 0 20px; }
.auth > * { min-width: 0; }
.auth-art > *, .auth-form .box > * { animation: auth-in .5s cubic-bezier(0,0,.2,1) both; }
.auth-art > :nth-child(2) { animation-delay: .08s; } .auth-art > :nth-child(3) { animation-delay: .16s; }
.auth-art li { animation: auth-in .45s cubic-bezier(0,0,.2,1) both; }
.auth-art li:nth-child(1) { animation-delay: .18s; } .auth-art li:nth-child(2) { animation-delay: .26s; }
.auth-art li:nth-child(3) { animation-delay: .34s; } .auth-art li:nth-child(4) { animation-delay: .42s; }
.auth-form .box > :nth-child(2) { animation-delay: .05s; } .auth-form .box > :nth-child(3) { animation-delay: .1s; }
.auth-form .box > :nth-child(4) { animation-delay: .15s; } .auth-form .box > :nth-child(5) { animation-delay: .2s; }
.auth-form .box > :nth-child(n+6) { animation-delay: .25s; }
@keyframes auth-in { from { opacity: 0; transform: translateY(10px); } }
.auth-art .brand { margin: 0; }
.auth-art .stat-row { display: flex; gap: 26px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.auth-art .stat-row b { display: block; font: 800 22px var(--sans); letter-spacing: -.02em; }
.auth-art .stat-row span { font-size: 12.5px; color: var(--text-3); }
.auth-form .field .input:focus + .ic, .input-icon:focus-within > .ic { color: var(--accent); }
.auth { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line-2); border-radius: var(--r-xl); overflow: hidden; background: var(--surface); min-height: 620px; }
.auth-art { padding: 48px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line-2); background: var(--surface-2); }
.auth-art h2 { font: 820 clamp(26px, 3vw, 36px)/1.1 var(--sans); letter-spacing: -.03em; max-width: 440px; }
.auth-art ul { list-style: none; display: grid; gap: 14px; margin-top: 28px; }
.auth-art li { display: flex; gap: 12px; align-items: center; color: var(--text-2); }
.auth-form { display: grid; place-items: center; padding: 48px 28px; }
.auth-form .box { width: 100%; max-width: 420px; }
.auth-form h1 { font: 820 30px/1.1 var(--sans); letter-spacing: -.03em; }
.auth-form .sub { color: var(--text-2); margin: 8px 0 26px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 12.5px; margin: 20px 0; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line-2); }

/* ── footer ───────────────────────────────────────────────────────────── */
footer.site { padding: 0 0 24px; margin-top: 30px; }
footer.site .shell { border: 1px solid var(--line-2); border-radius: var(--r-xl); background: var(--surface); padding: 40px 36px 22px; }
.fgrid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; }
.fgrid h4 { font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.fgrid ul { list-style: none; display: grid; gap: 10px; }
.fgrid a { color: var(--text-2); font-size: 14px; transition: color .15s; }
.fgrid a:hover { color: var(--text); }
.fgrid p { color: var(--text-2); font-size: 14px; margin-top: 12px; max-width: 320px; }
.social { display: flex; gap: 8px; margin-top: 18px; }
.fbottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 13px; }
.paybadges { display: flex; gap: 8px; flex-wrap: wrap; }
.paybadges span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface-2); font: 650 12px var(--sans); color: var(--text-2); }
.paybadges .ic { width: 14px; height: 14px; }

/* ── monograms (instead of emoji placeholders) ────────────────────────── */
.mono-ph { display: grid; place-items: center; width: 100%; height: 100%; font: 750 15px var(--sans); letter-spacing: .02em; color: var(--text-2); }
.mono-ph .ic { width: 20px; height: 20px; color: var(--text-3); }
.mono-ph.lg { font-size: 30px; letter-spacing: -.01em; color: var(--text-3); }
.mono-ph.lg .ic { width: 34px; height: 34px; }
.mono-ph.xl { font-size: 64px; letter-spacing: -.03em; color: var(--text-3); }
.cat .emo { font: 750 15px var(--sans); color: var(--text); background: var(--surface-2); border-color: var(--line-2); overflow: hidden; }
.cat .emo.img-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* ── smooth scroll (Lenis) + parallax ─────────────────────────────────── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
/* A parallax image is drawn taller than its frame so it can drift without
   ever showing an edge; the frame clips it. Only when the script runs. */
.parallax-on .pdp-media img[data-parallax] { height: 112%; will-change: transform; }

/* ── mobile drawer (burger menu) ──────────────────────────────────────── */
.drawer-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .25s var(--ease); }
.drawer-backdrop.show { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: min(360px, 88vw); display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--line-2); transform: translateX(102%); transition: transform .3s var(--ease); visibility: hidden; }
.drawer.open { transform: none; visibility: visible; }
.drawer-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 14px 18px; border-bottom: 1px solid var(--line); }
.drawer-b { flex: 1; overflow-y: auto; padding: 14px; overscroll-behavior: contain; }
.drawer-b form { margin-bottom: 12px; }
.drawer-b > a, .drawer-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border-radius: 12px; font: 600 15px var(--sans); color: var(--text-2); background: none; border: 0; cursor: pointer; text-align: left; }
.drawer-b > a:hover, .drawer-row:hover { background: var(--surface-2); color: var(--text); }
.drawer-b .count { margin-left: auto; font: 700 11px var(--sans); background: var(--red); color: #fff; border-radius: 99px; padding: 1px 7px; }
.drawer-label { display: block; font: 700 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); padding: 16px 12px 6px; }
.drawer-me { display: flex !important; align-items: center; gap: 12px; padding: 12px !important; border: 1px solid var(--line-2); border-radius: 16px !important; background: var(--surface-2) !important; color: var(--text) !important; }
.drawer-me b { display: block; font-size: 15px; } .drawer-me small { color: var(--text-3); font-size: 12.5px; }
.drawer-f { padding: 14px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
body.drawer-open { overflow: hidden; }

/* ── sold out: an overlay, and the card is not a link ─────────────────── */
.prod.sold-out { cursor: not-allowed; }
.prod.sold-out:hover { transform: none; border-color: var(--line-2); }
.prod.sold-out .media img, .prod.sold-out .media .mono-ph { opacity: .35; filter: grayscale(1); }
.soldout-veil { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5,5,6,.45); z-index: 2; }
.soldout-veil span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 99px; font: 750 12.5px var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(12,12,14,.9); border: 1px solid rgba(255,255,255,.18); animation: soldout 2.4s var(--ease) infinite; }
.soldout-veil .ic { width: 14px; height: 14px; }
@keyframes soldout { 0%, 100% { box-shadow: 0 0 0 0 rgba(242,109,109,.0); border-color: rgba(255,255,255,.18); }
  50% { box-shadow: 0 0 0 6px rgba(242,109,109,.12); border-color: rgba(242,109,109,.6); } }
.prod.sold-out .price, .prod.sold-out h3 { color: var(--text-3); }
.soldout-grid { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 30px; align-items: center; }
@media (max-width: 700px) { .soldout-grid { grid-template-columns: 1fr; } }

/* ── micro-interactions: navbar & buttons ─────────────────────────────── */
/* Header tightens a little once the page scrolls. */
.top .shell { transition: height .28s var(--ease), box-shadow .25s, border-color .25s, background-color .25s; }
.top.scrolled .shell { height: 58px; }
.brand .mark { transition: transform .35s var(--ease); }
.brand:hover .mark { transform: rotate(-8deg) scale(1.06); }
/* Nav links: the pill fades and grows in from the centre. */
.mainnav > a, .mainnav summary { position: relative; isolation: isolate; background: none !important; }
.mainnav > a::before, .mainnav summary::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: var(--surface-2); opacity: 0; transform: scale(.86); transition: opacity .2s var(--ease), transform .25s var(--ease); }
.mainnav > a:hover::before, .mainnav summary:hover::before, .mainnav details[open] summary::before { opacity: 1; transform: none; }
.mainnav > a.on::before, .mainnav summary.on::before { opacity: 1; transform: none; background: rgba(var(--accent-rgb), .14); }
.mainnav > a:active, .mainnav summary:active { transform: scale(.96); }
/* Icon buttons: a small, specific reaction each. */
.iconbtn .ic, .walletchip .ic { transition: transform .3s var(--ease); }
.iconbtn:hover .ic { transform: scale(1.1); }
.theme-toggle:hover .ic { transform: rotate(-24deg) scale(1.08); }
.bell-link:hover .ic { animation: ring .6s var(--ease); }
@keyframes ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
.iconbtn:active, .avatar:active, .walletchip:active { transform: scale(.94); }
.walletchip:hover .ic { transform: translateY(-1px) rotate(-6deg); }
.avatar { transition: box-shadow .2s var(--ease), transform .15s var(--ease), border-color .2s; }
.avatar:hover { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16); }
.iconbtn .dot { animation: dot-in .4s var(--ease) both; }
@keyframes dot-in { from { transform: scale(0); } 70% { transform: scale(1.15); } }
.navlink { transition: background .18s var(--ease), color .18s; }
/* Buttons: lift on hover, press on click, arrows lean forward. */
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(var(--accent-rgb), .75); }
.btn.primary:active { transform: translateY(0) scale(.97); box-shadow: none; }
.btn .ic { transition: transform .22s var(--ease); }
.btn:hover .ic:last-child:not(:first-child) { transform: translateX(3px); }
.nav-cta { transition: transform .15s var(--ease), box-shadow .2s, background .16s; }
/* Dropdown and account menu items slide in, one after another. */
.pop > a, .pop > form, .pop > hr { animation: pop-item .28s var(--ease) both; }
.pop > :nth-child(2) { animation-delay: .02s; } .pop > :nth-child(3) { animation-delay: .04s; }
.pop > :nth-child(4) { animation-delay: .06s; } .pop > :nth-child(5) { animation-delay: .08s; }
.pop > :nth-child(6) { animation-delay: .1s; } .pop > :nth-child(n+7) { animation-delay: .12s; }
@keyframes pop-item { from { opacity: 0; transform: translateX(-6px); } }
.pop a, .pop button { transition: background .15s, color .15s, padding-left .2s var(--ease); }
.pop a:hover, .pop button:hover { padding-left: 15px; }
@media (min-width: 1281px) { .searchbox input:focus { width: 360px; } }
/* Drawer links arrive in sequence too. */
.drawer.open .drawer-b > * { animation: pop-item .3s var(--ease) both; }
.drawer.open .drawer-b > :nth-child(n+4) { animation-delay: .04s; }
.drawer.open .drawer-b > :nth-child(n+8) { animation-delay: .08s; }
.drawer.open .drawer-b > :nth-child(n+12) { animation-delay: .12s; }
/* Mobile tab bar: the active icon lifts. */
.tabbar a .ic { transition: transform .25s var(--ease); }
.tabbar a.on .ic { transform: translateY(-1px) scale(1.08); }
.tabbar a:active { transform: scale(.94); }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .searchbox input { width: 230px; }
  .mainnav > a, .mainnav summary { padding: 0 12px; }
  .pdp { grid-template-columns: minmax(0,1fr) 440px; }
}
@media (max-width: 1100px) {
  .searchbox { display: none; }
  .cats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  /* minmax(0,1fr), never plain 1fr: a plain track grows to its widest child (e.g. the
     side-scrolling account menu), the page overflows, and phones then widen the
     layout viewport so the desktop layout kicks in. */
  .split, .pdp, .hero-grid { grid-template-columns: minmax(0,1fr); }
  .hero-card { display: none; }
  .sticky, .filters, .acct-side { position: static; }
  .shop, .acct { grid-template-columns: minmax(0,1fr); }
  .shop > *, .acct > *, .split > *, .pdp > * { min-width: 0; }
  .filters { display: none; } .filters.open { display: block; margin-bottom: 18px; }
  .filter-toggle { display: inline-flex; }
  .acct-nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
  .acct-nav hr, .acct-me { display: none; }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .kpis, .grid-4, .stats { grid-template-columns: repeat(2, 1fr); }
  .pdp-media { max-width: none; }
}
@media (max-width: 900px) {
  .mainnav, .navlink.hide-m, .walletchip span { display: none; }
  .burger { display: inline-grid; }
  .mobnav.open { display: block; position: fixed; top: 92px; left: 12px; right: 12px; bottom: 90px; z-index: 49; background: var(--surface); border: 1px solid var(--line-2); border-radius: 22px; padding: 16px; overflow-y: auto; animation: page-in .22s var(--ease); }
  .mobnav a { display: flex; align-items: center; gap: 12px; padding: 13px 8px; border-bottom: 1px solid var(--line); font: 620 16px var(--sans); }
  .mobnav form { margin-bottom: 12px; }
  .tabbar { display: block; }
  body { padding-bottom: 86px; }
  .grid-3, .steps, .perks, .grid-2 { grid-template-columns: minmax(0,1fr); }
  .toasts { top: auto; bottom: 100px; right: 16px; }
}
@media (max-width: 640px) {
  .tools .hide-s, .tools .bell-link { display: none; }
  .wrap { padding: 0 12px; }
  main { padding: 18px 0 40px; }
  .top { padding: 10px 0 4px; }
  .top .shell { height: 58px; padding: 0 6px 0 12px; border-radius: 20px; }
  .brand { margin-right: 4px; } .brand .name { max-width: 130px; font-size: 16px; }
  .iconbtn, .avatar { width: 40px; height: 40px; }
  .btn.primary.nav-cta { --h: 38px; padding: 0 14px; }
  .hero { padding: 32px 20px; }
  .hero-search { flex-direction: column; border-radius: 20px; }
  .cats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cat { min-height: 130px; padding: 16px; }
  .grid, .grid.cols-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .prod .body { padding: 12px; }
  .prod h3 { font-size: 14px; }
  .price { font-size: 16px; }
  .prod .add { display: none; }
  .card { padding: 18px; border-radius: var(--r-lg); }
  .pay { grid-template-columns: 1fr; } .qr { margin: 0 auto; }
  .item .kv { grid-template-columns: 80px 1fr auto; }
  .kpis, .grid-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .auth { grid-template-columns: 1fr; } .auth-art { display: none; }
  .fgrid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .fgrid > :first-child { grid-column: 1 / -1; }  /* brand + blurb get the full width */
  .faq summary { font-size: 14.5px; padding: 15px 0; }
  footer.site .shell { padding: 28px 20px 18px; }
  .cta { padding: 34px 20px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .order-card .total .big { font-size: 34px; }
}
@media (max-width: 380px) { .grid, .grid.cols-4 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* Check-now button: the refresh icon turns while it checks. */
#checknow.spin .ic { animation: spin .8s linear infinite; }
#checknow:disabled { opacity: .6; cursor: default; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Bulk tiers as buttons on the product page (above the quantity). */
.tiers { padding: 16px 0 4px; }
.tier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.tier { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.tier:hover:not(:disabled) { border-color: var(--line-3); transform: translateY(-1px); }
.tier.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.tier:disabled { opacity: .45; cursor: not-allowed; }
.tier-q { font: 760 16px/1.1 var(--sans); letter-spacing: -.01em; }
.tier-q small, .tier-p small { font-weight: 500; font-size: 12px; color: var(--text-3); }
.tier-p { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tier-off { font: 700 11px var(--sans); color: var(--green); }
.tier-off.na { color: var(--text-3); font-weight: 600; }
.tier.on .tier-off:not(.na) { color: var(--accent); }

/* ══ v9 ═══════════════════════════════════════════════════════════════════ */

/* ── theme switch: every colour moves together, once ─────────────────────── */
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after {
  transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease),
              fill .35s var(--ease), stroke .35s var(--ease), box-shadow .35s var(--ease) !important;
  transition-delay: 0s !important;
}
.theme-switching .theme-toggle .ic { animation: theme-turn .45s var(--ease); }
@keyframes theme-turn { from { transform: rotate(-90deg) scale(.5); opacity: 0; } }

/* ── logo ────────────────────────────────────────────────────────────────── */
.brand .mark.has-img, .seller .av.has-img { background: transparent; overflow: hidden; }
.brand .mark.has-img img, .seller .av.has-img img { width: 100%; height: 100%; object-fit: contain; }

/* the honeypot field: part of the form, never on screen */
.hp { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* pictures fade in as they arrive; ones already loaded are never hidden */
img.fade-in:not(.loaded) { opacity: 0; }
.thumb img, .gal-th img { transition: opacity .45s var(--ease); }

/* category pictures in the header's Categories menu */
.navdrop .pop a .emo { overflow: hidden; }
.navdrop .pop a .emo img { width: 100%; height: 100%; object-fit: contain; }

/* ── category tiles: compact — a small square picture, the name, the count ── */
.cat { min-height: 132px; padding: 18px;
  transition: transform .3s var(--ease), border-color .25s, box-shadow .3s var(--ease); }
.cat .emo { width: 48px; height: 48px; border-radius: 13px; overflow: hidden; }
.cat .emo.img-wrap { padding: 0; background: var(--surface-2); }
.cat .emo.img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.cat:hover .emo.img-wrap img { transform: scale(1.08); }
.cat h3 { margin-top: 16px; }
.cat:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), .45); box-shadow: 0 16px 32px -22px rgba(0,0,0,.7); }

/* ── product gallery: every picture at its own shape ─────────────────────── */
.gal { width: 100%; max-width: 640px; }
.gal-stage { position: relative; overflow: hidden; outline: none; touch-action: pan-y;
  border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--surface-2); }
.gal-stage:focus-visible { box-shadow: var(--ring); }
.gal-img { display: block; width: 100%; height: auto; max-height: min(74vh, 720px); object-fit: contain; margin: 0 auto; }
.gal-img:not(.on):not(.out) { display: none; }
.gal-img.out { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; pointer-events: none; }
.gal-stage .pricechip { position: absolute; right: 12px; top: 12px; z-index: 2; padding: 6px 13px; border-radius: 99px;
  background: rgba(0,0,0,.72); color: #fff; font: 800 14px var(--sans); border: 1px solid rgba(255,255,255,.16); }
.gal-nav { position: absolute; top: 50%; z-index: 2; width: 42px; height: 42px; margin-top: -21px; border-radius: 99px;
  display: grid; place-items: center; cursor: pointer; color: #fff; border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,10,14,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .25s, transform .25s var(--ease), background .2s, border-color .2s; }
.gal-nav.prev { left: 12px; transform: translateX(-6px); }
.gal-nav.next { right: 12px; transform: translateX(6px); }
.gal-stage:hover .gal-nav, .gal-stage:focus-within .gal-nav { opacity: 1; transform: none; }
.gal-nav:hover { background: var(--accent); border-color: var(--accent); }
.gal-nav:active { transform: scale(.94); }
.gal-count { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 99px; background: rgba(0,0,0,.62); color: #fff; font: 700 12px var(--sans);
  border: 1px solid rgba(255,255,255,.12); }
.gal-count .ic { width: 13px; height: 13px; }
.gal-thumbs { display: flex; gap: 8px; margin-top: 10px; padding: 2px; overflow-x: auto; scrollbar-width: none; }
.gal-thumbs::-webkit-scrollbar { display: none; }
.gal-th { flex: none; width: 66px; height: 66px; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface-2); opacity: .55;
  transition: opacity .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.gal-th img { width: 100%; height: 100%; object-fit: contain; }
.gal-th:hover { opacity: 1; transform: translateY(-2px); }
.gal-th.on { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
@media (hover: none) { .gal-nav { opacity: 1; transform: none; } }
@media (max-width: 1024px) { .gal { max-width: none; } }

/* ── home: rotating deal posters ─────────────────────────────────────────── */
/* Colour comes from a blurred copy of the product's own picture — no gradient. */
.posters { position: relative; overflow: hidden; isolation: isolate; color: #fff;
  border-radius: var(--r-xl); border: 1px solid var(--line-2); background: #07080b; }
.poster-track { position: relative; height: clamp(300px, 31vw, 400px); }
.poster { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center; gap: 28px; padding: 36px 48px 48px; overflow: hidden; color: #fff;
  opacity: 0; visibility: hidden; transition: opacity .8s var(--ease), visibility 0s linear .8s; }
.poster.on { z-index: 1; opacity: 1; visibility: visible; transition: opacity .8s var(--ease), visibility 0s; }
/* a definite row, so the picture's max-height:100% has something to be 100% of */
.poster { grid-template-rows: minmax(0, 1fr); }
.poster.leaving { visibility: visible; }
/* The background arrives already blurred, deepened and small (web/images.py
   "blur"), so no filter runs here — the slow drift is a plain transform, which
   the compositor does for free. (A live 48px blur under this drift was what
   made the page stutter.) */
.poster-bg { position: absolute; inset: -40px; z-index: -2; width: calc(100% + 80px); max-width: none; height: calc(100% + 80px);
  object-fit: cover; transform: scale(1.06); transition: transform 7s linear; }
.poster.on .poster-bg { transform: scale(1.16); }
.poster::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(4,5,8,.5); }
.poster.no-img:nth-child(3n+1) { background: #0b1b36; }
.poster.no-img:nth-child(3n+2) { background: #17143a; }
.poster.no-img:nth-child(3n) { background: #0b2531; }
.poster-body { position: relative; min-width: 0; }
.poster-body > * { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.poster.on .poster-body > * { opacity: 1; transform: none; }
.poster.on .poster-body > :nth-child(2) { transition-delay: .07s; }
.poster.on .poster-body > :nth-child(3) { transition-delay: .14s; }
.poster.on .poster-body > :nth-child(4) { transition-delay: .21s; }
.poster.on .poster-body > :nth-child(5) { transition-delay: .28s; }
.poster-kicker { display: inline-flex; align-items: center; gap: 7px; width: fit-content; max-width: 100%; padding: 6px 12px;
  border-radius: 99px; font: 700 11.5px var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.86); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster-kicker .ic { width: 14px; height: 14px; color: #ffb35c; }
.poster-off { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px;
  font: 900 clamp(56px, 7vw, 96px)/.88 var(--sans); letter-spacing: -.055em; }
.poster-off small { margin-top: .12em; font: 800 clamp(14px, 1.5vw, 19px)/1.05 var(--sans); letter-spacing: .02em;
  text-transform: uppercase; color: rgba(255,255,255,.82); }
.poster h3 { margin-top: 12px; max-width: 30ch; font: 780 clamp(19px, 2.1vw, 27px)/1.2 var(--sans); letter-spacing: -.02em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.poster-price { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.poster-price b { font: 850 clamp(20px, 2vw, 26px) var(--sans); letter-spacing: -.02em; }
.poster-price s { font-size: 15px; color: rgba(255,255,255,.58); }
.poster-cta { margin-top: 20px; pointer-events: none; }
.poster:hover .poster-cta { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); }
/* The picture is absolutely placed in a box of definite height, so max-height:100%
   really caps it — as a grid item its percentage had nothing to resolve against. */
.poster-art { position: relative; height: 100%; min-height: 0; }
.poster-art img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 22px;
  filter: drop-shadow(0 28px 50px rgba(0,0,0,.5)); opacity: 0;
  transform: translateX(calc(var(--dir, 1) * 46px)) scale(.94) rotate(-2deg);
  transition: transform .95s var(--ease), opacity .7s var(--ease); }
.poster.on .poster-art img { opacity: 1; transform: none; }
.poster.leaving .poster-art img { opacity: 0; transform: translateX(calc(var(--dir, 1) * -46px)) scale(.96); }
.poster.on:hover .poster-art img { transform: scale(1.035) rotate(-1deg); }
.poster-art .mono-ph { position: absolute; inset: 0; color: rgba(255,255,255,.45); }
.poster-nav { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; border-radius: 99px;
  display: grid; place-items: center; cursor: pointer; color: #fff; border: 1px solid rgba(255,255,255,.2);
  background: rgba(10,10,14,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .25s, transform .25s var(--ease), background .2s, border-color .2s; }
.poster-nav.prev { left: 14px; transform: translateX(-8px); }
.poster-nav.next { right: 14px; transform: translateX(8px); }
.posters:hover .poster-nav, .posters:focus-within .poster-nav { opacity: 1; transform: none; }
.poster-nav:hover { background: var(--accent); border-color: var(--accent); }
.poster-dots { position: absolute; left: 48px; bottom: 22px; z-index: 3; display: flex; gap: 8px; }
.poster-dots button { width: 24px; height: 5px; padding: 0; border: 0; border-radius: 99px; overflow: hidden; cursor: pointer;
  background: rgba(255,255,255,.26); transition: width .4s var(--ease), background .2s; }
.poster-dots button:hover { background: rgba(255,255,255,.45); }
.poster-dots button.on { width: 48px; }
.poster-dots i { display: block; width: 0; height: 100%; border-radius: inherit; background: #fff; }
.poster-dots button.on i { animation: poster-bar var(--dwell, 4.1s) linear forwards; }
.posters.paused .poster-dots button.on i { animation-play-state: paused; }
@keyframes poster-bar { to { width: 100%; } }
@media (hover: none) { .poster-nav { display: none; } }
@media (max-width: 760px) {
  .poster-track { height: 480px; }
  .poster { grid-template-columns: minmax(0, 1fr); grid-template-rows: 200px minmax(0, 1fr); align-items: start;
    gap: 12px; padding: 20px 20px 46px; }
  .poster-art { order: -1; height: 200px; }
  .poster-off { margin-top: 12px; }
  .poster-dots { left: 20px; bottom: 18px; }
}

/* ── all products: search, sort and filters in one bar ───────────────────── */
.shopbar { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; }
.shopsearch { position: relative; flex: 1; min-width: 0; }
.shopsearch > .ic { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px;
  color: var(--text-3); pointer-events: none; transition: color .2s; }
.shopsearch input { width: 100%; height: 48px; padding: 0 46px; border-radius: 999px; outline: none;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: 500 15px var(--sans);
  transition: border-color .2s, box-shadow .25s var(--ease), background-color .2s; }
.shopsearch input::placeholder { color: var(--text-3); }
.shopsearch input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.shopsearch input:hover { border-color: var(--line-3); }
.shopsearch input:focus { border-color: var(--accent); box-shadow: var(--ring); background: var(--surface-2); }
.shopsearch:focus-within > .ic { color: var(--accent); }
.shopsearch .clear { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px;
  border-radius: 99px; display: grid; place-items: center; color: var(--text-3); background: var(--surface-2);
  transition: background .2s, color .2s; }
.shopsearch .clear:hover { background: var(--surface-3); color: var(--text); }
.shopsearch .clear .ic { width: 15px; height: 15px; }
.sortdrop { position: relative; flex: none; }
.sortdrop summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px;
  border-radius: 999px; cursor: pointer; user-select: none; white-space: nowrap; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--text-2); font: 600 14px var(--sans);
  transition: border-color .2s, color .2s, box-shadow .25s var(--ease); }
.sortdrop summary::-webkit-details-marker { display: none; }
.sortdrop summary:hover { border-color: var(--line-3); color: var(--text); }
.sortdrop summary .ic { width: 17px; height: 17px; }
.sortdrop summary b { color: var(--text); font-weight: 700; }
.sortdrop summary .chev { color: var(--text-3); transition: transform .25s var(--ease); }
.sortdrop[open] summary { border-color: var(--accent); box-shadow: var(--ring); }
.sortdrop[open] summary .chev { transform: rotate(180deg); }
.sortmenu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; width: 250px; padding: 7px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg);
  transform-origin: top right; animation: pop-in .18s var(--ease) both; }
.sortmenu-h { padding: 8px 10px 6px; font: 700 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.sortmenu a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 11px;
  border-radius: 11px; color: var(--text-2); font: 600 14px var(--sans);
  transition: background .15s, color .15s, padding-left .2s var(--ease); }
.sortmenu a:hover { background: var(--surface-2); color: var(--text); padding-left: 15px; }
.sortmenu a .ic { width: 16px; height: 16px; color: var(--accent); opacity: 0; transform: scale(.6);
  transition: opacity .2s, transform .2s var(--ease); }
.sortmenu a.on { background: rgba(var(--accent-rgb), .1); color: var(--accent); }
.sortmenu a.on .ic { opacity: 1; transform: none; }
.shopbar .filter-toggle { height: 48px; padding: 0 18px; border-radius: 999px; }
.nbadge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: #fff;
  font: 800 11px/20px var(--sans); text-align: center; }
.catchips { display: none; gap: 8px; margin: 0 0 16px; padding: 2px 0 4px; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; }
.catchips::-webkit-scrollbar { display: none; }
.catchips .chip { scroll-snap-align: start; }
.catchips .chip .n { font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.catchips .chip.on .n { color: inherit; opacity: .75; }
.resultbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 30px; margin-bottom: 14px; }
.resultbar .count { color: var(--text-2); font-size: 14px; }
.resultbar .count b { color: var(--text); }
.resultbar .activef { margin: 0; }
.filters-h, .filters-veil { display: none; }
.filters-f { display: flex; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.filters-f .btn { flex: 1; }
.range .input-icon .pre { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-3);
  font: 600 14px var(--sans); pointer-events: none; }
.range .input-icon .input { padding-left: 27px; }
.switch { display: flex; align-items: center; gap: 11px; cursor: pointer; user-select: none; font-size: 14px; color: var(--text-2); transition: color .2s; }
.switch:hover { color: var(--text); }
.switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch .track { position: relative; flex: none; width: 38px; height: 22px; border-radius: 99px; background: var(--surface-3);
  border: 1px solid var(--line-2); transition: background .2s, border-color .2s, box-shadow .2s; }
.switch .track i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 99px; background: var(--text-2);
  transition: transform .28s var(--ease), background .2s; }
.switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .track i { transform: translateX(16px); background: #fff; }
.switch input:focus-visible + .track { box-shadow: var(--ring); }
@media (max-width: 1024px) {
  .catchips { display: flex; }
  /* the filter panel becomes a bottom sheet */
  .filters { display: block !important; position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 80; margin: 0;
    max-height: 86vh; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px; border-radius: 22px 22px 0 0;
    border-bottom: 0; box-shadow: 0 -24px 60px rgba(0,0,0,.45); transform: translateY(105%); visibility: hidden;
    transition: transform .38s var(--ease), visibility 0s linear .38s; }
  .filters.open { transform: none; visibility: visible; transition: transform .38s var(--ease), visibility 0s; }
  .filters-h { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1;
    padding: 18px 0 12px; margin-bottom: 2px; background: var(--surface); border-bottom: 1px solid var(--line); }
  .filters-h::before { content: ""; position: absolute; top: 7px; left: 50%; width: 38px; height: 4px; margin-left: -19px;
    border-radius: 99px; background: var(--line-3); }
  .filters-h b { display: inline-flex; align-items: center; gap: 8px; font: 750 16px var(--sans); }
  .filters-f { position: sticky; bottom: 0; padding: 14px 0 max(18px, env(safe-area-inset-bottom)); background: var(--surface); }
  .filters-veil { display: block; position: fixed; inset: 0; z-index: 79; background: rgba(0,0,0,.55); opacity: 0;
    transition: opacity .28s var(--ease); }
  .filters-veil.show { opacity: 1; }
  .filters-veil[hidden] { display: none; }
  body.sheet-open { overflow: hidden; }
}
@media (max-width: 640px) {
  .shopbar { flex-wrap: wrap; }
  .shopsearch { flex-basis: 100%; }
  .sortdrop { flex: 1; min-width: 0; }
  .sortdrop summary { width: 100%; justify-content: center; }
  .sortdrop summary .lbl { display: none; }
  .sortdrop summary b { overflow: hidden; text-overflow: ellipsis; }
  .sortmenu { left: 0; right: auto; width: min(290px, calc(100vw - 24px)); transform-origin: top left; }
  .shopbar .filter-toggle { flex: 1; }
}

/* ── refer & earn ─────────────────────────────────────────────────────────── */
.refstrip { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 16px 18px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line-2); transition: border-color .25s, transform .25s var(--ease); }
.refstrip:hover { border-color: rgba(var(--violet-rgb), .45); }
.refstrip .grow { flex: 1; min-width: 0; }
.refstrip .grow b { display: block; font-size: 15px; }
.refstrip .grow span { display: block; margin-top: 2px; font-size: 13px; color: var(--text-3); }
.refstrip-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.refhero { padding: 26px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line-2); }
.reflink { max-width: 700px; margin-top: 12px; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.refrules { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.refrules li { display: flex; gap: 12px; }
.refrules .n { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  font: 800 13px var(--sans); color: var(--accent); background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .25); }
.refrules b { font-size: 14.5px; }
.refrules p { margin-top: 3px; font-size: 13.5px; color: var(--text-2); }
.refnote { display: flex; gap: 12px; margin-top: 18px; padding: 14px; border-radius: 14px; font-size: 13.5px;
  background: var(--surface-2); border: 1px solid var(--line-2); }
.refnote > .ic { flex: none; margin-top: 2px; color: var(--red); }
.refnote ul { display: grid; gap: 3px; margin: 6px 0 0; padding-left: 18px; color: var(--text-2); }
.rewards { display: grid; gap: 10px; }
.reward { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface-2);
  border: 1px solid var(--line-2); transition: border-color .2s, transform .25s var(--ease); }
.reward:hover { border-color: var(--line-3); transform: translateX(3px); }
.reward.met { border-color: rgba(var(--green-rgb), .35); }
.reward .grow { flex: 1; min-width: 0; }
.reward .t { font: 650 14px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reward .s { margin-top: 2px; font-size: 12.5px; color: var(--text-3); }
.rbar { height: 6px; margin-top: 8px; border-radius: 99px; overflow: hidden; background: var(--surface-3); }
.rbar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); animation: sb-grow 1s var(--ease) both; }
.reward.met .rbar i { background: var(--green); }
.rcount { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font: 750 13px var(--sans); color: var(--text-2); }
.rcount .ic { width: 14px; height: 14px; }
.reward.met .rcount { color: var(--green); }
.ocard-cta { justify-self: start; max-width: 100%; white-space: normal; height: auto; min-height: var(--h);
  padding-top: 7px; padding-bottom: 7px; text-align: left; line-height: 1.3; }
/* An offer card's column may shrink below its widest line on a narrow phone
   (an auto track can't) — long names ellipsize, tags and conditions wrap. */
.ocard, .ocard-items, .ocard-conds { grid-template-columns: minmax(0, 1fr); }
.ocard > *, .ocard-items a { min-width: 0; }
@media (max-width: 640px) {
  .refstrip { flex-wrap: wrap; }
  .refstrip-actions { width: 100%; }
  .refstrip-actions .btn { flex: 1; }
  .refhero { padding: 20px; }
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq-a { overflow: hidden; }
.faq summary { transition: color .2s; }
.faq summary:hover, .faq details[open]:not(.closing) summary { color: var(--text); }
.faq summary:hover .ic { color: var(--accent); }
.faq details.closing summary .ic { transform: none; color: var(--text-3); }

/* ── motion: hover, press and entrance details ───────────────────────────── */
.prod { transition: transform .35s var(--ease), border-color .3s, box-shadow .35s var(--ease); }
.prod:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), .45); box-shadow: 0 20px 40px -24px rgba(0,0,0,.7); }
.prod:hover .media img { transform: scale(1.05); }
.prod .add { transition: background .25s, color .25s, border-color .25s, transform .35s var(--ease); }
.prod:hover .add { transform: rotate(-45deg); }
.prod.sold-out:hover { transform: none; box-shadow: none; border-color: var(--line-2); }
.prod.sold-out:hover .media img { transform: none; }
a.kpi:hover, .ocard:hover, .step:hover, .stat:hover { transform: translateY(-3px); border-color: var(--line-3); }
.step, .stat, .ocard { transition: transform .3s var(--ease), border-color .3s; }
.step .n { transition: transform .45s var(--ease), background .3s, border-color .3s; }
.step:hover .n { transform: rotate(-8deg) scale(1.07); background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .3); }
.ico-tile { transition: transform .4s var(--ease); }
a.kpi:hover .ico-tile, a.card:hover .ico-tile, .refstrip:hover .ico-tile, .reward:hover .ico-tile { transform: scale(1.08) rotate(-5deg); }
a.card { transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
a.card:hover { transform: translateY(-3px); border-color: var(--line-3); box-shadow: 0 18px 36px -24px rgba(0,0,0,.65); }
a.li { transition: background .2s, padding-left .25s var(--ease); }
a.li:hover { padding-left: 22px; }
.catlist a { transition: background .2s, color .2s, padding-left .25s var(--ease); }
.catlist a:hover { padding-left: 16px; }
.chip { transition: color .2s, border-color .2s, background .2s, transform .2s var(--ease); }
.pg { transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease); }
a.pg:hover { transform: translateY(-2px); }
.chip:active, .pg:active, .tier:active:not(:disabled), .qpick button:active, .copybtn:active { transform: scale(.95); }
.btn:not(.primary):not(.ghost):not(.danger):hover { transform: translateY(-1px); }
.input { transition: border-color .2s, box-shadow .25s var(--ease), background-color .2s; }
a.link { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px;
  text-underline-offset: 3px; transition: text-decoration-color .2s, color .2s; }
a.link:hover { text-decoration-color: currentColor; }
footer.site ul a { display: inline-block; transition: color .2s, transform .25s var(--ease); }
footer.site ul a:hover { color: var(--text); transform: translateX(3px); }
.copybtn { transition: background .2s, color .2s, border-color .2s, transform .15s var(--ease); }
.kpi .v, .balance-card .v, .price { font-variant-numeric: tabular-nums; }
/* grids further down the page: cards come in one after another */
.stagger-pre > * { opacity: 0; transform: translateY(18px); }
.stagger-in > * { animation: card-in .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(18px); } }

/* ── "Payment received" screen ───────────────────────────────────────────── */
.paidscreen { display: none; }
.js .paidscreen, .paidscreen.static { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px;
  text-align: center; color: #fff; background: #000; animation: paid-in .3s ease both;
  transition: opacity .65s var(--ease), transform .65s var(--ease), visibility 0s linear .65s; }
.paidscreen.lift { opacity: 0; transform: scale(1.04); visibility: hidden; pointer-events: none; }
body.paid-lock, body.paid-curtain { overflow: hidden; }
body.paid-curtain::after { content: ""; position: fixed; inset: 0; z-index: 300; background: #000; animation: paid-in .25s ease both; }
.paid-inner { display: grid; justify-items: center; gap: 6px; max-width: 460px; }
.paid-mark { position: relative; width: 132px; height: 132px; margin-bottom: 18px; display: grid; place-items: center; }
.paid-mark svg { width: 120px; height: 120px; overflow: visible; }
.paid-ring { fill: none; stroke: #2fd07a; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327;
  transform: rotate(-90deg); transform-origin: 60px 60px; animation: paid-draw .8s cubic-bezier(.65,0,.35,1) .15s forwards; }
.paid-check { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 66; stroke-dashoffset: 66; animation: paid-draw .45s cubic-bezier(.65,0,.35,1) .85s forwards; }
.paid-pulse { position: absolute; inset: 6px; border-radius: 50%; border: 2px solid rgba(47,208,122,.55); opacity: 0;
  animation: paid-pulse 1.8s ease-out 1s infinite; }
.paid-pulse.two { animation-delay: 1.6s; }
.paid-title { font: 850 clamp(28px, 5vw, 42px)/1.1 var(--sans); letter-spacing: -.03em; opacity: 0; animation: paid-up .6s var(--ease) 1s forwards; }
.paid-big { margin-top: 2px; font: 780 clamp(19px, 3vw, 25px)/1.3 var(--sans); opacity: 0; animation: paid-up .6s var(--ease) 1.15s forwards; }
.paid-sub { font-size: 15px; color: rgba(255,255,255,.62); opacity: 0; animation: paid-up .6s var(--ease) 1.3s forwards; }
.paid-go { margin-top: 20px; color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2);
  opacity: 0; animation: paid-up .6s var(--ease) 1.5s forwards; }
.paid-go:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.36); }
.paid-title.show, .paid-sub.show, .paid-go.show { opacity: 1; animation: paid-up .5s var(--ease) both; }
.paid-spinner { width: 54px; height: 54px; margin-bottom: 20px; border-radius: 50%; border: 3px solid rgba(255,255,255,.14);
  border-top-color: #2fd07a; animation: spin .8s linear infinite; }
@keyframes paid-in { from { opacity: 0; } }
@keyframes paid-draw { to { stroke-dashoffset: 0; } }
@keyframes paid-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes paid-pulse { 0% { transform: scale(.92); opacity: .75; } 100% { transform: scale(1.75); opacity: 0; } }

/* ── reduced motion: everything visible, nothing moving ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  .paid-title, .paid-big, .paid-sub, .paid-go { opacity: 1; }
  .paid-ring, .paid-check { stroke-dashoffset: 0; }
  .paid-pulse { display: none; }
  .stagger-pre > * { opacity: 1; transform: none; }
  .poster-body > *, .poster-art img { opacity: 1; transform: none; }
}

/* Safety net: nothing may widen the page sideways. Real causes are fixed above;
   clip (not hidden) keeps position: sticky working. */
html, body { overflow-x: clip; }
img, video, pre, table { max-width: 100%; }

/* ══ v10 ══════════════════════════════════════════════════════════════════ */
/* Phones: the account pages are reached from the bottom bar and the ☰ menu —
   no second row of tabs across the top of every account page. */
@media (max-width: 900px) { .acct-side { display: none; } }
/* "Unlock by inviting": each row fits the card; a long reward name ellipsizes
   instead of pushing the progress bar and the count off the screen. */
.rewards { grid-template-columns: minmax(0, 1fr); }
.reward, .reward .grow { min-width: 0; }
@media (max-width: 640px) {
  .reward { gap: 10px; padding: 10px 11px; }
  .reward .ico-tile { width: 34px; height: 34px; }
  .rcount { font-size: 12px; }
}
/* A sign-in button waiting a moment for the browser's check (web/formshield.py) */
.btn.is-busy { pointer-events: none; opacity: .85; }
.btn.is-busy > .ic { display: none; }
.btn.is-busy::before { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor;
  border-right-color: transparent; animation: spin .7s linear infinite; }

/* ══ v11 ═══════════════════════════════════════════════════════════════════ */
/* A freebie's unlock conditions, each with the shopper's progress. A referral
   condition is a link to the referral page (web/templates/shop/freebie.html). */
.unlock { display: grid; gap: 10px; margin-bottom: 16px; padding: 13px 15px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid rgba(var(--gold-rgb), .35); }
.unlock.done { border-color: rgba(var(--green-rgb), .35); }
.unlock-h { display: flex; align-items: center; gap: 8px; font: 700 13.5px var(--sans); color: var(--text); }
.unlock-h .ic { width: 16px; height: 16px; flex: none; color: var(--gold); }
.unlock.done .unlock-h .ic { color: var(--green); }
.unlock .ocard-conds li { font-size: 13.5px; }
.ocard-conds li a.link { min-width: 0; }
.ocard-conds li em.ok { color: var(--green); }
/* A toast that names a referral condition carries the link to meet it. */
.toast a.link { font-weight: 650; white-space: nowrap; }

/* ══ v12 ═══════════════════════════════════════════════════════════════════ */
/* "Any one of these works": the authenticator app or an emailed code
   (web/securitycodes.py) — on sign-in, a new password, turning 2FA off. */
.codeways { display: grid; gap: 8px; margin: 14px 0 18px; }
.codeway { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 11px 13px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line-2); }
.codeway > .ic { width: 18px; height: 18px; flex: none; color: var(--accent); }
.codeway > div { min-width: 0; }
.codeway b { display: block; font: 700 13.5px var(--sans); color: var(--text); }
.codeway span { display: block; margin-top: 1px; font-size: 12.5px; color: var(--text-3); overflow-wrap: anywhere; }
.codeway-or { justify-self: center; line-height: 1; font: 700 11px var(--sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); }
.linkbtn { padding: 0; border: 0; background: none; font: inherit; font-weight: 650; color: var(--accent); cursor: pointer;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.linkbtn:hover { text-decoration-color: currentColor; }
.pw-forgot { margin: -6px 0 16px; font-size: 13px; color: var(--text-3); }

/* ══ v14 ═══════════════════════════════════════════════════════════════════ */
/* Lighter glass: the header and the phone tab bar blur what scrolls beneath
   them on every frame — a smaller radius costs a fraction and looks the same. */
.top .shell { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tabbar { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* Bulk-discount posters: the same poster, a cooler accent and "each for N+". */
.posters-bulk .poster-kicker .ic { color: #6ee7b7; }
.posters-bulk .poster-dots button.on i { background: #6ee7b7; }
.poster-price em { font-style: normal; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.74); }
.posters-sec .sec-h { margin-bottom: 18px; }

/* Toasts. The close button is a real target (it was a 16px icon with 2px of
   padding). On phones they drop in under the floating header, across the
   screen, instead of floating over the page just above the tab bar. */
.toast .x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: -7px -7px -7px auto;
  padding: 0; border-radius: 10px; transition: background .2s, color .2s; }
.toast .x .ic { width: 18px; height: 18px; }
.toast .x:hover { background: var(--surface-3); color: var(--text); }
@media (max-width: 900px) {
  .toasts { top: 88px; bottom: auto; left: 12px; right: 12px; width: auto; }
  .toast { animation-name: toast-drop; box-shadow: 0 18px 40px -14px rgba(0,0,0,.6); }
  .toast.hide { animation-name: toast-lift; }
  .toast .x { width: 40px; height: 40px; margin: -9px -9px -9px auto; }
  .toast .x .ic { width: 20px; height: 20px; }
}
@keyframes toast-drop { from { opacity: 0; transform: translateY(-14px); } }
@keyframes toast-lift { to { opacity: 0; transform: translateY(-14px); } }

/* Hover: the home page's "Popular right now" rows and the four stat tiles.
   Rows light up behind their content (the dividers stay where they are);
   tiles lift with `translate`, which stacks with — instead of fighting — the
   scroll-in reveal's `transform`, and keep the reveal's fade in their
   transition list. */
.hero-card .mini { position: relative; isolation: isolate; }
.hero-card .mini::before { content: ""; position: absolute; inset: 3px -10px; z-index: -1; border-radius: 12px;
  background: var(--surface-3); opacity: 0; transform: scale(.97); transition: opacity .22s, transform .25s var(--ease); }
.hero-card .mini:hover::before, .hero-card .mini:focus-visible::before { opacity: 1; transform: none; }
.hero-card .mini .thumb { transition: transform .3s var(--ease); }
.hero-card .mini:hover .thumb { transform: scale(1.07) rotate(-2deg); }
.hero-card .mini b { transition: color .2s, translate .25s var(--ease); }
.hero-card .mini:hover b { color: var(--accent); translate: -3px 0; }
.stats > .stat, .stats > .stat.reveal {
  transition: opacity .4s ease-out, transform .4s ease-out, translate .3s var(--ease),
              border-color .25s, box-shadow .3s var(--ease), background-color .25s;
  transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s, 0s, 0s; }
.stats > .stat:hover { translate: 0 -4px; border-color: rgba(var(--accent-rgb), .45); background-color: var(--surface-2);
  box-shadow: 0 18px 36px -24px rgba(0,0,0,.75); }
.stat .k .ic { transition: transform .35s var(--ease); }
.stat:hover .k .ic { transform: scale(1.2) rotate(-8deg); }

/* Product page on a phone: price and "Continue to payment" right after the
   name, the description after them. The two desktop columns dissolve into one
   list (display: contents) and `order` sorts it; desktop is untouched. */
@media (max-width: 1024px) {
  .pdp { gap: 0; }
  .pdp > .pdp-main, .pdp > aside { display: contents; }
  .pdp-main > .seller { justify-self: start; }
  .pdp .order-card { order: 1; margin-top: 22px; }
  .pdp .pdp-desc { order: 2; }
  .pdp .pdp-steps { order: 3; margin-top: 16px; }
}

/* ══ v15 ═══════════════════════════════════════════════════════════════════ */
/* A deal poster whose product is sold out stays in the slideshow — every
   running discount gets one — but reads like a sold-out card: picture dimmed
   under the same "Sold out" badge, a quiet button, no hover, not a link. */
.poster.sold { cursor: default; }
.poster.sold .poster-art img { filter: grayscale(.85) drop-shadow(0 28px 50px rgba(0,0,0,.5)); }
.poster.sold.on .poster-art img { opacity: .5; }
.poster.sold.on:hover .poster-art img { transform: none; }
.poster.sold .poster-art .soldout-veil { background: none; }
.poster.sold .poster-off, .poster.sold .poster-price b { color: rgba(255,255,255,.72); }
.poster-cta.poster-wait, .poster.sold:hover .poster-cta.poster-wait {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.82); transform: none; }
.poster-cta.poster-wait .ic { color: #ffb35c; }
/* Bulk prices share the deals' slideshow now: a bulk slide keeps its own
   green accent. */
.poster.is-bulk .poster-kicker .ic { color: #6ee7b7; }
/* Every deal plus the bulk prices can make a long row of dots: they share the
   poster's width and shrink to fit instead of running off its edge. Only the
   dots themselves take clicks — the row between them is the poster's. */
.poster-dots { right: 48px; pointer-events: none; }
.poster-dots button { flex: 0 1 auto; min-width: 6px; pointer-events: auto; }
/* Phones: picture, saving, a two-line name, price and button now fit above
   the slide dots — the button used to run into them. */
@media (max-width: 760px) {
  .poster-track { height: 500px; }
  .poster { grid-template-rows: 180px minmax(0, 1fr); }
  .poster-art { height: 180px; }
  .poster-dots { right: 20px; }
}
/* With a mouse the arrows appear on hover — they sat on the first letters of
   the product name. The text (and the dots under it) now start clear of them. */
@media (hover: hover) and (min-width: 761px) {
  .poster { padding-left: 76px; padding-right: 76px; }
  .poster-dots { left: 76px; right: 76px; }
}

/* ══ v17 ═══════════════════════════════════════════════════════════════════ */
/* Swiping the posters on a phone: without this the browser claims every
   sideways touch for itself (pointercancel) and the swipe never arrives.
   Scrolling the page up and down stays the browser's. */
.poster-track { touch-action: pan-y; }

/* ══ v18 ═══════════════════════════════════════════════════════════════════ */
/* Card badges (a discount's name, "Bulk: 10+ save 25%") stay inside the card:
   several wrap to a second line, one too long for a phone column ends in "…". */
.prod .badges { right: 10px; }
.prod .badges .tag { max-width: 100%; min-width: 0; }
.prod .badges .tag > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Product page: "Bulk discount applied — $x each" above the total. */
.applied { margin-top: 16px; }
.applied[hidden] { display: none; }
.applied .tag { height: auto; min-height: 30px; padding: 5px 12px; font-size: 12.5px; }

/* ══ v19 ═══════════════════════════════════════════════════════════════════ */
/* "Ending soon": the poster mirrored — picture left, countdown right — over the
   product's own pre-blurred picture, with a ticking clock. */
.posters-cd .poster-track { height: clamp(360px, 32vw, 420px); }
@media (min-width: 761px) {
  .posters-cd .poster { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}
.posters-cd .poster-kicker .ic { color: #ff8a5c; }
.posters-cd .poster-dots button.on i { background: #ffb35c; }
.poster-price em.cd-off { padding: 3px 9px; border-radius: 99px; font: 800 12.5px var(--sans);
  color: #1a1100; background: var(--gold); align-self: center; }
.cd-clock { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.cd-dial { flex: none; width: 60px; height: 60px; overflow: visible; }
.cd-ring { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.6); stroke-width: 2;
  transform-box: view-box; transform-origin: 24px 24px; animation: cd-pulse 2s var(--ease) infinite; }
.cd-tick { stroke: rgba(255,255,255,.5); stroke-width: 1.6; stroke-linecap: round; }
.cd-hand { stroke-linecap: round; transform-box: view-box; transform-origin: 24px 24px; }
.cd-min { stroke: #fff; stroke-width: 2.6; animation: cd-spin 3600s linear infinite reverse; }
.cd-sec { stroke: #ffb35c; stroke-width: 1.6; animation: cd-spin 60s steps(60) infinite reverse; }
.cd-pin { fill: #ffb35c; }
.cd-units { display: flex; gap: 8px; min-width: 0; }
.cd-units > span { display: grid; justify-items: center; min-width: 60px; padding: 9px 6px 7px; border-radius: 12px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); overflow: hidden; }
.cd-units b { display: block; font: 850 clamp(21px, 2.2vw, 29px)/1 var(--sans); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.cd-units b.flip { animation: cd-flip .45s var(--ease); }
.cd-units small { margin-top: 5px; font: 700 9.5px var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.62); }
.poster.cd.ended .cd-units b { color: rgba(255,255,255,.45); }
.poster.cd.ended .poster-cta { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
@keyframes cd-spin { to { transform: rotate(360deg); } }
@keyframes cd-flip { from { opacity: 0; transform: translateY(-45%); } }
@keyframes cd-pulse { 50% { stroke: #ffb35c; transform: scale(1.06); } }
@media (max-width: 760px) {
  .posters-cd .poster-track { height: 520px; }
  .cd-clock { gap: 10px; margin-top: 12px; }
  .cd-dial { width: 46px; height: 46px; }
  .cd-units { flex: 1; gap: 6px; }
  .cd-units > span { flex: 1; min-width: 0; padding: 7px 3px 6px; }
  .cd-units b { font-size: 20px; }
  .cd-units small { font-size: 8.5px; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-hand, .cd-ring, .cd-units b.flip { animation: none; }
}

/* ══ v20 ═══════════════════════════════════════════════════════════════════ */
/* Long account lists stay short: "Show N more" folds out the rest (ui.more). */
details.more > summary { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 8px 14px;
  border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-2);
  font: 650 13px var(--sans); cursor: pointer; list-style: none; user-select: none;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease); }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary:hover { background: var(--surface-3); color: var(--text); border-color: var(--line-3); }
details.more > summary .ic { width: 15px; height: 15px; transition: transform .2s var(--ease); }
details.more[open] > summary .ic { transform: rotate(180deg); }
details.more > summary .l, details.more[open] > summary .m { display: none; }
details.more[open] > summary .l { display: inline; }

/* ══ v21 ═══════════════════════════════════════════════════════════════════ */
/* Replacements: the order picker — one tappable row per paid order. */
.rpick { display: grid; gap: 8px; margin-top: 10px; }
.rp { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--line-2); background: var(--surface); cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease); }
.rp:hover { border-color: var(--line-3); background: var(--surface-2); }
.rp:has(input:checked) { border-color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.rp input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.rp .grow { flex: 1; min-width: 0; }
.rp .grow b { display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp .grow small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-3); }
.rp .tag { flex: none; }
.rp.off { opacity: .6; cursor: not-allowed; }
.rq .item pre { white-space: pre-wrap; word-break: break-word; }
@media (max-width: 560px) {
  .rp { flex-wrap: wrap; }
  .rp .tag { margin-left: 30px; }
}

/* ══ v22 ═══════════════════════════════════════════════════════════════════ */
/* Terms & Privacy: contents on the left (in view while reading), the text on
   the right at a comfortable measure; one column on phones. */
.legal-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; }
.legal-toc { position: sticky; top: 96px; padding: 18px; }
.legal-toc ol { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 7px; font-size: 13.5px; color: var(--text-3); }
.legal-toc ol a { color: var(--text-2); transition: color .16s; }
.legal-toc ol a:hover { color: var(--accent); }
.legal-other { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; }
.legal-other a { display: inline-flex; align-items: center; gap: 6px; }
.legal-other .ic { width: 15px; height: 15px; }
.legal-body { min-width: 0; max-width: 760px; }
.legal-body section { padding-top: 28px; scroll-margin-top: 96px; }
.legal-body h2 { font: 760 22px/1.25 var(--sans); letter-spacing: -.02em; }
.legal-body h3 { margin-top: 18px; font: 700 15.5px var(--sans); }
.legal-body p, .legal-body li { font-size: 15px; line-height: 1.7; color: var(--text-2); }
.legal-body p { margin-top: 10px; }
.legal-body section > ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.legal-body b { color: var(--text); }
.legal-body code { font-size: 13px; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); }
.legal-short { padding: 18px 20px; }
.legal-short ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 9px; }
.legal-short li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.legal-short li .ic { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--accent); }
.legal-rule { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.legal-rule > div { padding: 16px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); }
.legal-rule b { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.legal-rule b .ic { width: 17px; height: 17px; color: var(--accent); }
.legal-rule p { font-size: 14px; }
.legal-formula { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: var(--surface-2);
  font: 650 13.5px var(--sans); color: var(--text) !important; text-align: center; }
.legal-example { display: flex; gap: 10px; margin-top: 14px !important; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(var(--accent-rgb), .3); background: rgba(var(--accent-rgb), .07); }
.legal-example .ic { flex: none; width: 17px; height: 17px; margin-top: 4px; color: var(--accent); }
.hint.agree { margin-top: 10px; text-align: center; font-size: 12.5px; }
/* Sign-up: the Terms box — the site's own checkbox (the real input stays in the
   form, invisible but focusable, so validation and keyboard still work) and
   the site's own warning instead of the browser's grey bubble (shop.js). */
.agree-box { position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 6px 0 14px;
  padding: 13px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface);
  cursor: pointer; font-size: 13.5px; line-height: 1.5; color: var(--text-2); user-select: none;
  transition: border-color .18s, background-color .18s; }
.agree-box:hover { border-color: var(--line-3); }
.agree-box input { position: absolute; left: 22px; top: 22px; width: 1px; height: 1px; margin: 0; opacity: 0; }
.agree-box .cb { flex: none; display: grid; place-items: center; width: 21px; height: 21px; margin-top: 0;
  border-radius: 7px; border: 1.5px solid var(--line-3); background: var(--surface-2); color: #fff;
  transition: background-color .18s, border-color .18s, box-shadow .18s, transform .18s var(--ease); }
.agree-box .cb .ic { width: 14px; height: 14px; stroke-width: 3; opacity: 0; transform: scale(.4) rotate(-12deg);
  transition: opacity .16s, transform .24s var(--ease); }
.agree-box:active .cb { transform: scale(.9); }
.agree-box input:checked + .cb { background: var(--accent); border-color: var(--accent); }
.agree-box input:checked + .cb .ic { opacity: 1; transform: none; }
.agree-box input:focus-visible + .cb { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .35); }
.agree-box:has(input:checked) { border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .06); }
.agree-box .t { min-width: 0; }
.agree-box.need { border-color: rgba(var(--red-rgb), .65); background: rgba(var(--red-rgb), .07);
  animation: agree-shake .42s var(--ease); }
.agree-box.need .cb { border-color: var(--red); box-shadow: 0 0 0 3px rgba(var(--red-rgb), .22); }
.agree-warn { display: flex; align-items: center; gap: 8px; margin: -4px 0 14px; padding: 9px 12px;
  border-radius: 11px; background: rgba(var(--red-rgb), .1); border: 1px solid rgba(var(--red-rgb), .3);
  font-size: 13px; line-height: 1.45; color: var(--red); animation: agree-in .22s var(--ease); }
.agree-warn[hidden] { display: none; }
.agree-warn .ic { flex: none; width: 16px; height: 16px; }
@keyframes agree-shake { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }
@keyframes agree-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .agree-box.need, .agree-warn { animation: none; } }

/* ══ v23 ═══════════════════════════════════════════════════════════════════ */
/* A tick emoji in bot-written text (web/richtext.py) → the site's check icon,
   sized and aligned with the text around it. */
.rt-ic { display: inline-block; width: 1.05em; height: 1.05em; margin-right: .3em; vertical-align: -.16em;
  color: var(--accent); }
.rt-ic svg { display: block; width: 100%; height: 100%; }
.fbottom a { color: inherit; transition: color .16s; }
.fbottom a:hover { color: var(--text); }
@media (max-width: 900px) {
  .legal-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .legal-toc { position: static; }
  .legal-rule { grid-template-columns: minmax(0, 1fr); }
}

/* ── a brand's product or category (web/core.branded) ─────────────────────── */
/* Its logo sits small on the shop's own surface, like an app icon on a tile —
   never a full-bleed copy of the brand's artwork: the look of the brand's own
   site, which got the whole domain flagged on 2026-09-28. */
.prod .media.brandpic { background: radial-gradient(circle at 50% 45%, var(--surface-3), var(--surface-2) 72%); }
.prod .media.brandpic img { width: 50%; height: 50%; border-radius: 18%; }
.gal.brandpic .gal-stage { display: grid; place-items: center; min-height: clamp(220px, 34vw, 320px);
  background: radial-gradient(circle at 50% 45%, var(--surface-3), var(--surface-2) 72%); }
.gal.brandpic .gal-img { width: auto; max-width: min(46%, 240px); max-height: 240px; border-radius: 18%; }
.gal.brandpic .gal-img.out { width: auto; height: auto; max-width: min(46%, 240px); max-height: 240px; margin: auto; }
.poster-art.brandpic img { max-width: 58%; max-height: 58%; }
.resell-note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; max-width: 62ch;
  font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.resell-note .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.resell-note b { color: var(--text-2); font-weight: 650; }
.fdisclaim { margin: 14px 0 0; max-width: 92ch; font-size: 12px; line-height: 1.55; color: var(--text-3); }