/* ============================================================
   HEXAL-OZ · Storefront Design System
   Modern dark commerce · German-pharma / performance
   ============================================================ */
:root{
  /* Brand palette */
  --ink:        #0c0d0f;
  --ink-1:      #111316;
  --ink-2:      #16181c;
  --ink-3:      #1c1f25;
  --ink-4:      #23272e;
  --line:       rgba(241,236,226,.12);
  --line-2:     rgba(241,236,226,.07);
  --eagle:      #de2229;
  --eagle-dim:  #b81b21;
  --sunray:     #fec82b;
  --paper:      #f1ece2;
  --bone:       #ffffff;
  --mute:       #8d8a82;
  --mute-2:     #6a6862;
  --good:       #4caf6e;

  /* Tunable via Tweaks */
  --accent:     var(--eagle);
  --price:      var(--sunray);
  --radius:     3px;
  --grain:      0.5;
  --display-scale: 1;

  --maxw: 1320px;
  --gut: clamp(20px, 5vw, 64px);

  --ff: "Archivo", "Helvetica Neue", "Segoe UI", Arial, system-ui, sans-serif;
  --ff-narrow: "Archivo Narrow", "Archivo", "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ff);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  overflow-x: hidden;
}
body::before{
  content:""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: calc(var(--grain) * .7);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.018 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: screen;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
::selection{ background: var(--accent); color: var(--bone); }

/* ---------- Layout helpers ---------- */
.wrap{ width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); position: relative; z-index: 1; }
.wrap-wide{ max-width: 1560px; }
.stack > * + *{ margin-top: var(--s, 1rem); }
.row{ display: flex; gap: 16px; align-items: center; }
.between{ justify-content: space-between; }
.eyebrow{
  font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--mute);
}
.eyebrow .dot{ display:inline-block; width:6px; height:6px; background: var(--accent); border-radius:50%; margin-right: 8px; vertical-align: middle; }
.mono{ font-family: var(--ff-mono); letter-spacing: .04em; }
.section{ padding-block: clamp(56px, 9vw, 120px); position: relative; }
.section-tight{ padding-block: clamp(40px, 6vw, 72px); }

/* ---------- Type ---------- */
.display{
  font-weight: 900; letter-spacing: -0.04em; line-height: .9;
  font-size: calc(clamp(48px, 9vw, 132px) * var(--display-scale));
  text-wrap: balance;
}
.h0{ font-weight: 900; letter-spacing: -0.035em; line-height: .96; font-size: clamp(38px, 6vw, 74px); text-wrap: balance; }
.h1{ font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-size: clamp(30px, 4.4vw, 52px); text-wrap: balance; }
.h2{ font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(22px, 2.6vw, 32px); }
.h3{ font-weight: 700; letter-spacing: -0.015em; font-size: clamp(18px, 2vw, 22px); }
.lede{ font-family: var(--ff-narrow); font-weight: 500; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.45; color: var(--mute); max-width: 60ch; }
.red{ color: var(--accent); }
.sun{ color: var(--sunray); }
.muted{ color: var(--mute); }

/* ---------- Tricolour motif ---------- */
.tricolor{ display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 4px; width: 100%; }
.tricolor i{ display: block; }
.tricolor .k{ background: var(--ink-4); } .tricolor .r{ background: var(--eagle); } .tricolor .y{ background: var(--sunray); }
.tricolor.tall{ height: 6px; }

/* ---------- Buttons ---------- */
.btn{
  --bg: var(--accent); --fg: var(--bone);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 14px; letter-spacing: .01em;
  padding: 14px 24px; border: 1px solid transparent; border-radius: var(--radius);
  background: var(--bg); color: var(--fg);
  transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
  text-transform: none; white-space: nowrap;
}
.btn svg{ width: 18px; height: 18px; }
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn-primary{ --bg: var(--accent); --fg: var(--bone); box-shadow: 0 8px 30px -10px var(--accent); }
.btn-primary:hover{ background: var(--eagle-dim); }
.btn-sun{ --bg: var(--sunray); --fg: var(--ink); box-shadow: 0 8px 30px -12px var(--sunray); }
.btn-ghost{ --bg: transparent; --fg: var(--paper); border-color: var(--line); }
.btn-ghost:hover{ border-color: var(--paper); background: rgba(255,255,255,.04); }
.btn-light{ --bg: var(--paper); --fg: var(--ink); }
.btn-light:hover{ background: var(--bone); }
.btn-block{ width: 100%; }
.btn-lg{ padding: 17px 30px; font-size: 15px; }
.btn-sm{ padding: 9px 16px; font-size: 12.5px; }
.btn[disabled]{ opacity: .4; pointer-events: none; }

/* ---------- Chips / tags ---------- */
.chip{
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--ff-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 9px; border: 1px solid var(--line); border-radius: 100px; color: var(--mute);
}
.chip.solid{ background: var(--ink-3); }
.chip.rx{ border-color: var(--sunray); color: var(--sunray); }
.chip.cat{ color: var(--paper); border-color: var(--line); }
.badge{
  font-family: var(--ff-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  padding: 4px 7px; border-radius: 2px; background: var(--accent); color: var(--bone);
}
.badge.sun{ background: var(--sunray); color: var(--ink); }
.badge.ink{ background: var(--ink-4); color: var(--paper); }
.badge.out{ background: var(--ink-3); color: var(--mute); }

/* ============================================================
   HEADER
   ============================================================ */
.site-head{
  position: sticky; top: 0; z-index: 100;
  background: rgba(12,13,15,.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-head .tricolor{ height: 3px; }
.head-inner{ display: flex; align-items: center; gap: 28px; height: 68px; }
.brand{ display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand .mark{ width: 34px; height: 34px; }
.brand .wordmark{ font-weight: 900; letter-spacing: -.02em; font-size: 21px; line-height: 1; }
.brand .wordmark .oz{ color: var(--accent); }
.brand .sub{ display:block; font-family: var(--ff-mono); font-size: 8px; letter-spacing: .3em; color: var(--mute); margin-top: 2px; }
.nav{ display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav a{ font-weight: 600; font-size: 14px; color: var(--paper); padding: 9px 13px; border-radius: var(--radius); transition: background .15s, color .15s; position: relative; }
.nav a:hover{ background: rgba(255,255,255,.05); }
.nav a.active{ color: var(--sunray); }
.head-actions{ margin-left: auto; display: flex; align-items: center; gap: 10px; }
.head-search{ display: flex; align-items: center; gap: 8px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 100px; padding: 8px 14px; color: var(--mute); width: 230px; transition: border-color .15s; }
.head-search:focus-within{ border-color: var(--line); }
.head-search input{ background: none; border: 0; color: var(--paper); font-family: var(--ff); font-size: 13px; width: 100%; outline: none; }
.head-search svg{ width: 16px; height: 16px; flex: 0 0 auto; }
.icon-btn{ position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--ink-2); color: var(--paper); }
.icon-btn:hover{ border-color: var(--paper); }
.icon-btn svg{ width: 19px; height: 19px; }
.cart-count{ position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 100px; background: var(--accent); color: var(--bone); font-family: var(--ff-mono); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.cart-count:empty, .cart-count[data-n="0"]{ display: none; }
.burger{ display: none; width: 42px; height: 42px; border: 1px solid var(--line); background: var(--ink-2); border-radius: var(--radius); color: var(--paper); }

.subnav{ border-top: 1px solid var(--line-2); background: rgba(12,13,15,.6); }
.subnav-inner{ display: flex; gap: 22px; height: 44px; align-items: center; overflow-x: auto; }
.subnav a{ font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); white-space: nowrap; transition: color .15s; }
.subnav a:hover, .subnav a.active{ color: var(--paper); }
.subnav .ship-note{ margin-left: auto; color: var(--mute-2); display: flex; align-items: center; gap: 7px; }
.subnav .ship-note .led{ width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); }

/* ============================================================
   PRODUCT PACK RENDER (branded "pack shots")
   ============================================================ */
.pack-tile{
  position: relative; aspect-ratio: 4/3.4; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #20242b 0%, #15171b 45%, #0e0f12 100%);
  display: grid; place-items: center;
}
.pack-tile::after{ content:""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 110%, rgba(0,0,0,.6), transparent 70%); }
.pack-tile .floor{ position: absolute; left: 8%; right: 8%; bottom: 11%; height: 16px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.55), transparent 72%); filter: blur(3px); }

/* shared label plate used across packs */
.plate{
  background: var(--paper); color: var(--ink); border: 1px solid rgba(0,0,0,.25);
  display: flex; flex-direction: column; gap: 3px;
}
.plate .pl-top{ display: flex; align-items: center; justify-content: space-between; }
.plate .pl-logo{ height: 11px; }
.plate .pl-pzn{ font-family: var(--ff-mono); font-size: 6px; color: #555; letter-spacing: .08em; }
.plate .pl-name{ font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.plate .pl-sub{ font-weight: 500; color: #6a6862; }
.plate .pl-dose{ font-weight: 900; color: var(--eagle); letter-spacing: -.03em; line-height: 1; }
.plate .pl-stripe{ height: 4px; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; }
.plate .pl-stripe i:nth-child(1){ background:#1a1a1a; } .plate .pl-stripe i:nth-child(2){ background: var(--eagle); } .plate .pl-stripe i:nth-child(3){ background: var(--sunray); }
.plate .pl-fine{ font-family: var(--ff-mono); font-size: 6px; color: #6a6862; letter-spacing: .04em; }

/* VIAL (steroid amber + peptide bone) */
.r-vial{ position: relative; width: 116px; height: 230px; filter: drop-shadow(0 22px 24px rgba(0,0,0,.5)); }
.r-vial .cap{ width: 58px; height: 26px; margin: 0 auto; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg,#e7c54f,#d2a925); background-blend-mode: normal; }
.r-vial.amber .cap{ background: linear-gradient(180deg,#caa23f,#a9821f); }
.r-vial.red .cap{ background: linear-gradient(180deg,#e8474d,#c01c23); }
.r-vial.ink .cap{ background: linear-gradient(180deg,#3a3d44,#1c1e22); }
.r-vial .crimp{ width: 66px; height: 9px; margin: 0 auto; background: linear-gradient(180deg,#d9d4c8,#a9a496); border-radius: 1px; }
.r-vial .glass{ position: relative; width: 100%; height: 195px; border-radius: 8px 8px 12px 12px; overflow: hidden;
  background: linear-gradient(100deg, rgba(255,255,255,.18), rgba(255,255,255,0) 30%), linear-gradient(180deg,#cfa86a,#8a6a38);
  border: 1px solid rgba(0,0,0,.3); }
.r-vial.amber .glass{ background: linear-gradient(100deg, rgba(255,255,255,.22), rgba(255,255,255,0) 32%), linear-gradient(180deg,#b9883f,#6e4f22); }
.r-vial.bone .glass{ background: linear-gradient(100deg, rgba(255,255,255,.5), rgba(255,255,255,0) 34%), linear-gradient(180deg,#f3efe6,#cfc8ba); }
.r-vial.clear .glass{ background: linear-gradient(100deg, rgba(255,255,255,.45), rgba(255,255,255,0) 34%), linear-gradient(180deg,#e9eef0,#c2c9cc); }
.r-vial .glass .shine{ position:absolute; top:6%; left:14%; width:9px; height:80%; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); border-radius: 10px; filter: blur(1px); }
.r-vial.bone .glass .cake{ position: absolute; left: 16%; right: 16%; bottom: 10%; height: 28%; border-radius: 4px; background: linear-gradient(180deg,#fff,#e7e1d4); border: 1px solid rgba(0,0,0,.08); }
.r-vial .vlabel{ position: absolute; left: 7px; right: 7px; top: 34px; bottom: 16px; padding: 7px 7px 6px; }
.r-vial .vlabel.short{ bottom: auto; height: 92px; top: 26px; }
.r-vial .vlabel .pl-name{ font-size: 12px; }
.r-vial .vlabel .pl-dose{ font-size: 15px; margin-top: 2px; }
.r-vial.bone .vlabel .pl-dose, .r-vial.clear .vlabel .pl-dose{ color: var(--ink); }

/* AMPOULE */
.r-amp{ position: relative; width: 44px; height: 168px; filter: drop-shadow(0 16px 18px rgba(0,0,0,.5)); }
.r-amp .tip{ width: 7px; height: 26px; margin: 0 auto; background: linear-gradient(180deg,#d7cdb0,#b3a988); border-radius: 4px 4px 0 0; }
.r-amp .neck{ width: 16px; height: 16px; margin: 0 auto; background: linear-gradient(180deg,#cfc6aa,#b3a988); }
.r-amp .ring{ width: 30px; height: 4px; margin: 2px auto; background: var(--eagle); }
.r-amp .body{ width: 44px; height: 108px; border-radius: 5px 5px 7px 7px; position: relative; overflow: hidden;
  background: linear-gradient(100deg, rgba(255,255,255,.3), rgba(255,255,255,0) 40%), linear-gradient(180deg,#c79a55,#7c5a2c); border: 1px solid rgba(0,0,0,.3); }
.r-amp .body span{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; font-family: var(--ff-mono); font-size: 7px; font-weight: 700; color:#2a2010; letter-spacing:.06em; line-height:1.5; }

/* CARTON (ancillary tablets) */
.r-carton{ position: relative; width: 158px; height: 232px; padding: 14px 13px; display: flex; flex-direction: column; gap: 5px;
  background: linear-gradient(180deg,#fbfaf7,#ece7dc); border: 1px solid rgba(0,0,0,.25); border-radius: 2px;
  box-shadow: inset -10px 0 18px -10px rgba(0,0,0,.18), 0 22px 26px -12px rgba(0,0,0,.55); }
.r-carton .ct-top{ display:flex; align-items:center; justify-content:space-between; }
.r-carton .ct-logo{ height: 13px; }
.r-carton .ct-rx{ font-family: var(--ff-mono); font-size: 7px; font-weight:700; background: var(--sunray); color:#1a1a1a; padding: 2px 4px; letter-spacing:.1em; }
.r-carton .ct-name{ font-weight: 800; font-size: 19px; letter-spacing: -.02em; line-height: 1; color: var(--ink); margin-top: 8px; }
.r-carton .ct-brand{ font-weight: 500; font-size: 11px; color: #6a6862; }
.r-carton .ct-dose{ font-weight: 900; font-size: 34px; letter-spacing: -.03em; color: var(--eagle); line-height: 1; margin-top: 6px; }
.r-carton .ct-form{ font-family: var(--ff-narrow); font-size: 10px; color: #6a6862; }
.r-carton .ct-count{ margin-top: auto; font-weight: 800; font-size: 18px; color: var(--ink); }
.r-carton .ct-stripe{ height: 4px; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; margin-top: 4px; }
.r-carton .ct-stripe i:nth-child(1){ background:#1a1a1a; } .r-carton .ct-stripe i:nth-child(2){ background: var(--eagle); } .r-carton .ct-stripe i:nth-child(3){ background: var(--sunray); }
.r-carton .ct-bar{ display:flex; gap:1px; height: 16px; align-items:end; margin-top:5px; }
.r-carton .ct-bar i{ width:2px; height:100%; background:#1a1a1a; } .r-carton .ct-bar i:nth-child(2n){ width:1px; } .r-carton .ct-bar i:nth-child(3n){ height:65%; } .r-carton .ct-bar i:nth-child(5n){ height:45%; }

/* BOX (HGH kit) */
.r-box{ position: relative; width: 192px; min-height: 168px; padding: 15px 16px 22px; display:flex; flex-direction:column; gap:4px;
  background: linear-gradient(160deg,#15171b,#0e0f12); border: 1px solid rgba(255,255,255,.14); border-radius: 3px;
  box-shadow: 0 22px 30px -14px rgba(0,0,0,.7); color: var(--paper); }
.r-box .bx-top{ display:flex; align-items:center; justify-content:space-between; }
.r-box .bx-logo{ height: 13px; }
.r-box .bx-name{ font-weight: 800; font-size: 19px; letter-spacing: -.02em; line-height:1.05; margin-top: 8px; }
.r-box .bx-sub{ font-family: var(--ff-narrow); font-size: 11px; color: var(--mute); }
.r-box .bx-dose{ font-weight: 900; font-size: 24px; color: var(--sunray); margin-top: 12px; letter-spacing: -.02em; line-height:1; }
.r-box .bx-stripe{ position:absolute; left:0; bottom:0; right:0; height: 5px; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; }
.r-box .bx-stripe i:nth-child(1){ background:#2a2d33; } .r-box .bx-stripe i:nth-child(2){ background: var(--eagle); } .r-box .bx-stripe i:nth-child(3){ background: var(--sunray); }

.pack-set{ display: flex; align-items: flex-end; gap: 14px; }

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.grid{ display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.grid.cols-4{ grid-template-columns: repeat(4, 1fr); }
.card{
  position: relative; background: var(--ink-1); display: flex; flex-direction: column;
  transition: background .18s ease;
}
.card:hover{ background: var(--ink-2); }
.card .media{ position: relative; }
.card .media .pack-tile{ transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.card:hover .media .pack-tile{ transform: scale(1.04); }
.card .flags{ position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; z-index: 3; }
.card .catflag{ position: absolute; top: 12px; right: 12px; z-index: 3; }
.card .quickadd{
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 4;
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
}
.card:hover .quickadd, .card:focus-within .quickadd{ opacity: 1; transform: none; }
.card .body{ padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; border-top: 1px solid var(--line); }
.card .pname{ font-weight: 700; font-size: 16px; letter-spacing: -.01em; line-height: 1.15; }
.card .pname .gn{ color: var(--mute); font-weight: 500; }
.card .pmeta{ display: flex; gap: 8px; font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.card .psum{ font-family: var(--ff-narrow); font-size: 13px; color: var(--mute); line-height: 1.35; flex: 1; }
.card .pfoot{ display: flex; align-items: flex-end; justify-content: space-between; margin-top: 4px; }
.price-stack .p-main{ font-family: var(--ff-mono); font-weight: 700; font-size: 17px; color: var(--price); letter-spacing: -.01em; }
.price-stack .p-sub{ font-family: var(--ff-mono); font-size: 11px; color: var(--mute); }
.stock-dot{ display:inline-flex; align-items:center; gap:6px; font-family:var(--ff-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color: var(--mute); }
.stock-dot i{ width:7px; height:7px; border-radius:50%; background: var(--good); box-shadow: 0 0 7px var(--good); }
.stock-dot.low i{ background: var(--sunray); box-shadow: 0 0 7px var(--sunray); }
.stock-dot.out i{ background: var(--mute-2); box-shadow: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{ border-top: 1px solid var(--line); background: var(--ink-1); margin-top: 40px; position: relative; z-index: 1; }
.foot-cta{ border-bottom: 1px solid var(--line); }
.foot-cta-inner{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; padding-block: clamp(40px, 6vw, 72px); }
.foot-grid{ display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; padding-block: 54px; }
.foot-col h4{ font-family: var(--ff-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin: 0 0 16px; }
.foot-col a{ display: block; color: var(--paper); font-size: 14px; padding: 5px 0; transition: color .15s; }
.foot-col a:hover{ color: var(--sunray); }
.foot-brand .mark{ width: 40px; }
.pay-row{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pay-pill{ display:flex; align-items:center; gap:7px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .06em; padding: 7px 11px; border: 1px solid var(--line); border-radius: 100px; color: var(--paper); }
.pay-pill .sym{ width:16px; height:16px; border-radius:50%; display:grid; place-items:center; font-size:9px; font-weight:700; color:#0c0d0f; }
.foot-bottom{ border-top: 1px solid var(--line); padding-block: 22px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.foot-bottom .meta{ font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--mute-2); text-transform: uppercase; }
.disclaimer{ font-family: var(--ff-narrow); font-size: 12px; color: var(--mute-2); line-height: 1.5; max-width: 80ch; margin-top: 12px; }

/* ---------- Marquee ---------- */
.marquee{ overflow: hidden; border-block: 1px solid var(--line); background: var(--ink-1); }
.marquee-track{ display: flex; gap: 48px; white-space: nowrap; padding-block: 14px; width: max-content; animation: marq 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee-track span{ font-family: var(--ff-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); display: inline-flex; gap: 48px; align-items: center; }
.marquee-track span::after{ content:"✦"; color: var(--accent); }
@keyframes marq{ to{ transform: translateX(-50%); } }

/* ---------- Toast ---------- */
.toast-wrap{ position: fixed; right: 20px; bottom: 20px; z-index: 300; display: flex; flex-direction: column; gap: 10px; }
.toast{ display:flex; align-items:center; gap: 12px; background: var(--ink-3); border: 1px solid var(--line); border-left: 3px solid var(--good); border-radius: var(--radius); padding: 13px 16px; min-width: 260px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.7); animation: toastin .25s ease; }
.toast .tt-name{ font-weight: 700; font-size: 13px; }
.toast .tt-sub{ font-family: var(--ff-mono); font-size: 10.5px; color: var(--mute); }
@keyframes toastin{ from{ opacity: 0; transform: translateX(20px); } }

/* ---------- Forms ---------- */
.field{ display: flex; flex-direction: column; gap: 7px; }
.field label{ font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.field input, .field select, .field textarea{
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--paper); font-family: var(--ff); font-size: 14px; padding: 13px 14px; outline: none; transition: border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--sunray); }
.field input::placeholder, .field textarea::placeholder{ color: var(--mute-2); }

/* ---------- Misc panels ---------- */
.panel{ background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--radius); }
.divider{ height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- Mobile nav ---------- */
.mobile-nav{ display: none; }

@media (max-width: 1080px){
  .head-search{ display: none; }
  .nav{ display: none; }
  .subnav .ship-note{ display: none; }
  .burger{ display: grid; place-items: center; }
  .grid.cols-4{ grid-template-columns: repeat(2, 1fr); }
  .foot-grid{ grid-template-columns: 1fr 1fr; gap: 32px; }
  .foot-cta-inner{ grid-template-columns: 1fr; }
  .mobile-nav.open{ display: block; position: fixed; inset: 0; z-index: 200; background: var(--ink); padding: 24px; }
  .mobile-nav .mclose{ position: absolute; top: 20px; right: 20px; }
  .mobile-nav nav{ display: flex; flex-direction: column; gap: 4px; margin-top: 60px; }
  .mobile-nav nav a{ font-size: 26px; font-weight: 800; letter-spacing: -.02em; padding: 12px 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 720px){
  .grid.cols-3{ grid-template-columns: 1fr 1fr; }
  .grid.cols-4{ grid-template-columns: 1fr 1fr; }
  .foot-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .grid.cols-3, .grid.cols-4{ grid-template-columns: 1fr; }
  :root{ --gut: 18px; }
  .head-inner{ gap: 10px; height: 60px; }
  .brand .wordmark{ font-size: 18px; }
  .brand .sub{ display: none; }
  .brand .mark{ width: 30px; height: 30px; }
  .icon-btn, .burger{ width: 40px; height: 40px; }
  .toast-wrap{ left: 14px; right: 14px; }
  .toast{ min-width: 0; }
}

/* ===== home ===== */

/* ---------- HERO ---------- */
.hero{ position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-bg{ position: absolute; inset: 0; }
.hero-bg img{ width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: grayscale(.3) contrast(1.05); }
.hero-grad{ position: absolute; inset: 0;
  background:
    radial-gradient(80% 70% at 78% 30%, rgba(222,34,41,.18), transparent 60%),
    linear-gradient(180deg, rgba(12,13,15,.55) 0%, rgba(12,13,15,.85) 55%, var(--ink) 100%),
    linear-gradient(90deg, var(--ink) 8%, transparent 60%); }
.hero-inner{ position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding-block: clamp(56px, 9vw, 120px); }
.hero-copy{ max-width: 620px; }
.hero-copy h1{ margin: 18px 0 0; }
.hero-copy .lede{ margin-top: 22px; font-size: clamp(16px,1.7vw,20px); }
.hero-cta{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero-pays{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.hero-stats{ display: flex; gap: 36px; margin-top: 38px; border-top: 1px solid var(--line); padding-top: 22px; flex-wrap: wrap; }
.hstat .n{ font-weight: 900; font-size: clamp(26px,3vw,38px); letter-spacing: -.03em; line-height: 1; }
.hstat .n .sun{ color: var(--sunray); }
.hstat .l{ font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-top: 7px; }
/* hero stage */
.hero-stage{ position: relative; height: 520px; display: grid; place-items: center; }
.hero-stage .glow{ position: absolute; width: 70%; height: 70%; border-radius: 50%; background: radial-gradient(circle, rgba(254,200,43,.16), transparent 65%); filter: blur(20px); }
.hero-stage .pset{ position: relative; display: flex; align-items: flex-end; gap: 22px; transform: scale(1.18); }
.hero-stage .pfloat{ filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); animation: floaty 6s ease-in-out infinite; }
.hero-stage .pfloat:nth-child(2){ animation-delay: -2s; } .hero-stage .pfloat:nth-child(3){ animation-delay: -4s; }
@keyframes floaty{ 50%{ transform: translateY(-14px); } }
.hero-spec{ position: absolute; font-family: var(--ff-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); border:1px solid var(--line); background: rgba(12,13,15,.7); padding: 6px 9px; border-radius: 100px; white-space: nowrap; }
.hero-spec.s1{ top: 6%; right: 4%; } .hero-spec.s2{ bottom: 12%; left: -2%; }
.hero-spec .led{ display:inline-block; width:6px;height:6px;border-radius:50%;background:var(--good);box-shadow:0 0 7px var(--good);margin-right:6px; }

@media (prefers-reduced-motion: reduce){ .hero-stage .pfloat{ animation: none; } }

/* ---------- section heads ---------- */
.sec-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.sec-head .h1{ margin: 12px 0 0; }
.sec-link{ font-family: var(--ff-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper); display:inline-flex; align-items:center; gap:8px; border-bottom: 1px solid var(--accent); padding-bottom: 4px; }
.sec-link svg{ width: 15px; height: 15px; }

/* ---------- category tiles ---------- */
.cat-grid{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cat-tile{ position: relative; background: var(--ink-1); padding: 28px 24px 26px; min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: background .2s; }
.cat-tile:hover{ background: var(--ink-2); }
.cat-tile .ct-num{ font-family: var(--ff-mono); font-size: 11px; color: var(--mute); letter-spacing: .14em; }
.cat-tile h3{ font-weight: 800; font-size: 24px; letter-spacing: -.02em; margin: 10px 0 8px; }
.cat-tile p{ font-family: var(--ff-narrow); font-size: 13px; color: var(--mute); line-height: 1.4; max-width: 56%; position: relative; z-index: 2; }
.cat-tile .ct-pack{ position: absolute; right: 16px; bottom: 46px; transform: scale(.38); transform-origin: bottom right; opacity: .9; pointer-events:none; }
.cat-tile .ct-go{ display:inline-flex; align-items:center; gap:8px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sunray); margin-top: auto; position: relative; z-index: 2; }
.cat-tile .ct-go svg{ width: 14px; height: 14px; transition: transform .2s; }
.cat-tile:hover .ct-go svg{ transform: translateX(4px); }
.cat-tile .ct-count{ position:absolute; top: 24px; right: 24px; font-family: var(--ff-mono); font-size: 11px; color: var(--mute); }

/* other-category cards (category page footer) */
.other-cats-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ocat{ position: relative; background: var(--ink-1); padding: 26px 22px 22px; min-height: 232px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: background .2s; }
.ocat:hover{ background: var(--ink-2); }
.ocat h3{ font-weight: 800; font-size: 20px; letter-spacing: -.02em; margin: 8px 0 6px; position: relative; z-index: 2; max-width: 52%; }
.ocat p{ font-family: var(--ff-narrow); font-size: 12.5px; color: var(--mute); line-height: 1.4; max-width: 50%; position: relative; z-index: 2; }
.ocat .eyebrow{ position: relative; z-index: 2; max-width: 52%; }
.ocat .og{ display: inline-flex; align-items: center; gap: 7px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sunray); margin-top: 14px; position: relative; z-index: 2; }
.ocat .og svg{ width: 14px; height: 14px; flex: 0 0 auto; transition: transform .2s; }
.ocat:hover .og svg{ transform: translateX(4px); }
.ocat .opack{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-46%) scale(.66);
  transform-origin: center right;
  opacity: .92;
  pointer-events: none;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.ocat:hover .opack{ transform: translateY(-46%) scale(.68); }

/* ---------- value props ---------- */
.value-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.vprop{ background: var(--ink-1); padding: 32px 28px; display:flex; flex-direction: column; gap: 12px; }
.vprop .vp-ico{ width: 44px; height: 44px; border:1px solid var(--line); border-radius: var(--radius); display:grid; place-items:center; color: var(--sunray); }
.vprop .vp-ico svg{ width: 22px; height: 22px; }
.vprop h3{ font-weight: 800; font-size: 19px; letter-spacing: -.015em; }
.vprop p{ font-family: var(--ff-narrow); font-size: 14px; color: var(--mute); line-height: 1.45; }

/* ---------- crypto / privacy split ---------- */
.split{ display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border:1px solid var(--line); }
.split .s-copy{ background: var(--ink-1); padding: clamp(32px,4vw,56px); }
.split .s-visual{ background: var(--ink-1); position: relative; overflow: hidden; min-height: 420px; }
.split .s-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; opacity:.5; }
.split .s-visual .sv-grad{ position:absolute; inset:0; background: linear-gradient(120deg, var(--ink-1), transparent 70%); }
.pay-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.pay-card{ border:1px solid var(--line); border-radius: var(--radius); padding: 18px; display:flex; gap:14px; align-items:flex-start; }
.pay-card .pc-sym{ width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:700;flex:0 0 auto; }
.pay-card h4{ font-weight:700; font-size:15px; margin:0 0 3px; }
.pay-card p{ font-family: var(--ff-mono); font-size: 11px; color: var(--mute); margin:0; letter-spacing:.04em; }
.steps{ counter-reset: s; display:flex; flex-direction:column; gap:0; margin-top: 14px; }
.step{ display:grid; grid-template-columns: 30px 1fr; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:0; }
.step .sn{ font-weight:900; color:var(--accent); font-size:18px; }
.step h5{ margin:0 0 3px; font-size:15px; font-weight:700; }
.step p{ margin:0; font-family:var(--ff-narrow); font-size:13px; color:var(--mute); }

/* ---------- quality strip ---------- */
.qstrip{ display:grid; grid-template-columns: 1.1fr .9fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.qstrip .q-img{ position:relative; min-height: 460px; overflow:hidden; background: var(--ink-1); }
.qstrip .q-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72; }
.qstrip .q-img .q-tag{ position:absolute; left:24px; bottom:24px; }
.qstrip .q-copy{ background: var(--ink-1); padding: clamp(32px,4vw,56px); display:flex; flex-direction:column; justify-content:center; }
.qmetrics{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:28px; }
.qmetric{ background:var(--ink-1); padding:22px; }
.qmetric .n{ font-weight:900; font-size:34px; letter-spacing:-.03em; }
.qmetric .n .sun{ color:var(--sunray); }
.qmetric .l{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-top:6px; }

@media (max-width: 1200px){
  .cat-grid{ grid-template-columns: repeat(3, 1fr); }
  .other-cats-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-stage{ height: 380px; order: -1; }
  .cat-grid{ grid-template-columns: 1fr 1fr; }
  .value-grid{ grid-template-columns: 1fr; }
  .split, .qstrip{ grid-template-columns: 1fr; }
  .qstrip .q-img{ min-height: 300px; }
}
@media (max-width: 560px){
  .cat-grid{ grid-template-columns: 1fr; }
  .other-cats-grid{ grid-template-columns: 1fr; }
  .ocat .opack{ right: 6px; transform: translateY(-44%) scale(.58); }
  .ocat:hover .opack{ transform: translateY(-44%) scale(.6); }
  .pay-grid{ grid-template-columns: 1fr; }
  .hero-stage{ height: 280px; }
  .hero-stage .pset{ transform: scale(.58); gap: 10px; }
  .hero-spec{ display: none; }
  .hero-stats{ gap: 22px; }
  .cat-tile p{ max-width: 100%; }
  .cat-tile .ct-pack{ display: none; }
}

/* ===== catalogue ===== */

.page-head{ border-bottom:1px solid var(--line); padding-block: clamp(40px,6vw,72px); position:relative; overflow:hidden; }
.page-head .ph-bg{ position:absolute; inset:0; background: radial-gradient(70% 120% at 85% 0%, rgba(222,34,41,.12), transparent 60%); }
.page-head h1{ margin:14px 0 0; }
.page-head .lede{ margin-top:16px; }
.shop{ display:grid; grid-template-columns: 248px 1fr; gap:36px; align-items:start; padding-block: 40px; }
.filters{ position: sticky; top: 124px; display:flex; flex-direction:column; gap:26px; }
.filter-group h4{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.filter-opt{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; cursor:pointer; color:var(--paper); font-size:14px; font-weight:500; transition:color .15s; }
.filter-opt:hover{ color:var(--sunray); }
.filter-opt.active{ color:var(--sunray); }
.filter-opt .cnt{ font-family:var(--ff-mono); font-size:11px; color:var(--mute); }
.filter-opt.active .cnt{ color:var(--sunray); }
.shop-main{ min-width:0; }
.shop-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.shop-count{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; color:var(--mute); text-transform:uppercase; }
.shop-count b{ color:var(--paper); }
.shop-tools{ display:flex; gap:10px; align-items:center; }
.sort-sel{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius); color:var(--paper); font-family:var(--ff); font-size:13px; padding:10px 14px; outline:none; cursor:pointer; }
.mobile-cats{ display:none; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:18px; }
.mobile-cats a{ white-space:nowrap; }
.empty{ padding:60px 20px; text-align:center; color:var(--mute); border:1px dashed var(--line); border-radius:var(--radius); }
@media (max-width: 900px){
  .shop{ grid-template-columns:1fr; }
  .filters{ display:none; }
  .mobile-cats{ display:flex; }
}

/* ===== category ===== */

.cat-hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); min-height: 380px; display:flex; align-items:flex-end; }
.cat-hero .ch-bg{ position:absolute; inset:0; }
.cat-hero .ch-bg img{ width:100%; height:100%; object-fit:cover; opacity:.42; filter:grayscale(.25) contrast(1.05); }
.cat-hero .ch-grad{ position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(12,13,15,.5), rgba(12,13,15,.72) 60%, var(--ink)),
  radial-gradient(70% 100% at 80% 100%, rgba(254,200,43,.12), transparent 60%); }
.cat-hero-inner{ position:relative; padding-block: clamp(40px,7vw,80px); width:100%; }
.cat-hero .crumbs{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); display:flex; gap:8px; align-items:center; }
.cat-hero .crumbs a:hover{ color:var(--paper); }
.cat-hero h1{ margin:16px 0 0; }
.cat-hero .lede{ margin-top:16px; }
.cat-hero .ch-stats{ display:flex; gap:30px; margin-top:28px; flex-wrap:wrap; }
.ch-stat .n{ font-weight:900; font-size:26px; letter-spacing:-.02em; }
.ch-stat .n .sun{ color:var(--sunray); }
.ch-stat .l{ font-family:var(--ff-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-top:5px; }
.cat-tabs{ border-bottom:1px solid var(--line); background:rgba(12,13,15,.6); position:sticky; top:115px; z-index:50; }
.cat-tabs-inner{ display:flex; gap:6px; overflow-x:auto; padding-block:12px; }
.cat-tabs a{ white-space:nowrap; font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:9px 16px; border:1px solid var(--line); border-radius:100px; color:var(--mute); transition:all .15s; }
.cat-tabs a:hover{ color:var(--paper); border-color:var(--paper); }
.cat-tabs a.active{ background:var(--sunray); color:var(--ink); border-color:var(--sunray); }
.cat-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:32px 0 22px; flex-wrap:wrap; }
.cat-toolbar .cnt{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); }
.cat-toolbar .cnt b{ color:var(--paper); }
.sort-sel{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius); color:var(--paper); font-family:var(--ff); font-size:13px; padding:10px 14px; outline:none; cursor:pointer; }
.cat-note{ border:1px solid var(--line); border-left:3px solid var(--sunray); border-radius:var(--radius); background:var(--ink-1); padding:20px 22px; margin-top:36px; display:flex; gap:16px; align-items:flex-start; }
.cat-note svg{ width:22px; height:22px; color:var(--sunray); flex:0 0 auto; margin-top:2px; }
.cat-note p{ margin:0; font-family:var(--ff-narrow); font-size:14px; color:var(--mute); line-height:1.5; }
.cat-note b{ color:var(--paper); }
@media (max-width:900px){ .cat-tabs{ top:115px; } }

/* ===== product ===== */

.crumbs{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); display:flex; gap:8px; align-items:center; padding-top:26px; flex-wrap:wrap; }
.crumbs a:hover{ color:var(--paper); }
.pdp{ display:grid; grid-template-columns: 1.02fr .98fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:22px; }
.pdp-media{ background:var(--ink-1); position:relative; }
.pdp-stage{ position:relative; aspect-ratio: 1/1; display:grid; place-items:center; overflow:hidden;
  background: radial-gradient(120% 90% at 50% 0%, #20242b 0%, #15171b 45%, #0e0f12 100%); }
.pdp-stage::after{ content:""; position:absolute; inset:0; background:radial-gradient(55% 45% at 50% 112%, rgba(0,0,0,.6), transparent 70%); }
.pdp-stage .glow{ position:absolute; width:60%; height:60%; border-radius:50%; background:radial-gradient(circle, rgba(254,200,43,.14), transparent 65%); filter:blur(24px); }
.pdp-stage .pbig{ transform:scale(1.55); filter:drop-shadow(0 34px 40px rgba(0,0,0,.6)); position:relative; }
.pdp-stage .floor{ position:absolute; left:14%; right:14%; bottom:13%; height:18px; border-radius:50%; background:radial-gradient(ellipse, rgba(0,0,0,.55), transparent 72%); filter:blur(4px); }
.pdp-stage .stage-tag{ position:absolute; left:18px; top:18px; }
.pdp-feats{ display:grid; grid-template-columns:repeat(3,1fr); }
.pdp-feat{ padding:18px; border-top:1px solid var(--line); border-right:1px solid var(--line); }
.pdp-feat:last-child{ border-right:0; }
.pdp-feat .k{ font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }
.pdp-feat .v{ font-weight:700; font-size:16px; margin-top:5px; }
.pdp-feat .v .sun{ color:var(--sunray); }

.pdp-info{ background:var(--ink-1); padding: clamp(26px,3vw,42px); display:flex; flex-direction:column; }
.pdp-info .top-row{ display:flex; align-items:center; gap:10px; }
.pdp-info h1{ margin:16px 0 0; }
.pdp-info .gn{ color:var(--mute); font-weight:500; }
.pdp-info .summary{ font-family:var(--ff-narrow); font-size:17px; color:var(--paper); line-height:1.45; margin-top:14px; }
.price-block{ display:flex; align-items:flex-end; gap:18px; margin-top:24px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.price-block .pp-main{ font-family:var(--ff-mono); font-weight:700; font-size:34px; color:var(--price); letter-spacing:-.02em; line-height:1; }
.price-block .pp-alt{ font-family:var(--ff-mono); font-size:13px; color:var(--mute); display:flex; flex-direction:column; gap:4px; }
.price-block .pp-aud{ margin-left:auto; text-align:right; }
.price-block .pp-aud .a{ font-weight:700; font-size:20px; }
.price-block .pp-aud .l{ font-family:var(--ff-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); }
.buy-row{ display:flex; gap:12px; margin-top:22px; align-items:stretch; }
.qty{ display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.qty button{ width:46px; height:100%; background:var(--ink-2); border:0; color:var(--paper); font-size:18px; }
.qty button:hover{ background:var(--ink-3); }
.qty input{ width:48px; text-align:center; background:transparent; border:0; color:var(--paper); font-family:var(--ff-mono); font-size:16px; font-weight:700; outline:none; -moz-appearance:textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button{ -webkit-appearance:none; }
.trust-row{ display:flex; gap:18px; margin-top:22px; flex-wrap:wrap; }
.trust-row .t{ display:flex; gap:9px; align-items:center; font-size:12.5px; color:var(--mute); }
.trust-row .t svg{ width:17px; height:17px; color:var(--sunray); flex:0 0 auto; }
.stockline{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.stockbar{ flex:1; height:5px; background:var(--ink-3); border-radius:100px; overflow:hidden; max-width:180px; }
.stockbar i{ display:block; height:100%; background:var(--good); }
.stockbar.low i{ background:var(--sunray); }

/* lower content */
.pdp-detail{ display:grid; grid-template-columns: 1.5fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-top:0; }
.pdp-detail .d-main{ background:var(--ink-1); padding: clamp(26px,3vw,42px); }
.pdp-detail .d-side{ background:var(--ink-1); padding: clamp(26px,3vw,42px); }
.d-block + .d-block{ margin-top:36px; }
.d-block h3{ font-weight:800; font-size:20px; letter-spacing:-.02em; margin:0 0 14px; display:flex; align-items:center; gap:10px; }
.d-block h3 .num{ font-family:var(--ff-mono); font-size:12px; color:var(--accent); }
.d-block p{ font-family:var(--ff-narrow); font-size:15px; color:var(--mute); line-height:1.6; }
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table tr{ border-bottom:1px solid var(--line); }
.spec-table td{ padding:13px 0; font-size:14px; }
.spec-table td:first-child{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); width:42%; }
.spec-table td:last-child{ font-weight:600; }
/* COA card */
.coa{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.coa-head{ background:var(--paper); color:var(--ink); padding:14px 16px; display:flex; align-items:center; justify-content:space-between; }
.coa-head .ch-l{ display:flex; align-items:center; gap:9px; }
.coa-head img{ height:20px; }
.coa-head .ch-t{ font-weight:800; font-size:13px; letter-spacing:-.01em; }
.coa-head .ch-pass{ font-family:var(--ff-mono); font-size:10px; font-weight:700; background:var(--good); color:#06210f; padding:4px 8px; border-radius:2px; letter-spacing:.08em; }
.coa-body{ padding:18px 16px; }
.coa-row{ display:flex; justify-content:space-between; font-family:var(--ff-mono); font-size:11.5px; padding:7px 0; border-bottom:1px dashed var(--line); }
.coa-row b{ color:var(--paper); } .coa-row span{ color:var(--mute); }
.chroma{ height:80px; margin-top:14px; display:flex; align-items:flex-end; gap:3px; padding:10px; background:var(--ink-2); border:1px solid var(--line); border-radius:2px; }
.chroma i{ flex:1; background:linear-gradient(180deg,var(--sunray),rgba(254,200,43,.2)); border-radius:1px 1px 0 0; }
.coa-foot{ font-family:var(--ff-mono); font-size:9.5px; color:var(--mute-2); letter-spacing:.06em; padding:0 16px 14px; text-transform:uppercase; }
.side-card{ border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-top:22px; }
.side-card h4{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin:0 0 12px; }
.side-card .pay-mini{ display:flex; gap:7px; flex-wrap:wrap; }
.warn{ border-left:3px solid var(--sunray); background:rgba(254,200,43,.05); padding:16px 18px; border-radius:var(--radius); margin-top:22px; }
.warn p{ margin:0; font-family:var(--ff-narrow); font-size:13px; color:var(--mute); line-height:1.5; }
.warn b{ color:var(--sunray); }

.related{ padding-block: clamp(48px,7vw,90px); }
.notfound{ padding:100px 20px; text-align:center; }

@media (max-width:900px){
  .pdp{ grid-template-columns:1fr; }
  .pdp-detail{ grid-template-columns:1fr; }
}

/* ===== cart ===== */

.cart-head{ padding-block: clamp(34px,5vw,56px) 0; }
.cart-head h1{ margin:14px 0 0; }
.cart-layout{ display:grid; grid-template-columns: 1fr 380px; gap:1px; background:var(--line); border:1px solid var(--line); margin:28px 0 80px; }
.cart-items{ background:var(--ink-1); }
.cart-summary{ background:var(--ink-1); padding: clamp(24px,3vw,34px); align-self:start; position:sticky; top:124px; }
.crow{ display:grid; grid-template-columns: 96px 1fr auto; gap:18px; padding:22px clamp(20px,2.5vw,30px); border-bottom:1px solid var(--line); align-items:center; }
.crow:last-child{ border-bottom:0; }
.crow .cthumb{ width:96px; height:96px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 100% at 50% 0%, #20242b, #0e0f12); }
.crow .cthumb .pack-wrap{ transform:scale(.4); transform-origin:center; }
.crow .cinfo .ccode{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.crow .cinfo h3{ font-weight:700; font-size:16px; letter-spacing:-.01em; margin:5px 0 4px; }
.crow .cinfo h3 a:hover{ color:var(--sunray); }
.crow .cinfo .cmeta{ font-family:var(--ff-narrow); font-size:13px; color:var(--mute); }
.crow .cright{ display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.crow .cprice{ font-family:var(--ff-mono); font-weight:700; font-size:16px; color:var(--price); }
.crow .cprice .sub{ display:block; font-weight:400; font-size:10.5px; color:var(--mute); text-align:right; margin-top:3px; }
.crow .cqty{ display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.crow .cqty button{ width:34px; height:34px; background:var(--ink-2); border:0; color:var(--paper); font-size:16px; }
.crow .cqty button:hover{ background:var(--ink-3); }
.crow .cqty span{ width:38px; text-align:center; font-family:var(--ff-mono); font-weight:700; font-size:14px; }
.crow .crm{ font-family:var(--ff-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute-2); background:none; border:0; padding:0; }
.crow .crm:hover{ color:var(--eagle); }
.sum-row{ display:flex; justify-content:space-between; padding:11px 0; font-size:14px; }
.sum-row.muted{ color:var(--mute); }
.sum-total{ display:flex; justify-content:space-between; align-items:flex-end; padding:18px 0 6px; border-top:1px solid var(--line); margin-top:10px; }
.sum-total .l{ font-weight:700; font-size:15px; }
.sum-total .r{ text-align:right; }
.sum-total .r .u{ font-family:var(--ff-mono); font-weight:700; font-size:26px; color:var(--price); line-height:1; }
.sum-total .r .b{ font-family:var(--ff-mono); font-size:12px; color:var(--mute); margin-top:5px; }
.pay-accepted{ display:flex; gap:7px; flex-wrap:wrap; margin:18px 0; }
.promo{ display:flex; gap:8px; margin:18px 0; }
.promo input{ flex:1; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius); color:var(--paper); font-family:var(--ff-mono); font-size:12px; padding:11px 12px; outline:none; text-transform:uppercase; letter-spacing:.08em; }
.promo input:focus{ border-color:var(--sunray); }
.trust-mini{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.trust-mini .t{ display:flex; gap:9px; align-items:center; font-size:12.5px; color:var(--mute); }
.trust-mini .t svg{ width:16px; height:16px; color:var(--sunray); flex:0 0 auto; }
.empty-cart{ background:var(--ink-1); border:1px solid var(--line); border-radius:var(--radius); padding:80px 30px; text-align:center; margin:28px 0 80px; }
.empty-cart .ec-ico{ width:64px; height:64px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; margin:0 auto 22px; color:var(--mute); }
@media (max-width:860px){ .cart-layout{ grid-template-columns:1fr; } .cart-summary{ position:static; } }
@media (max-width:520px){ .crow{ grid-template-columns:64px 1fr; } .crow .cthumb{ width:64px;height:64px; } .crow .cright{ grid-column:1/-1; flex-direction:row; justify-content:space-between; align-items:center; } }

/* ===== checkout ===== */

.co-head{ padding-block: clamp(34px,5vw,56px) 0; }
.co-head h1{ margin:14px 0 0; }
.co-layout{ display:grid; grid-template-columns: 1fr 400px; gap:1px; background:var(--line); border:1px solid var(--line); margin:28px 0 80px; }
.co-main{ background:var(--ink-1); padding: clamp(24px,3vw,40px); }
.co-side{ background:var(--ink-1); padding: clamp(24px,3vw,34px); align-self:start; position:sticky; top:124px; }
.co-step{ border-bottom:1px solid var(--line); padding-bottom:30px; margin-bottom:30px; }
.co-step:last-child{ border-bottom:0; padding-bottom:0; margin-bottom:0; }
.co-step-h{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.co-step-h .n{ width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--bone); font-weight:800; font-size:14px; display:grid; place-items:center; flex:0 0 auto; }
.co-step-h h3{ font-weight:800; font-size:20px; letter-spacing:-.02em; margin:0; }
.co-step-h .opt{ margin-left:auto; font-family:var(--ff-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid .full{ grid-column:1/-1; }
.privacy-note{ display:flex; gap:12px; align-items:flex-start; background:rgba(254,200,43,.05); border-left:3px solid var(--sunray); padding:14px 16px; border-radius:var(--radius); margin-top:18px; }
.privacy-note svg{ width:18px; height:18px; color:var(--sunray); flex:0 0 auto; margin-top:2px; }
.privacy-note p{ margin:0; font-family:var(--ff-narrow); font-size:13px; color:var(--mute); line-height:1.5; }
/* payment methods */
.pm-tabs{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.pm-tab{ border:1px solid var(--line); border-radius:var(--radius); padding:16px 12px; text-align:center; cursor:pointer; transition:all .15s; background:var(--ink-2); }
.pm-tab:hover{ border-color:var(--paper); }
.pm-tab.on{ border-color:var(--sunray); background:rgba(254,200,43,.06); }
.pm-tab .sym{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:19px; font-weight:700; margin:0 auto 10px; }
.pm-tab .nm{ font-weight:700; font-size:14px; }
.pm-tab .net{ font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.06em; color:var(--mute); margin-top:3px; }
/* invoice */
.invoice{ display:grid; grid-template-columns: 200px 1fr; gap:26px; margin-top:24px; align-items:start; }
.qr{ width:200px; height:200px; background:var(--paper); border-radius:var(--radius); padding:12px; }
.qr svg{ width:100%; height:100%; display:block; }
.inv-detail .inv-amt{ font-family:var(--ff-mono); font-weight:700; font-size:30px; color:var(--sunray); letter-spacing:-.01em; }
.inv-detail .inv-amt small{ font-size:14px; color:var(--mute); font-weight:400; }
.inv-detail .inv-fiat{ font-family:var(--ff-mono); font-size:13px; color:var(--mute); margin-top:4px; }
.addr-box{ display:flex; align-items:center; gap:10px; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin-top:18px; }
.addr-box code{ font-family:var(--ff-mono); font-size:12.5px; color:var(--paper); word-break:break-all; flex:1; }
.addr-box button{ background:var(--ink-3); border:1px solid var(--line); border-radius:6px; color:var(--paper); padding:7px 11px; font-size:11px; font-family:var(--ff-mono); letter-spacing:.06em; white-space:nowrap; }
.addr-box button:hover{ border-color:var(--sunray); color:var(--sunray); }
.timer-row{ display:flex; align-items:center; gap:10px; margin-top:16px; font-family:var(--ff-mono); font-size:12px; color:var(--mute); }
.timer-row .led{ width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 7px var(--good); animation:pulse 1.4s infinite; }
@keyframes pulse{ 50%{ opacity:.3; } }
.timer-row b{ color:var(--sunray); }
.inv-steps{ margin-top:18px; display:flex; flex-direction:column; gap:8px; }
.inv-steps .s{ font-family:var(--ff-narrow); font-size:13px; color:var(--mute); display:flex; gap:9px; }
.inv-steps .s b{ color:var(--paper); font-family:var(--ff-mono); font-size:11px; }
/* summary */
.os-item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); align-items:center; }
.os-item .ot{ width:52px; height:52px; border:1px solid var(--line); border-radius:6px; overflow:hidden; position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 100% at 50% 0%, #20242b, #0e0f12); }
.os-item .ot .pack-wrap{ transform:scale(.2); transform-origin:center; }
.os-item .oi{ flex:1; min-width:0; }
.os-item .oi .on{ font-weight:600; font-size:13px; }
.os-item .oi .om{ font-family:var(--ff-mono); font-size:10.5px; color:var(--mute); }
.os-item .op{ font-family:var(--ff-mono); font-weight:700; font-size:13px; color:var(--price); }
.os-item .oq{ font-family:var(--ff-mono); font-size:10px; color:var(--mute); }
.os-sum{ margin-top:16px; }
.os-sum .r{ display:flex; justify-content:space-between; padding:8px 0; font-size:13.5px; }
.os-sum .r.muted{ color:var(--mute); }
.os-total{ display:flex; justify-content:space-between; align-items:flex-end; border-top:1px solid var(--line); margin-top:8px; padding-top:16px; }
.os-total .u{ font-family:var(--ff-mono); font-weight:700; font-size:24px; color:var(--price); }
.os-total .b{ font-family:var(--ff-mono); font-size:11px; color:var(--mute); margin-top:4px; }
/* success */
.success{ background:var(--ink-1); border:1px solid var(--line); border-radius:var(--radius); padding:64px 30px; text-align:center; margin:28px 0 80px; }
.success .sc-ico{ width:80px; height:80px; border-radius:50%; background:rgba(76,175,110,.12); border:1px solid var(--good); display:grid; place-items:center; margin:0 auto 24px; color:var(--good); }
.success .code{ display:inline-block; font-family:var(--ff-mono); font-size:18px; font-weight:700; letter-spacing:.1em; color:var(--sunray); background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius); padding:12px 20px; margin:18px 0; }
@media (max-width:900px){ .co-layout{ grid-template-columns:1fr; } .co-side{ position:static; } .invoice{ grid-template-columns:1fr; } .qr{ margin:0 auto; } }
@media (max-width:520px){ .form-grid{ grid-template-columns:1fr; } .pm-tabs{ grid-template-columns:1fr 1fr; } }

/* ===== quality ===== */

.q-hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); min-height:420px; display:flex; align-items:flex-end; }
.q-hero .qh-bg{ position:absolute; inset:0; }
.q-hero .qh-bg img{ width:100%; height:100%; object-fit:cover; opacity:.4; filter:grayscale(.3) contrast(1.05); }
.q-hero .qh-grad{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(12,13,15,.5), rgba(12,13,15,.78) 60%, var(--ink)), radial-gradient(70% 100% at 15% 100%, rgba(222,34,41,.14), transparent 60%); }
.q-hero-inner{ position:relative; padding-block: clamp(48px,8vw,96px); }
.q-hero h1{ margin:16px 0 0; max-width:16ch; }
.q-hero .lede{ margin-top:18px; }
/* process */
.proc{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.proc .step{ background:var(--ink-1); padding:28px 22px; display:flex; flex-direction:column; gap:12px; min-height:240px; }
.proc .step .n{ font-family:var(--ff-mono); font-size:12px; color:var(--accent); letter-spacing:.12em; }
.proc .step .ico{ width:42px; height:42px; border:1px solid var(--line); border-radius:var(--radius); display:grid; place-items:center; color:var(--sunray); }
.proc .step .ico svg{ width:22px; height:22px; }
.proc .step h3{ font-weight:800; font-size:18px; letter-spacing:-.015em; margin:0; }
.proc .step p{ font-family:var(--ff-narrow); font-size:13px; color:var(--mute); line-height:1.45; margin:0; }
/* metric band */
.mband{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.mband .m{ background:var(--ink-1); padding:34px 26px; }
.mband .m .n{ font-weight:900; font-size:44px; letter-spacing:-.03em; line-height:1; }
.mband .m .n .sun{ color:var(--sunray); }
.mband .m .l{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-top:10px; }
.mband .m .d{ font-family:var(--ff-narrow); font-size:13px; color:var(--mute-2); margin-top:8px; line-height:1.4; }
/* testing split */
.tsplit{ display:grid; grid-template-columns: 1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.tsplit .t-copy{ background:var(--ink-1); padding: clamp(30px,4vw,52px); }
.tsplit .t-visual{ background:var(--ink-1); padding: clamp(30px,4vw,52px); display:flex; align-items:center; }
.coa{ width:100%; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.coa-head{ background:var(--paper); color:var(--ink); padding:16px 18px; display:flex; align-items:center; justify-content:space-between; }
.coa-head img{ height:22px; } .coa-head .ch-t{ font-weight:800; font-size:14px; }
.coa-head .ch-pass{ font-family:var(--ff-mono); font-size:10px; font-weight:700; background:var(--good); color:#06210f; padding:4px 9px; border-radius:2px; letter-spacing:.08em; }
.coa-body{ padding:20px 18px; }
.coa-row{ display:flex; justify-content:space-between; font-family:var(--ff-mono); font-size:12px; padding:9px 0; border-bottom:1px dashed var(--line); }
.coa-row b{ color:var(--paper); } .coa-row span{ color:var(--mute); }
.chroma{ height:96px; margin-top:16px; display:flex; align-items:flex-end; gap:3px; padding:10px; background:var(--ink-2); border:1px solid var(--line); border-radius:2px; }
.chroma i{ flex:1; background:linear-gradient(180deg,var(--sunray),rgba(254,200,43,.2)); border-radius:1px 1px 0 0; }
.coa-foot{ font-family:var(--ff-mono); font-size:10px; color:var(--mute-2); letter-spacing:.06em; padding:0 18px 16px; text-transform:uppercase; }
.tlist{ display:flex; flex-direction:column; gap:0; margin-top:20px; }
.tlist .ti{ display:grid; grid-template-columns:28px 1fr; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.tlist .ti:last-child{ border-bottom:0; }
.tlist .ti .tn{ font-weight:900; color:var(--accent); font-size:16px; }
.tlist .ti h4{ margin:0 0 4px; font-size:15px; font-weight:700; }
.tlist .ti p{ margin:0; font-family:var(--ff-narrow); font-size:13px; color:var(--mute); line-height:1.45; }
/* standards */
.std-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.std{ background:var(--ink-1); padding:28px 24px; }
.std .ico{ width:44px; height:44px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; color:var(--sunray); margin-bottom:16px; }
.std h3{ font-weight:700; font-size:17px; margin:0 0 8px; }
.std p{ font-family:var(--ff-narrow); font-size:14px; color:var(--mute); line-height:1.5; margin:0; }
@media (max-width:1000px){ .proc{ grid-template-columns:1fr 1fr; } .mband{ grid-template-columns:1fr 1fr; } .tsplit{ grid-template-columns:1fr; } .std-grid{ grid-template-columns:1fr; } }
@media (max-width:560px){ .proc{ grid-template-columns:1fr; } .mband{ grid-template-columns:1fr; } }

/* ===== shipping ===== */

.s-hero{ border-bottom:1px solid var(--line); padding-block: clamp(40px,6vw,76px); position:relative; overflow:hidden; }
.s-hero .bg{ position:absolute; inset:0; background: radial-gradient(70% 120% at 85% 0%, rgba(254,200,43,.1), transparent 60%); }
.s-hero h1{ margin:14px 0 0; }
.s-hero .lede{ margin-top:16px; }
.s-jump{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; }
.s-jump a{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:9px 16px; border:1px solid var(--line); border-radius:100px; color:var(--paper); transition:all .15s; }
.s-jump a:hover{ border-color:var(--sunray); color:var(--sunray); }
.ship-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.ship-card{ background:var(--ink-1); padding:28px 24px; display:flex; flex-direction:column; gap:12px; }
.ship-card .ico{ width:44px; height:44px; border:1px solid var(--line); border-radius:var(--radius); display:grid; place-items:center; color:var(--sunray); }
.ship-card .ico svg{ width:22px; height:22px; }
.ship-card h3{ font-weight:800; font-size:18px; letter-spacing:-.015em; margin:0; }
.ship-card p{ font-family:var(--ff-narrow); font-size:14px; color:var(--mute); line-height:1.5; margin:0; }
.ship-card .meta-line{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--sunray); margin-top:auto; }
/* regions table */
.regions{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.regions .rrow{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; padding:16px 22px; border-bottom:1px solid var(--line); font-size:14px; align-items:center; }
.regions .rrow:last-child{ border-bottom:0; }
.regions .rrow.head{ background:var(--ink-2); font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); }
.regions .rrow b{ font-weight:600; }
.regions .rrow .ok{ color:var(--good); font-family:var(--ff-mono); font-size:12px; }
/* pay steps */
.pay-split{ display:grid; grid-template-columns:1.3fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.pay-steps{ background:var(--ink-1); padding: clamp(28px,3.5vw,48px); }
.pay-aside{ background:var(--ink-1); padding: clamp(28px,3.5vw,48px); }
.pstep{ display:grid; grid-template-columns:42px 1fr; gap:18px; padding:22px 0; border-bottom:1px solid var(--line); }
.pstep:last-child{ border-bottom:0; }
.pstep .pn{ width:42px; height:42px; border-radius:50%; background:var(--accent); color:var(--bone); font-weight:800; font-size:17px; display:grid; place-items:center; }
.pstep h4{ margin:0 0 6px; font-size:17px; font-weight:700; }
.pstep p{ margin:0; font-family:var(--ff-narrow); font-size:14px; color:var(--mute); line-height:1.5; }
.wallet-card{ border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:12px; display:flex; gap:14px; align-items:center; }
.wallet-card .ws{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:18px; font-weight:700; flex:0 0 auto; }
.wallet-card h4{ margin:0 0 2px; font-size:14px; font-weight:700; }
.wallet-card p{ margin:0; font-family:var(--ff-mono); font-size:11px; color:var(--mute); }
/* faq */
.faq{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.faq details{ border-bottom:1px solid var(--line); }
.faq details:last-child{ border-bottom:0; }
.faq summary{ list-style:none; cursor:pointer; padding:22px 26px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-weight:700; font-size:16px; letter-spacing:-.01em; transition:background .15s; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ background:var(--ink-2); }
.faq summary .plus{ width:24px; height:24px; flex:0 0 auto; position:relative; }
.faq summary .plus::before, .faq summary .plus::after{ content:""; position:absolute; background:var(--sunray); transition:transform .2s; }
.faq summary .plus::before{ left:0; right:0; top:11px; height:2px; }
.faq summary .plus::after{ top:0; bottom:0; left:11px; width:2px; }
.faq details[open] summary .plus::after{ transform:scaleY(0); }
.faq .ans{ padding:0 26px 24px; }
.faq .ans p{ margin:0; font-family:var(--ff-narrow); font-size:15px; color:var(--mute); line-height:1.6; max-width:72ch; }
@media (max-width:1000px){ .ship-grid{ grid-template-columns:1fr; } .pay-split{ grid-template-columns:1fr; } .regions .rrow{ grid-template-columns:1.4fr 1fr 1fr; } .regions .rrow .hide-sm{ display:none; } }


/* PS FO: ensure grain sits above Classic bg */
#index body::before,
body::before { z-index: 0; }
#wrapper, #main, .page-content-wrapper { position: relative; z-index: 1; }