/* ===========================================================
   Social Smoke - site stylesheet

   Inherited from aldinari.com per locked decision 5: same base, same
   utilities, same age-gate and header patterns, so the family reads as one
   house. What is new here is the catalog: a data-driven product grid, its
   filter bar, and a product detail layout, none of which the reference
   sites have because their ranges are hand-written.

   Palette note. Social Smoke has no brand color. The wordmark is pure black
   and the old Shopify store ran stock Dawn, so there is nothing to
   reproduce. This is deliberately monochrome, with --brand set to the ink.
   A real accent drops in by changing --brand alone; nothing else hardcodes
   a color.
   =========================================================== */

/* ===== Base / Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html:focus-within { scroll-behavior: smooth; }
/* No height:100% here. It pinned body's box to exactly the viewport while
   its content ran to 17000px, and a sticky child can only stick inside its
   containing block - so the header let go after one screen and scrolled
   away on every page. min-height:100vh below already does the job it was
   there for. */
html, body { margin: 0; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }

/* ===== Theme ===== */
:root {
  --bg: #ffffff;
  --bg-alt: #f6f6f8;
  --text: #111114;
  --muted: #5b6270;
  --ink: #111114;
  --brand: #111114;          /* monochrome for now, see note above */
  --brand-dark: #000000;
  --border: #e6e7eb;
  --radius: 14px;
  --shadow: 0 12px 30px rgba(17, 17, 20, .10);
  --shadow-lg: 0 20px 50px rgba(17, 17, 20, .16);
  --container: 1320px;
}

/* ===== Utilities ===== */
.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.section { padding: clamp(40px, 5vw, 80px) 0; }
.section.tight { padding: clamp(24px, 3vw, 44px) 0; }
.section.alt { background: var(--bg-alt); }
.section.ink { background: var(--ink); color: #fff; }
.section.ink .lead, .section.ink .muted { color: #b9bec9; }

.grid { display: grid; gap: clamp(16px, 2.5vw, 28px); }
.two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.four  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .three, .four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .two, .three, .four { grid-template-columns: 1fr; } }

.text-center { text-align: center; }
.h1 { font-size: clamp(30px, 5.2vw, 52px); line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 14px; font-weight: 800; }
.h2 { font-size: clamp(22px, 3.2vw, 34px); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 12px; font-weight: 800; }
.h3 { font-size: clamp(17px, 2.1vw, 21px); line-height: 1.2; margin: 0 0 8px; font-weight: 700; }
.lead { font-size: clamp(15px, 1.7vw, 18px); color: var(--muted); max-width: 62ch; }
.lead.center { margin-inline: auto; text-align: center; }
.small { font-size: 14px; color: var(--muted); }
.muted { color: var(--muted); }
.kicker {
  color: var(--brand); font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; font-size: 12px; margin: 0 0 10px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  background: var(--brand); color: #fff; font-weight: 700; cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.btn:hover { background: var(--brand-dark); }
.btn.ghost { background: transparent; color: currentColor; border-color: var(--border); }
.btn.ghost:hover { background: var(--bg-alt); }
.section.ink .btn.ghost:hover { background: rgba(255,255,255,.08); }

.card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.card-inner { padding: clamp(18px, 2.2vw, 26px); }

/* ===== Header ===== */
/* Opaque, not 93% white over a blur. The translucency was invisible over
   the white pages it was designed against and turned the bar grey the
   moment anything dark scrolled under it - which is now most of the home
   page, between the film banner and the hero. A frosted effect nobody can
   see on most of the site is not worth a grey bar on the rest of it. */
#siteHeader {
  position: sticky; top: 0; z-index: 1000;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 0; }
.brand { display: inline-flex; align-items: center; flex: none; }
/* picture is display:contents or the img sits in an inline line box and the
   descender space under it pushes the header from 57px to 78px - which the
   filter bar's sticky offset is measured against. Third time this element
   has caught me out on this site. */
.brand picture { display: contents; }
.brand img { height: 26px; width: auto; display: block; }
.nav-links { display: flex; gap: 22px; align-items: center; }
.nav-links a { font-weight: 700; font-size: 14.5px; color: var(--ink); transition: opacity .18s ease; }
.nav-links a:hover { opacity: .6; }
.nav-links a.is-current { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.menu-btn {
  display: none; border: 1px solid var(--border); border-radius: 10px;
  padding: 7px 12px; background: #fff; font-size: 20px; line-height: 1; cursor: pointer;
}
@media (max-width: 1040px) {
  .nav-links, .nav-actions .btn { display: none; }
  .menu-btn { display: inline-flex; }
  .brand img { height: 22px; }
}

#menuPanel { display: none; border-top: 1px solid var(--border); background: #fff; }
#menuPanel.is-open { display: block; }
#menuPanel ul { list-style: none; margin: 0; padding: 8px 0 16px; }
#menuPanel a { display: block; padding: 13px 4px; font-weight: 700; border-bottom: 1px solid var(--border); }
#menuPanel .btn { margin-top: 14px; width: 100%; }
@media (min-width: 1041px) { #menuPanel { display: none !important; } }

/* ===== Compliance notices ===== */
/* The FDA warning for covered tobacco products, 21 CFR 1143.3(b).
   Rebuilt to the spec the Shopify site shipped, which was materially
   bigger than what replaced it: 75px tall against 35, up to 24px type
   against 14, and a white rectangular border that had been dropped
   altogether. The rule asks for a border, so losing it was a regression.

   min-height rather than the old fixed height: at 375px wide this wraps
   to three lines, and a fixed 75px clipped them.

   Arial/Helvetica bold named explicitly. The rule names those two, or a
   similar sans serif; the site's system-ui stack qualifies on most
   machines and there is no reason to leave it to chance on the one
   element where the typeface is written into a regulation.

   NOT a compliance sign-off: 1143.3(b)(2) asks for 20 percent of the
   advertisement, and neither this nor the Shopify bar is near that on a
   full page. See the note to Ali. */
.warning-bar {
  background: #000; color: #fff; text-align: center; margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700; font-size: clamp(13px, 2.6vw, 24px);
  line-height: 1.25; letter-spacing: .01em;
  border: 2px solid #fff;
  min-height: 75px; padding: 10px 16px;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}
.notice-compliance {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; background: var(--bg-alt); font-size: 14px; color: #3c424e;
}
.notice-compliance strong { color: var(--ink); }

/* ===== Hero ===== */
.hero {
  background: var(--ink); color: #fff; text-align: center;
  padding: clamp(52px, 8vw, 104px) 0;
}
.hero .h1 { color: #fff; text-wrap: balance; }
.hero .lead { color: #c9cdd6; margin-inline: auto; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* ===========================================================
   Catalog
   =========================================================== */

/* ----- Filter bar ----- */
/* Opaque for the same reason as the header above it.
   The offset was 57px against a header that is 78, so the header sat over
   the top 21px of this bar - the filter labels included. app.js measures
   the header and publishes --header-h, which is the only way this stays
   right: the height is set by the Where to Buy button, which is hidden
   below 1040px, so it is not one number. The fallback is the desktop
   measurement, for the moment before the script runs. */
.filters {
  position: sticky; top: var(--header-h, 78px); z-index: 900;
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.filter-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filter-label {
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-right: 2px;
}
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 14px; font-size: 13.5px; font-weight: 600;
  background: #fff; color: var(--ink); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.chip:hover { border-color: #c9ccd4; }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip .count { font-size: 11.5px; opacity: .6; font-variant-numeric: tabular-nums; }
.filter-result { font-size: 13.5px; color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }

/* ----- Product grid ----- */
.product-grid {
  display: grid; gap: clamp(14px, 2vw, 24px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .product-grid { grid-template-columns: 1fr; } }

.product-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.product-card.is-hidden { display: none; }

/* Flex rather than grid, and every element between the box and the image
   carries the height constraint. See the note on .gallery-main below: with
   grid plus place-items:center the row is auto-sized, a percentage
   max-height resolves against an indefinite height, and the browser throws
   it away. Only one product currently has a portrait primary image
   (social-smoke-aura-pod-system, 400x425) but 31 portrait images exist in
   the catalog, so any reordering would spill one out of a card. */
.product-media {
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; aspect-ratio: 1 / 1; border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.product-media picture { display: contents; }
.product-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.product-media.is-empty {
  background: var(--bg-alt); color: var(--muted);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}

.product-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-brand {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.product-name { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin: 0; line-height: 1.25; }
.product-desc {
  color: var(--muted); font-size: 13.5px; margin: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pill {
  font-size: 11px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px;
}

.grid-empty {
  grid-column: 1 / -1; text-align: center; padding: 60px 20px;
  color: var(--muted); border: 1px dashed var(--border); border-radius: var(--radius);
}

/* ----- Category sections on the catalog page ----- */
.cat-head {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 18px; padding-top: 8px;
}
.cat-head h2 { margin: 0; }
.cat-head .count { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }

/* ===========================================================
   Product detail
   =========================================================== */
.product-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .product-hero { grid-template-columns: 1fr; } }

/* Tall images used to be cut off here, and the cause is worth recording
   because the CSS looked correct.
 *
 * This was grid with place-items:center, and the image carried
 * max-height:100%. place-items sets align-items:center, which stops the
 * implicit row stretching to the container's definite height, so the row is
 * content-sized. A percentage max-height against an indefinite height
 * resolves to none and is discarded. The image was then sized by width
 * alone: a 620x826 poster became 525x700 inside a 571px box and lost 129px
 * off the bottom to overflow:hidden.
 *
 * Flex fixes it because a flex container with a definite height gives its
 * items a definite cross size, so the percentage resolves. Every element
 * between the box and the image needs the constraint, including the
 * [data-slide] wrapper and the <picture>, or the chain breaks again at
 * whichever one is left out. min-height:0 lets them shrink below content
 * size, which flex items will not do by default.
 *
 * Do not reintroduce object-fit here. It changes how content paints inside
 * a box, not how the box is sized, so it never addressed this. */
.gallery-main {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 22px; aspect-ratio: 1 / 1; overflow: hidden;
}
/* :not([hidden]) is load-bearing. A bare [data-slide] rule setting display
   outranks the UA stylesheet's [hidden] { display: none }, which switched
   every slide back on: all seven shared the row and each collapsed to
   527/7 = 75px wide. The gallery only ever shows one at a time, and
   app.js toggles the hidden attribute to do it. */
.gallery-main > [data-slide]:not([hidden]) {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 0;
}
/* display:contents removes the <picture> box from layout entirely, so the
   <img> becomes the flex item of [data-slide] and its percentage
   max-height resolves against that definite height. Giving <picture> its
   own percentage max-width instead collapsed the image to 75x31: the
   img's max-width:100% resolved against a picture whose own width was
   still indefinite while it was being sized. */
.gallery-main picture { display: contents; }
.gallery-main img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
/* Same defect as .gallery-main, same fix. A 400x533 thumbnail was
   rendering 77px tall inside a 60px content box and spilling over the
   button's border. */
.gallery-thumb {
  width: 72px; height: 72px; padding: 6px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.gallery-thumb[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.gallery-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

.product-title { font-size: clamp(26px, 4vw, 40px); line-height: 1.08; letter-spacing: -.02em; margin: 6px 0 10px; font-weight: 800; }
.product-subtitle { font-size: 17px; color: var(--muted); margin: 0 0 18px; }

.spec-table { width: 100%; border-collapse: collapse; margin: 22px 0 0; font-size: 14.5px; }
.spec-table th, .spec-table td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.spec-table th { font-weight: 700; color: var(--ink); width: 34%; }
.spec-table td { color: var(--muted); }

.variant-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.variant-list li {
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 13px;
  font-size: 13.5px; font-weight: 600;
}
.variant-list .sku { display: block; font-size: 11px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Body copy from catalog.json. Trusted HTML per the schema, but it comes
   from a Shopify export, so it is contained rather than trusted to be tidy. */
.product-copy { margin-top: 22px; font-size: 15.5px; }
.product-copy > *:first-child { margin-top: 0; }
.product-copy p { margin: 0 0 14px; }
.product-copy ul, .product-copy ol { margin: 0 0 14px; padding-left: 20px; }
.product-copy li { margin-bottom: 6px; }
.product-copy img { border-radius: 10px; margin: 14px 0; }
.product-copy h2, .product-copy h3, .product-copy h4 { font-size: 17px; font-weight: 800; margin: 22px 0 8px; }
.product-copy a { text-decoration: underline; text-underline-offset: 2px; }

.breadcrumb { font-size: 13px; color: var(--muted); margin: 0 0 6px; display: flex; gap: 7px; flex-wrap: wrap; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { opacity: .5; }

/* Where the purchase path goes, since nothing is sold here. */
.buy-box {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-alt); padding: 20px; margin-top: 26px;
}
.buy-box p { margin: 0 0 14px; font-size: 14.5px; color: var(--muted); }
.buy-box .btn { width: 100%; }

/* ===== Age gate ===== */
.agegate-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(10, 10, 12, .95);
  padding: 24px;
}
.agegate-overlay.is-active { display: flex; }
.agegate-dialog {
  width: min(520px, 100%);
  background: #fff; border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  padding: clamp(26px, 4vw, 38px);
  text-align: center;
}
.agegate-logo { height: 26px; width: auto; margin: 0 auto 26px; }
.agegate-title { margin: 0 0 10px; font-size: clamp(20px, 3vw, 25px); font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.agegate-text { margin: 0 0 24px; color: var(--muted); font-size: 15px; }
.agegate-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .agegate-actions { grid-template-columns: 1fr; } }
.agegate-btn {
  appearance: none; border: 1px solid transparent; cursor: pointer;
  padding: 13px 16px; border-radius: 999px; font-weight: 700; font-size: 15px;
  transition: background .18s ease;
}
.agegate-btn--primary { background: var(--brand); color: #fff; }
.agegate-btn--primary:hover { background: var(--brand-dark); }
.agegate-btn--ghost { background: #f1f2f5; color: var(--ink); }
.agegate-btn--ghost:hover { background: #e4e6ea; }
.agegate-note { margin: 20px 0 0; font-size: 12px; color: #8a909d; line-height: 1.6; }
.agegate-warning {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 11.5px; font-weight: 700; color: var(--ink); letter-spacing: .01em;
}
body.agegate-open { overflow: hidden; }

/* ===== Footer ===== */
footer { background: var(--ink); color: #b9bec9; font-size: 14px; }
/* A wider brand block plus four equal lists, rather than five equal
   columns: at five equal widths the link lists cram and "Hookahs &
   Accessories" wraps badly. */
.footer-grid {
  padding: clamp(36px, 5vw, 56px) 0 30px;
  grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .footer-grid { grid-template-columns: 1fr; } }
.foot-brand img { height: 24px; width: auto; margin-bottom: 16px; }
.foot-brand p { margin: 0; max-width: 36ch; color: #8f96a3; font-size: 14px; }
.foot-title { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 0 0 14px; font-weight: 800; }
.foot-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot-links a { color: #b9bec9; transition: color .18s ease; }
.foot-links a:hover { color: #fff; }
.foot-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 20px 0 30px;
  border-top: 1px solid #2c2c34; color: #8f96a3; font-size: 13px;
}
.foot-legal { display: flex; gap: 10px; align-items: center; }
.foot-legal .sep { opacity: .45; }

/* ===== Back to top ===== */
.back-to-top {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0));
  z-index: 2500; display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; color: var(--ink); box-shadow: var(--shadow); cursor: pointer;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ===== Legal and content pages ===== */
.prose { max-width: 80ch; }
.prose h2 { font-size: 20px; font-weight: 800; margin: 30px 0 8px; color: var(--ink); }
.prose h3 { font-size: 17px; font-weight: 800; margin: 26px 0 8px; color: var(--ink); }
.prose p, .prose li { color: var(--muted); font-size: 15px; }
.prose strong { color: var(--ink); }
.prose ul { padding-left: 20px; margin: 0 0 10px; }
.prose li { margin-bottom: 6px; }

/* ===== A11y ===== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ===========================================================
   Where to buy
   =========================================================== */
.subregion-head {
  margin: 28px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.subregion-head:first-of-type { margin-top: 0; }

.vendor-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: clamp(12px, 1.8vw, 20px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1100px) { .vendor-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .vendor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .vendor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.vendor {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  height: 100%; padding: 18px 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; text-align: center;
  transition: box-shadow .2s ease, transform .2s ease;
}
.vendor:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

/* The logos are whatever each retailer supplied: mixed formats, mixed
   aspect ratios, some transparent and some baked onto white. A fixed-height
   box with contain is the only thing that makes 24 of them sit on one grid
   without looking accidental. */
.vendor-logo {
  display: grid; place-items: center;
  width: 100%; height: 56px;
}
.vendor-logo img {
  max-height: 56px; max-width: 100%; width: auto; height: auto;
  object-fit: contain;
}
.vendor-name-fallback { font-weight: 700; font-size: 14px; }

.vendor-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.vendor-stores { display: grid; gap: 2px; margin-top: 2px; }
.vendor-stores span { font-size: 11px; color: var(--muted); line-height: 1.4; }

/* ===========================================================
   Forms
   Only the contact page has one. Nothing else on this site takes input,
   and per CLAUDE.md a second form is a scope change rather than a feature.
   =========================================================== */
.form-grid { display: grid; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 700; color: var(--ink); }
.field label span { color: var(--muted); }
.field input, .field select, .field textarea {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  outline: none; background: #fff; color: var(--text);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(17, 17, 20, .10);
}
.field textarea { min-height: 130px; resize: vertical; }
.form-grid button[disabled] { opacity: .5; cursor: not-allowed; }
.form-success {
  display: none; padding: 22px; border-radius: var(--radius);
  background: var(--bg-alt); border: 1px solid var(--border);
}

/* ===========================================================
   FAQ
   =========================================================== */
/* Content plus a sticky index, the same shape as /our-story. Measured at
   1500px the single column left 630px of the container empty; this spends
   it on navigation rather than on margin. */
.doc-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  gap: clamp(30px, 5vw, 64px); align-items: start;
  margin-top: clamp(24px, 3vw, 36px);
  /* Capped and centred so the two columns sit together. Left to fill the
     1320px container, the content column is 996px wide while its text is
     capped at a readable measure, which stranded 358px between the answers
     and the index and looked worse than the single column did. */
  max-width: 980px; margin-inline: auto;
}
@media (max-width: 940px) { .doc-layout { grid-template-columns: 1fr; } }

.faq-body { max-width: 80ch; }

.doc-index { position: sticky; top: 92px; }
@media (max-width: 940px) { .doc-index { position: static; order: -1; } }
.doc-index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.doc-index li { border-bottom: 1px solid var(--border); }
.doc-index li:last-child { border-bottom: 0; }
.doc-index ol a {
  display: block; padding: 11px 0; font-size: 13.5px; color: var(--muted);
  transition: color .15s ease;
}
.doc-index ol a:hover { color: var(--ink); }
/* Set by the scroll spy in app.js as each section passes under the header. */
.doc-index ol a.is-active { color: var(--ink); font-weight: 700; }

.doc-index-footer {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border);
}

/* Clears the sticky header when a jump link lands on a section. */
.faq-section { margin-bottom: clamp(30px, 4vw, 48px); scroll-margin-top: 88px; }
.faq-section:last-child { margin-bottom: 0; }
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item summary {
  cursor: pointer; padding: 15px 28px 15px 0; position: relative;
  font-weight: 700; font-size: 16px; color: var(--ink); list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%); font-size: 20px; font-weight: 400;
  color: var(--muted); line-height: 1;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item summary:hover { opacity: .7; }
.faq-answer { padding: 0 28px 18px 0; color: var(--muted); font-size: 15px; }
.faq-answer a { text-decoration: underline; text-underline-offset: 2px; color: var(--ink); }

.flavor-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.flavor-list li {
  border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 16px; font-size: 14px; font-weight: 600;
}
.flavor-list a { display: block; }
.flavor-list li:hover { border-color: var(--ink); }

/* ===========================================================
   Catalogs
   =========================================================== */
.catalog-frame {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-alt); overflow: hidden;
  aspect-ratio: 16 / 10; min-height: 420px;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 760px) { .catalog-frame { aspect-ratio: 3 / 4; min-height: 0; } }
.catalog-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.catalog-placeholder { text-align: center; padding: 30px; color: var(--muted); }

/* ===========================================================
   Home page imagery
   =========================================================== */
.hero-split {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
@media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; } }
.hero-split .hero-copy .h1 { color: #fff; }
.hero-split .hero-copy .lead { color: #c9cdd6; margin-inline: 0; }
.hero-media {
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 1 / 1; background: #0a0a0c;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .hero-media { aspect-ratio: 16 / 10; } }

.band {
  position: relative; overflow: hidden; border-radius: var(--radius);
  min-height: clamp(220px, 28vw, 340px);
  display: flex; align-items: center;
}
.band img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.band::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(17,17,20,.86) 0%, rgba(17,17,20,.55) 60%, rgba(17,17,20,.25) 100%);
}
.band .band-copy {
  position: relative; z-index: 2; color: #fff;
  padding: clamp(24px, 4vw, 44px); max-width: 60ch;
}
.band .band-copy .lead { color: #d5d8df; }

/* ===========================================================
   Our Story and Our Team
   =========================================================== */
.story-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(28px, 5vw, 64px); align-items: start;
}
@media (max-width: 900px) { .story-layout { grid-template-columns: 1fr; } }

/* One size, one colour, for the whole narrative. The first section used to
   be set larger and in the ink colour while the rest was smaller and muted,
   which read as a mistake rather than as emphasis. */
.story-body { max-width: 68ch; }
.story-body p { font-size: 16px; color: #3c424e; }
.story-body h2 { margin-top: 36px; }

.mission {
  margin-top: 40px; padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-alt);
}
.mission p { font-size: 16px; color: var(--ink); }

/* Sticky so the dates stay beside the paragraph that mentions them. */
.milestones { position: sticky; top: 90px; }
@media (max-width: 900px) { .milestones { position: static; } }
/* The rail went from 8 milestones to 11 and now runs past 800px tall in a
   narrow column. Pinned, that leaves the last entries clipped for most of
   the scroll - they are still reachable, because sticky releases when the
   row ends, but only right at the bottom. Below the height where the whole
   rail fits under the header it simply flows with the page instead. */
@media (max-height: 940px) { .milestones { position: static; } }
.milestones ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.milestones li {
  display: grid; grid-template-columns: 54px 1fr; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.milestones li:last-child { border-bottom: 0; }
.milestones .year { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.milestones .what { font-size: 13.5px; color: var(--muted); line-height: 1.45; }

.team-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
}
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }

.team-card {
  display: flex; flex-direction: column; height: 100%;
  text-align: center;
}
.team-photo {
  display: block; width: 100%; aspect-ratio: 2 / 3;
  border-radius: var(--radius); overflow: hidden; background: var(--bg-alt);
  margin-bottom: 16px;
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Three of the six have no headshot, which is how the old site was too.
   An initials tile beats a grey rectangle or a hole in the grid. */
.team-photo.is-placeholder {
  display: grid; place-items: center;
  background: var(--ink); color: #fff;
}
.team-photo.is-placeholder .initials {
  font-size: clamp(34px, 5vw, 52px); font-weight: 800; letter-spacing: .04em;
}
.team-card:hover .team-photo { box-shadow: var(--shadow); }

.team-name  { font-size: 17px; font-weight: 700; }
.team-title { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.team-more {
  margin-top: 10px; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.team-card:hover .team-more { text-decoration: underline; text-underline-offset: 4px; }

/* One person */
.member-layout {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px); align-items: start; margin-top: 8px;
}
@media (max-width: 860px) { .member-layout { grid-template-columns: 1fr; } }
.member-photo {
  border-radius: var(--radius); overflow: hidden; background: var(--bg-alt);
  aspect-ratio: 2 / 3;
}
.member-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.member-photo.is-placeholder {
  display: grid; place-items: center; background: var(--ink); color: #fff;
}
.member-photo.is-placeholder .initials { font-size: clamp(56px, 9vw, 96px); font-weight: 800; letter-spacing: .04em; }
.member-body .prose p { font-size: 16px; color: #3c424e; }

.member-nav {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between;
  border-top: 1px solid var(--border); padding-top: 22px;
}

/* ===========================================================
   Brand marks on the cards
   =========================================================== */
.brand-card .card-inner {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
}
/* A fixed box with the mark contained is what lets four logos ranging
   from 3:1 to nearly 11:1 sit in one row without one dominating. */
.brand-mark {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 42px;
}
.brand-mark img { max-width: 100%; max-height: 42px; width: auto; height: auto; }
.brand-mark-text { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.brand-count { font-size: 13.5px; color: var(--muted); }

/* ===========================================================
   Footer newsletter
   =========================================================== */
.newsletter-band {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 4vw, 48px); flex-wrap: wrap;
  padding: clamp(28px, 4vw, 40px) 0;
  border-bottom: 1px solid #2c2c34;
}
.newsletter-copy { max-width: 46ch; }
.newsletter-copy p { margin: 0; color: #8f96a3; font-size: 14px; }

.newsletter-form {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  position: relative; min-width: min(420px, 100%);
}
.newsletter-form input[type="email"] {
  flex: 1 1 240px; min-width: 0;
  border: 1px solid #2c2c34; border-radius: 999px;
  padding: 12px 18px; background: #16161b; color: #fff;
  outline: none; transition: border-color .18s ease;
}
.newsletter-form input[type="email"]::placeholder { color: #6b7280; }
.newsletter-form input[type="email"]:focus { border-color: #4a4a55; }
.newsletter-form .btn { background: #fff; color: var(--ink); flex: none; }
.newsletter-form .btn:hover { background: #e4e6ea; }
.newsletter-form .btn:disabled { opacity: .6; cursor: default; }
.newsletter-status {
  flex-basis: 100%; margin: 0; min-height: 1.1em; font-size: 13px; color: #8f96a3;
}
.newsletter-status.is-ok { color: #9ae6b4; }
.newsletter-status.is-error { color: #feb2b2; }

.foot-locale { margin-top: 16px !important; font-size: 13.5px; color: #8f96a3; }
.foot-locale a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ===========================================================
   Form pages: /contact and /wholesale
   The form sits beside the heading rather than below it, so it starts at
   the top of the page instead of after a band of empty space.
   =========================================================== */
.form-page {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 60px); align-items: start;
}
@media (max-width: 940px) { .form-page { grid-template-columns: 1fr; } }
.form-page-copy { max-width: 56ch; }
.form-page-copy .lead { margin-bottom: 0; }
.form-page-form { position: sticky; top: 88px; }
@media (max-width: 940px) { .form-page-form { position: static; } }

/* Routes someone with the wrong intent to the right form before they fill
   in the one they are looking at. */
.route-card {
  margin-top: 28px; padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--bg-alt);
}
.route-card h2 { margin-bottom: 6px; }
.route-card p { color: var(--muted); }

.tick-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tick-list li {
  position: relative; padding-left: 26px; font-size: 15px; color: var(--muted);
}
.tick-list li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
}

/* ===========================================================
   In-development status
   15 products are not in production: all 12 Al Dinari, and 3 of the 5 Social
   Smoke devices. They were presented exactly like the
   shipping range, with a buy path pointing at retailers who do not stock
   them. The badge is deliberately plain rather than alarming: this is a
   wholesale conversation, not a warning.
   =========================================================== */
.dev-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
  background: var(--ink); color: #fff;
}
.dev-badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: #fff; flex: none; opacity: .75;
}

/* On a card the badge floats over the image corner. */
.product-card { position: relative; }
.product-card > .dev-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
}
.product-card.is-dev .product-media { background: var(--bg-alt); }

.buy-box.is-dev { background: #fff; border-color: var(--ink); }

/* Numbered contents on the legal pages. */
.doc-index-num {
  display: inline-block; min-width: 1.6em;
  font-variant-numeric: tabular-nums; color: var(--muted);
}
.doc-index ol a.is-active .doc-index-num { color: var(--ink); }
.doc-body { max-width: none; }
/* A jump link must clear the sticky header on these too. */
.doc-body h3 { scroll-margin-top: 88px; }

/* Country flags on /where-to-buy. Sized by height with width auto: the
   Swiss flag is square while the rest are landscape, so forcing one
   aspect ratio would distort it. */
.subregion-head { display: flex; align-items: center; gap: 12px; }
.subregion-head .flag {
  height: 20px; width: auto; flex: none;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(17,17,20,.12);
}

/* The Visit button on a brand page carries the brand's own wordmark.
   picture is display:contents so the img itself is the flex item -
   otherwise the picture box takes the sizing and the mark collapses.
   Height is fixed and width left auto: all three marks are cap-height
   lettering, so equal height is what makes them sit level with "Visit",
   and it keeps SCL's 3:1 mark from being stretched to Thermal's 6:1. */
.brand-visit picture { display: contents; }
.brand-visit img { height: 19px; width: auto; flex: none; }
.brand-visit-out { font-size: 14px; line-height: 1; opacity: .5; }

/* Legacy /pages/content-creators and /pages/collaborate-with-social-smoke
   redirect to a fragment on /wholesale, so these have to clear the sticky
   header the same way the FAQ and legal headings do. */
#work-with-us, #collaborate, #content-creators, #SSWholesaleForm { scroll-margin-top: 88px; }

/* ===========================================================
   Home: the brand film, and category cards with a face
   =========================================================== */

/* The brand film, full bleed above the hero, the way the Shopify site ran
   it. 65vh is what that site used; the clamps are ours, because 65vh of a
   very tall window is a banner nobody asked for and 65vh of a short one is
   a stripe.

   Below 900px the band takes the film's own 16:9 shape instead. The video
   never loads at that width, so what is in the slot is a 16:9 poster, and
   cropping that into a portrait band would show a narrow vertical slice of
   a frame composed for landscape. */
.film-banner {
  position: relative; overflow: hidden; background: #fff;
  height: 65vh; min-height: 340px; max-height: 720px;
}
@media (max-width: 900px) {
  .film-banner { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
}
.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Thumbnail beside the label rather than above it: six categories in two
   rows of three, and a picture on top of each would turn a compact block
   into a screen of its own. */
.cat-card .card-inner { display: flex; align-items: center; gap: 16px; }
.cat-card .cat-thumb {
  flex: none; width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; padding: 6px;
}
/* picture has to be display:contents or it becomes the flex item and takes
   the sizing itself. Same trap as the brand Visit button and the gallery. */
.cat-card .cat-thumb picture { display: contents; }
.cat-card .cat-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.cat-card .cat-text { min-width: 0; }
.cat-card .cat-text .h3 { margin: 0 0 2px; }

/* The primary button is --brand, which is the ink, because the palette is
   monochrome. On a dark section that is black on black: "Browse the
   catalog" was rendering as bare text beside a visibly outlined "Where to
   buy". Inverted here, so solid still reads as the primary of the two.
   .section.ink only uses ghost buttons today; covered anyway so the same
   thing cannot happen the next time one is added. */
.hero .btn:not(.ghost),
.section.ink .btn:not(.ghost) { background: #fff; color: var(--ink); }
.hero .btn:not(.ghost):hover,
.section.ink .btn:not(.ghost):hover { background: #e6e6ea; }

/* .kicker is --brand too, and would be just as invisible. */
.hero .kicker { color: #8f96a3; }

/* Brand page section jump links. Reuses .chip so the row reads the same as
   the catalog's filter bar; these are links rather than filters, so no
   aria-pressed state and no JS. */
.section-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.section-nav .chip { cursor: pointer; text-decoration: none; }
/* Clear the sticky header when a jump link lands, the same way the FAQ and
   legal headings do - measured, since the header's height is not fixed. */
.brand-section { scroll-margin-top: calc(var(--header-h, 78px) + 12px); }

/* The Quasar bowl on /wholesale: a small proof photo, not a product card.
   picture is display:contents so the img is the flex item, for the same
   reason as everywhere else on this site. */
.collab-proof { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.collab-proof picture { display: contents; }
.collab-proof img {
  width: 96px; height: 96px; object-fit: contain; flex: none;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 6px;
}
.collab-proof figcaption { color: var(--muted); }

/* Brand film bands. Same shape as the home page banner, a little shorter:
   these sit inside a page rather than opening it. Below 900px they take the
   film's own 16:9, because the video never loads at that width and cropping
   a 16:9 poster into a portrait band shows a slice of a landscape frame. */
.film-band {
  position: relative; overflow: hidden; background: #fff;
  height: 48vh; min-height: 280px; max-height: 560px;
  scroll-margin-top: calc(var(--header-h, 78px) + 12px);
}
@media (max-width: 900px) {
  .film-band { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
}

/* Brand page header: title and call to action on one line.
   Stacked, this was breadcrumb, kicker, heading, count and button in a
   narrow column of a 1400px page, and it pushed the film band most of a
   screen down. flex-end so the button sits on the heading's baseline
   rather than floating level with the breadcrumb. */
.brand-head {
  display: flex; align-items: flex-end;
  gap: clamp(16px, 3vw, 40px); flex-wrap: wrap;
}
/* margin-right:auto rather than space-between. Thermal Charcoal has two
   buttons here - its collection page and its own site - and space-between
   spread them across the row instead of grouping them at the end. */
.brand-head-main { min-width: 0; margin-right: auto; }
.brand-head .h1 { margin-bottom: 0; }
.brand-head-cta { margin: 0 0 4px; flex: none; }
@media (max-width: 720px) { .brand-head { align-items: flex-start; } }

/* The film band and the section chips are both strong breaks of their own,
   so the intro does not need its full bottom padding underneath them. */
.brand-intro { padding-bottom: clamp(16px, 1.6vw, 22px); }

/* "At a glance" on a collection page.
   Cards with a check, which is the shape the Shopify page used and reads
   better than the rule-over-text it replaces. The check is ink, not the
   blue on the old page: that blue was stock Dawn, not a Social Smoke
   colour, and this palette is monochrome on purpose - see the note at the
   top of this file. Reuses .card so it matches the product, brand and
   category cards rather than being a fourth kind of box. */
.glance-head { margin: 34px 0 0; }
.glance-head::after {
  content: ""; display: block; width: 44px; height: 3px;
  background: var(--ink); margin-top: 10px; border-radius: 2px;
}
.glance-grid {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .glance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .glance-grid { grid-template-columns: 1fr; } }
.glance-grid .card-inner { display: flex; gap: 13px; align-items: flex-start; padding: 18px 20px; }
.glance-check {
  flex: none; width: 26px; height: 26px; border-radius: 999px;
  background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.glance-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.glance-text strong { font-size: 15.5px; letter-spacing: -.01em; line-height: 1.3; }
.glance-text span { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* A collection page's FAQ, two columns.
   It was reusing .faq-body, which is capped at 80ch because on /faq it
   sits in a two-column layout beside the section index. Dropped into a
   full-width container that cap left a 460px column stranded in 1373px of
   page. Two columns instead of one wide one: twelve questions are easier
   to scan side by side than as a single list with the +/- marker a metre
   from the question.

   The grid items are the two COLUMNS, not the questions. When the
   questions were the items they flowed across, which put each pair in a
   shared row: opening an answer on the left grew the row, pushed down
   what sat under the question on the right, and left a gap beside it that
   read as the neighbour expanding too. Two lists keeps them independent.
   align-items:start so a long column does not stretch the short one. */
.faq-cols {
  margin-top: 20px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 4vw, 64px); align-items: start;
}
@media (max-width: 860px) { .faq-cols { grid-template-columns: 1fr; } }

/* Thermal's product formats. Scrolls rather than squashes below the width
   where three columns of this content stop fitting. */
.formats-wrap { margin-top: 22px; overflow-x: auto; }
.formats { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 15px; }
.formats th, .formats td { text-align: left; padding: 13px 18px 13px 0; border-bottom: 1px solid var(--border); }
.formats thead th {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border-bottom-color: var(--ink); border-bottom-width: 2px;
}
.formats tbody th { font-weight: 700; white-space: nowrap; }
.formats tbody td { color: var(--muted); }
.formats tbody tr:last-child th, .formats tbody tr:last-child td { border-bottom: 0; }

/* "About <range> ->" beside a brand-page section heading, pointing at the
   collection page that holds that range's writing. Pushed to the right so
   it reads as a way out of the section rather than part of the count. */
.cat-head-more {
  margin-left: auto; font-size: 14px; font-weight: 700;
  color: var(--ink); white-space: nowrap;
}
.cat-head-more:hover { opacity: .6; }
@media (max-width: 560px) {
  .cat-head { flex-wrap: wrap; }
  .cat-head-more { margin-left: 0; flex-basis: 100%; }
}

/* ===== Brand dropdowns in the main nav ===== */
/* Stretched to the nav row so the panel's "100%" is the row's full height,
   not the button's. Otherwise it opens 13px up inside the header and
   crosses its bottom border. */
.nav-links { align-self: stretch; }
.nav-drop { position: relative; align-self: stretch; display: flex; align-items: center; }
.nav-drop-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-weight: 700; font-size: 14.5px; color: var(--ink);
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: opacity .18s ease;
}
.nav-drop-btn:hover { opacity: .6; }
.nav-drop-btn.is-current {
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px;
}
.nav-drop-caret { transition: transform .18s ease; }
.nav-drop-btn[aria-expanded="true"] .nav-drop-caret { transform: rotate(180deg); }

.nav-drop-menu {
  position: absolute; top: calc(100% + 14px); left: -14px; z-index: 1001;
  /* 14px is the nav's own bottom padding plus the header's 1px border. */
  min-width: 232px; padding: 8px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-lg);
}
.nav-drop-menu[hidden] { display: none; }
.nav-drop-menu a {
  display: block; padding: 9px 12px; border-radius: 9px;
  font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.nav-drop-menu a:hover, .nav-drop-menu a:focus-visible { background: var(--bg-alt); }
/* "All Products" is the brand page itself, so it is set apart from the
   ranges below it rather than reading as one of them. */
.nav-drop-menu a:first-child {
  margin-bottom: 6px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border); border-radius: 9px 9px 0 0;
}

/* The hamburger panel's indented range links. */
#menuPanel a.menu-sub {
  padding-left: 18px; font-weight: 600; font-size: 15px; color: var(--muted);
}