/* geekbars.store - mirrored from geekbar.com, tokens measured from its shipped CSS on
   2026-10-31: Muli/Mulish type, white theme, #333 body text, red #cf3339 accent, #191919
   footer, and the black warning band above the header that is the site's signature. */

/* Muli is the official site's font; Google renamed it Mulish. Self-hosted, so there is no
   third-party request and no fallback flash. */
@font-face {
  font-family: Mulish; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(/assets/fonts/mulish-latin.woff2) format("woff2");
}

:root {
  --font: Mulish, Muli, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --paper: #ffffff;
  --ink: #121212;          /* geekbar.com heading black */
  --body: #333333;         /* geekbar.com body colour */
  --muted: #999999;        /* geekbar.com secondary grey */
  --band: #f8f8f8;         /* alternating section background */
  --tile: #f0f0f0;         /* the pale square a product photo sits on */
  --line: #d8d8d8;         /* geekbar.com hairline grey */
  --bar: #000000;          /* shipping bar */
  --sale: #cf3339;         /* geekbar.com red */
  --was: #999999;          /* struck original */
  --r: 4px;                /* buttons */
  --rc: 6px;               /* cards */
  --wrap: 1400px;
  --gut: 40px;
}
@media (max-width: 900px) { :root { --gut: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--body);
  font: 400 14px/1.6 var(--font);
  /* a photo grid should never scroll sideways; it did on another store and cost 57 pages */
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }

/* ---------------------------------------------------------------- announcement bars
   Two stacked bars above the header, which is the mirror's most recognisable feature. */
.ann {
  background: var(--line); color: var(--body);
  font-size: 14px; text-align: center; padding: 14px 44px; position: relative;
}
.ann__x {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .6); color: var(--ink);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.ship { background: var(--sale); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .02em; text-align: center; padding: 11px 16px; }

/* geekbar.com's signature: the black warning band above everything (its .header-top), with the
   Canadian wording. Bold, centered, impossible to miss, exactly as the mirror renders it. */
.gbwarn {
  background: #000; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: clamp(20px, 6vw, 90px); flex-wrap: wrap;
  line-height: 1.2; min-height: min(20vh, 180px);
  padding: 18px var(--gut); text-align: center;
}
.gbwarn__yp { display: inline-flex; align-items: center; gap: 10px; text-align: left; }
.gbwarn__age {
  flex: 0 0 auto; width: 56px; height: 56px; border: 3px solid #fff; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
}
.gbwarn__t { margin: 0; font-size: clamp(14.5px, 1.75vw, 26px); font-weight: 800; }
/* the Canadian wording is three times the maker's: keep the age mark beside it, not on a second row */
@media (min-width: 901px) {
  .gbwarn { flex-wrap: nowrap; }
  .gbwarn__t { flex: 0 1 900px; }
  .gbwarn__yp { flex: 0 0 auto; }
}
.gbwarn__yp b { display: block; font-family: var(--font); font-size: clamp(16px, 2vw, 28px); font-weight: 800; }
.gbwarn__yp small { display: block; font-family: var(--font); font-weight: 400; font-size: clamp(12px, 1.25vw, 18px); color: #ddd; }

/* ---------------------------------------------------------------- header */
.hdr { background: var(--paper); border-bottom: 1px solid #e4e4e4; }
.hdr__in {
  display: flex; align-items: center; gap: 24px;
  min-height: 72px; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut);
}
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo img { display: block; width: 166px; height: 58px; object-fit: contain; }
.logo:hover { text-decoration: none; }
/* align-items:center: a <summary> carries 4px of padding a plain link does not, so Home,
   Shipping and Contact sat 4px above Flavors, Devices and Guides. */
.nav { display: flex; align-items: stretch; gap: clamp(18px, 4.1vw, 60px); margin-inline: auto; align-self: stretch; }
.nav > a, .drop > summary { font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: uppercase;
  color: #333; white-space: nowrap; display: inline-flex; align-items: center;
  box-shadow: inset 0 -3px 0 transparent; transition: box-shadow .15s; }
.nav > a:hover, .nav > a[aria-current], .drop:hover > summary, .drop[open] > summary {
  color: #000; text-decoration: none; box-shadow: inset 0 -3px 0 #b5d334; }
.nav > a, .drop, .drop > summary { min-height: 72px; }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
/* Dropdowns are <details>, so they open on a tap and with a keyboard and need no JavaScript.
   On desktop the panel floats; on a phone it becomes an accordion inside the burger menu,
   because a hover target on a touch screen is a target nobody can hit. */
.drop { position: relative; }
.drop > summary {
  list-style: none; cursor: pointer; padding: 0;
}
.drop > summary::-webkit-details-marker { display: none; }
.drop > summary::after { content: none; }
.drop[open] > summary { color: var(--ink); }
/* A closed <details> hides its children, but the panel is measured as 454px tall anyway unless
   it is explicitly hidden: the browser still lays the subtree out. Without this the menu is
   present at full height under a closed summary, which is what a measurement caught. */
.drop:not([open]) .drop__m { display: none; }
.drop__m {
  position: absolute; top: 100%; left: -14px; z-index: 50;
  min-width: 232px; padding: 6px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--rc);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .12);
}
.drop__m a {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 12px; border-radius: 4px; font-size: 13.5px; color: var(--body);
}
.drop__m a:hover { background: var(--band); color: var(--ink); text-decoration: none; }
.drop__m a span { color: var(--was); font-size: 12.5px; }
.drop__m .drop__all { border-top: 1px solid var(--line); margin-top: 4px; font-weight: 600; color: var(--ink); }
/* group headings inside a dropdown */
.drop__h {
  margin: 6px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--was);
}
.drop__m a + .drop__h { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 8px; }

.hdr__act { display: flex; align-items: center; gap: 14px; }
.burger { display: none; background: none; border: 0; padding: 6px; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; }
.bag { position: relative; display: inline-flex; padding: 6px; }
.bag__n {
  position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px;
  border-radius: 9px; background: var(--sale); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; padding: 0 4px;
}

@media (max-width: 900px) {
  .hdr__in { min-height: 58px; gap: 10px; }
  .burger { display: block; }
  .logo { margin-inline: auto; }            /* centred wordmark on a phone, as the mirror does */
  .nav {
    display: none; position: absolute; left: 0; right: 0; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
  }
  .drop__h { margin: 10px 0 2px; }
  .drop__m a + .drop__h { margin-top: 6px; }
  .nav.on { display: flex; }
  .nav > a { padding: 13px var(--gut); border-top: 1px solid var(--line); }
  /* inside the burger the dropdown is an accordion, not a floating panel */
  .drop { width: 100%; }
  .drop > summary { padding: 13px var(--gut); border-top: 1px solid var(--line); width: 100%; }
  .drop__m {
    position: static; min-width: 0; border: 0; box-shadow: none; border-radius: 0;
    background: var(--band); padding: 4px var(--gut) 10px;
  }
  .drop__m a { padding: 11px 0; }
}

/* ---------------------------------------------------------------- sub-nav
   Sibling devices and a jump to this device's flavours. Scrolls sideways on a phone rather
   than wrapping to three lines or widening the page. */
.subnav { border-bottom: 1px solid var(--line); background: var(--paper); }
.subnav .wrap {
  display: flex; align-items: center; gap: 16px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-block: 11px; white-space: nowrap; scrollbar-width: none;
}
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav span { color: var(--was); font-size: 12.5px; }
.subnav a { font-size: 13.5px; color: var(--body); }
.subnav a:first-child { font-weight: 600; color: var(--ink); }
.subnav a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- sections */
.band { padding: 54px 0; }
.band--tint { background: #f9f9f9; }
.band__h { font-size: 22px; font-weight: 700; color: #000; margin: 0 0 4px; }
.band__sub { font-size: 16px; font-weight: 300; color: var(--muted); margin: 0 0 26px; }
.band__h--c, .band__sub--c { text-align: center; }
@media (max-width: 900px) { .band { padding: 36px 0; } .band__h { font-size: 20px; } }

/* ---------------------------------------------------------------- hero */
.hero { background: var(--band); overflow: hidden; }
.hero__in {
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 30px;
  max-width: var(--wrap); margin: 0 auto; padding: 54px var(--gut);
}
.hero h1 { font-size: 46px; line-height: 1.08; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.hero p { font-size: 18px; color: var(--muted); margin: 0 0 22px; max-width: 46ch; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .hero__cta { justify-content: center; } .hero p { margin-inline: auto; } }
/* The mirror's hero device fills most of the right half; at 420px ours read as a thumbnail
   floating in a grey field. Measured against the screenshot, not guessed. */
.hero__img { justify-self: center; max-width: 560px; width: 100%; }
@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; padding: 32px var(--gut); text-align: center; }
  .hero h1 { font-size: 30px; }
  .hero p { font-size: 16px; }
  .hero__img { max-width: 260px; }
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;                          /* a thumb needs 44px; measured, not assumed */
  padding: 0 22px; border: 1px solid var(--ink); border-radius: var(--r);
  background: var(--paper); color: var(--ink);
  font: 600 14px/1 var(--font); cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.btn--fill { background: var(--ink); color: var(--paper); }
.btn--fill:hover { background: #000; }
.btn[disabled], .btn[aria-disabled="true"] {
  border-color: var(--line); background: var(--band); color: var(--was);
  cursor: not-allowed; pointer-events: none;
}
.btn--wide { width: 100%; }
.center { text-align: center; }

/* ---------------------------------------------------------------- grids
   5 across on desktop and 2 on a phone, which is what the mirror renders; collection pages go
   to 6. auto-fit rather than fixed columns so nothing overflows at an in-between width. */
.grid { display: grid; gap: 22px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) { .grid, .grid--6 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px)  { .grid, .grid--6, .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  {
  .grid, .grid--6, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* ---------------------------------------------------------------- product card */
.card { display: flex; flex-direction: column; color: inherit;
  background: var(--paper); border: 1px solid #ececec; border-radius: 12px; padding: 10px 10px 12px; }
.card__link { display: block; color: inherit; flex: 1 1 auto; }
.card__link:hover { text-decoration: none; }
/* the card's own Add to cart: full width under the price, filled on hover */
.card__add {
  margin-top: 10px; width: 100%; min-height: 44px; padding: 8px 10px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink); border-radius: var(--r); transition: background .15s, color .15s;
}
.card__add:hover { background: var(--ink); color: var(--paper); }
.card__add.is-added { background: #2e7d4f; border-color: #2e7d4f; color: #fff; }
.card__add:disabled { cursor: not-allowed; color: var(--was); border-color: var(--line); background: transparent; }
.card__img {
  position: relative; background: var(--tile); border-radius: var(--rc);
  aspect-ratio: 1 / 1; overflow: hidden;
}
.card__img img {
  width: 100%; height: 100%; object-fit: contain; padding: 8%;
  transition: transform .25s ease;
}
.card:hover .card__img img { transform: scale(1.04); }
/* Product photos are renders on WHITE. multiply shows that white as the tile colour without
   touching the device: keying the white out instead is what ate the white devices before. */
.card__img img, .hub__img img, .pdp__img img, .hero__img img { mix-blend-mode: multiply; }
.card__badge {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  background: var(--sale); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 3px; padding: 3px 8px;
}
.card__badge--out { background: #6b7280; }
.card__t { font-size: 14px; color: var(--ink); margin: 10px 0 4px; line-height: 1.35; }
.card__p { font-size: 14px; }
.card__p b { color: var(--sale); font-weight: 700; }
.card__p s { color: var(--was); margin-left: 6px; font-weight: 400; }
.card__note { font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------------------------------------------------------------- model hub card */
.hub { display: block; background: var(--band); border-radius: var(--rc); overflow: hidden; color: inherit; }
.hub:hover { text-decoration: none; }
.hub__img { aspect-ratio: 4 / 3; background: var(--band); }
.hub__img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.hub__b { padding: 14px 16px 18px; text-align: center; }
.hub__t { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 3px; }
.hub__s { font-size: 13px; color: var(--muted); margin: 0; }

/* ---------------------------------------------------------------- product page */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; padding: 40px 0; }
.pdp__img { background: var(--tile); border-radius: var(--rc); aspect-ratio: 1 / 1; }
.pdp__img img { width: 100%; height: 100%; object-fit: contain; padding: 7%; }
.pdp__note { font-size: 12.5px; color: var(--muted); margin: 8px 2px 0; }
.pdp h1 { font-size: 28px; font-weight: 700; color: var(--ink); margin: 0 0 6px; line-height: 1.2; }
.pdp__sub { font-size: 15px; color: var(--muted); margin: 0 0 18px; }
.pdp__price { font-size: 26px; font-weight: 700; color: var(--sale); margin: 0 0 4px; }
.pdp__price s { font-size: 17px; color: var(--was); font-weight: 400; margin-left: 10px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r); }
.qty button { width: 42px; height: 44px; border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--ink); }
.qty input { width: 48px; height: 44px; border: 0; text-align: center; font: inherit; font-size: 15px; }
.buy { display: flex; gap: 12px; align-items: center; margin: 20px 0 10px; flex-wrap: wrap; }
.spec { width: 100%; border-collapse: collapse; margin-top: 10px; }
.spec th, .spec td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.spec th { color: var(--muted); font-weight: 400; width: 48%; }

/* ---------------------------------------------------------------- device page buy box
   Owner, 23 Oct 2026: "all the text in same font size, nothing stands out". The name, the four
   headline figures, the price and the button now step down in size and weight; the full spec
   table moved below the flavours. */
.pdp .buybox h1 { font-size: 38px; line-height: 1.1; letter-spacing: -.01em; margin-bottom: 10px; }
.buybox .pdp__lead { font-size: 15px; color: var(--muted); }
.stats {
  list-style: none; padding: 0; margin: 18px 0 20px; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.stats li { background: var(--tile); border-radius: var(--rc); padding: 12px 12px 10px; }
.stats b { display: block; font-size: 22px; line-height: 1.15; font-weight: 700; color: var(--ink); }
.stats span { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; margin-top: 3px; }
.pricebox { display: flex; align-items: baseline; gap: 12px; margin: 0 0 2px; }
.buybox .pdp__price { font-size: 34px; margin: 0; }
.pdp__was { font-size: 18px; color: var(--was); }
.buybox .pick__h { font-size: 14px; font-weight: 400; color: var(--muted); margin: 18px 0 10px; }
.buybox .pick__h b { color: var(--ink); font-weight: 700; }
.fchips {
  display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
  max-height: 268px; overflow-y: auto; padding: 2px 4px 2px 2px;
}
.fchip {
  position: relative; display: flex; align-items: center; min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; background: var(--paper);
  font-size: 13.5px; line-height: 1.25; color: var(--ink);
}
.fchip input { position: absolute; opacity: 0; pointer-events: none; }
.fchip:hover { border-color: var(--ink); }
.fchip:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.fchip:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.fchip--out { color: var(--was); text-decoration: line-through; cursor: not-allowed; }
.fchip--out:hover { border-color: var(--line); }
.btn--buy { flex: 1 1 200px; min-height: 48px; font-size: 16px; }
.spec--full th, .spec--full td { font-size: 15px; padding: 12px 0; }
.spec--full td { font-weight: 600; }
.fgrp + .fgrp { margin-top: 38px; }
.fgrp__h { font-size: 17px; font-weight: 700; color: var(--ink); margin: 26px 0 14px; }
@media (max-width: 900px) {
  .pdp .buybox h1 { font-size: 28px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buybox .pdp__price { font-size: 28px; }
  .fchips { max-height: 300px; }
}
/* Prose sat in a 76ch strip down the left of a full-width band, leaving the right half of the
   page empty under the spec table - a screenshot showed about a third of the page as white
   space. Two columns on a wide screen, one on a phone. */
/* Heading left, body right: fills the band instead of leaving its right half blank, and keeps
   the measure readable rather than running a sentence across 1400px. */
.prose--split { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px 56px; }
.prose--split > .band__h { margin: 0; }
@media (max-width: 900px) { .prose--split { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
/* a grid column grows to its widest child unless told otherwise: a 640px comparison table in a
   sideways-scrolling box made every flavour and device page 656px wide on a 390px phone */
.prose--split > * { min-width: 0; }

.prose--2col { max-width: none; columns: 2; column-gap: 46px; }
.prose--2col > * { break-inside: avoid; }
/* a Q&A list is ONE child: "avoid" on it kept the whole list in the first column. Let the list
   flow across both, and keep each question with its answer instead. */
.prose--2col > .qa { break-inside: auto; }
.qa dt { break-after: avoid; }
.qa dd { break-inside: avoid; }
@media (max-width: 900px) { .prose--2col { columns: 1; } }

/* Links inside running text. There was no rule for them, so every flavour and device named in
   the prose was a link styled exactly like the words around it: invisible. */
.prose a, .devs p a, .qa a, .steps a, .band__sub a {
  color: var(--ink); text-decoration: underline; text-decoration-color: rgba(29, 31, 33, .35);
  text-underline-offset: 3px;
}
.prose a:hover, .devs p a:hover, .qa a:hover, .steps a:hover, .band__sub a:hover {
  text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------- home: each device, described */
/* one block per device: photo on the left spanning the name and the text, which sit beside it;
   on a phone the photo shrinks beside the name and the text runs full width under both */
.devs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 56px; margin-top: 34px; }
.dev {
  display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: auto 1fr;
  grid-template-areas: "img head" "img text"; column-gap: 26px; align-items: start;
}
.dev__img {
  grid-area: img; display: block; aspect-ratio: 1 / 1; background: var(--tile);
  border-radius: var(--rc); overflow: hidden;
}
.dev__img img { width: 100%; height: 100%; object-fit: contain; padding: 7%; mix-blend-mode: multiply; }
.dev__h { grid-area: head; }
.dev__t { grid-area: text; }
.devs h3 { font-size: 17px; font-weight: 700; margin: 0 0 3px; }
.devs h3 a { color: var(--ink); }
.dev__s { margin: 0 0 10px; font-size: 13.5px; color: var(--muted); }
.devs .dev__t p { margin: 0; font-size: 14.5px; line-height: 1.7; }
.dev__pod {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 8px 12px 8px 8px;
  border: 1px solid var(--line); border-radius: var(--rc); color: inherit; max-width: 360px;
}
.dev__pod:hover { text-decoration: none; border-color: var(--ink); }
.dev__pi { flex: 0 0 96px; height: 96px; background: var(--tile); border-radius: 4px; overflow: hidden; }
.dev__pi img { width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.dev__pod b { display: block; font-size: 14px; color: var(--ink); }
.dev__pod small { font-size: 12.5px; color: var(--muted); }
@media (max-width: 1100px) { .devs { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
@media (max-width: 560px) {
  .dev { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "img head" "text text"; column-gap: 16px; }
  .dev__h { align-self: center; }
  .dev__t { margin-top: 14px; }
}
/* home: flavors, one row per device line */
.line { margin-top: 30px; }
.line + .line { margin-top: 46px; }
.line__h {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 6px 24px;
  flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.line__h h3 { font-size: 18px; font-weight: 700; margin: 0 0 2px; }
.line__h h3 a { color: var(--ink); }
.line__s { margin: 0; font-size: 13.5px; color: var(--muted); }
.line__more { margin: 0; font-size: 14px; }
.line__more a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* six cards fill one row at 6 and two at 3 or 2 columns; at 4 columns two would sit alone */
@media (max-width: 1200px) and (min-width: 981px) { .grid--prev > :nth-child(n+5) { display: none; } }
/* a wide table scrolls inside its own box on a phone, never the page */
.tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spec--cmp { min-width: 640px; }
.spec--cmp th, .spec--cmp td { padding: 10px 14px 10px 0; white-space: nowrap; width: auto; }
.spec--cmp tr:first-child th { color: var(--ink); font-weight: 600; font-size: 12.5px; }
.spec--cmp th a { color: var(--ink); font-weight: 600; }
.steps { margin: 0; padding-left: 18px; }
.steps li { margin: 0 0 8px; }
.muted { color: var(--was); }
.band__h--page { font-size: 28px; }
.spec--wrap td { white-space: normal; min-width: 180px; }
/* device page: the one-sentence summary under the h1, and the grouped flavour list */
.pdp__lead { font-size: 15.5px; line-height: 1.6; color: var(--body); margin: 0 0 10px; max-width: 62ch; }
.fg h3 { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.fg ul { list-style: none; margin: 0 0 24px; padding: 0; }
.fg li { margin: 0 0 6px; font-size: 14px; line-height: 1.5; }
.fg li a { font-weight: 600; }
/* ---------------------------------------------------------------- device picker
   One flavour is sold on up to eight devices, so the page needs a chooser rather than eight
   near-identical pages. Each row carries the thing that actually differs: fill, puff rating,
   price and stock. */
.pick__h { font-size: 14px; font-weight: 600; color: var(--ink); margin: 22px 0 8px; }
.picks { display: grid; gap: 8px; }
.pick {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--rc); padding: 11px 14px;
  cursor: pointer; min-height: 44px;
}
.pick:hover { border-color: var(--ink); }
.pick:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pick--out { opacity: .55; cursor: not-allowed; }
.pick__b { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.pick__b b { font-size: 14px; color: var(--ink); font-weight: 600; }
.pick__b small { font-size: 12.5px; color: var(--muted); }
.pick__p { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.pick__p em { display: block; font-style: normal; font-size: 12px; font-weight: 400; color: var(--was); }
.pdp__price small { font-size: 16px; color: var(--muted); font-weight: 400; }

.crumb { font-size: 12.5px; color: var(--was); margin-bottom: 12px; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--ink); }
.crumb span { margin: 0 4px; }

.stock { font-size: 13.5px; font-weight: 600; margin: -2px 0 14px; }
.stock--in { color: #2e7d4f; }
.stock--in::before { content: '\25CF'; margin-right: 6px; font-size: 10px; }
.stock--out { color: var(--was); }

.tnote { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }

.qa { margin: 0; }
.qa dt { font-weight: 600; color: var(--ink); margin-top: 14px; }
.qa dt:first-child { margin-top: 0; }
.qa dd { margin: 4px 0 0; }
.spec td { color: var(--ink); }
@media (max-width: 900px) { .pdp { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px 0; }
  .pdp h1 { font-size: 22px; } }

/* ---------------------------------------------------------------- flavour chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.chips a {
  display: inline-block; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; color: var(--body); background: var(--paper);
}
.chips a:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.chips a[aria-disabled="true"] { color: var(--was); background: var(--band); }

/* ---------------------------------------------------------------- footer */
.ftr { background: #191919; color: #fff; padding: 40px 0 16px; font-size: 14px; }
.ftr a { color: #fff; }
.ftr__cols { display: grid; grid-template-columns: 170px 170px minmax(0, 1.5fr) minmax(0, 1.2fr); gap: 34px; }
.ftr__warn { margin: 0; line-height: 1.6; color: #ddd; }
.ftr__sub h3 { font-size: 14px; letter-spacing: 0; margin: 0 0 4px; }
.ftr__sub p { margin: 0 0 14px; color: #ddd; }
.ftr__sub div { display: flex; }
.ftr__sub input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 14px; border: 0; background: #2b2b2b;
  color: #fff; font: inherit; font-size: 16px; }
.ftr__sub button { flex: 0 0 auto; height: 46px; padding: 0 18px; border: 0; background: #000; color: #fff;
  font: inherit; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.ftr__msg { margin-top: 10px; }
.ftr h3 { color: #fff; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 10px; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: 7px; }
.ftr__legal { border-top: 1px solid rgba(255,255,255,.1); margin-top: 56px; padding-top: 16px; font-size: 12px; color: #999; }
@media (max-width: 900px) { .ftr__cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .ftr__warn, .ftr__sub { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- age gate */
.age {
  position: fixed; inset: 0; z-index: 90; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(10, 11, 13, .88);
}
.age.on { display: flex; }
.age__box {
  background: var(--paper); border-radius: 10px; padding: 30px 26px; max-width: 420px; text-align: center;
}
.age__box img { margin: 0 auto 18px; }
.age__box h2 { font-size: 26px; font-weight: 400; color: var(--ink); margin: 0 0 10px; }
.age__y, .age__n { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  font: 700 14px/1 var(--font); cursor: pointer; }
.age__y { background: var(--sale); color: #fff; border: 1px solid var(--sale); }
.age__n { background: #fff; color: var(--sale); border: 1px solid var(--sale); }
.age__n:hover { text-decoration: none; }
.age__box p { margin: 0 0 18px; }
.age__btns { display: flex; gap: 10px; justify-content: center; }

/* ---------------------------------------------------------------- warning
   Required on every page of a US nicotine shop. */
.warn {
  border: 2px solid var(--ink); padding: 11px 14px; font-size: 12px; font-weight: 700;
  color: var(--ink); text-transform: uppercase; letter-spacing: .02em; text-align: center;
  margin: 0 auto 26px; max-width: 760px;
}
.pdp > *, .devs > *, .dev > * { min-width: 0; }

/* ================================================================ phone ordering (23 Oct 2026)
   From a phone review of /flavors/candy/: products 4.3 screens down, no Add to cart on the
   cards, Add to cart 1.8 screens down the flavour page, no sign an add worked, the bag counter
   scrolled away, 34px header and cart controls. */

/* the header stays on screen, so the bag counter is always in view */
.hdr { position: sticky; top: 0; z-index: 60; }
html { scroll-padding-top: 76px; }
#buy, #flavors, #lines { scroll-margin-top: 76px; }
.burger, .bag { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.bag { display: inline-flex; }
@media (max-width: 900px) {
  .burger { display: inline-flex; flex-direction: column; }
  .burger span { margin: 2.5px 0; }
  .nav { top: 100%; max-height: calc(100vh - 58px); overflow-y: auto; }
  /* flex items in a height-limited column shrink: an open PRODUCTS panel was squeezed to fit and
     spilled over the rows below it */
  .nav > * { flex: 0 0 auto; }
  /* the photo no longer fills the first screen: the price and the picker follow it sooner */
  .pdp__img { aspect-ratio: auto; height: min(34vh, 280px); }
}
.card__badge { font-size: 12px; }

/* flavour-group pages: one line under the title, then the products */
.nlead { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 70ch; margin: 8px 0 24px; }

/* "by device": one tappable row per device, opening onto large tags */
.bydev { border-top: 1px solid var(--line); }
.bydev__d { border-bottom: 1px solid var(--line); }
.bydev__d > summary {
  list-style: none; cursor: pointer; position: relative;
  display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 10px 34px 10px 2px;
}
.bydev__d > summary::-webkit-details-marker { display: none; }
.bydev__d > summary::after {
  content: ''; position: absolute; right: 10px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
}
.bydev__d[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.bydev__d > summary b { color: var(--ink); font-size: 15px; white-space: nowrap; }
.bydev__d > summary span {
  color: var(--muted); font-size: 13.5px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bydev__l { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 18px; }
.tag {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
  border: 1px solid var(--line); border-radius: 22px; background: var(--paper);
  color: var(--ink); font-size: 14px;
}
.tag:hover { border-color: var(--ink); text-decoration: none; }
.tag--all { font-weight: 600; border-color: var(--ink); }

/* flavour tables: rows stack on a phone instead of a 746px table swiped sideways */
@media (max-width: 640px) {
  .tbl table.spec--stack { min-width: 0; }
  .tbl table.spec--stack, .tbl table.spec--stack tbody, .tbl table.spec--stack tr,
  .tbl table.spec--stack th, .tbl table.spec--stack td { display: block; width: auto; }
  .tbl table.spec--stack tr:first-child { display: none; }
  .tbl table.spec--stack tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .tbl table.spec--stack th, .tbl table.spec--stack td {
    border: 0; padding: 2px 0; white-space: normal; min-width: 0; font-size: 14px;
  }
  .tbl table.spec--stack th { font-size: 15px; padding-bottom: 4px; }
  .tbl table.spec--stack th a { font-weight: 600; }
  .tbl table.spec--stack td[data-label]::before { content: attr(data-label) ': '; color: var(--was); }
  .tbl table.spec--stack td[data-label="Profile"]::before { content: none; }
}

/* after adding: what went in, and the two next steps */
.added {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90;
  max-width: 560px; margin: 0 auto; padding: 14px 48px 14px 16px;
  background: var(--ink); color: #fff; border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
  transform: translateY(150%); transition: transform .25s ease;
}
.added.on { transform: none; }
.added__t { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; font-size: 14px; line-height: 1.4; }
.added__t b { display: block; color: #fff; font-size: 15px; }
.added__t span span { display: block; color: #c9cdd2; }
.added__ok {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: #2e7d4f;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.added__a { display: flex; gap: 10px; }
.added__a .btn { flex: 1 1 0; min-height: 46px; }
.added__a .btn:not(.btn--fill) { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.added__a .btn--fill { background: #fff; color: var(--ink); border-color: #fff; }
.added__x {
  position: absolute; top: 2px; right: 2px; width: 44px; height: 44px;
  background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
}

/* phone: Add to cart fixed to the bottom while the real button is out of view */
.sbar { display: none; }
@media (max-width: 900px) {
  .sbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    align-items: center; gap: 12px; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
  }
  .sbar[hidden], body.has-added .sbar, body.nav-open .sbar { display: none; }
  body.nav-open .chat { display: none; }
  .sbar__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  .sbar__t b { font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sbar__t span { font-size: 15px; font-weight: 700; color: var(--sale); margin-top: 2px; }
  .sbar__t small { font-size: 12.5px; color: var(--muted); }
  .sbar--total .sbar__t span { font-size: 19px; margin-top: 0; }
  /* 16px, or iPhone zooms the whole page when it opens */
  .sbar__sel {
    width: 100%; min-width: 0; height: 40px; padding: 0 8px; font-size: 16px; color: var(--ink);
    background: var(--paper); border: 1px solid var(--ink); border-radius: var(--r);
  }
  .sbar .btn { flex: 0 0 auto; min-height: 48px; padding: 0 22px; font-size: 15px; }
  .sbar--buy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
  .sbar--buy[hidden] { display: none; }
  .sbar__pick { min-width: 0; }
  .sbar__pick b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 1.25; color: var(--ink); }
  .sbar__pr { font-size: 16px; font-weight: 700; color: var(--sale); white-space: nowrap; text-align: right; }
  .sbar__packs { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .sbar__pl { font-size: 12px; font-weight: 600; color: var(--muted); }
  .sbar__packs label { display: inline-flex; align-items: center; gap: 3px; min-height: 40px; font-size: 13.5px; font-weight: 600; white-space: nowrap; color: var(--ink); }
  .sbar__packs input { margin: 0; width: 15px; height: 15px; accent-color: var(--ink); }
  body.has-sbar { padding-bottom: 124px; }
  /* the bar carries the total and the button on a phone, so they do not appear twice */
  .cl__sum .btn--buy, .ck__form .btn--buy { display: none; }
}

/* the bag: one block per line, 44px controls, Checkout full width on a phone */
.cls { border-top: 1px solid var(--line); margin-top: 10px; }
.cl {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 8px 14px;
  padding: 16px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.cl__img { grid-row: span 2; width: 110px; height: 110px; object-fit: contain; background: var(--tile); border-radius: 6px; }
.cl__pk { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--sale); }
.cl > .cl__q { grid-column: 2 / -1; }
.cl__n { display: block; color: var(--ink); font-size: 15px; }
.cl__m { display: block; color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.cl__q { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qb {
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); color: var(--ink); font-size: 18px; cursor: pointer;
}
.qb:hover { border-color: var(--ink); }
.qb__n { min-width: 30px; text-align: center; font-weight: 600; color: var(--ink); }
.cl__rm {
  margin-left: 2px; min-height: 44px; padding: 0 6px; background: none; border: 0;
  font: inherit; font-size: 13.5px; color: var(--body); text-decoration: underline; cursor: pointer;
}
.cl__p { color: var(--ink); font-size: 15px; white-space: nowrap; }
.cl__sum { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; margin-top: 18px; }
.cl__sum p { font-size: 18px; margin: 0; color: var(--ink); }
.cl__sum .cl__ship { font-size: 15px; color: var(--body); }
.cl__sum .cl__tot { font-size: 20px; }
.cl__sum .btn--buy { flex: 0 0 auto; width: 100%; max-width: 360px; }
.cl__more { font-size: 14px; color: var(--ink); text-decoration: underline; padding: 10px 0; }
@media (max-width: 600px) {
  .cl__sum { align-items: stretch; }
  .cl__sum p { text-align: right; }
  .cl__sum .btn--buy { max-width: none; }
  .cl__more { text-align: center; }
}

/* ================================================================ flavours explained (23 Oct 2026) */
/* the taste line on a flavour card, between the name and the device */
.card__taste {
  font-size: 13px; line-height: 1.4; color: var(--body); margin: 0 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* the guide on a flavour-group page: style by style, each flavour with its photo */
.fx { margin-top: 30px; }
.fx__h { font-size: 19px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.fx__i { font-size: 14.5px; color: var(--muted); max-width: 82ch; margin: 0 0 16px; }
.fx__l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 40px; }
.fx__e { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; align-items: start; }
.fx__img { display: block; width: 130px; height: 130px; background: var(--paper); border-radius: var(--rc); overflow: hidden; }
.fx__img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.fx__e h4 { font-size: 15.5px; font-weight: 700; margin: 0 0 3px; }
.fx__e h4 a { color: var(--ink); }
.fx__e p { font-size: 14.5px; line-height: 1.6; margin: 0; color: var(--body); }
.fx__e .fx__f { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
@media (max-width: 760px) {
  .fx__l { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .fx__e { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
  .fx__img { width: 104px; height: 104px; }
}

/* the device on every product card, above the flavour name, so a grid of similar-looking
   devices can be told apart at a glance */
.card__dev {
  margin: 10px 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink); line-height: 1.35;
  display: block; -webkit-line-clamp: unset; overflow: visible; white-space: normal;
}
.card__dev + .card__t { margin-top: 0; }

/* ================================================================ comparison page (23 Oct 2026) */
/* every device at a glance */
.cmpg { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-top: 18px; }
.cmpg__c { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--rc); padding: 12px; }
.cmpg__img { display: block; aspect-ratio: 1 / 1; background: var(--tile); border-radius: var(--rc); overflow: hidden; }
.cmpg__img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.cmpg__k { margin: 10px 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cmpg__c h3 { font-size: 16px; margin: 0 0 8px; }
.cmpg__c h3 a { color: var(--ink); }
.cmpg__d { margin: 0 0 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cmpg__d div { background: var(--band); border-radius: 4px; padding: 6px 8px; }
.cmpg__d dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cmpg__d dd { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.cmpg__p { font-size: 13px; color: var(--muted); margin: 0 0 10px; flex: 1 1 auto; }
.cmpg__p b { color: var(--sale); font-size: 15px; }
.cmpg__b { width: 100%; font-size: 13.5px; padding: 0 10px; }

/* head-to-head */
.vs { max-width: 920px; }
.vs__top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; margin: 16px 0 14px; }
.vs__side { text-align: center; }
.vs__img { width: 100%; max-width: 190px; aspect-ratio: 1 / 1; object-fit: contain; padding: 6%; background: var(--paper); border-radius: var(--rc); mix-blend-mode: multiply; }
.band--tint .vs__img { background: #fff; }
.vs__side h3 { font-size: 17px; margin: 8px 0 0; }
.vs__side h3 a { color: var(--ink); }
.vs__mid { font-size: 14px; font-weight: 700; color: var(--paper); background: var(--ink); border-radius: 50%; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; }
.vs__t { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: var(--rc); overflow: hidden; }
.vs__t th, .vs__t td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; vertical-align: top; }
.vs__t tr:first-child th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--band); }
.vs__t th { width: 26%; color: var(--muted); font-weight: 400; }
.vs__t td { width: 37%; color: var(--ink); }
.vs__t td.win { font-weight: 700; }
.vs__t td.win::after { content: 'more'; margin-left: 8px; font-size: 10.5px; font-weight: 700; color: #2e7d4f; background: #e6f4ec; border-radius: 3px; padding: 2px 6px; text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px; }
.vs__diff { font-size: 15px; color: var(--body); margin: 16px 0 12px; max-width: 80ch; }
.vs__diff b { color: var(--ink); }
.vs__pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vs__pick > div { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: var(--rc); padding: 12px 14px; font-size: 14px; line-height: 1.55; }
.vs__pick b { display: block; color: var(--ink); margin-bottom: 2px; }
.vs__pick a, .vs__diff a { color: var(--ink); text-decoration: underline; }

/* pick by what matters */
.need { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 16px; }
.need__c { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--rc); color: inherit; background: var(--paper); }
.need__c:hover { border-color: var(--ink); text-decoration: none; }
.need__img { flex: 0 0 110px; width: 110px; height: 110px; object-fit: contain; padding: 6px; background: var(--tile); border-radius: 6px; mix-blend-mode: multiply; }
.need__c small { display: block; font-size: 12px; color: var(--muted); }
.need__c b { display: block; font-size: 15px; color: var(--ink); }
.need__c em { display: block; font-style: normal; font-size: 13px; color: var(--body); }

/* bars */
.bars { display: grid; gap: 10px; margin: 14px 0 12px; max-width: 860px; }
.bars__r { display: grid; grid-template-columns: 150px minmax(0, 1fr) 170px; gap: 12px; align-items: center; }
.bars__l a { color: var(--ink); font-weight: 600; font-size: 14px; }
.bars__t { height: 14px; background: var(--line); border-radius: 7px; overflow: hidden; }
.bars__f { display: block; height: 100%; background: var(--ink); border-radius: 7px; }
.bars__f--ml { background: var(--sale); }
.bars__v { font-size: 13px; color: var(--muted); }
.bars__v b { color: var(--ink); font-size: 14.5px; margin-right: 4px; }

@media (max-width: 640px) {
  .cmpg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cmpg__d { grid-template-columns: 1fr; }
  .vs__img { max-width: 130px; }
  .vs__mid { width: 32px; height: 32px; font-size: 12px; }
  .vs__t th, .vs__t td { padding: 9px 8px; font-size: 13px; }
  .vs__t td.win::after { display: block; width: max-content; margin: 4px 0 0; }
  .vs__pick { grid-template-columns: minmax(0, 1fr); }
  .bars__r { grid-template-columns: minmax(0, 1fr) auto; }
  .bars__t { grid-column: 1 / -1; order: 3; }
}
.cmpg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cmpg--3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cmpg__h { font-size: 15px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 22px 0 0; }
.vs__img { display: block; margin: 0 auto; }
@media (max-width: 900px) { .cmpg, .cmpg--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vs__t td.win--lo::after { content: "lower"; }

/* ================================================================ checkout: the order preview */
.ck { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: start; }
.ck__form { grid-column: 1; grid-row: 1; max-width: 600px; }
.ck__sum {
  grid-column: 2; grid-row: 1; position: sticky; top: 84px;
  background: var(--band); border: 1px solid var(--line); border-radius: var(--rc); padding: 18px;
}
.ck__sh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.ck__sh h2 { font-size: 17px; margin: 0; color: var(--ink); }
.ck__sh h2 span { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.ck__sh a { font-size: 13.5px; color: var(--ink); text-decoration: underline; }
.ck__ls { display: grid; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ck__l { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px 12px; align-items: start; }
.ck__l .cl__q { grid-column: 2 / -1; gap: 4px; }
.ck__pi { grid-row: span 2; position: relative; width: 96px; height: 96px; background: #fff; border-radius: 6px; border: 1px solid var(--line); }
.ck__pi img { width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.ck__q {
  position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--ink); color: #fff; font-size: 12px; line-height: 22px; text-align: center;
}
.ck__n { font-size: 14.5px; color: var(--ink); line-height: 1.35; }
.ck__n small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ck__lp { font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ck__t { margin: 12px 0 0; display: grid; gap: 6px; }
.ck__t div { display: flex; justify-content: space-between; font-size: 14px; color: var(--body); }
.ck__t dd { margin: 0; color: var(--ink); }
.ck__t .ck__tt { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 18px; font-weight: 700; color: var(--ink); }
.ck__free { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) {
  .ck { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ck__sum { grid-column: 1; grid-row: 1; position: static; }
  .ck__form { grid-column: 1; grid-row: 2; }
}

/* ================================================================ live chat bubble (23 Oct 2026) */
.chat { position: fixed; right: 16px; bottom: 16px; z-index: 85; }
.chat__b {
  position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.chat__n { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--sale); color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; }
.chat__p {
  position: absolute; right: 0; bottom: 68px; width: min(360px, calc(100vw - 32px)); height: min(480px, calc(100vh - 140px));
  display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .2); overflow: hidden;
}
.chat__p[hidden] { display: none; }
.chat__h { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--ink); color: #fff; }
.chat__h button { width: 36px; height: 36px; border: 0; background: none; color: #fff; font-size: 24px; cursor: pointer; }
.chat__m { flex: 1 1 auto; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--band); }
.chat__msg { max-width: 82%; padding: 9px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.chat__msg--a { align-self: flex-start; background: #fff; border: 1px solid var(--line); color: var(--ink); }
.chat__msg--v { align-self: flex-end; background: var(--ink); color: #fff; }
.chat__f { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.chat__f textarea { flex: 1 1 auto; min-height: 44px; max-height: 120px; resize: none; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; }
.chat__f .btn { flex: 0 0 auto; }
body.has-added .chat { display: none; }
@media (max-width: 900px) {
  body.has-sbar .chat { bottom: 132px; }
  .chat__b { width: 52px; height: 52px; }
}

/* ---------------------------------------------------------------- search
   .srch: the header icon (a plain link to /search/). .sbox: the as-you-type box shop.js opens.
   .srp: the /search/ results page, rendered as HTML by php/inc/search.php. */
.srch { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin-right: -8px; color: var(--ink); }
.srch:hover { color: var(--ink); text-decoration: none; opacity: .7; }
.sbox { position: fixed; inset: 0; z-index: 95; display: none; background: rgba(0, 0, 0, .45);
  padding: 70px var(--gut) 20px; }
.sbox.on { display: block; }
body.has-sbox { overflow: hidden; }
.sbox__in { max-width: 680px; margin: 0 auto; background: var(--paper); border-radius: var(--rc);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25); overflow: hidden; }
.sbox__f { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.sbox__f input { flex: 1 1 auto; min-width: 0; height: 58px; border: 0; padding: 0 18px; font: inherit;
  font-size: 17px; color: var(--ink); background: transparent; outline: none; }
.sbox__f input::-webkit-search-cancel-button { display: none; }
.sbox__x { flex: 0 0 auto; width: 52px; height: 58px; border: 0; background: none; font-size: 28px;
  line-height: 1; color: var(--muted); cursor: pointer; }
.sbox__r { max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); overflow-y: auto; }
.sbox__r:empty { display: none; }
.sbox__a { display: flex; align-items: center; gap: 14px; padding: 10px 18px; color: var(--ink);
  border-bottom: 1px solid var(--band); }
.sbox__a:hover, .sbox__a:focus { background: var(--band); text-decoration: none; }
.sbox__a img, .sbox__ic { flex: 0 0 76px; width: 76px; height: 76px; border-radius: var(--r);
  background: var(--tile); object-fit: contain; }
.sbox__a span:not(.sbox__ic) { flex: 1 1 auto; min-width: 0; }
/* a group or guide has no photo: a small grid mark on the tile instead of an empty square */
.sbox__ic, .srp__ic { display: block; background: var(--tile) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1f21' stroke-width='1.6'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1'/%3E%3C/svg%3E") center / 22px no-repeat; }
.sbox__a small { display: block; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); }
.sbox__a b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.sbox__a em { flex: 0 0 auto; font-style: normal; font-weight: 700; color: var(--sale); font-size: 14px; }
.sbox__all { display: block; padding: 14px 18px; font-weight: 600; color: var(--ink); background: var(--band);
  position: sticky; bottom: 0; border-top: 1px solid var(--line); }
.sbox__none { margin: 0; padding: 18px; color: var(--muted); }
@media (max-width: 640px) {
  .sbox { padding: 0; background: var(--paper); }
  .sbox__in { max-width: none; border-radius: 0; box-shadow: none; height: 100%; display: flex;
    flex-direction: column; }
  .sbox__r { max-height: none; flex: 1 1 auto; }
}

.srp { padding-top: 34px; padding-bottom: 60px; }
.srp__h { font-size: 32px; line-height: 1.15; font-weight: 700; color: var(--ink); margin: 0 0 16px;
  overflow-wrap: anywhere; }
.srp__f { display: flex; gap: 10px; max-width: 620px; margin: 0 0 12px; }
.srp__f input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 14px; font: inherit; font-size: 16px;
  color: var(--ink); border: 1px solid var(--ink); border-radius: var(--r); background: var(--paper); }
.srp__f .btn { flex: 0 0 auto; height: 48px; }
.srp__n { color: var(--muted); margin: 0 0 22px; }
.srp__l { list-style: none; margin: 0 0 30px; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.srp__a { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--rc); color: var(--ink); height: 100%; }
.srp__a:hover { border-color: var(--ink); text-decoration: none; }
.srp__a img, .srp__ic { flex: 0 0 96px; width: 96px; height: 96px; border-radius: var(--r);
  background: var(--tile); object-fit: contain; }
.srp__a span { min-width: 0; }
.srp__a small { display: block; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.srp__a b { display: block; font-size: 15.5px; font-weight: 600; }
.srp__a em { display: block; font-style: normal; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
@media (max-width: 640px) { .srp__h { font-size: 25px; } .srp { padding-top: 22px; } }
.srp__g { margin-bottom: 10px; }
.srp__more { margin: 40px 0 14px; }

/* ---------------------------------------------------------------- chat: who is writing
   A new visitor opening the chat gives a first name and an email before the first message
   (owner, 24 Oct 2026: no pop-up; the chat asks). It sits where the message box will be. */
.chat__id { padding: 12px 14px 14px; border-top: 1px solid var(--line); background: var(--paper); }
.chat__id[hidden], .chat__f[hidden] { display: none; }
.chat__id p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.chat__id label { display: block; margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.chat__id input { display: block; width: 100%; height: 44px; margin-top: 4px; padding: 0 12px; font: inherit; font-size: 16px;
  color: var(--ink); border: 1px solid #c9ccd1; border-radius: 8px; background: var(--paper); }
.chat__id input:focus { outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink); }
.chat__id .btn { width: 100%; height: 46px; margin-top: 4px; }
.chat__err { margin: 0 0 8px; font-size: 13px; color: #c0392b; }

/* ---------------------------------------------------------------- what stands out
   Owner, 24 Oct 2026: "the pages dont have prices and important texts highlighted". The price
   in sale red and large, the figures a buyer compares (puffs, e-liquid, battery) in ink and bold
   on chips, the prose after them in the body colour. */
.hero__price { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 14px; }
.hero__price span { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hero__price b { font-size: 44px; line-height: 1; font-weight: 700; color: var(--sale); }
.hero__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; }
.hero__facts li { padding: 7px 14px; font-size: 14px; color: var(--body); background: var(--paper);
  border: 1px solid var(--line); border-radius: 999px; }
.hero__facts b { color: var(--ink); font-weight: 700; }
.hero p.hero__lede { font-size: 16px; line-height: 1.65; }
@media (max-width: 900px) {
  .hero__price { justify-content: center; }
  .hero__price b { font-size: 36px; }
  .hero__facts { justify-content: center; }
}

.devs h3 { font-size: 20px; margin-bottom: 4px; }
.dev__price { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dev__price b { margin-left: 4px; font-size: 26px; line-height: 1; letter-spacing: 0; color: var(--sale); vertical-align: -2px; }
.dev__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; }
.dev__facts li { padding: 5px 10px; font-size: 13px; color: var(--body); background: var(--band); border-radius: 4px; }
.dev__facts b { color: var(--ink); font-weight: 700; }
.dev__go { margin-top: 16px; }
.dev__go span { margin-left: 8px; font-weight: 400; opacity: .75; }
.dev__pod em { margin-left: auto; padding-left: 10px; font-style: normal; font-size: 15px; font-weight: 700; color: var(--sale); white-space: nowrap; }
.line__s b { color: var(--ink); font-weight: 700; }
.line__s .pr b { color: var(--sale); font-size: 16px; }
.spec--cmp .cmp__p b { color: var(--sale); font-size: 15px; }

/* product cards: the price is what a scan looks for, so it is the biggest line on the card */
.card__p { font-size: 17px; line-height: 1.3; }
.card__p b { font-size: 17px; }
.card__p s { font-size: 13px; }

/* the flavour page's price as large as the device page's, and each device's own price in the
   picker in sale red: it is the number that changes when the device does */
.pdp__price { font-size: 34px; line-height: 1.1; }
.pick__p { font-size: 16px; font-weight: 700; color: var(--sale); }
.pick--out .pick__p { color: var(--was); }
.pick__b small b { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .pdp__price { font-size: 30px; } }


/* ---------------------------------------------------------------- geekbar.com banner blocks
   Measured from the rendered site (shots in _research/mirror/): full-bleed rounded banner
   cards on a grey page, the model name in bold caps under its banner, a row of outlined pill
   chips for the line's features, floating free of any card box. */
.heroB { padding: 18px var(--gut) 0; max-width: var(--wrap); margin: 0 auto; }
.heroB__card { position: relative; border-radius: 20px; overflow: hidden; display: block; }
.heroB__card img { width: 100%; height: auto; display: block; }
.heroB__ov {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 6% 6.5%; background: linear-gradient(90deg, rgba(255,255,255,.72) 0%,
    rgba(255,255,255,.3) 42%, rgba(255,255,255,0) 62%);
}
.heroB__ov h1 { font-size: clamp(22px, 3vw, 44px); font-weight: 800; color: var(--ink);
  line-height: 1.08; margin: 0 0 8px; max-width: 13ch; }
.heroB__ov .hero__lede { font-size: clamp(13px, 1.3vw, 17px); color: #444; max-width: 34ch; margin: 0 0 14px; }
.heroB__price { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; }
.heroB__price span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #666; }
.heroB__price b { font-size: clamp(26px, 3vw, 40px); line-height: 1; color: var(--sale); }
@media (max-width: 760px) {
  .heroB { padding: 10px 10px 0; }
  .heroB__ov { position: static; background: none; padding: 14px 6px 0; }
  .heroB__ov h1, .heroB__ov .hero__lede { max-width: none; }
}

.lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 26px; }
@media (max-width: 900px) { .lines { grid-template-columns: minmax(0, 1fr); } }
.lineb { display: block; color: inherit; }
.lineb:hover { text-decoration: none; }
.lineb__img { border-radius: 40px; overflow: hidden; display: block; }
.lineb__img img { width: 100%; height: auto; display: block; transition: transform .3s ease; }
.lineb:hover .lineb__img img { transform: scale(1.02); }
.lineb__h { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 16px 2px 12px; }
.lineb__h h3 a { color: inherit; }
.lineb__s { font-size: 15px; line-height: 1.65; color: #444; margin: 0 2px 16px; }
.lineb { display: flex; flex-direction: column; }
.lineb__cta { margin-top: auto; flex-wrap: wrap; }
.lineb__h h3 { font-size: clamp(22px, 2.2vw, 32px); font-weight: 600; letter-spacing: 0;
  color: #333; margin: 0; }
.lineb__h .pr { font-size: 17px; font-weight: 800; color: var(--sale); white-space: nowrap; }
.lineb__h .pr s { color: var(--was); font-weight: 400; font-size: 13px; margin-left: 6px; }
.chipsrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.chipsrow li { border: 1.5px solid #9a9a9a; border-radius: 999px; padding: 6px 16px;
  font-size: 13px; color: #333; background: transparent; }
.lineb__cta { display: flex; gap: 10px; }

/* ---------------------------------------------------------------- bento stats (their mode tile) */
.stats--bento li { background: var(--paper); border-radius: 14px; }
.stats--bento li:first-child {
  background: linear-gradient(135deg, #1156d6, #0b2f8a); border-radius: 14px;
}
.stats--bento li:first-child b { color: #7dff8a; }
.stats--bento li:first-child span { color: #cdd9ff; }

/* ---------------------------------------------------------------- the dark cosmic band */
.band--dark { background: #0b0b14; color: #c7cad6; }
.band--dark .band__h { color: #fff; }
.band--dark .prose a { color: #fff; text-decoration-color: rgba(255,255,255,.4); }
.band--dark .prose p { color: #c7cad6; }
.ftiles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
@media (max-width: 760px) { .ftiles { grid-template-columns: minmax(0,1fr); } }
.ftiles li { background: #15151f; border: 1px solid #23232f; border-radius: 14px; padding: 16px 16px 14px; }
.ftiles b { display: block; font-size: 18px; color: #fff; margin-bottom: 4px; }
.ftiles span { font-size: 13.5px; line-height: 1.55; color: #9ea3b4; }


/* ---------------------------------------------------------------- their giant section heading */
.secH { font-size: clamp(34px, 4.2vw, 60px); font-weight: 700; color: #333;
  text-align: center; margin: 6px 0 40px; }

/* ---------------------------------------------------------------- the PRODUCTS mega panel */
.drop--mega { position: static; }
.drop--mega .drop__m.mega {
  left: 0; right: 0; top: 100%; width: 100%; min-width: 0;
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px 40px;
  padding: 34px max(var(--gut), calc((100vw - 1100px) / 2)) 34px; border: 0; border-top: 1px solid #e4e4e4;
  border-radius: 0; box-shadow: 0 24px 40px rgba(0,0,0,.10);
}
.hdr { position: sticky; }
.mega__rail { display: flex; flex-direction: column; gap: 2px; }
.mega__rail a, .nav .mega__rail a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 0; font-size: 14px; font-weight: 700; text-transform: uppercase; color: #222;
  box-shadow: none; min-height: 0;
}
.mega__rail a.on, .mega__rail a:hover { color: #ff6b00; text-decoration: none; }
.mega__rail a span { font-size: 18px; color: #999; }
.mega__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 14px; }
@media (max-width: 1240px) { .mega__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mega__panes { min-width: 0; }
.mega__grid[hidden] { display: none; }
.mega__p, .nav .mega__p { position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; text-align: center; color: #333; font-size: 14px; padding: 0; }
.mega__new { position: absolute; left: 4px; top: 58px; width: 34px; height: 34px; border-radius: 50%;
  background: #3aa7e0; color: #fff; font: 700 10px/34px var(--font); text-align: center; z-index: 1; }
.mega__p:hover { text-decoration: none; color: #000; }
.mega__p img { width: 100%; max-width: 150px; height: 130px; object-fit: contain;
  mix-blend-mode: multiply; }
.mega__p b { font-weight: 400; margin-top: 10px; }
.mega__p span { color: var(--sale); font-weight: 700; font-size: 13.5px; margin-top: 2px; }
@media (max-width: 900px) {
  .drop--mega .drop__m.mega { display: grid; grid-template-columns: minmax(0, 1fr); padding: 8px var(--gut) 14px; box-shadow: none; border-top: 0; }
  .drop--mega:not([open]) .drop__m.mega { display: none; }
  .mega__rail { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .mega__rail a { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; }
  .mega__rail a span { display: none; }
  .mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ---------------------------------------------------------------- hero carousel */
.gbHero { position: relative; padding: 22px 22px 0; }
.gbHero__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; border-radius: 40px; }
.gbHero__track::-webkit-scrollbar { display: none; }
.gbHero__s { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; padding: 40px clamp(16px, 5vw, 80px) 26px;
  color: #fff; text-align: center; }
.gbHero__s--a { background: linear-gradient(90deg, #f83cf0, #a56bff 55%, #5cc4ff); }
.gbHero__s--b { background: linear-gradient(90deg, #2746d8, #5a4bf0 55%, #2fb6e8); }
.gbHero__s--c { background: linear-gradient(90deg, #6a2be0, #d0369f 60%, #ff6a5c); }
.gbHero__k { margin: 0 0 8px; font-size: clamp(14px, 1.6vw, 22px); letter-spacing: .22em; text-transform: uppercase; }
.gbHero__t { margin: 0 0 22px; font-size: clamp(30px, 4vw, 56px); line-height: 1.1; font-weight: 800; color: #fff;
  text-transform: uppercase; }
.gbHero__panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; background: #fff;
  border-radius: 24px; padding: 20px; color: #333; }
.gbHero__f { margin: 16px 0 0; font-size: clamp(13px, 1.3vw, 18px); letter-spacing: .08em; }
.hTile { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.hTile img { width: 100%; max-width: 190px; height: 190px; object-fit: contain; mix-blend-mode: multiply; }
.hTile b { font-size: 15px; font-weight: 600; color: #222; }
.hTile span { font-size: 17px; font-weight: 800; color: var(--sale); }
.hTile .btn { margin-top: 6px; min-height: 42px; padding: 0 16px; font-size: 13.5px; }
.gbHero__nav { position: absolute; top: calc(50% - 26px); z-index: 2; width: 52px; height: 52px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .28); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.gbHero__nav--p { left: 32px; }
.gbHero__nav--n { right: 32px; }
.gbHero__dots { display: flex; justify-content: center; gap: 8px; padding: 14px 0 0; }
.gbHero__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 5px; background: #ccc; cursor: pointer; }
.gbHero__dots button.on { width: 32px; background: #666; }
@media (max-width: 900px) {
  .gbHero { padding: 10px 10px 0; }
  .gbHero__track { border-radius: 24px; }
  .gbHero__s { padding: 26px 12px 18px; }
  .gbHero__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; padding: 12px 8px; border-radius: 18px; }
  .hTile img { height: 150px; }
  .gbHero__nav { display: none; }
  .lineb__img { border-radius: 24px; }
}

/* ---------------------------------------------------------------- ticker */
.ticker { background: #000; color: #fff; overflow: hidden; padding: 18px 0; }
.ticker__in { display: inline-flex; gap: 44px; white-space: nowrap; font-size: clamp(18px, 2vw, 28px); font-weight: 700;
  animation: gbTick 40s linear infinite; }
@keyframes gbTick { to { transform: translateX(-33.333%); } }
@media (prefers-reduced-motion: reduce) { .ticker__in { animation: none; } }

/* ---------------------------------------------------------------- flavour pages */
.fx__n { font-size: 15.5px; font-weight: 700; margin: 0 0 3px; }
.fx__n a { color: var(--ink); }
.fx__sub { font-size: 16px; font-weight: 700; color: var(--ink); margin: 22px 0 12px; }

@media (max-width: 900px) {
  .nav > a, .drop, .drop > summary { min-height: 0; box-shadow: none; }
  .nav > a { display: block; }
  .nav > a:hover, .nav > a[aria-current], .drop:hover > summary, .drop[open] > summary { box-shadow: none; }
  .drop > summary { display: flex; justify-content: space-between; }
  .drop > summary::after { content: '+'; font-size: 18px; color: #777; }
  .drop[open] > summary::after { content: '\2212'; }
  .logo img { width: 130px; height: 46px; }
  .gbwarn { min-height: 0; gap: 8px 18px; }
  .gbwarn__age { width: 40px; height: 40px; font-size: 12px; }
}

/* the shared dropdown link rule was winning here: grey prices and a 14px gap in the panel */
.drop__m a.mega__p { gap: 0; padding: 0; }
.drop__m .mega__p span { color: var(--sale); font-size: 13.5px; font-weight: 700; margin-top: 2px; }
.drop__m .mega__p:hover { background: none; }
.mega__p img { max-width: 170px; height: 150px; }
@media (max-width: 900px) { .mega__p img { height: 104px; } }

@media (max-width: 900px) {
  .nav .mega__rail a { padding: 8px 14px; font-size: 13px; }
}


/* every control takes the site font too: browsers default form fields to their own */
button, input, select, textarea { font-family: var(--font); }

/* ---------------------------------------------------------------- shop page */
.shopTop { padding-bottom: 26px; }
.shopH { font-size: 18px; font-weight: 700; color: var(--ink); margin: 22px 0 12px; }
.shopDevs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .shopDevs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .shopDevs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.shopDev { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 8px 12px;
  border: 1px solid #ececec; border-radius: 12px; color: #333; }
.shopDev:hover { border-color: #333; text-decoration: none; }
.shopDev img { width: 100%; max-width: 210px; height: 200px; object-fit: contain; mix-blend-mode: multiply; }
@media (max-width: 760px) { .shopDev img { height: 150px; } }
.shopDev b { font-size: 13.5px; font-weight: 600; margin-top: 6px; }
.shopDev span { font-size: 13.5px; font-weight: 700; color: var(--sale); }
.chipsrow a { color: inherit; }
.chipsrow li:hover { border-color: #333; }
.shopF { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.shopF label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 700; color: #333; }
.shopF select { min-height: 44px; padding: 0 10px; border: 1px solid #d8d8d8; border-radius: 8px; background: #fff;
  color: #333; font-size: 16px; }
.shopN { margin: 0 0 14px; color: #666; }
.shopNone { margin: 20px 0; }
.card[hidden] { display: none; }
@media (max-width: 760px) { .shopF { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- what every shop says up front
   .sig: the row under the home hero and above the footer. .bsig: the same beside Add to cart.
   .polT and .polSteps: the fact table and the steps on the shipping, returns and e-Transfer pages. */
.sig { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sig__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 24px; padding-block: 18px; }
.sig__i { display: flex; align-items: center; gap: 12px; color: var(--ink); min-height: 44px; }
.sig__i:hover { text-decoration: none; opacity: .75; }
.sig__ic { flex: 0 0 auto; display: inline-flex; }
.sig__t { min-width: 0; display: flex; flex-direction: column; }
.sig__t b { font-size: 14px; font-weight: 700; line-height: 1.3; }
.sig__t b span { white-space: nowrap; }
.sig__t small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
@media (max-width: 900px) {
  .sig__g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding-block: 16px; }
  .sig__i { align-items: flex-start; gap: 10px; }
  .sig__t b { font-size: 13px; }
  .sig__t small { font-size: 12px; }
}

.pdp__cad { font-size: 15px; font-weight: 600; color: var(--muted); }
.bsig { list-style: none; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.bsig a { display: flex; align-items: center; gap: 10px; min-height: 40px; color: var(--ink); font-size: 13.5px; line-height: 1.35; }
.bsig a:hover { text-decoration: underline; }
.bsig svg { flex: 0 0 22px; width: 22px; height: 22px; }

.polT { width: 100%; max-width: 720px; border-collapse: collapse; margin: 6px 0 10px; font-size: 15px; }
.polT th, .polT td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.polT th { width: 40%; font-weight: 700; color: var(--ink); }
.polT td { color: var(--body); }
.polSteps { margin: 8px 0 0; padding-left: 22px; max-width: 720px; }
.polSteps li { margin: 8px 0; line-height: 1.55; }

/* ---------------------------------------------------------------- pack pricing: real radios,
   directly under the flavour or device selector */
.packs { border: 0; margin: 18px 0 0; padding: 0; min-width: 0; }
.packs[hidden], .pack[hidden] { display: none; }
.packs legend { padding: 0; }
.packs__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pack {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1px 10px; align-items: center;
  min-height: 56px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--r); cursor: pointer;
}
.pack:hover { border-color: var(--ink); }
.pack:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pack input { grid-row: span 2; margin: 0; width: 18px; height: 18px; accent-color: var(--ink); }
.pick input { accent-color: var(--ink); }
.pack__b { display: contents; }
.pack__b b { grid-column: 2; grid-row: 1; font-size: 14.5px; color: var(--ink); }
.pack__b small { grid-column: 2 / -1; grid-row: 2; font-size: 12px; color: var(--sale); font-weight: 600; line-height: 1.3; }
.pack:first-child .pack__b small { color: var(--muted); font-weight: 400; }
.pack__p { grid-column: 3; grid-row: 1; font-size: 14.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
@media (max-width: 900px) {
  .pack { padding: 8px 10px; column-gap: 8px; }
  .pack__b small { font-size: 11.5px; white-space: nowrap; }
}

/* ---------------------------------------------------------------- the chat: products and files */
.chat__f { align-items: flex-end; gap: 4px; padding: 8px; }
.chat__f textarea { margin: 0 4px; }
.chat__i { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.chat__i:hover { opacity: .65; }
.chat__msg--img { padding: 4px; }
.chat__msg--img img { display: block; max-width: 100%; max-height: 220px; border-radius: 9px; background: #fff; }
.chat__msg a { color: inherit; text-decoration: underline; word-break: break-word; }
.chat__msg--img a { text-decoration: none; }
.chat__msg--busy { opacity: .6; }
.chat__card { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; width: 92%; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); }
.chat__card.chat__msg--a { align-self: flex-start; }
.chat__card.chat__msg--v { align-self: flex-end; background: #fff; color: var(--ink); }
.chat__pimg img { display: block; width: 84px; height: 84px; object-fit: contain; }
.chat__pb a { display: block; color: var(--ink); text-decoration: none; }
.chat__pb b { display: block; font-size: 14px; line-height: 1.3; }
.chat__pb small { display: block; font-size: 12px; line-height: 1.3; color: var(--muted); }
.chat__pb span { display: block; margin-top: 3px; font-size: 14px; font-weight: 700; color: var(--sale); }
.chat__pb button { width: 100%; min-height: 36px; margin-top: 6px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--ink); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.chat__pb em { display: block; margin-top: 4px; font-style: normal; font-size: 12.5px; color: var(--muted); }
.chat__pick { position: absolute; inset: 56px 0 0; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--paper); }
.chat__pick[hidden] { display: none; }
.chat__ph { display: flex; justify-content: space-between; align-items: center; color: var(--ink); }
.chat__ph button { width: 36px; height: 36px; border: 0; background: none; font-size: 24px; color: var(--ink); cursor: pointer; }
.chat__pick input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; }
.chat__pick > * { flex: 0 0 auto; }
.chat__pick > .chat__pl { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.chat__pl p { margin: 10px 2px; color: var(--muted); }
.chat__pi { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; padding: 6px; border: 0; border-bottom: 1px solid #ececec; background: none; font: inherit; text-align: left; cursor: pointer; }
.chat__pi img { display: block; width: 64px; height: 64px; object-fit: contain; }
.chat__pi b { display: block; font-size: 14px; line-height: 1.3; color: var(--ink); }
.chat__pi small { display: block; font-size: 12px; line-height: 1.3; color: var(--muted); }
.chat__pi i { font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--sale); }

/* ---------------------------------------------------------------- delivery options at checkout */
.ck__ship { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid #dedede; border-radius: 6px; cursor: pointer; }
.ck__ship:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ck__ship input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.ck__shipn { flex: 1 1 auto; min-width: 0; }
.ck__shipn b { display: block; color: var(--ink); }
.ck__shipn small { display: block; font-size: 12.5px; color: var(--muted); }
.ck__shipp { flex: 0 0 auto; font-weight: 700; color: var(--ink); }