/* ============================================================
   ORBIX — Gaming keyboards, mice & mousepads — Stylesheet
   Palette: near-black · white · one cyan signal accent.
   Shape language: chamfered (cut) corners, echoing the O × X mark.
   ============================================================ */
:root {
  /* Signal accent kept under the legacy --red name so every existing usage
     re-skins automatically. Use it sparingly; text ON it is always dark. */
  --red: #3de8ff;        /* signal cyan (accent / highlights) */
  --red-glow: #8af1ff;   /* lighter cyan */
  --on-accent: #050507;  /* text colour on --red / white fills */
  --steel: #e4e4ea;      /* cool light gray */
  --bg: #070c16;         /* deep navy */
  --bg-2: #0a1220;
  --bg-3: #0f192b;
  --surface: #0d1628;
  --surface-2: #142038;
  --line: #1d2a42;
  --text: #f2f5fa;
  --muted: #a3b0c4;
  /* Secondary/placeholder text — clears WCAG AA 4.5:1 on --bg. */
  --muted-2: #8594ab;
  --amber: #3de8ff;
  /* Semantic status tokens. */
  --ok: #4ade80;
  --warn: #ffb547;
  --sale: #ff4d5e;
  --radius: 14px;
  --radius-lg: 22px;
  --cut: 10px;           /* chamfer size for clipped corners */
  --max: 1320px;
  --shadow: 0 18px 50px -20px rgba(0,0,0,.85);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Archivo", "Inter", system-ui, sans-serif;
  --race: "Archivo", "Inter", sans-serif;
}

/* Self-hosted webfonts (SIL OFL — licenses in /fonts). No third-party
   round-trip before first paint; swap shows the fallback until they land. */
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2"); }
/* Archivo (variable: weight 100–900, width 62–125%) — the heavy italic
   display face. Italic and upright files; both self-hosted. */
@font-face { font-family: "Archivo"; font-style: italic; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url("/fonts/archivo-latin-wdth-italic.woff2") format("woff2-variations"), url("/fonts/archivo-latin-wdth-italic.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url("/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"), url("/fonts/archivo-latin-wdth-normal.woff2") format("woff2"); }

* { box-sizing: border-box; margin: 0; padding: 0; }
/* The hidden attribute must ALWAYS win. Without this, any element whose class
   sets its own display (e.g. .cart__row / .co-row are flex) ignores hidden=true
   — which is how the cart's multi-buy "−$" row kept showing after the shopper
   dropped below 3 items. Author display rules silently beat the UA's [hidden]
   style; this puts the standard semantics back everywhere, permanently. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* `clip` hides horizontal overflow WITHOUT making <body> a scroll container.
     Plain `overflow-x: hidden` does, which breaks `position: fixed` on iOS
     Safari — the bottom nav bar would detach and float mid-screen on scroll. */
  overflow-x: hidden;   /* fallback for very old browsers */
  overflow-x: clip;
  overflow-clip-margin: 0;
}
/* Keep horizontal clipping on the page scroller itself, not on <body>. */
html { overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--red); color: var(--on-accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem; border-radius: 10px; font-weight: 700;
  font-family: var(--display); letter-spacing: .04em; font-size: .95rem;
  text-transform: uppercase; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn--primary {
  background: linear-gradient(135deg, var(--red), var(--red-glow));
  color: var(--on-accent); box-shadow: 0 8px 24px -8px rgba(61,232,255,.7);
}
.btn--primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(61,232,255,.85); }
.btn--primary:disabled { opacity: .45; cursor: not-allowed; }
.btn--ghost {
  background: rgba(127,127,127,.06); color: var(--text); border: 1.6px solid var(--muted);
}
.btn--ghost:hover { border-color: var(--red); color: #fff; transform: translateY(-2px); }
/* Over the hero photo, ghost buttons need a clear translucent fill + bright
   border so "See the Drops" / "Browse Collections" don't disappear. */
.hero .btn--ghost, .hero--compact .btn--ghost {
  background: rgba(255,255,255,.1); border-color: rgba(244,244,246,.7);
  color: #fff; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.hero .btn--ghost:hover, .hero--compact .btn--ghost:hover {
  background: rgba(255,255,255,.2); border-color: #fff;
}
.btn--block { width: 100%; }
/* Express "Buy it now" — light steel so it reads as a distinct fast path vs the accent Add to Cart */
.btn--buynow {
  background: var(--steel); color: #0a0a0c;
  box-shadow: 0 8px 24px -8px rgba(244,244,246,.65);
}
.btn--buynow:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); }
.btn--buynow:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Announcement bar ---------- */
.announce {
  background: linear-gradient(90deg, var(--red), #0f8fa3);
  /* Pure white (not the cream body text) for AA contrast on the red gradient:
     #fff on the lightest point (--red #3de8ff) is 4.74:1; cream was ~3.8:1. */
  color: var(--on-accent);
  overflow: hidden; font-size: .82rem; font-weight: 600;
  letter-spacing: .01em; height: 36px; display: flex; align-items: center;
}
.announce__track {
  display: flex; gap: 2rem; white-space: nowrap;
  animation: marquee 34s linear infinite; padding-left: 2rem;
}
.announce__track span:nth-child(even) { opacity: .55; }
@keyframes marquee { to { transform: translateX(-50%); } }
/* Single consolidated offer: centered, static (no marquee). */
.announce--single { justify-content: center; }
.announce__msg { padding: 0 1rem; text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
a.announce__msg:hover { text-decoration: underline; }
/* Live markdown: louder than the standing offer, because it's the one thing on
   this bar that is only true today. Deeper ground, bigger caps. No countdown
   and no blink: the sale has no real deadline, and inventing one is exactly
   the sort of thing this store has had to walk back before. */
.announce--sale {
  background: linear-gradient(90deg, #ff4d5e, #b3202f 52%, #ff4d5e);
  height: 44px; font-size: .92rem; font-weight: 800;
  letter-spacing: .085em; text-transform: uppercase;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.22);
}
.announce--sale .announce__msg { font-weight: 800; }
@media (max-width: 640px) {
  .announce--sale { height: auto; font-size: .8rem; letter-spacing: .05em; }
}

/* Homepage sale band: the same fact as the top bar, at a size someone
   scrolling past actually registers. */
.saleband {
  margin: 0 auto var(--gap, 1.5rem); max-width: 1200px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .35rem 1rem; text-align: center;
  padding: 1.15rem 1.4rem; border-radius: 14px;
  background: linear-gradient(100deg, #ff4d5e, #b3202f 60%, #ff4d5e);
  color: #fff; text-decoration: none;
  box-shadow: 0 6px 22px rgba(138,46,23,.28);
}
.saleband:hover { filter: brightness(1.06); }
.saleband__kicker {
  font-family: var(--display); font-weight: 800; font-size: 1.5rem;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1;
}
.saleband__what { font-size: 1.05rem; font-weight: 700; }
.saleband__cta { font-size: .9rem; font-weight: 700; text-decoration: underline; }
@media (max-width: 640px) {
  .saleband { padding: .95rem 1rem; border-radius: 12px; }
  .saleband__kicker { font-size: 1.25rem; }
  .saleband__what { font-size: .95rem; }
}
/* Phones: let the offer wrap — nowrap+ellipsis cut the discount code (the
   payoff of the bar) off-screen on ~390px viewports. */
@media (max-width: 640px) {
  .announce { height: auto; min-height: 36px; padding: .4rem .75rem; }
  .announce__msg { white-space: normal; line-height: 1.45; }
}
/* Resume-cart bar: greets a returning shopper with their saved cart */
.resume-bar {
  display: flex; align-items: center; justify-content: center; gap: .9rem; flex-wrap: wrap;
  padding: .55rem 2.4rem .55rem 1rem; position: relative;
  background: rgba(244,244,246,.14); border-bottom: 1px solid rgba(244,244,246,.35);
  color: var(--text); font-size: .88rem;
}
.resume-bar__msg strong { color: inherit; } /* follow the BAR's colour, not the page's */
.resume-bar__go {
  color: var(--steel, #e4e4ea); font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; white-space: nowrap;
}
.resume-bar__go:hover { color: var(--red-glow); }
.resume-bar__x {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: inherit; opacity: .65; font-size: .95rem;
  cursor: pointer; padding: .3rem .5rem; min-width: 44px; min-height: 44px;
}
.resume-bar__x:hover, .resume-bar__x:focus-visible { opacity: 1; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8,8,11,.72); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
.header.scrolled { border-bottom-color: var(--line); background: rgba(8,8,11,.92); }
.header__inner {
  /* The header rail runs wider than the page body so the nav never crowds. */
  max-width: 1560px; margin: 0 auto; padding: .9rem 1.5rem;
  display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem);
}
.logo { display: flex; align-items: center; gap: .5rem; font-family: var(--display); }
.logo__mark {
  background: linear-gradient(135deg, var(--red), var(--red-glow));
  color: var(--on-accent); font-weight: 700; font-size: 1.35rem; line-height: 1;
  padding: .35rem .5rem; border-radius: 8px; letter-spacing: -.02em;
  box-shadow: 0 4px 16px -4px rgba(61,232,255,.7);
}
.logo__text { font-weight: 700; letter-spacing: .22em; font-size: 1.05rem; }
.nav { display: flex; gap: clamp(.9rem, 1.5vw, 1.7rem); margin-right: auto; flex-wrap: nowrap; }
.nav__link {
  font-family: var(--display); font-weight: 600; letter-spacing: .05em;
  font-size: .9rem; color: var(--muted); position: relative; padding: .3rem 0;
  text-transform: uppercase; transition: color .2s;
  white-space: nowrap; /* never let a link break onto two lines */
}
/* Mid-size desktops: squeeze instead of letting links collide with the icons */
@media (min-width: 761px) and (max-width: 1180px) {
  .nav { gap: .75rem; }
  .nav__link { font-size: .78rem; letter-spacing: .035em; }
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--red); transition: width .25s; color: var(--on-accent); }
.nav__link:hover { color: #fff; }
.nav__link:hover::after { width: 100%; }

.header__actions { display: flex; align-items: center; gap: .4rem; }
/* 44px, not 42/40. These six buttons — account, search, wishlist, cart, the
   nav toggle and both drawer close buttons — are the most-tapped controls on
   every page of the site, and they were the ones the 44px pass missed. */
.icon-btn {
  width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  color: var(--text); position: relative; transition: background .2s, color .2s;
}
.icon-btn:hover { background: var(--surface-2); color: #fff; }
.cart-btn.bump { animation: bump .4s ease; }
@keyframes bump { 0%,100%{transform:scale(1)} 30%{transform:scale(1.18)} }
.cart-count {
  position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px;
  background: var(--red); border-radius: 9px; font-size: .68rem; font-weight: 700;
  display: grid; place-items: center; padding: 0 4px; transform: scale(0);
  transition: transform .2s; color: var(--on-accent); }
.cart-count.is-visible { transform: scale(1); }

.nav-toggle { display: none; flex-direction: column; gap: 4px; }
.nav-toggle span { width: 20px; height: 2px; background: currentColor; border-radius: 2px; }

/* ---------- Search bar ---------- */
.searchbar {
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
  border-top: 1px solid transparent;
}
.searchbar.open { max-height: 80px; border-top-color: var(--line); }
.searchbar__inner {
  max-width: var(--max); margin: 0 auto; padding: .9rem 1.5rem;
  display: flex; align-items: center; gap: .8rem; color: var(--muted);
}
.searchbar input {
  flex: 1; background: none; border: none; outline: none; color: var(--text);
  font-size: 1rem; font-family: inherit;
}
.searchbar input::placeholder { color: var(--muted-2); }
.searchbar kbd {
  font-size: .7rem; border: 1px solid var(--line); border-radius: 5px;
  padding: 2px 6px; color: var(--muted-2);
}

/* Instant-search suggestions (anchored to the sticky header) */
.search-results {
  position: absolute; left: 0; right: 0; top: 100%;
  max-width: var(--max); margin: 0 auto; padding: .4rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow);
  max-height: min(70vh, 460px); overflow-y: auto; z-index: 90;
  display: none;
}
.search-results.open { display: block; }
.sr-item {
  display: flex; align-items: center; gap: .85rem;
  padding: .55rem .7rem; border-radius: 10px;
  color: var(--text); text-decoration: none; transition: background .15s;
}
.sr-item:hover, .sr-item.is-active { background: var(--surface-2); }
.sr-thumb {
  width: 48px; height: 48px; flex: 0 0 48px;
  object-fit: cover; border-radius: 8px; background: var(--bg-2);
}
.sr-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.sr-name {
  font-weight: 600; font-size: .92rem; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-meta { font-size: .74rem; color: var(--muted-2); text-transform: uppercase; letter-spacing: .04em; }
.sr-price { font-weight: 700; color: var(--text); white-space: nowrap; }
.sr-all, .sr-all.is-active {
  display: block; padding: .7rem; margin-top: .25rem;
  text-align: center; font-weight: 600; font-size: .85rem;
  color: var(--red-glow); text-decoration: none;
  border-top: 1px solid var(--line); border-radius: 0 0 10px 10px;
}
.sr-all:hover, .sr-all.is-active { background: var(--surface-2); }
.search-results__empty { padding: 1rem .9rem; color: var(--muted); font-size: .9rem; }
.search-results__empty a { color: var(--red-glow); font-weight: 600; }

/* ---------- Gift cards page ---------- */
.gc-lede { color: var(--muted); font-size: 1rem; line-height: 1.6; max-width: 60ch; }
.field__label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .35rem; font-weight: 600; }
.gc-amounts { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 1rem; }
.gc-chip {
  padding: .55rem 1.1rem; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); border-radius: 999px; font-weight: 700; font-size: .95rem;
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.gc-chip:hover { border-color: var(--red-glow); }
.gc-chip.is-active { background: var(--red); border-color: var(--red); color: var(--on-accent); }
.gc-perks { margin-top: 1.6rem; display: grid; gap: .55rem; }
.gc-perks p { color: var(--muted); font-size: .92rem; margin: 0; }

/* ---------- Spin-to-win popup ---------- */
.spin { position: relative; width: 180px; height: 180px; margin: .5rem auto .9rem; }
.spin__wheel {
  width: 100%; height: 100%; border-radius: 50%; border: 6px solid #1c1c22;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  background: conic-gradient(#3de8ff 0 60deg, #24242b 60deg 120deg, #f4f4f6 120deg 180deg,
                             #3de8ff 180deg 240deg, #24242b 240deg 300deg, #f4f4f6 300deg 360deg);
  transition: transform 3.1s cubic-bezier(.17,.67,.2,1);
}
.spin__pin {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-top: 18px solid #1c1c22; z-index: 2;
}
.spin__seg { position: absolute; inset: 0; pointer-events: none; }
.spin__seg span {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  font-size: .56rem; font-weight: 800; letter-spacing: .02em; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.45); white-space: nowrap;
}
.spin__result { font-size: 1rem; line-height: 1.5; margin: .2rem 0 .4rem; }

/* ---------- Static "orders this week" social proof (under the hero) ---------- */
/* Replaces the old floating popup: a calm, inline line — no animation, nothing
   covering the page. Hidden server-side until the real count is believable. */
.hero-proof {
  margin: .9rem 0 0; font-size: .9rem; letter-spacing: .01em;
  color: var(--muted, #a3b0c4); display: inline-flex; align-items: center; gap: .4rem;
}
.hero-proof strong { color: var(--text, #1c1c22); font-weight: 700; }

/* ---------- Admin activity insights ---------- */
.insight-card { border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; background: var(--surface); }
.insight-card h3 { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; }
.insight-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.insight-card li { display: flex; justify-content: space-between; gap: .6rem; font-size: .86rem; }
.insight-card li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insight-card li strong { color: var(--red-glow, #8af1ff); white-space: nowrap; }

/* ---------- Admin command center ---------- */
@keyframes cmdgrid { from { background-position: 0 0; } to { background-position: 0 30px; } }
@keyframes cmdpulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.65); } }

/* command center — orders bar chart + live activity ticker */
@keyframes cmdbar { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes cmdfeed { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
/* neon hover on the quick-action tiles to match the command center */

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(4rem, 11vw, 8.5rem) 1.5rem clamp(3.5rem, 8vw, 6rem);
  min-height: 86vh; display: flex; align-items: center;
}
/* Modern home: a shorter hero so products sit just below the fold. */
/* svh (small viewport height) is stable while the mobile address bar hides/
   shows — plain vh resizes the hero mid-scroll, jolting everything below it. */
.hero--compact { min-height: 58vh; min-height: 58svh; padding: clamp(3rem, 8vw, 5.5rem) 1.5rem clamp(2.5rem, 5vw, 4rem); }
/* On wide screens give the artwork room — a short hero sliced the top of the
   image. Tall enough to show the art, short enough that products still peek. */
@media (min-width: 1024px) {
  .hero--compact { min-height: 72vh; min-height: 72svh; padding-top: 5rem; padding-bottom: 3rem; }
}
.section--featured { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* ---- Modern home: premium polish pass ---- */
.hero--compact .hero__eyebrow { letter-spacing: .28em; font-weight: 600; opacity: .92; }
.hero--compact .hero__title { font-size: clamp(2.9rem, 7vw, 5.4rem); letter-spacing: -.018em; }
.hero--compact .hero__cta { gap: .9rem; margin-top: 1.6rem; }
.hero--compact .hero__sub { max-width: 30ch; font-size: clamp(1rem, 1.4vw, 1.18rem); }
/* a touch more cinematic depth at the base of the hero */
.hero--compact::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38%; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(10,9,7,.78), transparent);
}
.hero--compact .hero__content { position: relative; z-index: 2; }

/* Featured grid: bigger, airier, with a deeper premium lift on hover */
.section--featured .section__eyebrow { letter-spacing: .26em; }
.section--featured .section__title { font-size: clamp(2.1rem, 4.8vw, 3.4rem); }
.section--featured .product-grid { gap: clamp(1.1rem, 1.8vw, 1.9rem); }
.section--featured .card { border-radius: 18px; }
.section--featured .card:hover {
  transform: translateY(-9px);
  box-shadow: 0 36px 70px -30px rgba(0,0,0,.96), 0 0 0 1px rgba(61,232,255,.28);
}
.section--featured .card__media { aspect-ratio: 5/6; } /* taller frame for featured cards */
.section--featured .card__name { font-size: 1.05rem; letter-spacing: .01em; }
@media (min-width: 1024px) {
  .section--featured .product-grid { grid-template-columns: repeat(4, 1fr); } /* a fuller, boutique row */
}
.hero__scroll {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  z-index: 3; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; opacity: .85;
  animation: heroScrollBob 2.2s ease-in-out infinite;
}
.hero__scroll:hover { color: var(--text); }
@keyframes heroScrollBob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } }
.section--featured { padding-top: clamp(2rem, 4vw, 3rem); }
.hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 520px at 78% 8%, rgba(61,232,255,.32), transparent 60%),
    radial-gradient(700px 480px at 12% 92%, rgba(40,80,160,.18), transparent 60%),
    linear-gradient(180deg, #0a0a0f 0%, #08080b 100%);
}
.hero__grid {
  position: absolute; inset: 0; opacity: .35;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 70% 35%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 70% 35%, #000 0%, transparent 75%);
}
.hero__content { position: relative; max-width: var(--max); margin: 0 auto; width: 100%; }
.hero__eyebrow {
  font-family: var(--display); font-weight: 700; letter-spacing: .3em;
  color: var(--red-glow); font-size: .85rem; margin-bottom: 1.2rem;
  display: inline-flex; align-items: center; gap: .6rem;
}
.hero__eyebrow::before { content: ""; width: 32px; height: 2px; background: var(--red); color: var(--on-accent); }
.hero__title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.6rem, 6.2vw, 4.8rem);
  line-height: 1.03; letter-spacing: -.01em;
  text-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.hero__title span { color: var(--red-glow); }
.hero__sub {
  color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.2rem);
  max-width: 560px; margin: 1.6rem 0 2.2rem;
}
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__stats {
  display: flex; gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: 3.2rem; flex-wrap: wrap;
}
.hero__stats div { display: flex; flex-direction: column; }
.hero__stats strong {
  font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700;
  color: #fff;
}
.hero__stats span { color: var(--muted); font-size: .85rem; letter-spacing: .05em; }

/* ---------- Trust strip ---------- */
.trust {
  max-width: var(--max); margin: 0 auto; position: relative; z-index: 5;
  padding: 0 1.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
/* Only the Classic hero gets the deliberate card straddle. */
.hero + .trust { margin-top: -2rem; }
.trust__item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.3rem; display: flex; align-items: center; gap: .9rem;
  box-shadow: var(--shadow);
}
.trust__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
  background: rgba(61,232,255,.12); color: var(--red-glow);
  border: 1px solid rgba(61,232,255,.25);
}
.trust__icon svg { width: 22px; height: 22px; }
.trust__item strong { display: block; font-size: .95rem; }
.trust__item small { color: var(--muted); font-size: .8rem; }

/* ---------- Sections ---------- */
.section { max-width: var(--max); margin: 0 auto; padding: clamp(3.5rem, 7vw, 5.5rem) 1.5rem; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2.4rem; flex-wrap: wrap; }
.section__head--center { flex-direction: column; align-items: center; text-align: center; }
.section__eyebrow {
  font-family: var(--display); font-weight: 700; letter-spacing: .25em;
  color: var(--red-glow); font-size: .8rem; margin-bottom: .5rem;
}
.section__title {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: .01em; text-transform: uppercase;
}
.section__link { color: var(--red-glow); font-weight: 700; font-family: var(--display); letter-spacing: .03em; transition: color .2s; }
.section__link:hover { color: var(--text); }

/* ---------- Category grid ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cat-card {
  text-align: left; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column;
  gap: .35rem; transition: transform .2s, border-color .2s, background .2s;
  position: relative; overflow: hidden;
}
.cat-card::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .25s;
  background: radial-gradient(400px 200px at 100% 0%, rgba(61,232,255,.18), transparent 70%);
}
.cat-card:hover { transform: translateY(-4px); border-color: var(--red); }
.cat-card:hover::before { opacity: 1; }
.cat-card__icon { font-size: 2rem; color: var(--red-glow); line-height: 0; }
.cat-card__icon svg { width: 30px; height: 30px; }
.cat-card__name { font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin-top: .3rem; }
.cat-card__blurb { color: var(--muted); font-size: .85rem; }
.cat-card__count { color: var(--red-glow); font-size: .8rem; font-weight: 600; margin-top: .6rem; }

/* Photo-backed collection tiles (Modern home) */
.cat-card--photo {
  padding: 0; min-height: 280px; justify-content: flex-end;
  border-color: transparent;
}
.cat-card--photo .cat-card__photo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.cat-card--plain { background: linear-gradient(160deg, #20242a, #0d0f12); }
.cat-card--photo .cat-card__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,9,12,0) 28%, rgba(8,9,12,.55) 64%, rgba(8,9,12,.92) 100%);
  transition: opacity .3s;
}
.cat-card--photo .cat-card__content {
  position: relative; z-index: 2; padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .25rem;
}
.cat-card--photo .cat-card__name { color: #fff; font-size: 1.35rem; margin: 0; letter-spacing: .01em; }
.cat-card--photo .cat-card__blurb { color: rgba(255,255,255,.74); }
.cat-card--photo .cat-card__count {
  margin-top: .7rem; color: rgba(255,255,255,.85); font-family: var(--display);
  letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between;
}
.cat-card--photo .cat-card__go {
  color: var(--red-glow); font-weight: 700; transition: transform .25s; transform: translateX(0);
}
.cat-card--photo:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 18px 40px -18px rgba(0,0,0,.7); }
.cat-card--photo:hover .cat-card__photo { transform: scale(1.07); }
.cat-card--photo:hover .cat-card__go { transform: translateX(5px); }

/* ---------- Shop ---------- */
.section--shop { background: linear-gradient(180deg, transparent, var(--bg-2) 12%, var(--bg-2)); max-width: none; }
.section--shop > .section__head, .shop { max-width: var(--max); margin-left: auto; margin-right: auto; }
.shop { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; }

.filters {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem; position: sticky; top: 110px;
}
.filters__group { padding-bottom: 1.2rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.filters__group h4 {
  font-family: var(--display); letter-spacing: .08em; text-transform: uppercase;
  font-size: .85rem; margin-bottom: .8rem; color: var(--muted);
}
.filters__list { display: flex; flex-direction: column; gap: .5rem; max-height: 220px; overflow-y: auto; }
.filters__list::-webkit-scrollbar { width: 6px; }
.filters__list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.check { display: flex; align-items: center; gap: .55rem; font-size: .9rem; color: var(--muted); cursor: pointer; transition: color .15s; }
.check:hover { color: var(--text); }
.check input { accent-color: var(--red); width: 16px; height: 16px; }
.price-range input[type=range] { width: 100%; accent-color: var(--red); }
.price-range__labels { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); margin-top: .4rem; }

.shop__main { min-width: 0; }
.shop__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.3rem; gap: 1rem; flex-wrap: wrap; }
.shop__count { color: var(--muted); font-size: .9rem; }
.shop__sort { display: flex; align-items: center; gap: .6rem; }
.shop__sort label { color: var(--muted); font-size: .85rem; font-family: var(--display); letter-spacing: .05em; }
.shop__sort select {
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  padding: .55rem .8rem; border-radius: 9px; font-family: inherit; font-size: .9rem; outline: none;
}
.shop__sort select:focus { border-color: var(--red); }

/* ---------- Product grid ---------- */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
/* The homepage grids are empty server-side and hydrated by JS — reserve one
   row of card height so the page doesn't lurch when cards pop in. Both
   selectors self-dissolve the moment children are injected. */
#featuredGrid:empty { min-height: clamp(320px, 46vw, 460px); }
#catGrid:empty { min-height: clamp(200px, 30vw, 320px); }
@media (prefers-reduced-motion: no-preference) {
  #featuredGrid:empty, #catGrid:empty {
    border-radius: var(--radius);
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.04) 50%, transparent 70%) var(--surface);
    background-size: 240% 100%;
    animation: pgShimmer 1.4s linear infinite;
  }
  @keyframes pgShimmer { to { background-position: -140% 0; } }
}
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
/* Keyboard focus inside a card gets full hover parity (lift/quick/alt-photo). */
.card:hover, .card:focus-within { border-color: rgba(61,232,255,.45); }
.card__media { position: relative; aspect-ratio: 4/3; background: var(--bg-3); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, opacity .45s ease; }
.card:hover .card__media img, .card:focus-within .card__media img { transform: scale(1.06); }
/* Secondary image on hover — only rendered when a product has a real 2nd photo,
   so single-image cards are unaffected. Desktop/pointer only. */
.card__img--alt { position: absolute; inset: 0; opacity: 0; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__img--alt, .card:focus-within .card__img--alt { opacity: 1; }
}
/* Keep the card's controls above the swap image. */
.card__wish, .card__quick { z-index: 4; }
.badge {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  font-family: var(--display); font-weight: 700; font-size: .7rem; letter-spacing: .08em;
  padding: .25rem .6rem; border-radius: 6px;
}
.badge--new { background: var(--text); color: #0a0a0c; }
.badge--sale { background: var(--sale); color: #fff; }
/* Sold-out chips read as a scrim over the photo, not a cool-graphite sticker. */
.badge--soldout {
  background: rgba(8,8,10,.82); color: var(--text); border: 1px solid rgba(244,244,246,.22);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}

/* Out-of-stock state: a clear ribbon on the image + a dimmed photo so a sold-out
   item reads as sold out at a glance on cards and the product page. */
.card__soldout {
  position: absolute; top: .7rem; right: .7rem; z-index: 3;
  font-family: var(--display); font-weight: 700; font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; padding: .25rem .6rem; border-radius: 6px;
  /* cream, not var(--text) — the scrim stays dark on North's paper theme */
  background: rgba(8,8,10,.82); color: #f4f4f6; border: 1px solid rgba(244,244,246,.22);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.card.is-soldout .card__media img { opacity: .55; filter: grayscale(.35); }
.pd-main.is-soldout img { opacity: .6; filter: grayscale(.3); }
.card__quick {
  position: absolute; left: 50%; bottom: -50px; transform: translateX(-50%);
  background: rgba(8,8,11,.85); backdrop-filter: blur(6px); color: #fff;
  border: 1px solid var(--line); padding: .55rem 1.2rem; border-radius: 8px;
  font-family: var(--display); font-weight: 600; letter-spacing: .05em; font-size: .82rem;
  text-transform: uppercase; transition: bottom .25s ease, background .2s; white-space: nowrap;
}
.card:hover .card__quick, .card:focus-within .card__quick { bottom: .8rem; }
.card__quick:hover { background: var(--red); border-color: var(--red); color: var(--on-accent); }
/* Calmer CTA inside the grid: the card owns the lift, so no per-button hop,
   no halo, and no shine sweep repeating across every row. */
.card .btn--primary { box-shadow: 0 4px 12px -8px rgba(61,232,255,.5); font-size: .88rem; padding: .75rem 1.2rem; }
.card .btn--primary:hover:not(:disabled) { transform: none; box-shadow: 0 8px 20px -8px rgba(61,232,255,.65); }
.card .btn--primary::before { display: none; }
.card__body { padding: .85rem .9rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.card__brand { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
.card__name { font-size: .98rem; font-weight: 600; line-height: 1.25; min-height: 2.45em; }
.card__rating { display: flex; align-items: center; gap: .4rem; }
.stars { color: var(--amber); letter-spacing: .05em; font-size: .85rem; }
.card__rating small { color: var(--muted); font-size: .78rem; }
.card__price { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-top: auto; padding: .2rem 0 .45rem; }
.card__price strong { font-family: var(--display); font-size: 1.25rem; font-weight: 700; }
.card__price s { color: var(--muted-2); font-size: .9rem; }
.stock--low { font-size: .72rem; color: var(--amber); font-weight: 600; margin-left: auto; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 4rem 1rem; color: var(--muted); display: flex; flex-direction: column; gap: 1rem; align-items: center; }

/* ---------- Brands marquee ---------- */
.brands { max-width: none; background: var(--bg-2); }
.brand-marquee { max-width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.brand-marquee__track { display: flex; gap: 1rem; width: max-content; animation: marquee 32s linear infinite; }
.brand-chip {
  font-family: var(--display); font-weight: 700; letter-spacing: .08em; font-size: 1.3rem;
  color: var(--muted-2); padding: 1rem 2rem; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); transition: color .2s, border-color .2s; white-space: nowrap;
}
.brand-chip:hover { color: #fff; border-color: var(--red); }

/* ---------- Build guides ---------- */
.build-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.guide {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 1rem;
  min-height: 220px; transition: transform .2s, border-color .2s; position: relative; overflow: hidden;
}
.guide::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--accent); }
.guide:hover { transform: translateY(-4px); border-color: var(--accent); }
.guide__tag { font-family: var(--display); font-weight: 700; letter-spacing: .12em; font-size: .72rem; color: var(--accent); }
.guide h3 { font-size: 1.15rem; line-height: 1.35; font-weight: 600; }
.guide__read { margin-top: auto; color: var(--muted); font-size: .85rem; font-weight: 600; }

/* ---------- Newsletter ---------- */
.newsletter {
  background: linear-gradient(135deg, #16070a, #1a0a0e);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.newsletter__inner {
  max-width: var(--max); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.newsletter h2 { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.3rem); text-transform: uppercase; }
.newsletter p { color: var(--muted); max-width: 460px; }
.newsletter__form { display: flex; gap: .6rem; flex: 1; min-width: 280px; max-width: 460px; }
.newsletter__form input {
  /* min-width:0 lets flex:1 actually shrink the input — without it the
     Subscribe/Join button is pushed off-screen on narrow phones. */
  flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line); color: var(--text);
  padding: .85rem 1.1rem; border-radius: 10px; font-family: inherit; font-size: 1rem; outline: none;
}
.newsletter__form input:focus { border-color: var(--red); }
@media (max-width: 480px) {
  /* tiny screens: stack the email form so the button is never clipped */
  .newsletter__form { flex-wrap: wrap; }
  .newsletter__form .btn { flex: 1 1 100%; }
}

/* ---------- Footer ---------- */
.footer { background: var(--bg); border-top: 1px solid var(--line); }
.footer__grid {
  max-width: var(--max); margin: 0 auto; padding: 3.5rem 1.5rem 2.5rem;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1.3fr; gap: 2rem;
}
.logo--footer { margin-bottom: 1rem; }
.footer__brand p { color: var(--muted); font-size: .9rem; max-width: 280px; margin-bottom: 1.2rem; }
.footer__social { display: flex; gap: .6rem; }
.footer__social a {
  width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line);
  display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: .8rem;
  color: var(--muted); transition: all .2s;
}
.footer__social a:hover { background: var(--red); border-color: var(--red); color: var(--on-accent); }
.footer__col h4, .footer__contact h4 {
  font-family: var(--display); letter-spacing: .08em; text-transform: uppercase;
  font-size: .9rem; margin-bottom: 1rem;
}
.footer__col a { display: block; color: var(--muted); font-size: .9rem; padding: .3rem 0; transition: color .15s; }
.footer__col a:hover { color: var(--red-glow); }
.footer__contact p { color: var(--muted); font-size: .9rem; padding: .25rem 0; }
.footer__bottom {
  border-top: 1px solid var(--line); max-width: var(--max); margin: 0 auto;
  padding: 1.3rem 1.5rem; display: flex; justify-content: space-between; gap: 1rem;
  color: var(--muted-2); font-size: .85rem; flex-wrap: wrap;
}

/* ---------- Overlay ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: 200;
}
.overlay.show { opacity: 1; visibility: visible; }

/* ---------- Cart drawer ---------- */
.cart {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100%);
  background: var(--bg-2); border-left: 1px solid var(--line); z-index: 300;
  transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s;
  display: flex; flex-direction: column;
}
/* Shadow only while open — closed, it sat just off-screen and cast a grey
   band down the right edge of every page. */
.cart.open { transform: translateX(0); box-shadow: -20px 0 60px -20px rgba(0,0,0,.8); }
.cart__head { display: flex; align-items: center; justify-content: space-between; padding: 1.3rem 1.4rem; border-bottom: 1px solid var(--line); }
.cart__head h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; }
.cart__body { flex: 1; overflow-y: auto; padding: 1rem 1.4rem; display: flex; flex-direction: column; gap: 1rem; }
.cart__empty { text-align: center; margin: auto; display: flex; flex-direction: column; gap: 1rem; align-items: center; color: var(--muted); }
.cart__empty span { font-size: 3rem; }

/* minmax(0, 1fr), not 1fr: a bare 1fr track will not shrink below its
   content's min-content width, so an 83-character product name pushed the
   quantity stepper and the Remove link 20px past the drawer's right edge at
   320px (the "+" was clipped and "Remove" truncated to "Remov"). */
.cart-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: .9rem; align-items: start; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.cart-item img { border-radius: 8px; width: 72px; height: 54px; object-fit: cover; }
.cart-item__brand { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.cart-item__info h4 { font-size: .9rem; font-weight: 600; line-height: 1.3; margin: .1rem 0 .3rem; overflow-wrap: anywhere; }
.cart-item__info strong { font-family: var(--display); font-size: 1rem; }
.cart-item__ctrl { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.qty { display: flex; align-items: center; gap: .2rem; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.qty button { width: 26px; height: 26px; font-size: 1rem; color: var(--muted); transition: background .15s, color .15s; }
.qty button:hover { background: var(--surface-2); color: #fff; }
.qty span { min-width: 22px; text-align: center; font-size: .9rem; }
.cart-item__rm { font-size: .75rem; color: var(--muted-2); text-decoration: underline; transition: color .15s; }
.cart-item__rm:hover { color: var(--red-glow); }
/* Line total is the headline number; per-unit price appears under it at qty > 1. */
.cart-item__unit { display: block; font-size: .72rem; color: var(--muted-2); margin-top: 1px; font-family: var(--font); font-weight: 500; }
.cart-item__info h4 a:hover { color: var(--red-glow); }
/* The dashed "Pairs well with" rule (or the footer border) closes the list alone. */
.cart-item:last-child, .cart-item:has(+ .cart-suggest) { border-bottom: 0; }

.cart__foot { border-top: 1px solid var(--line); padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: .9rem; }
.cart__row { display: flex; justify-content: space-between; align-items: center; }
.cart__row strong { font-family: var(--display); font-size: 1.4rem; }
.cart__note { text-align: center; color: var(--muted-2); font-size: .78rem; }
.cart__progress { font-size: .82rem; }
.ship-msg { color: var(--muted); margin-bottom: .4rem; }
.ship-msg strong { color: var(--amber); }
.ship-msg__flat { opacity: .7; font-size: .92em; }
.cart__row--total { margin-top: .15rem; }
.cart__row--ship { color: var(--muted); font-size: .92rem; }
.cart__row--ship strong { font-family: inherit; font-size: 1rem; }
.ship-track { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.ship-fill { height: 100%; background: linear-gradient(90deg, var(--red), var(--amber)); transition: width .3s; color: var(--on-accent); }
.ship-bar--done { color: var(--ok); font-weight: 600; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 400; display: none; }
.modal.open { display: block; }
.modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.modal__panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(880px, 94vw); max-height: 92vh; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  display: grid; grid-template-columns: 1fr 1fr; box-shadow: var(--shadow);
  animation: modalIn .3s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translate(-50%,-46%); } to { opacity: 1; transform: translate(-50%,-50%); } }
.modal__close { position: absolute; top: 1rem; right: 1rem; width: 38px; height: 38px; border-radius: 10px; background: rgba(8,8,11,.6); z-index: 2; transition: background .2s; }
.modal__close:hover { background: var(--red); color: var(--on-accent); }
.modal__media { background: #0a0a0d; }
.modal__media img { width: 100%; height: 100%; object-fit: cover; }
.modal__info { padding: 2rem; display: flex; flex-direction: column; gap: .7rem; }
.modal__info h2 { font-family: var(--display); font-size: 1.7rem; line-height: 1.15; text-transform: uppercase; }
.modal__price { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.modal__price strong { font-family: var(--display); font-size: 1.9rem; }
.modal__price s { color: var(--muted-2); }
.save { background: rgba(61,232,255,.15); color: var(--red-glow); font-weight: 700; font-size: .78rem; padding: .2rem .5rem; border-radius: 5px; }
.modal__desc { color: var(--muted); font-size: .92rem; white-space: pre-line; }
.specs { list-style: none; display: flex; flex-direction: column; gap: .3rem; margin: .3rem 0; }
.specs li { display: flex; justify-content: space-between; font-size: .85rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.specs span { color: var(--muted); }
.modal__stock { font-size: .85rem; font-weight: 600; }
.modal__stock.in { color: #4ade80; }
.modal__stock.out { color: var(--red-glow); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(120%);
  background: var(--surface-2); border: 1px solid var(--line); color: #fff;
  padding: .9rem 1.4rem; border-radius: 12px; font-weight: 600; font-size: .92rem;
  box-shadow: var(--shadow); z-index: 500; transition: transform .35s cubic-bezier(.4,0,.2,1);
  max-width: 90vw; text-align: center;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* Multi-buy promo line on the product page (deal itself lives in checkout). */
.pd-multibuy { color: var(--amber); font-size: .9rem; font-weight: 600; margin: .4rem 0 0; }

/* ---------- Social proof ---------- */
/* Product page "N people looking at this right now" (fed by /api/viewers). */
.pd-viewers { color: var(--amber); font-size: .85rem; font-weight: 600; margin-top: .35rem; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(120%);
  background: var(--surface-2); border: 1px solid var(--line); color: #fff;
  padding: .9rem 1.4rem; border-radius: 12px; font-weight: 600; font-size: .92rem;
  box-shadow: var(--shadow); z-index: 500; transition: transform .35s cubic-bezier(.4,0,.2,1);
  max-width: 90vw; text-align: center;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* Multi-buy promo line on the product page (deal itself lives in checkout). */
.pd-multibuy { color: var(--amber); font-size: .9rem; font-weight: 600; margin: .4rem 0 0; }

/* ---------- Social proof ---------- */
/* Product page "N people looking at this right now" (fed by /api/viewers). */
.pd-viewers { color: var(--amber); font-size: .85rem; font-weight: 600; margin-top: .35rem; }

/* Corner "just bought" toast (fed by /api/recent-activity). Bottom-left so it
   never collides with the centered action toast or the back-to-top button. */
.sp-toast {
  position: fixed; left: 1.1rem; bottom: 1.4rem; z-index: 490;
  display: flex; align-items: center; gap: .65rem;
  max-width: min(340px, calc(100vw - 2.2rem));
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  padding: .7rem .85rem; border-radius: 12px; font-size: .85rem; line-height: 1.35;
  box-shadow: var(--shadow);
  transform: translateY(150%); opacity: 0; pointer-events: none;
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
.sp-toast.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.sp-toast__icon { font-size: 1.15rem; flex: none; }
.sp-toast__text strong { color: var(--amber); font-weight: 600; }
.sp-toast__close {
  flex: none; background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 1.15rem; line-height: 1; padding: .15rem .3rem; align-self: flex-start;
}
.sp-toast__close:hover { color: var(--text); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .trust { grid-template-columns: repeat(2, 1fr); }
  .cat-grid, .build-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
  .shop { grid-template-columns: 1fr; }
  .filters-toggle { display: inline-flex; }
  .filters { position: static; display: none; }
  .filters.open { display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 1.2rem; }
  .filters.open .filters__group:last-of-type { grid-column: 1 / -1; }
  .filters.open .btn { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  /* .nav mobile styling lives in the drawer block below (single source of truth) */
  .nav-toggle { display: flex; }
  .modal__panel { grid-template-columns: 1fr; }
  .modal__media { aspect-ratio: 16/10; }
  .newsletter__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .trust, .build-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  /* keep 2-up product grid on phones — standard for shopping */
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  /* Shorter, denser cards on phones so the catalog scrolls less */
  .card__body { padding: .65rem .7rem; gap: .25rem; }
  .card__name { font-size: .9rem; min-height: 2.3em; }
  .card__price { padding: .15rem 0 .35rem; }
  .card__price strong { font-size: 1.1rem; }
  .card__meta { min-height: 0; margin: 0 0 .35rem; }
  .section--featured .card__media { aspect-ratio: 1 / 1; } /* drop the tall premium frame on phones */
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .hero { min-height: 90vh; min-height: 90svh; }
}

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

/* Product page: small uppercase label over the Details / Care panels */
.pd-label {
  display: block; font-family: var(--display); letter-spacing: .08em; text-transform: uppercase;
  font-size: .78rem; color: var(--muted); margin-bottom: .5rem;
}

/* ============================================================
   Account (auth) + Admin
   ============================================================ */

/* ---------- Header account controls ---------- */
.acct-email {
  font-size: .82rem; color: var(--muted); max-width: 150px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; display: none;
}
/* The truncated email reads messy and crowds the nav — only show it when
   there's genuinely room. Smaller desktops keep the clean icon row. */
@media (min-width: 1400px) { .acct-email { display: inline; } }
.logout-form { display: inline-flex; margin: 0; }
.nav__link--admin { color: var(--amber); }

/* ---------- Auth pages ---------- */
.auth {
  min-height: 72vh; display: flex; align-items: center; justify-content: center;
  padding: 3rem 1.5rem;
}
.auth__card {
  width: 100%; max-width: 430px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 2.4rem; box-shadow: var(--shadow);
}
.auth__title {
  font-family: var(--display); font-size: 2rem; text-transform: uppercase;
  margin: .2rem 0 1.4rem;
}
.auth__form { display: flex; flex-direction: column; gap: 1rem; }
.auth__error {
  background: rgba(61,232,255,.12); border: 1px solid rgba(61,232,255,.4);
  color: #ff8a80; padding: .7rem .9rem; border-radius: 9px; font-size: .9rem;
  margin-bottom: .4rem;
}
.auth__error:empty { display: none; }
.auth__alt { margin-top: 1.3rem; color: var(--muted); font-size: .9rem; text-align: center; }
.auth__alt a { color: var(--red-glow); font-weight: 600; }
.auth__alt a:hover { color: #fff; }

/* ---------- Form fields (shared) ---------- */
.field { display: flex; flex-direction: column; gap: .4rem; }
.field > span { font-size: .82rem; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.field input, .field select, .field textarea {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  padding: .75rem .9rem; border-radius: 9px; font-family: inherit; font-size: .95rem; outline: none;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--red); }
.field textarea { resize: vertical; }

/* ---------- Admin ---------- */
.admin { max-width: 1100px; }
.admin__flash {
  background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.4);
  color: #7ee2a8; padding: .8rem 1rem; border-radius: 9px; margin-bottom: 1rem; font-size: .92rem;
}
/* Green means "it worked" — empty views and errors must not wear it. */
.admin__flash--empty { background: var(--surface); border: 1px dashed var(--line); color: var(--muted); }
.admin__flash--warn { background: rgba(61,232,255,.1); border-color: rgba(61,232,255,.45); color: var(--amber); }
.admin__count { color: var(--muted); margin-bottom: 1rem; font-size: .9rem; }

.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.admin-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.admin-table th, .admin-table td {
  text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line); font-size: .9rem; vertical-align: middle;
}
.admin-table th {
  font-family: var(--display); letter-spacing: .06em; text-transform: uppercase;
  font-size: .75rem; color: var(--muted); background: var(--surface);
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--surface); }
.admin-thumb { border-radius: 6px; object-fit: cover; }
.admin-actions { display: flex; gap: .8rem; align-items: center; white-space: nowrap; }
.admin-inline-form { display: inline; margin: 0; }
.admin-link { color: var(--muted); font-weight: 600; font-size: .85rem; text-decoration: underline; }
.admin-link:hover { color: #fff; }
.admin-link--danger { color: #ff8a80; }
.admin-link--danger:hover { color: var(--red-glow); }
.tag { font-family: var(--display); font-weight: 700; font-size: .65rem; letter-spacing: .08em; padding: .15rem .45rem; border-radius: 4px; margin-right: .3rem; }
.tag--new { background: #fff; color: #08080b; }
.tag--sale { background: var(--sale); color: #fff; }

/* ---------- Admin form ---------- */
.admin-form { display: flex; flex-direction: column; gap: 1.2rem; max-width: 820px; }
.admin-form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.admin-form__flags { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.admin-form__actions { display: flex; gap: .8rem; flex-wrap: wrap; }
@media (max-width: 620px) {
  .admin-form__grid { grid-template-columns: 1fr; }
  /* Stack the form buttons full-width so they never run off the screen edge. */
  .admin-form__actions { flex-direction: column; align-items: stretch; }
  .admin-form__actions .btn { width: 100%; }
}

/* ============================================================
   Conversion polish: card meta, reviews, guarantee, payments
   ============================================================ */

/* ---------- Product card extras ---------- */
.card__save {
  font-size: .72rem; font-weight: 700; color: #4ade80;
  background: rgba(74,222,128,.12); padding: .12rem .45rem; border-radius: 5px;
}
.card__meta { display: flex; align-items: center; gap: .6rem; min-height: 1.1rem; margin: -.1rem 0 .55rem; flex-wrap: wrap; }
.card__ship { font-size: .74rem; color: var(--muted); font-weight: 600; }
.card__meta .stock--low { margin-left: 0; }
.card__quick { text-transform: none; letter-spacing: .01em; }

/* ---------- Reviews ---------- */
.reviews { background: var(--bg-2); max-width: none; }
.reviews > .section__head, .review-grid { max-width: var(--max); margin-left: auto; margin-right: auto; }
.review-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; padding: 0 1.5rem; }
.review {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem; display: flex; flex-direction: column; gap: .9rem;
}
.review__stars { color: var(--amber); letter-spacing: .12em; font-size: .95rem; }
.review blockquote { font-size: .92rem; line-height: 1.55; color: var(--text); margin: 0; }
.review figcaption { margin-top: auto; display: flex; flex-direction: column; gap: .1rem; }
.review figcaption strong { font-size: .9rem; }
.review figcaption span { font-size: .78rem; color: var(--muted); }
/* Optional customer photo attached through the tokenized review form. */
.review__photo { display: inline-block; width: 120px; }
.review__photo img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }

/* ---------- Guarantee band ---------- */
.guarantee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); }
.guarantee__inner {
  max-width: var(--max); margin: 0 auto; padding: 2.2rem 1.5rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.guarantee__item { display: flex; gap: 1rem; align-items: flex-start; }
.guarantee__item span { font-size: 1.8rem; line-height: 1; }
.guarantee__item strong { display: block; font-family: var(--display); font-size: 1.1rem; margin-bottom: .25rem; }
.guarantee__item p { color: var(--muted); font-size: .88rem; margin: 0; }
/* Stamped guarantee seal — base look; both theme overlays restyle it. */
.ns-gicon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px dashed rgba(61,232,255,.5); color: var(--red-glow);
}
.ns-gicon svg { width: 22px; height: 22px; }

/* ---------- Footer payment + security ---------- */
.footer__pay {
  border-top: 1px solid var(--line); max-width: var(--max); margin: 0 auto;
  padding: 1.3rem 1.5rem; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.footer__secure { color: var(--muted); font-size: .85rem; font-weight: 600; }
/* Inline stroke icons in the contact column + SSL line (currentColor follows
   each theme's footer --muted remap). */
.footer__contact p, .footer__secure { display: flex; align-items: center; gap: .55rem; }
.footer__contact svg, .footer__secure svg { width: 16px; height: 16px; flex: none; }
.pay-badges { display: flex; gap: .5rem; flex-wrap: wrap; }
.pay-badge {
  font-family: var(--display); font-weight: 700; font-size: .72rem; letter-spacing: .04em;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line);
  padding: .35rem .6rem; border-radius: 6px;
}
.footer__bottom a { color: var(--muted); }
.footer__bottom a:hover { color: var(--red-glow); }

@media (max-width: 1024px) {
  .review-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .guarantee__inner { grid-template-columns: 1fr; }
  .footer__pay { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .review-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Admin: sourcing / import UI
   ============================================================ */
.admin__head-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.admin-sub { display: block; color: var(--muted-2); font-size: .76rem; margin-top: .15rem; }
.admin-table tr.is-draft { opacity: .72; }
.tag--live { background: rgba(74,222,128,.16); color: #4ade80; }
.tag--draft { background: rgba(255,183,3,.16); color: var(--amber); }
.margin-ok { color: #4ade80; font-weight: 700; }
.margin-low { color: #ff8a80; font-weight: 700; }

.import-rule {
  display: flex; gap: 1.5rem; align-items: center; justify-content: space-between;
  flex-wrap: wrap; background: linear-gradient(120deg, rgba(74,222,128,.08), transparent);
  border: 1px solid rgba(74,222,128,.3); border-radius: var(--radius);
  padding: 1.2rem 1.4rem; margin-bottom: 1.6rem;
}
.import-rule h3 { font-family: var(--display); font-size: 1.15rem; margin-bottom: .3rem; }
.import-rule p { color: var(--muted); font-size: .9rem; max-width: 760px; margin: 0; }
.import-rule code { background: var(--surface-2); padding: .1rem .35rem; border-radius: 4px; font-size: .85em; }
.import-rule__example {
  display: flex; flex-direction: column; text-align: right; white-space: nowrap;
  border-left: 1px solid var(--line); padding-left: 1.5rem;
}
.import-rule__example span { color: var(--muted-2); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.import-rule__example strong { font-family: var(--display); font-size: 1.3rem; }
.import-rule__example small { color: #4ade80; font-size: .8rem; }

.import-form, .import-suppliers { max-width: 860px; }
.import-h { font-family: var(--display); font-size: 1.2rem; margin: 2rem 0 .3rem; }
.import-sub { color: var(--muted); font-size: .9rem; margin-bottom: 1rem; }
.import-grid { grid-template-columns: 1fr; }
.import-cat { max-width: 320px; }

.import-results { max-width: 860px; margin-top: 1.4rem; }
.import-results .admin__flash a { color: var(--red-glow); font-weight: 600; margin-left: .4rem; }
.import-log { list-style: none; display: flex; flex-direction: column; gap: .5rem; margin-top: .8rem; }
.import-log li {
  display: flex; gap: .7rem; align-items: flex-start; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem;
}
.import-log li.ok { border-color: rgba(74,222,128,.3); }
.import-log li.warn { border-color: rgba(255,183,3,.35); }
.import-log li span { font-size: 1rem; }
.import-log li strong { display: block; font-size: .88rem; font-weight: 600; }
.import-log li small { color: var(--muted-2); font-size: .76rem; word-break: break-all; }

.supplier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.supplier-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; }
.supplier-card.is-on { border-color: rgba(74,222,128,.4); }
.supplier-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.supplier-card__head strong { font-family: var(--display); font-size: 1.05rem; }
.supplier-pill { font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: .15rem .5rem; border-radius: 20px; background: var(--surface-2); color: var(--muted); }
.supplier-card.is-on .supplier-pill { background: rgba(74,222,128,.16); color: #4ade80; }
.supplier-card p { color: var(--muted); font-size: .85rem; margin: 0; }

@media (max-width: 760px) {
  .supplier-grid { grid-template-columns: 1fr; }
  .import-rule__example { border-left: none; padding-left: 0; text-align: left; }
}

/* ============================================================
   Product detail page + card links + admin images
   ============================================================ */
.card__imglink { display: block; width: 100%; height: 100%; }
.card__name-link { color: inherit; display: block; }
.card__name-link:hover .card__name { color: var(--red-glow); }

/* Whole-card click target — tapping anywhere on the card (not just the photo
   or title) opens the product page. The title link is stretched to cover the
   whole card; the interactive controls sit above it via z-index so Add to
   Cart, Quick view and the wishlist heart still work. */
.card { cursor: pointer; }
.card__name-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__quick { z-index: 2; }
.card__body .btn { position: relative; z-index: 2; }
/* Quick-add size chips must sit above the stretched link too — without this
   every chip tap is eaten by the card overlay and navigates to the PDP. */
.card__qadd { position: relative; z-index: 2; }
.card .badge { pointer-events: none; } /* decorative — let clicks reach the card link */

.btn--lg { padding: 1rem 2rem; font-size: 1.05rem; }

.pd { max-width: var(--max); margin: 0 auto; padding: 1.5rem 1.5rem 4rem; }
.pd-crumbs { color: var(--muted-2); font-size: .85rem; margin: .5rem 0 1.5rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.pd-crumbs a:hover { color: var(--red-glow); }
.pd-crumbs__cur { color: var(--muted); }

.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
/* Let the columns shrink below their content width so nothing overflows the
   viewport on mobile (grid/flex children default to min-width:auto). */
.pd-gallery, .pd-info { min-width: 0; }

.pd-gallery { position: sticky; top: 100px; }
.pd-main {
  position: relative; aspect-ratio: 4/3; background: #060607; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.pd-main img { width: 100%; height: 100%; object-fit: cover; }
.pd-main svg { width: 100%; height: 100%; max-width: 100%; display: block; }
.pd-thumbs { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.pd-thumb {
  width: 80px; height: 60px; border-radius: 10px; overflow: hidden; padding: 0;
  border: 2px solid var(--line); background: #060607; transition: border-color .15s;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb:hover { border-color: var(--muted); }
.pd-thumb.active { border-color: var(--red); }

/* Clustered buy column: tight brand/title/rating, price as its own moment,
   one compact micro-info cluster — margins below do the grouping. */
.pd-info { display: flex; flex-direction: column; gap: .35rem; }
.pd-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.1; }
.pd-price { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .25rem 0 .6rem; }
.pd-price strong { font-family: var(--display); font-size: 2rem; }
.pd-price s { color: var(--muted-2); font-size: 1.1rem; }
.pd-ship, .pdp-points { margin: 0; font-size: .85rem; color: var(--muted); }
.pd-ship strong { color: inherit; }
.pd-stock { font-weight: 600; font-size: .9rem; margin-top: .5rem; }
.pd-stock.in { color: var(--steel); }
.pd-stock.out { color: var(--red-glow); }

/* Drop countdown (product page) */
.pd-drop {
  margin: .2rem 0 1rem; padding: 1rem 1.2rem; border-radius: 12px;
  background: linear-gradient(135deg, rgba(61,232,255,.18), rgba(61,232,255,.12));
  border: 1px solid var(--line);
}
.pd-drop__label { margin: 0; font-size: .72rem; letter-spacing: .16em; color: var(--red-glow); font-weight: 700; }
.pd-drop__countdown {
  font-family: var(--display, inherit); font-size: 2rem; font-weight: 800;
  letter-spacing: .04em; margin: .2rem 0; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pd-drop__when { margin: 0; font-size: .85rem; color: var(--muted); }
.pd-drop__shipby { margin: .3rem 0 0; font-size: .95rem; color: var(--text); }
.pd-drop__shipby strong { color: var(--red-glow); }

/* Drop badge on product cards */
.card__drop {
  display: inline-block; margin-top: .2rem; font-size: .78rem; font-weight: 700;
  color: #0a0a0c; background: var(--gold, #3de8ff); padding: .25rem .55rem; border-radius: 6px;
}
.drops-countdown {
  font-weight: 800; font-size: 1.1rem; letter-spacing: .03em; color: var(--red-glow);
  font-variant-numeric: tabular-nums; margin: .2rem 0;
}
/* /drops when nothing is scheduled — a storefront, not a dead end */
.drops-none { color: var(--muted); font-size: 1rem; line-height: 1.7; max-width: 62ch; margin: .4rem 0 0; }
.drops-none a { color: var(--red-glow); font-weight: 700; }
.drops-subhead { font-family: var(--display); font-size: 1.35rem; color: var(--text); margin: 2.4rem 0 .9rem; }
.drops-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.drops-how__step {
  padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255,255,255,.03);
}
.drops-how__step span { display: block; font-size: 1.5rem; margin-bottom: .35rem; }
.drops-how__step strong { display: block; color: var(--text); margin-bottom: .3rem; }
.drops-how__step p { color: var(--muted); font-size: .88rem; line-height: 1.55; margin: 0; }
.drops-signup { margin-top: 1.6rem; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; }
.drops-signup .newsletter__inner { padding: 1.8rem 1.6rem; }
.drops-fresh { margin-top: 2.6rem; }
@media (max-width: 720px) {
  .drops-how { grid-template-columns: 1fr; }
}
.pd-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: .2rem 0; }
.pd-actions .btn { flex: 1 1 45%; }
.pd-express-note { flex-basis: 100%; margin: .1rem 0 0; font-size: .78rem; color: var(--muted); text-align: center; }
.pd-perks { list-style: none; display: flex; flex-direction: column; gap: .65rem; color: var(--muted); font-size: .9rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1rem 0; }
.pd-perks li { display: flex; align-items: flex-start; gap: .65rem; line-height: 1.45; }
.pd-perks svg { width: 20px; height: 20px; flex: 0 0 20px; margin-top: .05rem; color: var(--red-glow); }
.pd-perks__link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pd-perks__link:hover { color: var(--text); }
/* Delivery + returns + security promise, directly under the buy button —
   the one consolidated trust block (inherits the old perks-band framing). */
.pd-promise {
  display: flex; flex-direction: column; gap: .5rem; margin: .9rem 0 .2rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .9rem 0;
}
.pd-promise__line { margin: 0; display: flex; align-items: flex-start; gap: .55rem; font-size: .9rem; line-height: 1.45; color: var(--muted); }
.pd-promise__line strong { color: var(--text); }
.pd-promise__line svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: .15rem; color: var(--red-glow); }
/* Fit & fabric rows — compact label/value pairs from real product fields. */
.pd-facts__rows { margin: .55rem 0 0; display: flex; flex-direction: column; gap: .35rem; }
.pd-facts__row { display: flex; gap: .6rem; font-size: .9rem; line-height: 1.4; }
.pd-facts__row dt { flex: 0 0 5.5rem; color: var(--muted); }
.pd-facts__row dd { margin: 0; color: var(--text); }

.pd-details { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; margin-top: 3rem; }
.pd-h2 { font-size: 1.4rem; margin-bottom: 1rem; }
.pd-desc p { color: var(--muted); line-height: 1.7; white-space: pre-line; }
/* PDP sections align with the .pd page rail (no double side-indent) and keep a
   consistent ~3rem rhythm. Compound selectors so the mobile
   `.section { padding: 2.6rem 1rem }` override can't win. */
.pd .section { padding-left: 0; padding-right: 0; }
.pd .pd-kit { padding-top: 1.2rem; padding-bottom: 0; }
.pd .pd-reviews { padding-top: 3rem; padding-bottom: 0; }
.pd .pd-related { padding-top: 3rem; padding-bottom: 1rem; }

.admin-images { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: 1rem; }
.admin-images legend { padding: 0 .5rem; color: var(--muted); font-size: .82rem; font-weight: 600; }
.admin-images input[type=file] { color: var(--muted); font-size: .9rem; }
.admin-hint { color: var(--muted-2); font-size: .82rem; margin: 0; }

@media (max-width: 860px) {
  .pd-grid { grid-template-columns: 1fr; }
  .pd-gallery { position: static; }
  .pd-details { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* ============================================================
   Checkout
   ============================================================ */
.checkout { max-width: 1000px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.checkout__inner > .section__title { margin-bottom: 1.5rem; }
.checkout__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: start; }
.checkout__summary {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem;
  /* Grid items default to min-width:auto — opening the coupon <details> would
     inflate this column past a narrow phone's viewport and push the Apply
     buttons off-screen. min-width:0 keeps it inside its track so the flex
     inputs shrink instead. */
  min-width: 0;
}
.checkout__form { min-width: 0; }
.checkout__summary h3, .checkout__form h3 { font-family: var(--display); font-size: 1.15rem; margin-bottom: 1rem; }
/* Was an inline style on the Shipping-address <h3> — moved into a class so a
   theme can own the rhythm (an inline style only yields to !important). */
.checkout__h--sub { margin-top: 1.4rem; }
.co-items { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1rem; }
.co-item { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: baseline; font-size: .92rem; }
/* Summary rows with a product thumbnail (adds a 4th leading column). */
.co-item--thumb { grid-template-columns: auto auto 1fr auto; align-items: center; }
.co-item__img { width: 42px; height: 42px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }

/* Collapsed codes drawer — coupon/gift-card/points live behind one line
   instead of stacking three input rows before the totals. */
.co-codes { margin: .6rem 0; }
.co-codes summary { cursor: pointer; color: var(--muted); font-size: .9rem; padding: .4rem 0; list-style: none; user-select: none; }
.co-codes summary::-webkit-details-marker { display: none; }
.co-codes summary::before { content: "▸ "; color: var(--muted-2); }
.co-codes[open] summary::before { content: "▾ "; }
.co-codes summary:hover { color: var(--text); }
.co-qty { color: var(--muted); font-weight: 600; }
.co-name { color: var(--text); }
.co-price { font-family: var(--display); font-weight: 600; white-space: nowrap; }
.co-empty { color: var(--muted); }
.co-empty a { color: var(--red-glow); }
.co-freeship {
  margin-bottom: .8rem; padding: .6rem .8rem; border-radius: 10px;
  background: rgba(244,244,246,.12); border: 1px solid rgba(244,244,246,.35);
  color: var(--muted); font-size: .85rem;
}
.co-freeship strong { color: #fff; }
/* #e4e4ea on this panel is 4.14:1 — under AA for the one link that sends a
   shopper back to add the item that earns the free shipping. */
.co-freeship a { color: #a9b892; text-decoration: underline; }
/* Opt-in shipping protection add-on */
.co-insure {
  display: flex; align-items: center; gap: .7rem; cursor: pointer;
  margin: 0 0 1rem; padding: .75rem .85rem; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line);
  transition: border-color .2s ease, background .2s ease;
}
.co-insure:hover { border-color: var(--steel, #e4e4ea); }
.co-insure:has(input:checked) { border-color: var(--steel, #e4e4ea); background: rgba(244,244,246,.12); }
.co-insure input { width: 18px; height: 18px; flex: none; accent-color: var(--steel, #e4e4ea); cursor: pointer; }
.co-insure__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.co-insure__title { display: flex; align-items: center; gap: .4rem; color: var(--text); font-weight: 600; font-size: .92rem; }
.co-insure__title svg { color: var(--steel, #e4e4ea); flex: none; }
.co-insure__body small { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.co-insure__price { margin-left: auto; align-self: flex-start; color: var(--text); font-weight: 700; font-size: .92rem; white-space: nowrap; }
.co-totals { border-top: 1px solid var(--line); padding-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.co-row { display: flex; justify-content: space-between; color: var(--muted); font-size: .92rem; }
.co-row strong { color: var(--text); }
.co-row--total { border-top: 1px solid var(--line); margin-top: .3rem; padding-top: .7rem; font-size: 1.1rem; }
.co-row--total strong { font-family: var(--display); font-size: 1.35rem; }
/* Tabular figures so the live total doesn't jitter when coupon/tax/gift re-renders. */
.co-row strong, .co-price, .cart__row strong, .co-stickybar__total strong { font-variant-numeric: tabular-nums; }
.checkout__form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.checkout__note { color: var(--muted-2); font-size: .82rem; margin-top: .9rem; text-align: center; }
.checkout__assure { color: var(--text); font-size: .82rem; font-weight: 600; margin-top: .5rem; text-align: center; line-height: 1.5; }
/* Was style="color:inherit" on the returns link — identical computed colour to
   the global `a { color: inherit }`, but now a theme can actually reach it. */
.checkout__assure a { color: inherit; }
.checkout__note code { background: var(--surface-2); padding: .1rem .3rem; border-radius: 4px; }
.checkout__back { display: inline-block; margin-top: 1rem; color: var(--muted); font-size: .9rem; }
.checkout__back:hover { color: var(--red-glow); }

/* Express checkout: the two-tap lane above the form (Stripe collects the address). */
.co-express { max-width: 560px; margin: 0 auto 1.1rem; text-align: center; }
.co-express__note { color: var(--muted); font-size: .82rem; margin-top: .55rem; line-height: 1.45; }
.co-divider {
  display: flex; align-items: center; gap: .9rem; max-width: 560px; margin: 0 auto 1.4rem;
  color: var(--muted-2); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
}
.co-divider::before, .co-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Last-minute add-on (order bump) in the order summary. */
.co-bump {
  display: flex; align-items: center; gap: .8rem;
  margin: 0 0 1rem; padding: .75rem .85rem; border-radius: 10px;
  background: var(--bg-2); border: 1px dashed var(--line);
}
.co-bump__media { flex: none; }
.co-bump__media img { width: 52px; height: 40px; object-fit: cover; border-radius: 8px; display: block; }
.co-bump__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; font-size: .88rem; }
.co-bump__body strong { color: var(--text); }
.co-bump__body span { color: var(--muted); font-size: .82rem; }
.co-bump__body em { color: var(--steel, #e4e4ea); font-style: normal; font-weight: 600; }
.co-bump__add { margin-left: auto; flex: none; padding: .5rem .9rem; font-size: .85rem; white-space: nowrap; }
.co-bump__done { color: var(--steel, #e4e4ea); font-size: .9rem; }

/* Inline coupon nudge under the discount box. */
.co-coupon__hint { color: var(--muted); font-size: .82rem; margin: -.2rem 0 .8rem; }
.co-coupon__use {
  background: var(--surface-2); border: 1px dashed var(--steel, #e4e4ea); border-radius: 6px;
  color: var(--steel, #e4e4ea); font-weight: 700; font-size: .82rem; letter-spacing: .04em;
  padding: .1rem .45rem; cursor: pointer;
}
.co-coupon__use:hover { background: rgba(244,244,246,.15); }

.co-success { text-align: center; max-width: 620px; margin: 0 auto; }
.co-success__badge {
  width: 64px; height: 64px; border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  color: var(--ok); font-size: 2rem; display: grid; place-items: center; margin: 1rem auto;
  border: 2px solid color-mix(in srgb, var(--ok) 50%, transparent);
}
.co-success__sub { color: var(--muted); margin-bottom: 1.5rem; }
.co-success__card { text-align: left; margin: 0 auto 1.1rem; max-width: 460px; }
/* Help + returns promise on the receipt page — visible without scrolling hunt. */
.co-success__help { font-size: .85rem; line-height: 1.6; color: var(--muted); border-top: 1px solid var(--line); padding-top: .8rem; margin-top: .9rem; }
.co-success__help a { color: var(--red-glow, #8af1ff); }
/* Success-page cards — everything rides the theme tokens so North/Aurora
   restyle automatically (these were inline dark-theme-only styles). */
.co-success__card h3 { margin: 0 0 .4rem; }
.co-success__card > p { margin: 0 0 .85rem; color: var(--muted); }
.co-success__card > p small { display: block; margin-top: .4rem; }
.co-next { display: flex; gap: .9rem; flex-wrap: wrap; }
.co-next:not(:last-child) { margin-bottom: .9rem; }
.co-next__step { flex: 1; min-width: 140px; }
.co-next__step small { display: block; color: var(--muted); }
.co-cardrow { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; padding: .55rem 0; border-top: 1px solid var(--line); }
.co-cardrow code { flex: 1; min-width: 200px; font-size: 1.1rem; letter-spacing: .06em; font-weight: 700; }
.co-cardrow span { color: var(--muted); }
.co-addon { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; padding: .7rem 0; border-top: 1px solid var(--line); }
.co-addon img { width: 56px; height: 42px; object-fit: cover; border-radius: 8px; }
.co-addon__body { flex: 1; min-width: 160px; }
.co-addon__body > strong { display: block; }
.co-addon__deal { color: var(--muted); font-size: .9rem; }
.co-addon__deal strong { color: var(--ok, var(--steel)); }
.co-addon select, .co-ref input {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: .45rem .55rem; font-family: inherit;
}
.co-ref { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.co-ref input { flex: 1; min-width: 230px; padding: .55rem .7rem; }

@media (max-width: 760px) {
  .checkout__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Customer "My Orders"
   ============================================================ */
.acct-email:hover { color: #fff; }
.myorders { display: flex; flex-direction: column; gap: 1rem; max-width: 720px; }
.myorder { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; }
.myorder__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.myorder__head strong { font-family: var(--display); }
.myorder__items { display: flex; flex-direction: column; gap: .5rem; padding: .9rem 0; }
.myorder__foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: .8rem; }
.myorder__foot strong { font-family: var(--display); font-size: 1.2rem; }

/* ============================================================
   Mobile refinements
   ============================================================ */
.filters-toggle { display: none; margin-right: auto; padding: .55rem 1rem; font-size: .85rem; }
.shop__bar { gap: .6rem; }

@media (max-width: 760px) {
  :root { --radius: 12px; }
  .header__inner { gap: .8rem; padding: .7rem 1rem; }
  .logo__text { display: none; }              /* keep the ORBIX mark, save space */
  .header__actions { gap: .15rem; }
  .icon-btn { width: 44px; height: 44px; }   /* never below the 44px minimum */
  .section { padding: 2.6rem 1rem; }
  .section__head { margin-bottom: 1.4rem; }
  .hero { padding: 3rem 1rem 2.5rem; }
  .hero__stats { gap: 1.2rem 1.6rem; margin-top: 2rem; }

  /* tighter product cards */
  .card__body { padding: .8rem; gap: .35rem; }
  .card__name { font-size: .9rem; min-height: 2.4em; }
  .card__price strong { font-size: 1.15rem; }
  .card__rating small { font-size: .72rem; }
  .card__quick { display: none; }             /* tap the card to open the product */
  .btn { padding: .8rem 1.2rem; }

  /* iOS Safari auto-zooms any focused input under 16px — keep every
     purchase-path field at 16px so tapping Email or a coupon at checkout
     never lurches the page zoom mid-purchase. */
  .field input, .field select, .field textarea, .co-coupon input,
  .pd-notify__row input, .shop__sort select, .listing__sort select { font-size: 16px; }

  /* comfortable tap targets in the cart (40px minimum touch size) */
  .qty button { width: 40px; height: 40px; font-size: 1.15rem; }
  .qty span { min-width: 28px; }
  .cart-item__rm { font-size: .82rem; padding: .65rem .5rem; min-height: 40px; }
  .cart-item__ctrl { gap: .65rem; }
  .cart { width: 100%; }
  .checkout__summary, .checkout__form { padding: 1.1rem; }

  /* …and everywhere else on the buy path (audited at iPhone width: these all
     measured under the 40px touch floor and sat next to competing targets).
     NOTE: .swatch/.card__size/.cart-suggest__add overrides live in the
     end-of-file mobile block — their base rules are defined AFTER this line
     and would win the cascade here. */
  .opt-btn { padding: .7rem .9rem; min-height: 44px; }
  .opt__guide { padding: .5rem .35rem; margin-left: .35rem; }
  .pd-wish { padding: .5rem .6rem; }
  .co-coupon__use { display: inline-flex; align-items: center; min-height: 40px; padding: .45rem .8rem; }
  .modal__close, .pd-sizeguide__close, .crewpop__close { width: 44px; height: 44px; }

  /* The PDP sticky buy bar replaces the bottom nav while it's up — before
     this it merely COVERED the nav (z 160 vs 150), so a muscle-memory tap on
     "Cart" silently hit Add to Cart instead. */
  body.has-pdsticky .mobilebar { display: none; }
}

@media (max-width: 380px) {
  /* Keep products 2-up even on tiny phones — more to browse = more to buy. */
  .cat-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Coupons · order fulfillment
   ============================================================ */
.co-coupon { display: flex; gap: .5rem; margin: 1rem 0 .3rem; }
/* min-width:0 — otherwise the input's min-content width shoves the Apply
   button off-screen on 320px-wide phones. */
.co-coupon input { flex: 1; min-width: 0; background: var(--bg-2); border: 1px solid var(--line); color: var(--text); padding: .65rem .8rem; border-radius: 9px; font-family: inherit; outline: none; text-transform: uppercase; }
.co-coupon input:focus { border-color: var(--red); }
.co-coupon .btn { padding: .65rem 1.1rem; }
.co-coupon__msg { font-size: .82rem; min-height: 1.1em; margin-bottom: .5rem; }
.co-coupon__msg.ok { color: var(--ok); }
.co-coupon__msg.warn { color: var(--warn); }
.co-discount { color: var(--ok); }

.tag--info { background: rgba(54,194,255,.16); color: #36c2ff; }

.order-fulfil { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
/* skin comes from the shared admin input recipe (see admin toolbars) */
.order-fulfil input { flex: 1; min-width: 120px; }
.order-fulfil .btn { padding: .55rem 1.1rem; }
.order-fulfil__hint { color: var(--muted-2); font-size: .76rem; margin-top: .5rem; }
.myorder__track { color: var(--muted); font-size: .85rem; margin-top: .6rem; }

/* ----- Admin: edit an order (line quantities, address, money) ----- */
.order-edit { margin-top: .75rem; border-top: 1px solid var(--line); }
.order-edit__toggle { cursor: pointer; padding: .7rem 0 .2rem; font-weight: 700; font-size: .9rem; color: var(--red-glow); list-style: none; }
.order-edit__toggle::-webkit-details-marker { display: none; }
.order-edit[open] .order-edit__toggle { margin-bottom: .4rem; }
.order-edit__form { display: flex; flex-direction: column; gap: .8rem; padding: .4rem 0 .2rem; }
.order-edit__lines { display: flex; flex-direction: column; gap: .4rem; }
.order-edit__line { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.order-edit__name { flex: 1; min-width: 140px; font-size: .9rem; }
.order-edit__each { color: var(--muted); font-size: .82rem; }
.order-edit__qtylabel { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--muted); }
.order-edit__qty { width: 4.5rem; background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  padding: .4rem .5rem; border-radius: 8px; font-family: inherit; }
.order-edit__qty:focus { outline: none; border-color: var(--red); }
.order-edit__hint { color: var(--muted-2); font-size: .76rem; margin: 0; }
.order-edit__grid, .order-edit__money {
  display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.order-edit__money { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.order-edit__opts { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .84rem; color: var(--muted); }
.order-edit__opts label { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.order-edit__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: .7rem; }
.order-edit__preview { font-size: .95rem; }
.order-edit__preview .oe-total { color: var(--text); font-size: 1.1rem; }
.order-edit__preview .oe-sub { color: var(--muted); font-style: normal; font-size: .82rem; margin-left: .3rem; }
.order-edit input:disabled { opacity: .5; }

/* ----- Admin: Revenue Split (P&L + 3-way split) ----- */
.rev-pl { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: .5rem 0 .8rem; }
.rev-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .6rem 1rem; border-bottom: 1px solid var(--line); font-size: .95rem; }
.rev-row:last-child { border-bottom: 0; }
.rev-row em { color: var(--muted); font-style: normal; font-size: .82rem; }
.rev-row--sub, .rev-row--fee { color: var(--muted); padding-left: 1.6rem; font-size: .9rem; }
.rev-neg { color: var(--red-glow); }
.rev-row--total { background: rgba(255,255,255,.02); font-weight: 600; }
.rev-row--net { background: rgba(61,232,255,.12); border-top: 1px solid var(--amber); }
.rev-row--net strong { color: var(--amber); font-size: 1.25rem; }
.rev-note { color: var(--muted); font-size: .82rem; line-height: 1.5; margin: 0 0 1.4rem; }
.rev-note--warn { color: var(--red-glow); }
.rev-h2 { margin: 1rem 0 .6rem; }
.rev-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; }
.rev-share { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; text-align: center;
  background: rgba(255,255,255,.02); display: flex; flex-direction: column; gap: .25rem; }
.rev-share__name { color: var(--muted); font-size: .85rem; }
.rev-share__amt { font-family: var(--display, inherit); font-size: 1.6rem; color: var(--text); }
.rev-share__pct { color: var(--muted); font-size: .78rem; }
.rev-config { margin-top: 1.2rem; border-top: 1px solid var(--line); }
.rev-config__toggle { cursor: pointer; padding: .8rem 0 .3rem; font-weight: 700; font-size: .9rem; color: var(--red-glow); list-style: none; }
.rev-config__toggle::-webkit-details-marker { display: none; }
.rev-config__form { display: flex; flex-direction: column; gap: .7rem; padding: .4rem 0 .3rem; }
.rev-config__row { display: grid; grid-template-columns: 2fr 1fr; gap: .7rem; }
.rev-config__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Admin catalog cleanup */
.admin-cleanup { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.admin-cleanup .btn { font-size: .82rem; padding: .55rem 1rem; }
.admin-danger-btn { color: #ff8a80; border-color: rgba(61,232,255,.4); }
.admin-danger-btn:hover { background: rgba(61,232,255,.12); border-color: var(--red); color: #fff; }

/* Quick import (paste URL → auto-fill on Add Product) */
.quick-import {
  background: linear-gradient(120deg, rgba(61,232,255,.10), transparent);
  border: 1px solid rgba(61,232,255,.35); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; margin-bottom: 1.6rem; max-width: 820px;
}
.quick-import__head { font-family: var(--display); font-weight: 700; margin-bottom: .7rem; }
.quick-import__row { display: flex; gap: .6rem; }
.quick-import__row input {
  flex: 1; background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  padding: .75rem .9rem; border-radius: 9px; font-family: inherit; font-size: .95rem; outline: none;
}
.quick-import__row input:focus { border-color: var(--red); }
.quick-import__msg { font-size: .82rem; color: var(--muted); margin-top: .6rem; }
.quick-import__msg.ok { color: #4ade80; }
.quick-import__msg.warn { color: #ff8a80; }
@media (max-width: 620px) { .quick-import__row { flex-direction: column; } }

/* Product page: material & care notes */
.pd-notes { color: var(--muted); font-size: .9rem; margin-top: .7rem; line-height: 1.5; }

/* Product page: general care tips (keyboards, mice, mousepads) */
.pd-care { margin-top: 1rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 10px; }
.pd-care__list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; }
.pd-care__list li { font-size: .88rem; color: var(--muted); line-height: 1.45; }
.pd-care__list strong { color: var(--text, inherit); }
.pd-reviews { max-width: var(--max); }
.pd-reviews__avg { color: var(--amber); font-weight: 600; margin-top: .3rem; }
.pd-reviews__note { color: var(--muted); }
.pd-reviews__note a { color: var(--red-glow); }
.review-form { max-width: 520px; margin: 0 0 1.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; }
.review-form h3 { font-family: var(--display); margin-bottom: .8rem; }
.review-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.2rem; }
@media (max-width: 700px) { .review-list { grid-template-columns: 1fr; } }

/* ============================================================
   v2 — visual identity, depth & mobile polish
   ============================================================ */

/* subtle carbon texture so it doesn't read flat/templated.
   z-index:-1 keeps it behind all content WITHOUT lifting elements (which had
   clobbered the sticky header's z-index and hid the mobile menu). */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .5;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px),
    radial-gradient(1200px 600px at 100% -10%, rgba(61,232,255,.06), transparent 60%);
}

/* ---------- Logo ---------- */
.logo { display: flex; align-items: center; gap: .55rem; }
.logo__emblem { height: 36px; width: auto; flex: none; filter: drop-shadow(0 4px 10px rgba(244,244,246,.35)); }
.logo__word { display: flex; flex-direction: column; line-height: 1; }
.logo--footer .logo__emblem { height: 32px; }

/* ---------- Buttons (crisper, less gradient-mush) ---------- */
.btn { border-radius: 9px; letter-spacing: .03em; }
.btn--primary {
  background: #3de8ff;
  background-image: linear-gradient(180deg, #8af1ff, #9c4c2a);
  box-shadow: 0 6px 18px -6px rgba(61,232,255,.6), inset 0 1px 0 rgba(255,255,255,.18); color: var(--on-accent); }
.btn--primary:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-2px); }

/* ---------- Section eyebrow tick ---------- */
.section__eyebrow { display: inline-flex; align-items: center; gap: .5rem; }
.section__eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--red); display: inline-block; border-radius: 2px; color: var(--on-accent); }
.section__head--center .section__eyebrow { justify-content: center; }

/* ---------- Hero accent ---------- */
.hero { border-bottom: 1px solid var(--line); }
.hero::after {
  content: ""; position: absolute; right: -8%; top: 0; bottom: 0; width: 52%;
  background: linear-gradient(115deg, transparent 0, rgba(61,232,255,.07) 42%, transparent 72%);
  transform: skewX(-12deg); pointer-events: none; z-index: 0;
}
.hero__content { z-index: 2; }

/* ---------- Product cards (premium hover) ---------- */
.card { border-radius: 16px; position: relative; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, var(--red), var(--red-glow)); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; z-index: 3; color: var(--on-accent); }
.card:hover, .card:focus-within { transform: translateY(-6px); box-shadow: 0 26px 54px -26px rgba(0,0,0,.95), 0 0 0 1px rgba(61,232,255,.22); }
.card:hover::after, .card:focus-within::after { transform: scaleX(1); }

/* ---------- Mobile bottom nav ---------- */
.mobilebar { display: none; }
@media (max-width: 760px) {
  /* Mobile app-shell. <body> is a fixed-height flex column; the page scrolls
     inside #appwrap, and the bottom nav is the last flex row — a normal in-flow
     element, NOT position:fixed. An iOS fixed bar detaches and "rides up"
     mid-screen when Safari evicts its compositing layer under GPU memory
     pressure (the heavy parallax hero used to trigger exactly that). A static
     flex row can't detach because there's no fixed positioning to break.
     #appwrap owning the scroll also matches what site.js already listens to. */
  html { height: 100%; }
  body {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;           /* fallback for browsers without dvh */
    height: 100dvh;          /* dynamic viewport height tracks the address bar */
    /* iOS Safari does not always resolve dvh against the CURRENTLY visible
       viewport as its toolbars collapse and expand, which left the shell
       shorter than the screen — a band of dead space under the bottom nav
       with the nav floating above it. The inline bootstrap in _Layout
       measures the real viewport and sets --app-vh; dvh above still applies
       when JS hasn't run. */
    height: var(--app-vh, 100dvh);
    overflow: hidden;        /* body itself never scrolls; #appwrap does */
  }
  .appwrap {
    flex: 1 1 auto;
    min-height: 0;           /* let the flex child shrink so it can scroll */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-padding-top: 110px;
    /* Fixed bottom bars (checkout sticky pay, PDP sticky add) sit over the
       last ~80px — without this, browser validation scrolls the invalid
       field exactly behind the bar and checkout looks frozen. */
    scroll-padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }
  .mobilebar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    flex: 0 0 auto; z-index: 150;
    background: rgba(10,10,14,.97); backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
    padding: .3rem .2rem calc(.3rem + env(safe-area-inset-bottom));
  }
  .mobilebar__item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: .4rem 0; color: var(--muted); font-size: .62rem; font-weight: 600;
    letter-spacing: .02em; background: none; border: none; text-transform: none;
  }
  /* :focus-visible, not :focus — a tapped tab must not keep the active color */
  .mobilebar__item:active, .mobilebar__item:focus-visible { color: #fff; }
  .mobilebar__item.is-active { color: #fff; }
  .mobilebar__item.is-active svg { color: var(--red-glow, #8af1ff); }
  .mobilebar__item.is-active::before {
    content: ""; position: absolute; top: 0; width: 26px; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--red-glow, #8af1ff);
  }
  .mobilebar__item { position: relative; }
  /* Cart tab badge — auto-themes via .cart-count; hidden attr must win over
     .cart-count's own display:grid */
  .mobilebar .cart-count { position: absolute; top: 2px; left: calc(50% + 6px); right: auto; transform: none; }
  .mobilebar .cart-count[hidden] { display: none; }
  .toast { bottom: calc(78px + env(safe-area-inset-bottom)); }

  /* tighten the header now that the bottom bar carries nav */
  .logo__emblem { height: 30px; }
  .hero::after { display: none; }
}

/* ============================================================
   Mobile fixes — iOS button chrome, sticky hover, header declutter
   ============================================================ */
/* Remove iOS Safari's default rounded button box + tap highlight */
.icon-btn, .nav-toggle, .mobilebar__item, .btn, button {
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* On touch devices, don't let :hover backgrounds "stick" after a tap */
@media (hover: none) {
  .icon-btn:hover { background: none; color: var(--text); }
}

@media (max-width: 760px) {
  /* the bottom bar already provides Search/Cart/Account — keep the header lean */
  #searchToggle { display: none; }
  .header__inner { gap: .6rem; }
  .header__actions { gap: .1rem; }
  /* a touch more clearance above the iPhone home indicator */
  .mobilebar { padding-bottom: calc(.45rem + env(safe-area-inset-bottom)); }
}

/* ============================================================
   Fix: empty toast peeking above bottom bar + mobile header align
   ============================================================ */
/* The toast is grey/rounded; relying only on translateY left it visible above
   the bottom nav. Fully hide it unless .show is set. */
.toast {
  opacity: 0; visibility: hidden;
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, visibility .25s ease;
}
.toast.show { opacity: 1; visibility: visible; }

/* ============================================================
   Admin low-stock alert banner
   ============================================================ */
.admin-stockalert {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 0 0 1.2rem; padding: .7rem 1rem;
  background: rgba(255,170,0,.08); border: 1px solid rgba(255,170,0,.35);
  border-left: 3px solid #ffaa00; border-radius: 10px;
  color: #ffd479; font-size: .9rem;
}
.admin-stockalert strong { color: #fff; font-weight: 700; }

/* ============================================================
   Join-the-crew popup (email capture, shown once)
   ============================================================ */
.crewpop {
  position: fixed; inset: 0; z-index: 420;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.crewpop.show { opacity: 1; pointer-events: auto; }
.crewpop__backdrop { position: absolute; inset: 0; background: rgba(12,10,8,.62); backdrop-filter: blur(3px); }
.crewpop__card {
  position: relative; width: min(420px, calc(100vw - 2.2rem));
  background: linear-gradient(165deg, #221d18, #0a0a0c);
  border: 1px solid rgba(244,244,246,.35); border-radius: 18px;
  padding: 1.9rem 1.7rem 1.6rem; text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  transform: translateY(14px); transition: transform .25s ease;
}
.crewpop.show .crewpop__card { transform: translateY(0); }
.crewpop__eyebrow { font-size: .72rem; letter-spacing: .18em; color: var(--steel, #e4e4ea); font-weight: 700; margin-bottom: .4rem; }
.crewpop__card h3 { font-family: var(--display); font-size: 1.65rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .45rem; color: #fff; }
.crewpop__card > p { color: var(--muted); font-size: .92rem; line-height: 1.5; margin-bottom: 1.1rem; }
.crewpop__form { display: flex; flex-direction: column; gap: .6rem; }
.crewpop__form input {
  width: 100%; padding: .8rem 1rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06);
  color: #fff; font-size: 1rem; /* 16px floor — under it iOS auto-zooms on focus */
}
.crewpop__form input:focus { outline: none; border-color: var(--steel, #e4e4ea); }
.crewpop__close {
  position: absolute; top: .5rem; right: .55rem;
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px;
  background: none; border: none; color: var(--muted); font-size: 1.05rem;
  cursor: pointer; line-height: 1;
}
.crewpop__close:hover { color: #fff; background: rgba(255,255,255,.07); }
.crewpop__no {
  margin-top: .4rem; background: none; border: none; padding: .6rem .8rem;
  color: var(--muted-2); font-size: .8rem; cursor: pointer; text-decoration: underline;
}
.crewpop__no:hover { color: var(--muted); }

/* Size guide link/button beside the size picker */
.opt__guide {
  margin-left: .6rem; font-size: .78rem; font-weight: 500;
  color: var(--steel, #e4e4ea); text-decoration: underline; text-underline-offset: 3px;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.opt__guide:hover { color: #8af1ff; }

.pd-sizeguide-link { margin: .2rem 0 1rem; }

/* ORBIX Points loyalty panel (account page) */
.trailpoints {
  background: linear-gradient(135deg, rgba(244,244,246,.14), rgba(61,232,255,.10));
  border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.4rem; margin-bottom: 1.2rem;
}
.trailpoints__eyebrow { margin: 0; font-size: .72rem; letter-spacing: .14em; color: var(--steel); }
.trailpoints__balance { margin: .25rem 0 .1rem; font-size: 1.1rem; }
.trailpoints__balance strong { font-size: 1.8rem; }
.trailpoints__sub { margin: 0; font-size: .85rem; color: var(--muted); }
.trailpoints__track {
  height: 8px; border-radius: 99px; background: rgba(255,255,255,.08);
  overflow: hidden; margin: 1rem 0 .4rem;
}
.trailpoints__fill { height: 100%; background: var(--steel); border-radius: 99px; }
.trailpoints__next { margin: 0 0 .4rem; font-size: .82rem; color: var(--muted); }
.trailpoints__tiers { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.trailpoints__tiers .btn { font-size: .8rem; padding: .55rem 1rem; }
.trailpoints__codes { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.trailpoints__codes-label { margin: 0 0 .6rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.trailpoints__code { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .5rem; }
.trailpoints__code code {
  font-size: .95rem; font-weight: 700; letter-spacing: .06em; color: var(--text);
  background: rgba(255,255,255,.06); border: 1px dashed var(--steel); border-radius: 7px; padding: .3rem .6rem;
}
.trailpoints__code-meta { font-size: .8rem; color: var(--muted); }
.trailpoints__use { font-size: .76rem; padding: .4rem .8rem; }

/* Field Journal (blog) */
.journal-empty {
  grid-column: 1 / -1; text-align: center; color: var(--text); font-size: 1.05rem;
  padding: 2.4rem 1rem; border: 1px dashed var(--line); border-radius: 16px; background: rgba(127,127,127,.04);
}
.journal-empty a { color: var(--red-glow); font-weight: 700; }
.journal-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.4rem;
}
.journal-card {
  display: flex; flex-direction: column; background: var(--card, rgba(255,255,255,.03));
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  text-decoration: none; color: inherit; transition: transform .18s ease, border-color .18s ease;
}
.journal-card:hover { transform: translateY(-3px); border-color: var(--steel); }
.journal-card__media { aspect-ratio: 16/9; overflow: hidden; }
.journal-card__media img { width: 100%; height: 100%; object-fit: cover; }
.journal-card__body { padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.journal-card__date { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.journal-card__title { margin: 0; font-size: 1.2rem; line-height: 1.25; }
.journal-card__excerpt { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--muted); }
.journal-card__read { margin-top: .3rem; font-size: .85rem; font-weight: 700; color: var(--steel); }

.journal-article { max-width: 720px; margin: 0 auto; padding: 1rem 0 2rem; }
.journal-article__head { margin: 1rem 0 1.5rem; }
.journal-article__date { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.journal-article__title { font-size: 2.1rem; line-height: 1.15; margin: .5rem 0 .6rem; }
.journal-article__lede { font-size: 1.15rem; line-height: 1.5; color: var(--muted); margin: 0; }
.journal-article__cover { margin: 1.5rem 0; border-radius: 14px; overflow: hidden; }
.journal-article__cover img { width: 100%; display: block; }
.journal-article__body { font-size: 1.05rem; line-height: 1.75; }
.journal-article__body h3 { font-size: 1.35rem; margin: 1.8rem 0 .6rem; }
.journal-article__body p { margin: 0 0 1.1rem; }
.journal-article__body a { color: var(--steel); text-decoration: underline; text-underline-offset: 3px; }
.journal-article__cta {
  margin: 2.5rem 0 1rem; padding: 1.6rem; text-align: center;
  background: linear-gradient(135deg, rgba(244,244,246,.14), rgba(61,232,255,.10));
  border: 1px solid var(--line); border-radius: 14px;
}
.journal-article__cta h3 { margin: 0 0 .3rem; font-size: 1.3rem; }
.journal-article__cta p { margin: 0 0 1rem; color: var(--muted); }
.journal-more { margin-top: 2.5rem; }

/* Size guide modal */
.pd-sizeguide {
  position: fixed; inset: 0; z-index: 2100; display: none;
  align-items: center; justify-content: center; padding: 4vw;
}
.pd-sizeguide.open { display: flex; }
.pd-sizeguide__backdrop {
  position: absolute; inset: 0; background: rgba(4,4,6,.78); backdrop-filter: blur(5px);
}
.pd-sizeguide__card {
  position: relative; z-index: 1; width: 100%; max-width: 540px;
  max-height: 88vh; overflow-y: auto; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 14px; padding: 1.6rem 1.5rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.pd-sizeguide__close {
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px;
  border-radius: 50%; font-size: 1.1rem; color: var(--text); cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
}
.pd-sizeguide__title { margin: 0 0 1rem; font-size: 1.25rem; }
.pd-sizeguide__tablewrap { overflow-x: auto; margin-bottom: 1.1rem; }
.pd-sizeguide__table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pd-sizeguide__table th, .pd-sizeguide__table td {
  padding: .55rem .6rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.pd-sizeguide__table thead th {
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.pd-sizeguide__table tbody th { font-weight: 700; color: var(--red); }
.pd-sizeguide__subhead {
  margin: .2rem 0 .4rem; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.pd-sizeguide__howto { margin: 0 0 1rem; padding-left: 1.1rem; }
.pd-sizeguide__howto li { font-size: .88rem; line-height: 1.5; margin-bottom: .3rem; color: var(--text); }
.pd-sizeguide__note { font-size: .9rem; line-height: 1.55; color: var(--muted); margin: 0 0 .9rem; }
.pd-sizeguide__guarantee {
  font-size: .85rem; line-height: 1.5; color: var(--text); margin: 0;
  padding: .7rem .9rem; background: rgba(255,255,255,.04);
  border: 1px solid var(--line); border-radius: 9px;
}
.pd-sizeguide__more { margin: .8rem 0 0; font-size: .85rem; }
.pd-sizeguide__more a { color: var(--red-glow); }

/* ============================================================
   Full size-guide page (/page/sizing) — shares the modal's table
   styles (.pd-sizeguide__table) so both surfaces + themes match.
   ============================================================ */
.sizeguide { max-width: 760px; }
.sg-lede { color: var(--muted); font-size: 1.02rem; line-height: 1.75; margin: 0 0 1.4rem; }
.sg-lede strong { color: var(--text); }
.sg-toolbar {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: .8rem; margin-bottom: .4rem;
}
.sg-jump { margin-bottom: 0; }
.sg-units {
  display: inline-flex; border: 1px solid var(--line); border-radius: 999px;
  overflow: hidden; flex: none;
}
.sg-units__btn {
  padding: .4rem .95rem; font-size: .82rem; font-weight: 700; letter-spacing: .03em;
  background: none; border: none; color: var(--muted); cursor: pointer;
}
.sg-units__btn.is-on { color: #fff; background: rgba(61,232,255,.2); }
/* Unit toggle: each measurement renders both ways, data-units picks one. */
.sizeguide[data-units="in"] .u-cm { display: none; }
.sizeguide[data-units="cm"] .u-in { display: none; }
.sg-heading {
  font-family: var(--display); color: var(--text); font-size: 1.35rem;
  margin: 2.2rem 0 .8rem;
}
.sg-fit { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.sg-fit__card {
  display: grid; gap: .35rem; padding: .9rem 1rem;
  border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.03);
}
.sg-fit__card strong { color: var(--text); font-size: .95rem; }
.sg-fit__card span { color: var(--muted); font-size: .87rem; line-height: 1.55; }
.sg-section { scroll-margin-top: 90px; }
.sg-howto { margin: .9rem 0 0; padding-left: 1.1rem; }
.sg-howto li, .sg-steps li { font-size: .92rem; line-height: 1.6; margin-bottom: .4rem; color: var(--text); }
.sg-steps { margin: 1rem 0 0; padding-left: 1.25rem; }
.sg-note { color: var(--muted); font-size: .95rem; line-height: 1.65; margin: .8rem 0 0; }
.sg-note strong { color: var(--text); }
.sg-cta {
  margin-top: 2.4rem; padding: 1.2rem 1.3rem; border: 1px solid var(--line);
  border-radius: 12px; background: rgba(255,255,255,.04);
}
.sg-cta p { color: var(--muted); font-size: .95rem; line-height: 1.65; margin: 0; }
.sg-cta strong { color: var(--text); }
.sg-cta a { color: var(--red-glow); }
.sg-cta__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem !important; }
.sg-cta__actions .btn { text-decoration: none; }
@media (max-width: 640px) {
  .sg-fit { grid-template-columns: 1fr; }
  .sg-toolbar { flex-direction: column-reverse; }
}

/* ============================================================
   Accessibility: screen-reader-only utility. Visually hidden but
   still announced by assistive tech (used for off-screen labels
   and context like "(opens in new tab)").
   ============================================================ */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
/* Becomes visible when focused (e.g. a skip link styled as .sr-only). */
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: static !important;
  width: auto; height: auto;
  margin: 0; overflow: visible; clip: auto; white-space: normal;
}

/* ============================================================
   Accessibility: skip-to-content link (visible only on focus)
   ============================================================ */
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 500;
  padding: .65rem 1.1rem; border-radius: 10px;
  background: var(--red, #3de8ff); color: #fff; font-weight: 600;
  text-decoration: none; transition: top .2s ease;
}
.skip-link:focus { top: .75rem; }

/* ============================================================
   Back-to-top floating button
   ============================================================ */
.to-top {
  position: fixed; right: 1.1rem; bottom: 1.4rem; z-index: 140;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--red, #3de8ff); color: #fff; border: none;
  box-shadow: 0 8px 26px rgba(61,232,255,.4);
  cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: #8af1ff; color: var(--on-accent); }
.to-top svg { width: 22px; height: 22px; }
@media (max-width: 760px) {
  /* Hidden on phones: at 390px wide the floating button parks on top of the
     right product column's Add to Cart / wishlist and checkout's form fields —
     a mis-tap throws the shopper to the top of the page. Flick-scrolling
     covers the need; theme-north already hides it everywhere. */
  .to-top { display: none; }
}

@media (max-width: 760px) {
  /* push the header icons to the right edge so the menu isn't floating mid-bar */
  .header__actions { margin-left: auto; }
}

/* ============================================================
   Info/content pages
   ============================================================ */
.info-page { max-width: 820px; }
.info-body { color: var(--muted); font-size: 1.02rem; line-height: 1.75; }
.info-body p { margin-bottom: 1rem; }
.info-body h3 { font-family: var(--display); color: var(--text); font-size: 1.2rem; margin: 1.6rem 0 .5rem; }
.info-body a { color: var(--red-glow); }
.info-body a:hover { color: #fff; }
.info-body strong { color: var(--text); }

/* ============================================================
   Show full product photos (no cropping) on detail + modal
   ============================================================ */
.pd-main { background: radial-gradient(circle at 50% 40%, #17171d, #060607); }
.pd-main img { object-fit: contain; padding: 6px; }
.pd-thumb img { object-fit: contain; background: #060607; }
.modal__media { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, #16161c, #0a0a0d); }
.modal__media img { object-fit: contain; }
/* Same rule for the card grids and every product thumbnail: `contain` so a
   product shot is never cropped, on the dark product stage. Customer review
   photos & journal art keep `cover`. */
.card__media img { object-fit: contain; background: #0c0c10; }
.cart-item img,
.co-bump__media img,
.co-addon img,
.kitpick__media img,
.sr-thumb,
.pd-sticky__thumb { object-fit: contain; background: #0c0c10; }

/* Guides index */
.guides-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
@media (max-width: 700px) { .guides-grid { grid-template-columns: 1fr; } }

/* Auth links in the hamburger menu — mobile only (header icons cover desktop) */
.nav__authform { margin: 0; padding: 0; }
.nav__authform .nav__link { background: none; border: none; cursor: pointer; width: 100%; text-align: left; }
@media (min-width: 761px) { .nav__auth { display: none; } }
@media (max-width: 760px) { .nav__auth { color: var(--amber); } }

/* ============================================================
   Polish: mobile menu dropdown + focus states
   ============================================================ */
@media (max-width: 760px) {
  /* drop the underline hover animation inside the menu */
  .nav__link::after { display: none; }
}

/* A clear, consistent keyboard focus ring on every interactive element. Uses
   :focus-visible so it only appears for keyboard / assistive-tech users (not on
   mouse click), keeping the pointer experience clean while meeting WCAG 2.4.7.
   No forced border-radius: outlines wrap the element's own corners, so pills
   and round buttons keep their shape when focused. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, summary:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--red-glow); outline-offset: 2px;
}

/* ============================================================
   Accessibility: global reduced-motion safety net (WCAG 2.3.3 /
   2.2.2). Individual sections already gate their motion, but this
   catch-all neutralizes any animation/transition/auto-scroll for
   visitors who ask the OS to reduce motion — including the
   announcement marquee, hover lifts and reveal entrances.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Keep the looping announcement readable rather than parked at -50%. */
  .announce__track { transform: none !important; }
  html { scroll-behavior: auto !important; }
}

/* ============================================================
   Mobile menu drawer — a TOP-LEVEL element (outside the header) so the
   header's backdrop-filter can't trap its fixed positioning.
   ============================================================ */
.mobilemenu {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px);
  display: flex; flex-direction: column; align-items: stretch;
  background: var(--bg-2); border-left: 1px solid var(--line);
  box-shadow: -26px 0 60px -20px rgba(0,0,0,.9);
  transform: translateX(110%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  z-index: 1000; overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobilemenu.open { transform: translateX(0); }

.mobilemenu__head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.1rem; background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.mobilemenu__brand { display: inline-flex; align-items: center; gap: .5rem; }
.mobilemenu__brand svg, .mobilemenu__brand img { height: 28px; width: auto; }
.mobilemenu__close {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; font-size: 1.25rem; border-radius: 10px;
  color: var(--text); background: rgba(255,255,255,.05); border: 1px solid var(--line);
}

.mobilemenu__links { display: flex; flex-direction: column; padding: .25rem 0; }
.mobilemenu .nav__link {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: 1rem 1.25rem; width: 100%; text-align: left;
  font-size: 1.06rem; font-weight: 600; color: var(--text);
  text-transform: none; letter-spacing: .01em; background: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .15s ease, color .15s ease;
}
.mobilemenu a.nav__link::after {
  content: "›"; display: inline-block; position: static;
  width: auto; height: auto; background: none;
  color: var(--muted-2); font-size: 1.3rem; line-height: 1; font-weight: 400;
  transition: transform .15s ease, color .15s ease;
}
.mobilemenu .nav__link:hover,
.mobilemenu .nav__link:active { background: rgba(255,255,255,.05); }
.mobilemenu a.nav__link:hover::after,
.mobilemenu a.nav__link:active::after { transform: translateX(4px); color: var(--text); }
.mobilemenu .nav__link--admin { color: var(--red-glow, #8af1ff); }

/* Secondary "account" rows recede so the shop links read as primary, and the
   account block gets ONE clear divider above it — before Admin, or before the
   first account link when there's no Admin row. */
.mobilemenu .nav__auth,
.mobilemenu .nav__authform .nav__link { font-size: .96rem; font-weight: 500; color: var(--muted); }
.mobilemenu .nav__authform { width: 100%; margin: 0; }
.mobilemenu .nav__authform .nav__link::after { content: ""; }
.mobilemenu .nav__link--admin,
.mobilemenu .nav__link:not(.nav__auth):not(.nav__link--admin) + .nav__auth {
  margin-top: .45rem; padding-top: 1.15rem; border-top: 1px solid rgba(255,255,255,.12);
}

.mobilemenu__foot {
  margin-top: auto; padding: 1.1rem 1.2rem;
  border-top: 1px solid var(--line); color: var(--muted);
  font-size: .82rem; line-height: 1.5;
  display: flex; flex-direction: column; gap: .5rem;
}
.mobilemenu__foot a { color: var(--red-glow, #8af1ff); font-weight: 700; }
.mobilemenu__foot a, .mobilemenu__foot p { display: flex; align-items: center; gap: .5rem; margin: 0; }
.mobilemenu__foot svg { width: 16px; height: 16px; flex: none; }

/* Current-page indication: desktop shows the nav underline; the drawer shows a
   left accent bar (box-shadow, so there's no layout shift). */
.nav__link.is-active::after { width: 100%; }
.mobilemenu .nav__link.is-active {
  color: var(--text); background: rgba(255,255,255,.05);
  box-shadow: inset 3px 0 0 var(--red-glow, #8af1ff);
}
.mm-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 990; opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
.mm-backdrop.open { opacity: 1; visibility: visible; }

/* desktop: hide the drawer; mobile: hide the in-header nav row */
@media (min-width: 761px) { .mobilemenu, .mm-backdrop { display: none; } }
@media (max-width: 760px) { .nav { display: none; } }

/* Center the hamburger lines so it lines up with the cart/other icons */
.nav-toggle { align-items: center; justify-content: center; }

/* ============================================================
   SEO listing pages (/shop, /brand)
   ============================================================ */
.listing { padding-top: 1.4rem; }
.crumbs { font-size: .82rem; color: var(--muted); margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs span { color: var(--muted-2); }
.crumbs__here { color: var(--text); font-weight: 600; }

.listing__head { margin-bottom: 1.2rem; }
.listing__intro { color: var(--muted); max-width: 60ch; margin-top: .5rem; }

/* Shop trust / value strip — reassurance for first-time ad traffic */
.shop-trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.5rem;
  list-style: none; margin: 0 0 1.3rem; padding: .8rem 1rem;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255,255,255,.025); font-size: .85rem; color: var(--muted);
}
.shop-trust li { display: inline-flex; align-items: center; gap: .45rem; }
.shop-trust strong { color: var(--text); }
.shop-trust svg { width: 18px; height: 18px; color: var(--red-glow, #8af1ff); flex: none; }
.shop-trust__rating { color: var(--text); }
.shop-trust__rating .stars { color: #e8b06a; letter-spacing: .04em; }

/* Live "shopping now" FOMO pill — only rendered server-side when believable */
.shop-live {
  display: inline-flex; align-items: center; gap: .45rem;
  margin: 0 0 1rem; padding: .38rem .8rem; border-radius: 999px;
  background: rgba(61,232,255,.12); border: 1px solid rgba(61,232,255,.32);
  color: var(--text); font-size: .82rem; font-weight: 600;
}
.shop-live strong { color: var(--red-glow, #8af1ff); }
.shop-live__dot {
  width: 8px; height: 8px; border-radius: 50%; background: #37d67a; flex: none;
  animation: shoplive 1.8s ease-out infinite;
}
@keyframes shoplive {
  0% { box-shadow: 0 0 0 0 rgba(55,214,122,.55); }
  70% { box-shadow: 0 0 0 7px rgba(55,214,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(55,214,122,0); }
}
@media (prefers-reduced-motion: reduce) { .shop-live__dot { animation: none; } }

/* Product card: colour swatches + a tidy single-line brand. One sized dot for
   server spans and JS buttons alike (--sw carries the colour); cursor/hover
   affordance only on the homepage's clickable button variant. */
.card__swatches { display: flex; align-items: center; gap: .35rem; margin: .1rem 0; }
.card__swatch { width: 16px; height: 16px; border-radius: 50%; background: var(--sw, #888); border: 1px solid var(--line); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
button.card__swatch { cursor: pointer; position: relative; transition: transform .12s, border-color .15s; }
button.card__swatch::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; } /* 30px hit area */
button.card__swatch:hover { transform: scale(1.15); border-color: var(--muted); }
.card__swatch.is-on { border-color: var(--red); box-shadow: 0 0 0 2px rgba(61,232,255,.35); }
.card__swatch-more { font-size: .7rem; color: var(--muted); font-weight: 600; margin-left: .1rem; }
.card__brand { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
  .shop-trust { gap: .5rem 1.1rem; font-size: .8rem; padding: .7rem .85rem; }
}
/* Mobile shop: strip the above-the-fold clutter so the SHIRTS show instantly.
   Ad traffic loses interest fast, so the header collapses to a tight title +
   one swipeable trust line + one swipeable category row — products land in the
   first screen instead of three rows of chips and a boxed value strip. */
@media (max-width: 760px) {
  .section.listing { padding-top: .8rem; }
  .listing .crumbs { margin-bottom: .45rem; font-size: .8rem; }
  .listing .section__eyebrow { margin-bottom: .15rem; }
  .listing .section__title { font-size: clamp(1.45rem, 7vw, 1.9rem); }
  .listing__intro { display: none; }              /* value props live in the trust line below */
  .listing__head { margin-bottom: .55rem; }

  /* Trust strip → one tight, swipeable line (no box) to save vertical space */
  .shop-trust {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 0 1.1rem; padding: 0 0 .15rem; margin: 0 0 .65rem;
    border: 0; background: none; font-size: .78rem;
    scrollbar-width: none;
  }
  .shop-trust::-webkit-scrollbar { display: none; }
  .shop-trust li { white-space: nowrap; flex: none; }
  .shop-trust svg { width: 16px; height: 16px; }

  /* Categories → single swipeable row instead of wrapping to three rows */
  .chips {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: .45rem; margin: 0 0 .7rem; padding-bottom: .2rem;
    scrollbar-width: none;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }

  .shop-live { margin-bottom: .6rem; }
  .listing__bar { margin-bottom: .75rem; }
}

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--muted);
  transition: border-color .15s, color .15s, background .15s;
}
.chip:hover { color: #fff; border-color: var(--red); }
.chip--on { color: #fff; background: rgba(61,232,255,.14); border-color: var(--red); }

.listing__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.listing__count { color: var(--muted); font-size: .9rem; font-weight: 600; }
.listing__sort { display: flex; align-items: center; gap: .5rem; }
.listing__sort label { color: var(--muted); font-size: .85rem; }
.listing__sort select {
  background: var(--bg-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: .5rem .7rem; font: inherit; font-size: .85rem;
}

/* /shop department view — the default landing organizes the catalog into one
   section per category: header + blurb, top picks, and a "shop all" path. */
.dept { margin-top: 2.4rem; }
.dept__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  padding-bottom: .7rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--line);
}
.dept__title { font-family: var(--display); font-size: 1.45rem; color: var(--text); margin: 0; }
.dept__blurb { color: var(--muted); font-size: .9rem; margin: .25rem 0 0; }
.dept__more {
  flex: none; font-weight: 700; font-size: .9rem; color: var(--red-glow);
  white-space: nowrap; padding-bottom: .1rem;
}
.dept__more:hover { color: #fff; }
.dept__gridlink { margin: 2.4rem 0 0; text-align: center; font-size: .92rem; }
.dept__gridlink a { color: var(--muted); }
.dept__gridlink a:hover { color: var(--red-glow); }
@media (max-width: 640px) {
  .dept__head { flex-direction: column; align-items: flex-start; gap: .3rem; }
}

.listing__empty {
  text-align: center; padding: 3.2rem 1.5rem; color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--radius-lg); background: var(--bg-2);
}
.listing__empty p { max-width: 46ch; margin: 0 auto; }
.listing__empty span { font-size: 2.4rem; display: block; margin-bottom: .6rem; }
.listing__empty h3 { font-family: var(--display); text-transform: uppercase; color: var(--text); margin-bottom: .4rem; }
.listing__empty .btn { margin-top: 1rem; }

.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 2rem 0 1rem; }
.pager__btn {
  padding: .6rem 1.1rem; border-radius: 10px; font-weight: 700; font-size: .9rem;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
}
.pager__btn:hover { border-color: var(--red); }
.pager__info { color: var(--muted); font-size: .88rem; }

/* /shop facet filters — size chips, color dots, price presets (site.js) */
.plp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: -.6rem 0 1.2rem; }
.plp-filters:empty { display: none; }               /* invisible without JS */
.plp-filters__group { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.plp-filters__group + .plp-filters__group { padding-left: .9rem; border-left: 1px solid var(--line); }
.plp-filters .chip { cursor: pointer; font-family: inherit; }
.plp-dot {
  width: 26px; height: 26px; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--sw, #888); border: 2px solid var(--line);
  box-shadow: inset 0 0 0 2px var(--surface); transition: transform .12s, border-color .15s;
}
.plp-dot:hover { transform: scale(1.1); border-color: var(--muted); }
.plp-dot.is-on { border-color: var(--red); transform: scale(1.1); box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 2px var(--red); }
.plp-filters__clear { color: var(--red-glow); border-color: transparent; }
.plp-empty { grid-column: 1 / -1; }                 /* empty state spans the grid */
@media (max-width: 760px) {
  /* one swipeable row, matching the category chips above it */
  .plp-filters {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: .45rem .7rem; margin: -.2rem 0 .8rem; padding-bottom: .2rem;
  }
  .plp-filters::-webkit-scrollbar { display: none; }
  .plp-filters__group { flex-wrap: nowrap; }
  .plp-filters .chip { flex: none; white-space: nowrap; }
  .plp-dot { flex: none; }
}

/* Zero-result search rescue — "Popular right now" suggestions (Shop.cshtml) */
.listing-suggest { margin-top: 2.4rem; }
.listing-suggest__title {
  font-family: var(--display); font-size: 1.15rem; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 1rem;
}

/* Applied-filter pills in the homepage shop bar (site.js renderActiveChips) */
.active-chips { display: flex; flex-wrap: wrap; gap: .4rem; flex-basis: 100%; }
.active-chips:empty { display: none; }
.active-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: rgba(61,232,255,.14); border: 1px solid var(--red); color: var(--text);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.active-chip span { color: var(--red-glow); font-size: .85em; }
.active-chip:hover { background: rgba(61,232,255,.28); }
.active-chip--all { background: var(--bg-2); border-color: var(--line); color: var(--muted); }
.active-chip--all:hover { color: var(--text); border-color: var(--red); }

/* ============================================================
   Product page conversion (Chunk 2)
   ============================================================ */
/* Zoomable main image (now a <button>) */
.pd-main { display: block; width: 100%; padding: 0; cursor: zoom-in; color: inherit; }
.pd-zoomhint {
  position: absolute; bottom: 10px; right: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(26,22,17,.78); color: #fff; font-size: .72rem; font-weight: 600;
  padding: .35rem .6rem; border-radius: 999px; backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s;
}
.pd-zoomhint svg { width: 14px; height: 14px; flex: none; }
.pd-main:hover .pd-zoomhint { opacity: 1; }
@media (hover: none) { .pd-zoomhint { opacity: 1; } }

/* Stock urgency */
.pd-urgency { margin: .2rem 0 .6rem; }
.pd-urgency__bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.pd-urgency__bar span { display: block; height: 100%; background: linear-gradient(90deg, #8af1ff, #3de8ff); border-radius: 999px; color: var(--on-accent); }
.pd-urgency small { color: #ff8a5c; font-weight: 600; font-size: .78rem; display: inline-block; margin-top: .35rem; }

/* Delivery estimate */
.pd-delivery { color: var(--muted); font-size: .85rem; margin: 0; }
.pd-delivery strong { color: var(--text); }
/* Dispatch-cutoff countdown (honest — derived from the 1–2 day ship promise) */
.pd-cutoff { color: var(--muted); font-size: .85rem; margin: 0; }
.pd-cutoff strong { color: var(--amber, #3de8ff); }

/* Image lightbox */
.pd-lightbox {
  position: fixed; inset: 0; z-index: 2000; display: none;
  align-items: center; justify-content: center; padding: 4vw;
  background: rgba(10,8,5,.93); backdrop-filter: blur(6px);
}
.pd-lightbox.open { display: flex; }
.pd-lightbox img { max-width: 96vw; max-height: 90vh; object-fit: contain; border-radius: 8px; }
.pd-lightbox__close {
  position: absolute; top: max(14px, env(safe-area-inset-top)); right: 16px;
  width: 44px; height: 44px; border-radius: 50%; font-size: 1.4rem; color: #fff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
}

/* Frequently bought together */
.pd-fbt { padding-top: 1rem; }
.fbt { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.4rem; }
.fbt__items { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.fbt__item { display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 120px; text-align: center; }
.fbt__item img { width: 96px; height: 72px; object-fit: contain; background: #0a0a0d; border: 1px solid var(--line); border-radius: 10px; }
.fbt__name { font-size: .78rem; color: var(--muted); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fbt__item strong { font-size: .9rem; }
.fbt__plus { color: var(--muted-2); font-size: 1.4rem; font-weight: 700; }
.fbt__buy { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.fbt__total { color: var(--muted); font-size: .95rem; }
.fbt__total strong { color: var(--text); font-size: 1.2rem; }

/* Sticky mobile add-to-cart */
.pd-sticky { display: none; }
@media (max-width: 760px) {
  /* A body row under the scroller (moved there by site.js), swapped in for
     the bottom nav while it's showing — never position:fixed, which iOS can
     leave stranded mid-screen. */
  .pd-sticky {
    position: relative; flex: 0 0 auto; z-index: 160;
    display: none; align-items: center; gap: .8rem;
    padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(10,10,14,.97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
  }
  .pd-sticky.show { display: flex; animation: pd-sticky-in .22s ease; }
  @keyframes pd-sticky-in { from { transform: translateY(40%); opacity: 0; } }
  .pd-sticky__thumb {
    width: 44px; height: 44px; border-radius: 9px; object-fit: cover;
    background: #060607; border: 1px solid var(--line); flex: 0 0 auto;
  }
  .pd-sticky__info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .pd-sticky__name { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pd-sticky__price { font-size: 1.05rem; }
  .pd-sticky .btn { flex: 0 0 auto; padding: .8rem 1.3rem; }
}

/* ============================================================
   Payments + BNPL (Chunk 3)
   ============================================================ */
/* Buy-now-pay-later messaging (product page, cart, checkout) */
.bnpl {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: .35rem 0; padding: .6rem .8rem;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: 10px; font-size: .85rem; color: var(--muted); line-height: 1.4;
}
.bnpl__icon { font-size: 1rem; line-height: 1.3; }
.bnpl strong { color: var(--text); }
.bnpl__mo { color: var(--muted-2); }
.cart__bnpl { margin: -.2rem 0 .6rem; font-size: .82rem; color: var(--muted); text-align: center; }
.cart__bnpl strong { color: var(--text); }
.co-bnpl { margin: .2rem 0 .8rem; }

/* Accepted payment method badges */
.pay-methods { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: .9rem 0 .2rem; }
.pay-method {
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; color: var(--muted);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px;
  padding: .35rem .55rem;
}
.pay-method--wallet { color: var(--text); } /* weight/border already differentiate it */
.pay-method--bnpl { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }

/* ============================================================
   Admin orders — shipping address block
   ============================================================ */
.myorder__ship {
  margin: .6rem 0; padding: .8rem 1rem;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 10px;
}
.myorder__ship-label { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: .4rem; }
.myorder__addr { font-style: normal; color: var(--text); font-size: .92rem; line-height: 1.5; }
.myorder__addr strong { color: #fff; }
.myorder__contact { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; margin-top: .5rem; color: var(--muted); font-size: .85rem; }

/* ============================================================
   Legacy home bits (pre-ORBIX)
   ============================================================ */
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.7rem; }
.story__lede { max-width: 70ch; margin: 0 auto; text-align: center; color: var(--muted); font-size: 1.06rem; line-height: 1.75; }

/* ============================================================
   Variants — size buttons + color swatches (Chunk B)
   ============================================================ */
.pd-options { display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0 .5rem; }
.opt__label { display: block; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.opt__label em { font-style: normal; color: var(--text); text-transform: none; letter-spacing: 0; margin-left: .3rem; }
.opt__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.opt-btn {
  min-width: 46px; padding: .55rem .8rem; border-radius: 9px; font-weight: 700; font-size: .9rem;
  background: var(--bg-2); border: 1.5px solid var(--line); color: var(--text); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.opt-btn:hover { border-color: var(--muted); }
.opt-btn.is-on { border-color: var(--red); background: rgba(61,232,255,.14); }
.swatch {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; padding: 0;
  background: var(--sw, #888); border: 2px solid var(--line);
  box-shadow: inset 0 0 0 2px var(--surface); transition: transform .12s, border-color .15s;
}
.swatch:hover { transform: scale(1.08); }
.swatch.is-on { border-color: var(--red); transform: scale(1.08); }
/* Sold-out options: honest "gone" language — dashed ghost chip with a diagonal
   rule, readable label. pointer-events:none keeps the buttons in the tab order
   (no disabled attribute, so SRs still reach them) while killing pointer clicks
   and the false :hover brighten; site.js guards keyboard Enter/Space. */
.opt-btn.is-oos, .swatch.is-oos { pointer-events: none; }
/* EXCEPT the PDP options: there an oos pick reveals the variant-aware
   restock form (the capture path) — those chips must stay clickable. */
.pd-options .opt-btn.is-oos, .pd-options .swatch.is-oos { pointer-events: auto; }
.opt-btn.is-oos {
  color: var(--muted-2); background: transparent; border-style: dashed;
  border-color: var(--line); text-decoration: none; position: relative;
}
.opt-btn.is-oos::after {
  content: ""; position: absolute; left: 7px; right: 7px; top: 50%; height: 1.5px;
  background: currentColor; opacity: .75; transform: rotate(-12deg); pointer-events: none;
}
.opt-btn.is-oos.is-on { border-color: var(--muted); background: rgba(127,127,127,.08); }
/* Out-of-stock colorway dot — same diagonal strike. Shared by the
   quick-view modal (site.js) and the PDP's server-marked swatches. */
.swatch.is-oos { opacity: .55; position: relative; }
.swatch.is-oos::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 120%; height: 2px;
  background: var(--text); border-radius: 1px; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.modal__more { display: inline-block; margin-top: .7rem; color: var(--red-glow); font-weight: 600; font-size: .9rem; }

/* Kit picker modal — choose size/color for each piece in a "add all" set. */
.kitpick { padding: 1.3rem; }
.kitpick__title { margin: 0 0 .2rem; font-size: 1.2rem; }
.kitpick__sub { margin: 0 0 1rem; color: var(--muted); font-size: .88rem; }
.kitpick__list { display: flex; flex-direction: column; gap: .85rem; margin-bottom: 1.1rem; max-height: 56vh; overflow: auto; }
.kitpick__item { display: flex; gap: .8rem; align-items: flex-start; padding-bottom: .85rem; border-bottom: 1px solid var(--line); }
.kitpick__media { flex: 0 0 64px; }
.kitpick__media img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.kitpick__body { display: flex; flex-direction: column; gap: .4rem; min-width: 0; flex: 1; }
.kitpick__name { font-weight: 600; font-size: .92rem; }
.kitpick__price { color: var(--muted); font-size: .85rem; }
.kitpick__opt { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.kitpick__lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); min-width: 40px; }
.kitpick__opt .opt-btn { min-width: 38px; padding: .3rem .55rem; font-size: .78rem; }
.kitpick__opt .swatch { width: 24px; height: 24px; }
.kitpick__need { color: var(--red); font-size: .76rem; margin: 0; }
.kitpick__hint { text-align: center; color: var(--muted); font-size: .8rem; margin: .5rem 0 0; }

/* Variant labels in cart / summaries */
.cart-item__variant { display: block; font-size: .78rem; color: var(--muted); margin: 2px 0; }
.cart-item__low { display: block; font-size: .74rem; color: var(--warn); font-weight: 600; margin-top: 2px; }
.co-variant { font-style: normal; color: var(--muted); font-size: .85em; }

/* Admin variants fieldset */
.admin-variants { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.2rem; margin: 1.2rem 0; }
.admin-variants legend { padding: 0 .5rem; font-weight: 700; color: var(--text); }

/* ============================================================
   Admin — fast variant builder (size chips + color swatches)
   ============================================================ */
.vb-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .55rem; }
.vb-chips .opt-btn { min-width: 42px; padding: .4rem .65rem; font-size: .82rem; }
.vb-chips .swatch { width: 28px; height: 28px; }
.vb-preset {
  font-size: .72rem; font-weight: 700; padding: .4rem .7rem; border-radius: 999px;
  background: transparent; border: 1px dashed var(--line); color: var(--muted); cursor: pointer;
}
.vb-preset:hover { color: var(--text); border-color: var(--muted); }

/* ============================================================
   Hero layering
   ============================================================ */
.hero::after { display: none; }              /* drop the old red skew glow */
.hero__content { position: relative; z-index: 2; }

/* Admin — collapsible advanced section + quick-import optional tag */
.admin-advanced { border: 1px dashed var(--line); border-radius: 12px; padding: .4rem 1rem; margin: 1.2rem 0; }
.admin-advanced > summary { cursor: pointer; font-weight: 700; color: var(--muted); padding: .6rem 0; list-style: none; }
.admin-advanced > summary::marker { content: ""; }
.admin-advanced > summary::before { content: "▸ "; color: var(--muted-2); }
.admin-advanced[open] > summary::before { content: "▾ "; }
.admin-advanced[open] > summary { color: var(--text); }
.quick-import__opt { color: var(--muted-2); font-weight: 500; }

/* ============================================================
   Site-wide ambient backdrop (faint, fixed, behind all content)
   ============================================================ */
.sitebg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

/* Admin appearance preview */
.appearance-preview { margin: 1rem 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.appearance-preview img { display: block; width: 100%; max-height: 280px; object-fit: cover; }
.appearance-upload { margin-top: 1.4rem; }

/* ============================================================
   Admin Appearance / branding panel
   ============================================================ */
.appearance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.appearance-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem; }
.appearance-card h3 { margin-bottom: .3rem; }
.appearance-card .appearance-upload { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .8rem; }
.appearance-card .appearance-upload input[type=file] { flex: 1; min-width: 0; }
.appearance-preview { margin: .8rem 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #0d0f0c; }
.appearance-preview img { display: block; width: 100%; max-height: 150px; object-fit: cover; }
.appearance-preview--logo { background: var(--bg-2); }
.appearance-preview--logo img { object-fit: contain; max-height: 70px; padding: .6rem; }
.appearance-preview--icon { width: 72px; }
.appearance-preview--icon img { height: 72px; object-fit: contain; }

/* Uploaded logo in the header/footer/menu */
.brand-logo { height: 38px; width: auto; max-width: 200px; object-fit: contain; display: block; }
.logo--footer .brand-logo { height: 34px; }
.mobilemenu__brand .brand-logo { height: 30px; }
@media (max-width: 760px) { .brand-logo { height: 30px; max-width: 160px; } }

/* ============================================================
   Hero text legibility over any background (esp. light photos)
   ============================================================ */
.hero__title, .hero__sub { text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.hero__eyebrow { text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.hero__stats strong, .hero__stats span { text-shadow: 0 1px 10px rgba(0,0,0,.55); }

/* ============================================================
   Empty-store state (no products seeded yet)
   ============================================================ */
.store-empty {
  grid-column: 1 / -1;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 18px;
  padding: 3.5rem 1.5rem;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(244,244,246,.10), transparent 70%),
    rgba(255,255,255,.02);
}
.store-empty__icon { font-size: 2.6rem; display: block; margin-bottom: .8rem; }
.store-empty h3 {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .6rem;
}
.store-empty p { color: var(--muted); max-width: 46ch; margin: 0 auto 1.4rem; line-height: 1.6; }

/* ============================================================
   Scroll FX — parallax + reveals
   JS publishes --sy (scroll px), --sp (0..1 page), --hp (0..1 hero)
   on <html>.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Hero copy: just a soft fade as you leave it — no positional drift
     (the drift was the most noticeable "shift" while scrolling). */
  .hero__content { opacity: calc(1 - var(--hp, 0) * 0.7); }

  /* --- Reveal-on-scroll entrances (classes stripped after the
         transition ends so hover transforms work untouched). --- */
  .fx {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .65s ease, transform .65s cubic-bezier(.16, 1, .3, 1);
  }
  .fx-in {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   Conversion polish — added-state, tactile presses, cart upsell
   ============================================================ */

/* "✓ Added" button morph (quiet success state, on brand) */
.btn.is-added {
  background: #24242b !important; background-image: none !important;
  color: #fff !important; box-shadow: 0 6px 18px -6px rgba(244,244,246,.7) !important;
  animation: addedPop .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes addedPop { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } }

/* Mobile bottom-bar cart bounces in sync with the header cart icon */
.mobilebar__item.bump svg { animation: bump .45s ease; }

/* Free-shipping progress — thicker, with a moving shine */
.ship-track { height: 8px; }
.ship-fill {
  position: relative; overflow: hidden; border-radius: 4px;
  background: linear-gradient(90deg, var(--steel), var(--amber));
  transition: width .55s cubic-bezier(.22,1,.36,1); color: var(--on-accent); }
.ship-fill::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 64px;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent);
  animation: shipShine 2s ease-in-out infinite;
}
@keyframes shipShine { from { transform: translateX(-80px); } to { transform: translateX(440px); } }
.ship-bar--done { animation: addedPop .5s cubic-bezier(.34,1.56,.64,1); }

/* Cart cross-sell ("Pairs well with") */
.cart-suggest { border-top: 1px dashed var(--line); padding-top: .9rem; margin-top: auto; }
.cart-suggest h5 {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .1em;
  font-size: .72rem; color: var(--muted); margin: 0 0 .55rem;
}
.cart-suggest__item { display: grid; grid-template-columns: 54px 1fr 36px; gap: .7rem; align-items: center; padding: .3rem 0; }
.cart-suggest__img { width: 54px; height: 40px; object-fit: cover; border-radius: 7px; }
.cart-suggest__info { display: flex; flex-direction: column; min-width: 0; }
.cart-suggest__info span { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-suggest__info strong { font-size: .78rem; color: var(--muted); font-weight: 600; }
.cart-suggest__info:hover span { color: var(--red-glow); }
.cart-suggest__add {
  width: 36px; height: 36px; border-radius: 50%; font-size: 1.15rem; line-height: 1;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  transition: background .2s, border-color .2s, transform .2s;
}
.cart-suggest__add:hover { background: var(--red); border-color: var(--red); color: var(--on-accent); transform: scale(1.1); }

/* Quick-view becomes a bottom sheet on phones (thumb-friendly) */
@media (max-width: 760px) {
  .modal__panel {
    top: auto; bottom: 0; left: 0; right: 0; transform: none;
    width: 100%; max-height: 88vh; max-height: 88dvh;
    border-radius: 18px 18px 0 0; border-left: 0; border-right: 0; border-bottom: 0;
    animation: sheetUp .32s cubic-bezier(.22,1,.36,1);
    padding-bottom: calc(.8rem + env(safe-area-inset-bottom));
  }
  .modal__panel::before {
    content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 44px; height: 4px; border-radius: 2px; background: var(--line); z-index: 3;
  }
  .modal__close { top: .7rem; right: .7rem; }

  /* Zero-scroll sheet: the big photo collapses into an 84px thumb beside the
     name/price (cart-row style), size/color chips sit directly below, and the
     sheet ENDS at the pinned Add button — nothing left to scroll to. The
     description and full gallery live on the product page. */
  .modal__media { display: none; }
  .modal__thumb {
    display: block; width: 84px; height: 84px; flex: none;
    border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
    background: radial-gradient(circle at 50% 40%, #16161c, #0a0a0d);
  }
  .modal__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .modal__head { display: flex; gap: .8rem; align-items: flex-start; padding-top: .6rem; }
  .modal__head-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
  .modal__info { padding: .9rem 1.1rem 0; gap: .55rem; }
  .modal__info h2 { font-size: 1.15rem; line-height: 1.2; }
  .modal__price strong { font-size: 1.35rem; }
  .modal__desc { display: none; }
  .modal__cta {
    position: sticky; bottom: 0; z-index: 2; background: var(--bg-2);
    padding: .55rem 0 .7rem; border-top: 1px solid var(--line);
    box-shadow: 0 -10px 18px -14px rgba(0,0,0,.7);
  }
}

/* CTA block (stock line + Add button + details link) — sticky on phones. */
.modal__cta { display: flex; flex-direction: column; gap: .5rem; }
.modal__cta .modal__more { margin: 0 auto; }
/* Desktop: the head is just a plain stack (thumb hidden, big media shows). */
@media (min-width: 761px) {
  .modal__thumb { display: none; }
  .modal__head { display: contents; }
  .modal__head-txt { display: contents; }
}
@keyframes sheetUp { from { opacity: .4; transform: translateY(48px); } to { opacity: 1; transform: translateY(0); } }

/* Tactile press feedback (buttons feel physical, esp. on touch) */
@media (prefers-reduced-motion: no-preference) {
  .btn:not(:disabled):active { transform: scale(.96); }
  .opt-btn:active, .swatch:active, .qty button:active, .cart-suggest__add:active,
  .icon-btn:active, .pd-thumb:active { transform: scale(.88); }
  .mobilebar__item:active { transform: scale(.9); transition: transform .1s ease; }
  .cat-card:active, .guide:active { transform: scale(.98); }
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .card:active { transform: scale(.98); }
}

/* ============================================================
   Admin — photo & design library
   ============================================================ */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.media-card {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--surface); display: flex; flex-direction: column;
}
.media-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #0a0a0d; display: block; }
.media-card__body { padding: .6rem .7rem; display: flex; flex-direction: column; gap: .45rem; font-size: .78rem; }
.media-card__url { display: flex; gap: .4rem; align-items: center; }
.media-card__url code {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--bg-2); padding: .25rem .45rem; border-radius: 6px;
}
.media-card__url .btn { padding: .3rem .6rem; font-size: .7rem; }
.media-card__meta { color: var(--muted-2); display: flex; justify-content: space-between; align-items: center; }
.media-pill {
  font-size: .65rem; font-weight: 700; letter-spacing: .04em;
  padding: .12rem .5rem; border-radius: 999px;
  background: rgba(244,244,246,.18); color: var(--steel);
}

/* Photo library — category filter chips + per-card mover */
.media-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 1.1rem; }
.media-chip {
  font-size: .78rem; font-weight: 600; padding: .4rem .8rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: var(--surface);
  transition: color .15s, border-color .15s, background .15s;
}
.media-chip:hover { color: var(--text); border-color: var(--muted); }
.media-chip.is-on { background: var(--red); border-color: var(--red); color: var(--on-accent); }
.media-chip--em { font-weight: 800; }
.media-card__tag select {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  padding: .35rem .5rem; border-radius: 8px; font-family: inherit; font-size: .75rem; outline: none;
}
.media-card__tag select:focus { border-color: var(--red); }

/* Store-wide sale banner (top of every page when a sale is running) */
.salebar {
  display: block; text-align: center; text-decoration: none;
  background: var(--sale); color: #fff; font-weight: 600;
  font-size: .85rem; letter-spacing: .02em; line-height: 1.3;
  padding: .55rem 1rem; transition: filter .15s ease;
}
.salebar strong { font-weight: 800; letter-spacing: .04em; }
.salebar__cd { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.salebar:hover { filter: brightness(1.07); }

/* Store-wide sale: emphasize the sale price + the cart "applied at checkout" note */
.card__price strong.is-sale, .modal__price strong.is-sale, .pd-price strong.is-sale { color: var(--red); }

/* Real markdowns (admin bulk "Sale −%" / per-product Compare): struck old
   price + red sale price on cards and the product page, plus the PDP badge. */
.price-was { color: var(--muted-2); text-decoration: line-through; font-size: .9em; margin-right: .15rem; font-weight: 400; }
.price-sale { color: var(--red); }
.pd-price__badge { background: var(--sale); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .05em; padding: .22rem .55rem; border-radius: 6px; }
.cart__sale { margin: .15rem 0 0; font-size: .8rem; line-height: 1.4; color: var(--red-glow, #8af1ff); font-weight: 600; }

/* Distraction-free checkout + sticky mobile pay bar (keeps total + CTA in reach) */
.co-stickybar { display: none; }
@media (max-width: 760px) {
  body.co-focus .mobilebar { display: none; }       /* no "wander off" nav mid-purchase */
  body.co-focus .checkout { padding-bottom: 1.5rem; }
  .co-stickybar {
    display: flex; align-items: center; gap: .8rem;
    position: relative; flex: 0 0 auto; z-index: 200;   /* body row, see .pd-sticky */
    padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(10,10,14,.97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
  }
  .co-stickybar__total { display: flex; flex-direction: column; line-height: 1.1; flex: none; }
  .co-stickybar__total span { font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
  .co-stickybar__total strong { font-size: 1.2rem; }
  .co-stickybar .btn { flex: 1; padding-top: .85rem; padding-bottom: .85rem; }
}

/* Photo library — compact, browsable layout on phones. Without this the grid
   collapses to one giant full-width card per row (huge image + a stack of
   controls), and the category chips wrap into a tall block — a scroll-forever
   wall that's unusable on mobile. */
@media (max-width: 760px) {
  .media-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .media-card img { aspect-ratio: 1; }              /* square thumbs pack tighter */
  .media-card__body { padding: .5rem .55rem; gap: .4rem; font-size: .72rem; }
  .media-card__url code { display: none; }          /* the Copy button still grabs the full URL */
  .media-card__url .btn { flex: 1; text-align: center; }
  .media-card__meta { font-size: .68rem; }
  /* filter chips: one swipeable row instead of a tall wrapped block */
  .media-filters {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin: 1rem 0 .9rem; padding-bottom: .2rem;
  }
  .media-filters::-webkit-scrollbar { display: none; }
  .media-chip { white-space: nowrap; flex: 0 0 auto; }
}

/* Orders — filter + sort toolbar */
.orders-toolbar { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; justify-content: space-between; margin: 1rem 0 1.3rem; }
.orders-toolbar .media-filters { margin: 0; flex: 1; }
.orders-sort { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .82rem; }

/* Admin products — toolbar, named stock alerts, mobile table */
.admin-toolbar { display: flex; flex-direction: column; gap: .7rem; margin: 1rem 0 1.2rem; }
.admin-search { display: flex; gap: .5rem; align-items: center; max-width: 480px; }
.admin-search input[type="search"] { flex: 1; }
.admin-search .btn { padding: .55rem 1rem; }

/* One recipe for every admin toolbar/form control — five pages, one look */
.orders-search input, .orders-sort select, .batch-fulfil select, .batch-fulfil input,
.order-fulfil select, .order-fulfil input, .admin-search input[type="search"],
.field--inline input, .bulkbar input[type=number] {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: .5rem .7rem; font-family: inherit; font-size: .88rem; outline: none;
}
.orders-search input:focus, .orders-sort select:focus, .batch-fulfil select:focus, .batch-fulfil input:focus,
.order-fulfil select:focus, .order-fulfil input:focus, .admin-search input[type="search"]:focus,
.field--inline input:focus, .bulkbar input[type=number]:focus { border-color: var(--red); }

.stockalert-row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.stockalert-row + .stockalert-row { margin-top: .5rem; }
.stock-chip {
  font-size: .74rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text); background: var(--surface);
}
.stock-chip:hover { border-color: var(--muted); }
.stock-chip--low { border-color: rgba(61,232,255,.5); color: var(--amber); }
.stock-chip--out { border-color: rgba(61,232,255,.55); color: var(--red-glow); }
.cell-stock-low { color: var(--amber); font-weight: 700; }
.cell-stock-out { color: var(--red-glow); font-weight: 700; }

@media (max-width: 760px) {
  /* Phones: EVERY admin table becomes a stack of readable cards (no sideways
     scroll). site.js auto-labels each cell from its column header, so a row
     reads "Header: value". Works for all admin tables, not just products. */
  .admin-table-wrap { overflow-x: visible; border: none; border-radius: 0; }
  .admin-table { min-width: 0; display: block; }
  .admin-table thead { display: none; }
  .admin-table tbody { display: block; }
  .admin-table tr {
    display: block; background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; padding: .7rem 1rem; margin-bottom: .8rem;
  }
  .admin-table tr.is-draft { opacity: .72; }
  .admin-table tbody tr:hover { background: var(--surface); }
  .admin-table td {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    border: none; border-top: 1px solid rgba(255, 255, 255, .06);
    padding: .55rem 0; text-align: right; min-height: 1.6rem;
  }
  .admin-table td::before {
    content: attr(data-label); text-align: left; flex: 0 0 auto;
    color: var(--muted); font-weight: 600; font-family: var(--display);
    text-transform: uppercase; letter-spacing: .04em; font-size: .72rem;
  }
  /* Cells without a header label (thumbnail, actions) go full-width, left. */
  .admin-table td:not([data-label]),
  .admin-table td[data-label=""] { justify-content: flex-start; text-align: left; border-top: none; }
  .admin-table td:not([data-label])::before,
  .admin-table td[data-label=""]::before { content: none; }
  .admin-table__name { font-weight: 700; font-size: 1rem; justify-content: flex-start; text-align: left; border-top: none; }
  .admin-table__name::before { content: none; }
  .admin-table__thumb .admin-thumb { width: 60px; height: 60px; object-fit: cover; }
  .admin-actions { flex-wrap: wrap; gap: 1.1rem; padding-top: .7rem; }
  .admin-actions .admin-link { font-size: .95rem; }
}

/* Product edit — image order picker (first image = main photo) */
.imgsorter { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .8rem; }
.imgsort {
  position: relative; width: 116px; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: var(--surface); display: flex; flex-direction: column;
}
.imgsort.is-main { border-color: var(--steel); box-shadow: 0 0 0 1px var(--steel); }
.imgsort img { width: 100%; height: 84px; object-fit: cover; display: block; background: #0a0a0d; }
.imgsort__badge {
  font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-align: center;
  padding: .3rem 0; color: var(--steel);
}
.imgsort__main {
  font-size: .66rem; font-weight: 700; padding: .35rem 0; color: var(--muted);
  background: none; border: none; cursor: pointer;
}
.imgsort__main:hover { color: var(--text); }
.imgsort__rm {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; line-height: 1;
  border-radius: 50%; background: rgba(8,8,11,.75); color: #fff; border: none;
  font-size: .7rem; cursor: pointer;
}
.imgsort__rm:hover { background: var(--red); color: var(--on-accent); }
/* Per-color assignment chips under each image ("Make Black", "Make White"…). */
.imgsort__colors { display: flex; flex-wrap: wrap; gap: 3px; padding: 4px; border-top: 1px solid var(--line); }
.imgsort__color {
  font-size: .6rem; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 999px;
  background: var(--surface); color: var(--muted); border: 1px solid var(--line); cursor: pointer;
}
.imgsort__color:hover { color: var(--text); border-color: var(--muted); }
.imgsort__color.is-on { background: var(--steel); color: #10140d; border-color: var(--steel); }
/* Reorder: draggable tiles + ◀ ▶ nudge buttons. */
.imgsort { cursor: grab; }
.imgsort.is-drag { opacity: .45; outline: 2px dashed var(--steel); outline-offset: -2px; }
.imgsort__ord { display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.imgsort__ord .imgsort__main, .imgsort__ord .imgsort__badge { flex: 1; text-align: center; }
.imgsort__move {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: .72rem; line-height: 1; padding: .35rem .35rem;
}
.imgsort__move:hover:not(:disabled) { color: var(--text); }
.imgsort__move:disabled { opacity: .25; cursor: default; }

/* Fractional star ratings — amber overlay clipped to rating/5 width */
.starbar { position: relative; display: inline-block; line-height: 1; white-space: nowrap; }
.starbar__base { color: rgba(61,232,255,.28); }
.starbar__fill {
  position: absolute; top: 0; left: 0; overflow: hidden;
  color: var(--amber); pointer-events: none;
}

/* Admin analytics — summary stat cards */
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin: 1.2rem 0 1.4rem; }
.stat-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem;
  background: var(--surface); display: flex; flex-direction: column; gap: .25rem;
}
.stat-card__n { font-family: var(--display); font-size: 1.6rem; font-weight: 700; color: var(--text); }
.stat-card__l { font-size: .78rem; color: var(--muted); }
/* Linked stat-cards (Dashboard to-dos) read as clickable; accent = needs me */
a.stat-card { text-decoration: none; color: inherit; transition: transform .15s ease, border-color .15s ease; }
a.stat-card:hover { transform: translateY(-2px); border-color: var(--red-glow); }
.stat-card--alert { border-color: rgba(61,232,255,.5); }
.stat-card--alert .stat-card__n { color: var(--red-glow); }
@media (max-width: 760px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } }

/* Admin activity log */
.activity-table td { vertical-align: middle; }
.activity-when { color: var(--muted); white-space: nowrap; font-size: .8rem; }
.activity-detail { max-width: 0; width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-type {
  display: inline-block; font-size: .76rem; font-weight: 700; white-space: nowrap;
  padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted);
}
.activity-type--add, .activity-type--checkout { color: var(--steel); border-color: rgba(244,244,246,.5); }
.activity-type--signup { color: var(--amber); border-color: rgba(61,232,255,.5); }
.activity-type--view { color: var(--text); }

/* Back-in-stock alert form (product page) */
.pd-notify {
  border: 1px dashed var(--line); border-radius: 12px; padding: .9rem 1rem; margin-top: .9rem;
  background: rgba(244,244,246,.06);
}
.pd-notify__lead { font-size: .88rem; font-weight: 600; margin: 0 0 .55rem; }
.pd-notify__row { display: flex; gap: .5rem; }
.pd-notify__row input {
  flex: 1; min-width: 0; background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  padding: .6rem .8rem; border-radius: 9px; font-family: inherit; outline: none;
}
.pd-notify__row input:focus { border-color: var(--steel); }
.pd-notify__msg { font-size: .82rem; margin: .55rem 0 0; }

/* (Removed the floating recent-purchase popups — replaced by the static
   .hero-proof line under the homepage hero. See above.) */

.tfa-nag__actions { display: flex; gap: .6rem; flex-wrap: wrap; }
/* ============================================================
   MODERN HOME — MOTION PASS
   Cinematic hero entrance, brand ribbon marquee, auto-scrolling
   reviews, breathing trust badges, button sheen, card shine.
   All heavy motion respects prefers-reduced-motion.
   ============================================================ */

/* ---- Hero title accent: shimmering gradient text ---- */
.hero--compact .hero__title span {
  background: linear-gradient(110deg, var(--red-glow) 0%, #f2f5fa 30%, var(--red-glow) 60%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- Brand ribbon (endless marquee) ---- */
.ribbon {
  overflow: hidden; position: relative;
  padding: clamp(1.1rem, 2.6vw, 1.8rem) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: rgba(8, 8, 11, .45);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ribbon__track { display: flex; width: max-content; will-change: transform; backface-visibility: hidden; transform: translateZ(0); }
.ribbon__group {
  display: flex; align-items: center;
  gap: clamp(1.4rem, 3vw, 2.8rem); padding-right: clamp(1.4rem, 3vw, 2.8rem);
}
.ribbon span {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem); letter-spacing: .1em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(232, 222, 206, .28);
}
.ribbon span:nth-of-type(even) { color: rgba(232, 222, 206, .85); -webkit-text-stroke: 0; }
.ribbon i { font-style: normal; color: var(--red-glow); font-size: 1.1rem; }

/* ---- Reviews marquee (Modern home) ---- */
.review-marquee {
  overflow: hidden; position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.review-marquee__track { display: flex; width: max-content; will-change: transform; backface-visibility: hidden; transform: translateZ(0); }
.review-marquee__group { display: flex; gap: 1.2rem; padding-right: 1.2rem; }
.review-marquee .review { width: clamp(280px, 32vw, 400px); flex: 0 0 auto; }

/* ---- Trust badges: tactile hover ---- */
.trust__item { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.trust__item:hover {
  transform: translateY(-3px); border-color: rgba(61,232,255,.45);
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .8);
}
.trust__icon { transition: background .25s ease, color .25s ease, transform .25s ease; }
.trust__item:hover .trust__icon {
  background: linear-gradient(135deg, var(--red), var(--red-glow));
  color: var(--on-accent); transform: scale(1.08); border-color: transparent;
}

/* ---- Primary buttons: light sweep on hover ---- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -65%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg); transition: left .55s ease; pointer-events: none;
}
.btn--primary:hover::before { left: 135%; }

/* ---- Product card media: glass shine sweep on hover ---- */
.card__media::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .13) 50%, transparent 62%);
  transform: translateX(-120%);
}
.card:hover .card__media::after { transition: transform .85s ease; transform: translateX(120%); }

/* Collection photo tiles get the same sweep */
.cat-card--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .10) 50%, transparent 62%);
  transform: translateX(-130%); opacity: 1;
}
.cat-card--photo:hover::after { transition: transform .9s ease; transform: translateX(130%); }

/* ---- Newsletter: glow border that slowly breathes ---- */
.newsletter { position: relative; overflow: hidden; }
.newsletter::before {
  content: ""; position: absolute; inset: -40% -10%; pointer-events: none;
  background: radial-gradient(40% 60% at 20% 50%, rgba(61,232,255,.14), transparent 70%),
              radial-gradient(40% 60% at 80% 50%, rgba(61,232,255,.10), transparent 70%);
}
.newsletter__inner { position: relative; }

/* ---- Featured section: faint glow behind the grid ---- */
.section--featured { position: relative; }
.section--featured::before {
  content: ""; position: absolute; top: -6%; left: 50%; transform: translateX(-50%);
  width: min(920px, 92%); height: 55%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(61,232,255,.10), transparent);
}
.section--featured > * { position: relative; z-index: 1; }

/* ============ Motion (skipped for prefers-reduced-motion) ============ */
@media (prefers-reduced-motion: no-preference) {

  /* Hero copy: staggered rise — eyebrow → title → sub → CTAs → cue. */
  .hero--compact .hero__eyebrow { animation: heroRise .85s cubic-bezier(.16, 1, .3, 1) .30s both; }
  .hero--compact .hero__title   { animation: heroRise 1s   cubic-bezier(.16, 1, .3, 1) .45s both; }
  .hero--compact .hero__sub     { animation: heroRise .9s  cubic-bezier(.16, 1, .3, 1) .62s both; }
  .hero--compact .hero__cta     { animation: heroRise .9s  cubic-bezier(.16, 1, .3, 1) .78s both; }
  .hero--compact .hero__scroll  {
    animation: heroFade 1s ease 1.5s both, scrollNudge 2.4s ease-in-out 2.5s infinite;
  }

  /* The accent line of the title shimmers. */
  .hero--compact .hero__title span { animation: titleShimmer 6s linear 1.8s infinite; }

  /* Marquees */
  .ribbon__track { animation: marqueeScroll 32s linear infinite; }
  .ribbon:hover .ribbon__track { animation-play-state: paused; }
  .review-marquee__track { animation: marqueeScroll 55s linear infinite; }
  .review-marquee:hover .review-marquee__track,
  .review-marquee:focus-within .review-marquee__track { animation-play-state: paused; }

  /* Newsletter glow drifts (transform-only; promoted to its own layer) */
  .newsletter::before { animation: glowDrift 9s ease-in-out infinite alternate; will-change: transform; }

  /* Reveal entrances: slightly deeper + softer spring */
  .fx { transform: translateY(30px) scale(.985); transition-duration: .75s, .75s; }
}

@keyframes heroRise {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes scrollNudge {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 7px); }
}
@keyframes titleShimmer {
  from { background-position: 130% 0; }
  to   { background-position: -130% 0; }
}
@keyframes marqueeScroll { to { transform: translateX(-50%); } }
@keyframes glowDrift {
  from { transform: translateY(0) translateX(0); }
  to   { transform: translateY(-6%) translateX(3%); }
}

/* Mobile: keep the ribbon + marquee compact and snappy */
@media (max-width: 760px) {
  .ribbon span { letter-spacing: .07em; }
  .review-marquee .review { width: 78vw; }
}

/* Reduced motion: marquees become plain swipeable rows (no clones, no clip) */
@media (prefers-reduced-motion: reduce) {
  .review-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .review-marquee__group[aria-hidden="true"] { display: none; }
  .ribbon { display: none; }
}

/* ============================================================
   "Complete the Look" kit (product page) — auto-applied bundle
   ============================================================ */
.pd-kit { padding-top: 1rem; }
.kit {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.6rem; padding: 1.4rem; margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(61,232,255,.07), rgba(61,232,255,.05));
  border: 1px solid var(--line); border-radius: 16px;
}
.kit__items { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.kit__item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: 116px; gap: .25rem; transition: transform .2s;
}
.kit__item:hover { transform: translateY(-3px); }
.kit__media {
  width: 116px; height: 116px; border-radius: 12px; overflow: hidden;
  background: #060607; border: 1px solid var(--line);
}
.kit__item--this .kit__media { border-color: var(--red); box-shadow: 0 0 0 2px rgba(61,232,255,.35); }
.kit__media img { width: 100%; height: 100%; object-fit: cover; }
.kit__name { font-size: .82rem; line-height: 1.25; color: var(--text); max-width: 116px; }
.kit__item strong { font-size: .85rem; color: var(--muted); }
.kit__plus { font-size: 1.5rem; color: var(--muted-2); font-weight: 300; padding: 0 .1rem; }
.kit__buy { display: flex; flex-direction: column; gap: .55rem; min-width: 220px; flex: 1; }
.kit__pricing { display: flex; flex-direction: column; gap: .1rem; }
.kit__label {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .06em;
  font-size: .78rem; color: var(--muted);
}
.kit__price { font-size: 1.05rem; }
.kit__price s { color: var(--muted-2); margin-right: .4rem; }
.kit__price strong { font-size: 1.5rem; color: var(--text); }
.kit__save {
  display: inline-block; align-self: flex-start; font-family: var(--display); font-weight: 700;
  font-size: .8rem; letter-spacing: .03em; color: var(--on-accent); text-transform: uppercase;
  background: linear-gradient(135deg, var(--red), var(--red-glow));
  padding: .2rem .6rem; border-radius: 6px;
}
.kit__note { font-size: .76rem; color: var(--muted); }
@media (min-width: 760px) {
  .kit__buy { max-width: 320px; }
}

/* ============================================================
   ORBIX Rewards — "ways to earn" cards
   ============================================================ */
.rewards-subhead { font-size: 1.4rem; margin: 2rem 0 1.1rem; }
.earn-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.6rem;
}
.earn-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.3rem 1.2rem; transition: transform .2s, border-color .2s;
}
.earn-card:hover { transform: translateY(-3px); border-color: rgba(61,232,255,.4); }
.earn-card__icon { font-size: 1.7rem; display: block; margin-bottom: .5rem; }
.earn-card h3 {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .03em;
  font-size: 1.02rem; margin: 0 0 .35rem;
}
.earn-card p { color: var(--muted); font-size: .86rem; line-height: 1.5; margin: 0; }
.earn-card strong { color: var(--text); }
.trailpoints--hero { margin-bottom: 1.6rem; }
@media (max-width: 820px) { .earn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .earn-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Wholesale / custom inquiry page
   ============================================================ */
.wholesale { max-width: 760px; margin: 1.5rem auto 0; }
.wholesale__perks {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem;
}
.wholesale__form { max-width: 760px; }
/* Honeypot: visually + a11y hidden, but still in the DOM for bots to fill. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 820px) { .wholesale__perks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .wholesale__perks { grid-template-columns: 1fr; } }

/* ============================================================
   Branded order tracking (/track)
   ============================================================ */
.btn--sm { padding: .5rem 1rem; font-size: .85rem; }
.track {
  margin-top: 1.5rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 1.4rem 1.5rem; box-shadow: var(--shadow);
}
.track__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.track__head strong { display: block; font-size: 1.1rem; }
/* Progress timeline */
.track-steps {
  list-style: none; display: flex; justify-content: space-between;
  margin: 1.6rem 0 1.2rem; padding: 0; position: relative;
}
.track-steps::before {
  content: ""; position: absolute; top: 17px; left: 6%; right: 6%; height: 3px;
  background: var(--line); border-radius: 2px; z-index: 0;
}
/* Filled connector grows with --steps (0..3) across the 3 gaps */
.track-steps::after {
  content: ""; position: absolute; top: 17px; left: 6%; height: 3px; z-index: 1;
  width: calc((88% / 3) * var(--steps, 0));
  background: linear-gradient(90deg, var(--red), var(--red-glow));
  border-radius: 2px; transition: width .6s cubic-bezier(.22,1,.36,1); color: var(--on-accent); }
.track-step {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  align-items: center; gap: .45rem; flex: 1; text-align: center;
}
.track-step__dot {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: .9rem; background: var(--bg-2);
  border: 2px solid var(--line); color: var(--muted); transition: all .3s;
}
.track-step__label {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .05em;
  font-size: .74rem; color: var(--muted);
}
.track-step--done .track-step__dot,
.track-step--current .track-step__dot {
  background: linear-gradient(135deg, var(--red), var(--red-glow));
  border-color: transparent; color: var(--on-accent);
}
.track-step--current .track-step__dot { box-shadow: 0 0 0 5px rgba(61,232,255,.22); animation: trackPulse 2s ease-in-out infinite; }
.track-step--done .track-step__label,
.track-step--current .track-step__label { color: var(--text); }
@keyframes trackPulse { 0%,100% { box-shadow: 0 0 0 5px rgba(61,232,255,.22); } 50% { box-shadow: 0 0 0 9px rgba(61,232,255,.08); } }
.track__status { margin: .4rem 0 1.1rem; }
.track__line { font-size: 1rem; line-height: 1.5; margin: 0 0 .5rem; }
.track__tracking { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; color: var(--muted); font-size: .9rem; }
.track__actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.track-upsell { margin-top: 2.2rem; }
.track-upsell .product-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 620px) {
  .track-step__label { font-size: .64rem; }
  .track-upsell .product-grid { grid-template-columns: 1fr; }
  .track-steps::before, .track-steps::after { top: 15px; }
}
@media (prefers-reduced-motion: reduce) { .track-step--current .track-step__dot { animation: none; } }

/* ============================================================
   Build Your Own Kit (/build)
   ============================================================ */
.builder { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }
.builder__group { margin-bottom: 1.8rem; }
.builder__grouphead {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .08em;
  font-size: .85rem; color: var(--muted); margin: 0 0 .8rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--line);
}
.builder__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.builder__tile {
  text-align: left; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; cursor: pointer; padding: 0 0 .6rem;
  display: flex; flex-direction: column; transition: border-color .2s, transform .2s;
}
.builder__tile:hover { transform: translateY(-3px); border-color: rgba(61,232,255,.45); }
.builder__tile.is-on { border-color: var(--red); box-shadow: 0 0 0 2px rgba(61,232,255,.35); }
.builder__tilemedia { position: relative; aspect-ratio: 1/1; background: #0a0a0d; overflow: hidden; display: block; }
.builder__tilemedia img { width: 100%; height: 100%; object-fit: contain; background: #08080a; }
.builder__noimg {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: .8rem; font-family: var(--display); text-transform: uppercase; letter-spacing: .04em;
  font-size: .8rem; color: var(--muted); background: linear-gradient(160deg, #20242a, #0d0f12);
}
.builder__check {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: .85rem; color: var(--on-accent); opacity: 0; transform: scale(.6);
  background: linear-gradient(135deg, var(--red), var(--red-glow)); transition: all .2s;
}
.builder__tile.is-on .builder__check { opacity: 1; transform: scale(1); }
.builder__tilename { font-size: .82rem; line-height: 1.25; margin: .5rem .6rem 0; color: var(--text); }
.builder__tileprice { font-size: .8rem; color: var(--muted); margin: .1rem .6rem 0; font-weight: 700; }

/* Preorder pieces in the kit builder (store-wide preorder mode) */
.builder__preorder {
  text-align: center; max-width: 46ch; margin: .2rem auto 1.4rem; padding: .7rem 1rem;
  border: 1px solid rgba(61,232,255,.4); border-radius: 12px; background: rgba(61,232,255,.08);
  color: var(--text); font-size: .95rem;
}
.builder__prebadge {
  position: absolute; left: .4rem; bottom: .4rem; z-index: 2;
  font-size: .68rem; font-weight: 700; letter-spacing: .01em; line-height: 1;
  padding: .3rem .5rem; border-radius: 999px; color: #fff;
  background: rgba(20,16,12,.82); border: 1px solid rgba(61,232,255,.6); backdrop-filter: blur(4px);
}
.builder__tile--pre.is-on { border-color: var(--red); }

.builder__summary { position: sticky; top: 90px; }
.builder__card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.3rem; box-shadow: var(--shadow);
}
.builder__card h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 .9rem; }
.builder__chosen { margin-bottom: .9rem; }
.builder__empty { color: var(--muted); font-size: .88rem; }
.builder__item { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.builder__itemright { display: inline-flex; align-items: center; gap: .6rem; }
.builder__rm { color: var(--muted-2); font-size: .9rem; width: 22px; height: 22px; border-radius: 6px; }
.builder__rm:hover { color: #fff; background: rgba(255,255,255,.08); }
.builder__totals { margin: .8rem 0; }
.builder__row { display: flex; justify-content: space-between; padding: .25rem 0; font-size: .92rem; }
.builder__row--save { color: var(--red-glow); font-weight: 700; }
.builder__row--total { border-top: 1px solid var(--line); margin-top: .3rem; padding-top: .55rem; font-size: 1.05rem; }
.builder__hint { font-size: .85rem; color: var(--muted); margin: .2rem 0 .9rem; min-height: 1.1em; }
.builder__fine { font-size: .74rem; color: var(--muted-2); text-align: center; margin: .6rem 0 0; }
@media (max-width: 900px) {
  .builder { grid-template-columns: 1fr; }
  .builder__summary { position: static; }
  .builder__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Giveaway — homepage banner + /giveaway page
   ============================================================ */
.giveaway-bar {
  display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap;
  padding: .7rem 1.2rem; text-align: center; color: var(--on-accent);
  background: linear-gradient(100deg, var(--red), var(--red-glow));
  font-size: .92rem; transition: filter .2s;
}
.giveaway-bar:hover { filter: brightness(1.06); }
.giveaway-bar strong { font-weight: 800; }
.giveaway-bar__cd { font-variant-numeric: tabular-nums; opacity: .92; font-weight: 600; }
.giveaway-bar__go {
  font-family: var(--display); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(0,0,0,.18); padding: .25rem .7rem; border-radius: 999px;
}
@media (max-width: 620px) { .giveaway-bar__cd { display: none; } }

.giveaway { text-align: center; padding: 1rem 0 2rem; }
.giveaway__eyebrow { font-family: var(--display); letter-spacing: .25em; color: var(--red-glow); font-weight: 700; margin-bottom: .6rem; }
.giveaway__title { font-family: var(--display); text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; margin: 0 0 .8rem; }
.giveaway__prize { font-size: 1.25rem; margin: 0 0 .6rem; }
.giveaway__prize strong { color: var(--red-glow); }
.giveaway__desc { color: var(--muted); max-width: 52ch; margin: 0 auto 1.4rem; line-height: 1.6; }
.giveaway__countdown { display: flex; justify-content: center; gap: .8rem; margin: 1.6rem 0; }
.gcd {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: .9rem 0; min-width: 78px; box-shadow: var(--shadow);
}
.gcd__n { display: block; font-family: var(--display); font-weight: 700; font-size: 2.1rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.gcd__l { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .35rem; }
.giveaway__entries {
  display: inline-block; background: rgba(61,232,255,.12); border: 1px solid rgba(61,232,255,.3);
  color: var(--text); border-radius: 999px; padding: .5rem 1.1rem; font-size: .95rem; margin-bottom: 2rem;
}
.giveaway__how { text-align: center; max-width: 56ch; margin: 0 auto; }
.giveaway__how p { color: var(--muted); line-height: 1.7; }
.giveaway__cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin: 1.4rem 0 1rem; }
.giveaway__fine { font-size: .76rem; color: var(--muted-2); margin-top: .6rem; }
.giveaway__winner {
  background: linear-gradient(135deg, rgba(61,232,255,.16), rgba(61,232,255,.1));
  border: 1px solid rgba(61,232,255,.4); border-radius: 14px; padding: 1rem 1.2rem;
  font-size: 1.1rem; margin: 1rem 0 1.4rem;
}
.giveaway__ended { text-align: center; color: var(--red-glow); font-weight: 600; margin: 1rem 0; }
@media (max-width: 480px) { .gcd { min-width: 64px; } .gcd__n { font-size: 1.7rem; } }

/* ============================================================
   Shop pages: "From the Field Journal" internal-link block (SEO)
   ============================================================ */
.listing-journal {
  max-width: var(--max); margin: 3rem auto 0; padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.listing-journal__title {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .04em;
  font-size: 1.15rem; margin: 0 0 1rem;
}
.listing-journal__list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .9rem; grid-template-columns: repeat(3, 1fr); }
.listing-journal__list li { display: flex; flex-direction: column; gap: .25rem; }
.listing-journal__list a { font-family: var(--display); font-weight: 600; color: var(--text); transition: color .2s; }
.listing-journal__list a:hover { color: var(--red-glow); }
.listing-journal__list span { color: var(--muted); font-size: .85rem; line-height: 1.5; }
@media (max-width: 760px) { .listing-journal__list { grid-template-columns: 1fr; } }

/* ============================================================
   Admin home — grouped navigation tiles
   ============================================================ */
/* Count badge — the number is a signal, not part of the tile's name */

/* ============================================================
   Add-product: quick-start product-type presets
   ============================================================ */
.qs-types { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.3rem; }
.qs-types__label { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; color: var(--muted); }
.qs-type {
  padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font-weight: 600; font-size: .88rem; cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.qs-type:hover { border-color: rgba(61,232,255,.5); transform: translateY(-1px); }
.qs-type.is-on { background: linear-gradient(135deg, var(--red), var(--red-glow)); border-color: transparent; color: var(--on-accent); }
.qs-types__hint { font-size: .78rem; color: var(--muted-2); margin-left: .2rem; }
@media (max-width: 620px) { .qs-types__hint { flex-basis: 100%; margin-left: 0; } }

/* ============================================================
   Admin home — "More tools" collapsible with descriptions
   ============================================================ */

/* ===== Store-wide "Coming Soon" launch banner (homepage) ===== */
.launch-banner {
  text-align: center; padding: 2.4rem 1.2rem 2.6rem; margin: 0 0 .4rem;
  background: linear-gradient(135deg, rgba(61,232,255,.16), rgba(61,232,255,.12));
  border-bottom: 1px solid var(--line);
}
.launch-banner__eyebrow { font-family: var(--display); letter-spacing: .25em; color: var(--red-glow); font-weight: 700; margin: 0 0 .5rem; font-size: .82rem; }
.launch-banner__title { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.7rem, 4.6vw, 2.8rem); line-height: 1.05; margin: 0 0 .9rem; }
.launch-banner__countdown {
  font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(1.8rem, 6vw, 3rem); letter-spacing: .04em; color: #fff; line-height: 1;
}
.launch-banner__when { color: var(--muted); margin: .5rem 0 1.3rem; font-size: .98rem; }
.launch-banner__form { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; max-width: 460px; margin: 0 auto; }
.launch-banner__form input {
  flex: 1 1 220px; min-width: 0; padding: .8rem 1rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 1rem;
}
.launch-banner__msg { color: var(--muted); font-size: .9rem; margin: .9rem 0 .2rem; }
.launch-banner__peek { display: inline-block; margin-top: .4rem; color: var(--red-glow); font-weight: 600; font-size: .92rem; }

/* ===== Admin: store-wide "Coming Soon" control ===== */
.field--inline { display: flex; flex-direction: column; gap: .3rem; }
.field--inline > span { font-size: .82rem; color: var(--muted); }
/* input skin comes from the shared admin input recipe */

/* ===== Preorder extras ===== */
.launch-banner__cta { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.1rem; }
.pd-drop--pre { background: linear-gradient(135deg, rgba(61,232,255,.16), rgba(100,140,90,.12)); }
.pd-drop__pre { color: var(--muted); font-size: .88rem; line-height: 1.5; margin: .5rem 0 0; }

/* --- Team & access (admin RBAC) --- */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem; }
.perm-opt {
  display: grid; grid-template-columns: auto 1fr; column-gap: .5rem; row-gap: .15rem;
  align-items: start; padding: .65rem .75rem; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s;
}
.perm-opt:hover { border-color: var(--muted); }
.perm-opt input[type=checkbox] { margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--accent, #3de8ff); }
.perm-opt__label { font-weight: 600; color: var(--text); }
.perm-opt__desc { grid-column: 2; font-size: .8rem; color: var(--muted); line-height: 1.4; }
.perm-opt:has(input:checked) { border-color: var(--accent, #3de8ff); background: rgba(61,232,255,.10); }

.team-card { margin-bottom: 1rem; }
.team-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.team-card__head strong { font-size: 1.05rem; }
.team-badge {
  display: inline-block; margin-left: .5rem; padding: .12rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); vertical-align: middle;
}
.team-badge--owner { background: rgba(201,162,75,.16); color: #e7c878; border-color: rgba(201,162,75,.5); }
.team-card__actions { margin-top: .8rem; }
.team-card__remove { margin-top: .5rem; }
.btn--danger { color: #f0b4b4; border-color: rgba(200,90,90,.5); }
.btn--danger:hover { background: rgba(200,90,90,.14); color: #ffd0d0; }

/* ============================================================
   ADMIN "COMMAND CENTER" — next-level motion & polish
   Layered on top of the base .cmd / .admin-tile styles above.
   Everything here is disabled under prefers-reduced-motion.
   ============================================================ */

/* Soft drifting aurora behind the command center (grid stays on ::before) */
@keyframes admAurora {
  from { transform: translate3d(-4%, -2%, 0) rotate(-2deg) scale(1.02); }
  to   { transform: translate3d(4%, 3%, 0) rotate(2deg) scale(1.06); }
}

/* The whole panel eases in on load */
@keyframes admPanelIn { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }

/* Staggered rise for each KPI card */
@keyframes admRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Glass sheen that sweeps across a card/tile on hover */
@keyframes admSheen { from { left: -140%; } to { left: 140%; } }

/* Deeper, springier lift on KPI cards + tiles */

/* Accent / alert KPI cards get a gently breathing glow (paused on hover) */
@keyframes admGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(61,232,255,.22), 0 0 16px -6px rgba(61,232,255,.45); }
  50%      { box-shadow: 0 0 0 1px rgba(61,232,255,.55), 0 0 30px -4px rgba(61,232,255,.85); }
}

/* The KPI number gets a subtle live shimmer */
@keyframes admNumPulse {
  0%, 100% { text-shadow: 0 0 14px rgba(61,232,255,.40); }
  50%      { text-shadow: 0 0 22px rgba(61,232,255,.75); }
}

/* Sparkline draws itself in */
@keyframes admDraw { to { stroke-dashoffset: 0; } }

/* Bars grow in sequence, left to right */
@keyframes admBarPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(61,232,255,.5); }
  50%      { box-shadow: 0 0 18px rgba(61,232,255,.9); }
}

/* The LIVE label dot gets a radiating ring */
@keyframes admRing {
  0%   { box-shadow: 0 0 0 0 rgba(55,214,122,.55); }
  100% { box-shadow: 0 0 0 10px rgba(55,214,122,0); }
}

/* Admin section title: slow shimmer sweep */
.section.admin .section__title {
  background: linear-gradient(100deg, var(--text) 32%, var(--red-glow, #8af1ff) 50%, var(--text) 68%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; animation: admShimmer 7s linear infinite; color: var(--on-accent); }
@keyframes admShimmer { to { background-position: -220% center; } }

/* Tile icons hop on hover */
@keyframes admIcon {
  0%, 100% { transform: translateY(0) scale(1); }
  35%      { transform: translateY(-5px) scale(1.18) rotate(-4deg); }
}

/* Nav tiles cascade in */

/* "More tools" chevron summary gets the same hover sheen treatment */

/* Stat cards (Analytics / Activity) animate in & lift like the KPI cards */
.section.admin .stat-card { position: relative; overflow: hidden; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; animation: admRise .5s ease both; }
.section.admin .stat-card:nth-child(2) { animation-delay: .06s; }
.section.admin .stat-card:nth-child(3) { animation-delay: .12s; }
.section.admin .stat-card:nth-child(4) { animation-delay: .18s; }
.section.admin .stat-card:hover { transform: translateY(-4px); border-color: rgba(61,232,255,.5); box-shadow: 0 14px 30px -16px rgba(0,0,0,.8); }

/* Admin data tables: rows fade in & highlight on hover */
.section.admin .admin-table tbody tr { transition: background .15s ease, box-shadow .15s ease; }
.section.admin .admin-table tbody tr:hover { background: rgba(61,232,255,.07); box-shadow: inset 3px 0 0 var(--red-glow, #8af1ff); }

/* Insight cards (Activity log) lift to match */
.section.admin .insight-card { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.section.admin .insight-card:hover { transform: translateY(-4px); border-color: rgba(61,232,255,.45); box-shadow: 0 14px 30px -16px rgba(0,0,0,.8); }

/* Team page permission tiles pop when picked, lift on hover */
.perm-opt { transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease; }
.perm-opt:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(0,0,0,.8); }
.team-card { transition: transform .18s ease, box-shadow .18s ease; }
.team-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -20px rgba(0,0,0,.85); }

@media (prefers-reduced-motion: reduce) {
  .section.admin .section__title, .section.admin .stat-card {
    animation: none;
  }
  .section.admin .section__title { -webkit-text-fill-color: var(--text); color: var(--text); }
}

/* ============================================================
   ADMIN — "jump to any tool" command bar + snappier nav/table
   ============================================================ */

/* Tactile, keyboard-friendly tiles with an accent edge that lights on hover */

/* Everyday actions read as the primary row: a touch bolder & brighter */

/* "More tools" summary feels like a real button + count chips snappier */

/* ---- Product table: scannable, sticky, snappy ---- */
.section.admin .admin-table-wrap { border-radius: 14px; }
/* The wrap needs a vertical scrollport or the sticky thead below never
   engages — long tables scrolled headerless. Mobile unsets the wrap. */
@media (min-width: 761px) {
  .section.admin .admin-table-wrap { max-height: min(72vh, 900px); overflow-y: auto; overscroll-behavior: contain; }
}
.section.admin .admin-table thead th {
  position: sticky; top: 0; z-index: 3; background: var(--surface-2);
  backdrop-filter: blur(6px); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line);
}
.section.admin .admin-table tbody tr:nth-child(even) { background: rgba(255,255,255,.018); }
.section.admin .admin-table tbody tr:hover { background: rgba(61,232,255,.08); }
/* Numbers read as columns: tabular figures, flush right (mobile cards
   already right-align their values) */
.admin-table th.th-num { text-align: right; }
@media (min-width: 761px) {
  .section.admin .admin-table td[data-label="Cost"],
  .section.admin .admin-table td[data-label="Price"],
  .section.admin .admin-table td[data-label="Margin"],
  .section.admin .admin-table td[data-label="Stock"],
  .section.admin .admin-table td[data-label="Units"],
  .section.admin .admin-table td[data-label="Sales"],
  .section.admin .admin-table td[data-label="Profit"],
  .section.admin .admin-table td[data-label="Sold 30d"],
  .section.admin .admin-table td[data-label="Days of cover"],
  .section.admin .admin-table td[data-label="Revenue"] {
    text-align: right;
    font-variant-numeric: tabular-nums; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  }
}
.section.admin .admin-table tbody tr { transition: background .12s ease, box-shadow .12s ease; }
.admin-thumb { transition: transform .18s ease; }
.section.admin .admin-table tbody tr:hover .admin-thumb { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .admin-thumb { transition: none; }
}

/* ============================================================
   ADMIN PRODUCTS — compact, scannable cards on phones
   (other admin tables keep the generic label/value stacking)
   ============================================================ */
@media (max-width: 760px) {
  .section.admin .admin-table--products tbody tr,
  .section.admin .admin-table--products tbody tr:nth-child(even) {
    display: grid;
    grid-template-columns: 62px 1fr auto;
    grid-template-areas:
      "thumb name    check"
      "thumb price   status"
      "thumb stock   status"
      "act   act     act";
    column-gap: .85rem; row-gap: .15rem; align-items: center;
    padding: .7rem .85rem; background: var(--surface); box-shadow: none;
  }
  .section.admin .admin-table--products td {
    display: flex; flex-direction: column; align-items: flex-start; gap: .08rem;
    border: none; padding: 0; text-align: left; min-height: 0;
  }
  .section.admin .admin-table--products td::before {
    content: attr(data-label); font-size: .6rem; letter-spacing: .06em;
    color: var(--muted-2); font-weight: 700; text-transform: uppercase;
  }
  .section.admin .admin-table--products .admin-table__thumb { grid-area: thumb; align-self: start; }
  .section.admin .admin-table--products .admin-table__thumb::before { content: none; }
  /* bulk-select box sits top-right beside the name — not orphaned below the pills */
  .section.admin .admin-table--products .admin-table__check { grid-area: check; align-self: start; justify-self: end; }
  .section.admin .admin-table--products .admin-table__check::before { content: none; }
  .section.admin .admin-table--products .admin-table__check input { width: 1.3rem; height: 1.3rem; }
  .section.admin .admin-table--products .admin-thumb {
    width: 62px; height: 62px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line);
  }
  .section.admin .admin-table--products .admin-table__name {
    grid-area: name; font-weight: 700; font-size: .98rem; line-height: 1.25;
  }
  .section.admin .admin-table--products .admin-table__name::before { content: none; }
  .section.admin .admin-table--products .admin-table__name .admin-sub {
    display: block; font-weight: 400; font-size: .76rem; color: var(--muted); margin-top: .12rem;
  }
  .section.admin .admin-table--products td[data-label="Price"] {
    grid-area: price; font-size: 1.05rem; font-weight: 800; color: var(--text);
  }
  .section.admin .admin-table--products td[data-label="Stock"] { grid-area: stock; font-variant-numeric: tabular-nums; }
  .section.admin .admin-table--products td[data-label="Status"] {
    grid-area: status; align-items: flex-end; justify-content: center;
  }
  .section.admin .admin-table--products td[data-label="Status"]::before { content: none; }
  /* secondary fields are hidden on phones — still editable from the Edit screen */
  .section.admin .admin-table--products td[data-label="Source"],
  .section.admin .admin-table--products td[data-label="Cost"],
  .section.admin .admin-table--products td[data-label="Margin"] { display: none; }
  /* actions become a tidy row of pill buttons */
  .section.admin .admin-table--products .admin-actions {
    grid-area: act; flex-direction: row; align-items: center; gap: .5rem;
    margin-top: .55rem; padding-top: .55rem; border-top: 1px solid rgba(255,255,255,.07); width: 100%;
  }
  .section.admin .admin-table--products .admin-actions::before { content: none; }
  .section.admin .admin-table--products .admin-actions .admin-inline-form { margin: 0; }
  .section.admin .admin-table--products .admin-actions .admin-link {
    font-size: .85rem; padding: .42rem .8rem; border: 1px solid var(--line);
    border-radius: 8px; background: var(--surface-2); white-space: nowrap;
  }
  .section.admin .admin-table--products .admin-actions .admin-link--danger {
    border-color: rgba(200,90,90,.45); color: #f0b4b4;
  }
}

/* "Active now" live presence KPI on the admin dashboard */
@keyframes cmdFlash { 0% { transform: scale(1); } 35% { transform: scale(1.18); color: #7CFFB0; } 100% { transform: scale(1); } }

/* "On the site now" — live list of active visitors + what they're viewing */

/* ============================================================
   GIVEAWAY PAGE — conversion-focused redesign
   ============================================================ */
.gv { text-align: center; }
.gv .giveaway__title { font-size: clamp(1.7rem, 4vw, 2.6rem); margin: 0 0 1rem; }

/* Compact 2-column hero: prize on the left, countdown + CTA together on the right */
.gv-hero {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.4rem; align-items: start;
  max-width: 940px; margin: 1.1rem auto 1.4rem; text-align: left;
}
.gv-actions { display: flex; flex-direction: column; text-align: center; }
.gv-prize {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem;
  margin: 0; padding: 1.3rem 1.4rem;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
}
.gv-prize__icon { font-size: 4.4rem; line-height: 1; margin: .1rem 0 .5rem; }
.gv-prize__label { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.gv-prize__name { font-family: var(--display); font-size: clamp(1.4rem, 3.5vw, 2rem); font-weight: 800; line-height: 1.12; color: var(--text); }
.gv-prize__value {
  margin-top: .45rem; font-weight: 800; font-size: .95rem; color: var(--on-accent);
  background: var(--red); border: 0; padding: .38rem .85rem; border-radius: 999px;
}
.gv-prize__desc { margin: .55rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.gv-cd-label { margin: 0 0 .5rem; font-weight: 700; letter-spacing: .02em; color: var(--text); }
.gv-proof {
  margin: 1rem 0 0; font-size: .9rem; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem;
}
.gv-proof strong { color: var(--red); font-variant-numeric: tabular-nums; font-size: 1.15em; }
.gv-cta { justify-content: center; margin-top: 1rem; margin-bottom: 0; }
.gv-ship { margin: .55rem 0 0; font-size: .82rem; color: var(--muted); text-align: center; }
.gv-ship a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
/* Countdown sits tight inside the right column */
.gv-actions .giveaway__countdown { margin: .1rem 0 0; gap: .55rem; flex-wrap: wrap; }
@media (max-width: 720px) {
  .gv-hero { grid-template-columns: 1fr; gap: 1rem; text-align: center; }
  .gv-prize { align-items: center; text-align: center; }
}
.gv-steps {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem;
  max-width: 560px; margin: 1.8rem auto 1rem; text-align: left;
}
.gv-step {
  display: flex; align-items: flex-start; gap: .7rem; padding: .8rem .9rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.gv-step__n {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: .9rem;
  background: var(--red); color: var(--on-accent) !important;
}
.gv-step strong { display: block; font-size: .92rem; }
.gv-step > div span { font-size: .8rem; color: var(--muted); line-height: 1.4; }
@media (max-width: 560px) { .gv-steps { grid-template-columns: 1fr; } }

/* ============================================================
   ADMIN DASHBOARD PERFORMANCE FIX
   The command center was laggy from per-frame effects: a large blurred
   aurora animating forever, backdrop-filter blur on every card/panel, and
   looping box-shadow/text-shadow glows (these repaint every frame). Make
   them static — keep the same look, drop the continuous cost. Entrance
   animations, hover sheen, the live dot and the change-flash all stay.
   ============================================================ */
.section.admin .section__title { animation: none; }

/* Company expenses — category breakdown bars */
.exp-bars { display: grid; gap: .7rem; max-width: 720px; }
.exp-bar__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .25rem; }
.exp-bar__cat { font-weight: 600; color: var(--text); font-size: .92rem; }
.exp-bar__amt { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); font-size: .9rem; }
.exp-bar__pct { color: var(--muted); font-weight: 400; font-size: .82rem; }
.exp-bar__track { height: 9px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.exp-bar__fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--red), var(--red-glow, #8af1ff)); min-width: 2px; color: var(--on-accent); }

/* Giveaway free email opt-in entry */
.gv-optin {
  max-width: 560px; margin: 1.6rem auto 0; padding: 1.1rem 1.2rem;
  border: 1px dashed var(--red); border-radius: 14px; background: var(--surface);
}
.gv-optin__lead { margin: 0 0 .7rem; color: var(--text); font-size: .95rem; }
.gv-optin__form { display: flex; gap: .5rem; flex-wrap: wrap; }
.gv-optin__form input {
  flex: 1 1 200px; min-width: 0; padding: .7rem .9rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 1rem;
}
.gv-optin__form input::placeholder { color: var(--muted-2); }
.gv-optin__fine { margin: .6rem 0 0; font-size: .76rem; color: var(--muted); line-height: 1.45; }
.gv-flash--win { border: 1px solid rgba(40,160,90,.6); background: rgba(55,214,122,.16); color: var(--text); }
@media (max-width: 560px) { .gv-optin__form input { flex-basis: 100%; font-size: 16px; } }

/* Clickable "spent by admin" bar (filters the log) */
a.exp-bar--link { display: block; text-decoration: none; color: inherit; padding: .5rem .6rem; margin: 0 -.6rem; border-radius: 10px; transition: background .15s ease; }
a.exp-bar--link:hover { background: rgba(255,255,255,.04); }

/* Giveaway — prize image + shoppable "every order is a ticket" rail */
.gv-section { max-width: 1040px; }
.gv-prize__img {
  width: 100%; max-width: 100%; max-height: 220px; object-fit: contain;
  border-radius: 12px; margin: 0 0 .7rem; display: block;
  background: var(--surface-2); border: 1px solid var(--line);
}
.gv-shop { margin: 2rem auto 0; }
.gv-shop__title { font-family: var(--display); font-size: clamp(1.2rem, 4vw, 1.6rem); font-weight: 800; margin: 0 0 .3rem; }
.gv-shop__sub { color: var(--muted); margin: 0 0 1.2rem; }
.gv-shop .product-grid { text-align: left; }

/* ===== Giveaway — high-conversion flourishes ===== */
.gv { position: relative; }

/* Prize value: bigger, accented, gentle GPU-cheap pulse */
.gv-prize__value {
  font-size: 1.05rem; padding: .35rem .9rem; line-height: 1.2;
  animation: gvValuePulse 2.4s ease-in-out infinite;
}
.gv-prize__value em { font-style: normal; color: #fff; text-transform: uppercase; letter-spacing: .03em; }
@keyframes gvValuePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* Order-now offer strip */
.gv-offer {
  display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap;
  margin: 1rem 0 0; padding: .7rem .9rem; border-radius: 12px; text-align: center;
  background: var(--surface-2); border: 1px solid var(--red);
}
.gv-offer__tag {
  flex: none; font-size: .66rem; font-weight: 800; letter-spacing: .1em; padding: .2rem .5rem;
  border-radius: 999px; background: var(--red); color: var(--on-accent);
}
.gv-offer__txt { font-size: .88rem; color: var(--text); }
.gv-offer__code {
  font-family: ui-monospace, monospace; font-weight: 800; color: var(--on-accent);
  background: var(--red); padding: .14rem .55rem; border-radius: 6px; letter-spacing: .08em;
}

/* Entry celebration confetti (one-time, transform/opacity only) */
.gv-confetti { position: absolute; inset: 0 0 auto 0; height: 0; pointer-events: none; z-index: 5; }
.gv-confetti span {
  position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; opacity: 0;
  animation-name: gvConfetti; animation-timing-function: cubic-bezier(.2,.6,.4,1); animation-fill-mode: forwards;
}
@keyframes gvConfetti {
  0% { opacity: 0; transform: translateY(0) rotate(0); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translateY(70vh) rotate(540deg); }
}
@media (prefers-reduced-motion: reduce) {
  .gv-prize__value { animation: none; }
  .gv-confetti { display: none; }
}

/* Product page — social proof (weekly views + live viewers) */
.pd-social { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: .1rem 0 .9rem; font-size: .88rem; }
/* Collapse the live-presence wrapper when its only child (the "looking right now"
   signal) is hidden — otherwise its margin leaves a blank gap by the buy button
   when there aren't 2+ live viewers. The aria-live region stays in the DOM and
   re-appears (and is announced) the moment a real count arrives. */
.pd-social:not(:has(.pd-social__live:not([hidden]))) { display: none; }
.pd-social__views { color: var(--muted); }
.pd-social__views strong { color: var(--text); }
.pd-social__live { color: var(--red); font-weight: 700; }

/* ===== Wishlist (saved items) ===== */
.card__media { position: relative; }
.card__wish {
  position: absolute; top: .5rem; right: .5rem; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.92); border: 1px solid var(--line); color: #b9b1a0;
  font-size: 1.05rem; line-height: 1; cursor: pointer; transition: transform .12s ease, color .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.card__wish:hover { transform: scale(1.1); color: var(--red); }
.card__wish.is-on { color: var(--red); background: #fff; border-color: var(--red); }
.pd-wish {
  display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .3rem;
  background: none; border: 0; padding: .2rem 0; cursor: pointer;
  color: var(--muted); font-weight: 600; font-size: .92rem; transition: color .12s ease;
}
.pd-wish:hover, .pd-wish.is-on { color: var(--red); }
.wishlist-empty { text-align: center; max-width: 460px; margin: 1.5rem auto; display: grid; gap: 1rem; justify-items: center; color: var(--muted); }

/* ===== FAQ page — trust strip + accordion ===== */
.faq-trust {
  text-align: center; font-weight: 600; font-size: .9rem; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
  padding: .7rem 1rem; margin: .2rem 0 1.4rem;
}
.faq-list { display: grid; gap: .6rem; max-width: 760px; }
.faq-item { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.faq-item > summary {
  cursor: pointer; list-style: none; padding: .95rem 1.1rem; font-weight: 700;
  font-size: 1rem; color: var(--text); display: flex; align-items: center; gap: .7rem;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; color: var(--red); transition: transform .2s ease; line-height: 1; }
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-item > summary:hover { color: var(--red); }
.faq-item__a { padding: 0 1.1rem 1.05rem; color: var(--muted); line-height: 1.6; }
.faq-item__a a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.faq-more { max-width: 760px; margin: 1.4rem 0 0; color: var(--muted); }
.faq-more a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* Giveaway: free email entry promoted to the hero's primary action */
.gv-optin--primary { border: 2px solid var(--red); margin-top: 1rem; box-shadow: 0 10px 30px -18px rgba(168,53,31,.6); }
.gv-optin--primary .gv-optin__lead { font-size: 1.05rem; font-weight: 800; margin-bottom: .6rem; }
.gv-optin--primary .gv-optin__form .btn { white-space: nowrap; }

/* Focus mode: light declutter only — hide the scrolling announcement marquee
   on landing pages. Navigation (nav, footer, mobile bar) stays so visitors can
   always get around. */
body.focus-page .announce { display: none !important; }

/* Instant reward shown the moment someone enters the giveaway */
.gv-reward { border: 2px solid #2e9c5e; border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: 1.1rem; background: rgba(55,214,122,.12); text-align: center; }
.gv-reward__lead { font-weight: 800; margin: 0 0 .25rem; color: var(--text); }
.gv-reward__code { margin: 0 0 .85rem; color: var(--text); }
.gv-reward__code code { font-family: ui-monospace, monospace; font-weight: 800; background: var(--red); color: var(--on-accent); padding: .15rem .6rem; border-radius: 6px; letter-spacing: .06em; }

/* ============================================================
   Print — receipts, order pages, tracking
   ============================================================ */
/* Two problems on paper: dark-theme text prints cream-on-white (blank pages),
   and the mobile app-shell (body height:100dvh + overflow:hidden) truncates
   everything after the first page. Force plain black-on-white flowing content
   and drop the chrome/overlays. */
@media print {
  .header, .announce, .searchbar, .mobilebar, .mobilemenu, .mm-backdrop, .sitebg,
  .to-top, .cart, .overlay, .modal, .toast, .resume-bar, .crewpop, .newsletter,
  .footer__social, .footer__pay { display: none !important; }
  html, body, .appwrap { height: auto !important; overflow: visible !important; background: #fff !important; }
  body, body * { color: #111 !important; }
  a { text-decoration: underline; }
}

/* ============================================================
   Shop conversion pack: card quick-add sizes, restock capture,
   "your size" filter memory, Load more, recently-viewed rail
   ============================================================ */
.card__qadd { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; margin: .1rem 0 .55rem; }
.card__qadd-l { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-right: .1rem; }
/* The quiet size-run line that replaced the quick-add chips */
.card__sizes { font-size: .78rem; color: var(--muted-2); margin: .1rem 0 .55rem; }
.card__size {
  min-width: 34px; min-height: 30px; padding: .22rem .45rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--muted);
  font-size: .76rem; font-weight: 700; line-height: 1;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.card__size:hover:not(:disabled), .card__size:focus-visible:not(:disabled) {
  border-color: var(--red); color: #fff; background: rgba(61,232,255,.18);
}
.card__size.is-oos { opacity: .38; text-decoration: line-through; cursor: not-allowed; }

/* Sold-out card → inline restock email capture */
.card__notifyform { display: flex; gap: .4rem; }
.card__notifyform input {
  flex: 1; min-width: 0; padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: .85rem;
}
.card__notifyform input:focus { border-color: var(--red); outline: none; }
.card__notifyform .btn { padding: .55rem .85rem; font-size: .78rem; white-space: nowrap; }
.card__notifydone { font-size: .82rem; font-weight: 600; color: var(--steel, #e4e4ea); margin: .45rem 0; }
.card__notifydone.is-err { color: #ff8a80; }

/* Quick view: size guide link + fit note */
.opt__guide {
  float: right; font-size: .72rem; font-weight: 600;
  color: var(--muted-2); text-decoration: underline;
  text-transform: none; letter-spacing: 0;
}
.opt__guide:hover { color: #fff; }
.opt__fit { font-size: .8rem; color: var(--muted); margin: .45rem 0 0; }

/* Load more (replaces prev/next pager when JS is on) */
.pager__more { min-width: 240px; }

/* Recently-viewed rail on shop/category pages */
.listing-recent { display: block; margin-top: 2.8rem; }
.listing-recent .section__head { margin-bottom: 1.4rem; }

/* ---------- Two-factor enrollment gate (was markup-only: the "blocking
   overlay" had no positioning CSS at all, so it rendered as inline text at
   the bottom of the page and blocked nothing). Sits above the admin shell
   (z 60) and the command palette (z 1000). ---------- */
.tfa-nag {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
}
.tfa-nag__overlay {
  position: absolute; inset: 0;
  background: rgba(10, 8, 6, .82);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.tfa-nag__panel {
  position: relative; width: 100%; max-width: 480px;
  background: var(--surface, #101014);
  border: 1px solid var(--line, #24242b);
  border-radius: 16px; padding: 1.6rem;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
}

/* Compact cart-drawer footer on phones — the chrome must never crowd out
   the items + "Pairs well with" (the part that actually sells). */
@media (max-width: 760px) {
  .cart__foot { padding: .65rem 1rem .75rem; gap: .45rem; }
  .cart__progress { font-size: .76rem; }
  .ship-msg { margin-bottom: .3rem; }
  .ship-track { height: 5px; }
  .cart__row strong { font-size: 1.1rem; }
  .cart__row--ship { font-size: .84rem; }
  .cart__row--ship strong { font-size: .9rem; }
  .cart__note { font-size: .66rem; }
  .cart__foot .btn--block { padding: .8rem 1rem; font-size: .95rem; }
}

/* ============================================================
   Mobile tap-target floor — KEEP LAST. These override base rules
   defined late in the file (.swatch, .card__size, .cart-suggest__add),
   so they must come after them in the cascade: media queries add no
   specificity, last-wins applies.
   ============================================================ */
@media (max-width: 760px) {
  .swatch { width: 40px; height: 40px; }
  .card__size { min-width: 40px; min-height: 40px; font-size: .85rem; }
  .cart-suggest__add { width: 44px; height: 44px; }
  .cart-suggest__item { grid-template-columns: 54px 1fr 44px; }
}

/* ============ Admin · Arrange Shop ============
   Owner-facing reorder list: drag on desktop, arrows on a phone. Rows stay
   comfortably tappable and the position number is always visible so the
   arrangement reads at a glance. */
.arr-cats { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.arr-bar {
  position: sticky; top: 64px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .65rem .2rem; margin-bottom: .6rem;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.arr-bar--foot { position: static; border-bottom: none; border-top: 1px solid var(--line); margin-top: .8rem; justify-content: flex-end; }
.arr-bar__count { color: var(--muted-2); font-size: .84rem; }
/* Unsaved changes: emphasise the save button with a ring, NOT motion — a
   button that never stops moving is a moving target for the thumb. */
.arr-bar.is-dirty .btn--primary { box-shadow: 0 0 0 3px var(--red-soft, rgba(120,160,110,.35)); }
.arr-bar.is-dirty .arr-bar__count::after { content: " · unsaved"; color: var(--red); font-weight: 700; }

.arr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; counter-reset: arr; }
.arr-row {
  display: flex; align-items: center; gap: .7rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: .55rem .7rem; cursor: grab;
}
.arr-row.is-dragging { opacity: .45; cursor: grabbing; }
.arr-row--moved { animation: arrFlash .5s ease; }
@keyframes arrFlash { from { background: var(--red-soft, rgba(120,160,110,.22)); } to { background: var(--surface); } }
.arr-row__grip { color: var(--muted-2); font-size: 1.1rem; line-height: 1; flex: none; }
.arr-row__pos {
  flex: none; min-width: 1.9rem; text-align: right;
  font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--muted-2);
}
.arr-row__media { flex: none; width: 56px; height: 56px; }
.arr-row__media img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 8px; }
.arr-row__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.arr-row__info strong { font-size: .92rem; line-height: 1.25; }
.arr-row__info small { color: var(--muted-2); font-size: .76rem; }
.arr-row__flag { font-style: normal; color: var(--red); font-weight: 600; }
.arr-row__new {
  font-style: normal; font-weight: 700; font-size: .68rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--red);
  border: 1px solid currentColor; border-radius: 4px; padding: .05rem .3rem; margin-left: .25rem;
}
.arr-row__move { flex: none; display: flex; gap: .3rem; }
.arr-btn {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 10px;
  font-size: 1rem; font-weight: 700; cursor: pointer;
}
.arr-btn:hover { border-color: var(--red); color: var(--red); }
.arr-btn--top { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; padding: 0 .5rem; }
.arr-reset { margin-top: 1.4rem; }

@media (max-width: 620px) {
  .arr-row { gap: .5rem; padding: .5rem .55rem; }
  .arr-row__grip { display: none; }          /* dragging isn't reliable on touch */
  .arr-row__media, .arr-row__media img { width: 46px; height: 46px; }
  .arr-btn--top { display: none; }           /* keep ↑ ↓ reachable on a narrow row */
  .arr-bar { top: 56px; }
}

/* Product options: the group still awaiting a choice, flashed when a shopper
   taps Buy It Now before picking. Silent failure at the buy button is the
   worst possible dead-end, so the missing choice announces itself. */
.opt--needs .opt__label { color: var(--red); }
.opt--needs .opt__row { animation: optNeeds 1.1s ease; border-radius: 10px; }
@keyframes optNeeds {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61,232,255,0); }
  20%, 60% { box-shadow: 0 0 0 3px rgba(61,232,255,.55); }
}
@media (prefers-reduced-motion: reduce) {
  .opt--needs .opt__row { animation: none; box-shadow: 0 0 0 2px var(--red); }
}

/* ============================================================
   ORBIX LAYER — brand shell & components.
   Loaded last on purpose: it restyles the shared components above
   into the ORBIX look (monochrome, chamfered, one cyan signal).
   ============================================================ */
:root { --oct: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut)); --chamfer: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
body { background: var(--bg); letter-spacing: .005em; }
::selection { background: var(--red); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--display); }

/* ---- Fixed backdrop: a faint tech grid + one cool glow ---- */
.sitebg__grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 85%);
}
.sitebg__glow {
  position: absolute; left: 50%; top: -30vh; width: 120vw; height: 70vh; translate: -50% 0;
  background: radial-gradient(closest-side, rgba(61,232,255,.07), transparent 70%);
}

/* ---- Logo lockup ---- */
.logo { gap: .6rem; color: #fff; }
.logo__emblem { height: 26px; width: auto; flex: none; filter: none; transition: color .2s; }
.logo__wordmark { height: 13px; width: auto; flex: none; }
.logo:hover .logo__emblem { color: var(--red); }
.logo--footer .logo__emblem { height: 30px; }
.logo--footer .logo__wordmark { height: 15px; }
.mobilemenu__brand { color: #fff; display: flex; align-items: center; gap: .55rem; }
@media (max-width: 760px) {
  .logo__emblem { height: 24px; }
  .logo__wordmark { height: 12px; }
}

/* ---- Buttons: square, chamfered, monochrome; cyan on hover ---- */
.btn { border-radius: 0; clip-path: var(--chamfer); font-family: var(--display); letter-spacing: .1em; font-weight: 700; }
.btn:focus-visible { clip-path: none; }
.btn--primary, .card .btn--primary {
  background: var(--text); color: var(--on-accent); box-shadow: none;
}
.btn--primary::before { display: none; }
.btn--primary:hover:not(:disabled), .card .btn--primary:hover:not(:disabled) {
  background: var(--red); color: var(--on-accent); transform: translateY(-1px); box-shadow: 0 10px 30px -12px rgba(61,232,255,.6);
}
.btn--ghost { background: transparent; border: 1px solid rgba(244,244,246,.28); color: var(--text); }
.btn--ghost:hover { border-color: var(--red); color: #fff; background: rgba(61,232,255,.06); transform: none; }
.btn--buynow { background: var(--red); color: var(--on-accent); box-shadow: none; }
.btn--buynow:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }

/* ---- Announcement bar: quiet black strip; the sale variant goes red ---- */
.announce { background: #000; color: var(--muted); border-bottom: 1px solid var(--line); font-weight: 500; letter-spacing: .02em; }
.announce strong { color: #fff; font-weight: 700; }
.announce--sale { background: linear-gradient(90deg, #b3202f, var(--sale) 50%, #b3202f); color: #fff; box-shadow: none; }
.announce--sale strong { color: #fff; }

/* ---- Header & nav ---- */
.header { background: rgba(8,8,10,.78); }
.header.scrolled { background: rgba(8,8,10,.94); }
.nav__link { font-size: .82rem; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.nav__link:hover, .nav__link.is-active { color: #fff; }
.nav__link.is-active::after { width: 100%; }
.icon-btn { border-radius: 4px; }

/* ---- Section headings ---- */
.section__eyebrow { color: var(--red); letter-spacing: .28em; font-size: .74rem; display: flex; align-items: center; gap: .55rem; }
.section__eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--red); clip-path: polygon(0 0, 100% 50%, 0 100%); flex: none; margin: 0; }
.section__head--center .section__eyebrow { justify-content: center; }
.section__title { letter-spacing: .02em; font-weight: 700; }
.section__link { color: var(--text); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.section__link:hover { color: var(--red); }
.ox-eyebrow {
  font-family: var(--display); font-size: .78rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: var(--muted); display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem;
}
.ox-dot { width: 8px; height: 8px; background: var(--red); box-shadow: 0 0 0 4px rgba(61,232,255,.15), 0 0 14px rgba(61,232,255,.8); }

/* ---- Hero ---- */
.ox-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); isolation: isolate; }
.ox-hero__grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 70% 45%, #000 20%, transparent 75%);
}
.ox-hero__inner {
  max-width: var(--max); margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) 1.5rem clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(2rem, 5vw, 5rem);
  min-height: min(76vh, 760px);
}
.ox-hero__title {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.9rem, 7.2vw, 6.4rem); line-height: .92; letter-spacing: -.01em; color: #fff;
}
.ox-hero__title span { color: var(--red); text-shadow: 0 0 40px rgba(61,232,255,.35); }
.ox-hero__sub { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 34rem; margin: 1.4rem 0 2rem; }
.ox-hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.ox-hero__facts { list-style: none; display: flex; gap: 0; margin-top: 2.6rem; border-top: 1px solid var(--line); padding-top: 1.3rem; max-width: 34rem; }
.ox-hero__facts li { flex: 1; display: flex; flex-direction: column; gap: .15rem; padding-right: 1rem; }
.ox-hero__facts li + li { border-left: 1px solid var(--line); padding-left: 1rem; }
.ox-hero__facts strong { font-family: var(--display); font-size: 1.15rem; color: #fff; letter-spacing: .04em; }
.ox-hero__facts span { color: var(--muted-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }

.ox-stage { position: relative; aspect-ratio: 1; width: 100%; max-width: 560px; justify-self: end; display: grid; place-items: center; }
.ox-stage__frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ox-stage__oct { fill: none; stroke: rgba(244,244,246,.14); stroke-width: 1; vector-effect: non-scaling-stroke; transform-origin: 200px 200px; }
.ox-stage__oct--1 { stroke-dasharray: 2 7; stroke: rgba(244,244,246,.3); }
.ox-stage__oct--2 { stroke: rgba(61,232,255,.4); }
.ox-stage__oct--3 { fill: rgba(61,232,255,.03); }
.ox-stage__mark { position: relative; width: 58%; height: auto; filter: drop-shadow(0 0 32px rgba(61,232,255,.22)); }
.ox-stage__scan {
  position: absolute; inset: 6%; clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
  background: linear-gradient(180deg, transparent 0%, rgba(61,232,255,0) 40%, rgba(61,232,255,.16) 49%, rgba(61,232,255,.55) 50%, transparent 51%);
  background-size: 100% 220%; background-position: 0 100%;
}
.ox-stage__tag { position: absolute; font-family: var(--display); font-size: .7rem; letter-spacing: .3em; color: var(--muted-2); }
.ox-stage__tag--tl { top: 4%; left: 0; }
.ox-stage__tag--br { bottom: 4%; right: 0; color: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .ox-stage__oct--1 { animation: oxSpin 60s linear infinite; }
  .ox-stage__scan { animation: oxScan 4.5s cubic-bezier(.5,0,.5,1) infinite; }
  @keyframes oxSpin { to { transform: rotate(360deg); } }
  @keyframes oxScan { from { background-position: 0 100%; } to { background-position: 0 -20%; } }
}

.ox-hero__cats {
  position: relative; max-width: var(--max); margin: 0 auto; padding: 0 1.5rem;
  display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line);
}
.ox-hero__cats a {
  font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .85rem;
  padding: 1.15rem 0; color: var(--muted); display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  transition: color .2s;
}
.ox-hero__cats a + a { border-left: 1px solid var(--line); padding-left: 1.2rem; }
.ox-hero__cats a span { color: var(--red); transition: transform .2s; padding-right: 1.2rem; }
.ox-hero__cats a:hover { color: #fff; }
.ox-hero__cats a:hover span { transform: translateX(4px); }

/* Uploaded hero photo: full-bleed behind the copy. */
.ox-hero__media { position: absolute; inset: 0; z-index: -2; }
.ox-hero__photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ox-hero__photo--mob { display: none; }
.ox-hero--photo .ox-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,8,10,.94) 0%, rgba(8,8,10,.7) 45%, rgba(8,8,10,.15) 100%), linear-gradient(0deg, rgba(8,8,10,.9), transparent 35%);
}
.ox-hero--photo .ox-hero__inner { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) {
  .ox-hero__photo--mob { display: block; }
  .ox-hero:has(.ox-hero__photo--mob) .ox-hero__photo--desk { display: none; }
}

@media (max-width: 900px) {
  .ox-hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 2.4rem; gap: 1.5rem; }
  .ox-stage { order: -1; max-width: 300px; justify-self: center; }
  .ox-hero__cats { grid-template-columns: repeat(2, 1fr); padding: 0; }
  .ox-hero__cats a { padding: 1rem 1.2rem; }
  .ox-hero__cats a + a { padding-left: 1.2rem; }
  .ox-hero__cats a:nth-child(3) { border-left: 0; }
  .ox-hero__cats a:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ox-hero__cats a span { padding-right: 0; }
}
@media (max-width: 480px) {
  .ox-stage { max-width: 230px; }
  .ox-hero__facts li { padding-right: .6rem; }
  .ox-hero__facts li + li { padding-left: .6rem; }
  .ox-hero__facts strong { font-size: 1rem; }
  .ox-hero__facts span { font-size: .68rem; letter-spacing: .06em; }
  .ox-hero__cta .btn { flex: 1 1 100%; }
}

/* ---- Category tiles (home) ---- */
.ox-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ox-cat {
  position: relative; display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); transition: border-color .2s, transform .2s;
}
.ox-cat::after { content: ""; position: absolute; top: -1px; left: -1px; width: 18px; height: 18px; border-top: 2px solid var(--red); border-left: 2px solid var(--red); opacity: 0; transition: opacity .2s; }
.ox-cat:hover { border-color: rgba(61,232,255,.45); transform: translateY(-3px); }
.ox-cat:hover::after { opacity: 1; }
.ox-cat__img { aspect-ratio: 4/3; overflow: hidden; background: var(--bg-3); display: block; }
.ox-cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.ox-cat:hover .ox-cat__img img { transform: scale(1.05); }
.ox-cat__body { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.ox-cat__name { font-family: var(--display); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .04em; color: #fff; }
.ox-cat__blurb { color: var(--muted); font-size: .86rem; }
.ox-cat__meta { margin-top: auto; padding-top: .8rem; color: var(--muted-2); font-size: .8rem; display: flex; align-items: center; gap: .3rem; }
.ox-cat__meta strong { color: #fff; }
.ox-cat__go { margin-left: auto; color: var(--red); font-weight: 700; transition: transform .2s; }
.ox-cat:hover .ox-cat__go { transform: translateX(4px); }
@media (max-width: 1000px) { .ox-cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .ox-cats { gap: .6rem; } .ox-cat__body { padding: .8rem; } .ox-cat__name { font-size: 1.05rem; } .ox-cat__blurb { display: none; } }

/* ---- Product cards & catalog chrome ---- */
.card { border-radius: 4px; background: var(--surface); }
.card__media { background: #0c0c10; }
.card__brand { color: var(--muted-2); letter-spacing: .18em; }
.card__name { font-family: var(--display); font-weight: 600; letter-spacing: .01em; }
.card__price strong { color: #fff; }
.badge, .card__soldout { border-radius: 0; clip-path: var(--chamfer); }
.badge--new { background: var(--red); color: var(--on-accent); }
.card__quick { border-radius: 0; }
.chip__icon { display: none; }
.filters { border-radius: 4px; }
.shop__sort select { border-radius: 4px; }
.cat-card, .guide { border-radius: 4px; }
.guide::before { height: 2px; }
.stars { color: var(--red); }

/* ---- Pillars ---- */
.ox-pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); }
.ox-pillar { padding: clamp(1.4rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: .7rem; background: linear-gradient(180deg, var(--surface), transparent); }
.ox-pillar + .ox-pillar { border-left: 1px solid var(--line); }
.ox-pillar__n { font-family: var(--display); font-weight: 700; font-size: 3rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(61,232,255,.7); }
.ox-pillar h3 { font-size: 1.5rem; text-transform: uppercase; letter-spacing: .06em; color: #fff; }
.ox-pillar p { color: var(--muted); }
.ox-pillar a { margin-top: auto; padding-top: .6rem; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: var(--red); }
.ox-pillar a:hover { color: #fff; }
@media (max-width: 800px) {
  .ox-pillars__grid { grid-template-columns: 1fr; }
  .ox-pillar + .ox-pillar { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---- Reviews ---- */
.ox-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ox-review { background: var(--surface); border: 1px solid var(--line); padding: 1.4rem; display: flex; flex-direction: column; gap: .8rem; margin: 0; }
.ox-review__stars { color: var(--red); letter-spacing: .1em; }
.ox-review blockquote { color: var(--text); font-size: .98rem; }
.ox-review figcaption { margin-top: auto; display: flex; flex-direction: column; gap: .1rem; font-size: .85rem; }
.ox-review figcaption small { color: var(--muted-2); }
.ox-review figcaption a { color: var(--red); margin-top: .3rem; }
@media (max-width: 900px) { .ox-reviews__grid { grid-template-columns: 1fr; } }

/* ---- FAQ ---- */
.ox-faq__list { border-top: 1px solid var(--line); }
.ox-faq details { border-bottom: 1px solid var(--line); }
.ox-faq summary {
  list-style: none; cursor: pointer; padding: 1.15rem 0; font-family: var(--display); font-weight: 600;
  font-size: 1.05rem; letter-spacing: .03em; display: flex; justify-content: space-between; gap: 1rem; color: #fff;
}
.ox-faq summary::-webkit-details-marker { display: none; }
.ox-faq summary::after { content: "+"; color: var(--red); font-size: 1.3rem; line-height: 1; transition: transform .2s; }
.ox-faq details[open] summary::after { transform: rotate(45deg); }
.ox-faq details p { color: var(--muted); padding: 0 0 1.2rem; max-width: 62rem; }
.ox-faq details a { color: var(--red); }

/* ---- Guarantee band, newsletter, footer ---- */
.guarantee { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.guarantee .ns-gicon, .guarantee__item svg { color: var(--red); }
.newsletter { background: linear-gradient(180deg, transparent, var(--bg-2)); }
.newsletter__inner { border: 1px solid var(--line); border-radius: 0; background: var(--surface); position: relative; animation: none; box-shadow: none; }
.newsletter__inner::before { content: ""; position: absolute; left: -1px; top: -1px; width: 32px; height: 32px; border-top: 2px solid var(--red); border-left: 2px solid var(--red); pointer-events: none; }
.newsletter__inner h2 { text-transform: uppercase; letter-spacing: .03em; }
.newsletter__form input { border-radius: 0; }
.footer { background: #050506; border-top: 1px solid var(--line); }
.footer h4 { font-family: var(--display); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; color: #fff; }
.footer__col a { color: var(--muted); }
.footer__col a:hover { color: var(--red); }
.footer__brand p { color: var(--muted); }
.footer__social a { border-radius: 4px; }
.pay-badge { border-radius: 3px; }

/* ---- Mobile bottom bar & drawer ---- */
.mobilebar__item.is-active, .mobilebar__item[aria-current="page"] { color: var(--red); }
.mobilemenu { background: var(--bg); }
.mobilemenu__foot p { color: var(--muted-2); font-family: var(--display); letter-spacing: .14em; text-transform: uppercase; font-size: .75rem; }

/* ---- Join popup ---- */
.crewpop__card { border-radius: 0; }
.crewpop__eyebrow { color: var(--red); letter-spacing: .3em; }

/* ---- ORBIX polish pass ---- */
.ox-stage__scan {
  background: linear-gradient(180deg, transparent 0%, transparent 47%, rgba(61,232,255,.09) 49.5%, rgba(61,232,255,.65) 50%, transparent 50.35%);
  background-size: 100% 220%;
}
/* A clipped corner would also clip an outline border — ghost buttons stay square. */
.btn--ghost { clip-path: none; }
/* Product stage matches the edges of the generated renders, so no letterbox bands. */
.card__media, .card__media img { background: #08080a; }
.card__wish { background: rgba(8,8,10,.72); border-color: rgba(244,244,246,.18); color: var(--muted); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.card__wish:hover { color: #fff; }
.card__wish.is-on { color: var(--on-accent); background: var(--red); border-color: var(--red); }
.newsletter { background: var(--bg); }
.newsletter::before { display: none; }
.footer__contact p { display: flex; align-items: center; gap: .55rem; }
.footer__contact small { color: var(--muted-2); }
.ox-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .ox-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ox-cat__count { display: none; } .ox-cat__meta { gap: .25rem; } }

/* ============================================================
   NIMBUS-STYLE LAYER — heavy italic type, navy, cyan buttons,
   rounded cards, and the 3D homepage (.oxh-*). Loaded last.
   ============================================================ */
:root { --ink: #0b1220; --cyan-a: #3de8ff; --cyan-b: #0aa9dc; }

/* ---- Type: heavy italic, condensed display ---- */
.section__title, .oxh-title, .page-title, h1.section__title, .newsletter__inner h2, .pd-h2,
.ox-pillar h3, .ox-cat__name, .cat-card__name, .footer h4 {
  font-family: var(--display); font-style: italic; font-weight: 800; font-stretch: 72%;
  text-transform: uppercase; letter-spacing: -0.005em;
}
.section__title { font-size: clamp(2.3rem, 5.4vw, 4.2rem); line-height: .92; }
.section__eyebrow { font-family: var(--display); font-style: italic; font-stretch: 85%; letter-spacing: .14em; }
.section__eyebrow::before { display: none; }
.nav__link { font-family: var(--display); font-style: italic; font-weight: 700; font-stretch: 85%; letter-spacing: .06em; font-size: .9rem; }

/* ---- Buttons: cyan, square-ish, italic caps (the big pill lives in .oxh-buy) ---- */
.btn { clip-path: none !important; border-radius: 6px; font-family: var(--display); font-style: italic; font-weight: 800; font-stretch: 85%; letter-spacing: .04em; }
.btn--primary, .card .btn--primary {
  background: linear-gradient(90deg, var(--cyan-a), var(--cyan-b)); color: var(--ink); border: 0;
}
.btn--primary:hover:not(:disabled), .card .btn--primary:hover:not(:disabled) {
  background: linear-gradient(90deg, #7cf1ff, var(--cyan-a)); color: var(--ink); transform: translateY(-1px);
  box-shadow: 0 12px 30px -14px rgba(10,169,220,.8);
}
.btn--ghost { border: 2px solid rgba(242,245,250,.35); border-radius: 6px; }
.btn--ghost:hover { border-color: var(--cyan-a); background: rgba(61,232,255,.08); }
.btn--buynow { background: #f2f5fa; color: var(--ink); }

/* ---- Rounded, softer cards ---- */
.card { border-radius: 16px; }
.badge, .card__soldout { clip-path: none; border-radius: 5px; }
.ox-cat, .cat-card, .guide, .filters, .ox-review, .newsletter__inner { border-radius: 18px; }
.ox-cat::after, .newsletter__inner::before { display: none; }

/* ---- Chrome ---- */
.announce { background: #03060c; }
.header { background: rgba(5,9,18,.72); }
.header.scrolled { background: rgba(5,9,18,.94); }
.footer { background: #03060c; }
.sitebg__glow { background: radial-gradient(closest-side, rgba(61,232,255,.06), transparent 70%); }

/* ============================================================
   3D HOMEPAGE
   ============================================================ */
.oxh { background: #fff; }
.oxh-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.is-live > .oxh-canvas, .is-live > .oxh-hero__pin > .oxh-canvas, .is-live .oxh-colors__stage > .oxh-canvas { opacity: 1; }

/* ---- Hero ---- */
.oxh-hero { position: relative; color: #fff; background: #4f7da0; }
.oxh-hero__pin {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(620px, calc(100svh - 110px), 980px);
  background: linear-gradient(180deg, #02050b 0%, #0a1830 42%, #2c5476 78%, #4f7da0 100%);
}
/* Scroll-driven version (home3d.js adds .is-scrolly once the 3D stage runs):
   the section grows tall and the stage pins for the length of it. --oxh-pin-h
   is the scroller's visible height (the app shell scrolls #appwrap). */
.oxh-hero.is-scrolly { height: calc(var(--oxh-pin-h, 100svh) * 2.7); }
.oxh-hero.is-scrolly .oxh-hero__pin { position: sticky; top: 0; height: var(--oxh-pin-h, 100svh); min-height: 0; }
.oxh-hero.is-scrolly .oxh-hero__inner, .oxh-hero.is-scrolly .oxh-hero__foot {
  opacity: clamp(0, calc(1 - var(--hp, 0) * 4.5), 1);
  transform: translateY(calc(var(--hp, 0) * -16vh));
}
.oxh-hero.is-past .oxh-hero__inner, .oxh-hero.is-past .oxh-hero__foot { visibility: hidden; }
.oxh-hero__act { display: none; }
.oxh-hero.is-scrolly .oxh-hero__act {
  display: block; position: absolute; z-index: 3; left: clamp(1.25rem, 4vw, 3.5rem); top: 50%; max-width: 30rem;
  opacity: clamp(0, calc((var(--hp, 0) - .4) * 7), 1);
  transform: translateY(calc(-50% + (1 - clamp(0, calc((var(--hp, 0) - .4) * 7), 1)) * 40px));
  pointer-events: none;
}
.oxh-hero.is-act .oxh-hero__act { pointer-events: auto; }
.oxh-hero__act-eyebrow {
  font-family: var(--display); font-style: italic; font-weight: 800; font-stretch: 85%; text-transform: uppercase;
  letter-spacing: .18em; font-size: .85rem; color: var(--cyan-a); margin-bottom: .8rem;
}
.oxh-hero__act-line {
  font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 105%; text-transform: uppercase;
  font-size: clamp(2.2rem, 4.6vw, 4.6rem); line-height: .9; letter-spacing: -.01em; text-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.oxh-hero__act-line span { color: var(--cyan-a); }
.oxh-hero__act-link {
  display: inline-flex; gap: .4rem; margin-top: 1.3rem; font-family: var(--display); font-style: italic; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: #fff; border-bottom: 2px solid var(--cyan-a); padding-bottom: .2rem;
}
.oxh-hero__act-link:hover { color: var(--cyan-a); }
.oxh-hero__poster {
  position: absolute; inset: 0; z-index: 0;
  background: url("/img/home/hero-poster.webp") center / cover no-repeat;
  transition: opacity .9s ease;
}
.oxh-hero.is-live .oxh-hero__poster { opacity: 0; transition-delay: .7s; }
.oxh-hero__pin > .oxh-canvas { z-index: 1; }
.oxh-hero__inner {
  position: relative; z-index: 2; max-width: 1560px; margin: 0 auto; height: 100%;
  min-height: inherit; padding: clamp(2rem, 7vh, 5rem) clamp(1.25rem, 4vw, 3.5rem) clamp(2rem, 8vh, 5rem);
  display: flex; flex-direction: column; justify-content: space-between; pointer-events: none;
}
.oxh-hero__inner a, .oxh-hero__inner button { pointer-events: auto; }
.oxh-hero__title {
  font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 112%;
  font-size: clamp(3.2rem, 8.4vw, 8.6rem); line-height: .84; letter-spacing: -.02em; text-transform: uppercase;
  text-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.oxh-line { display: block; }
.oxh-line--accent { color: var(--cyan-a); }
.oxh-hero__side {
  align-self: flex-end; max-width: 31rem; padding: 1.4rem 1.5rem 1.5rem; border-radius: 20px;
  background: rgba(5,10,20,.5); border: 1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
}
.oxh-hero__kicker {
  font-family: var(--display); font-style: italic; font-weight: 800; font-stretch: 75%;
  font-size: clamp(2rem, 3.6vw, 3.3rem); line-height: .95; text-transform: uppercase; margin-bottom: .7rem;
}
.oxh-hero__side p { color: rgba(255,255,255,.86); font-size: 1.05rem; line-height: 1.55; margin-bottom: 1.3rem; text-shadow: 0 2px 14px rgba(0,0,0,.4); }
.oxh-hero__cta { display: flex; gap: .7rem; flex-wrap: wrap; }
.oxh-hero__foot {
  position: absolute; z-index: 3; left: clamp(1.25rem, 4vw, 3.5rem); bottom: 1.2rem;
  display: flex; align-items: center; gap: 1rem; pointer-events: none;
}
.oxh-sound {
  pointer-events: auto; display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  padding: .45rem .8rem .45rem .6rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(5,10,20,.55); color: #e8eef8; backdrop-filter: blur(8px);
  font: 800 italic .72rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
  transition: border-color .2s, color .2s, opacity .6s;
}
.oxh-sound svg { width: 17px; height: 17px; flex: none; }
.oxh-sound[aria-pressed="true"] { border-color: rgba(61,232,255,.55); }
.oxh-sound[aria-pressed="true"] svg { color: var(--cyan-a); }
.oxh-sound[aria-pressed="true"] .oxh-sound__off, .oxh-sound[aria-pressed="false"] .oxh-sound__on { display: none; }
.oxh-sound[aria-pressed="false"] { color: rgba(232,238,248,.7); }
.oxh-sound:hover { border-color: var(--cyan-a); }
.oxh-sound:focus-visible { outline: 2px solid var(--cyan-a); outline-offset: 2px; }
.oxh-sound[hidden] { display: none; }
.oxh-hero:not(.is-live) .oxh-sound { opacity: 0; pointer-events: none; }
.oxh-hero__hint {
  font-family: var(--display); font-style: italic; font-weight: 700; font-stretch: 85%;
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55);
  transition: opacity .6s;
}
.oxh-hero.is-typing .oxh-hero__hint, .oxh-hero:not(.is-live) .oxh-hero__hint { opacity: 0; }
@media (hover: none), (pointer: coarse) { .oxh-hero__hint { display: none; } }
@media (max-width: 760px) {
  .oxh-hero__pin { min-height: 760px; }
  .oxh-hero.is-scrolly .oxh-hero__act { right: 1.25rem; }
  .oxh-hero__poster { background-image: url("/img/home/hero-poster-m.webp"); }
  .oxh-hero__inner { padding-top: 1.6rem; padding-bottom: 1.6rem; }
  .oxh-hero__title { font-size: clamp(3rem, 15vw, 4.6rem); }
  .oxh-hero__side { align-self: stretch; max-width: none; padding: 1.1rem 1.1rem 1.2rem; }
  .oxh-hero__cta .btn { flex: 1 1 auto; }
  /* the copy panel fills the bottom on phones — the sound toggle goes top-right */
  .oxh-hero__foot { left: auto; right: 1rem; bottom: auto; top: 1rem; }
  .oxh-sound { padding: .5rem; }
  .oxh-sound span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---- Light sections ---- */
.oxh-light { background: #fff; color: var(--ink); }
.oxh-section { padding: clamp(4rem, 8vw, 7rem) 0; }
.oxh-wrap { max-width: 1400px; margin: 0 auto; padding: 0 clamp(1.25rem, 3vw, 2.5rem); }
.oxh-title {
  font-size: clamp(2.7rem, 7vw, 6.2rem); line-height: .88; color: var(--ink); margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
}
.oxh-title--light { color: #fff; }
.oxh-sub { font-size: 1.15rem; color: #334155; margin: -1.2rem 0 2.2rem; }
.oxh-note { color: #64748b; font-size: .95rem; }
.oxh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.oxh-link { font-family: var(--display); font-style: italic; font-weight: 800; font-stretch: 85%; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.oxh-link:hover { color: var(--cyan-b); }

/* ---- Bento ---- */
.oxh-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(.9rem, 1.6vw, 1.4rem); }
.oxh-bento__card {
  grid-column: span 5; position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(300px, 34vw, 470px); border-radius: 28px; color: #fff;
  background: radial-gradient(120% 90% at 50% 20%, #1b3b63, #050a14 70%);
  display: flex; align-items: flex-end; padding: clamp(1.3rem, 2.4vw, 2.2rem);
}
.oxh-bento__card--wide { grid-column: span 7; }
.oxh-bento__card::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--img) center / cover no-repeat; transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.oxh-bento__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.82)); }
.oxh-bento__card:hover::before { transform: scale(1.045); }
.oxh-bento__card p { font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.4; max-width: 30rem; color: rgba(255,255,255,.88); }
.oxh-bento__card strong { color: #fff; }
.oxh-bento__go {
  position: absolute; top: 1.3rem; right: 1.3rem; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.6rem; line-height: 1; color: var(--ink);
  background: linear-gradient(90deg, var(--cyan-a), var(--cyan-b)); transition: transform .25s;
}
.oxh-bento__card:hover .oxh-bento__go { transform: translateX(3px); }
@media (max-width: 860px) {
  .oxh-bento__card, .oxh-bento__card--wide { grid-column: span 12; min-height: 320px; }
}

/* ---- Switch playground ---- */
.oxh-switches { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.9rem, 1.6vw, 1.4rem); }
.oxh-switches > .oxh-canvas { z-index: 1; transition: none; }
.oxh-switch {
  position: relative; overflow: hidden; border-radius: 28px; text-align: left; color: #fff;
  min-height: clamp(300px, 36vw, 520px); cursor: pointer; transition: background-color .3s;
}
.oxh-switch--linear { background-color: #5c0f12; }
.oxh-switch--tactile { background-color: #5a2b0e; }
.oxh-switch--clicky { background-color: #083c66; }
.oxh-switch--heavy { background-color: #121a2e; }
.oxh-switch--linear:hover { background-color: #6e1216; }
.oxh-switch--tactile:hover { background-color: #6b3411; }
.oxh-switch--clicky:hover { background-color: #0a4a7d; }
.oxh-switch--heavy:hover { background-color: #18223b; }
.oxh-switch__word {
  position: absolute; inset: -.2em -.1em; display: block; pointer-events: none;
  font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 100%;
  font-size: clamp(4.5rem, 9vw, 9rem); line-height: .84; color: rgba(0,0,0,.24); word-break: break-all;
}
.oxh-switch.is-hit .oxh-switch__word { animation: oxhHit .45s ease; }
@keyframes oxhHit { 30% { color: rgba(255,255,255,.12); } }
.oxh-switch__slot {
  position: absolute; left: 12%; right: 12%; top: 4%; bottom: 20%;
  background: var(--img) center / contain no-repeat;
}
.oxh-switches.is-live .oxh-switch__slot { background-image: none; }
.oxh-switch__label {
  position: absolute; z-index: 2; left: clamp(1.2rem, 2.4vw, 2rem); bottom: clamp(2.6rem, 4vw, 3.4rem);
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--display); font-style: italic; font-weight: 800; font-stretch: 75%;
  font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1; text-transform: uppercase;
}
.oxh-switch__desc { position: absolute; z-index: 2; left: clamp(1.2rem, 2.4vw, 2rem); right: 1rem; bottom: clamp(1rem, 1.8vw, 1.5rem); color: rgba(255,255,255,.75); font-size: .95rem; }
@media (max-width: 640px) {
  .oxh-switches { gap: .7rem; }
  .oxh-switch { min-height: 250px; border-radius: 20px; }
  .oxh-switch__slot { left: 4%; right: 4%; top: 2%; bottom: 30%; }
  .oxh-switch__desc { display: none; }
  .oxh-switch__label { bottom: 1rem; font-size: 1.6rem; }
  .oxh-switch__label svg { width: 18px; height: 18px; }
}

/* ---- Colourway changer ---- */
.oxh-colors {
  --cw-bg: #0a1424; --cw-word: #13233c;
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background: var(--cw-bg); transition: background-color .8s ease;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.oxh-colors__word {
  position: absolute; inset: 0; z-index: -1; display: flex; flex-direction: column; justify-content: center;
  font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 100%;
  font-size: clamp(5rem, 15vw, 15rem); line-height: .86; color: var(--cw-word); white-space: nowrap;
  transition: color .8s ease; pointer-events: none; user-select: none;
}
.oxh-colors__word span:nth-child(odd) { transform: translateX(-12%); }
.oxh-colors__stage { position: relative; height: clamp(340px, 42vw, 640px); margin-top: clamp(1rem, 3vw, 2.5rem); }
.oxh-colors__poster { position: absolute; inset: 0; background: url("/img/home/colors-poster.webp") center / contain no-repeat; transition: opacity .9s; }
.oxh-colors.is-live .oxh-colors__poster { opacity: 0; transition-delay: .7s; }
.oxh-colors__stage > .oxh-canvas { z-index: 1; }
.oxh-colors__bar { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.oxh-colors__copy { max-width: 30rem; }
.oxh-colors__copy .oxh-title { margin-bottom: .8rem; }
.oxh-colors__copy p { color: rgba(255,255,255,.82); font-size: 1.1rem; }
.oxh-colors__copy a { color: var(--cyan-a); text-decoration: underline; text-underline-offset: 3px; }
.oxh-colors__picker {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .55rem;
  background: #fff; border-radius: 22px; padding: .7rem; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
}
.oxh-cw {
  display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: .75rem .7rem .65rem;
  border: 2px solid #e3e8ef; border-radius: 14px; color: var(--ink); background: #fff; min-width: 96px;
  transition: border-color .2s, background .2s;
}
.oxh-cw:hover { border-color: #9fdcf0; }
.oxh-cw.is-on { border-color: var(--cyan-b); background: #e9fbff; }
.oxh-cw__swatch { display: grid; grid-template-columns: 3fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; width: 64px; height: 30px; padding: 3px; border-radius: 5px; background: #cfd5df; }
.oxh-cw__swatch i { border-radius: 2px; }
.oxh-cw__swatch i:first-child { grid-row: span 2; }
.oxh-cw__name { font-weight: 700; font-size: .92rem; }
@media (max-width: 900px) {
  .oxh-colors__picker { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .oxh-cw { min-width: 0; }
}

/* ---- Marquee ---- */
.oxh-marquee { background: #e6eaf0; padding: clamp(1rem, 2vw, 1.6rem) 0; overflow: hidden; display: grid; gap: .4rem; }
.oxh-marquee__row { display: flex; width: max-content; animation: oxhMarq 46s linear infinite; }
.oxh-marquee__row--rev { animation-direction: reverse; animation-duration: 54s; }
.oxh-marquee__track { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); padding-right: clamp(1.2rem, 2.4vw, 2.4rem); }
.oxh-marquee__track span {
  font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 100%;
  font-size: clamp(3rem, 7.5vw, 7rem); line-height: 1; color: #a9b2c0; text-transform: uppercase; white-space: nowrap;
}
.oxh-marquee__row--rev .oxh-marquee__track span { color: #c3cad5; }
.oxh-marquee__track svg { height: clamp(2rem, 4.5vw, 4.2rem); width: auto; color: var(--cyan-b); flex: none; }
@keyframes oxhMarq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .oxh-marquee__row { animation: none; } }

/* ---- Featured grid & bundles on white ---- */
.oxh-light .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .oxh-light .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .oxh-light .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.oxh-light .card { box-shadow: 0 24px 50px -34px rgba(11,18,32,.55); }
.oxh-light .card, .oxh-light .cat-card, .oxh-light .ox-review { color: var(--text); }

/* ---- Order now pill ---- */
.oxh-buy { text-align: center; padding: clamp(4.5rem, 9vw, 8rem) clamp(1.25rem, 3vw, 2.5rem); }
.oxh-buy__eyebrow { font-size: clamp(1rem, 1.6vw, 1.4rem); color: #334155; margin-bottom: .6rem; }
.oxh-buy__title { margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.oxh-buy__pill {
  display: inline-flex; align-items: center; justify-content: center; gap: clamp(.8rem, 2vw, 2rem);
  width: min(100%, 1180px); padding: clamp(1.4rem, 3.6vw, 3rem) clamp(1.6rem, 6vw, 5rem);
  border-radius: 999px; border: clamp(5px, .7vw, 10px) solid var(--ink);
  background: linear-gradient(90deg, #47e9ff, #12bdea 45%, #0897c7);
  color: var(--ink); font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 100%;
  font-size: clamp(2.3rem, 8vw, 7.6rem); line-height: .9; text-transform: uppercase; letter-spacing: -.01em;
  transition: transform .25s ease, background-position .6s ease, box-shadow .25s; background-size: 160% 100%;
}
.oxh-buy__pill svg { width: .45em; height: .45em; flex: none; transition: transform .25s; }
.oxh-buy__pill:hover { transform: scale(1.015); background-position: 100% 0; box-shadow: 0 30px 60px -30px rgba(8,151,199,.8); }
.oxh-buy__pill:hover svg { transform: translateX(6px); }
.oxh-buy__facts { margin-top: clamp(1.4rem, 3vw, 2.2rem); font-weight: 700; color: #475569; }

/* ---- Join popup in the Nimbus style ---- */
.crewpop__card { background: linear-gradient(170deg, #12213b, #060b15 70%); border-radius: 24px !important; border-color: rgba(61,232,255,.35); }
.crewpop__card h3 { font-style: italic; font-weight: 900; font-stretch: 85%; font-size: 2rem; line-height: .95; letter-spacing: -.005em; }
.crewpop__eyebrow { color: var(--cyan-a); font-family: var(--display); font-style: italic; }

/* ---- Product page: studio backdrop + interactive 3D view ---- */
.pd-stage { position: relative; }
.pd-main, .pd-3d {
  background: radial-gradient(120% 95% at 50% 28%, #19294a 0%, #0b1426 52%, #05080f 100%);
}
.pd-3d {
  position: absolute; inset: 0; z-index: 3; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s;
}
.pd-stage.is-3d .pd-3d.is-ready { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.pd-3d canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; outline: none; }
.pd-3d canvas.is-key { cursor: pointer; }
.pd-3d canvas.is-grabbing { cursor: grabbing; }
.pd-3d canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--cyan-a); }
.pd-3dhint {
  position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .7rem; border-radius: 999px; background: rgba(5,8,15,.7); backdrop-filter: blur(8px);
  color: #dfe7f5; font-size: .74rem; font-weight: 600; pointer-events: none; transition: opacity .4s;
}
.pd-3dhint svg { width: 14px; height: 14px; flex: none; color: var(--cyan-a); }
.pd-3dhint.is-gone { opacity: 0; }
.pd-viewtoggle {
  position: absolute; left: 12px; bottom: 12px; z-index: 4; display: inline-flex; padding: 3px; gap: 2px;
  border-radius: 999px; background: rgba(5,8,15,.72); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.08);
}
.pd-viewtoggle[hidden] { display: none; }
.pd-viewtoggle button {
  border: 0; background: transparent; color: #b9c4d6; font: 800 italic .78rem/1 var(--display); letter-spacing: .04em;
  text-transform: uppercase; padding: .5rem .85rem; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s;
}
.pd-viewtoggle button[aria-pressed="true"] { background: linear-gradient(90deg, var(--cyan-a), var(--cyan-b)); color: var(--ink); }
.pd-viewtoggle button:focus-visible { outline: 2px solid var(--cyan-a); outline-offset: 2px; }
.pd-stage.is-3d .pd-zoomhint { display: none; }
.pd-stage[data-gear] .pd-main img { padding: 0; }

/* ---- Headline reveals (homepage; added by home3d.js) ---- */
.oxr .oxr-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .14em .12em 0; margin: 0 -.14em -.12em 0; }
.oxr .oxr-w > span {
  display: inline-block; transform: translateY(108%) rotate(4deg); transform-origin: 0 100%;
  transition: transform .95s cubic-bezier(.16,.84,.24,1); transition-delay: calc(var(--i, 0) * 75ms);
}
.oxr.is-in .oxr-w > span { transform: none; }

/* ---- Add-to-cart flight (site.js) ---- */
.cart-item.is-landed { animation: ox-landed .9s ease-out; }
@keyframes ox-landed {
  0% { background: rgba(61,232,255,.22); box-shadow: inset 3px 0 0 var(--cyan-a); }
  100% { background: transparent; box-shadow: inset 3px 0 0 transparent; }
}
.ox-fly { position: fixed; z-index: 10000; width: 0; height: 0; pointer-events: none; }
.ox-fly__cap {
  position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 9px;
  display: grid; place-items: center; color: #05080c;
  font: 900 italic .8rem/1 var(--display, sans-serif);
  background: linear-gradient(160deg, #8ff4ff, #3de8ff 45%, #12bdea);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.55), 0 10px 26px -6px rgba(61,232,255,.75);
}

/* ---- Hero v3: keycap loader, typed headline, light scroll, phone layout ---- */
.oxh-loader { display: none; }
.oxh-3d .oxh-loader {
  position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2rem; background: linear-gradient(180deg, #02050b 0%, #0a1830 42%, #2c5476 78%, #4f7da0 100%);
  transition: opacity .7s ease, visibility 0s linear .7s;
  animation: oxh-loader-bail .6s ease 8s forwards;      /* never left stuck if the 3D can't start */
}
.oxh-3d .oxh-hero.is-ready .oxh-loader { opacity: 0; visibility: hidden; }
@keyframes oxh-loader-bail { to { opacity: 0; visibility: hidden; } }
.oxh-loader__mark { width: min(54vw, 230px); height: auto; filter: drop-shadow(0 8px 30px rgba(61,232,255,.25)); }
.oxh-loader__board {
  display: flex; gap: 5px; padding: 7px 9px 10px; border-radius: 11px;
  background: linear-gradient(180deg, #eef1f6, #c8d0db); box-shadow: 0 3px 0 #8e99a9, 0 22px 44px -14px rgba(0,0,0,.65);
}
.oxh-loader__key {
  width: 32px; height: 34px; display: grid; place-items: center; border-radius: 6px;
  font: 800 17px/1 var(--display); color: #0b1220;
  background: linear-gradient(180deg, #ffffff, #edf0f5);
  box-shadow: inset 0 -5px 0 #cfd6df, 0 2px 0 #8d97a6;
  animation: oxh-key-press 1.4s ease-in-out infinite; animation-delay: calc(var(--k, 0) * 95ms);
}
.oxh-loader__key:nth-child(4), .oxh-loader__key:nth-child(7) { color: #0a9fd4; }
@keyframes oxh-key-press {
  0%, 55%, 100% { transform: translateY(0); box-shadow: inset 0 -5px 0 #cfd6df, 0 2px 0 #8d97a6; }
  25% { transform: translateY(3px); box-shadow: inset 0 -2px 0 #cfd6df, 0 0 0 #8d97a6; }
}
/* Typed headline (letters revealed one by one by home3d.js) */
.oxh-hero__title .oxh-ch { opacity: 0; }
.oxh-hero__title .oxh-ch.is-on { opacity: 1; }
/* The page brightens from night to studio-white as you scroll the hero. */
.oxh-hero__light {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, #d7dfea 0%, #eef2f7 40%, #ffffff 100%);
}
.oxh-hero.is-scrolly { background: #fff; }
.oxh-hero.is-scrolly .oxh-hero__light { opacity: clamp(0, calc((var(--hp, 0) - .12) * 3.4), 1); }
/* Second act sits on the light background: dark ink, top of the stage. */
.oxh-hero.is-scrolly .oxh-hero__act {
  top: clamp(5.5rem, 13vh, 8.5rem);
  transform: translateY(calc((1 - clamp(0, calc((var(--hp, 0) - .4) * 7), 1)) * 40px));
}
.oxh-hero.is-scrolly .oxh-hero__act-line { color: var(--ink); text-shadow: none; }
.oxh-hero.is-scrolly .oxh-hero__act-line span { color: #0a9fd4; }
.oxh-hero.is-scrolly .oxh-hero__act-link { color: var(--ink); }
.oxh-hero.is-scrolly .oxh-hero__act-eyebrow { color: #0a9fd4; }
/* Touch hint (desktop has its own typing hint) */
.oxh-hero__hint--touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .oxh-hero__foot .oxh-hero__hint--touch { display: block; }
}
@media (max-width: 760px) {
  /* Phones: nothing boxes in the board — headline on top, copy underneath. */
  .oxh-hero__side { background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
  .oxh-hero__kicker { font-size: 1.8rem; margin-bottom: .45rem; }
  .oxh-hero__side p { font-size: .98rem; margin-bottom: 1rem; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
  .oxh-hero.is-scrolly .oxh-hero__act { top: 4.6rem; bottom: auto; }
  .oxh-hero__act-line { font-size: 2.3rem; }
}
.oxh-hero.is-scrolly .oxh-hero__inner { padding-bottom: calc(clamp(1.6rem, 6vh, 4rem) + var(--oxh-top, 0px)); }
@media (min-width: 761px) {
  .oxh-hero.is-scrolly .oxh-hero__act { max-width: min(34rem, 38vw); }
  .oxh-hero.is-scrolly .oxh-hero__act-line { font-size: clamp(2rem, 3.5vw, 3.8rem); }
}
/* Phones: copy → board → colour buttons, all on one screen, so tapping a
   colourway shows the board changing right above your thumb. */
@media (max-width: 760px) {
  .oxh-colors { display: flex; flex-direction: column; padding-top: 2.4rem; }
  .oxh-colors__bar { display: contents; }
  .oxh-colors__copy { order: 1; padding: 0 1.25rem; }
  .oxh-colors__copy .oxh-title { margin-bottom: .5rem; }
  .oxh-colors__copy p { font-size: 1rem; }
  .oxh-colors__stage { order: 2; height: 250px; margin-top: .4rem; }
  .oxh-colors__picker { order: 3; margin: 0 1.25rem; width: auto; gap: .4rem; padding: .5rem; border-radius: 18px; }
  .oxh-cw { padding: .5rem .3rem .45rem; gap: .35rem; border-radius: 11px; }
  .oxh-cw__swatch { width: 52px; height: 24px; }
  .oxh-cw__name { font-size: .82rem; }
}

/* ---- "I'm not a robot" check (Pages/Shared/_HumanCheck.cshtml) ---- */
.hc {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .9rem;
  padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255,255,255,.03); max-width: 26rem; margin: .4rem 0 1rem;
}
.hc__box { display: inline-flex; align-items: center; gap: .65rem; cursor: pointer; font-weight: 600; min-height: 44px; }
.hc__check { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hc__tick {
  width: 26px; height: 26px; flex: none; border-radius: 7px; border: 2px solid rgba(255,255,255,.45);
  background: rgba(0,0,0,.25); display: grid; place-items: center; transition: border-color .2s, background .2s;
}
.hc__check:focus-visible + .hc__tick { outline: 2px solid var(--cyan-b, #3de8ff); outline-offset: 2px; }
.hc.is-busy .hc__tick { border-color: var(--cyan-b, #3de8ff); border-right-color: transparent; border-radius: 50%; animation: hc-spin .8s linear infinite; }
.hc.is-ok .hc__tick { border-color: #34d27b; background: #34d27b; }
.hc.is-ok .hc__tick::after { content: ""; width: 7px; height: 13px; border: solid #06110a; border-width: 0 3px 3px 0; transform: translateY(-2px) rotate(45deg); }
.hc__status { font-size: .88rem; color: rgba(255,255,255,.7); }
.hc.is-ok .hc__status { color: #5be39a; }
.hc__note { margin-left: auto; font-size: .72rem; letter-spacing: .04em; color: rgba(255,255,255,.4); }
@keyframes hc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hc.is-busy .hc__tick { animation: none; } }
.gv-optin__form .hc, .auth__form .hc { flex-basis: 100%; max-width: none; margin: .2rem 0 .4rem; }

/* While the on-screen keyboard is up (a text field has focus on a phone —
   html.kb-open, set by _Layout), bottom bars would ride on top of it. */
@media (max-width: 760px) {
  html.kb-open .mobilebar, html.kb-open .ash-dock, html.kb-open .pd-sticky,
  html.kb-open .co-stickybar, html.kb-open .to-top { display: none !important; }
}