/* ─────────────────────────────────────────────────────────────────────────
   The Kompressor Haus — concept design.

   Their own brand is three things: near-black, an off-white, and the signal
   red that rings the badge. The brass comes off their own zinc-plated pulley
   photo. Nothing here is invented; it is all pulled off the logo and the
   product shots.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --black:   #0A0A0B;
  --pit:     #0F0F11;   /* section ground */
  --panel:   #17171A;   /* cards */
  --panel-2: #1E1E22;   /* hover / inset */
  --line:    #2B2B31;
  --line-2:  #3A3A42;

  --paper:   #F3F0E9;   /* the off-white in the badge */
  --ink:     #14140F;   /* type on paper */
  --body:    #A2A2AC;   /* type on black */
  --dim:     #6E6E79;

  --red:     #E1442A;
  --red-lit: #FF6B4D;
  --brass:   #C79B3B;

  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --sans:    "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "Space Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --wrap: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Several shop nodes carry `hidden` and also set display, which would beat the
   UA rule and leak them into the fallback state. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--black);
  color: var(--body);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }

::selection { background: var(--red); color: #fff; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--red); color: #fff; padding: .7rem 1.1rem;
  font-weight: 700; text-decoration: none;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--red-lit); outline-offset: 3px; }

.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }

/* ── Type scale ─────────────────────────────────────────────────────────── */

.kicker {
  font: 400 .74rem/1.4 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--red-lit);
  display: flex; align-items: center; gap: .7rem;
}
.kicker::after {
  content: ""; flex: 1; height: 1px; max-width: 5rem;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

h1, h2, h3, .kit-name, .stat b {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--paper);
  line-height: .96;
}

h2 { font-size: clamp(2rem, 5.2vw, 3.4rem); margin: .85rem 0 0; }
h3 { font-size: 1.32rem; line-height: 1.1; }

.lede { font-size: 1.06rem; max-width: 60ch; }
.note { color: var(--dim); font-size: .95rem; max-width: 66ch; margin-top: 1rem; }

em { font-style: normal; color: var(--red-lit); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  background: var(--red); color: #fff;
  padding: .85rem 1.5rem;
  font: 400 1rem/1 var(--display);
  letter-spacing: .045em; text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--red);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  transition: background .18s, color .18s;
}
.btn:hover { background: var(--red-lit); border-color: var(--red-lit); }

.btn-ghost { background: transparent; color: var(--paper); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--panel-2); border-color: var(--paper); color: var(--paper); }

/* the clipped corner eats into the last letter, so the right side runs wider */
.btn-sm { padding: .55rem 1.35rem .55rem 1rem; font-size: .88rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }

/* ── Header ─────────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 10, 11, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto;
  display: flex; align-items: center; gap: 1rem;
  min-height: 4.4rem;
}

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.brand img { width: 40px; height: 40px; }
.wordmark { display: grid; line-height: 1; }
.wordmark b {
  font: 400 1.18rem/1 var(--display); letter-spacing: .01em;
  text-transform: uppercase; color: var(--paper);
}
.wordmark i {
  font: 400 .6rem/1.5 var(--mono); font-style: normal;
  letter-spacing: .13em; text-transform: uppercase; color: var(--dim);
}

.menu-box, .menu-btn { display: none; }

.nav-links { display: flex; align-items: center; gap: 1.35rem; }
.nav-links a {
  color: var(--body); text-decoration: none;
  font-size: .87rem; font-weight: 600; letter-spacing: .01em;
  padding: .3rem 0; border-bottom: 1px solid transparent;
  white-space: nowrap; flex: none;
}
.nav-links a:hover { color: var(--paper); border-bottom-color: var(--red); }
.nav-links a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--red); }
/* `.nav-links a` outranks `.btn-sm`, so the button restates its own padding */
.nav-links a.btn {
  color: #fff; border-bottom: 1px solid var(--red);
  padding: .55rem 1.35rem .55rem 1rem;
}
.nav-links a.btn:hover { color: #fff; }

/* ── 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; object-position: 62% 60%; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--black) 6%, rgba(10,10,11,.86) 44%, rgba(10,10,11,.35) 78%),
    linear-gradient(180deg, rgba(10,10,11,.55), transparent 30%, rgba(10,10,11,.9));
}

.hero-in {
  position: relative;
  padding: clamp(3.5rem, 10vw, 7.5rem) 0 clamp(3rem, 7vw, 5.5rem);
  max-width: 47rem;
}

.hero h1 {
  font-size: clamp(2.7rem, 8.2vw, 5.6rem);
  margin: 1rem 0 1.4rem;
  text-wrap: balance;
}
.hero .lede { color: #C8C8D0; }

.hero-note {
  margin-top: 1.9rem; padding-left: 1rem;
  border-left: 2px solid var(--brass);
  font-size: .88rem; color: var(--dim); max-width: 42ch;
}

/* ── Interior page header ───────────────────────────────────────────────── */

/* Interior pages don't get the photographic hero — they get a plain band, so
   the page starts on its subject rather than on another picture of a Beetle. */
.page-head {
  border-bottom: 1px solid var(--line);
  padding: clamp(2.6rem, 7vw, 4.6rem) 0 clamp(2.2rem, 5vw, 3.4rem);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(225,68,42,.10), transparent 58%),
    var(--pit);
}
.page-head h1 { font-size: clamp(2.2rem, 6vw, 3.9rem); margin: .9rem 0 0; text-wrap: balance; }
.page-head .lede { margin-top: 1.1rem; color: #C0C0C9; }

/* ── Spec strip ─────────────────────────────────────────────────────────── */

.strip { background: var(--pit); border-bottom: 1px solid var(--line); }
.strip-in {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
}
.stat { background: var(--pit); padding: 1.6rem 1.3rem; }
.stat b { display: block; font-size: 2.1rem; color: var(--paper); }
.stat b span { color: var(--brass); font-size: .55em; }
.stat span.l {
  display: block; margin-top: .45rem;
  font: 400 .68rem/1.45 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim);
}

/* ── Sections ───────────────────────────────────────────────────────────── */

.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.band { background: var(--pit); border-block: 1px solid var(--line); }

.sec-head { max-width: 66ch; margin-bottom: 3rem; }

/* ── Home: the range at a glance ────────────────────────────────────────── */

/* Deliberately thinner than the cards on the kits page — name, power and what
   it fits. Anything more and the two pages are saying the same thing twice. */
.tiles { display: grid; gap: 1.2rem; grid-template-columns: repeat(4, 1fr); }

.tile {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color .18s, background .18s, transform .18s;
}
.tile:hover { border-color: var(--red); background: var(--panel-2); transform: translateY(-2px); }

/* a button can't live inside an anchor, so the link covers the upper card */
.tile-open { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }

.tile-shot { aspect-ratio: 16 / 11; overflow: hidden; background: var(--black); }
.tile-shot img { width: 100%; height: 100%; object-fit: cover; }

.tile-body { padding: 1.1rem 1.2rem 1.3rem; }
.tile-body h3 { font-size: 1.28rem; }
.tile-power { margin-top: .55rem; font: 400 1rem/1 var(--display); color: var(--brass); letter-spacing: .01em; }
.tile-fit { margin-top: .6rem; font-size: .85rem; color: var(--body); }

/* ── Buy affordance, wherever a kit is shown ────────────────────────────── */

/* Price and a way to buy sit on the kit itself — home tile, kits card, the
   finder's answer. Clicking opens the quick view, so it is two clicks from
   anywhere on the site to a full cart. */

.buy {
  display: flex; align-items: baseline; justify-content: center; gap: .55rem;
  width: 100%; cursor: pointer;
}
.buy-label { font: inherit; }
.buy-price { font: 400 1rem/1 var(--display); letter-spacing: .01em; opacity: .92; }

.buy-alt {
  display: block; width: 100%; margin-top: .55rem; padding: 0;
  background: none; border: 0; cursor: pointer; text-align: center;
  font: 400 .74rem/1.4 var(--mono); letter-spacing: .04em;
  color: var(--dim); text-decoration: underline; text-underline-offset: 3px;
}
.buy-alt:hover { color: var(--brass); }

.tile-buy { padding: 0 1.2rem 1.2rem; }
.tile-buy .btn { width: 100%; text-align: center; }

.min-buy { margin-top: .9rem; font-size: .87rem; }
.min-buy a { color: var(--red-lit); text-decoration: underline; text-underline-offset: 3px; }
.min-buy a:hover { color: var(--paper); }

/* the finder's answer keeps its spec link and gains a buy button beside it */
.rec .cta-row { align-items: stretch; }
.rec .cta-row .buy { width: auto; }

.cta-band { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; justify-content: space-between; }
.cta-band > div:first-child { max-width: 46rem; }
.cta-band .cta-row { margin-top: 0; }

/* ── Kit cards ──────────────────────────────────────────────────────────── */

/* four kits, so four or two columns — auto-fit would orphan the Cyclone at three */
.kits { display: grid; gap: 1.4rem; grid-template-columns: repeat(4, 1fr); }

.kit {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  scroll-margin-top: 6rem;
}
.kit-shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--black); }
.kit-shot img { width: 100%; height: 100%; object-fit: cover; }
.kit-shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,10,11,.75));
}
.kit-flag {
  position: absolute; left: 0; top: 0; z-index: 1;
  background: var(--red); color: #fff;
  font: 400 .66rem/1 var(--mono); letter-spacing: .11em; text-transform: uppercase;
  padding: .45rem .7rem;
}

.kit-body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.kit-name { font-size: 1.55rem; }
.kit p { font-size: .93rem; margin-top: .7rem; }

.kit dl {
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr; gap: .5rem .9rem;
  font-size: .84rem;
}
.kit dt {
  font: 400 .66rem/1.7 var(--mono); letter-spacing: .09em;
  text-transform: uppercase; color: var(--dim);
}
.kit dd { color: var(--paper); }
.kit dd b { color: var(--brass); font-weight: 700; }

.kit-cta { margin-top: auto; padding-top: 1.3rem; }
/* a short button left-aligned in a wide card just looks stranded */
.kit-cta .btn { width: 100%; text-align: center; padding-inline: 1rem; }

/* the two component-only offerings sit lower in the hierarchy */
.kits-min { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: 1.4rem; }
.min {
  display: grid; grid-template-columns: 120px 1fr; align-items: stretch;
  background: var(--panel); border: 1px solid var(--line);
}
.min img { width: 100%; height: 100%; object-fit: cover; }
.min div { padding: 1.2rem 1.3rem; }
.min h3 { font-size: 1.1rem; }
.min p { font-size: .87rem; margin-top: .5rem; }

/* ── Kit finder ─────────────────────────────────────────────────────────── */

.finder {
  display: grid; grid-template-columns: minmax(260px, .85fr) 1.15fr;
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
}
.finder-controls, .rec { background: var(--pit); padding: 1.8rem; }

fieldset { border: 0; }
fieldset + fieldset { margin-top: 1.8rem; }
legend {
  font: 400 .68rem/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim); margin-bottom: .85rem;
}

.opts input { position: absolute; opacity: 0; pointer-events: none; }
.opts label {
  display: block; cursor: pointer;
  padding: .62rem .9rem; margin-bottom: .4rem;
  background: var(--panel); border: 1px solid var(--line);
  font-size: .89rem; font-weight: 600; color: var(--body);
  transition: border-color .15s, color .15s, background .15s;
}
.opts label:hover { border-color: var(--line-2); color: var(--paper); }
.opts input:checked + label {
  background: var(--panel-2); border-color: var(--red); color: var(--paper);
  box-shadow: inset 3px 0 0 var(--red);
}
.opts input:focus-visible + label { outline: 2px solid var(--red-lit); outline-offset: 2px; }

.rec { display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }

/* The car you picked, drawn behind the kit you were given — it confirms we
   understood the question before you read the answer. Wireframe line art,
   generated for this and keyed off the same radios as the recommendation. */
.rec::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: 8% 6%;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  opacity: 0; transition: opacity .35s ease;
}
.rec > * { position: relative; z-index: 1; }

.finder:has(#car-beetle:checked) .rec::before { background-image: url("images/car-beetle.png?v=2"); opacity: .17; }
.finder:has(#car-ghia:checked)   .rec::before { background-image: url("images/car-ghia.png?v=2");   opacity: .17; }
.finder:has(#car-bus:checked)    .rec::before { background-image: url("images/car-bus.png?v=2");    opacity: .15; }
.finder:has(#car-open:checked)   .rec::before { background-image: url("images/car-buggy.png?v=2");  opacity: .16; }
.rec .r { display: none; }
.rec .r-head {
  font: 400 .68rem/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim); margin-bottom: .7rem;
}
.rec h3 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--paper); }
.rec p { margin-top: .9rem; font-size: .95rem; max-width: 46ch; }
.rec .r-spec {
  margin-top: 1.3rem; display: flex; flex-wrap: wrap; gap: .5rem;
}
.rec .r-spec span {
  font: 400 .72rem/1 var(--mono); letter-spacing: .05em;
  color: var(--brass); border: 1px solid var(--line-2);
  padding: .45rem .7rem;
}

/* The recommendation is a genuine lookup, not decoration: the four kits are
   separated by whether the lid has to be cut and by displacement. */
.finder:has(:is(#car-beetle, #car-ghia, #car-bus):checked):has(#cc-a:checked) .r-sleeper,
.finder:has(:is(#car-beetle, #car-ghia):checked):has(:is(#cc-b, #cc-c):checked) .r-slammed,
.finder:has(#car-bus:checked):has(:is(#cc-b, #cc-c):checked) .r-ultimate,
.finder:has(#car-open:checked):has(#cc-c:checked) .r-ultimate,
.finder:has(#car-open:checked):has(:is(#cc-a, #cc-b):checked) .r-cyclone { display: block; }

/* ponytail: :has() is the whole mechanism. Where it is missing, show all four
   rather than an empty panel. */
@supports not selector(:has(a)) {
  .finder-controls { display: none; }
  .rec .r { display: block; }
  .rec .r + .r { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
}

/* ── Shop ───────────────────────────────────────────────────────────────── */

/* The catalogue is read live from the store that already exists. This block
   ships with a static fallback in the markup; script swaps in the real grid
   and leaves the fallback alone if the store can't be reached. */

/* no wrap on the row itself — the text wraps inside its own span, so the dot
   stays beside the first line instead of being pushed onto its own */
.shop-status {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-bottom: 1.6rem;
  font: 400 .72rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim);
}
.shop-status .dot {
  width: 7px; height: 7px; border-radius: 50%; margin-top: .42em;
  background: var(--dim); flex: none;
}
.shop-status[data-live="1"] .dot { background: #3FBF6A; box-shadow: 0 0 0 3px rgba(63,191,106,.16); }
.shop-status b { color: var(--paper); font-weight: 400; }

.shop-fallback {
  background: var(--panel); border: 1px solid var(--line);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  max-width: 46rem;
}
.shop-fallback p { font-size: .95rem; }
.shop-fallback .cta-row { margin-top: 1.4rem; }

.shop-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); }

.prod {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color .18s, background .18s, transform .18s;
}
.prod:hover { border-color: var(--red); background: var(--panel-2); transform: translateY(-2px); }

/* The whole upper card opens the product. It is a button, not a link: the
   product page is the quick-view dialog, so there is no URL to point at.
   Needs the browser's button styling stripped back to nothing. */
.prod-open {
  display: flex; flex-direction: column; flex: 1;
  width: 100%; padding: 0; margin: 0;
  background: none; border: 0; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
}

.prod-shot { aspect-ratio: 1; background: #fff; overflow: hidden; }
.prod-shot img { width: 100%; height: 100%; object-fit: contain; }

.prod-shot.empty {
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  display: grid; place-items: center;
  background-image: repeating-linear-gradient(115deg,
    transparent 0 11px, rgba(255,255,255,.022) 11px 22px);
}
.prod-shot.empty span {
  font: 400 .62rem/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
}

.prod-body { padding: .95rem 1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.prod-name {
  font: 600 .88rem/1.35 var(--sans); text-transform: none;
  letter-spacing: 0; color: var(--paper);
}
.prod-price {
  margin-top: auto; padding-top: .8rem;
  font: 400 1.35rem/1 var(--display); letter-spacing: .01em; color: var(--brass);
}
.prod-price s { color: var(--dim); font-size: .6em; margin-left: .45rem; }
.prod-meta {
  margin-top: .5rem;
  font: 400 .64rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim);
}
.prod-meta .ok { color: #3FBF6A; }
.prod-meta .low { color: var(--red-lit); }
.prod-meta .free { color: var(--brass); }

.shop-foot { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }
.shop-foot p { font-size: .84rem; color: var(--dim); max-width: 52ch; }

.prod-add {
  margin: 0 1rem 1rem; padding: .6rem .9rem;
  background: transparent; color: var(--paper);
  border: 1px solid var(--line-2); cursor: pointer;
  font: 400 .82rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase;
  transition: background .15s, border-color .15s, color .15s;
}
.prod-add:hover { background: var(--red); border-color: var(--red); color: #fff; }
.prod-add[disabled] { opacity: .4; cursor: not-allowed; }
.prod-add.added { background: #2C6B45; border-color: #2C6B45; color: #fff; }

/* ── Cart button in the header ──────────────────────────────────────────── */

.cart-btn {
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem; margin-left: .2rem;
  background: transparent; color: var(--paper);
  border: 1px solid var(--line-2); cursor: pointer;
  font: 400 .82rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase;
}
.cart-btn:hover { border-color: var(--paper); }
.cart-btn .count {
  min-width: 1.25rem; padding: .1rem .3rem;
  background: var(--red); color: #fff; border-radius: 100px;
  font: 700 .68rem/1.45 var(--sans); text-align: center;
}
.cart-btn[data-empty="1"] .count { background: var(--line-2); color: var(--body); }

/* ── Quick view ─────────────────────────────────────────────────────────── */

/* Their store carries nine or ten photographs of each kit that the grid never
   shows. This is mostly a way to get at those without leaving the page. */

dialog.qv {
  /* the reset above zeroes margin on everything, which takes the UA's
     margin:auto off dialog and pins it to the top-left */
  margin: auto;
  width: min(58rem, 100% - 2rem); max-width: 100%;
  padding: 0; border: 1px solid var(--line);
  background: var(--pit); color: var(--body);
}
dialog.qv::backdrop { background: rgba(6,6,7,.78); }

.qv-in { position: relative; display: grid; grid-template-columns: 1fr 1fr; }

.qv-close {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  width: 34px; height: 34px; cursor: pointer; flex: none;
  background: var(--pit); border: 1px solid var(--line); color: var(--body);
  font-size: 1.1rem; line-height: 1;
}
.qv-close:hover { color: var(--paper); border-color: var(--line-2); }

.qv-media { padding: 1.2rem; border-right: 1px solid var(--line); min-width: 0; }
.qv-main { aspect-ratio: 1; background: #fff; overflow: hidden; }
.qv-main img { width: 100%; height: 100%; object-fit: contain; }

.qv-thumbs { display: flex; gap: .5rem; margin-top: .7rem; overflow-x: auto; padding-bottom: .25rem; }
.qv-thumbs button {
  flex: none; width: 54px; aspect-ratio: 1; padding: 0; cursor: pointer;
  background: #fff; border: 1px solid var(--line);
}
.qv-thumbs button[aria-current="true"] { border-color: var(--red); }
.qv-thumbs img { width: 100%; height: 100%; object-fit: contain; }

.qv-body { padding: 1.7rem 1.7rem 1.8rem; display: flex; flex-direction: column; min-width: 0; }
.qv-body h2 {
  font-family: var(--sans); font-weight: 700; text-transform: none;
  font-size: 1.22rem; line-height: 1.3; letter-spacing: 0; color: var(--paper);
  margin: 0 2.2rem 0 0;
}
.qv-price { margin-top: 1rem; font: 400 2.1rem/1 var(--display); color: var(--brass); letter-spacing: .01em; }
.qv-price s { color: var(--dim); font-size: .5em; margin-left: .5rem; }

.qv-meta {
  margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .4rem .9rem;
  font: 400 .66rem/1.5 var(--mono); letter-spacing: .09em; text-transform: uppercase;
}
.qv-meta .ok { color: #3FBF6A; }
.qv-meta .low { color: var(--red-lit); }
.qv-meta .free { color: var(--brass); }
.qv-meta .sku { color: var(--dim); }

/* their own words, off their Products page — the store itself has none */
.qv-copy { margin-top: 1.1rem; font-size: .93rem; }
.qv-spec {
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr; gap: .45rem .9rem; font-size: .86rem;
}
.qv-spec dt {
  font: 400 .64rem/1.75 var(--mono); letter-spacing: .09em;
  text-transform: uppercase; color: var(--dim);
}
.qv-spec dd { color: var(--paper); }

.qv-main.empty {
  display: grid; place-items: center; background: var(--panel-2);
  background-image: repeating-linear-gradient(115deg,
    transparent 0 11px, rgba(255,255,255,.022) 11px 22px);
}

.qv-buy { margin-top: auto; padding-top: 1.6rem; display: flex; gap: .7rem; align-items: stretch; }
.qv-buy .qty { border-color: var(--line-2); }
.qv-buy .qty button { width: 34px; height: 100%; }
.qv-buy .btn { flex: 1; text-align: center; }

.qv-link {
  margin-top: .9rem; font-size: .82rem; color: var(--dim);
  text-decoration: underline; text-underline-offset: 3px;
}
.qv-link:hover { color: var(--red-lit); }
.qv-note { margin-top: .9rem; font-size: .8rem; color: var(--dim); }
.qv-note a { color: var(--red-lit); text-decoration: underline; text-underline-offset: 3px; }
.qv-note a:hover { color: var(--paper); }

@media (max-width: 720px) {
  dialog.qv { width: 100%; height: 100%; max-height: 100%; margin: 0; border: 0; }
  .qv-in { grid-template-columns: 1fr; height: 100%; overflow-y: auto; align-content: start; }
  .qv-media { border-right: 0; border-bottom: 1px solid var(--line); }
  .qv-main { aspect-ratio: 4 / 3; }
  .qv-body { padding: 1.3rem; }
  .qv-buy { padding-top: 1.3rem; }
}

/* ── Cart drawer ────────────────────────────────────────────────────────── */

dialog.cart {
  margin: 0 0 0 auto; height: 100%; max-height: 100%;
  width: min(27rem, 100%); max-width: 100%;
  padding: 0; border: 0; border-left: 1px solid var(--line);
  background: var(--pit); color: var(--body);
}
dialog.cart::backdrop { background: rgba(6,6,7,.72); }

.cart-in { display: flex; flex-direction: column; height: 100%; }
.cart-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.3rem; border-bottom: 1px solid var(--line);
}
.cart-head h2 { font-size: 1.4rem; margin: 0; }
.cart-close {
  background: none; border: 1px solid var(--line); color: var(--body);
  width: 34px; height: 34px; cursor: pointer; font-size: 1.1rem; line-height: 1; flex: none;
}
.cart-close:hover { color: var(--paper); border-color: var(--line-2); }

.cart-items { flex: 1; overflow-y: auto; padding: 1.3rem; display: grid; gap: 1.1rem; align-content: start; }
.cart-empty { color: var(--dim); font-size: .93rem; }

.ci { display: grid; grid-template-columns: 62px 1fr; gap: .9rem; }
.ci-shot { aspect-ratio: 1; background: #fff; overflow: hidden; }
.ci-shot img { width: 100%; height: 100%; object-fit: contain; }
a.ci-name {
  display: block; font-size: .84rem; font-weight: 600; line-height: 1.35;
  color: var(--paper); text-decoration: none;
}
a.ci-name:hover { color: var(--red-lit); }
.ci-shot.empty {
  background: var(--panel-2);
  background-image: repeating-linear-gradient(115deg,
    transparent 0 8px, rgba(255,255,255,.03) 8px 16px);
}
.cart-empty + .btn { margin-top: 1rem; }
.ci-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .5rem; }
.ci-price { font: 400 .95rem/1 var(--display); color: var(--brass); letter-spacing: .01em; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); }
.qty button {
  width: 26px; height: 26px; cursor: pointer;
  background: none; border: 0; color: var(--body); font-size: .95rem; line-height: 1;
}
.qty button:hover { color: var(--paper); background: var(--panel-2); }
.qty button[disabled] { opacity: .35; cursor: not-allowed; }
.qty span { min-width: 1.9rem; text-align: center; font: 400 .78rem/1 var(--mono); color: var(--paper); }

.ci-drop {
  background: none; border: 0; cursor: pointer; padding: 0; margin-top: .45rem;
  font: 400 .64rem/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--dim); text-decoration: underline; text-underline-offset: 3px;
}
.ci-drop:hover { color: var(--red-lit); }
.ci-cap { margin-top: .35rem; font: 400 .62rem/1.4 var(--mono); color: var(--red-lit); }

.cart-foot { border-top: 1px solid var(--line); padding: 1.2rem 1.3rem 1.4rem; }
.cart-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.cart-sum span {
  font: 400 .7rem/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--dim);
}
.cart-sum b { font: 400 1.7rem/1 var(--display); color: var(--paper); letter-spacing: .01em; }
.cart-foot .btn { display: block; text-align: center; margin-top: 1rem; }
.cart-note { margin-top: .8rem; font-size: .78rem; color: var(--dim); }

/* Sits last in the bar on desktop. On mobile the nav collapses to a dropdown,
   so order puts the cart to the left of the hamburger rather than after it. */
@media (max-width: 800px) {
  .cart-btn { order: 1; margin-left: auto; margin-right: .1rem; }
  .menu-btn { order: 2; }
  .nav-links { order: 3; }
}

/* ── Boost calculator ───────────────────────────────────────────────────── */

/* The maths is theirs — the five images on their Boost Calculation page. This
   reproduces those tables exactly, so nothing here contradicts what they have
   already published. */

.calc {
  display: grid; grid-template-columns: minmax(260px, .8fr) 1.2fr;
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.calc-controls, .calc-out { background: var(--pit); padding: 1.8rem; }

.field { display: block; margin-bottom: 1.2rem; }
.field span {
  display: block; margin-bottom: .45rem;
  font: 400 .68rem/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
}
.field input {
  width: 100%; padding: .62rem .8rem;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--paper); font: 400 1rem/1.3 var(--mono);
}
.field input:focus { outline: 2px solid var(--red-lit); outline-offset: 2px; border-color: var(--red); }
.field small { display: block; margin-top: .4rem; font-size: .76rem; color: var(--dim); }

.calc-out { display: flex; flex-direction: column; }

.big {
  border-bottom: 1px solid var(--line); padding-bottom: 1.3rem;
}
.big span {
  font: 400 .68rem/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
}
.big b {
  display: block; margin-top: .6rem;
  font: 400 clamp(3rem, 8vw, 4.6rem)/.9 var(--display);
  letter-spacing: .01em; color: var(--brass);
}
.big b i { font-style: normal; font-size: .3em; color: var(--dim); margin-left: .4rem; }
.big .sub { margin-top: .7rem; font-size: .92rem; color: var(--body); }

.calc-rows {
  margin-top: 1.3rem; display: grid; grid-template-columns: auto 1fr;
  gap: .5rem 1rem; font-size: .88rem;
}
.calc-rows dt {
  font: 400 .66rem/1.7 var(--mono); letter-spacing: .09em;
  text-transform: uppercase; color: var(--dim);
}
.calc-rows dd { color: var(--paper); font-family: var(--mono); font-size: .84rem; }

.warn {
  margin-top: 1.3rem; padding: .8rem 1rem;
  border-left: 2px solid var(--red); background: rgba(225,68,42,.08);
  font-size: .87rem; color: #F0C0B4;
}
.warn.ok { border-left-color: var(--brass); background: rgba(199,155,59,.07); color: var(--body); }

/* the three stock pulleys, side by side, for whatever engine was typed in */
.pulleys { margin-top: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pulley {
  background: var(--panel); border: 1px solid var(--line); padding: 1.1rem 1.2rem;
}
.pulley[data-on="1"] { border-color: var(--red); background: var(--panel-2); }
.pulley h3 { font-size: 1.15rem; }
.pulley .p-boost { margin-top: .6rem; font: 400 1.7rem/1 var(--display); color: var(--brass); }
.pulley .p-note { margin-top: .5rem; font-size: .8rem; color: var(--dim); }

.formula {
  margin-top: 1rem; display: grid; gap: .5rem;
  font: 400 .84rem/1.6 var(--mono); color: var(--body);
}
.formula code { color: var(--paper); }

/* ── How it's built ─────────────────────────────────────────────────────── */

.built { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.built-shots { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1rem; }
.built-shots figure { border: 1px solid var(--line); overflow: hidden; }
.built-shots img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }
.built-shots figure:last-child img { aspect-ratio: 1; }

.made { list-style: none; margin-top: 2rem; display: grid; gap: 1.4rem; }
.made li { padding-left: 3rem; position: relative; }
.made li::before {
  counter-increment: made; content: counter(made, decimal-leading-zero);
  position: absolute; left: 0; top: .1rem;
  font: 400 .82rem/1 var(--mono); color: var(--red);
}
.made { counter-reset: made; }
.made h3 { font-size: 1.05rem; }
.made p { font-size: .92rem; margin-top: .35rem; }

/* ── Power bars ─────────────────────────────────────────────────────────── */

.power { margin-top: 2.5rem; display: grid; gap: 1.5rem; max-width: 46rem; }
.bar-row { display: grid; gap: .5rem; }
.bar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.bar-top strong { font: 400 1rem/1 var(--display); text-transform: uppercase; color: var(--paper); letter-spacing: .02em; }
.bar-top span { font: 400 .8rem/1 var(--mono); color: var(--brass); white-space: nowrap; }
.track { height: 12px; background: var(--panel); border: 1px solid var(--line); }
.fill { height: 100%; background: repeating-linear-gradient(115deg, var(--red) 0 7px, #C13A24 7px 14px); }
.fill.stock { background: repeating-linear-gradient(115deg, #45454E 0 7px, #383840 7px 14px); }
.bar-note { font-size: .82rem; color: var(--dim); }

/* ── Paper band: the honest requirements ────────────────────────────────── */

/* ── The requirements list ──────────────────────────────────────────────── */

/* This was a light band for contrast. It read as a torch in a dark room next
   to the rest of the site, so it stays dark and earns its separation from the
   panel colour and the marker glyphs instead. */

.reqs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.req { background: var(--panel); padding: 1.8rem; }
.req h3 { font-size: 1.15rem; }
.req ul { list-style: none; margin-top: 1.2rem; display: grid; gap: .85rem; }
.req li { font-size: .93rem; padding-left: 1.7rem; position: relative; color: var(--body); }
.req li::before { position: absolute; left: 0; top: 0; font: 700 .95rem/1.65 var(--sans); }
.req-need li::before { content: "+"; color: #3FBF6A; }
.req-dont li::before { content: "\2715"; color: var(--red-lit); font-size: .8rem; }
.req li b { color: var(--paper); font-weight: 600; }
.req ul.plain li { padding-left: 1.1rem; }
.req ul.plain li::before { content: "\2022"; color: var(--dim); }

.req .small-note { margin-top: 1.1rem; font-size: .87rem; color: var(--dim); max-width: 60ch; }

.fineprint {
  margin-top: 1.6rem; font-size: .84rem; color: var(--dim);
  border-left: 2px solid var(--line-2); padding-left: 1rem; max-width: 70ch;
}

/* ── Builds gallery ─────────────────────────────────────────────────────── */

.builds { display: grid; gap: 1rem; grid-template-columns: repeat(6, 1fr); }
.builds figure { overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.builds img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.builds figure:hover img { transform: scale(1.04); }
.builds figure:nth-child(1) { grid-column: span 3; }
.builds figure:nth-child(2) { grid-column: span 3; }
.builds figure:nth-child(3),
.builds figure:nth-child(4),
.builds figure:nth-child(5) { grid-column: span 2; }
.builds figure:nth-child(-n+2) img { aspect-ratio: 16 / 9; }
.builds figure:nth-child(n+3) img { aspect-ratio: 4 / 3; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.faq { max-width: 56rem; margin-top: 2.5rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.25rem 2.5rem 1.25rem 0; position: relative;
  font: 400 1.12rem/1.25 var(--display); text-transform: uppercase;
  letter-spacing: .015em; color: var(--paper);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  font: 400 1.5rem/1 var(--sans); color: var(--red);
}
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--red-lit); }
.faq .a { padding: 0 2.5rem 1.5rem 0; font-size: .95rem; max-width: 68ch; }
.faq .a p + p { margin-top: .8rem; }

/* ── Contact ────────────────────────────────────────────────────────────── */

.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 3.5rem); }

.who {
  background: var(--panel); border: 1px solid var(--line); padding: 1.8rem;
  align-self: start;
}
.who img { width: 74px; height: 74px; }
.who h3 { font-size: 1.15rem; margin-top: 1rem; }
.who p { font-size: .92rem; margin-top: .7rem; }

.lines { margin-top: 2rem; display: grid; gap: 1.1rem; }
.lines div { display: grid; gap: .25rem; }
.lines dt, .lines .l {
  font: 400 .68rem/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
}
.lines a, .lines .v { color: var(--paper); text-decoration: none; font-size: 1.02rem; }
.lines a:hover { color: var(--red-lit); }

/* ── Footer ─────────────────────────────────────────────────────────────── */

/* tag-qualified: "foot" is a tempting name for a card's action row too */
footer.foot { background: var(--pit); border-top: 1px solid var(--line); padding: 2.6rem 0 1.6rem; }
.foot-in { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: start; }
.foot-links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; max-width: 26rem; }
.foot-links a { color: var(--body); text-decoration: none; font-size: .87rem; }
.foot-links a:hover { color: var(--red-lit); }
.copyright {
  margin-top: 2.2rem; padding-top: 1.3rem; border-top: 1px solid var(--line);
  font: 400 .74rem/1.6 var(--mono); color: var(--dim);
  display: flex; flex-wrap: wrap; gap: .3rem 1.2rem;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .kits, .shop-grid, .tiles { grid-template-columns: 1fr 1fr; }
}

/* Between the mobile menu and full width the nav is tight enough that the
   brand's tagline wraps to three lines. Drop it — the wordmark carries. */
@media (max-width: 1020px) and (min-width: 801px) {
  .wordmark i { display: none; }
}

@media (max-width: 940px) {
  .finder, .built, .contact-grid, .reqs { grid-template-columns: 1fr; }
  .built-shots { max-width: 32rem; }
  .strip-in { grid-template-columns: 1fr 1fr; }
  .shop-grid { grid-template-columns: repeat(3, 1fr); }
  .builds { grid-template-columns: repeat(2, 1fr); }
  .builds figure:nth-child(n) { grid-column: span 1; }
  .builds figure:nth-child(1) { grid-column: span 2; }
  .builds img { aspect-ratio: 4 / 3 !important; }
}

@media (max-width: 800px) {
  .menu-btn {
    display: block; cursor: pointer; width: 42px; height: 42px;
    border: 1px solid var(--line-2); position: relative;
  }
  .menu-btn span, .menu-btn span::before, .menu-btn span::after {
    position: absolute; left: 11px; width: 18px; height: 2px;
    background: var(--paper); content: "";
  }
  .menu-btn span { top: 20px; }
  .menu-btn span::before { top: -6px; left: 0; }
  .menu-btn span::after  { top:  6px; left: 0; }

  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--black); border-bottom: 1px solid var(--line);
    padding: .5rem 1.25rem 1.25rem;
  }
  .menu-box:checked ~ .nav-links { display: flex; }
  .nav-links a { padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav-links a.btn { margin-top: .9rem; text-align: center; border: 1px solid var(--red); }

  .hero-bg img { object-position: 66% 65%; }
  .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(10,10,11,.9) 30%, rgba(10,10,11,.72) 62%, rgba(10,10,11,.95)),
      linear-gradient(90deg, var(--black), rgba(10,10,11,.4));
  }
  .min { grid-template-columns: 1fr; }
  .min img { aspect-ratio: 16 / 9; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .kits, .tiles { grid-template-columns: 1fr; }
  .shop-grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .prod-body { padding: .8rem .85rem 1rem; }
  .strip-in { grid-template-columns: 1fr; }
  .stat { padding: 1.2rem 1.1rem; }
  .finder-controls, .rec, .req, .who { padding: 1.4rem; }
  .builds { grid-template-columns: 1fr; }
  .builds figure:nth-child(1) { grid-column: span 1; }
  .btn { width: 100%; text-align: center; }
  .cta-row { flex-direction: column; }
}

/* ── Boost page odds and ends ───────────────────────────────────────────── */

.sub-dim { color: var(--dim); font-size: .85rem; }
.formula .dim { color: var(--dim); }
.note-wide { margin-top: 1.6rem; }

@media (max-width: 940px) {
  .calc { grid-template-columns: 1fr; }
  .pulleys { grid-template-columns: 1fr; }
}