/* ── WPZ LIMITED — the official store ─────────────────────────────────────
 *
 * Blackout Rig grammar: flat near-black surfaces, hairline seams, and ONE
 * cold accent (#4cc4ff) reserved for things that are live — stock ticks,
 * the pay button, focus. Numbers are set in the mono face everywhere,
 * because a numbered-drop store is a counting instrument, not a catalogue.
 */

:root {
  --st-bg: #0c0d0f;
  --st-panel: #141518;
  --st-card: #1b1b1c;
  --st-raised: #22262e;
  --st-line: rgba(255, 255, 255, 0.07);
  --st-line-strong: rgba(255, 255, 255, 0.13);
  --st-ink: #e8eaee;
  --st-ink-soft: #c2c7d0;
  --st-mute: #7f8794;
  --st-acc: #4cc4ff;
  --st-acc-soft: rgba(76, 196, 255, 0.13);
  --st-acc-ink: #03151f;
  --st-live: #ff4b4b;
  --st-ok: #3fbf6c;
  --st-top-bg: rgba(12, 13, 15, 0.92);
  --st-r: 8px;
  --st-r-sm: 6px;
  color-scheme: dark;
  --font-ui: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Inter, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
}


/* ── Light theme — mirrors the app (data-theme set from localStorage wpz-theme
   by the head script in shop.html). Blackout stays the default (dark). ──── */
html[data-theme="light"] {
  --st-bg: #eef1f5;
  --st-panel: #ffffff;
  --st-card: #ffffff;
  --st-raised: #f3f6fa;
  --st-line: rgba(16, 32, 44, 0.10);
  --st-line-strong: rgba(16, 32, 44, 0.16);
  --st-ink: #16202c;
  --st-ink-soft: #3a4757;
  --st-mute: #6b7a8d;
  --st-acc: #0e8fd6;
  --st-acc-soft: rgba(14, 143, 214, 0.12);
  --st-acc-ink: #ffffff;
  --st-ok: #1a9d52;
  --st-top-bg: rgba(255, 255, 255, 0.92);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--st-bg);
  color: var(--st-ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--st-acc); outline-offset: 2px; }

.st-mono { font-family: var(--font-mono); }

/* ── header ─────────────────────────────────────────────────────────── */

.st-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  background: var(--st-top-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--st-line);
}
.st-mark {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.22em; color: var(--st-mute);
  text-decoration: none;
}
.st-mark:hover { color: var(--st-ink-soft); }
.st-cart-btn {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--st-ink-soft);
  border: 1px solid var(--st-line-strong); border-radius: var(--st-r-sm);
  padding: 7px 12px;
}
.st-cart-btn:hover { background: var(--st-raised); }
.st-cart-n {
  min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--st-acc); color: var(--st-acc-ink);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  padding: 0 5px;
}

/* ── hero ───────────────────────────────────────────────────────────── */

.st-hero { padding: 16px 20px 26px; max-width: 1080px; margin: 0 auto; }
.st-hero h1 {
  font-size: clamp(40px, 6.5vw, 76px);
  font-weight: 900; line-height: 0.94; letter-spacing: -0.02em;
  text-transform: uppercase;
  display: flex; flex-wrap: wrap; column-gap: 0.28em;
}
.st-hero h1 .is-hollow {
  color: transparent;
  -webkit-text-stroke: 2px var(--st-ink);
}
.st-thesis {
  margin-top: 12px; max-width: 44em;
  font-size: 14.5px; color: var(--st-ink-soft);
}
.st-thesis-num { font-family: var(--font-mono); font-weight: 400; color: var(--st-acc); }
.st-hero-meta {
  margin-top: 16px;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--st-mute); text-transform: uppercase;
}
.st-hero-meta b { color: var(--st-acc); font-weight: 400; }

/* ── grid ───────────────────────────────────────────────────────────── */

.st-main { max-width: 1080px; margin: 0 auto; padding: 0 20px 44px; }
.st-grid {
  list-style: none;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.st-card {
  background: var(--st-card);
  border: 1px solid var(--st-line);
  border-radius: var(--st-r);
  overflow: hidden;
  text-align: left; width: 100%;
  display: flex; flex-direction: column;
  transition: border-color 120ms ease, transform 120ms ease;
}
.st-card:hover { border-color: var(--st-line-strong); transform: translateY(-2px); }
/* Under ten left: the card itself warns. */
.st-warn-stamp {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #ff6b6b; border: 1px solid currentColor;
  padding: 5px 9px 5px 11px; background: rgba(5, 6, 7, 0.62);
}
.st-tally.is-critical .st-ticks {
  background: repeating-linear-gradient(90deg, #ff6b6b 0 2px, transparent 2px 3px);
}
.st-tally.is-critical .st-tally-label { color: #ff6b6b; }

/* The rule between what is buyable and what is history. */
.st-grid-sep {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px;
  margin: 20px 0 4px; list-style: none;
}
.st-grid-sep::before, .st-grid-sep::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--st-line-strong);
}
.st-grid-sep span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--st-mute); white-space: nowrap;
}

/* Sold-through drops recede: grayscale, dimmed, stamped — and the grid
 * sorts them to the end so what CAN be bought is what the page is about. */
.st-card.is-gone { opacity: 0.62; }
.st-card.is-gone:hover { transform: none; }
.st-card.is-gone .st-shot img { filter: grayscale(1) brightness(0.72); }
.st-sold-stamp {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(5, 6, 7, 0.35);
}
.st-sold-stamp span {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: #ff6b6b; border: 2px solid currentColor;
  padding: 8px 14px 8px 18px; transform: rotate(-7deg);
  background: rgba(5, 6, 7, 0.55);
}
.st-shot { display: block; aspect-ratio: 1; background: var(--st-panel); position: relative; overflow: hidden; }
.st-shot img { width: 100%; height: 100%; object-fit: cover; }
.st-shot-fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 44px; opacity: 0.3;
}
.st-card-body { padding: 14px 14px 16px; display: grid; gap: 8px; }
.st-name {
  font-weight: 800; font-size: 14px; letter-spacing: 0.02em;
  text-transform: uppercase; line-height: 1.3;
}
.st-price { font-family: var(--font-mono); font-size: 13px; color: var(--st-ink-soft); }

/* The signature: one 2px tick per unit actually left. A drop of a hundred
 * reads as a ruler draining from the right, and it never lies — the ticks
 * are drawn from live stock, not marketing. */
.st-tally { display: grid; gap: 4px; }
.st-ticks {
  height: 8px; width: calc(var(--n) * 3px); max-width: 100%;
  background: repeating-linear-gradient(90deg, var(--st-acc) 0 2px, transparent 2px 3px);
}
.st-tally-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--st-mute); text-transform: uppercase;
}
.st-card.is-gone .st-tally-label { color: var(--st-mute); }
.st-gone-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--st-live); text-transform: uppercase;
}

/* ── error / loading states ─────────────────────────────────────────── */

.st-state {
  padding: 80px 20px; text-align: center; color: var(--st-mute);
  display: grid; gap: 14px; justify-items: center;
}
/* display:grid above beats the hidden attribute's display:none — without
 * this the "empty" box quietly holds 160px open under the grid. */
.st-state[hidden] { display: none; }
.st-retry {
  border: 1px solid var(--st-line-strong); border-radius: var(--st-r-sm);
  padding: 9px 18px; color: var(--st-ink-soft);
}
.st-retry:hover { background: var(--st-raised); }

/* ── product overlay ────────────────────────────────────────────────── */

.st-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(5, 6, 7, 0.78);
  display: grid; place-items: center; padding: 18px;
}
.st-overlay[hidden] { display: none; }
.st-sheet {
  background: var(--st-panel);
  border: 1px solid var(--st-line-strong);
  border-radius: var(--st-r);
  width: min(920px, 100%); max-height: calc(100vh - 36px);
  overflow: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.st-sheet-shot { background: var(--st-card); min-height: 280px; display: flex; flex-direction: column; }
/* flex-basis 0, not auto: the photo must yield to the window, never set the
 * sheet's height — otherwise the thumbnails land below the fold and the
 * whole sheet scrolls. The photo fills whatever the info column needs. */
.st-sheet-shot > img { width: 100%; flex: 1 1 0; min-height: 240px; object-fit: cover; cursor: zoom-in; }

/* The lightbox: the photo at full size, on its own. Click or Esc to leave. */
.st-zoom {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: rgba(5, 6, 7, 0.93);
  cursor: zoom-out; padding: 18px;
}
.st-zoom img { max-width: 88vw; max-height: 96vh; object-fit: contain; cursor: e-resize; }
.st-zoom-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  font-size: 44px; line-height: 1; color: var(--st-ink-soft);
  padding: 18px 16px; z-index: 61;
}
.st-zoom-nav:hover { color: var(--st-ink); }
.st-zoom-nav.is-prev { left: 8px; }
.st-zoom-nav.is-next { right: 8px; }
.st-zoom-close {
  position: fixed; top: 14px; right: 18px; z-index: 61;
  font-size: 22px; color: var(--st-ink-soft); padding: 8px;
}
.st-zoom-close:hover { color: var(--st-ink); }
.st-thumbs {
  flex: 0 0 auto; display: flex; gap: 6px; padding: 8px;
  background: var(--st-panel); overflow-x: auto;
}
.st-thumb {
  flex: 0 0 auto; width: 54px; height: 54px; padding: 0;
  border: 1px solid var(--st-line); border-radius: 4px; overflow: hidden;
  opacity: 0.55; background: var(--st-card);
}
.st-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-thumb:hover { opacity: 0.85; }
.st-thumb.is-on { opacity: 1; border-color: var(--st-acc); }
.st-sheet-info { padding: 26px 26px 30px; display: grid; gap: 14px; align-content: start; }
.st-sheet-topbar {
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0;
}
.st-back {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  color: var(--st-mute); padding: 6px 10px 6px 0;
}
.st-back:hover { color: var(--st-ink); }
.st-sheet-close {
  font-size: 18px; color: var(--st-mute); padding: 4px 8px;
}
.st-sheet-close:hover { color: var(--st-ink); }
.st-sheet-name {
  font-size: 26px; font-weight: 900; letter-spacing: -0.01em;
  text-transform: uppercase; line-height: 1.1;
}
.st-sheet-price { font-family: var(--font-mono); font-size: 17px; }
.st-desc { color: var(--st-ink-soft); font-size: 13.5px; white-space: pre-line; }
.st-size-row { display: flex; flex-wrap: wrap; gap: 8px; }
.st-size {
  font-family: var(--font-mono); font-size: 12px;
  border: 1px solid var(--st-line-strong); border-radius: var(--st-r-sm);
  padding: 9px 14px; color: var(--st-ink-soft);
}
.st-size:hover:not(:disabled) { border-color: var(--st-acc); color: var(--st-ink); }
.st-size.is-on { background: var(--st-acc-soft); border-color: var(--st-acc); color: var(--st-ink); }
.st-size:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
.st-add {
  background: var(--st-acc); color: var(--st-acc-ink);
  font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: var(--st-r-sm); padding: 13px 18px;
}
.st-add:hover { filter: brightness(1.08); }
.st-add:disabled { background: var(--st-raised); color: var(--st-mute); filter: none; cursor: not-allowed; }
.st-sheet-note { font-size: 12px; color: var(--st-mute); }

/* ── the "added" step: the rest of the drop before the basket ────────── */

.st-added {
  display: block;
  width: min(560px, 100%);
  padding: 26px;
}
.st-added-head { display: flex; align-items: center; gap: 14px; }
.st-added-check {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(63, 191, 108, 0.15); color: var(--st-ok);
  font-size: 18px; font-weight: 800;
}
.st-added-title {
  font-size: 18px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em;
}
.st-added-sub { color: var(--st-mute); font-size: 13px; margin-top: 2px; }
.st-added-more {
  margin: 22px 0 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--st-mute);
}
.st-added-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.st-mini-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  background: var(--st-card); border: 1px solid var(--st-line);
  border-radius: var(--st-r-sm); padding: 8px; overflow: hidden;
}
.st-mini-card:hover { border-color: var(--st-acc); }
.st-mini-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.st-mini-name {
  font-size: 11px; font-weight: 800; text-transform: uppercase; line-height: 1.25;
}
.st-mini-price { font-family: var(--font-mono); font-size: 11px; color: var(--st-mute); }
.st-added-actions { display: grid; gap: 8px; margin-top: 22px; }
.st-keep {
  border: 1px solid var(--st-line-strong); border-radius: var(--st-r-sm);
  padding: 11px; color: var(--st-ink-soft); font-size: 13px;
}
.st-keep:hover { background: var(--st-raised); }
@media (max-width: 520px) {
  .st-added-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .st-added { padding: 18px; }
}

/* ── cart drawer ────────────────────────────────────────────────────── */

.st-scrim {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(5, 6, 7, 0.6);
}
.st-scrim[hidden] { display: none; }
.st-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
  width: min(420px, 100vw);
  background: var(--st-panel);
  border-left: 1px solid var(--st-line-strong);
  transform: translateX(102%);
  transition: transform 200ms ease;
  display: flex; flex-direction: column;
}
.st-drawer.is-open { transform: none; }
.st-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--st-line);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--st-ink-soft);
}
.st-drawer-body { flex: 1; overflow: auto; padding: 18px 20px; }
.st-empty { color: var(--st-mute); padding: 30px 0; text-align: center; }
.st-lines { list-style: none; display: grid; gap: 14px; }
.st-line { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; }
.st-line-name { font-weight: 700; font-size: 13px; text-transform: uppercase; }
.st-line-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--st-mute); }
.st-qty { display: flex; align-items: center; gap: 2px; }
.st-qty button {
  width: 26px; height: 26px; border: 1px solid var(--st-line-strong);
  border-radius: var(--st-r-sm); color: var(--st-ink-soft); line-height: 1;
}
.st-qty button:hover { background: var(--st-raised); }
.st-qty span { font-family: var(--font-mono); font-size: 12px; min-width: 22px; text-align: center; }
.st-line-total { font-family: var(--font-mono); font-size: 12.5px; }

.st-nudge {
  margin-top: 14px; padding: 8px 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--st-acc); background: var(--st-acc-soft);
  border-radius: var(--st-r-sm);
}
.st-totals { margin-top: 16px; display: grid; gap: 6px; font-size: 13px; color: var(--st-ink-soft); }
.st-totals > div { display: flex; justify-content: space-between; }
.st-totals span:last-child { font-family: var(--font-mono); }
.st-totals .is-total { font-weight: 800; color: var(--st-ink); border-top: 1px solid var(--st-line); padding-top: 8px; margin-top: 4px; }
/* A select dressed as the link it replaced — one click opens the native
 * country list right on the shipping row. */
.st-country-quick {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; padding: 0;
  font: inherit; color: var(--st-acc);
  text-decoration: underline; text-underline-offset: 3px;
  text-align: right; direction: rtl; cursor: pointer; max-width: 230px;
}
.st-country-quick option { direction: ltr; color: initial; }
.st-country-quick:hover { filter: brightness(1.15); }

.st-checkout { display: grid; gap: 10px; margin-top: 16px; }
.st-row2 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.st-promo-msg { min-height: 1.1em; font-size: 12px; color: var(--st-mute); }
.st-promo-msg.is-ok { color: var(--st-ok); }
.st-geo-note {
  padding: 9px 11px; font-size: 12px; line-height: 1.5;
  background: rgba(240, 180, 41, 0.1); color: #f0b429;
  border-radius: var(--st-r-sm);
}
.st-input {
  background: var(--st-card); color: var(--st-ink);
  border: 1px solid var(--st-line-strong); border-radius: var(--st-r-sm);
  padding: 11px 12px; font-size: 14px; width: 100%;
}
.st-input:focus { outline: 2px solid var(--st-acc); outline-offset: 0; border-color: transparent; }
select.st-input { appearance: none; }
.st-pay {
  background: var(--st-acc); color: var(--st-acc-ink);
  font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: var(--st-r-sm); padding: 14px;
}
.st-pay:disabled { background: var(--st-raised); color: var(--st-mute); cursor: not-allowed; }
.st-msg { min-height: 1.2em; font-size: 12.5px; }
.st-msg.is-error { color: var(--st-live); }
.st-note { font-size: 11.5px; color: var(--st-mute); }
.st-optin {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--st-ink-soft); cursor: pointer;
}
.st-optin input { width: 16px; height: 16px; accent-color: var(--st-acc); }
.st-points { display: grid; gap: 6px; }
.st-point {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 11px; border: 1px solid var(--st-line-strong);
  border-radius: var(--st-r-sm); cursor: pointer; font-size: 12.5px;
}
.st-point:hover { border-color: var(--st-acc); }
.st-point.is-on { border-color: var(--st-acc); background: var(--st-acc-soft); }
.st-point input { margin-top: 2px; accent-color: var(--st-acc); }
.st-point-addr { color: var(--st-mute); font-size: 11.5px; }

/* ── Stripe overlay (same class names the in-app window uses) ───────── */

.vip-checkout-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(5, 6, 7, 0.82);
  display: grid; place-items: center; padding: 16px;
}
.vip-checkout-card {
  background: #fff; border-radius: 10px;
  width: min(480px, 100%); max-height: calc(100vh - 32px);
  overflow: auto;
}
.vip-checkout-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
}
.vip-checkout-title { font-size: 13px; font-weight: 700; }
.sv-checkout-back, .vip-checkout-close { color: #555; font-size: 13px; }
.vip-checkout-mount { min-height: 320px; }
.vip-checkout-loading { padding: 40px; text-align: center; color: #777; font-size: 13px; }

/* ── toast ──────────────────────────────────────────────────────────── */

.st-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 70; max-width: min(420px, calc(100vw - 32px));
  background: var(--st-raised); color: var(--st-ink);
  border: 1px solid var(--st-acc-line, rgba(76, 196, 255, 0.35));
  border-radius: var(--st-r-sm); padding: 11px 16px; font-size: 13.5px;
}

/* ── footer ─────────────────────────────────────────────────────────── */

.st-foot {
  border-top: 1px solid var(--st-line);
  padding: 26px 20px 40px;
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  max-width: 1080px; margin: 0 auto;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--st-mute); text-transform: uppercase;
}
.st-foot a { text-decoration: none; }
.st-foot a:hover { color: var(--st-ink-soft); }

/* ── small screens ──────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .st-hero { padding: 12px 16px 22px; }
  .st-main { padding: 0 16px 60px; }
  .st-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .st-sheet { grid-template-columns: 1fr; }
  .st-sheet-shot { max-height: 52vh; }
}

@media (prefers-reduced-motion: reduce) {
  .st-card, .st-drawer { transition: none; }
}

/* Mobile sweep 2026-08-12: quantity +/- were 26px — below the 44px touch
   minimum, fiddly on a phone. Enlarge the hit area on narrow screens. */
@media (max-width: 560px) {
  .st-qty button { width: 40px !important; height: 40px !important; }
}