/* ============================================================================
   Bumblebae — component + page styles
   ----------------------------------------------------------------------------
   Every component here is a faithful port of the React primitive of the same
   name in the handoff bundle (design_handoff/_ds/.../_ds_bundle.js). Where the
   prototype held a value in inline JSX style, it is a declaration here; where
   it held a hover/focus/press branch, it is a pseudo-class here.

   The prototypes ship as two files per page (desktop + "mobiel"). This file
   reconciles them into one mobile-first set: the base rules are the mobile
   prototype, and the >=900px block is the desktop one. The single breakpoint
   matches where the design system switches gutters (20 -> 32px) and section
   rhythm (64 -> 96px).
   ========================================================================= */

/* ─── Layout primitives ─────────────────────────────────────────────────── */

.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}

.wrap--narrow { max-width: 768px; }

/* Section rhythm. The empty bands between sections are intentional. */
.section { padding-block: var(--section-y-mobile); }
.section--flush-top { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }
.section--sunken { background: var(--surface-sunken); }
.section--air { padding-block: var(--section-y-air); }

/* Two-up editorial row: text beside imagery. Media order is set per instance. */
.duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

.duo__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 46ch;
}

/* On mobile the prototypes always put the photo first; on desktop the wide
   column alternates. --duo-media-order flips it without reordering the DOM. */
.duo--text-first .duo__media { order: 2; }

.stack { display: flex; flex-direction: column; }
.stack-2 { gap: var(--space-2); }
.stack-3 { gap: var(--space-3); }
.stack-4 { gap: var(--space-4); }
.stack-5 { gap: var(--space-5); }
.stack-6 { gap: var(--space-6); }
.stack-8 { gap: var(--space-8); }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.row--tight { gap: var(--space-2); }

.hairline-top { padding-block-start: var(--space-12); border-block-start: 1px solid var(--line-hairline); }

.eyebrow {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Short letterspaced caps label (field labels, meta labels) — ls-caps not -wide */
.label-caps {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.4;
}

.lede { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--text-body); }
.muted { color: var(--text-muted); }
.text-sm { font-size: var(--fs-body-sm); }
.text-caption { font-size: var(--fs-caption); }
.serif { font-family: var(--font-display); font-weight: var(--fw-regular); color: var(--text-heading); }

/* Display heading used for page titles (h1 on interior pages) */
.page-title {
  margin: 0;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.12;
  text-wrap: balance;
}

.page-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 52ch;
  margin-block-end: var(--space-16);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-contrast);
  color: var(--text-on-contrast);
  border: none;
  font-size: var(--fs-body-sm);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-soft);
}

.skip-link:focus { transform: translateY(0); }

/* ─── Icon ──────────────────────────── components/core/Icon.jsx ────────── */
/* .ic lives in icons.css (masks + sizes). Colour is inherited currentColor. */

/* ─── Button ────────────────────────── components/core/Button.jsx ───────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding-inline: var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft),
              transform var(--dur-instant) var(--ease-soft);
}

.btn:active:not(:disabled) { transform: scale(var(--press-scale)); }

.btn--sm { min-height: 40px; padding-inline: var(--space-4); }
.btn--lg { min-height: var(--tap-comfort); padding-inline: var(--space-8); font-size: var(--fs-body-sm); }
.btn--block { display: flex; width: 100%; }

.btn--primary { background: var(--action-solid); color: var(--action-solid-text); }
.btn--primary:hover { background: var(--action-solid-hover); color: var(--action-solid-text); border-color: transparent; }

.btn--secondary { background: transparent; color: var(--text-heading); border-color: var(--ink-900); }
.btn--secondary:hover { background: var(--ink-900); color: var(--action-solid-text); border-color: var(--ink-900); }

.btn--quiet { background: transparent; color: var(--text-heading); }
.btn--quiet:hover { background: var(--action-quiet-hover); color: var(--text-heading); border-color: transparent; }

/* variant="link": no box, hairline underline that darkens on hover */
.btn--link {
  min-height: auto;
  padding: 0;
  background: transparent;
  color: var(--text-heading);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--line-strong);
}

.btn--link:hover { border-bottom-color: var(--ink-900); background: transparent; }

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  background: var(--action-disabled);
  color: var(--action-disabled-text);
  border-color: var(--action-disabled);
}

.btn--secondary:disabled,
.btn--link:disabled {
  background: transparent;
  border-color: var(--action-disabled);
  color: var(--action-disabled-text);
}

/* ─── IconButton ────────────────── components/core/IconButton.jsx ───────── */

.iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  min-width: 40px;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-heading);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-soft);
}

.iconbtn:hover { background: var(--action-quiet-hover); }
.iconbtn--sm { width: 40px; height: 40px; }
.iconbtn--lg { width: var(--tap-comfort); height: var(--tap-comfort); }

.iconbtn--outline { background: var(--surface-raised); border-color: var(--line-hairline); }
.iconbtn--outline:hover { background: var(--action-quiet-hover); }

/* The round quick-add. Pill is the only place solid icon buttons round off. */
.iconbtn--solid {
  border-radius: var(--radius-pill);
  background: var(--action-solid);
  color: var(--action-solid-text);
}

.iconbtn--solid:hover { background: var(--action-solid-hover); }

.iconbtn:disabled { cursor: not-allowed; opacity: .5; }

.iconbtn__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  border-radius: var(--radius-pill);
  background: var(--ink-900);
  color: var(--text-on-contrast);
  font-size: 10px;
  font-weight: var(--fw-medium);
  line-height: 17px;
  text-align: center;
}

.iconbtn--sm .iconbtn__badge { top: 2px; right: 2px; }
.iconbtn__badge[hidden] { display: none; }

/* ─── Badge ─────────────────────────── components/core/Badge.jsx ────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px var(--space-3);
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  line-height: 1.3;
  background: var(--surface-tint);
  color: var(--text-body);
}

.badge--ink { background: var(--surface-contrast); color: var(--text-on-contrast); }
.badge--outline { background: transparent; color: var(--text-heading); box-shadow: inset 0 0 0 1px var(--line-strong); }
/* At most one prism badge per page. Never as a button, never text on pale prism. */
.badge--prism { background: var(--prism-sweep-soft); color: var(--ink-900); }
.badge--success { background: var(--status-success-bg); color: var(--status-success); }
.badge--info { background: var(--status-info-bg); color: var(--status-info); }

/* ─── Tag (filter chip) ─────────────── components/core/Tag.jsx ──────────── */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding-inline: var(--space-4);
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-hairline);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: 1.3;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}

.tag:hover { background: var(--action-quiet-hover); }

.tag[aria-pressed="true"] {
  background: var(--surface-contrast);
  color: var(--text-on-contrast);
  box-shadow: none;
}

/* ─── Card ──────────────────────────── components/core/Card.jsx ─────────── */

.card {
  display: block;
  width: 100%;
  padding: var(--space-6);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  box-shadow: var(--shadow-none);
  color: var(--text-body);
  text-align: left;
}

.card--raised { border-color: transparent; box-shadow: var(--shadow-md); }
.card--tint { background: var(--surface-tint); border-color: transparent; box-shadow: none; }
.card--bare { background: transparent; border: none; box-shadow: none; }

/* ─── PhotoFrame ───────────────── components/editorial/PhotoFrame.jsx ───── */

.photo {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.photo__box {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;   /* DS default crop */
  overflow: hidden;
  border-radius: var(--radius-none);
  background: var(--surface-photo);
}

.photo__box > img { width: 100%; height: 100%; object-fit: cover; }

/* Crops the system uses: 1:1 details, 4:3 / 3:2 rows, 21:9 desktop hero, 3:4 mobile hero */
.photo--1-1 .photo__box { aspect-ratio: 1 / 1; }
.photo--4-5 .photo__box { aspect-ratio: 4 / 5; }
.photo--4-3 .photo__box { aspect-ratio: 4 / 3; }
.photo--3-2 .photo__box { aspect-ratio: 3 / 2; }
.photo--3-4 .photo__box { aspect-ratio: 3 / 4; }
.photo--16-9 .photo__box { aspect-ratio: 16 / 9; }
.photo--21-9 .photo__box { aspect-ratio: 21 / 9; }

/* The reference-inspired arch frame, for collection and story imagery */
.photo--arch .photo__box { border-radius: var(--radius-arch); }
.photo--soft .photo__box { border-radius: var(--radius-sm); }

/* No src: the house placeholder is a lit warm wall with a faint prism sweep,
   and its label is the alt text — so every placeholder doubles as a shot brief. */
.photo--placeholder .photo__box {
  background: linear-gradient(160deg, var(--sand-100) 0%, var(--sand-200) 55%, var(--clay-300) 100%);
}

.photo--placeholder .photo__box::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: var(--prism-sweep-soft);
  opacity: .4;
  mix-blend-mode: screen;
  transform: rotate(-8deg);
  pointer-events: none;
}

.photo__brief {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
  max-width: 72%;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--stone-500);
  line-height: 1.4;
  pointer-events: none;
}

/* Text over photography always gets a scrim, never blur alone. */
.photo__scrim { position: absolute; inset: 0; pointer-events: none; }
.photo--scrim-bottom .photo__scrim { background: linear-gradient(180deg, rgba(34,30,26,0) 35%, rgba(34,30,26,.42) 100%); }
.photo--scrim-full .photo__scrim { background: linear-gradient(180deg, rgba(34,30,26,.34) 0%, rgba(34,30,26,.44) 45%, rgba(34,30,26,.62) 100%); }

.photo__overlay { position: absolute; inset: 0; }

.photo figcaption,
.photo__caption {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* ─── SectionHeading ───────── components/editorial/SectionHeading.jsx ───── */

.sechead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-8);
}

.sechead__body { max-width: 56ch; }
.sechead__eyebrow { margin: 0 0 var(--space-3); }

.sechead__title {
  margin: 0;
  font-size: var(--fs-heading-1);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

.sechead__intro {
  margin: var(--space-4) 0 0;
  max-width: var(--measure-prose);
  font-size: var(--fs-body-lg);
}

.sechead--center { justify-content: center; text-align: center; }
.sechead--center .sechead__body { max-width: var(--measure-prose); margin-inline: auto; }

/* ─── TrustBadge ──────────────── components/editorial/TrustBadge.jsx ────── */

.trust { display: flex; flex-direction: row; align-items: flex-start; gap: var(--space-4); }
.trust__icon { flex: 0 0 auto; margin-block-start: 1px; color: var(--text-heading); }
.trust__body { display: flex; flex-direction: column; gap: 2px; }

.trust__title {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-heading);
  line-height: 1.5;
}

.trust__desc { font-size: var(--fs-body-sm); color: var(--text-muted); line-height: 1.55; max-width: 34ch; }

.trust--stack { flex-direction: column; gap: var(--space-3); }
.trust--stack .trust__icon { margin-block-start: 0; }

/* ─── PriceTag ──────────────────── components/commerce/PriceTag.jsx ─────── */

.price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.price__value {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-price);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.price--sm .price__value { font-size: var(--fs-body-sm); }
.price--lg .price__value { font-size: var(--fs-heading-3); }

/* If a price changes it changes — via compareAt. Never a discount percentage. */
.price__compare { font-size: var(--fs-body-sm); color: var(--text-muted); text-decoration-thickness: 1px; }
.price__note { font-size: var(--fs-caption); color: var(--text-muted); }

/* ─── ProductCard ─────────────── components/commerce/ProductCard.jsx ────── */
/* No border and no shadow: the photograph is the container, text sits under it. */

.pcard { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

.pcard__media {
  position: relative;
  display: block;
  border: none;
  padding: 0;
  text-decoration: none;
}

/* Hover puts a 4% ink tint on the photo — the card itself does not lift. */
.pcard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink-900);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-soft);
  pointer-events: none;
}

.pcard__media:hover::after { opacity: .04; }

.pcard__flag { position: absolute; top: var(--space-3); left: var(--space-3); }
.pcard__quickadd { position: absolute; right: var(--space-3); bottom: var(--space-3); }

.pcard__body { display: flex; flex-direction: column; gap: var(--space-1); }

.pcard__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-heading-3);
  line-height: var(--lh-tight);
  color: var(--text-heading);
}

.pcard__name a { color: inherit; text-decoration: none; border: none; }
.pcard__meta { margin: 0; font-size: var(--fs-body-sm); color: var(--text-muted); line-height: 1.5; }
.pcard .price { margin-block-start: var(--space-2); }

/* Product grid: 2 up on mobile, 3–4 on desktop. */
.pgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-6);
}

/* ─── AddToCartBar ─────────── components/commerce/AddToCartBar.jsx ──────── */

.buybar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4);
}

/* Sticky on mobile product pages: the veil lets photography show through. */
.buybar--sticky {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--veil-light);
  -webkit-backdrop-filter: var(--blur-veil);
          backdrop-filter: var(--blur-veil);
  border-block-start: 1px solid var(--line-hairline);
  padding-block-end: max(var(--space-4), env(safe-area-inset-bottom));
}

.buybar__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.buybar__name { font-size: var(--fs-caption); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buybar .btn { flex: 1 1 180px; }

/* ─── Field / Input / Select ────────── components/forms/*.jsx ───────────── */

.field { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }

.field__label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.4;
}

.field__req { color: var(--status-danger); }
.field__hint { font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.5; }
.field__error { font-size: var(--fs-caption); color: var(--status-danger); line-height: 1.5; }
.field__shell { position: relative; display: block; }

.input,
.select {
  width: 100%;
  min-height: var(--tap-min);
  padding-inline: var(--space-4);
  background: var(--surface-raised);
  color: var(--text-heading);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.4;
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-xs);
  transition: border-color var(--dur-fast) var(--ease-soft);
}

.input:focus,
.select:focus { border-color: var(--ink-900); }

.input[aria-invalid="true"],
.select[aria-invalid="true"] { border-color: var(--status-danger); }

.input:disabled,
.select:disabled { background: var(--surface-sunken); cursor: not-allowed; }

textarea.input { padding-block: var(--space-3); resize: vertical; line-height: var(--lh-body); }

.input--with-icon { padding-inline-start: calc(var(--space-4) * 2 + 12px); }

.field__icon {
  position: absolute;
  left: var(--space-4);
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  color: var(--text-muted);
  pointer-events: none;
}

.select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: calc(var(--space-4) * 2 + 10px);
  cursor: pointer;
}

.field__chevron {
  position: absolute;
  right: var(--space-4);
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  color: var(--text-muted);
  pointer-events: none;
}

/* Checkbox + Radio: the native control is hidden, the box is drawn. */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding-block: var(--space-2);
  cursor: pointer;
  position: relative;
}

.check > input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.check__box {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-block-start: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-raised);
  color: var(--text-on-contrast);
  transition: background var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}

.check__box .ic { opacity: 0; }
.check > input:checked + .check__box { background: var(--ink-900); border-color: var(--ink-900); }
.check > input:checked + .check__box .ic { opacity: 1; }
.check > input:focus-visible + .check__box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.check > input:disabled ~ * { opacity: .55; }

.check__body { display: flex; flex-direction: column; gap: 2px; }
.check__label { font-size: var(--fs-body-sm); color: var(--text-heading); line-height: 1.5; }
.check__hint { font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.5; }

.check--radio .check__box { border-radius: 50%; background: var(--surface-raised); }
.check--radio .check__box::after {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: transparent;
  transition: background var(--dur-fast) var(--ease-soft);
}

.check--radio > input:checked + .check__box { background: var(--surface-raised); }
.check--radio > input:checked + .check__box::after { background: var(--ink-900); }

/* QuantityStepper */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-xs);
  background: var(--surface-raised);
}

.qty__btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-heading);
  cursor: pointer;
}

.qty__btn:disabled { color: var(--action-disabled-text); cursor: not-allowed; }

.qty__value {
  min-width: 34px;
  text-align: center;
  font-size: var(--fs-body-sm);
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}

.qty--sm .qty__btn { width: 36px; height: 36px; }

/* ─── Notice / Toast ──────────────── components/feedback/*.jsx ──────────── */

.notice {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--status-info-bg);
}

.notice__icon { flex: 0 0 auto; margin-block-start: 1px; color: var(--status-info); }
.notice__title { margin: 0 0 2px; font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--text-heading); }
.notice__body { flex: 1 1 auto; min-width: 0; font-size: var(--fs-body-sm); color: var(--text-body); line-height: 1.55; }
.notice__body p { margin: 0; }

.notice--success { background: var(--status-success-bg); }
.notice--success .notice__icon { color: var(--status-success); }
.notice--warning { background: var(--status-warning-bg); }
.notice--warning .notice__icon { color: var(--status-warning); }
.notice--danger { background: var(--status-danger-bg); }
.notice--danger .notice__icon { color: var(--status-danger); }

/* Quiet confirmation. Fades and lifts 6px — never slides in with a bounce. */
.toast {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-6);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 420px;
  margin-inline: auto;
  padding: var(--space-4);
  background: var(--surface-contrast);
  color: var(--text-on-contrast);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft);
  pointer-events: none;
}

.toast.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.toast__body { flex: 1 1 auto; min-width: 0; }
.toast__msg { display: block; font-size: var(--fs-body-sm); }
.toast__detail { display: block; font-size: var(--fs-caption); opacity: .7; }

.toast__action {
  background: transparent;
  border: none;
  border-bottom: 1px solid currentColor;
  padding: 2px 0;
  color: inherit;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  cursor: pointer;
}

/* ─── Dialog ─────────────────────── components/feedback/Dialog.jsx ──────── */

.dialog { position: fixed; inset: 0; z-index: 50; }
.dialog[hidden] { display: none; }

.dialog__veil {
  position: absolute;
  inset: 0;
  background: var(--surface-overlay);
  border: none;
  padding: 0;
  width: 100%;
  cursor: pointer;
}

.dialog__panel {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* sheet = mobile bottom sheet (the only 14px radius in the system) */
.dialog--sheet .dialog__panel {
  left: 0; right: 0; bottom: 0;
  max-height: 88%;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* drawer = right side, the cart */
.dialog--drawer .dialog__panel {
  top: 0; bottom: 0; right: 0;
  width: 100%;
  max-width: 420px;
  border-radius: 0;
}

.dialog--center .dialog__panel {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - var(--space-8));
  max-width: 420px;
  max-height: 86%;
  border-radius: var(--radius-sm);
}

.dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-block-end: 1px solid var(--line-hairline);
}

.dialog__title { margin: 0; font-size: var(--fs-heading-3); }

.dialog__close {
  width: var(--tap-min);
  height: var(--tap-min);
  margin-inline-end: calc(var(--space-3) * -1);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-heading);
}

.dialog__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-5); }

.dialog__foot {
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-block-start: 1px solid var(--line-hairline);
  background: var(--surface-raised);
}

/* ─── Breadcrumbs / Tabs ────────── components/navigation/*.jsx ──────────── */

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.crumbs li { display: flex; align-items: center; gap: var(--space-2); }
.crumbs a { color: inherit; border: none; border-bottom: 1px solid transparent; }
.crumbs a:hover { border-bottom-color: var(--line-strong); }
.crumbs [aria-current="page"] { color: var(--text-body); }
.crumbs__sep { color: var(--stone-400); }

/* Tab rows scroll horizontally rather than truncate — a multilingual rule. */
.tabs {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scrollbar-width: none;
  border-block-end: 1px solid var(--line-hairline);
}

.tabs::-webkit-scrollbar { display: none; }

.tabs__tab {
  min-height: var(--tap-min);
  padding: 0 0 var(--space-2);
  margin-block-end: -1px;
  background: transparent;
  border: none;
  border-block-end: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-soft);
}

.tabs__tab[aria-selected="true"] { color: var(--text-heading); border-block-end-color: var(--ink-900); }
.tabs__count { color: var(--text-muted); font-weight: var(--fw-regular); }

/* ─── AnnouncementBar ─────── components/feedback/AnnouncementBar.jsx ────── */

.announce { position: relative; background: var(--surface-tint); color: var(--text-body); }

.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  max-width: var(--content-max);
  margin-inline: auto;
  min-height: 38px;
  padding: var(--space-2) var(--gutter-mobile);
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

/* The prism hairline is the only decoration allowed on the announcement bar. */
.announce__prism {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--prism-sweep);
}

/* ─── LanguageSwitcher ──── components/navigation/LanguageSwitcher.jsx ───── */
/* Languages are named in their own language. Flags are never used. */

.langsw { position: relative; }

.langsw__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding-inline: var(--space-3);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-heading);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.langsw__menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: var(--space-2);
  min-width: 176px;
  list-style: none;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.langsw__menu[hidden] { display: none; }

.langsw__opt {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  padding-inline: var(--space-3);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--text-heading);
  text-decoration: none;
}

.langsw__opt:hover { background: var(--action-quiet-hover); }

/* Inline variant — the footer's NL · DE · EN row */
.langsw--inline { display: flex; align-items: center; gap: var(--space-1); }

.langsw--inline a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-3);
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.langsw--inline a[aria-current="true"] { color: var(--text-heading); border-bottom-color: var(--ink-900); }

/* ─── SiteHeader ───────────── components/navigation/SiteHeader.jsx ──────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--veil-light);
  -webkit-backdrop-filter: var(--blur-veil);
          backdrop-filter: var(--blur-veil);
  border-block-end: 1px solid var(--line-hairline);
}

/* Mobile header geometry comes from "Home mobiel.dc.html": 8px gaps, 8/16px
   padding and 44px controls, which is what makes burger + wordmark + search +
   cart fit inside 390px. */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-2) var(--space-4);
}

.site-header__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-heading);
}

/* Mobile keeps the icon buttons at the prototype's 44px. */
.site-header__actions .iconbtn { width: 44px; height: 44px; }

/* The mobile prototype puts no language switcher in the header — the footer's
   inline NL · DE · EN row carries it on every page, so the slot the design
   system asks for is still reserved, just not in a 390px-wide row. */
.site-header .langsw { display: none; }

/* No logo mark was supplied: the wordmark is Marcellus caps at 0.16em tracking,
   beside the bee crop from assets/logo-bumblebae. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
  border: none;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-heading);
  white-space: nowrap;
}

.wordmark__bee {
  display: inline-block;
  width: 32px;
  height: 34px;
  flex: 0 0 auto;
  background-image: image-set(url("/assets/logo-bumblebae.webp") type("image/webp"),
                              url("/assets/logo-bumblebae-256.jpg") type("image/jpeg"));
  background-image: url("/assets/logo-bumblebae.webp");
  background-size: auto 152%;
  background-position: 50% 4%;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

.site-header__nav { display: none; }

.site-header__actions { display: flex; align-items: center; gap: var(--space-1); }

/* Mobile menu panel */
.site-header__mobile {
  border-block-start: 1px solid var(--line-hairline);
  background: var(--surface-page);
  padding: var(--space-2) var(--gutter-mobile) var(--space-6);
}

.site-header__mobile[hidden] { display: none; }
.site-header__mobile ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-header__mobile li { border-block-end: 1px solid var(--line-hairline); }

.site-header__mobile a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap-comfort);
  border: none;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--fs-heading-3);
  color: var(--text-heading);
}

/* ─── SiteFooter ───────────── components/navigation/SiteFooter.jsx ──────── */

.site-footer {
  background: var(--surface-sunken);
  border-block-start: 1px solid var(--line-hairline);
  padding: var(--space-16) var(--gutter-mobile) var(--space-8);
}

/* Footer columns auto-fit — nothing truncates when German runs long. */
.site-footer__cols {
  max-width: var(--content-max);
  margin-inline: auto;
  display: grid;
  gap: var(--space-12);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.site-footer__brand { display: flex; flex-direction: column; gap: var(--space-4); }

.site-footer__wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-heading);
  border: none;
  text-decoration: none;
}

.site-footer__wordmark .wordmark__bee { width: 42px; height: 44px; }
.site-footer__tagline { margin: 0; font-size: var(--fs-body-sm); color: var(--text-muted); max-width: 32ch; }

.site-footer__social { display: flex; gap: var(--space-2); }

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  color: var(--text-heading);
}

.site-footer nav { display: flex; flex-direction: column; gap: var(--space-3); }

.site-footer__coltitle {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.site-footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.site-footer nav a {
  display: flex;
  align-items: center;
  min-height: 40px;
  border: none;
  text-decoration: none;
  font-size: var(--fs-body-sm);
  color: var(--text-body);
}

.site-footer nav a:hover { color: var(--ink-900); }

.site-footer__legal {
  max-width: var(--content-max);
  margin: var(--space-12) auto 0;
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--line-hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* ─── Hero ──────────────────────────────────────────────────────────────── */
/* Full-bleed photography is the only decoration. Headings on it get scrim=full. */

.hero { position: relative; }
.hero .photo, .hero .photo__box { border-radius: 0; }
.hero .photo__box { aspect-ratio: 1 / 1; }   /* mobile hero crop */

/* Mobile ("Home mobiel.dc.html"): the copy sits in the bottom-left of a square
   crop with a full-width button. Desktop ("Home.dc.html") centres it instead —
   see the >=900px block. */
.hero__content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: var(--space-5);
  text-align: left;
  padding: var(--space-10) var(--gutter-mobile);
}

.hero__content .btn { width: 100%; }

.hero__eyebrow {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
  color: rgba(251, 248, 244, .86);
}

.hero__title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(2.25rem, 9vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: var(--ls-display);
  color: var(--warm-white);
  text-wrap: balance;
}

.hero__lede {
  margin: 0;
  max-width: 44ch;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: rgba(251, 248, 244, .9);
}

/* ─── Editorial detail list (home "Het effect") ─────────────────────────── */

.deflist { display: flex; flex-direction: column; gap: var(--space-6); }

.deflist__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block-end: var(--space-6);
  border-block-end: 1px solid var(--line-hairline);
}

.deflist__item:last-child { padding-block-end: 0; border-block-end: none; }

.deflist__term {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: var(--lh-tight);
  color: var(--text-heading);
}

.deflist__item p { margin: 0; }

/* Three-up facts row (product care, home trust row, process steps) */
.facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.facts__item { display: flex; flex-direction: column; gap: var(--space-2); }

.facts__term {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: var(--lh-tight);
  color: var(--text-heading);
}

.facts__item p { margin: 0; font-size: 1rem; }

/* Centred closing call to action */
.closer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}

.closer h2 { margin: 0; max-width: 26ch; font-size: clamp(1.75rem, 3.6vw, 2.25rem); text-wrap: balance; }
.closer p { max-width: 46ch; }

/* ─── Product page ──────────────────────────────────────────────────────── */

.product { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: start; }
.product__gallery { display: flex; flex-direction: column; gap: var(--space-4); }
.product__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }

.product__thumb {
  padding: 0;
  border: 1px solid var(--line-hairline);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-soft);
}

.product__thumb:hover { border-color: var(--line-strong); }
.product__thumb[aria-current="true"] { border-color: var(--ink-900); }

.product__buy { display: flex; flex-direction: column; gap: var(--space-6); max-width: 44ch; }
.product__title { margin: 0; font-size: clamp(2rem, 4vw, 2.75rem); line-height: var(--lh-heading); text-wrap: balance; }
.product__desc { margin: 0; }

.product__options { display: flex; flex-direction: column; gap: var(--space-3); }

.product__trust {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--line-hairline);
}

/* ─── Article ───────────────────────────────────────────────────────────── */

.article {
  max-width: var(--measure-prose);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.article__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 60ch;
  margin: 0 auto var(--space-14, 56px);
}

.article__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.article__lede { margin: 0; font-size: 19px; line-height: var(--lh-body); }
.article__byline { margin: 0; font-size: var(--fs-body-sm); color: var(--text-muted); }

/* Running prose is looser than UI body: 1.8 leading at 18px. */
.article p { margin: 0; font-size: var(--fs-body-lg); line-height: 1.8; }
.article h2 { margin: var(--space-8) 0 0; font-size: clamp(1.5rem, 3vw, 2rem); text-wrap: balance; }
.article h3 { margin: var(--space-6) 0 0; font-size: 22px; line-height: 1.3; }

.article ul, .article ol {
  margin: 0;
  padding-inline-start: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--fs-body-lg);
  line-height: 1.75;
  color: var(--text-body);
}

/* Pull quote: sand band, no left rule — the system bans coloured accent borders. */
.article blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-6) 28px;
  border: none;
  background: var(--surface-sunken);
}

.article blockquote p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 22px;
  line-height: 1.4;
  color: var(--text-heading);
}

/* "Kort samengevat" summary box */
.callout {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin: var(--space-6) 0;
  padding: var(--space-8);
  border: 1px solid var(--line-hairline);
}

.callout__title { font-family: var(--font-display); font-size: 22px; line-height: 1.3; color: var(--text-heading); }

/* Related-article cards */
.teaser { display: flex; flex-direction: column; gap: var(--space-4); text-decoration: none; border: none; }
.teaser__title { font-family: var(--font-display); font-size: 22px; line-height: 1.3; color: var(--text-heading); }
.teaser:hover .teaser__title { color: var(--ink-700); }

/* ─── Collection controls ───────────────────────────────────────────────── */

.filters {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
  padding-block-end: var(--space-5);
  margin-block-end: var(--space-8);
  border-block-end: 1px solid var(--line-hairline);
}

.filters__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filters__sort { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
.filters__sort .field { width: auto; }
.filters__sort .select { width: 240px; max-width: 100%; }
.filters__sort .label-caps { white-space: nowrap; }

.count { margin: 0 0 var(--space-8); font-size: var(--fs-body-sm); line-height: 1.6; color: var(--text-muted); }

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

.cart { display: grid; grid-template-columns: 1fr; gap: var(--space-12); align-items: start; }

.cart__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.cart__line {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-block-end: 1px solid var(--line-hairline);
}

.cart__line:first-child { padding-block-start: 0; }
.cart__thumb { width: 88px; }
.cart__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cart__name { font-family: var(--font-display); font-size: var(--fs-heading-3); line-height: var(--lh-tight); color: var(--text-heading); }
.cart__name a { color: inherit; border: none; }
.cart__variant { font-size: var(--fs-body-sm); color: var(--text-muted); }
.cart__controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }

.cart__remove {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  padding: 0 0 1px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.cart__remove:hover { color: var(--ink-900); border-bottom-color: var(--ink-900); }

/* Order summary sits in a sand panel — the "tint" Card skin. */
.summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface-tint);
}

.summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); font-size: var(--fs-body-sm); }
.summary__row--total { padding-block-start: var(--space-4); border-block-start: 1px solid var(--line-strong); font-size: var(--fs-body); }
.summary__row--total .summary__amount { font-size: var(--fs-heading-3); font-weight: var(--fw-medium); }
.summary__amount { font-variant-numeric: tabular-nums; color: var(--text-heading); }

.empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); padding-block: var(--space-12); }

/* ─── Legal / prose pages ───────────────────────────────────────────────── */

.prose { max-width: var(--measure-prose); }
.prose h2 { margin-block: var(--space-10) var(--space-4); font-size: var(--fs-heading-2); }
.prose h3 { margin-block: var(--space-6) var(--space-3); font-size: var(--fs-heading-3); }
.prose p, .prose li { font-size: var(--fs-body); line-height: var(--lh-body); }
.prose ul, .prose ol { padding-inline-start: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); margin-block-end: var(--space-4); }
.prose dl { margin: 0 0 var(--space-6); }
.prose dt { font-weight: var(--fw-medium); color: var(--text-heading); margin-block-start: var(--space-4); }
.prose dd { margin: var(--space-1) 0 0; }

.prose table { width: 100%; border-collapse: collapse; margin-block-end: var(--space-6); font-size: var(--fs-body-sm); }
.prose th, .prose td { text-align: left; padding: var(--space-3) var(--space-4) var(--space-3) 0; border-block-end: 1px solid var(--line-hairline); }
.prose th { font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); }

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

.contact { display: grid; grid-template-columns: 1fr; gap: var(--space-12); align-items: start; }
.contact__form { display: flex; flex-direction: column; gap: var(--space-6); max-width: 52ch; }
.contact__pair { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.contact__aside { display: flex; flex-direction: column; gap: var(--space-8); max-width: 38ch; }
.contact__card { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-8); background: var(--surface-sunken); }
.contact__card-title { font-family: var(--font-display); font-size: 22px; line-height: 1.3; color: var(--text-heading); }
.contact__item { display: flex; flex-direction: column; gap: 6px; }
.contact__item a, .contact__item p { font-size: var(--fs-body); line-height: 1.6; margin: 0; }
.contact__submit { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; padding-block-start: var(--space-2); }
.contact__submit p { margin: 0; flex: 1 1 14ch; font-size: var(--fs-body-sm); line-height: 1.6; color: var(--text-muted); }

/* Honeypot: never shown, never announced. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ─── Checkout result ───────────────────────────────────────────────────── */

.result { max-width: 52ch; display: flex; flex-direction: column; gap: var(--space-6); padding-block: var(--space-12); }

/* ─── Newsletter inline form ────────────────────────────────────────────── */

.signup { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; padding-block-start: var(--space-2); }
.signup .field { flex: 1 1 18ch; }

/* ─── Loading / empty states for client-rendered lists ──────────────────── */

.skeleton { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-6); }
.skeleton__cell { display: flex; flex-direction: column; gap: var(--space-4); }
.skeleton__box { aspect-ratio: 4 / 5; background: var(--surface-tint); }
.skeleton__line { height: 14px; width: 60%; background: var(--surface-tint); }
.skeleton__line--short { width: 34%; }

/* ═══ Desktop ══════════════════════════════════════════════════════════════
   From here the desktop prototypes take over: 32px gutters, 96px section
   rhythm, 80px column gaps, inline nav instead of the hamburger.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {
  .wrap { padding-inline: var(--gutter); }

  .section { padding-block: var(--section-y); }
  .section--flush-top { padding-block-start: 0; }
  .section--flush-bottom { padding-block-end: 0; }

  .duo { grid-template-columns: 1.15fr .85fr; gap: var(--space-20); }
  .duo--narrow-first { grid-template-columns: .85fr 1.15fr; }
  .duo--text-first .duo__media { order: 0; }
  .duo__text { gap: var(--space-6); }

  .announce__inner { padding-inline: var(--gutter); }

  /* wide={true}: inline nav, wordmark left, no hamburger */
  .site-header__inner { padding-inline: var(--gutter); }
  .site-header__burger { display: none; }
  .site-header__mobile { display: none !important; }

  .wordmark { flex: 0 0 auto; justify-content: flex-start; }

  .site-header__nav {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    gap: var(--space-8);
  }

  .site-header__nav a {
    border: none;
    border-bottom: 1px solid transparent;
    padding-block-end: 2px;
    text-decoration: none;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-muted);
  }

  .site-header__nav a:hover { color: var(--text-heading); }
  .site-header__nav a[aria-current="page"] { color: var(--text-heading); border-bottom-color: var(--ink-900); }

  .site-footer { padding-inline: var(--gutter); }

  .hero .photo__box { aspect-ratio: 16 / 9; max-height: min(80vh, 760px); }

  /* Desktop hero centres its copy, as Home.dc.html does. */
  .hero__content {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 28px;
    padding: var(--space-16) var(--gutter);
  }

  .hero__content .btn { width: auto; }

  .site-header__inner { gap: var(--space-4); padding: var(--space-3) var(--gutter); }
  .site-header__burger { margin-inline-start: calc(var(--space-2) * -1); }
  .site-header__actions .iconbtn { width: var(--tap-min); height: var(--tap-min); }
  .site-header .langsw { display: block; }
  .wordmark { font-size: 1.25rem; }

  .pgrid { grid-template-columns: repeat(4, 1fr); gap: var(--space-14, 56px) var(--space-8); }
  .pgrid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-10); }
  .skeleton { grid-template-columns: repeat(4, 1fr); gap: var(--space-14, 56px) var(--space-8); }

  .facts { grid-template-columns: repeat(3, 1fr); gap: var(--space-12); }

  .product { grid-template-columns: 1.15fr .85fr; gap: var(--space-20); }
  .product__thumbs { gap: var(--space-4); }
  .product__buy { gap: var(--space-6); }

  /* Desktop keeps the purchase controls inline — the sticky bar is mobile only. */
  .buybar--sticky { position: static; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: none; padding: 0; }

  .filters { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-8); }

  .cart { grid-template-columns: 1.3fr .7fr; gap: var(--space-16); }
  .cart__line { grid-template-columns: 120px 1fr; gap: var(--space-6); }
  .cart__thumb { width: 120px; }

  .contact { grid-template-columns: 1.15fr .85fr; gap: var(--space-20); }
  .contact__pair { grid-template-columns: 1fr 1fr; }

  .article__header { gap: var(--space-6); }
  .teasers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-10); }
}

/* A few things only make sense once there is room for four columns. */
@media (min-width: 600px) and (max-width: 899px) {
  .pgrid { grid-template-columns: repeat(3, 1fr); }
  .skeleton { grid-template-columns: repeat(3, 1fr); }
  .facts { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
  .contact__pair { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 600px) {
  .teasers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
}