/* ============================================================
   OMBRA — Outdoor living systems
   Minimal editorial design system
   Light warm-gray canvas, near-black ink, hairline rules.
   ============================================================ */

:root {
  --bg: #e9e9e6;
  --bg-soft: #e2e2df;
  --ink: #111214;
  --ink-2: #3c3e40;
  /* secondary text: dark enough to clear 4.5:1 on --bg, --bg-soft and #fff,
     since it carries meta, captions, struck prices and form labels */
  --muted: #5f6165;
  --line: #d3d3cf;
  --line-dark: #232426;
  --dark: #121315;
  --dark-2: #1a1b1e;
  --on-dark: #e8e8e5;
  --on-dark-muted: #9a9b98;
  --glass: #ccd3d5;
  --font: -apple-system, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --container: 1240px;
  --ease: cubic-bezier(.2, .6, .2, 1);
}

/* ---------- Page transition: the brand curtain ----------
   The curtain is back, but the browser draws it now. It used to be a <div>
   that JavaScript slid over the page on click and lifted on arrival — and
   because the arriving page was already painted, that meant covering a
   finished page in black for about half a second and calling it a
   transition. Measured on pergolas.html: first contentful paint at 1060 ms
   on a page that had finished loading at 34 ms.

   @view-transition gives the same look for none of that. The browser
   snapshots the outgoing page, waits until the incoming one is genuinely
   ready to paint, and runs the whole thing on the compositor. The dark
   ground with the brand mark is the ::view-transition root itself, so the
   curtain is what shows between the page that leaves upward and the page
   that arrives from below. Nothing is scheduled in JS: no timer to race,
   no state to get stuck in, no delay charged to a page that is already
   there. Browsers without the API simply navigate. */
@view-transition { navigation: auto; }

/* The curtain itself: the transition root is the only layer that is not a
   snapshot, so it is what shows wherever neither page covers the screen. Give
   it the brand ground and the mark, and wiping the pages off it turns it into
   the curtain rather than a gap. */
::view-transition {
  background: #121315 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23fff'/%3E%3Cg fill='%23000'%3E%3Crect y='5.87' width='32' height='1.6'/%3E%3Crect y='10.53' width='32' height='1.6'/%3E%3Crect y='15.2' width='32' height='1.6'/%3E%3Crect y='19.87' width='32' height='1.6'/%3E%3Crect y='24.53' width='32' height='1.6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='14' fill='%23fff' mask='url(%23m)'/%3E%3C/svg%3E") center / 38px no-repeat;
}

/* Both pages move upward, so it reads as one curtain rising: the page you are
   leaving slides off, the curtain shows for a beat, and the next one slides on
   behind it.

   transform, not clip-path. A clip-path animation on a full-viewport snapshot
   is not reliably composited — the browser re-rasterises it every frame, and on
   a long page that is exactly the stutter this was meant to remove. transform
   and opacity are the two things the compositor can move on its own, so this
   runs on the GPU and stays smooth however tall the page is.

   The beat of curtain is deliberate: the outgoing page is gone at 240ms and the
   next one does not start until 200ms, so there is a moment of black with the
   mark — the pause that makes it feel like a transition rather than a jump. */
::view-transition-old(root) {
  animation: veil-close 240ms cubic-bezier(.55, 0, 1, .45) both;
  will-change: transform;
}
::view-transition-new(root) {
  animation: veil-open 300ms cubic-bezier(.15, .9, .25, 1) 200ms both;
  will-change: transform;
}
@keyframes veil-close { to   { transform: translateY(-100%); } }
@keyframes veil-open  { from { transform: translateY(100%); } }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font: 14px/1.65 var(--font); }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
/* <picture> only carries the AVIF/WebP <source> rungs — it must not become a
   box of its own, or the `height:100%` every .thumb/.photo-frame img relies on
   would resolve against an auto-height wrapper and kill the object-fit crop */
picture { display: contents; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 48px; }
@media (max-width: 720px) { .container { padding: 0 22px; } }

/* ---------- Typography ---------- */
.h-display {
  font-size: clamp(46px, 7vw, 86px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .96;
}
.h-hero {
  font-size: clamp(38px, 5.4vw, 66px);
  font-weight: 700;
  letter-spacing: -.033em;
  line-height: 1.02;
}
.h-section { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.h-sub { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.lead { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); max-width: 52ch; }
.small { font-size: 12.5px; color: var(--muted); }
.prose p { color: var(--ink-2); margin-bottom: 16px; max-width: 48ch; }
.prose p:last-child { margin-bottom: 0; }

/* ---------- Links & buttons ---------- */
.link-u {
  font-size: 13.5px; font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: opacity .2s;
}
.link-u:hover { opacity: .55; }
.arr-up { margin-left: 6px; font-size: 11.5px; display: inline-block; }

/* ---------- Touch targets ----------
   Small controls whose drawn size is part of the design (a 26px colour dot, a
   13.5px underlined link) get a transparent 44px hit area from an ::after
   instead of being resized. The pseudo takes no space, so spacing, borders,
   hover backgrounds and the .swatch.active ring all stay exactly as drawn.
   Where a 44px box is wider than the gap to its neighbour it only ever spills
   into dead space between controls, never over the neighbour's visible area. */
.cart-link, .swatch, .qty button, .sg-open, .mm-foot .link-u { position: relative; }
.cart-link::after, .swatch::after, .qty button::after,
.sg-open::after, .mm-foot .link-u::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%; min-width: 44px; min-height: 44px;
  transform: translate(-50%, -50%);
}

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ink); color: #fff;
  padding: 15px 28px; font-size: 13px; font-weight: 500; letter-spacing: .02em;
  transition: background .2s, transform .2s var(--ease);
}
.btn:hover { background: #000; }
.btn:active { transform: scale(.985); }
.btn .arr { font-size: 12px; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--bg); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn-sm { padding: 10px 18px; font-size: 12.5px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.header-in { display: flex; align-items: center; height: 78px; gap: 54px; }
.brand { font-size: 21px; font-weight: 700; letter-spacing: -.025em; }
.brand-word { display: flex; flex-direction: column; align-items: center; line-height: 1; gap: 3.5px; }
.brand-word b { font-size: 19px; font-weight: 800; letter-spacing: -.015em; }
.brand-word i {
  font-style: normal; font-size: 6.8px; font-weight: 700;
  letter-spacing: .46em; text-transform: uppercase; color: var(--muted);
  /* letter-spacing also trails the last letter, which throws the word off
     centre — indenting by the same amount puts it back */
  text-indent: .46em;
}
.site-footer .brand-word i { color: var(--on-dark-muted); }
.mobile-menu .brand-word b { font-size: 18px; }
.nav { display: flex; align-items: center; gap: 26px; font-size: 13.5px; }
.nav a { color: var(--ink-2); transition: color .2s; white-space: nowrap; }
.nav a:hover, .nav a.active { color: var(--ink); }
.nav-sep { width: 28px; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }
/* Seven nav items fit comfortably in English and not at all in German —
   "Anleitungen", "Gewerbe", "Über uns", "Kontakt" pushed the header 24px past
   the viewport at 1021, the narrowest width where the full nav is shown at all.
   Tighten the spacing over that band rather than dropping a link: the words
   themselves are as short as they are going to get. */
@media (min-width: 1021px) and (max-width: 1240px) {
  .header-in    { gap: 30px; }
  .nav          { gap: 17px; }
  .nav-sep      { width: 14px; }
  .header-right { gap: 16px; }
}
/* the cart is an icon, not a word — it reads the same in all five languages
   and leaves the header room for the nav */
.modal-form input {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line);
  background: transparent; font: inherit; color: var(--ink);
}
.modal-form input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.modal-msg { color: var(--ink-2); margin-top: 14px; }
.addon-note { color: var(--muted); margin-top: 10px; line-height: 1.5; }
.cart-link { position: relative; display: inline-flex; align-items: center; color: var(--ink); }
.cart-link svg { display: block; width: 21px; height: 21px; }
.cart-link:hover { opacity: .62; }
.cart-count {
  position: absolute; top: -5px; right: -8px;
  min-width: 15px; height: 15px; padding: 0 4px;
  background: var(--ink); color: #fff; border-radius: 999px;
  font-size: 9px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
/* ---------- Mega menu (desktop) ---------- */
.mega { position: absolute; left: 0; right: 0; top: 100%; display: none; }
@media (min-width: 1021px) { .mega { display: block; } }
.mega-panel {
  position: absolute; left: 0; right: 0; top: 0;
  background: var(--bg);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: 0 34px 70px rgba(0, 0, 0, .1);
  opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s .22s;
}
.mega-panel.open {
  opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s 0s;
}
.mega-grid { display: grid; gap: 30px; padding: 38px 0 42px; align-items: stretch; }
.mega-products { grid-template-columns: repeat(4, 1fr); gap: 26px 24px; }
@media (max-width: 1240px) { .mega-products { grid-template-columns: repeat(3, 1fr); } }
.mega-intro .eyebrow { margin-bottom: 12px; }
.mega-intro h4 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.mega-intro p { font-size: 13px; color: var(--ink-2); margin: 12px 0 18px; max-width: 30ch; }
.mega-card { display: block; }
.mega-card .thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-soft); }
.mega-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.mega-card:hover .thumb img { transform: scale(1.05); }
.mega-card b { display: block; font-size: 13.5px; font-weight: 600; margin-top: 11px; }
.mega-card span { font-size: 12px; color: var(--muted); }
.mega-tile {
  background: var(--dark); color: #fff;
  padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
}
.mega-tile .logo-mark { color: #fff; }
.mega-tile b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.mega-tile p { font-size: 12.5px; color: var(--on-dark-muted); margin-top: 6px; }
.mega-tile .link-u { color: #fff; }
.nav a.mega-open { color: var(--ink); }

.burger {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 4.5px; width: 40px; height: 40px;
  border: 1px solid var(--line-dark); border-radius: 8px; flex: none;
}
.burger span { display: block; width: 16px; height: 1.6px; background: var(--ink); border-radius: 2px; }
.burger span:nth-child(3) { display: none; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 66; background: var(--bg);
  display: none; flex-direction: column;
  padding: 0 0 max(24px, env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu.open { display: flex; animation: mm-in .28s var(--ease); }
@keyframes mm-in { from { opacity: 0; transform: translateY(12px); } }
.mobile-menu.open.closing { animation: mm-out .24s var(--ease) both; }
@keyframes mm-out { to { opacity: 0; transform: translateY(12px); } }
body.mm-open { overflow: hidden; }
.mobile-menu .mm-top {
  display: flex; justify-content: space-between; align-items: center;
  height: 64px; width: 100%; flex: none;
  border-bottom: 1px solid var(--line); margin-bottom: 10px;
}
.mobile-menu nav { display: flex; flex-direction: column; padding: 18px 22px; }
.mobile-menu nav a {
  font-size: 28px; font-weight: 600; letter-spacing: -.02em;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.mobile-menu nav a:last-child { border-bottom: 0; }
.mobile-menu nav a.mm-sub { font-size: 17px; font-weight: 500; color: var(--ink-2); padding: 11px 0; }
.mm-div { display: block; height: 22px; }
.mobile-menu .mm-foot { margin-top: auto; display: flex; flex-direction: column; gap: 18px; padding: 10px 22px 0; }
.mm-close {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--line-dark); border-radius: 999px; padding: 8px 16px;
}

@media (max-width: 1020px) {
  .nav { display: none; }
  .burger { display: flex; }
  .header-in { gap: 24px; }
  .build-link { display: none; }
  .header-right { gap: 20px; }
  .cart-link { margin-right: 6px; }
}

/* ---------- Sections ---------- */
.section { padding: 84px 0; }
.section-tight { padding: 48px 0; }
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; margin-bottom: 46px;
}
.rule { border: 0; border-top: 1px solid var(--line); }

/* ---------- Hero (index) ---------- */
.hero { padding: 84px 0 40px; }
.hero-copy { max-width: 780px; }
.hero-copy .lead { margin: 26px 0 34px; }
.hero-cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero-art { padding: 30px 0 10px; display: flex; justify-content: center; }
.hero-art svg { width: min(760px, 92%); height: auto; }

/* ---------- Category tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.tile { display: block; }
.tile .thumb { aspect-ratio: 1 / 0.82; display: flex; align-items: center; overflow: hidden; background: var(--bg-soft); }
.tile .thumb svg { width: 84%; height: auto; margin: 0 auto; transition: transform .5s var(--ease); }
.tile:hover .thumb svg { transform: translateY(-5px); }
.tile .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.tile:hover .thumb img { transform: scale(1.04); }
.tile-label { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.tile-label b { font-size: 15px; font-weight: 600; }
.tile-label span { font-size: 12px; color: var(--muted); }
@media (max-width: 980px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }
.tiles-2 { grid-template-columns: repeat(2, 1fr); }
.tiles-2 .thumb { aspect-ratio: 16 / 9; }
@media (max-width: 560px) { .tiles-2 { grid-template-columns: 1fr; } }

/* ---------- Product cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
/* Tablet band: the sets that fill this grid are three cards (bestsellers,
   cross-sell, related, recently viewed) or two (the category pages), so a hard
   two-column rule strands the third card alone on a half-empty second row.
   auto-fit keeps three across while each card still has ~200px, and collapses
   its empty track so a pair of cards still fills the row on the category pages. */
@media (max-width: 980px) { .grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
@media (max-width: 620px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.p-card { display: block; }
.p-card .thumb {
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--bg-soft);
}
.p-card .thumb svg { width: 82%; height: auto; transition: transform .5s var(--ease); }
.p-card:hover .thumb svg { transform: translateY(-6px); }
.p-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.p-card:hover .thumb img { transform: scale(1.04); }
.p-card h4 { font-size: 17px; font-weight: 600; letter-spacing: -.015em; margin-top: 14px; }
.p-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.p-price { font-size: 13px; font-weight: 500; margin-top: 8px; }
.p-card .view { font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; opacity: 0; transition: opacity .25s; }
.p-card:hover .view { opacity: 1; }
.p-foot { display: flex; justify-content: space-between; align-items: baseline; }

/* ---------- Category page ---------- */
.cat-hero { padding: 80px 0 26px; }
.cat-hero .lead { margin-top: 24px; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 36px; }
.chip {
  display: inline-block; padding: 9px 18px; font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2);
  transition: all .2s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Product detail ---------- */
.product-hero { padding: 64px 0 24px; display: flex; justify-content: center; }
.product-hero svg { width: min(680px, 88%); height: auto; }

/* v4: shop layout — gallery left, buy column right */
.product-top {
  display: grid; grid-template-columns: 1.12fr 1fr;
  gap: clamp(40px, 5vw, 84px); align-items: start; padding: 46px 0 76px;
}
@media (max-width: 940px) { .product-top { grid-template-columns: 1fr; gap: 34px; } }
.p-gallery { position: sticky; top: 110px; }
@media (max-width: 940px) { .p-gallery { position: static; } }
.p-main { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-soft); }
.p-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-buy h1 { font-size: clamp(38px, 4vw, 54px); font-weight: 700; letter-spacing: -.03em; line-height: .98; margin-bottom: 6px; }
.p-buy .buy-box { min-width: 0; margin-top: 22px; }
.addon-label { margin-top: 4px; }

.product-bar {
  display: grid; grid-template-columns: 1.15fr .9fr auto;
  align-items: start; gap: 48px; padding: 26px 0 60px;
}
.product-bar h1 { font-size: clamp(44px, 5.5vw, 72px); font-weight: 700; letter-spacing: -.035em; line-height: .95; }
@media (max-width: 980px) {
  .product-bar { grid-template-columns: 1fr; gap: 30px; padding-bottom: 44px; }
}

.swatch-tabs { display: flex; gap: 16px; margin-bottom: 14px; }
.swatch-tabs button {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; color: var(--muted);
  padding: 2px 0; border-bottom: 1px solid transparent;
}
.swatch-tabs button.active { color: var(--ink); border-bottom-color: var(--ink); }
.swatches { display: flex; gap: 11px; flex-wrap: wrap; }
.swatch {
  width: 26px; height: 26px; border-radius: 50%;
  /* the ring is the only thing that outlines a near-white swatch (RAL 9010 is
     #f2f2ef on an #e9e9e6 page), so it has to clear 3:1 on its own — at .12 the
     White chip read as no chip at all */
  border: 1px solid rgba(0, 0, 0, .45); padding: 0;
  background-clip: padding-box;
  transition: transform .15s var(--ease);
}
.swatch.duo { border: 0; background: none; padding: 0; }
.swatch.duo svg { display: block; width: 100%; height: 100%; }
.swatch:hover { transform: scale(1.12); }
.swatch.active { box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 4px var(--ink); }
.swatch-name { margin-top: 12px; font-size: 11.5px; color: var(--muted); min-height: 18px; }

.product-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 10px; }
.product-actions .links { display: flex; gap: 26px; align-items: center; }
.price-line { font-size: 14px; }
.price-line b { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.price-line span { color: var(--muted); font-size: 12px; margin-right: 10px; }

.product-info {
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: clamp(48px, 8vw, 110px); padding: 44px 0 90px;
}
@media (max-width: 900px) { .product-info { grid-template-columns: 1fr; gap: 60px; } }
.info-block > .h-section { margin-bottom: 34px; }
.info-block + .info-sub { margin-top: 56px; }
.info-sub > .h-section { margin-bottom: 26px; }

.spec-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-table td { padding: 9px 0; vertical-align: top; }
.spec-table td:first-child { color: var(--muted); width: 44%; padding-right: 20px; }
.spec-table td:last-child { font-weight: 500; }

.media-tile { margin-top: 46px; position: relative; max-width: 300px; cursor: pointer; }
.media-tile .thumb { aspect-ratio: 16 / 11; overflow: hidden; display: flex; align-items: center; background: var(--bg-soft); }
.media-tile .thumb svg { width: 130%; max-width: none; height: auto; }
.play-badge {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.play-badge i {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(17, 18, 20, .82); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 13px; padding-left: 4px;
  transition: transform .25s var(--ease);
}
.media-tile:hover .play-badge i { transform: scale(1.08); }

/* ---------- Stats / USP ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px;
  border-top: 1px solid var(--line); padding-top: 30px;
}
.stat b { display: block; font-size: 32px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 6px; }
.stat span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
@media (max-width: 760px) {
  /* two columns need real breathing room: the label of one row must not
     crowd the figure of the next */
  .stats { grid-template-columns: repeat(2, 1fr); gap: 52px 30px; padding-top: 36px; }
  /* a range is held together by non-breaking spaces, so the figure has to
     shrink to the column rather than wrap or overflow it */
  .stat b { font-size: clamp(20px, 5.6vw, 27px); margin-bottom: 9px; }
  .stat span { line-height: 1.45; }
}

/* ---------- Dark band ---------- */
.band-dark { background: var(--dark); color: var(--on-dark); padding: 104px 0; }
.band-dark .eyebrow { color: var(--on-dark-muted); }
.band-dark .lead { color: var(--on-dark-muted); }
.band-dark .h-hero, .band-dark .h-section { color: #fff; }
.band-dark .spec-table tr { border-color: #2c2d30; }
.band-dark .spec-table td:first-child { color: var(--on-dark-muted); }

/* ---------- Steps (process) ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.step { border-top: 1px solid var(--line); padding-top: 20px; }
.band-dark .step { border-color: #2c2d30; }
.step .num { font-size: 12px; color: var(--muted); display: block; margin-bottom: 14px; }
.step h4 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.step p { font-size: 13px; color: var(--muted); }
.band-dark .step p { color: var(--on-dark-muted); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
/* an odd last step would sit alone in half a row; steps carry no imagery, so
   letting it run the full width costs nothing and closes the gap */
@media (min-width: 561px) and (max-width: 900px) {
  .steps > :last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Gallery (projects) ---------- */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 30px 26px; }
.g-item { grid-column: span 6; }
.g-item.wide { grid-column: span 7; }
.g-item.narrow { grid-column: span 5; }
.g-item .thumb { overflow: hidden; display: flex; align-items: center; background: var(--bg-soft); }
.g-item .thumb svg { width: 100%; height: auto; transition: transform .6s var(--ease); }
.g-item:hover .thumb svg { transform: scale(1.025); }
.g-cap { display: flex; justify-content: space-between; gap: 20px; padding-top: 12px; font-size: 12.5px; }
.g-cap b { font-weight: 600; }
.g-cap span { color: var(--muted); }
@media (max-width: 800px) { .g-item, .g-item.wide, .g-item.narrow { grid-column: span 12; } }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }
.field label {
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
/* width:100% is not cosmetic — these are stretched flex children either way.
   Without it a text input contributes its ~20-character intrinsic width to the
   min-content of everything around it, which floors any fr column the form sits
   in (the cart's order summary was 436px wide before it could shrink). */
.field input, .field select, .field textarea {
  background: transparent; border: 0; border-bottom: 1px solid #a9a9a5;
  border-radius: 0; padding: 9px 0; font: inherit; font-size: 16px; color: var(--ink);
  width: 100%; min-width: 0;
  transition: border-color .2s;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--ink);
}
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111214' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
  padding-right: 22px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.check { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: var(--ink); }
.check .c-price { margin-left: auto; font-size: 12.5px; color: var(--muted); }

.notice { border: 1px solid var(--line-dark); padding: 16px 20px; font-size: 13.5px; }
.notice.ok { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Configurator ----------
   minmax(0, …) is load-bearing: an fr track's implicit minimum is min-content,
   and the step 05 sides control is wide enough to floor the options column and
   invert the declared ratio across the whole tablet-landscape band. Capping the
   minimum keeps the preview the larger half at every width; the sides control
   stacks (below) while that column is narrow. */
.config-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 90px); align-items: start; }
@media (max-width: 940px) { .config-layout { grid-template-columns: 1fr; } }
/* two selectors deep so it outranks the .sides-layout rule in quote.html's own
   <style>, which comes later in the cascade */
@media (min-width: 941px) and (max-width: 1300px) {
  .config-layout .sides-layout { grid-template-columns: 1fr; }
}
.sticky-preview { position: sticky; top: 110px; }
@media (max-width: 940px) { .sticky-preview { position: static; } }
.sticky-preview svg { width: 100%; height: auto; }
.config-step { margin-bottom: 40px; }
.config-step .h-sub { display: block; margin-bottom: 16px; }
.config-step .num { color: var(--muted); margin-right: 8px; font-weight: 500; }
.opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opt {
  padding: 11px 18px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--line); color: var(--ink-2);
  transition: all .2s;
}
.opt:hover { border-color: var(--ink); color: var(--ink); }
.opt.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.config-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--line-dark); padding-top: 22px; margin: 46px 0 24px;
}
.config-total b { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.config-total span { font-size: 12px; color: var(--muted); }

/* ---------- Cart ---------- */
.cart-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
/* the summary column has a min-content floor of its own (~267px once the form
   inputs stop dictating it — see .field input above), and an fr track cannot go
   below it. Collapsing at 900 re-engaged two columns while that floor still
   exceeded the 1fr share, so the summary came out *wider* than the item list.
   1100 is the first width where 1fr clears the floor and the 1.5 ratio holds. */
@media (max-width: 1100px) { .cart-layout { grid-template-columns: 1fr; } }
.cart-row {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 26px;
  align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line);
}
.cart-row .thumb { width: 110px; }
.cart-row .thumb svg { width: 100%; height: auto; }
.cart-row h4 { font-size: 15px; font-weight: 600; }
.cart-row .opts-line { font-size: 12px; color: var(--muted); margin-top: 3px; }
.cart-row .remove { font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; margin-top: 8px; display: inline-block; }
.cart-row .remove:hover { color: var(--ink); }
.cart-right { text-align: right; }
.cart-right .line-total { font-size: 15px; font-weight: 600; display: block; margin-bottom: 10px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); }
.qty button { width: 30px; height: 30px; font-size: 14px; line-height: 1; }
.qty button:hover { background: var(--bg-soft); }
.qty b { min-width: 30px; text-align: center; font-size: 13px; font-weight: 500; }
@media (max-width: 560px) {
  .cart-row { grid-template-columns: 84px 1fr; gap: 16px; }
  .cart-row .thumb { width: 84px; }
  .cart-right { grid-column: 2; text-align: left; }
}

.summary { border: 1px solid var(--line-dark); padding: 30px; }
.summary h3 { font-size: 17px; font-weight: 600; margin-bottom: 22px; }
.sum-row { display: flex; justify-content: space-between; font-size: 13.5px; padding: 8px 0; }
.sum-row.total { border-top: 1px solid var(--line-dark); margin-top: 12px; padding-top: 16px; font-weight: 600; font-size: 15px; }
.sum-note { font-size: 12px; color: var(--muted); margin: 14px 0 22px; }

.empty-state { text-align: center; padding: 90px 0 110px; }
.empty-state p { color: var(--muted); margin: 14px 0 30px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark); color: #cfcfcb; margin-top: 80px; }
.footer-top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 48px; padding: 78px 0 64px;
}
.site-footer .brand { color: #fff; }
.footer-tag { margin-top: 16px; font-size: 13px; color: var(--on-dark-muted); max-width: 30ch; }
.f-col h5 {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-dark-muted); margin-bottom: 18px;
}
.f-col a { display: block; font-size: 13.5px; padding: 5px 0; color: #cfcfcb; transition: color .2s; }
.f-col a:hover { color: #fff; }
.newsletter p { font-size: 13px; color: var(--on-dark-muted); margin-bottom: 18px; }
.newsletter form { display: flex; border-bottom: 1px solid #3a3b3e; }
.newsletter input {
  flex: 1; background: transparent; border: 0; padding: 10px 0;
  font: inherit; font-size: 16px; color: #fff;
}
/* the default ring is suppressed only on :focus, and only because the rule
   below replaces it: the form's own hairline brightens to white */
.newsletter input:focus { outline: none; box-shadow: 0 1px 0 0 #fff; }
.newsletter input::placeholder { color: #6f7073; }
.newsletter button { color: #fff; font-size: 15px; padding: 0 4px; }
.newsletter .nl-ok { font-size: 13px; color: #fff; padding: 10px 0; }

/* ---------- Footer rating & bottom bar ---------- */
.footer-rating {
  display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap;
  padding: 0 0 26px; color: var(--on-dark-muted); font-size: 12.5px;
}
.footer-rating svg path { fill: #d8d8d4; }
.footer-bottom {
  border-top: 1px solid #2a2b2e;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 26px 0; font-size: 12px; color: var(--on-dark-muted); flex-wrap: wrap;
}
.footer-bottom .socials { display: flex; gap: 22px; }
.footer-bottom .socials span { cursor: pointer; transition: color .2s; }
.footer-bottom .socials span:hover { color: #fff; }
/* legal row: its own line under the bottom bar */
.footer-legal {
  border-top: 1px solid #2a2b2e; padding: 18px 0 30px;
  display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 12px;
}
.footer-legal a { color: var(--on-dark-muted); transition: color .2s; }
.footer-legal a:hover { color: #fff; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; gap: 38px; } }
/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  /* the two infinite loops on the site */
  .marquee-track { animation: none; }
  /* the page swap still happens, it just stops moving */
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  ::view-transition { background-image: none; }
}

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.mt-64 { margin-top: 64px; }
.mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }
.tc { text-align: center; }
.maxw-52 { max-width: 52ch; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }

/* ============================================================
   v2 — COMMERCE LAYER
   Announcement bar, USP marquee, sale badges, ratings,
   buy box, cart drawer, before/after slider, FAQ, reviews.
   ============================================================ */
:root { --accent: #b5472a; --accent-2: #9c3a20; }

/* ---------- Announcement bar ---------- */
.announce { background: var(--ink); color: #e8e8e5; font-size: 12px; }
.announce-in { display: flex; align-items: center; justify-content: center; height: 38px; position: relative; }
.announce-msg { text-align: center; transition: opacity .3s; padding: 0 60px; }
/* the arrows carry no background, so growing them to a 44px-wide, full-bar-high
   tap target changes nothing visually; 38px is the bar's own height and the
   ceiling here — a taller box would reach over into the header */
.announce button {
  color: #9a9b98; font-size: 13px; padding: 0 10px; position: absolute;
  top: 0; height: 38px; min-width: 44px;
}
.announce button:hover { color: #fff; }
.announce .a-prev { left: 6px; }
.announce .a-next { right: 6px; }
@media (max-width: 640px) {
  .announce-msg {
    font-size: 12px; padding: 0 34px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
}

/* ---------- USP marquee ---------- */
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; padding: 14px 0; }
.marquee-track { display: flex; gap: 60px; width: max-content; animation: marquee 30s linear infinite; padding-right: 60px; will-change: transform; }
.m-item { display: flex; align-items: center; gap: 11px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.m-item svg { width: 17px; height: 17px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   v6 — STRUCTURE: search, breadcrumbs, journey, showrooms
   ============================================================ */

/* ---------- Header search ---------- */
.search-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px; color: var(--ink);
  transition: background .2s;
}
.search-btn:hover { background: rgba(0, 0, 0, .05); }
.search-btn svg { width: 18px; height: 18px; }

.search-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(12, 13, 15, .5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
body.search-open .search-overlay { opacity: 1; pointer-events: auto; }
.search-panel {
  position: fixed; left: 50%; top: 0; z-index: 91;
  width: min(760px, 100vw); transform: translate(-50%, -14px);
  background: var(--bg); padding: 26px 26px 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
  opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .28s var(--ease);
  max-height: 88vh; overflow-y: auto;
}
body.search-open .search-panel { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.search-field { display: flex; align-items: center; gap: 14px; border-bottom: 1.5px solid var(--ink); padding-bottom: 12px; }
.search-field svg { width: 19px; height: 19px; flex: none; color: var(--muted); }
/* no `outline: none` here: the panel's underline does not change on focus, so
   the global :focus-visible ring is the only indicator this field has */
.search-field input {
  flex: 1; border: 0; background: transparent;
  font: 600 22px/1.2 var(--font); letter-spacing: -.02em; color: var(--ink);
}
.search-field input::placeholder { color: #a8a9a6; font-weight: 500; }
.search-close { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.search-close:hover { color: var(--ink); }
.search-hint { font-size: 12px; color: var(--muted); padding: 14px 0 4px; }
.search-results { padding: 6px 0 18px; }
.s-res {
  display: flex; align-items: center; gap: 16px; padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.s-res:last-child { border-bottom: 0; }
.s-res img { width: 62px; height: 46px; object-fit: cover; flex: none; background: var(--bg-soft); }
.s-res b { display: block; font-size: 14px; font-weight: 600; }
.s-res span { font-size: 12px; color: var(--muted); }
.s-res .s-price { margin-left: auto; font-size: 13px; font-weight: 600; white-space: nowrap; }
.s-res:hover b { text-decoration: underline; text-underline-offset: 3px; }
.s-cat { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 18px; }

/* ---------- Breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding: 22px 0 0; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs span[aria-current] { color: var(--ink-2); }
.crumbs i { font-style: normal; opacity: .5; }

/* ---------- Journey: how it works ---------- */
.journey { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; counter-reset: step; }
.j-step { position: relative; padding-top: 26px; border-top: 1px solid var(--line); }
.j-step .j-num {
  position: absolute; top: -1px; left: 0; width: 46px; height: 2px; background: var(--ink);
}
.j-step b { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.j-step h4 { font-size: 17px; font-weight: 600; letter-spacing: -.015em; margin-bottom: 9px; }
.j-step p { font-size: 13px; color: var(--ink-2); }
.band-dark .j-step { border-color: #2c2d30; }
.band-dark .j-step .j-num { background: #fff; }
.band-dark .j-step h4 { color: #fff; }
.band-dark .j-step p { color: var(--on-dark-muted); }
@media (max-width: 900px) { .journey { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .journey { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- Showrooms ---------- */
.showroom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 900px) { .showroom-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .showroom-grid { grid-template-columns: 1fr; } }
.showroom {
  border: 1px solid var(--line); padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .2s, transform .3s var(--ease);
}
.showroom:hover { border-color: var(--ink); transform: translateY(-2px); }
.showroom .sr-country { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.showroom h4 { font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.showroom p { font-size: 13px; color: var(--ink-2); }
.showroom .sr-flag { font-size: 12px; color: var(--muted); margin-top: auto; padding-top: 8px; }
.sr-hero-stats { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 30px; }
.sr-hero-stats b { display: block; font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.sr-hero-stats span { font-size: 12.5px; color: var(--muted); }

/* ---------- Category filters ---------- */
.filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filters > span { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.filter-chip {
  padding: 7px 14px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); transition: all .2s;
}
.filter-chip:hover { border-color: var(--ink); color: var(--ink); }
.filter-chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.p-card.is-hidden { display: none; }
.filter-empty { padding: 30px 0; font-size: 13.5px; color: var(--muted); }

/* ---------- Product page: delivery & assurance block ---------- */
.assure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; border-top: 1px solid var(--line); padding-top: 30px; }
.assure svg { width: 19px; height: 19px; color: var(--ink); }
.assure h4 { font-size: 14.5px; font-weight: 600; margin: 12px 0 6px; }
.assure p { font-size: 12.5px; color: var(--muted); max-width: 34ch; }
@media (max-width: 760px) { .assure { grid-template-columns: 1fr; gap: 22px; } }

/* ---------- Lightbox ----------
   NOTE: not wired up yet — nothing in js/ creates a .lightbox node, so these
   rules are inert. Kept as the target styling for that work; until a click
   handler exists, do NOT put `cursor: zoom-in` on .p-main — it advertises a
   zoom the page cannot perform. */
.lightbox {
  position: fixed; inset: 0; z-index: 95; background: rgba(10, 11, 13, .93);
  display: flex; align-items: center; justify-content: center; padding: 40px;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
body.lightbox-open .lightbox { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: min(1200px, 92vw); max-height: 86vh; object-fit: contain; }
.lightbox .lb-close {
  position: absolute; top: 24px; right: 28px; color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.lightbox .lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: #fff; font-size: 30px; padding: 16px 20px; opacity: .7;
}
.lightbox .lb-nav:hover { opacity: 1; }
.lightbox .lb-prev { left: 10px; }
.lightbox .lb-next { right: 10px; }

/* ---------- Size guide modal ---------- */
/* visibility, not just opacity — a closed overlay must leave the tab order,
   or its controls become invisible focus stops on every page. It is delayed by
   the transition so the fade out still plays (same pattern as .mega-panel). */
.sg-overlay {
  position: fixed; inset: 0; z-index: 94; background: rgba(12, 13, 15, .55);
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .22s, visibility 0s .22s;
}
body.sg-open-modal .sg-overlay { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .22s, visibility 0s 0s; }
/* lock the page while the modal is open — no scroll bleed at either end */
body.sg-open-modal { overflow: hidden; }
.sg-modal {
  position: fixed; left: 50%; top: 50%; z-index: 95;
  width: min(720px, calc(100vw - 32px)); max-height: 86vh;
  transform: translate(-50%, -48%); background: var(--bg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .22s, transform .28s var(--ease), visibility 0s .28s;
}
body.sg-open-modal .sg-modal {
  opacity: 1; pointer-events: auto; visibility: visible; transform: translate(-50%, -50%);
  transition: opacity .22s, transform .28s var(--ease), visibility 0s 0s;
}
.sg-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid var(--line); flex: none;
}
.sg-head b { font-size: 15px; font-weight: 600; }
/* padding carries the tap target to ~44px; the negative margin cancels it again
   so the label keeps its optical position in the 18px/24px header */
.sg-close {
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  padding: 13px 14px; margin: -13px -14px -13px 0;
}
.sg-close:hover { color: var(--ink); }
.sg-body { overflow-y: auto; padding: 10px 24px 26px; overscroll-behavior: contain; }
.sg-row { padding: 16px 0; border-bottom: 1px solid var(--line); }
.sg-row:last-child { border-bottom: 0; }
.sg-label { font-size: 12.5px; font-weight: 600; margin-bottom: 10px; }
.sg-row img { width: 100%; height: auto; display: block; background: #fff; }
button.sg-open { font: inherit; font-size: inherit; }
.sg-note { font-size: 12px; color: var(--muted); padding: 16px 0 0; max-width: 56ch; }
/* Phones: the drawings are 1000–1300px wide but the modal leaves only ~295px,
   which shrinks the dimension callouts to 3–4px. Draw them large and let each
   row pan sideways instead — the always-on scrollbar is the affordance. */
@media (max-width: 620px) {
  .sg-row {
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  }
  .sg-row img { width: 640px; max-width: none; }
  /* the row is the scroller, so pin the size label or it pans away with the drawing */
  .sg-label { position: sticky; left: 0; }
  .sg-row::-webkit-scrollbar { height: 6px; }
  .sg-row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
  .sg-row::-webkit-scrollbar-track { background: transparent; }
}

/* ---------- Category toolbar (replaces the marquee on category pages) ---------- */
.cat-toolbar {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px 28px; padding: 13px 0; flex-wrap: wrap;
}
.cat-toolbar .ct-left { display: flex; align-items: center; gap: 18px; font-size: 12.5px; color: var(--ink-2); flex-wrap: wrap; }
.cat-toolbar .ct-left b { font-weight: 600; color: var(--ink); }
.cat-toolbar .ct-sort { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cat-toolbar .ct-sort > span { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.sort-chip {
  padding: 7px 14px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2);
  transition: all .2s;
}
.sort-chip:hover { border-color: var(--ink); color: var(--ink); }
.sort-chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Sale badges & prices ---------- */
.badge-sale {
  display: inline-flex; align-items: center;
  background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 999px;
}
.p-card { position: relative; }
.p-card .badge-sale { position: absolute; top: 8px; left: 8px; z-index: 2; }
.price-old { color: var(--muted); text-decoration: line-through; font-weight: 400; font-size: .82em; margin-right: 12px; }
.price-line .price-old { font-size: 13px; }

/* ---------- Star ratings ---------- */
.stars { display: inline-flex; align-items: center; gap: 2.5px; }
.stars svg { width: 12px; height: 12px; display: inline-block; }
.stars .s-num { font-size: 11.5px; color: var(--muted); margin-left: 7px; }
.p-card .stars { margin-top: 7px; }

/* ---------- Buttons (accent) ---------- */
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-2); }

/* ---------- Buy box (product page) ---------- */
.buy-box { display: flex; flex-direction: column; gap: 18px; min-width: 300px; }
.buy-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: baseline; }
.buy-label .link-u { text-transform: none; letter-spacing: 0; font-size: 12px; }
.buy-row { display: flex; gap: 12px; align-items: stretch; }
.buy-row .btn { flex: 1; justify-content: center; }
.style-opts { display: flex; gap: 16px; }
/* round style swatches, as on the factory shop */
.style-opt { border: 0; padding: 0; width: 96px; cursor: pointer; text-align: center; background: transparent; }
.style-opt svg { width: 100%; height: auto; }
.style-opt img {
  width: 84px; height: 84px; margin: 0 auto; box-sizing: border-box;
  border-radius: 50%; object-fit: contain; display: block;
  background: #fff; border: 1px solid var(--line); padding: 9px;
  transition: border-color .2s, box-shadow .2s, transform .15s var(--ease);
}
.style-opt:hover img { transform: scale(1.05); }
.style-opt span { display: block; font-size: 11px; margin-top: 8px; color: var(--ink-2); }
.style-opt.active img { border-color: var(--ink); box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 4px var(--ink); }
.style-opt.active span { color: var(--ink); font-weight: 600; }
.stock-line { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-2); }
.stock-dot { width: 8px; height: 8px; border-radius: 50%; background: #3e7d4e; flex: none; }

/* ---------- Language switcher & i18n ---------- */
/* While a translation is being applied the untranslated English must not be
   readable. The body is hidden rather than covered, so the canvas keeps the
   page background — a quiet coloured screen, never a white flash — and the
   brand mark marks it as loading rather than broken. No element is injected
   for this: the pseudo-element is in the stylesheet, so it is painted with the
   first frame instead of after DOMContentLoaded. */
html.i18n-wait body { visibility: hidden; }
html.i18n-wait::after {
  content: ""; position: fixed; inset: 0; z-index: 100;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23fff'/%3E%3Cg fill='%23000'%3E%3Crect y='5.87' width='32' height='1.6'/%3E%3Crect y='10.53' width='32' height='1.6'/%3E%3Crect y='15.2' width='32' height='1.6'/%3E%3Crect y='19.87' width='32' height='1.6'/%3E%3Crect y='24.53' width='32' height='1.6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='14' fill='%23121315' mask='url(%23m)'/%3E%3C/svg%3E") center / 34px no-repeat;
  animation: i18n-breathe 1.1s ease-in-out infinite;
}
@keyframes i18n-breathe { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.i18n-wait::after { animation: none; } }
/* a <select> cannot take the ::after hit area the other small controls use, so
   the box itself has to carry the tap target. Height is free — the 78px header
   absorbs it and it lines the pill up with the CTA beside it. Width is not:
   the full desktop nav is already tight enough at ~1024 that ten more pixels
   push the header CTA onto a third line, so the box only squares up below 940,
   where the header is the compact burger row and has the room. */
.lang-select {
  appearance: none; -webkit-appearance: none; background: transparent;
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px;
  min-height: 44px;
  font: 600 11.5px/1 var(--font, inherit); letter-spacing: .05em; color: var(--ink-2);
  cursor: pointer;
}
@media (max-width: 940px) { .lang-select { min-width: 44px; text-align: center; } }
.lang-select:hover { border-color: var(--ink); color: var(--ink); }
.mobile-menu .mm-lang { margin-top: 18px; width: max-content; }

/* ---------- Trust list & payment chips ---------- */
.trust-list { border-top: 1px solid var(--line); }
.trust-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.trust-item svg { width: 16px; height: 16px; flex: none; }
.pay-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pay-badge {
  display: inline-flex; align-items: center; height: 30px; padding: 0 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
}
.pay-badge img { display: block; height: 15px; width: auto; }
.pay-badge.pb-ideal img { height: 19px; }
.pay-badge.pb-mastercard img { height: 18px; }
.pay-badge.pb-visa img { height: 12px; }
.pay-badge.pb-klarna img { height: 15px; }
.pay-badge.pb-afterpay img { height: 12px; }
.pay-badge.pb-paypal img { height: 15px; }
.pay-badge.pb-amex img { height: 21px; }
.site-footer .pay-badge { border-color: transparent; }

/* ---------- Cart drawer ---------- */
/* closed drawer leaves the tab order too — see the note on .sg-overlay */
.drawer-overlay { position: fixed; inset: 0; background: rgba(10, 10, 10, .38); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .3s, visibility 0s .3s; z-index: 70; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 94vw);
  background: var(--bg); z-index: 71; display: flex; flex-direction: column;
  transform: translateX(103%); visibility: hidden;
  transition: transform .38s var(--ease), visibility 0s .38s;
  box-shadow: -24px 0 70px rgba(0, 0, 0, .14);
}
body.drawer-open .drawer { transform: none; visibility: visible; transition: transform .38s var(--ease), visibility 0s 0s; }
body.drawer-open .drawer-overlay { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .3s, visibility 0s 0s; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 26px; border-bottom: 1px solid var(--line); }
.drawer-head b { font-size: 16px; font-weight: 600; }
.drawer-close { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.drawer-items { flex: 1; overflow: auto; padding: 6px 26px; }
.d-item { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
.d-item .thumb svg { width: 100%; height: auto; }
.d-item .thumb img { width: 100%; height: 58px; object-fit: cover; display: block; }
.d-item h5 { font-size: 13.5px; font-weight: 600; }
.d-item .opts-line { font-size: 11px; color: var(--muted); margin-top: 2px; }
.d-item .remove { font-size: 11px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; margin-top: 5px; display: inline-block; }
.d-item .remove:hover { color: var(--ink); }
.d-item .d-price { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.drawer-foot { border-top: 1px solid var(--line); padding: 18px 26px 26px; }
.drawer-foot .sum-row { font-size: 14.5px; font-weight: 600; padding: 0 0 4px; }
.free-ship { font-size: 12px; color: var(--muted); margin: 6px 0 14px; }
.ship-progress { height: 3px; background: var(--line); margin-bottom: 14px; overflow: hidden; }
.ship-progress b { display: block; height: 100%; background: var(--ink); transition: width .4s var(--ease); }
.drawer-empty { padding: 46px 26px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* ---------- Before / after slider (photo variant) ---------- */
.ba-photo { aspect-ratio: 16 / 9; max-height: 640px; }
.ba-photo .ba-after { position: absolute; inset: 0; }
.ba-photo .ba-after img, .ba-photo .ba-inner img {
  width: 100%; height: 100%; object-fit: cover; display: block; max-width: none;
}

/* ---------- Before / after slider ---------- */
.ba { position: relative; overflow: hidden; background: var(--bg-soft); user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.ba > svg, .ba .ba-after svg { display: block; width: 100%; height: auto; }
.ba-before { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; border-right: 2px solid #fff; }
.ba-before .ba-inner { height: 100%; }
.ba-before .ba-inner svg { display: block; height: 100%; width: auto; max-width: none; }
.ba-handle {
  position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; border-radius: 50%;
  background: #fff; color: var(--ink); font-size: 11px; letter-spacing: 1px;
  display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%); box-shadow: 0 3px 14px rgba(0, 0, 0, .28); pointer-events: none;
}
.ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba-tag {
  position: absolute; bottom: 16px; background: rgba(17, 18, 20, .82); color: #fff;
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; pointer-events: none;
}
.ba-tag-l { left: 16px; }
.ba-tag-r { right: 16px; }

/* ---------- FAQ accordion ---------- */
.acc-cat { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 38px 0 4px; }
.acc-cat:first-child { margin-top: 0; }
details.acc { border-bottom: 1px solid var(--line); }
.acc summary { display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 16px 0; cursor: pointer; font-size: 14px; font-weight: 500; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 17px; font-weight: 400; color: var(--muted); transition: transform .25s var(--ease); flex: none; }
.acc[open] summary::after { transform: rotate(45deg); }
.acc .acc-body { padding: 0 0 18px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); max-width: 62ch; }

/* ---------- Testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.testi { border: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; }
.testi p { font-size: 13.5px; color: var(--ink-2); margin: 15px 0 20px; flex: 1; }
.testi .who { display: flex; align-items: center; gap: 10px; font-size: 12.5px; flex-wrap: wrap; }
.testi .who b { font-weight: 600; }
.vbadge { font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; }
/* always exactly three testimonials — same orphan-row problem as .grid-3 */
@media (max-width: 980px) { .testi-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
@media (max-width: 620px) { .testi-grid { grid-template-columns: 1fr; } }

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark { flex: none; display: block; }
.brand-logo { display: block; height: 30px; width: auto; }
.site-footer .brand-logo { height: 34px; filter: brightness(0) invert(1); opacity: .92; }
.mobile-menu .brand-logo { height: 28px; }

/* ---------- Badges (merchandising) ---------- */
.badge-flag {
  display: inline-flex; align-items: center;
  background: var(--ink); color: #fff;
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.p-card .badge-flag { position: absolute; top: 8px; right: 8px; z-index: 2; }

/* ---------- Modal (welcome offer) ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(10, 10, 10, .42); z-index: 80; animation: fadein .3s; }
.modal {
  position: fixed; z-index: 81; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 40px)); background: var(--bg);
  padding: 38px 36px 34px; box-shadow: 0 30px 90px rgba(0, 0, 0, .25);
  animation: modalin .45s var(--ease);
}
.promo-code { border: 1px dashed var(--ink-2); padding: 2px 8px; letter-spacing: .08em; }
@keyframes fadein { from { opacity: 0; } }
@keyframes modalin { from { opacity: 0; transform: translate(-50%, -46%); } }

/* ---------- Drawer upsell ---------- */
.upsell {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  border: 1px solid var(--line-dark); padding: 12px 14px; margin-bottom: 16px; font-size: 12.5px;
}
.upsell-add {
  font-size: 12px; font-weight: 600; background: var(--ink); color: #fff;
  padding: 7px 16px; flex: none;
}
.upsell-add:hover { background: #000; }

/* ---------- Promo code field (cart) ---------- */
.promo-field { display: flex; border-bottom: 1px solid #a9a9a5; margin: 14px 0 4px; }
.promo-field input {
  flex: 1; background: transparent; border: 0; padding: 9px 0; font: inherit; font-size: 16px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink);
}
.promo-field input:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.promo-field button { font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.promo-msg { font-size: 12px; margin-bottom: 10px; }
.promo-msg.ok { color: #3e7d4e; }
.promo-msg.err { color: var(--accent); }

/* ---------- Sticky mobile buy bar ---------- */
.buy-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; gap: 14px;
  background: var(--bg); border-top: 1px solid var(--line);
  /* Cookiebot parks a round widget in the bottom-left corner once someone has
     answered the banner, and on a phone it sat straight on top of the product
     name. Leave it its corner rather than hiding a control people need in
     order to change their mind. */
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom)) 64px;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .08);
}
.buy-sticky .bs-info { flex: 1; min-width: 0; }
.buy-sticky .bs-info b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buy-sticky .bs-info span { font-size: 12px; color: var(--muted); }
.buy-sticky .btn { padding: 12px 22px; }
/* the configurator carries a running total as well as a name, so it gets a
   column of its own rather than squeezing into the subtitle */
.buy-sticky .cfg-total { font-size: 16px; font-weight: 600; white-space: nowrap; }
@media (max-width: 760px) { .buy-sticky.on { display: flex; } }

/* ---------- Photography ---------- */
.photo { display: block; width: 100%; height: auto; }
.photo-frame { overflow: hidden; background: var(--bg-soft); }
.photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
a.photo-frame:hover img, .g-item:hover .photo-frame img { transform: scale(1.03); }
.figure figcaption { font-size: 12px; color: var(--muted); padding-top: 10px; }

.hero-photo { position: relative; color: #fff; overflow: hidden; }
/* the cap has to rise with the viewport or the frame turns into a letterbox on
   wide displays: at 2560 a 720px box kept only half the video's height and cut
   the pergola out of shot. 900 holds the crop near 2.8:1 instead of 3.6:1. */
.hero-photo img, .hero-photo video { display: block; width: 100%; height: min(78vh, 900px); object-fit: cover; }
/* the film sits over the still rather than replacing it, so the hero is laid
   out once and the swap costs no reflow and no flash of a differently-sized box */
.hero-photo .hero-film {
  position: absolute; inset: 0; height: 100%;
  opacity: 0; transition: opacity .7s var(--ease);
}
.hero-photo .hero-film.is-on { opacity: 1; }
.hero-photo .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 12, 16, .18) 0%, rgba(10, 12, 16, 0) 35%, rgba(10, 12, 16, .58) 100%);
}
.hero-photo .hero-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 0 56px; }
.hero-photo .h-display, .hero-photo .h-hero { color: #fff; }
.hero-photo .lead { color: rgba(255, 255, 255, .82); }
.hero-photo .proof { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 26px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .85); }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  background: rgba(10, 12, 16, .38); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px; padding: 9px 16px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero-kicker .logo-mark { color: #fff; }
.hero-photo .proof b { color: #fff; font-weight: 600; }
@media (max-width: 720px) { .hero-photo img, .hero-photo video { height: 66vh; } .hero-photo .hero-overlay { padding-bottom: 36px; } }

/* ---------- Media gallery (product page) ---------- */
.media-gallery { display: flex; flex-direction: column; gap: 12px; }
.media-main { aspect-ratio: 3 / 2; }
.media-main .thumb-svg { display: flex; align-items: center; justify-content: center; height: 100%; padding: 6%; }
.media-main .thumb-svg svg { width: 100%; height: auto; }
.media-thumbs { display: flex; gap: 10px; }
.media-thumbs button {
  width: 84px; aspect-ratio: 4 / 3; overflow: hidden; padding: 0;
  border: 1px solid var(--line); background: var(--bg-soft); opacity: .75; transition: all .2s;
}
.media-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-thumbs button svg { width: 100%; height: 100%; }
.media-thumbs button.active { border-color: var(--ink); opacity: 1; }
.media-thumbs button:hover { opacity: 1; }

/* ---------- Feature videos ---------- */
.feature-vids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.feature-vids video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #0c0d0f; }
.feature-vids h4 { font-size: 15px; font-weight: 600; margin: 15px 0 6px; }
.feature-vids p { font-size: 13px; color: var(--muted); max-width: 40ch; }
@media (max-width: 760px) { .feature-vids { grid-template-columns: 1fr; } }
.media-video { margin-top: 46px; max-width: 440px; }
.media-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #0c0d0f; }

/* ---------- Compare table ---------- */
.compare-wrap { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 640px; }
.compare th, .compare td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare th { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.compare td:first-child { color: var(--muted); width: 180px; }
.compare .c-name { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.compare .btn { padding: 9px 16px; font-size: 12px; }

/* ---------- Campaign countdown ---------- */
.countdown { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 6px; }
.countdown b {
  font-size: 20px; font-weight: 600; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; color: #fff;
}
.countdown span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); }

/* ---------- Deadline note ---------- */
.deadline { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-2); }
.deadline svg { width: 15px; height: 15px; }

/* ---------- Promo banner (campaign hero) ---------- */
.promo { background: var(--dark); color: #fff; overflow: hidden; }
.promo-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: 64px 0; }
.promo .eyebrow { color: var(--on-dark-muted); }
.promo .lead { color: var(--on-dark-muted); }
.promo-art svg { width: 100%; height: auto; }
@media (max-width: 860px) { .promo-in { grid-template-columns: 1fr; padding: 48px 0; } }