/*
  IV-X Retailer — "Bulletin at rest, instrument in motion", on white.
  Ruled editorial grid for reading; dials, dot matrices and scales only where
  something is measured. Black is the second color; volt is the single accent.
*/

/* ---------- base ---------- */
:root {
  --tap: 48px;
  --radius: 2px;
  --radius-tile: 18px;
  --side-w: 232px;
  --tabbar-h: 64px;
  --gutter: 16px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; text-rendering: optimizeLegibility; }
::selection { background: var(--volt); color: var(--ink); }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--volt-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.035em; line-height: 0.95; margin: 0; text-wrap: balance; }
h1 { font-size: 44px; }
h2 { font-size: 22px; letter-spacing: -0.02em; }
@media (min-width: 1024px) { h1 { font-size: 60px; } }
p { margin: 0 0 .75rem; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--bg); padding: 10px 14px; z-index: 100; }
.skip:focus { left: 8px; }
.muted { color: var(--fg-2); }
.small { font-size: 13px; }
.neg { color: var(--ink); font-weight: 600; }
.pos { color: var(--ink); font-weight: 600; }
.neg::before { content: "▼ "; font-size: .7em; }
.pos::before { content: "▲ "; font-size: .7em; }
[hidden] { display: none !important; }

/* typographic primitives */
.label, .eyebrow, .stat__label, .mini-field > span, .locswitch__label, .locbanner__label, .table thead th, .mini dt, .tile__label {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); font-weight: 400;
}
.numeral, .qty, .stat__value, .tile__num, .delta, .mini dd, .locbanner__name {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.05em; line-height: .85; font-variant-numeric: tabular-nums;
}
.mark { display: inline-block; width: 9px; height: 9px; background: var(--ink); vertical-align: 1px; margin-right: 8px; }
.mark--volt { background: var(--volt); box-shadow: inset 0 0 0 1px var(--ink); }
.mark--hollow { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fg-2); }

/* demo strip */
.demo-banner { background: var(--ink); color: #fff; font: 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: 7px 16px; }
.demo-banner strong { background: var(--volt); color: var(--ink); padding: 0 6px; font-weight: 600; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px var(--gutter); background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.topbar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo { height: 24px; width: auto; display: block; }
.logo__suffix { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--fg-2); }
.topbar__user { margin-left: auto; display: flex; align-items: center; gap: 12px; font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-2); }
.topbar__name { display: none; }
.topbar .linkbtn { color: var(--ink); font: inherit; }
.locswitch { order: 3; flex: 1 1 100%; display: flex; align-items: center; gap: 10px; border: 1px solid var(--ink); border-radius: var(--radius); padding: 0 0 0 12px; position: relative; background: var(--bg); }
.locswitch__select { flex: 1; min-height: 46px; background: transparent; color: var(--ink); border: 0; font: 600 16px var(--font-body); padding: 0 40px 0 0; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.locswitch__static { flex: 1; min-height: 46px; display: flex; align-items: center; font-weight: 600; }
.dot { width: 9px; height: 9px; display: inline-block; flex: none; background: var(--ink); }
.dot--all { background: var(--volt); box-shadow: inset 0 0 0 1px var(--ink); }
.locswitch__dot { background: var(--volt); box-shadow: inset 0 0 0 1px var(--ink); }

/* ---------- layout ---------- */
.main { padding: 24px var(--gutter) calc(var(--tabbar-h) + 104px); max-width: 1180px; margin: 0 auto; outline: none; }
.sidenav { display: none; }
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--bg); border-top: 1px solid var(--rule); padding-bottom: env(safe-area-inset-bottom); }
.nav__item { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--fg-2); font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.nav__item .icon { display: none; }
.nav__item::before { content: ""; width: 8px; height: 8px; background: var(--bg-3); flex: none; }
.nav__item.is-active { color: var(--ink); }
.nav__item.is-active::before { background: var(--volt); box-shadow: inset 0 0 0 1px var(--ink); }
.tabbar .nav__item { flex-direction: column; justify-content: center; gap: 8px; min-height: var(--tabbar-h); }
.tabbar .nav__item--cta { color: var(--ink); }

@media (min-width: 900px) {
  :root { --gutter: 32px; }
  .topbar { flex-wrap: nowrap; }
  .topbar__name { display: inline; }
  .locswitch { order: 0; flex: 0 1 360px; margin-left: 24px; }
  .layout { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: calc(100vh - 71px); }
  .sidenav { display: flex; flex-direction: column; padding: 24px 0 24px var(--gutter); position: sticky; top: 71px; height: calc(100vh - 71px); }
  .sidenav .nav__item { min-height: 48px; border-bottom: 1px solid var(--rule); padding-right: 16px; }
  .sidenav .nav__item:hover { color: var(--ink); }
  .tabbar { display: none; }
  .main { padding: 36px var(--gutter) 120px; width: 100%; }
}

/* ---------- page head ---------- */
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--ink); }
.pagehead .lead { margin: 12px 0 0; }
.lead { color: var(--fg-2); max-width: 60ch; font-size: 16px; }
.eyebrow { margin-bottom: 10px; display: block; }
.back { display: inline-flex; align-items: center; min-height: 32px; margin-bottom: 8px; font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; color: var(--fg-2); }
.back:hover { color: var(--ink); }

/* selected location — always obvious */
.locbanner { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 14px 16px; border-radius: var(--radius); background: var(--ink); color: #fff; margin-bottom: 20px; }
.locbanner::before { content: ""; width: 10px; height: 10px; background: var(--volt); }
.locbanner__label { color: #a5a5a0; }
.locbanner__name { font-size: 26px; letter-spacing: -0.03em; line-height: 1; }
.locbanner__hint { flex-basis: 100%; font-size: 12px; color: #a5a5a0; }
.loctag { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }

/* ---------- surfaces ---------- */
.card { background: var(--bg); border-top: 1px solid var(--ink); padding: 16px 0 8px; margin-bottom: 28px; }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.card__head h2 { font-size: 22px; }
.cols { display: grid; gap: 0 32px; }
@media (min-width: 900px) { .cols { grid-template-columns: 1fr 1fr; } }
.cardgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-bottom: 24px; }
.cardgrid--tight { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.loccard { background: var(--bg-2); border-top: 0; border-radius: var(--radius-tile); padding: 18px; margin: 0; }
.loccard h2 { font-size: 26px; }
.loccard address { font-style: normal; margin: 10px 0 4px; }
.contact { list-style: none; margin: 8px 0; padding: 0; font-size: 14px; }
.contact li { display: flex; gap: 10px; padding: 6px 0; border-top: 1px solid var(--rule); }
.contact li span:first-child { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-2); width: 72px; flex: none; padding-top: 2px; }
.pickcard { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 0; border-radius: var(--radius-tile); background: var(--bg-2); cursor: pointer; font: inherit; color: inherit; min-height: 104px; }
.pickcard:hover { background: var(--bg-3); }
.pickcard strong { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; font-size: 24px; line-height: 1; }

/* ruled lists */
.list { list-style: none; margin: 0; padding: 0; }
.list.card { padding: 0; }
.row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--rule); min-height: 64px; }
.list > li:first-child > .row, .list > .row:first-child { border-top: 0; }
.list.card > li:first-child.row, .list.card > li:first-child > .row { border-top: 0; }
.row--link { color: inherit; text-decoration: none; }
.row--link:hover { background: var(--bg-2); }
.row--muted { opacity: .5; }
.row--wrap { flex-wrap: wrap; }
.row--stack { flex-direction: column; align-items: stretch; }
.row__main { flex: 1 1 200px; display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.row__main strong { font-weight: 600; font-size: 16px; }
.row__end { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.list--compact .row { min-height: 48px; padding: 10px 0; }
.list--menu .icon { color: var(--ink); }
.qty { font-size: 30px; white-space: nowrap; }
.qty small { font: 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); margin-left: 4px; }
.delta { font-size: 26px; }
.activity .row__end { flex-direction: column; align-items: flex-end; gap: 4px; }
.mini { display: flex; gap: 0; margin: 14px 0; border-top: 1px solid var(--rule); }
.mini > div { flex: 1; padding: 10px 10px 0 0; }
.mini > div + div { border-left: 1px solid var(--rule); padding-left: 10px; }
.mini dd { margin: 6px 0 0; font-size: 28px; }
.empty { padding: 56px 0; border-top: 1px solid var(--ink); margin-bottom: 24px; }
.empty h1, .empty h2 { margin-bottom: 12px; }
.empty h2 { font-size: 32px; }
.empty p { color: var(--fg-2); max-width: 46ch; margin: 0 0 20px; }
.empty .cardgrid { margin-top: 16px; }
.empty-inline { color: var(--fg-2); padding: 14px 0; display: flex; align-items: center; gap: 10px; margin: 0; }
.empty-inline .icon { color: var(--ink); }

/* ---------- stat strip (ruled, 2–4 columns) ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); margin-bottom: 28px; }
.stats > * { padding: 14px 14px 16px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.stats > *:nth-child(2n) { border-left: 1px solid var(--rule); padding-left: 14px; }
@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stats > * { border-bottom: 0; }
  .stats > * + * { border-left: 1px solid var(--rule); padding-left: 14px; }
}
.stat { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; }
.stat__value { font-size: 44px; }
.stat__unit { font-size: 13px; color: var(--fg-2); }
.stat--alert .stat__value::after { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--volt); box-shadow: inset 0 0 0 1px var(--ink); margin-left: 8px; vertical-align: top; }
.stat--link:hover .stat__value { text-decoration: underline; text-decoration-color: var(--volt-deep); text-decoration-thickness: 3px; }
.statusgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.statusgrid > div { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 12px 0; }
.statusgrid > div + div { border-left: 1px solid var(--rule); padding-left: 12px; }
.statusgrid.card { padding-top: 0; }

/* ---------- actions ---------- */
.actions-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 28px; }
.actions-hero .action--primary { grid-column: 1 / -1; }
@media (min-width: 900px) { .actions-hero { grid-template-columns: 2fr 1fr 1fr 1fr; } .actions-hero .action--primary { grid-column: auto; } }
.action { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; min-height: 76px; border-radius: var(--radius-tile); background: var(--bg-2); color: var(--ink); text-decoration: none; }
.action span { display: flex; flex-direction: column; gap: 6px; }
.action strong { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.03em; line-height: 1; }
.action small { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-2); }
.action .icon { flex: none; order: 2; }
.action:hover { background: var(--bg-3); }
.action--primary { background: var(--volt); }
.action--primary:hover { background: var(--volt-deep); }
.action--primary small { color: var(--ink); }
.action--primary strong { font-size: 26px; }
.action--warn { background: var(--ink); color: #fff; }
.action--warn small { color: var(--volt); }
.action--warn:hover { background: #222; }
.actions-hero--compact .action { min-height: 64px; }
@media (max-width: 899px) { .actions-hero .action:last-child:nth-child(even) { grid-column: 1 / -1; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--tap); padding: 0 20px; border-radius: var(--radius); border: 1px solid var(--ink); background: var(--bg); color: var(--ink); font: 600 15px var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 60ms steps(1, end), background-color 120ms linear; }
.btn:active { transform: translateY(1px); }
.btn:hover { background: var(--bg-2); }
.btn--primary { background: var(--volt); border-color: var(--volt); color: var(--ink); }
.btn--primary:hover { background: var(--volt-deep); border-color: var(--volt-deep); }
.btn--accent, .btn--dark { background: var(--ink); color: #fff; }
.btn--accent:hover, .btn--dark:hover { background: #222; }
.btn--ghost { border-color: transparent; background: transparent; text-decoration: underline; text-decoration-color: var(--volt-deep); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.btn--ghost:hover { background: var(--bg-2); }
.btn--danger { background: var(--ink); color: #fff; }
.btn--lg { min-height: 58px; font-size: 17px; padding: 0 26px; }
.btn--sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
.btn--block { width: 100%; margin-bottom: 16px; justify-content: space-between; }
.btn[disabled], .btn.is-busy { opacity: .4; cursor: not-allowed; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.btnrow form { margin: 0; }
.btnrow--center { justify-content: flex-start; }
.card .btnrow:last-child { margin-bottom: 0; }
.linkbtn { background: none; border: 0; padding: 4px 0; font: inherit; color: var(--ink); text-decoration: underline; text-decoration-color: var(--volt-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.link { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }

/* ---------- status markers ---------- */
.badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; color: var(--fg-2); }
.badge::before { content: ""; width: 9px; height: 9px; box-shadow: inset 0 0 0 1.5px var(--fg-2); flex: none; }
.badge--ok { color: var(--ink); }
.badge--ok::before { box-shadow: inset 0 0 0 1.5px var(--ink); }
.badge--info, .badge--accent { color: var(--ink); }
.badge--info::before, .badge--accent::before { background: var(--ink); box-shadow: none; }
.badge--warn { color: var(--ink); }
.badge--warn::before { background: var(--volt); box-shadow: inset 0 0 0 1px var(--ink); }
.badge--bad { color: #fff; background: var(--ink); padding: 3px 8px; }
.badge--bad::before { background: var(--volt); box-shadow: none; }
.badges { display: flex; gap: 12px; flex-wrap: wrap; }

.messages { margin-bottom: 20px; display: grid; gap: 8px; }
.msg, .notice { padding: 14px 16px; border-radius: var(--radius); background: var(--bg-2); color: var(--ink); border-left: 4px solid var(--ink); }
.msg--success { background: var(--volt); border-left-color: var(--ink); }
.msg--error, .notice--bad { background: var(--ink); color: #fff; border-left-color: var(--volt); }
.msg--error a, .notice--bad a { color: #fff; }
.msg--warning, .notice--warn { background: var(--bg-2); border-left-color: var(--volt); }
.notice { margin-bottom: 20px; }
.notice ul { margin: 6px 0 0; padding-left: 20px; }

/* ---------- forms ---------- */
.field { margin-bottom: 20px; }
.field > label, .field > span { display: block; font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-2); margin-bottom: 4px; }
.optional { text-transform: none; letter-spacing: 0; font-family: var(--font-body); color: var(--fg-2); }
.input, .field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select, .field textarea {
  width: 100%; min-width: 0; min-height: var(--tap); padding: 10px 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; font: 17px var(--font-body); color: var(--ink); }
.field textarea, textarea.input { min-height: 84px; resize: vertical; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom: 2px solid var(--ink); box-shadow: 0 6px 0 -4px var(--volt); }
.input::placeholder { color: #a8a8a2; }
select.input, .field select { appearance: none; padding-right: 22px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field--error input, .field--error select, .field--error textarea { border-bottom-color: var(--danger); }
.help { color: var(--fg-2); font-size: 13px; margin: 6px 0 0; }
.error { color: var(--danger); font-weight: 600; font-size: 13px; margin: 6px 0 0; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 10px 0; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--ink); }
.check--row { flex: 1 1 260px; align-items: center; }
.field ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 0; }
.field ul label { display: flex; gap: 12px; align-items: center; min-height: 48px; cursor: pointer; border-bottom: 1px solid var(--rule); font: 16px var(--font-body); text-transform: none; letter-spacing: 0; color: var(--ink); }
.field ul input { width: 22px; height: 22px; accent-color: var(--ink); }
.form.card { padding-top: 20px; }
@media (min-width: 900px) { .form.card { max-width: 720px; } }
.formfoot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.filters { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.filters.card { padding-bottom: 16px; }
.mini-field { display: flex; flex-direction: column; gap: 2px; flex: 1 1 160px; }
.mini-field--grow { flex: 2 1 220px; }
.input--num { width: 92px; text-align: center; font-weight: 600; }
.pair { display: flex; gap: 16px; }
.pair .mini-field { flex: 0 0 auto; }
.copyrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.copyrow .input { flex: 1 1 240px; font-size: 13px; }
.preview { border-radius: var(--radius-tile); margin-bottom: 12px; object-fit: cover; background: var(--bg-2); }

/* segmented choice */
.seg { border: 0; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--ink); }
@media (min-width: 640px) { .seg { grid-template-columns: repeat(4, 1fr); } }
.seg legend { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-2); margin-bottom: 8px; padding: 0; float: left; width: 100%; }
.seg__opt { position: relative; }
.seg__opt + .seg__opt { border-left: 1px solid var(--ink); }
@media (max-width: 639px) { .seg__opt:nth-of-type(3) { border-left: 0; } .seg__opt:nth-of-type(n+3) { border-top: 1px solid var(--ink); } }
.seg__opt input { position: absolute; opacity: 0; inset: 0; }
.seg__opt span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 54px; padding: 6px 10px; font-weight: 600; cursor: pointer; }
.seg__opt input:checked + span { background: var(--ink); color: #fff; }
.seg__opt input:checked + span::before { content: ""; width: 8px; height: 8px; background: var(--volt); margin-right: 8px; }
.seg__opt input:focus-visible + span { outline: 2px solid var(--volt-deep); outline-offset: -4px; }

/* stepper */
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--bg); flex: none; }
.stepper__btn { width: 48px; min-height: 48px; border: 0; background: transparent; font: 400 22px var(--font-body); cursor: pointer; color: var(--ink); }
.stepper__btn:active { background: var(--volt); }
.stepper__input { width: 64px; border: 0; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); text-align: center; font: 600 20px var(--font-display); letter-spacing: -0.03em; -moz-appearance: textfield; background: transparent; color: var(--ink); border-radius: 0; }
.stepper__input::-webkit-outer-spin-button, .stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__input:focus { outline: none; background: var(--volt); }
.qtyrow.has-value { box-shadow: inset 4px 0 0 var(--volt); padding-left: 12px; }
.diff:empty { display: none; }

/* search */
.search { position: relative; margin-bottom: 8px; }
.search .icon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--fg-2); }
.search__input { width: 100%; min-height: 52px; padding: 12px 0 12px 32px; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; font: 17px var(--font-body); background: transparent; }
.search__input:focus { outline: none; border-bottom-width: 2px; }

/* sticky action bar */
.stickybar { position: sticky; bottom: calc(var(--tabbar-h) + 10px); z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; margin-top: 20px; border-radius: var(--radius-tile); background: var(--ink); color: #fff; }
.stickybar__summary { font-size: 14px; }
.stickybar .btn--primary { border-radius: 12px; }
@media (min-width: 900px) { .stickybar { bottom: 16px; } }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { padding: 12px 10px 12px 0; border-top: 1px solid var(--rule); text-align: left; vertical-align: top; }
.table thead th { border-top: 0; white-space: nowrap; padding-bottom: 8px; }
.table tbody th { font-weight: 500; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; }
.cellqty { font: 600 18px var(--font-display); letter-spacing: -0.03em; padding: 1px 6px; }
.cellqty--out { background: var(--ink); color: #fff; }
.cellqty--low { background: var(--volt); }

/* ---------- catalog ---------- */
.catalog { display: grid; gap: 28px; }
.product { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--ink); padding-top: 16px; }
@media (min-width: 720px) { .product { grid-template-columns: 240px 1fr; gap: 24px; } }
.product__media { position: relative; background: var(--bg-2); border-radius: var(--radius-tile); overflow: hidden; aspect-ratio: 16 / 10; }
@media (min-width: 720px) { .product__media { aspect-ratio: 1; } }
.product__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product__demo { position: absolute; bottom: 12px; left: 12px; background: var(--bg); padding: 2px 8px; }
.product__body { padding: 14px 0 0; }
.product__name { font-size: 36px; margin-bottom: 6px; }
.variants { list-style: none; margin: 10px 0 0; padding: 0; }
.variant { border-top: 1px solid var(--rule); padding: 14px 0; scroll-margin-top: 140px; }
.variant__form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.variant__info { display: flex; flex-direction: column; gap: 3px; flex: 1 1 220px; }
.variant__info > strong { font-size: 17px; }
.variant__qty { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.variant__calc { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); min-height: 1.2em; }
.variant.in-cart { box-shadow: inset 4px 0 0 var(--volt); padding-left: 12px; }
.variant.in-cart .variant__calc { color: var(--ink); }
dl.totals, .totals dl { margin: 0; }
dl.totals > div, .totals dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
dl.totals dd, .totals dd { margin: 0; font-weight: 600; text-align: right; }
.totals__total { border-top: 1px solid var(--ink) !important; }
.totals__total dt { font-weight: 600; }
.totals__total dd { font: 600 32px var(--font-display); letter-spacing: -0.04em; }
.terms { margin: 0 0 12px; }
.terms > div { display: grid; grid-template-columns: 90px 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid var(--rule); }
.terms dt { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-2); padding-top: 3px; }
.terms dd { margin: 0; }
.shipto p { font-size: 16px; }

/* timeline / events / pager */
.timeline { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.timeline li { padding: 12px 10px 12px 0; display: flex; flex-direction: column; gap: 4px; }
.timeline li + li { border-left: 1px solid var(--rule); padding-left: 10px; }
.timeline li strong::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; box-shadow: inset 0 0 0 1.5px var(--fg-2); }
.timeline li.is-done strong::before { background: var(--ink); box-shadow: none; }
.timeline li.is-canceled strong::before { background: var(--volt); box-shadow: inset 0 0 0 1px var(--ink); }
.events { list-style: none; margin: 0; padding: 0; }
.events li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--rule); }
.events li:first-child { border-top: 0; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 12px; }

/* admin */
.adminproduct__head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.adminproduct__head img { border-radius: 12px; object-fit: cover; background: var(--bg-2); }
.adminproduct__head h2 a { text-decoration: none; }

/* auth */
.authpage { min-height: 100vh; display: grid; place-items: center; padding: 32px var(--gutter); background: var(--bg); }
.authcard { width: 100%; max-width: 440px; }
.authcard--wide { max-width: 560px; }
.authcard__brand { display: flex; align-items: center; gap: 10px; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--ink); }
.authcard h1 { margin-bottom: 12px; }
.authcard .lead { margin-bottom: 24px; }
.authcard__foot { margin: 20px 0 0; color: var(--fg-2); }

/* =====================================================================
   Home — instrument panel
   ===================================================================== */
.hero { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 6px 18px; padding-bottom: 20px; margin-bottom: 0; }
.hero__num { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.06em; line-height: .78; font-size: clamp(96px, 30vw, 196px); font-variant-numeric: tabular-nums; margin-left: -4px; }
.hero__side { display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px; min-width: 0; }
.hero__month { font: 600 26px var(--font-display); letter-spacing: -0.03em; }
.hero__caption { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--ink); padding-top: 10px; }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 28px; }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.tile { position: relative; background: var(--bg-2); border-radius: var(--radius-tile); padding: 16px; min-height: 172px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; color: var(--ink); text-decoration: none; overflow: hidden; }
a.tile:hover { background: var(--bg-3); }
.tile--ink { background: var(--ink); color: #fff; }
.tile--ink .tile__label, .tile--ink .tile__sub { color: #a5a5a0; }
a.tile--ink:hover { background: #1c1c1c; }
.tile--volt { background: var(--volt); }
.tile--volt .tile__label, .tile--volt .tile__sub { color: var(--ink); }
a.tile--volt:hover { background: var(--volt-deep); }
.tile--white { background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); }
.tile--wide { grid-column: span 2; }
.tile--tall { grid-row: span 2; }
.tile__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tile__num { font-size: 52px; }
.tile__num small { font: 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; margin-left: 6px; }
.tile__sub { font-size: 13px; color: var(--fg-2); line-height: 1.35; }
.tile__rows { display: grid; gap: 0; }
.tile__rows > div { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-top: 1px solid rgba(10,10,10,.12); font-size: 14px; }
.tile--ink .tile__rows > div { border-top-color: rgba(255,255,255,.14); }
.tile__rows b { font: 600 20px var(--font-display); letter-spacing: -0.03em; }

/* ring dial (stock health) */
.dial { width: 100%; max-width: 132px; aspect-ratio: 1; align-self: center; }
.dial__track { stroke: rgba(255,255,255,.14); }
.dial__value { stroke: var(--volt); transform: rotate(-90deg); transform-origin: 50% 50%; }
.dial__ticks line { stroke: rgba(255,255,255,.35); }
.dial__text { fill: #fff; font: 600 26px var(--font-display); letter-spacing: -0.04em; }
.dial__unit { fill: #a5a5a0; font: 8px var(--font-mono); letter-spacing: .08em; }

/* dot-matrix bar chart (units sold per day) */
.dotchart { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; align-items: end; height: 96px; }
.dotchart__col { display: flex; flex-direction: column-reverse; gap: 3px; align-items: center; }
.dotchart__col i { width: 100%; max-width: 9px; aspect-ratio: 1; border-radius: 50%; background: var(--ghost); }
.dotchart__col i.on { background: var(--ink); }
.dotchart__col.is-today i.on { background: var(--volt); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tile--ink .dotchart__col i { background: rgba(255,255,255,.12); }
.tile--ink .dotchart__col i.on { background: #fff; }
.tile--ink .dotchart__col.is-today i.on { background: var(--volt); box-shadow: none; }
.dotchart__axis { display: flex; justify-content: space-between; font: 10px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); margin-top: 6px; }
.tile--ink .dotchart__axis { color: #a5a5a0; }

/* dot calendar (28 days, Mon-first) */
.dotcal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dotcal__h { font: 10px var(--font-mono); color: var(--fg-2); text-align: center; text-transform: uppercase; }
.dotcal i { aspect-ratio: 1; border-radius: 50%; background: var(--ghost); display: block; width: 100%; max-width: 22px; justify-self: center; }
.dotcal i.l1 { background: #c9c9c4; } .dotcal i.l2 { background: #8d8d88; } .dotcal i.l3 { background: #3c3c3a; } .dotcal i.l4 { background: var(--ink); }
.dotcal i.today { background: var(--volt); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* tuner scale (stock vs target per product) */
.scale { position: relative; height: 18px; flex: 1 1 140px; min-width: 120px; max-width: 260px; background: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 10%); border-bottom: 1px solid var(--ink); }
.scale__fill { position: absolute; left: 0; bottom: 0; height: 8px; background: var(--ink); }
.scale__incoming { position: absolute; left: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(135deg, var(--ink) 0 2px, transparent 2px 5px); }
.scale__low { position: absolute; bottom: 0; width: 2px; height: 18px; background: var(--volt-deep); }

/* product readout rows */
.readout { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--rule); }
.readout:first-child { border-top: 0; }
.readout__name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.readout__name strong { font-size: 16px; font-weight: 600; }
.readout__nums { display: flex; gap: 18px; align-items: baseline; justify-content: flex-end; }
.readout__nums div { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.readout__nums b { font: 600 26px var(--font-display); letter-spacing: -0.04em; line-height: .9; }
.readout__nums span { font: 10px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.readout__bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; justify-content: space-between; }
@media (min-width: 900px) { .readout { grid-template-columns: minmax(180px, 1.2fr) minmax(160px, 1fr) auto; } .readout__bar { grid-column: auto; } }

/* order progress (5 segments) */
.prog { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; width: 100%; max-width: 220px; }
.prog i { height: 6px; background: var(--bg-3); }
.prog i.on { background: var(--ink); }
.prog i.part { background: repeating-linear-gradient(135deg, var(--ink) 0 2px, var(--volt) 2px 5px); }

/* top sellers bars */
.bars { display: grid; gap: 10px; }
.bars div { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 13px; }
.bars i { grid-column: 1 / -1; height: 6px; background: rgba(10,10,10,.14); position: relative; }
.bars i b { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.tile--ink .bars i { background: rgba(255,255,255,.14); }
.tile--ink .bars i b { background: var(--volt); }

/* LCD readout — ghost digits behind live digits */
.lcd { display: inline-flex; font-family: var(--font-readout); font-weight: 500; line-height: .9; font-variant-numeric: tabular-nums; }
.lcd > span { position: relative; display: inline-block; width: .6em; text-align: center; }
.lcd > span::before { content: attr(data-ghost); position: absolute; inset: 0; color: var(--ghost); }
.lcd > span > i { position: relative; font-style: normal; }
.tile--ink .lcd > span::before { color: #262626; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- estimate confidence ---------- */
.conf { display: inline-flex; align-items: center; gap: 6px; font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-2); }
.conf::before { content: ""; width: 14px; height: 6px; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px); }
.conf--measured { color: var(--ink); }
.conf--measured::before { background: var(--ink); }
.conf--estimated { color: var(--ink); }
.conf--benchmark::before { background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 5px); }
.dotchart--16 { grid-template-columns: repeat(16, 1fr); }
.dotcal i.due { background: var(--volt); box-shadow: inset 0 0 0 1.5px var(--ink); display: grid; place-items: center; }
.dotcal i.due b { font: 600 10px var(--font-mono); color: var(--ink); }
.dotcal i.today { box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--bg); }
.readout__basis { grid-column: 1 / -1; }
.readout__basis summary, .explain summary { cursor: pointer; list-style: none; }
.readout__basis summary::before, .explain summary::before { content: "+ "; }
.readout__basis[open] summary::before, .explain[open] summary::before { content: "– "; }
.readout__basis ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--fg-2); }
.explain { border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 8px; }
.explain summary { font: 600 15px var(--font-body); }
.explain p { color: var(--fg-2); max-width: 70ch; margin-top: 8px; }
.product__media { background: #fff; box-shadow: inset 0 0 0 1px var(--rule); }
.product__media img { object-fit: contain; }

/* =====================================================================
   Simple home — one status, one action, a few wins, the shelf
   ===================================================================== */
.home { padding: 8px 0 28px; border-bottom: 1px solid var(--ink); margin-bottom: 28px; }
.home__status { display: flex; gap: 6px; margin: 22px 0 18px; }
.home__status i { width: 34px; height: 12px; background: var(--ink); }
.home--good .home__status i, .home--soon .home__status i:not(.off) { background: var(--volt); box-shadow: inset 0 0 0 1.5px var(--ink); }
.home__status i.off { background: var(--bg-3); box-shadow: none; }
.home__headline { font-size: clamp(44px, 12vw, 84px); letter-spacing: -0.045em; line-height: .92; max-width: 14ch; }
.home__sub { font-size: 19px; line-height: 1.4; color: var(--fg-2); margin: 16px 0 26px; max-width: 34ch; }
.home__actions { display: grid; gap: 10px; max-width: 560px; }
.btn--xl { min-height: 68px; font-size: 19px; padding: 0 24px; justify-content: space-between; border-radius: 14px; white-space: normal; text-align: left; }
.wins { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--ink); margin-bottom: 28px; }
.win { display: flex; flex-direction: column; gap: 8px; padding: 4px 12px 22px 0; min-width: 0; }
.win + .win { border-left: 1px solid var(--rule); padding-left: 12px; }
.win__num { font: 600 clamp(40px, 11vw, 64px) var(--font-display); letter-spacing: -0.05em; line-height: .85; }
.win__num small { font-size: .45em; color: var(--fg-2); letter-spacing: -0.02em; }
.win__label { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--fg-2); line-height: 1.4; }
.win__tag { align-self: flex-start; font: 600 12px var(--font-body); padding: 3px 8px; background: var(--bg-2); }
.win__tag--up { background: var(--volt); }
.shelf h2 { font-size: 30px; margin-bottom: 8px; }
.shelfrow { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); }
.shelfrow:first-child { border-top: 0; }
.shelfrow img { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--rule); }
.shelfrow__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.shelfrow__main strong { font: 600 20px var(--font-display); letter-spacing: -0.03em; }
.shelfrow__say { font-size: 15px; color: var(--fg-2); }
.shelfrow--low .shelfrow__say, .shelfrow--out .shelfrow__say { color: var(--ink); font-weight: 600; }
.shelfrow--out .shelfrow__say::before, .shelfrow--low .shelfrow__say::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; background: var(--volt); box-shadow: inset 0 0 0 1px var(--ink); }
.meter { display: flex; gap: 3px; align-items: flex-end; }
.meter i { width: 8px; height: 22px; background: var(--bg-3); }
.meter i.on { background: var(--ink); }
.shelfrow--low .meter i.on { background: var(--volt); box-shadow: inset 0 0 0 1px var(--ink); }
.home__more { display: flex; flex-direction: column; gap: 4px; margin: 28px 0 0; border-top: 1px solid var(--ink); padding-top: 8px; }
.home__more a { min-height: 48px; display: flex; align-items: center; font-weight: 600; }
@media (min-width: 900px) {
  .home__actions { grid-template-columns: 1fr 1fr; max-width: none; }
  .home__more { flex-direction: row; gap: 28px; }
}

/* ---------- Fuel Terminal tile ---------- */
.fuel { display: grid; grid-template-columns: minmax(118px, 34%) 1fr; gap: 22px; align-items: center; padding: 22px 20px; margin-bottom: 14px; border-radius: var(--radius-tile); background: var(--ink); color: #fff; overflow: hidden; }
@media (min-width: 900px) { .fuel { grid-template-columns: 200px 1fr; gap: 40px; padding: 32px 36px; } }
.fuel .label { color: #a5a5a0; }
.fuel__art { display: flex; justify-content: center; }
.fuel__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fuel__big { font: 600 clamp(64px, 18vw, 112px) var(--font-display); letter-spacing: -0.06em; line-height: .82; }
.fuel__big small { font-size: .4em; letter-spacing: -0.02em; color: var(--volt); }
.fuel--earned .fuel__big { font-size: clamp(40px, 11vw, 72px); letter-spacing: -0.045em; color: var(--volt); }
.fuel__say { margin: 0; font-size: 16px; line-height: 1.4; color: #e4e4df; max-width: 34ch; }
.fuel__hint { margin: 0; font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: #a5a5a0; }
.fuel__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin: 4px 0 0; border-top: 1px solid #2b2b2b; }
.fuel__facts > div { padding: 10px 16px 0 0; }
.fuel__facts > div + div { border-left: 1px solid #2b2b2b; padding-left: 16px; }
.fuel__facts dt { font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: #a5a5a0; margin-bottom: 6px; }
.fuel__facts dd { margin: 0; font: 600 26px var(--font-display); letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.fuel__facts dd small { font-size: .55em; color: #a5a5a0; letter-spacing: 0; }
.streak { display: flex; gap: 4px; padding-top: 6px; }
.streak i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #555; }
.streak i.on { background: var(--volt); box-shadow: none; }

/* analog gauge with milestones */
.gauge { position: relative; height: 12px; background: #262626; margin: 4px 0 0; border-radius: 6px; overflow: hidden; }
.gauge__fill { position: absolute; inset: 0 auto 0 0; background: var(--volt); }
.gauge__next { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--volt) 0 2px, transparent 2px 5px); }
.gauge__tick { position: absolute; top: -4px; bottom: -4px; width: 1.5px; background: #555; transform: translateX(-1px); }
.gauge__tick.is-done { background: var(--ink); }
.gauge__tick em { position: absolute; top: 20px; left: 50%; transform: translateX(-60%); font: normal 9px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #777; white-space: nowrap; }
.gauge__tick.is-done em { color: var(--volt); }
.gauge__tick:last-child em { transform: translateX(-100%); }

/* the cooler itself */
.ft { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 160px; aspect-ratio: 1 / 2.5; filter: drop-shadow(0 18px 24px rgba(0,0,0,.45)); }
.ft__side { background: linear-gradient(90deg, #d9d9d5, #f4f4f1 60%, #e6e6e2); border-radius: 10px 0 0 6px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; padding: 0 0 12%; }
.ft__brand, .ft__tag { writing-mode: vertical-rl; transform: rotate(180deg); color: #0a0a0a; white-space: nowrap; }
.ft__brand { font: 600 clamp(7px, 1.6vw, 10px) var(--font-display); letter-spacing: .08em; }
.ft__brand sup { font-size: .6em; }
.ft__tag { font: 500 clamp(4px, .9vw, 6px) var(--font-mono); letter-spacing: .04em; opacity: .7; }
.ft__door { display: grid; grid-template-rows: 1fr 9%; background: #050505; border-radius: 12px 12px 6px 6px; padding: 7% 7% 0; position: relative;
  box-shadow: inset 0 0 0 2px rgba(198, 240, 61, calc(var(--glow) * .9)), 0 0 calc(var(--glow) * 26px) rgba(198, 240, 61, calc(var(--glow) * .5)); }
.ft__glass { border-radius: 4px; padding: 8% 7% 6%; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(180deg, #e9f6fb 0%, #d8edf4 60%, #cfe6ef 100%); box-shadow: inset 0 0 0 1px #9fc6d2, inset 0 0 18px rgba(255,255,255,.9); }
.ft--earned .ft__glass { background: linear-gradient(180deg, #f4ffe0, #e3f6bf); }
.ft__fan { height: 9%; margin: 0 28%; border-radius: 50%; background: repeating-radial-gradient(circle, #9fb7bf 0 1px, transparent 1px 3px); opacity: .7; }
.ft__shelf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6%; align-items: end; padding: 0 3% 3%; border-bottom: 2px solid #b7d3dc; }
.ft__vent { background: repeating-linear-gradient(0deg, #1b1b1b 0 2px, #050505 2px 4px); margin: 6% 10% 8%; border-radius: 2px; }
.can { display: block; aspect-ratio: 1 / 1.9; border-radius: 3px 3px 2px 2px; position: relative; background: linear-gradient(90deg, #dcdcd8, #fff 45%, #e2e2de); }
.can::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 24%; border-radius: 3px 3px 0 0; background: var(--cap); }
.can::after { content: ""; position: absolute; left: 12%; right: 12%; top: -6%; height: 8%; border-radius: 2px; background: #1a1a1a; }
.can--blue { --cap: var(--flavor-blue); } .can--peach { --cap: var(--flavor-peach); } .can--pink { --cap: var(--flavor-pink); } .can--purple { --cap: var(--flavor-purple); }
.can--empty { background: transparent; box-shadow: inset 0 0 0 1px rgba(80, 120, 135, .28); }
.can--empty::before, .can--empty::after { display: none; }
.can--next { opacity: .45; outline: 1.5px dashed #0a0a0a; outline-offset: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .can--on { animation: can-in .5s cubic-bezier(.2,0,0,1) both; }
  @keyframes can-in { from { transform: translateY(-30%); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---------- sampling tile ---------- */
.sample { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; margin-bottom: 28px; border-radius: var(--radius-tile); background: var(--volt); color: var(--ink); text-decoration: none; }
.sample:hover { background: var(--volt-deep); }
.sample strong { font: 600 22px var(--font-display); letter-spacing: -0.03em; line-height: 1.05; }
.sample--set { background: var(--ink); color: #fff; }
.sample--set .label { color: var(--volt); }

/* ---------- plan picker / nudges ---------- */
.plan { display: grid; gap: 8px; border: 0; padding: 0; margin: 0 0 20px; }
.plan legend { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-2); margin-bottom: 8px; }
.plan__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 12px; cursor: pointer; font-weight: 600; }
.plan__opt input { width: 20px; height: 20px; accent-color: var(--ink); }
.plan__opt:has(input:checked) { background: var(--ink); color: #fff; }
.plan__opt .save { font: 600 12px var(--font-body); background: var(--volt); color: var(--ink); padding: 3px 8px; }
.nudges { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.nudge { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--bg-2); border-left: 4px solid var(--ink); font-size: 15px; }
.nudge--tier, .nudge--cooler { border-left-color: var(--volt-deep); }
.nudge--less { border-left-color: var(--fg-2); }
.nudge::before { font: 600 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; flex: none; width: 54px; padding-top: 3px; }
.nudge--more::before { content: "More"; } .nudge--tier::before { content: "Save"; } .nudge--less::before { content: "Less"; } .nudge--cooler::before { content: "Cooler"; }

/* =====================================================================
   Onboarding — after IRON VAULT Performance's AuthShell, on white
   ===================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.onb { min-height: 100vh; }
@media (min-width: 1024px) { .onb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); } }
.onb__brand { display: none; }
@media (min-width: 1024px) {
  .onb__brand { display: flex; flex-direction: column; justify-content: space-between; padding: 40px; background: var(--ink); color: #fff; position: sticky; top: 0; height: 100vh; }
  .onb__crest { filter: invert(1); width: 150px; height: auto; }
  .onb__statement { font: 600 72px var(--font-display); letter-spacing: -0.045em; line-height: .9; text-transform: uppercase; max-width: 11ch; margin: 0; }
  .onb__dept { color: #a5a5a0; }
}
.onb__main { display: flex; flex-direction: column; min-height: 100vh; padding: 20px var(--gutter) 32px; }
@media (min-width: 1024px) { .onb__main { padding: 48px; } .onb__top { display: none !important; } }
.onb__top { display: flex; align-items: center; justify-content: space-between; }
.onb__steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 4px; }
.onb__steps li { display: grid; gap: 7px; }
.onb__steps i { display: block; height: 4px; background: var(--bg-3); }
.onb__steps li.is-done i { background: var(--ink); }
.onb__steps li.is-current i { background: var(--volt); box-shadow: inset 0 0 0 1px var(--ink); }
.onb__steps li.is-current .label { color: var(--ink); }
.onb__steplabel { display: none; }
@media (min-width: 560px) { .onb__steplabel { display: inline; } }
.onb__head { margin-top: 40px; }
.onb__head .label { display: block; margin-bottom: 10px; }
.onb__title { font-size: clamp(40px, 11vw, 60px); letter-spacing: -0.045em; line-height: .92; }
.onb__intro { margin: 14px 0 0; font-size: 17px; color: var(--fg-2); max-width: 46ch; }
.onb__body { margin-top: 32px; flex: 1; display: grid; gap: 28px; align-content: start; }
.onb__body form { display: grid; gap: 28px; }
.onb-cta { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 60px; padding: 0 22px; border: 0; background: var(--ink); color: #fff; font: 600 19px var(--font-display); letter-spacing: -0.02em; text-decoration: none; cursor: pointer; }
.onb-cta:hover { background: #222; }
.onb-cta .label { color: var(--volt); }
.onb-cta--volt { background: var(--volt); color: var(--ink); }
.onb-cta--volt .label { color: var(--ink); }
.onb-nav { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.onb-back { display: grid; place-items: center; min-height: 60px; padding: 0 20px; border: 1px solid var(--rule); font: 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.onb-back[aria-disabled="true"] { opacity: .3; pointer-events: none; }
.onb-skip { justify-self: start; font: 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); background: none; border: 0; padding: 8px 0; cursor: pointer; text-decoration: none; }
.onb-aim { border-left: 3px solid var(--volt-deep); padding-left: 12px; font-size: 16px; margin: 0; }
.onb-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.onb-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); border-bottom: 1px solid var(--rule); padding: 16px 0; }
.onb-list b { font: 11px var(--font-mono); color: var(--fg-2); padding-top: 4px; }
.onb-list strong { display: block; font: 600 19px var(--font-display); letter-spacing: -0.025em; }
.onb-list p { margin: 4px 0 0; color: var(--fg-2); font-size: 14px; }
.onb-pages { display: grid; gap: 4px; }
.onb-pages i { height: 4px; background: var(--bg-3); }
.onb-pages i.is-done { background: var(--ink); }
.onb-pages i.is-current { background: var(--volt); box-shadow: inset 0 0 0 1px var(--ink); }
.onb-fields { display: grid; gap: 4px 16px; grid-template-columns: 1fr 1fr; }
.onb-fields .field { margin-bottom: 14px; }
.onb-fields .field--wide { grid-column: 1 / -1; }

/* tile answers */
.tiles-q { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.tiles-q legend { margin-bottom: 8px; padding: 0; }
.tiles-q__grid { display: grid; border: 1px solid var(--ink); }
.tiles-q__opt { display: grid; place-items: center; min-height: 64px; padding: 6px 8px; text-align: center; cursor: pointer; font: 600 16px var(--font-display); letter-spacing: -0.02em; box-shadow: inset 1px 1px 0 var(--rule); }
.tiles-q__opt--sm { min-height: 52px; font: 12px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.tiles-q__opt:has(input:checked) { background: var(--ink); color: #fff; }
.tiles-q__opt:has(input:focus-visible) { outline: 2px solid var(--volt-deep); outline-offset: -4px; }

/* ENERGY vs ENDURE */
.vs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); }
.vs__col { padding: 16px 14px; display: grid; gap: 10px; align-content: start; }
.vs__col + .vs__col { border-left: 1px solid var(--ink); }
.vs__col img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; }
.vs__name { font: 600 26px var(--font-display); letter-spacing: -0.04em; line-height: .9; }
.vs__name small { display: block; font: 11px var(--font-mono); letter-spacing: .08em; color: var(--fg-2); margin-top: 6px; text-transform: uppercase; }
.vs__row { border-top: 1px solid var(--rule); padding-top: 8px; }
.vs__row b { display: block; font: 600 30px var(--font-display); letter-spacing: -0.05em; line-height: 1; }
.vs__row span { font: 10px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.vs__col--energy { box-shadow: inset 0 4px 0 #3a8fd8; }
.vs__col--endure { box-shadow: inset 0 4px 0 #8a4fc8; }
.spec { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.spec li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.spec b { font: 600 34px var(--font-display); letter-spacing: -0.05em; line-height: 1; }
.spec b small { font-size: .45em; letter-spacing: 0; margin-left: 2px; }
.flavors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.flavors figure { margin: 0; display: grid; gap: 6px; }
.flavors img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; box-shadow: inset 0 0 0 1px var(--rule); }
.flavors figcaption { font: 600 15px var(--font-display); letter-spacing: -0.02em; }

/* starter order */
.starter { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.starter li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.starter img { width: 56px; height: 56px; object-fit: contain; background: #fff; }
.starter strong { display: block; font: 600 18px var(--font-display); letter-spacing: -0.02em; }
.setup { display: grid; gap: 10px; padding: 16px 18px; margin: 4px 0 20px; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; }
.setup:hover { background: var(--bg-2); }
.setup__bar { display: grid; gap: 4px; }
.setup__bar i { height: 4px; background: var(--bg-3); }
.setup__bar i.is-done { background: var(--ink); }
.setup strong { font: 600 20px var(--font-display); letter-spacing: -0.02em; }
[data-hidden] { display: none; }

/* drinkivx.com patterns: // eyebrow, Discovery Guide cards */
.slash::before { content: "//"; display: inline-block; background: var(--volt); color: var(--ink); padding: 0 5px; margin-right: 8px; font-weight: 600; }
.dg { display: grid; gap: 10px; }
.dg__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 20px 0 20px 18px; border-radius: 6px; overflow: hidden; }
.dg__card--a { background: #fff; border: 1px solid var(--rule); }
.dg__card--b { background: var(--bg-2); border: 1px solid var(--bg-2); }
.dg__info { min-width: 0; }
.dg__name { font: 600 34px var(--font-display); letter-spacing: -0.04em; line-height: .9; margin: 8px 0 10px; }
.dg__spec { padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.dg__spec b { display: inline-block; background: var(--volt); padding: 5px 8px; font: 600 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.dg__lbl { margin: 14px 0 8px; }
.dg__uses { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dg__uses li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 15px; font-weight: 600; line-height: 1.3; }
.dg__uses li::before { content: ""; width: 9px; height: 9px; background: var(--ink); }
.dg__can { height: 170px; width: auto; margin-bottom: -28px; object-fit: contain; mix-blend-mode: multiply; }
.previewbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; margin: -4px 0 12px; background: var(--volt); color: var(--ink); }
.previewbar .label { color: var(--ink); }

/* ---------------------------------------------------------------- Shopify app home (opened from the Shopify admin) */
.sapp { background: var(--bg); }
.sapp__bar { display: flex; align-items: center; gap: 10px; padding: 14px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--ink); }
.sapp__crest { height: 22px; width: auto; }
.sapp__name { font: 600 15px var(--font-body); }
.sapp__where { margin-left: auto; }
.sapp__main { max-width: 880px; margin: 0 auto; padding: 36px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); }
.sapp__hero { padding-bottom: 28px; }
.sapp__hero h1 { font-size: clamp(36px, 7vw, 64px); line-height: .95; letter-spacing: -.02em; margin: 14px 0 0; text-wrap: balance; }
.sapp__hero .lead { margin-top: 14px; }
.sapp__dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; box-shadow: inset 0 0 0 1.5px var(--ink); vertical-align: 0; }
.sapp__dot--on { background: var(--volt); }
@media (min-width: 720px) { .sapp__stats { grid-template-columns: repeat(4, 1fr); } .sapp__stats > * { border-bottom: 0; } .sapp__stats > * + * { border-left: 1px solid var(--rule); padding-left: 14px; } }
.sapp__block { border-top: 1px solid var(--ink); padding-top: 14px; margin-bottom: 36px; }
.sapp__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.sapp__head h2 { margin: 0; font-size: 22px; }
.sapp__stock { list-style: none; margin: 0; padding: 0; }
.sapp__stock li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--rule); }
.sapp__stock li:first-child { border-top: 0; }
.sapp__stock img { width: 56px; height: 56px; object-fit: contain; background: var(--bg-2); }
.sapp__flavor { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sapp__meter { display: block; height: 6px; margin-top: 4px; box-shadow: inset 0 0 0 1px var(--rule); }
.sapp__meter b { display: block; height: 100%; background: var(--ink); }
.sapp__qty { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 30px; }
.sapp__checks { list-style: none; margin: 0; padding: 0; }
.sapp__checks li { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--rule); }
.sapp__checks li:first-child { border-top: 0; }
.sapp__checks li div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sapp__checks li span:not(.sapp__box) { color: var(--fg-2); font-size: 14px; overflow-wrap: anywhere; }
.sapp__box { flex: none; width: 18px; height: 18px; margin-top: 2px; box-shadow: inset 0 0 0 1.5px var(--ink); }
.sapp__checks li.is-ok .sapp__box { background: var(--volt); }
.sapp__checks li:not(.is-ok) .sapp__box { background: repeating-linear-gradient(45deg, var(--ink) 0 2px, transparent 2px 5px); }
.sapp__foot { max-width: 880px; margin: 0 auto; padding: 18px max(16px, env(safe-area-inset-left, 0px)) 36px; border-top: 1px solid var(--rule); }

/* ---------- launch screen ---------- */
/* The crest on volt (same as the home-screen icon) while a segment fills for each flavor, then a
   fade into the app. Pure CSS so it paints before any JavaScript; the inline script in base.html
   hides it after the first page of a visit. */
.splash { position: fixed; inset: 0; z-index: 1000; display: grid; place-content: center; justify-items: center; gap: 30px;
  background: var(--volt); animation: splash-out .3s ease-in .85s forwards; }
.splash img { width: 180px; height: auto; mix-blend-mode: multiply; }
.splash__bar { display: grid; grid-template-columns: repeat(4, 22px); gap: 4px; height: 5px; }
.splash__bar i { display: block; background: rgba(10, 10, 10, .14); animation: splash-seg .14s linear forwards; }
.no-splash .splash { display: none; }
@keyframes splash-seg { to { background: var(--c); } }
@keyframes splash-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .splash { animation-delay: .45s; }
  .splash__bar i { animation: none; background: var(--c); }
}