/* ============================================================
   Concept 4 — Navy & Crème
   Hero (design 1) + hologram-atelier (design 3) + types + collectie
============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ============================================================
   Design tokens — navy blue + crème
============================================================ */
:root {
  /* Colors */
  --color-bg: #f3ecdd;         /* crème achtergrond */
  --color-surface: #fbf7ee;    /* lichte crème kaart/paneel */
  --color-ink: #16243f;        /* deep navy tekst */
  --color-ink-muted: #5b6883;  /* gedempt navy-grijs */
  --color-navy: #16243f;       /* navy CTA / donker */
  --color-navy-deep: #0f1a2e;  /* donkere panelen */
  --color-accent: #3c5a86;     /* steel-blue accent (eyebrows, cursief) */
  --color-line: rgba(22, 36, 63, 0.14);
  --color-cream: #f4eee2;
  --color-cream-muted: rgba(244, 238, 226, 0.72);
  --color-steel: #9db4d6;   /* lichtblauw accent op navy */
  --color-gold: #9a7530;        /* goud voor subheadings op licht */
  --color-gold-light: #cba85f;  /* goud voor subheadings op navy */

  /* Typography */
  --font-display: "la-mericana", Georgia, serif;
  --font-ui: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  /* Type scale (1.250 — Major Third) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;

  /* Spacing (8px base) */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 4rem;

  /* Layout */
  --nav-inset: clamp(1rem, 3vw, 2rem);
  --edge: clamp(1.5rem, 4vw, 3.5rem);      /* horizontale sectie-marge — overal gelijk */
  --container-padding: var(--edge);         /* alias voor dezelfde horizontale marge */
  --section-y: clamp(4.5rem, 9vw, 8rem);    /* verticale sectie-padding — overal gelijk */
  --hero-max: 1320px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 0.5s;
}

/* ============================================================
   Base
============================================================ */
body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2 { margin: 0; }
a { color: inherit; text-decoration: none; }

/* Cursief-accent binnen display headings */
.atelier__title i,
.types__heading i,
.collectie__title i {
  font-style: italic;
  color: var(--color-accent);
}

/* ============================================================
   Loader
============================================================ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  background: var(--color-bg);
  transition: opacity 0.8s var(--ease-out), visibility 0.8s;
}
.loader.is-hidden { opacity: 0; visibility: hidden; }
.loader__count {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(3rem, 11vw, 5.5rem);
  color: var(--color-accent);
  line-height: 1;
}
.loader__count::after { content: "%"; font-size: 0.4em; color: var(--color-ink-muted); }
.loader__bar {
  width: min(260px, 60vw);
  height: 2px;
  background: var(--color-line);
  overflow: hidden;
}
.loader__bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-navy);
  transition: width 0.3s var(--ease-out);
}

/* ============================================================
   Topbar + Navigatie
============================================================ */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.35rem var(--container-padding);
  background: var(--color-navy);
  color: var(--color-cream);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}
.topbar__group { display: flex; align-items: center; gap: var(--space-5); }
.topbar__link { display: inline-flex; align-items: center; gap: 0.45em; color: var(--color-cream); transition: opacity var(--duration) var(--ease-out); }
.topbar__link:hover { opacity: 0.72; }
.topbar__ico { flex-shrink: 0; color: var(--color-steel); }
.topbar__sep { opacity: 0.5; }
.topbar__note { color: rgba(244, 238, 226, 0.82); }

/* Topbalk — USP-vinkjes */
.topbar__usps {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  flex-wrap: wrap;
}
.topbar__usp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-cream);
  white-space: nowrap;
}
.topbar__check { flex-shrink: 0; color: var(--color-steel); }

.nav {
  position: fixed;
  top: calc(var(--nav-inset) + 2.25rem);
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--nav-inset);
}
/* Desktop: witte pill sluit om de content (logo + menu); winkelmand los ernaast */
.nav__bar {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: var(--space-3) var(--space-6);
  background: var(--color-surface);
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(15, 26, 46, 0.1);
}
.nav__right {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.nav__logo { flex-shrink: 0; display: inline-flex; align-items: center; }
/* Logo op HOOGTE geschaald: breedte volgt automatisch, balk groeit niet mee.
   !important overschrijft WooCommerce's `.woocommerce img { height:auto }` op shop-pagina's. */
.nav__logo-img {
  display: block;
  height: clamp(40px, 3.4vw, 46px) !important;
  width: auto !important;
  max-height: 46px;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2vw, 2rem);
}
.nav__link {
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-ink);
  white-space: nowrap;
  transition: color var(--duration) var(--ease-out),
              background var(--duration) var(--ease-out);
}
.nav__link:hover { color: var(--color-accent); }
/* Actieve pagina — gevulde navy pill (alleen dit item krijgt padding) */
.nav__link--active,
.nav__link--active:hover {
  padding: var(--space-2) var(--space-5);
  border-radius: 999px;
  background: var(--color-navy);
  color: var(--color-cream);
}

.nav__cart {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: var(--color-navy);
  color: var(--color-cream);
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(15, 26, 46, 0.18);
  transition: transform var(--duration) var(--ease-out), background var(--duration) var(--ease-out);
}
.nav__cart:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--color-navy) 84%, black); }

/* Menuknop — naast het logo, alleen zichtbaar op mobiel (zie media query) */
.nav__toggle {
  display: none;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--color-navy);
  cursor: pointer;
}
.nav__toggle-bars { display: grid; gap: 5px; width: 22px; }
.nav__toggle-bars span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--duration) var(--ease-out), opacity var(--duration) var(--ease-out);
}
.nav__toggle.is-active .nav__toggle-bars span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle.is-active .nav__toggle-bars span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Overlay-menu (mobiel) — onder de zwevende nav-pill zodat de knop klikbaar blijft */
.navmenu {
  position: fixed;
  inset: 0;
  z-index: 95;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}
.navmenu.is-open { opacity: 1; visibility: visible; }
.navmenu__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: calc(var(--nav-inset) + 5.5rem) var(--edge) var(--section-y);
  background: var(--color-navy);
  transform: translateY(-14px);
  transition: transform 0.45s var(--ease-out);
}
.navmenu.is-open .navmenu__panel { transform: translateY(0); }
.navmenu__list { display: flex; flex-direction: column; gap: 0; }
.navmenu__list li { padding: clamp(0.85rem, 3.4vw, 1.4rem) 0; border-bottom: 1px solid rgba(244, 238, 226, 0.16); }
.navmenu__list li:first-child { padding-top: 0; }
.navmenu__list li:last-child { border-bottom: none; }
.navmenu__link {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 7.5vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-cream);
  transition: color var(--duration) var(--ease-out);
}
.navmenu__link.is-current { color: var(--color-steel); font-style: italic; }
.navmenu__link:active { color: var(--color-steel); }

/* ============================================================
   Hero (scroll-driven) — design 1
============================================================ */
.hero { position: relative; height: 420vh; }
.hero__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }

/* Papier + noise op de hero-achtergrond (achter het fornuis, onder de tekst) */
.hero__pin::before,
.hero__pin::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero__pin::before {
  background-image: url("../img/misc/texture.webp");
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply;
  opacity: 0.18;
}
.hero__pin::after {
  background-image: url("../img/misc/noise.gif");
  background-repeat: repeat;
  opacity: 0.035;
}
/* Tekst + kaarten boven canvas en overlays houden */
.hero__content,
.hero__aside,
.sample-card { z-index: 2; }

.hero__content {
  position: absolute;
  top: calc(clamp(8rem, 18vh, 13rem) + 32px);
  left: 0;
  right: 0;
  max-width: min(1040px, 94vw);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding-inline: var(--container-padding);
  text-align: center;
  pointer-events: none;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.2vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-wrap: balance;
}
.hero__line { display: block; }
.hero__line--accent { font-style: italic; color: var(--color-accent); }

.hero__aside {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: max(var(--container-padding), calc((100vw - var(--hero-max)) / 2));
  max-width: min(42vw, 560px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  text-align: left;
  opacity: 0;
  pointer-events: none;
}
.hero__aside-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.875rem, 3vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.hero__aside-text { font-size: var(--text-base); line-height: 1.6; color: var(--color-ink-muted); }

/* USP-lijst */
.usp-list { display: flex; flex-direction: column; gap: var(--space-3); }
.usp-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-ink);
}
.usp-list__check { flex-shrink: 0; color: var(--color-accent); }

.hero__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  pointer-events: auto;
}

/* ============================================================
   Buttons (rond)
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: transform var(--duration) var(--ease-out),
              background var(--duration) var(--ease-out),
              color var(--duration) var(--ease-out);
}
.btn--primary {
  padding: var(--space-4) var(--space-6);
  background: var(--color-navy);
  color: var(--color-cream);
}
.btn--primary:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--color-navy) 84%, black);
}
.btn--round {
  width: 52px;
  height: 52px;
  background: var(--color-surface);
  color: var(--color-navy);
  border: 1px solid var(--color-line);
}
.btn--round:hover { transform: translateY(-2px); }
.btn--pill-sm {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: 0 6px 24px rgba(15, 26, 46, 0.14);
}
.btn--pill-sm:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.btn__icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--color-navy);
  color: var(--color-cream);
}

/* ============================================================
   Floating: merken-kaart (linksonder)
============================================================ */
.sample-card {
  position: absolute;
  left: var(--nav-inset);
  bottom: var(--nav-inset);
  width: clamp(230px, 22vw, 290px);
}
.sample-card__thumb {
  display: flex;
  align-items: flex-end;
  height: 175px;
  padding: var(--space-4);
  padding-bottom: var(--space-6);
  border-radius: 18px;
  background-image:
    linear-gradient(to top, rgba(15, 26, 46, 0.9), rgba(15, 26, 46, 0.22) 65%),
    url("../img/misc/merken.webp");
  background-size: cover;
  background-position: center;
  color: var(--color-cream);
}
.sample-card__title { font-size: var(--text-base); font-weight: 600; line-height: 1.2; max-width: 75%; }
.sample-card .btn--pill-sm {
  position: relative;
  width: 100%;
  margin-top: calc(var(--space-5) * -1);
  padding-left: var(--space-5);
  justify-content: space-between;
}

/* ============================================================
   Zwevende WhatsApp-knop
============================================================ */
.whatsapp {
  position: fixed;
  right: var(--nav-inset);
  bottom: var(--nav-inset);
  z-index: 150;
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: #25d366;
  color: #0b3d1f;
  box-shadow: 0 10px 30px rgba(15, 26, 46, 0.28);
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
.whatsapp:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(15, 26, 46, 0.34); }
.whatsapp:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 3px; }
.whatsapp__icon { display: block; }

/* ============================================================
   Atelier — hologram: scroll-driven canvas + wisselende tekst
============================================================ */
.atelier { position: relative; background: var(--color-navy-deep); }
.atelier__pin { position: relative; height: 100vh; overflow: hidden; }
/* Stage vult op desktop het hele pin-vlak (full-bleed); mobiel wordt het een
   vierkant met het bijschrift eroverheen (zie media query). */
.atelier__stage { position: absolute; inset: 0; }
.atelier__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.atelier__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.7) 22%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 66%),
    linear-gradient(to top, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.75) 26%, rgba(0, 0, 0, 0.4) 52%, rgba(0, 0, 0, 0) 76%);
  pointer-events: none;
}

.atelier__intro {
  position: absolute;
  top: calc(clamp(2.5rem, 7vw, 5.5rem) + 144px); /* titel verder omlaag → 72px minder ruimte tot de stappen */
  left: 0;
  right: 0;
  z-index: 2; /* boven de stage/canvas, anders schildert die eroverheen */
  text-align: center;
  padding: 0 var(--edge);
}
.atelier__eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #9db4d6;
  margin-bottom: var(--space-4);
}
.atelier__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.1;
  color: var(--color-cream);
}
.atelier__title i { font-style: italic; color: #9db4d6; }

.atelier__captions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(clamp(3rem, 8vw, 6rem) + 72px); /* 72px omhoog → kleinere tussenruimte */
  padding: 0 var(--edge);
  text-align: center;
  min-height: 8rem;
}
.atelier__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0 var(--edge);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  pointer-events: none;
}
.atelier__caption.is-active { opacity: 1; transform: translateY(0); }
.atelier__caption-num {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #9db4d6;
  margin-bottom: var(--space-4);
}
.atelier__caption-text {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.9375rem; /* normale tekst, 15px */
  line-height: 1.6;
  color: var(--color-cream);
  max-width: 42ch;
  margin: 0 auto;
}

/* ============================================================
   Types — sticky duo: soorten fornuizen
============================================================ */
.types { position: relative; background: var(--color-bg); }
.types__pin { position: sticky; top: 0; height: 100vh; z-index: 1; }
.types__inner { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }

.types__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 6vw, 6rem);
}
.types__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.types__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.4vw, 3.75rem);
  line-height: 1.08;
  color: var(--color-ink);
  max-width: 16ch;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.types__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-line);
  font-family: var(--font-ui);
  color: var(--color-ink);
  opacity: 0.4;
  transition: opacity var(--duration) var(--ease-out);
}
.types__item:last-child { border-bottom: 1px solid var(--color-line); }
.types__item.is-active { opacity: 1; }
.types__item-num {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  min-width: 1.75rem;
  color: var(--color-accent);
}
.types__item-label { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }

.types__right { position: relative; background: var(--color-navy-deep); overflow: hidden; }
.types__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.7s var(--ease-out);
  pointer-events: none;
}
.types__panel.is-active { opacity: 1; pointer-events: auto; }
.types__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.types__caption {
  position: relative;
  z-index: 1;
  padding: clamp(2rem, 5vw, 4.5rem);
  background: linear-gradient(to top, rgba(15, 26, 46, 0.92) 20%, rgba(15, 26, 46, 0) 100%);
}
.types__caption-title {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-surface);
  margin-bottom: var(--space-3);
}
.types__caption-text {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.65;
  color: rgba(244, 238, 226, 0.66);
  max-width: 46ch;
}

.types__track { position: relative; margin-top: -100vh; }
.types__marker { height: 100vh; }

/* Mini-nav onder de kop (alleen mobiel zichtbaar) */
.types__nav { display: none; }
.types__progress { position: relative; height: 3px; background: var(--color-line); border-radius: 999px; overflow: hidden; }
.types__progress-bar { position: absolute; top: 0; bottom: 0; left: 0; min-width: 12%; background: rgba(22, 36, 63, 0.5); border-radius: 999px; }
.types--dark .types__progress { background: rgba(244, 238, 226, 0.2); }
.types--dark .types__progress-bar { background: var(--color-cream); }

/* ============================================================
   Collectie — full-bleed productstrip
============================================================ */
.collectie { background: var(--color-surface); padding: var(--section-y) 0; overflow: hidden; }
.collectie__head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
  padding: 0 var(--edge);
}
.collectie__eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.collectie__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.05;
  color: var(--color-ink);
}

.collectie__track {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: 0 var(--container-padding);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.collectie__track::-webkit-scrollbar { display: none; }
.collectie__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.collectie__track.is-dragging .prod,
.collectie__track.is-dragging .pcard { pointer-events: none; }

/* Nav onder de strip: vorige/volgende + voortgangsindicator */
.collectie__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 0 var(--container-padding);
}
.collectie__nav-btn {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid var(--color-line);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out), opacity var(--duration) var(--ease-out);
}
.collectie__nav-btn:hover { background: var(--color-navy); color: var(--color-cream); border-color: var(--color-navy); }
.collectie__nav-btn:disabled { opacity: 0.3; cursor: default; }
.collectie__progress {
  position: relative;
  width: clamp(120px, 30vw, 220px);
  height: 3px;
  background: var(--color-line);
  border-radius: 999px;
  overflow: hidden;
}
.collectie__progress-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  min-width: 12%;
  background: var(--color-navy);
  border-radius: 999px;
}

.prod {
  flex: 0 0 auto;
  width: clamp(240px, 24vw, 340px);
  scroll-snap-align: start;
  color: inherit;
}
.prod__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  background: #fff;
  overflow: hidden;
  border-radius: 4px;
}
.prod__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration) var(--ease-out); }
.prod:hover .prod__thumb img { transform: scale(1.04); }

.prod__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink);
}

/* Product-CTA — "Bekijk product", subtiel, versterkt op hover */
.prod__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  justify-content: center;
  margin-top: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  transition: color var(--duration) var(--ease-out);
}
.prod__cta-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--color-navy);
  color: var(--color-cream);
  transition: transform var(--duration) var(--ease-out);
}
.prod:hover .prod__cta { color: var(--color-navy); }
.prod:hover .prod__cta-icon { transform: translate(2px, -2px); }

/* ============================================================
   FAQ — twee kolommen: intro links, accordion rechts
============================================================ */
.faq { background: var(--color-bg); padding: var(--section-y) 0; }
.faq__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: var(--hero-max);
  margin: 0 auto;
  padding: 0 var(--edge);
}

.faq__eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.faq__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.08;
  color: var(--color-ink);
}
.faq__title i { font-style: italic; color: var(--color-accent); }

.faq__list { display: flex; flex-direction: column; }
.faq__item { border-top: 1px solid var(--color-line); }
.faq__item:last-child { border-bottom: 1px solid var(--color-line); }

.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink);
  transition: color var(--duration) var(--ease-out);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--color-accent); }

/* Plus/minus marker */
.faq__marker { position: relative; flex-shrink: 0; width: 16px; height: 16px; }
.faq__marker::before,
.faq__marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--color-accent);
  transform: translate(-50%, -50%);
}
.faq__marker::before { width: 16px; height: 2px; }
.faq__marker::after { width: 2px; height: 16px; transition: transform var(--duration) var(--ease-out); }
.faq__item[open] .faq__marker::after { transform: translate(-50%, -50%) scaleY(0); }

.faq__a { padding: 0 0 var(--space-5); }
.faq__a p {
  margin: 0;
  max-width: 58ch;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-ink-muted);
}

/* ============================================================
   CTA — navy band naar de shop
============================================================ */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-navy);
  color: var(--color-cream);
  padding: var(--section-y) var(--edge);
  text-align: center;
}
/* Achtergrondvideo */
.cta__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.cta::before,
.cta::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* Contrast-check CTA: crème tekst op navy-scrim rgba(15,26,46,0.72) over video → ratio ≥ 6:1 ✓ */
.cta::before {
  background: linear-gradient(rgba(15, 26, 46, 0.72), rgba(15, 26, 46, 0.78));
}
.cta::after {
  background-image: url("../img/misc/noise.gif");
  background-repeat: repeat;
  opacity: 0.035;
}

.cta__inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.cta__eyebrow {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #9db4d6;
  margin-bottom: var(--space-4);
}
.cta__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--color-cream);
}
.cta__title i { font-style: italic; color: #9db4d6; }
.cta__text {
  margin: var(--space-5) auto 0;
  max-width: 46ch;
  font-size: var(--text-lg);
  line-height: 1.7;
  color: rgba(244, 238, 226, 0.72);
}
.cta__btn { margin-top: var(--space-6); }

.btn--light {
  padding: var(--space-4) var(--space-6);
  background: var(--color-cream);
  color: var(--color-navy);
}
.btn--light:hover { transform: translateY(-2px); background: #fff; }

/* ============================================================
   Footer
============================================================ */
.footer {
  background: var(--color-navy-deep);
  color: var(--color-cream);
  padding: var(--section-y) var(--edge) var(--space-6);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid rgba(244, 238, 226, 0.14);
}
.footer__brand { display: inline-flex; flex-direction: column; gap: var(--space-2); }
.footer__name { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; }
.footer__logo { display: inline-flex; }
.footer__logo-img { display: block; height: clamp(64px, 9vw, 84px) !important; width: auto !important; max-height: 84px; }
.footer__sub {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244, 238, 226, 0.7);
}
.footer__sub i { height: 1px; width: 18px; background: rgba(244, 238, 226, 0.4); }
.footer__contact { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.footer__link {
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: rgba(244, 238, 226, 0.86);
  transition: color var(--duration) var(--ease-out);
}
.footer__link:hover { color: var(--color-cream); }
.footer__note {
  margin: var(--space-5) 0 0;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: rgba(244, 238, 226, 0.5);
}

/* ============================================================
   Over ons — design 3-hero layout, navy + papier + noise
============================================================ */
.overons {
  position: relative;
  isolation: isolate;
  background: var(--color-navy);
  color: var(--color-cream);
  overflow: hidden;
}
/* Papier-textuur (soft-light zodat de grain op navy leesbaar blijft) */
.overons::before,
.overons::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.overons::before {
  background-image: url("../img/misc/texture.webp");
  background-size: cover;
  background-position: center;
  mix-blend-mode: soft-light;
  opacity: 0.28;
}
/* Animated film grain / noise */
.overons::after {
  background-image: url("../img/misc/noise.gif");
  background-repeat: repeat;
  opacity: 0.035;
}

.overons__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 22vw 1fr 26vw;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  padding: var(--section-y) var(--edge);
}

.overons__media { overflow: hidden; border-radius: 4px; }
.overons__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.overons__media--left { height: 60vh; }
/* Rechterfoto iets hoger geplaatst dan de linker (versprongen ritme) */
.overons__media--right { height: 68vh; transform: translateY(-3.5rem); }

.overons__content { padding-inline: clamp(1rem, 1.5vw, 1.5rem); max-width: 720px; }
.overons__eyebrow {
  display: block;
  font-size: var(--text-sm);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #9db4d6;
  margin-bottom: var(--space-4);
}
.overons__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--color-cream);
}
.overons__title i { font-style: italic; color: #9db4d6; }
.overons__text {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  line-height: 1.75;
  color: rgba(244, 238, 226, 0.72);
  max-width: 52ch;
}
.overons__text + .overons__text { margin-top: var(--space-5); }

/* Merkverhaal — lijst met gouden vinkjes (mix van tekst + bullets) */
.overons__checks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
  max-width: 52ch;
}
.overons__text + .overons__checks { margin-top: var(--space-5); }
.overons__check-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: rgba(244, 238, 226, 0.85);
}
.overons__check { flex-shrink: 0; color: var(--color-gold); margin-top: 0.15em; }

/* Reveal-startstaat (GSAP animeert in; fallback toont alles) */
[data-overons-reveal] { opacity: 0; }
.no-gsap [data-overons-reveal] { opacity: 1; }

/* ============================================================
   Ons verhaal — hero: scroll-driven image sequence (concept 2)
============================================================ */
.vhero-scroll { position: relative; height: 320vh; }
.vhero {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: var(--color-navy-deep);
  color: var(--color-cream);
}
.vhero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vhero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 40%, rgba(15, 26, 46, 0.12) 40%, rgba(15, 26, 46, 0.62) 100%),
    linear-gradient(to bottom, rgba(15, 26, 46, 0.62), rgba(15, 26, 46, 0.2) 30%, rgba(15, 26, 46, 0.8));
}

.vhero__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-inset) + 5rem) var(--edge) var(--space-8);
}
.vhero__headline { margin: auto; width: 100%; text-align: center; }
.vhero__eyebrow {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-steel);
  margin-bottom: var(--space-4);
}
.vhero__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(3rem, 12vw, 10rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--color-cream);
}
.vhero__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 5rem);
}
/* Captions — normale tekst op één regel */
.vhero__caption {
  flex: 1 1 0;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-cream-muted);
  white-space: nowrap;
}
.vhero__caption--left { text-align: right; }
.vhero__caption--right { text-align: left; }
.vhero__intro {
  max-width: 52ch;
  margin: 0 auto;
  text-align: center;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-cream-muted);
}

/* Fase 2 (scroll) */
.vhero__phase2 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--edge);
  text-align: center;
  opacity: 0;             /* JS stuurt opacity op scroll-progress */
  pointer-events: none;
}
.vhero__phase2 .vhero__eyebrow { margin-bottom: 0; }
.vhero__phase2 .btn { margin-top: var(--space-4); }
.vhero__phase2-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--color-cream);
}
.vhero__accent { font-style: italic; color: var(--color-steel); }

/* Reveal — staggered fade-up bij load (CSS, geen GSAP nodig) */
.reveal { opacity: 0; transform: translateY(24px); animation: vRevealUp 0.9s var(--ease-out) var(--d, 0s) forwards; }
@keyframes vRevealUp { to { opacity: 1; transform: none; } }

/* ============================================================
   Ons verhaal — intro (gecentreerd + zwevende foto's + highlight)
============================================================ */
.vintro {
  position: relative;
  background: var(--color-bg);
  color: var(--color-ink);
  padding: clamp(6rem, 13vw, 11rem) var(--edge);
  overflow: hidden;
}
.vintro__content { max-width: 640px; margin: 0 auto; text-align: center; }
.vintro__content [data-vintro-fade] { opacity: 0; transform: translateY(28px); }
.no-gsap .vintro__content [data-vintro-fade] { opacity: 1; transform: none; }

.vintro__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.14;
  letter-spacing: 0.01em;
  color: var(--color-ink);
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.vintro__title-line { display: block; }
.vintro__title-line--italic { font-style: italic; color: var(--color-accent); }
.vintro__title .word { display: inline-block; white-space: nowrap; }
.vintro__title .char { display: inline-block; }

.vintro__text {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--color-ink-muted);
}
.vintro__text + .vintro__text { margin-top: var(--space-5); }
.vintro__btn { margin-top: clamp(2rem, 4vw, 3rem); }

/* Zwevende foto's */
.vintro__media {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  clip-path: inset(100% 0 0 0);
}
.no-gsap .vintro__media { clip-path: none; }
.vintro__media--left {
  top: clamp(2rem, 5vw, 4rem);
  left: clamp(1.5rem, 5vw, 5rem);
  width: clamp(180px, 15vw, 300px);
  aspect-ratio: 3 / 4;
}
.vintro__media--right {
  bottom: clamp(2rem, 5vw, 4rem);
  right: clamp(1.5rem, 5vw, 5rem);
  width: clamp(200px, 16vw, 320px);
  aspect-ratio: 1 / 1;
}
.vintro__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.12);
}
.no-gsap .vintro__img { transform: none; }

/* ============================================================
   Ons verhaal — sticky story: foto links, tekst rechts, wisselt
============================================================ */
.story { position: relative; background: var(--color-navy-deep); color: var(--color-cream); }
.story__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  z-index: 1;
}
.story__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  width: 100%;
  max-width: var(--hero-max);
  margin: 0 auto;
  padding: 0 var(--edge);
}

.story__visual {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin-left: auto;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
}
.story__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s var(--ease-out);
}
.story__img.is-active { opacity: 1; }

.story__text { position: relative; min-height: clamp(11rem, 26vh, 15rem); }
.story__item {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  pointer-events: none;
}
.story__item.is-active { opacity: 1; transform: none; pointer-events: auto; }
.story__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-steel);
}
.story__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.06;
  color: var(--color-cream);
}
.story__heading i { font-style: italic; color: var(--color-steel); }
.story__body {
  margin: 0;
  max-width: 42ch;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-cream-muted);
}

.story__track { position: relative; margin-top: -100vh; }
.story__marker { height: 100vh; }

/* ============================================================
   Contact — hero (~50vh)
============================================================ */
.chero {
  position: relative;
  height: 52vh;
  min-height: 340px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--color-navy-deep);
  color: var(--color-cream);
}
.chero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.chero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15, 26, 46, 0.55), rgba(15, 26, 46, 0.32) 40%, rgba(15, 26, 46, 0.85));
}
.chero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--hero-max);
  margin: 0 auto;
  padding: 0 var(--edge) clamp(2.5rem, 6vw, 4.5rem);
}
.chero__eyebrow {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-steel);
  margin-bottom: var(--space-4);
}
.chero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--color-cream);
}

/* ============================================================
   Contact — formulier (navy paneel)
============================================================ */
.cform { background: var(--color-bg); padding: var(--section-y) var(--edge); }
.cform__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: var(--hero-max);
  margin: 0 auto;
  background: var(--color-navy);
  color: var(--color-cream);
  border-radius: 6px;
  padding: clamp(2.5rem, 5vw, 4.5rem);
}
.cform__panel::before,
.cform__panel::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cform__panel::before {
  background-image: url("../img/misc/texture.webp");
  background-size: cover;
  background-position: center;
  mix-blend-mode: soft-light;
  opacity: 0.28;
}
.cform__panel::after {
  background-image: url("../img/misc/noise.gif");
  background-repeat: repeat;
  opacity: 0.035;
}

.cform__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
}
.cform__label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-cream-muted);
  margin-bottom: var(--space-5);
}
.cform__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-cream);
}
.cform__title i { font-style: italic; color: var(--color-steel); }
.cform__text {
  margin-top: var(--space-5);
  max-width: 42ch;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-cream-muted);
}
.cform__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(244, 238, 226, 0.16);
}
.cform__meta-label {
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 238, 226, 0.55);
}
.cform__meta-value { font-size: var(--text-sm); color: var(--color-cream); }

.cform__form { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.25rem); }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.25rem); }

.field { display: grid; gap: var(--space-3); }
.field__label {
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 238, 226, 0.55);
}
.field input,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(244, 238, 226, 0.25);
  padding: var(--space-2) 0;
  color: var(--color-cream);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  outline: none;
  transition: border-color var(--duration) var(--ease-out);
}
.field input:focus,
.field textarea:focus { border-color: var(--color-cream); }
.field textarea { min-height: 5.5rem; resize: vertical; }

.cform__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-2);
}
.cform__send {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-cream);
}
.cform__send-arrow { transition: transform var(--duration) var(--ease-out); }
.cform__send:hover .cform__send-arrow { transform: translateX(4px); }
.cform__note { font-size: var(--text-xs); color: rgba(244, 238, 226, 0.55); }

.cform__foot {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(244, 238, 226, 0.16);
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 238, 226, 0.5);
}

/* ============================================================
   Contact — gegevens met iconen
============================================================ */
.cinfo { background: var(--color-bg); padding: 0 var(--edge) var(--section-y); }
.cinfo__head { max-width: var(--hero-max); margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.cinfo__eyebrow {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.cinfo__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.06;
  color: var(--color-ink);
  max-width: 20ch;
}
.cinfo__title i { font-style: italic; color: var(--color-accent); }

.cinfo__grid {
  max-width: var(--hero-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.cinfo__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 6px;
  color: var(--color-ink);
  transition: transform var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
a.cinfo__item:hover { transform: translateY(-3px); border-color: var(--color-accent); }
.cinfo__icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--color-navy);
  color: var(--color-cream);
  margin-bottom: var(--space-2);
}
.cinfo__label {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.cinfo__value { font-size: var(--text-base); font-weight: 600; color: var(--color-ink); }

/* ============================================================
   Ons verhaal — horizontale galerij (GSAP ScrollTrigger)
============================================================ */
.hgallery { position: relative; background: var(--color-bg); overflow: hidden; }
.hgallery__head {
  flex: 0 0 auto;
  width: 100%;
  max-width: var(--hero-max);
  margin: 0 auto;
  padding: 0 var(--edge);
}
.hgallery__eyebrow {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.hgallery__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.06;
  color: var(--color-ink);
}
.hgallery__title i { font-style: italic; color: var(--color-accent); }

.hgallery__wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2rem, 5vh, 4rem);
  overflow: hidden;
}
.hgallery__strip {
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
  padding-inline: var(--edge);
}
.hgallery__item {
  flex: 0 0 auto;
  width: min(34vw, 440px);
  margin-right: clamp(1.5rem, 3vw, 3rem);
}
.hgallery__thumb {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-surface);
}
.hgallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hgallery__cap { margin-top: var(--space-4); }
.hgallery__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.1;
  color: var(--color-ink);
}
.hgallery__text {
  display: block;
  margin-top: var(--space-2);
  max-width: 34ch;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink-muted);
}
.hgallery__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  transition: color var(--duration) var(--ease-out);
}
.hgallery__cta-arrow { transition: transform var(--duration) var(--ease-out); }
.hgallery__cta:hover { color: var(--color-navy); }
.hgallery__cta:hover .hgallery__cta-arrow { transform: translateX(3px); }

/* ============================================================
   Werkwijze — hero (scroll-driven sequence; hergebruikt .vhero)
============================================================ */
.vhero--wz .vhero__title {
  font-style: normal;
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  line-height: 1.04;
  max-width: 20ch;
  margin-inline: auto;
}
.vhero--wz .vhero__title i { font-style: italic; color: var(--color-steel); }

/* Herkomst-sectie — navy variant */
.types--dark { background: var(--color-navy-deep); }
.types--dark .types__eyebrow { color: var(--color-steel); }
.types--dark .types__heading { color: var(--color-cream); }
.types--dark .types__heading i { color: var(--color-steel); }
.types--dark .types__item { color: var(--color-cream); border-top-color: rgba(244, 238, 226, 0.16); }
.types--dark .types__item:last-child { border-bottom-color: rgba(244, 238, 226, 0.16); }
.types--dark .types__item-num { color: var(--color-steel); }

/* ============================================================
   Fornuizen — collectiepagina (tabs + grid)
============================================================ */
.shop { background: var(--color-bg); padding: var(--section-y) var(--edge); }
.shop__inner { max-width: var(--hero-max); margin: 0 auto; }

/* Merk-tabs */
.shop__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-line);
}
.shop__tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0 0 var(--space-3);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  transition: color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.shop__tab:hover { color: var(--color-ink); }
.shop__tab.is-active { color: var(--color-ink); border-bottom-color: var(--color-gold); }
.shop__tab:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

/* Productgrid */
.shop__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.pcard { display: flex; flex-direction: column; color: inherit; }
.pcard.is-hidden { display: none; }
.pcard__thumb {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
}
.pcard__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration) var(--ease-out); }
.pcard:hover .pcard__thumb img { transform: scale(1.04); }

.pcard__brand {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.pcard__name {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.1;
  color: var(--color-ink);
}
.pcard__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  transition: color var(--duration) var(--ease-out);
}
.pcard__cta-arrow { transition: transform var(--duration) var(--ease-out); }
.pcard:hover .pcard__cta { color: var(--color-navy); }
.pcard:hover .pcard__cta-arrow { transform: translateX(3px); }

/* ============================================================
   Product (PDP) — split: galerij links, details rechts
============================================================ */
.pdp {
  background: var(--color-bg);
  padding: clamp(6.5rem, 13vh, 8.5rem) 0 var(--section-y);
}
.pdp__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  max-width: var(--hero-max);
  margin: 0 auto;
  padding: 0 var(--edge);
}

/* Galerij */
.pdp__gallery { align-self: stretch; }
.pdp__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  background: #fff;
  overflow: hidden;
}
.pdp__main { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.pdp__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.5rem, 1.2vw, 0.85rem);
  margin-top: clamp(0.75rem, 1.5vw, 1rem);
}
.pdp__thumb {
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  transition: border-color var(--duration) var(--ease-out);
}
.pdp__thumb img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.pdp__thumb:hover { border-color: var(--color-accent); }
.pdp__thumb.is-active { border-color: var(--color-navy); }
.pdp__thumb:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Details-paneel — niet meer sticky (we hebben nu een vaste balk bovenaan) */
.pdp__panel {
  position: static;
  align-self: start;
  padding: 0;
}
.pdp__crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.pdp__crumbs a { transition: color var(--duration) var(--ease-out); }
.pdp__crumbs a:hover { color: var(--color-accent); }
.pdp__crumbs span[aria-hidden] { opacity: 0.5; }
.pdp__crumbs-current { color: var(--color-ink); }

.pdp__title {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-ink);
}
.pdp__sub {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-base);
  color: var(--color-ink-muted);
}

.pdp__pricing {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
.pdp__price {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.1;
  color: var(--color-ink);
}
.pdp__price-note { font-size: var(--text-sm); color: var(--color-ink-muted); }
.pdp__price-was {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(91, 104, 131, 0.6);
}

.pdp__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
}
.pdp__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #3f8f5b;
  box-shadow: 0 0 0 4px rgba(63, 143, 91, 0.14);
}

.pdp__desc {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-ink-muted);
}

.pdp__usps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
.pdp__usp {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-ink);
}
.pdp__usp-check { flex-shrink: 0; color: var(--color-accent); }

/* Reassurance-box */
.pdp__reassure {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 6px;
}
.pdp__reassure-label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}
.pdp__reassure-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-ink-muted);
}

/* Optie-rijen */
.pdp__options {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--color-line);
}
.pdp__option { border-bottom: 1px solid var(--color-line); }
.pdp__option-row {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  cursor: pointer;
}
.pdp__option-row::-webkit-details-marker { display: none; }
.pdp__option-head { display: flex; flex-direction: column; gap: var(--space-2); }
.pdp__option-title { font-size: var(--text-base); font-weight: 600; color: var(--color-ink); }
.pdp__option-value {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}
.pdp__option-icon { flex-shrink: 0; color: var(--color-accent); transition: transform var(--duration) var(--ease-out); }
.pdp__option[open] .pdp__option-icon { transform: rotate(90deg); }
.pdp__option-body { padding: 0 0 var(--space-5); }
.pdp__option-body p {
  margin: 0;
  max-width: 52ch;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-ink-muted);
}

/* Aantal + in winkelmand */
.pdp__buy {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.pdp__qty {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
}
.pdp__qty-btn {
  width: 34px;
  height: 34px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-ink);
  transition: color var(--duration) var(--ease-out);
}
.pdp__qty-btn:hover { color: var(--color-accent); }
.pdp__qty-btn:disabled { opacity: 0.35; cursor: default; }
.pdp__qty-value {
  min-width: 1.5rem;
  text-align: center;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
}
.pdp__add { flex: 1; }

/* Downloads */
.pdp__downloads {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.pdp__download {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  transition: border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}
.pdp__download:hover { border-color: var(--color-navy); color: var(--color-navy); }
.pdp__download-icon { display: inline-grid; place-items: center; color: var(--color-accent); }

/* Service-links */
.pdp__services {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--color-line);
}
.pdp__service {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  transition: color var(--duration) var(--ease-out);
}
.pdp__service:hover { color: var(--color-accent); }
.pdp__service-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--color-navy);
  color: var(--color-cream);
}
.pdp__ref {
  display: block;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* ============================================================
   Responsive
============================================================ */
@media (max-width: 860px) {
  /* Product — galerij boven details, mét bovenruimte zodat de foto niet onder de
     zwevende nav valt (anders oogt de uitlijning links/rechts scheef) */
  .pdp { padding-top: clamp(6.5rem, 16vw, 8rem); }
  .pdp__inner { grid-template-columns: 1fr; }
  .pdp__stage { position: static; top: auto; aspect-ratio: 4 / 5; }
  .pdp__panel { position: static; top: auto; max-width: none; padding: clamp(1.75rem, 6vw, 2.75rem) 0 0; }

  /* Mobiel: full-width balk (12px van de randen), logo links, cluster rechts */
  .nav { justify-content: stretch; gap: 0; padding-inline: 12px; }
  .nav__menu { display: none; }
  .nav__toggle { display: inline-grid; }
  .nav__bar { flex: 1; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) clamp(1.25rem, 3vw, 1.75rem); }
  /* Logo begrensd op hoogte, iets compactere cart → balk wordt kleiner, nooit hoger */
  .nav__logo-img { height: 38px !important; max-height: 38px; }
  .nav__cart { width: 44px; height: 44px; }

  .hero { height: 360vh; }
  .hero__content { top: clamp(7.5rem, 19vh, 11.5rem); }
  /* Aside boven verankerd; het fornuis staat er via de canvas-logica ONDER. */
  .hero__aside {
    top: clamp(7rem, 16vh, 10rem);
    bottom: auto;
    left: var(--container-padding);
    right: var(--container-padding);
    max-width: none;
    gap: var(--space-4);
  }
  .sample-card { display: none; }
  .topbar { justify-content: center; }
  .topbar__note { display: none; }

  /* Over ons — stapelen: één foto boven, tekst in het midden, één foto onder */
  .overons__inner { grid-template-columns: 1fr; min-height: 0; }
  .overons__media--left { display: block; height: 40vh; order: 0; margin-bottom: var(--space-6); }
  .overons__media--right { height: 40vh; order: 2; margin-top: var(--space-6); transform: none; }
  .overons__content { padding-inline: 0; order: 1; }

  /* Over ons — product-variant: tekst eerst, dan twee foto's naast elkaar eronder */
  .overons--below .overons__inner { grid-template-columns: 1fr 1fr; column-gap: var(--space-4); align-items: start; }
  .overons--below .overons__content { grid-column: 1 / -1; order: 0; }
  .overons--below .overons__media--left { order: 1; height: auto; aspect-ratio: 4 / 5; margin: var(--space-6) 0 0; }
  .overons--below .overons__media--right { order: 2; height: auto; aspect-ratio: 4 / 5; margin: var(--space-6) 0 0; }

  /* FAQ — stapelen */
  .faq__inner { grid-template-columns: 1fr; }

  /* Types/herkomst — mobiel: kop bovenin, mini-nav (voortgang), daaronder een
     foto-carousel (horizontaal swipen, tekst op de foto, peek van de volgende).
     De lijst verdwijnt. Desktop blijft ongewijzigd. */
  .types__pin { position: static; height: auto; }
  .types__track { display: none; }
  .types__inner { display: block; }
  .types__left {
    justify-content: flex-start;
    padding: clamp(2.5rem, 9vw, 3.5rem) var(--edge) var(--space-4);
  }
  .types__heading {
    font-size: clamp(2rem, 8vw, 2.75rem);
    max-width: none;
    margin-bottom: 0;
  }
  .types__list { display: none; }
  .types__nav { display: block; padding: 0 var(--edge); margin: 0 0 var(--space-5); }
  .types__right {
    display: flex;
    background: transparent;
    overflow: visible;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-3);
    padding: 0 var(--edge) var(--section-y);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .types__right::-webkit-scrollbar { display: none; }
  .types__panel {
    position: relative;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    flex: 0 0 86%;
    scroll-snap-align: start;
    aspect-ratio: 3 / 4;
    border-radius: 6px;
    overflow: hidden;
    transition: none;
  }
  .types__caption { padding: clamp(1.5rem, 5vw, 2rem); }
  .types__caption-title { font-size: clamp(1.4rem, 5vw, 1.75rem); }

  /* Atelier — beeld vult de hele sectie (cover, full-bleed) en blijft staan bij
     scrollen (gepind), net als desktop; titel boven + bijschrift onder eroverheen.
     Titel onder de nav-pill zetten en een sterkere scrim boven/onder zodat de
     tekst leesbaar op het beeld staat; het fornuis in het midden blijft helder. */
  .atelier__intro { top: clamp(7.5rem, 21vw, 9.5rem); }
  .atelier__captions { bottom: clamp(3rem, 8vw, 6rem); } /* mobiel: de 144px-krimp geldt alleen desktop */
  .atelier__scrim {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.65) 22%, rgba(0, 0, 0, 0) 58%),
      linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 28%, rgba(0, 0, 0, 0) 68%);
  }
  .atelier__caption-text {
    font-family: var(--font-ui);
    font-size: 0.75rem; /* 12px op mobiel */
    line-height: 1.5;
    max-width: none;
  }

  /* Ons verhaal — hero captions stapelen */
  .vhero__row { flex-direction: column; gap: var(--space-3); }
  .vhero__caption { max-width: none; text-align: center; }
  .vhero__caption--left, .vhero__caption--right { text-align: center; }

  /* Ons verhaal — horizontale galerij als gewone swipe-strip */
  .hgallery__wrapper { height: auto; justify-content: flex-start; gap: var(--space-6); padding: var(--section-y) 0; overflow: visible; }
  .hgallery__strip { transform: none !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .hgallery__strip::-webkit-scrollbar { display: none; }
  .hgallery__item { width: min(72vw, 320px); }

  /* Ons verhaal — story blijft sticky: foto boven (kleiner), tekst eronder,
     één stap tegelijk die wisselt bij scrollen (markers, net als de types-sectie). */
  .story__pin { flex-direction: column; justify-content: center; }
  .story__inner { grid-template-columns: 1fr; gap: clamp(3rem, 11vw, 4.5rem); max-width: 460px; }
  .story__visual { margin: 0 auto; max-width: none; width: 100%; aspect-ratio: 3 / 2; }
  .story__text { min-height: clamp(9.5rem, 26vh, 12.5rem); }

  /* Contact — stapelen */
  .cform__grid { grid-template-columns: 1fr; }
  .cform__row { grid-template-columns: 1fr; }
  .cinfo__grid { grid-template-columns: 1fr 1fr; }
}

/* Contact — iconen één kolom op klein scherm */
@media (max-width: 560px) {
  .cinfo__grid { grid-template-columns: 1fr; }
  .cform__foot { flex-direction: column; gap: var(--space-2); }

  /* Contact — icoon naast label + waarde i.p.v. erboven */
  .cinfo__item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-4);
    align-items: center;
  }
  .cinfo__icon { grid-row: 1 / 3; margin: 0; }
  .cinfo__label { grid-column: 2; align-self: end; }
  .cinfo__value { grid-column: 2; align-self: start; }

  /* Product — knop onder aantal, downloads vol */
  .pdp__buy { flex-wrap: wrap; }
  .pdp__add { flex: 1 1 100%; }
  .pdp__download { flex: 1 1 100%; justify-content: center; }
}

/* Fornuizen — grid schaalt mee */
@media (max-width: 1024px) { .shop__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .shop__grid { grid-template-columns: repeat(2, 1fr); } .shop__tabs { justify-content: flex-start; } }
@media (max-width: 460px)  { .shop__grid { grid-template-columns: 1fr; } }

/* Ons verhaal — zwevende foto's inline op smal scherm */
@media (max-width: 900px) {
  /* Ons verhaal — intro: tekst eerst, daaronder de twee foto's naast elkaar */
  .vintro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
  .vintro__content { grid-column: 1 / -1; order: -1; padding: 0 0 var(--space-6); }
  .vintro__media {
    position: relative;
    inset: auto;
    margin: 0;
    width: 100%;
    aspect-ratio: 4 / 5;
  }
  .vintro__media--left { order: 1; }
  .vintro__media--right { order: 2; aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Subheadings (eyebrows) — goud over de hele site
============================================================ */
.types__eyebrow,
.collectie__eyebrow,
.faq__eyebrow,
.cinfo__eyebrow,
.hgallery__eyebrow { color: var(--color-gold); }

.atelier__eyebrow,
.overons__eyebrow,
.cta__eyebrow,
.vhero__eyebrow,
.story__eyebrow,
.chero__eyebrow,
.vidhero__eyebrow,
.types--dark .types__eyebrow { color: var(--color-gold-light); }

/* ============================================================
   Subheadings & labels — normale letters i.p.v. hoofdletters
============================================================ */
.atelier__eyebrow,
.types__eyebrow,
.collectie__eyebrow,
.faq__eyebrow,
.cta__eyebrow,
.overons__eyebrow,
.vhero__eyebrow,
.story__eyebrow,
.chero__eyebrow,
.cinfo__eyebrow,
.hgallery__eyebrow,
.cinfo__label,
.cform__label,
.cform__meta-label,
.field__label {
  text-transform: none;
  letter-spacing: 0.01em;
}

/* Werkwijze — "Onze werkwijze" wit i.p.v. goud (leesbaar op donker) */
.vhero--wz .vhero__eyebrow,
.types--dark .types__eyebrow { color: var(--color-cream); }

/* Werkwijze — hero-intro iets groter */
.vhero--wz .vhero__intro { font-size: var(--text-lg); line-height: 1.7; }

/* ============================================================
   Bento-galerij (GSAP Flip) — werkwijze
============================================================ */
.bento { background: var(--color-navy-deep); }
.bento__wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bento__grid {
  position: relative;
  display: grid;
  gap: 1vh;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(3, 32.5vw);
  grid-template-rows: repeat(4, 23vh);
  justify-content: center;
  align-content: center;
}
.bento__grid.is-final {
  grid-template-columns: repeat(3, 100vw);
  grid-template-rows: repeat(4, 49.5vh);
}
.bento__item { position: relative; overflow: hidden; border-radius: 4px; }
.bento__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bento__item:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
.bento__item:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.bento__item:nth-child(3) { grid-area: 2 / 2 / 4 / 3; }
.bento__item:nth-child(4) { grid-area: 1 / 3 / 3 / 3; }
.bento__item:nth-child(5) { grid-area: 3 / 1 / 3 / 2; }
.bento__item:nth-child(6) { grid-area: 3 / 3 / 5 / 4; }
.bento__item:nth-child(7) { grid-area: 4 / 1 / 5 / 2; }
.bento__item:nth-child(8) { grid-area: 4 / 2 / 5 / 3; }

/* CTA — verschijnt als een foto volledig groot is */
.bento__cta {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--edge);
  text-align: center;
  opacity: 0;
  visibility: hidden;
}
/* Contrast-check bento-CTA: crème tekst op radiale navy-scrim (rgba 0.86 in het midden) → ratio ≥ 6:1 ✓ */
.bento__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(65% 65% at 50% 50%, rgba(15, 26, 46, 0.86), rgba(15, 26, 46, 0.4));
}
.bento__cta-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--color-gold-light);
}
.bento__cta-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1.08;
  color: var(--color-cream);
  max-width: 18ch;
}
.bento__cta-title i { font-style: italic; color: var(--color-steel); }

/* Fallback zonder GSAP: toon galerij en CTA gewoon */
.no-gsap .bento__wrap { height: auto; padding: var(--section-y) 0; }
.no-gsap .bento__cta { position: static; opacity: 1; visibility: visible; margin-top: var(--space-6); }
.no-gsap .bento__cta::before { display: none; }

/* Mobiel eindbeeld (verborgen op desktop) */
.bento__final { display: none; }

@media (max-width: 760px) {
  /* Bento mobiel: nette mini-mosaïek van álle foto's, gepind; scrollt naar
     1 foto fullscreen + CTA (zie werkwijze.js). */
  .bento__wrap { height: 100vh; padding: 0; }
  .bento__grid,
  .bento__grid.is-final {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: var(--space-2);
    width: 100%;
    height: 100%;
    padding: clamp(4.5rem, 14vw, 6rem) var(--edge) var(--space-6);
  }
  .bento__item { grid-area: auto !important; border-radius: 4px; }
  .bento__item img { border-radius: 4px; }
  .bento__final {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ============================================================
   WhatsApp-widget (los van de branding — normaal lettertype)
============================================================ */
.wa-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 160;
  display: inline-flex;
  align-items: center;
  height: 58px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.wa-fab__icon { display: grid; place-items: center; width: 58px; height: 58px; flex-shrink: 0; }
.wa-fab__label {
  max-width: 0;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 600;
  opacity: 0;
  transition: max-width 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
}
.wa-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3); }
.wa-fab:hover .wa-fab__label { max-width: 200px; opacity: 1; padding-right: 22px; }
.wa-fab:focus-visible { outline: 2px solid #0b3d1f; outline-offset: 3px; }
/* Op touch (geen hover) alleen het icoon tonen */
@media (hover: none) {
  .wa-fab:hover .wa-fab__label { max-width: 0; opacity: 0; padding-right: 0; }
}

/* ============================================================
   Reviews (gedeeld, op elke pagina)
============================================================ */
.reviews { background: var(--color-surface); padding: var(--section-y) var(--edge); }
.reviews__head { max-width: var(--hero-max); margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.reviews__eyebrow {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.01em;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}
.reviews__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.06;
  color: var(--color-ink);
}
.reviews__title i { font-style: italic; color: var(--color-accent); }
/* Reviews — nette swipe-carousel (horizontaal scrollen, snap per kaart) */
.reviews__marquee {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  /* Zachte fade aan de randen zodat kaarten niet hard afgekapt in/uit lopen */
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
/* Doorlopende marquee. Twee identieke .reviews__group-helften; de animatie
   schuift exact één helft op (-50%), zodat de lus naadloos is — net als de
   logo-marquee, maar de tussenruimte zit IN de group (gap + padding-right),
   nooit op de track. Anders zou -50% op een halve gap landen en zie je een
   sprong / een lege helft. */
.reviews__track {
  display: flex;
  width: max-content;
  padding-block: var(--space-2);
  animation: tv-reviews-marquee var(--rev-dur, 55s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.reviews__group {
  display: flex;
  flex-shrink: 0;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding-right: clamp(1rem, 2.5vw, 1.75rem);
}
.reviews__marquee:hover .reviews__track { animation-play-state: paused; }
@keyframes tv-reviews-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .reviews__track { animation: none; width: 100%; justify-content: center; }
  .reviews__group { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .reviews__group[aria-hidden] { display: none; }
}
.review-card {
  flex: 0 0 clamp(280px, 82vw, 380px);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: 8px;
}
@media (min-width: 760px) { .review-card { flex-basis: clamp(300px, 30vw, 360px); } }
.review-card__stars { color: #c9a227; letter-spacing: 0.15em; font-size: var(--text-base); }
.review-card__text { margin: 0; font-size: var(--text-base); line-height: 1.7; color: var(--color-ink); }
.review-card__author { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.review-card__avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--avatar, var(--color-navy));
  color: var(--color-cream);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}
.review-card__meta { display: flex; flex-direction: column; }
.review-card__name { font-weight: 600; color: var(--color-ink); }
.review-card__role { font-size: var(--text-sm); color: var(--color-ink-muted); }

/* Swipe-indicator (alleen mobiel zichtbaar) */
.reviews__dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: var(--hero-max);
  margin: var(--space-5) auto 0;
}
.reviews__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(22, 36, 63, 0.22);
  cursor: pointer;
  transition: width var(--duration) var(--ease-out), background var(--duration) var(--ease-out);
}
.reviews__dot.is-active { width: 22px; background: var(--color-accent); }
/* Dots verschijnen alleen als de rij daadwerkelijk overloopt (meer reviews dan passen) */
.reviews--scroll .reviews__dots { display: flex; }

/* ============================================================
   Footer — uitgebreid (kolommen + gegevens)
============================================================ */
.footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid rgba(244, 238, 226, 0.14);
}
.footer__brand-col { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__tagline {
  margin: var(--space-2) 0 0;
  max-width: 34ch;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: rgba(244, 238, 226, 0.6);
}
.footer__col { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__heading {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: var(--space-2);
}
.footer__col .footer__link,
.footer__link--static { font-size: var(--text-sm); line-height: 1.5; }
.footer__link--static { color: rgba(244, 238, 226, 0.6); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
}
.footer__bottom .footer__note { margin: 0; }
.footer__legal-links { display: flex; gap: var(--space-5); }
.footer__legal-links a {
  font-size: var(--text-xs);
  color: rgba(244, 238, 226, 0.6);
  transition: color var(--duration) var(--ease-out);
}
.footer__legal-links a:hover { color: var(--color-cream); }

@media (max-width: 860px) {
  /* Reviews — horizontaal swipen, kaarten lopen door tot de schermrand.
     Sectie full-bleed (geen zij-padding) zodat de peek-kaart niet met een gat
     wordt afgesneden; alleen de kop en de dots blijven ingesprongen. */
  .reviews { padding-inline: 0; }
  .reviews__head { padding-inline: var(--edge); }
  .reviews__dots { padding-inline: var(--edge); }
  .reviews__grid {
    grid-template-columns: none;
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--edge);
    padding: 0 var(--edge);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .reviews__grid::-webkit-scrollbar { display: none; }
  /* In de marquee (track = max-content) MOET de kaartbreedte een vaste maat zijn;
     een %-basis lost op tegen een indefinite breedte → kaarten klappen dicht en
     je ziet niets. Vandaar vw/px i.p.v. 80%. Beide helften blijven exact even
     breed, dus de -50%-lus blijft naadloos. */
  .review-card { flex: 0 0 clamp(260px, 80vw, 340px); }
}
@media (max-width: 760px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand-col { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Winkelmand — badge + toast
============================================================ */
.nav__cart { position: relative; }
.nav__cart-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-gold-light);
  color: var(--color-navy);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: clamp(5.5rem, 12vw, 6.5rem);
  transform: translateX(-50%) translateY(16px);
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--color-navy);
  color: var(--color-cream);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  box-shadow: 0 12px 34px rgba(15, 26, 46, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   Product — sticky winkelmand-balk
============================================================ */
.pdp-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: none;
  padding: var(--space-3) var(--edge) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  box-shadow: 0 -8px 30px rgba(15, 26, 46, 0.12);
  transform: translateY(130%);
  transition: transform 0.4s var(--ease-out);
}
@media (max-width: 860px) { body.single-product .pdp-sticky { display: block; } }
.pdp-sticky.is-visible { transform: translateY(0); }
/* Eén duidelijke, gecentreerde CTA met de prijs erin */
.pdp-sticky__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: var(--color-navy);
  color: var(--color-cream);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
}
.pdp-sticky__btn:active { transform: translateY(1px); }
.pdp-sticky__btn-price { font-weight: 700; opacity: 0.92; }
/* WhatsApp-knop wijkt uit als de balk zichtbaar is */
body.pdp-sticky-open .wa-fab { bottom: calc(clamp(1rem, 3vw, 1.75rem) + 4.75rem); }

/* ============================================================
   Blog — archief + detail
============================================================ */
.bloghead {
  background: var(--color-bg);
  padding: clamp(8rem, 18vw, 12rem) var(--edge) clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.bloghead__eyebrow {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.01em;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}
.bloghead__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.bloghead__title i { font-style: italic; color: var(--color-accent); }
.bloghead__intro {
  max-width: 52ch;
  margin: var(--space-5) auto 0;
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--color-ink-muted);
}

.blog { background: var(--color-bg); padding: clamp(1.75rem, 4vw, 2.75rem) var(--edge) clamp(2.5rem, 5vw, 4rem); }
.blog__grid {
  max-width: var(--hero-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  justify-items: stretch;
}
.blog__grid--single { grid-template-columns: repeat(4, 1fr); }

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  overflow: hidden;
  transition: transform var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.post-card:hover { transform: translateY(-4px); border-color: var(--color-accent); }
.post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease-out); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: clamp(1.5rem, 2.5vw, 2rem); }
.post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}
.post-card__cat { color: var(--color-gold); text-transform: uppercase; letter-spacing: 0.16em; }
.post-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.12;
  color: var(--color-ink);
}
.post-card__title a { color: inherit; }
.post-card__excerpt { font-size: var(--text-base); line-height: 1.65; color: var(--color-ink-muted); }
.post-card__cta {
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
}

/* Blog detail (single post) */
.article { background: var(--color-bg); }
.article__cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 clamp(1.5rem, 3vw, 2.25rem);
}
.article__wrap { max-width: 860px; margin: 0 auto; padding: clamp(9.5rem, 20vw, 12rem) var(--edge) var(--section-y); }
.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-4);
}
.article__cat { color: var(--color-gold); text-transform: uppercase; letter-spacing: 0.16em; font-size: var(--text-xs); }
.article__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}
.article__lead { font-size: var(--text-lg); line-height: 1.7; color: var(--color-ink); margin: 0 0 var(--space-6); }
.article__body > * + * { margin-top: var(--space-5); }
.article__body p { font-size: var(--text-lg); line-height: 1.8; color: var(--color-ink-muted); }
.article__body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.15;
  color: var(--color-ink);
  margin-top: var(--space-8);
}
.article__body i { font-style: italic; color: var(--color-accent); }
.article__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
}

@media (max-width: 1100px) { .blog__grid, .blog__grid--single { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .blog__grid, .blog__grid--single { grid-template-columns: 1fr; }
  .article__cover { aspect-ratio: 4 / 3; }
}

/* ============================================================
   Generieke pagina + WooCommerce (winkelmand/afrekenen/account)
============================================================ */
.page { background: var(--color-bg); }
.page__inner {
  max-width: var(--hero-max);
  margin: 0 auto;
  padding: clamp(9rem, 16vw, 12rem) var(--edge) var(--section-y);
}
.page__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}
.page__content { color: var(--color-ink); line-height: 1.7; }
.page__content a { color: var(--color-accent); }
.page__content .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
  background: var(--color-navy);
  color: var(--color-cream);
  border-radius: 999px;
  padding: 0.9em 1.8em;
  font-family: var(--font-ui);
  font-weight: 600;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: color-mix(in srgb, var(--color-navy) 84%, black); color: var(--color-cream); }
.woocommerce .button.alt, .woocommerce #respond input#submit.alt { background: var(--color-accent); }

/* Hero-koppen: cursief accent (zoals concept 4) */
.hero__title i, .hero__aside-title i { font-style: italic; color: var(--color-accent); }

/* WordPress-adminbalk: topbar + nav eronder schuiven (alleen ingelogd) */
body.admin-bar .topbar { top: 32px; }
body.admin-bar .nav { top: calc(var(--nav-inset) + 2.25rem + 32px); }
/* Mobiel: de WP-adminbalk is niet vast (scrolt mee), dus géén offset —
   anders blijft de topbalk 46px van boven zweven met content erboven. */
@media screen and (max-width: 782px) {
  body.admin-bar .topbar { top: 0; }
  body.admin-bar .nav { top: calc(var(--nav-inset) + 2.25rem); }
}

/* ============================================================
   Aanvullingen — revisie juli 2026 (België, WhatsApp, kaarten,
   waarom-sectie, PDP-uitbreidingen, garantie/werkwijze, etc.)
============================================================ */

/* --- WhatsApp-knop naast CTA's --- */
.btn--wa {
  padding: var(--space-4) var(--space-5);
  background: var(--color-gold);
  color: var(--color-cream);
}
.btn--wa:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--color-gold) 86%, black); }
.btn__wa-icon { display: inline-grid; place-items: center; }

/* --- Hero: prijsindicatie + klikbare USP's --- */
.hero__price {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin: 0;
}
.usp-list__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-ink);
  transition: color var(--duration) var(--ease-out);
}
.usp-list__link:hover { color: var(--color-accent); }

/* --- Over ons: gouden knop --- */
.overons__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-6);
  border-radius: 999px;
  background: var(--color-gold);
  color: var(--color-cream);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: transform var(--duration) var(--ease-out), background var(--duration) var(--ease-out);
}
.overons__link:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--color-gold) 86%, black); }

/* --- Atelier (werkwijze 01-04): gouden knop ONDER de stappen --- */
.atelier__cta {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vw, 2.5rem);
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-radius: 999px;
  background: var(--color-gold);
  color: var(--color-cream);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
  white-space: nowrap;
  transition: transform var(--duration) var(--ease-out), background var(--duration) var(--ease-out);
}
.atelier__cta:hover { transform: translateX(-50%) translateY(-2px); background: color-mix(in srgb, var(--color-gold) 86%, black); }

/* --- Gedeelde productkaart: prijs, nieuwprijs, labels, uitverkocht --- */
.pcard__thumb { position: relative; }
.pcard__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}
.pcard__badge--sold { background: var(--color-navy); color: var(--color-cream); }
.pcard--sold .pcard__thumb img { filter: grayscale(0.55); opacity: 0.82; }
.pcard__pricing { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-3); }
.pcard__price { font-family: var(--font-display); font-size: clamp(1.15rem, 1.7vw, 1.4rem); color: var(--color-ink); }
.pcard__was { font-size: var(--text-sm); color: var(--color-ink-muted); }

/* Kaarten in de homepage-strip krijgen een vaste breedte */
.collectie__track--cards .pcard {
  flex: 0 0 auto;
  width: clamp(240px, 24vw, 320px);
  scroll-snap-align: start;
}
/* Weinig producten? Centreer de strip. Bij overloop valt hij terug op
   de linkerrand (safe) zodat de eerste kaart nooit onbereikbaar wordt. */
.collectie__track--cards { justify-content: safe center; }

/* --- Fornuizen-pagina: intro, extra filters, lege staat --- */
.shop__intro {
  max-width: 760px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
  color: var(--color-ink-muted);
  line-height: 1.7;
}
.shop__filters {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.shop__filter { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.shop__filter-label {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-right: var(--space-2);
}
.shop__chip {
  border: 1px solid var(--color-line);
  background: transparent;
  border-radius: 999px;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  cursor: pointer;
  transition: color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), background var(--duration) var(--ease-out);
}
.shop__chip:hover { color: var(--color-ink); border-color: var(--color-ink-muted); }
.shop__chip.is-active { color: var(--color-cream); background: var(--color-navy); border-color: var(--color-navy); }
.shop__empty {
  margin-top: var(--space-6);
  text-align: center;
  color: var(--color-ink-muted);
}
.shop__empty a { color: var(--color-accent); border-bottom: 1px solid currentColor; }

/* --- Waarom bij Tweede Vlam --- */
.waarom { background: var(--color-surface); padding: var(--section-y) var(--edge); }
.waarom__inner { max-width: var(--hero-max); margin: 0 auto; }
.waarom__head { max-width: 720px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.waarom__eyebrow {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}
.waarom__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.waarom__title i { font-style: italic; color: var(--color-accent); }
.waarom__intro { margin-top: var(--space-4); color: var(--color-ink-muted); line-height: 1.7; }
/* Rechter kolom (Tweede Vlam) iets groter dan de linker */
.waarom__cols { display: grid; grid-template-columns: 1fr 1.18fr; gap: clamp(1.25rem, 3vw, 2rem); align-items: stretch; }
.waarom__col { border: 1px solid var(--color-line); border-radius: 10px; padding: clamp(1.5rem, 3vw, 2.5rem); }
.waarom__col--tv { background: var(--color-navy); color: var(--color-cream); border-color: transparent; padding: clamp(1.75rem, 3.5vw, 3rem); }
/* Linker titel in display-font, groter (geen caps-label meer) */
.waarom__col--part .waarom__col-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
/* Rechter titel = logo van Tweede Vlam */
.waarom__logo { display: block; height: clamp(46px, 6vw, 66px) !important; width: auto !important; max-height: 66px; margin-bottom: var(--space-2); }
.waarom__list { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); }
.waarom__item { display: flex; align-items: flex-start; gap: var(--space-3); line-height: 1.5; }
.waarom__icon { flex-shrink: 0; margin-top: 3px; }
.waarom__item--neg .waarom__icon { color: var(--color-ink-muted); }
.waarom__item--pos .waarom__icon { color: #1f8f4e; }
.waarom__col--tv .waarom__item--pos .waarom__icon { color: var(--color-steel); }
.waarom__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-weight: 600;
  color: var(--color-cream);
  border-bottom: 1px solid rgba(244, 238, 226, 0.4);
  padding-bottom: 2px;
}

/* --- PDP: USP-links, trust, specs, WhatsApp, reserveren, mini-FAQ --- */
.pdp__usp-link { display: flex; align-items: center; gap: var(--space-3); color: inherit; transition: color var(--duration) var(--ease-out); }
.pdp__usp-link:hover { color: var(--color-accent); }
.pdp__trust { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-ink-muted); }
.pdp__trust strong { color: var(--color-ink); }
.pdp__specs { width: 100%; border-collapse: collapse; }
.pdp__specs th, .pdp__specs td {
  text-align: left;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
  font-size: var(--text-sm);
  vertical-align: top;
}
.pdp__specs th { width: 42%; font-weight: 600; color: var(--color-ink-muted); }
.pdp__specs td { color: var(--color-ink); }
.pdp__wa { width: 100%; margin-top: var(--space-3); }
.btn--reserve {
  padding: var(--space-4) var(--space-6);
  background: transparent;
  color: var(--color-navy);
  border: 1.5px solid var(--color-navy);
}
.btn--reserve:hover { transform: translateY(-2px); background: var(--color-navy); color: var(--color-cream); }
.pdp__reserve-btn { width: 100%; margin-top: var(--space-3); }
.tv-reserveer-tag { color: var(--color-gold); font-weight: 600; white-space: nowrap; }
.pdp__reserve {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink-muted);
}
.pdp__reserve a { color: var(--color-accent); border-bottom: 1px solid currentColor; white-space: nowrap; }
.pdp__minifaq { margin-top: var(--space-6); display: flex; flex-direction: column; }
.pdp__mini { border-top: 1px solid var(--color-line); }
.pdp__mini:last-child { border-bottom: 1px solid var(--color-line); }
.pdp__mini summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-ink);
  list-style: none;
}
.pdp__mini summary::-webkit-details-marker { display: none; }
.pdp__mini-icon { position: relative; flex-shrink: 0; width: 14px; height: 14px; }
.pdp__mini-icon::before, .pdp__mini-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--color-accent);
}
.pdp__mini-icon::before { width: 14px; height: 2px; }
.pdp__mini-icon::after { width: 2px; height: 14px; transition: transform var(--duration) var(--ease-out); }
.pdp__mini[open] .pdp__mini-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.pdp__mini p { margin: 0 0 var(--space-4); color: var(--color-ink-muted); line-height: 1.6; }
.pdp__mini a { color: var(--color-accent); border-bottom: 1px solid currentColor; }

/* Mobiele sticky balk (prijs + WhatsApp) — alleen op productpagina/mobiel */
.pdp-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--edge);
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
}
.pdp-sticky__price { font-family: var(--font-display); font-size: 1.35rem; color: var(--color-ink); }
.pdp-sticky__wa {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  background: var(--color-gold);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
}

/* --- Ons verhaal: oprichter (Redwan) — sub-title + line, groot, twee foto's --- */
.founder { background: var(--color-bg); padding: var(--section-y) var(--edge); overflow: hidden; }
.founder__inner { max-width: var(--hero-max); margin: 0 auto; }
.founder__head { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.founder__sub { display: flex; align-items: center; gap: var(--space-5); margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.founder__sub-tags { flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; }
.founder__sub-tag {
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.founder__sub-tag--brand { color: var(--color-gold); }
.founder__line { flex: 1; height: 1px; background: var(--color-line); }
.founder__title {
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.founder__title i { font-style: italic; color: var(--color-accent); }
.founder__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
/* Twee foto's diagonaal versprongen (ref-stijl) */
.founder__media { position: relative; padding-bottom: clamp(2rem, 6vw, 5rem); }
.founder__img { position: relative; margin: 0; border-radius: 10px; overflow: hidden; }
.founder__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder__img--1 { width: 66%; aspect-ratio: 4 / 5; }
.founder__img--2 { width: 60%; aspect-ratio: 4 / 5; margin-left: auto; margin-top: -22%; position: relative; z-index: 2; box-shadow: -14px -14px 0 0 var(--color-bg); }
.founder__square { position: absolute; width: clamp(26px, 3.2vw, 40px); height: clamp(26px, 3.2vw, 40px); border: 1px solid var(--color-gold); border-radius: 3px; z-index: 3; }
.founder__square--a { top: -12px; left: -12px; }
.founder__square--b { bottom: 6px; right: -12px; border-color: var(--color-ink-muted); }
.founder__text { align-self: center; }
.founder__text .paragraph, .founder__text p { margin: 0 0 var(--space-5); color: var(--color-ink-muted); line-height: 1.8; }
.founder__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--color-ink);
}
.founder__btn-text { border-bottom: 1px solid var(--color-line); padding-bottom: 3px; transition: border-color var(--duration) var(--ease-out); }
.founder__btn:hover .founder__btn-text { border-color: var(--color-ink); }
.founder__btn-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--color-navy); color: var(--color-cream); transition: transform var(--duration) var(--ease-out); }
.founder__btn:hover .founder__btn-icon { transform: translate(2px, -2px); }
@media (max-width: 860px) {
  .founder__content { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
}

/* --- Werkwijze: restauratieproces — horizontaal scrollende kaarten --- */
.proces { background: var(--color-surface); }
.proces__scroll { position: relative; }
.proces__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2rem, 5vw, 3.5rem);
}
.proces__head {
  max-width: var(--hero-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--edge);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5) clamp(2rem, 5vw, 4rem);
}
.proces__eyebrow {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}
.proces__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.proces__title i { font-style: italic; color: var(--color-accent); }
.proces__intro { max-width: 40ch; margin: 0; color: var(--color-ink-muted); line-height: 1.7; }
.proces__viewport { overflow: hidden; }
.proces__track {
  display: flex;
  gap: clamp(1.5rem, 3vw, 2rem);
  padding: 20px var(--edge) 24px;
  will-change: transform;
}
.stepcard {
  position: relative;
  flex: 0 0 clamp(290px, 26vw, 380px);
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background-color: var(--color-navy-deep);
  background-size: cover;
  background-position: center;
  display: flex;
}
.stepcard__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 26, 46, 0.94) 0%, rgba(15, 26, 46, 0.58) 42%, rgba(15, 26, 46, 0.12) 100%);
}
.stepcard__pill {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  background: var(--color-gold);
  color: var(--color-cream);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  padding: 7px 16px;
  border-radius: 999px;
}
.stepcard__body { position: relative; z-index: 2; margin-top: auto; padding: clamp(1.5rem, 2.5vw, 2rem); display: flex; flex-direction: column; gap: var(--space-3); }
.stepcard__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.14;
  color: var(--color-cream);
}
.stepcard__text { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: rgba(244, 238, 226, 0.82); }

@media (max-width: 860px) {
  .proces__sticky { position: static; height: auto; padding: var(--section-y) 0; }
  .proces__viewport { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .proces__viewport::-webkit-scrollbar { display: none; }
  .proces__track { transform: none !important; scroll-snap-type: x mandatory; }
  .stepcard { scroll-snap-align: start; transform: none !important; }
}

/* --- Conditierapport-blok (werkwijze + garantie) --- */
.condrapport { background: var(--color-navy-deep); color: var(--color-cream); padding: var(--section-y) var(--edge); }
.condrapport__inner {
  max-width: var(--hero-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.condrapport__media { margin: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; }
.condrapport__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.condrapport__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #16243f, #223454); }
.condrapport__eyebrow {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-steel);
  margin-bottom: var(--space-4);
}
.condrapport__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.14;
  color: var(--color-cream);
}
.condrapport__title i { font-style: italic; color: var(--color-steel); }
.condrapport__text { margin: var(--space-4) 0 var(--space-6); color: rgba(244, 238, 226, 0.78); line-height: 1.7; }
.condrapport__link {
  display: inline-block;
  margin-top: var(--space-4);
  margin-left: var(--space-5);
  color: var(--color-steel);
  border-bottom: 1px solid currentColor;
}

/* --- Garantie & Levering-pagina --- */
.garantie { background: var(--color-bg); padding: var(--section-y) var(--edge); }
.garantie__inner { max-width: var(--hero-max); margin: 0 auto; }
.garantie__intro { max-width: 760px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; color: var(--color-ink-muted); line-height: 1.7; }
.garantie__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2rem); }
.garantie__block { border: 1px solid var(--color-line); border-radius: 10px; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--color-surface); }
.garantie__num {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--color-gold);
}
.garantie__block-title {
  margin: var(--space-3) 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.15;
  color: var(--color-ink);
}
.garantie__block-text { margin: 0; color: var(--color-ink-muted); line-height: 1.65; }
.garantie__rapport {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--color-line);
}
.garantie__rapport-media { margin: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; }
.garantie__rapport-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.garantie__rapport-placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #e6ddc9, #f3ecdd); }
.garantie__rapport-eyebrow {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}
.garantie__rapport-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.14;
  color: var(--color-ink);
}
.garantie__rapport-title i { font-style: italic; color: var(--color-accent); }
.garantie__rapport-text { margin: var(--space-4) 0 var(--space-6); color: var(--color-ink-muted); line-height: 1.7; }
.garantie__rapport-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* --- Contact: WhatsApp-primair --- */
.cform__wa {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: 10px;
  background: var(--color-gold);
  color: #fff;
}
.cform__wa-icon { display: inline-grid; place-items: center; }
.cform__wa-title { display: block; font-weight: 600; }
.cform__wa-sub { display: block; font-size: var(--text-sm); opacity: 0.85; }
.field__select {
  appearance: none;
  border: 1px solid rgba(244, 238, 226, 0.35);
  background: transparent;
  color: var(--color-cream);
  padding: var(--space-3) var(--space-4);
  border-radius: 6px;
  font-family: var(--font-ui);
}
.field__select option { color: var(--color-ink); }
.cinfo__item--wa {
  grid-column: 1 / -1;
  background: var(--color-gold);
  color: #fff;
  border-radius: 10px;
  padding: clamp(1.25rem, 3vw, 2rem);
}
.cinfo__item--wa .cinfo__value { color: rgba(255, 255, 255, 0.85); }

/* --- Blog: CTA-blok onder artikel --- */
.article__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin: clamp(2.5rem, 5vw, 4rem) 0 var(--space-6);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
}
.article__cta-eyebrow {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}
.article__cta-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.15;
  color: var(--color-ink);
}
.article__cta p { margin: var(--space-3) 0 0; color: var(--color-ink-muted); max-width: 46ch; }

/* --- Winkelwagen/checkout: trustblok + lege staat --- */
.tv-trust { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin: var(--space-6) 0 0; }
.tv-trust__item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-ink); }
.tv-trust__check { flex-shrink: 0; color: #1f8f4e; }
.cart-empty__wrap { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.collectie--cart { padding-top: clamp(2.5rem, 5vw, 4rem); }
.tv-thankyou-note { color: var(--color-ink-muted); }

/* --- Footer: bezorgregel --- */
.footer__delivery { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-cream-muted); }

/* --- Inputs: minstens 16px (geen iOS-zoom) --- */
.field input, .field textarea, .field__select, .cform__form select { font-size: 16px; }

/* ============================================================
   Responsive — revisie
============================================================ */
@media (max-width: 900px) {
  .waarom__cols,
  .proces__list,
  .garantie__rapport,
  .condrapport__inner,
  .founder__inner { grid-template-columns: 1fr; }
  .condrapport__link { margin-left: 0; }
}

/* Garantie-blokken: mobiel een horizontale slider */
@media (max-width: 860px) {
  .garantie__grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    gap: var(--space-4);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--edge));
    padding-inline: var(--edge);
  }
  .garantie__grid::-webkit-scrollbar { display: none; }
  .garantie__block { flex: 0 0 82%; scroll-snap-align: start; }
}

@media (max-width: 860px) {
  /* Topbalk: vinkjes compact, e-mail verbergen, telefoon tikbaar houden */
  .topbar { gap: var(--space-2) var(--space-4); }
  .topbar__usps { gap: var(--space-3); font-size: var(--text-xs); overflow: hidden; flex-wrap: nowrap; }
  .topbar__usp:nth-child(n+3) { display: none; }
  .topbar__usp { min-width: 0; }
  .topbar__email, .topbar__sep { display: none; }

  /* Sticky WhatsApp-balk op productpagina tonen; drijvende FAB verbergen daar */
  body.single-product .pdp-sticky { display: block; }
  body.single-product .wa-fab { display: none; }
  .pdp__wa { display: none; }
}

@media (max-width: 560px) {
  /* Heel smal: houd de topbalk op één regel — alleen eerste vinkje + telefoon */
  .topbar__usp:nth-child(n+2) { display: none; }
}

@media (max-width: 640px) {
  .shop__grid { grid-template-columns: repeat(2, 1fr); }
  .founder__sfeer { grid-template-columns: 1fr; }
  .article__cta { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Fornuizen — filterbalk + filter-drawer (revisie)
============================================================ */
.shop__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-line);
}
.shop__bar .shop__tabs {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  justify-content: flex-start;
  flex: 1 1 auto;
}
.shop__filterbtn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease-out), background var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}
.shop__filterbtn:hover { border-color: var(--color-ink-muted); }
.shop__filterbtn.has-active { background: var(--color-navy); color: var(--color-cream); border-color: var(--color-navy); }
.shop__filterbtn-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-gold);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
}

.filterdrawer { position: fixed; inset: 0; z-index: 130; visibility: hidden; }
.filterdrawer.is-open { visibility: visible; }
.filterdrawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 26, 46, 0.42);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}
.filterdrawer.is-open .filterdrawer__backdrop { opacity: 1; }
.filterdrawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(400px, 90vw);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  box-shadow: -10px 0 40px rgba(15, 26, 46, 0.18);
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-out);
}
.filterdrawer.is-open .filterdrawer__panel { transform: translateX(0); }
.filterdrawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-line);
}
.filterdrawer__title { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-ink); }
.filterdrawer__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--duration) var(--ease-out);
}
.filterdrawer__close:hover { background: var(--color-bg); }
.filterdrawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.filterdrawer__foot {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--color-line);
}
.filterdrawer__clear {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.filterdrawer__clear:hover { border-color: var(--color-ink-muted); }
.filterdrawer__apply {
  flex: 1;
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: 999px;
  background: var(--color-navy);
  color: var(--color-cream);
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
}
.filterdrawer__apply:hover { background: color-mix(in srgb, var(--color-navy) 84%, black); }

/* Filtergroepen in de drawer: label boven, chips eronder */
.filterdrawer .shop__filter { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.filterdrawer .shop__filter-label { margin: 0; }
.shop__filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

@media (max-width: 640px) {
  .filterdrawer__panel { width: 100%; }
}

/* ============================================================
   Revisie-fixes: filterbadge, prijs-op-aanvraag, WhatsApp-icoon
============================================================ */
/* Verberg de teller-badge wanneer er geen filters actief zijn (geen losse gouden bol) */
.shop__filterbtn-count[hidden] { display: none !important; }

/* "Prijs op aanvraag" kleiner en gedempt */
.pcard__price--ask { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-muted); }

/* WhatsApp-icoon (aangeleverde SVG) netjes uitlijnen in knoppen */
.wa-ico { display: block; }
.wa-fab__icon .wa-ico { margin: 0 auto; }

/* ============================================================
   Uniforme subheadings (eyebrows) — chip met vlak + "//" ervoor
   Goud op lichte secties, blauw op donkere. Kleine letters.
============================================================ */
.overons__eyebrow,
.types__eyebrow,
.collectie__eyebrow,
.atelier__eyebrow,
.faq__eyebrow,
.cta__eyebrow,
.reviews__eyebrow,
.waarom__eyebrow,
.chero__eyebrow,
.cinfo__eyebrow,
.vhero__eyebrow,
.story__eyebrow,
.proces__eyebrow,
.condrapport__eyebrow,
.garantie__eyebrow,
.garantie__rapport-eyebrow,
.bloghead__eyebrow,
.article__cta-eyebrow,
.hgallery__eyebrow,
.bento__cta-eyebrow,
.cform__label,
.founder__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  width: auto;
  max-width: max-content;
  padding: 0.42em 0.9em;
  border-radius: 999px;
  background: var(--color-gold);
  color: var(--color-cream);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.overons__eyebrow::before,
.types__eyebrow::before,
.collectie__eyebrow::before,
.atelier__eyebrow::before,
.faq__eyebrow::before,
.cta__eyebrow::before,
.reviews__eyebrow::before,
.waarom__eyebrow::before,
.chero__eyebrow::before,
.cinfo__eyebrow::before,
.vhero__eyebrow::before,
.story__eyebrow::before,
.proces__eyebrow::before,
.condrapport__eyebrow::before,
.garantie__eyebrow::before,
.garantie__rapport-eyebrow::before,
.bloghead__eyebrow::before,
.article__cta-eyebrow::before,
.hgallery__eyebrow::before,
.bento__cta-eyebrow::before,
.cform__label::before,
.founder__eyebrow::before {
  content: "//";
  font-weight: 700;
  opacity: 0.72;
}
/* Blauw vlak op de donkere secties */
.atelier__eyebrow,
.story__eyebrow,
.condrapport__eyebrow,
.cta__eyebrow,
.vhero__eyebrow,
.chero__eyebrow,
.bento__cta-eyebrow,
.cform__label {
  background: var(--color-accent);
  color: var(--color-cream);
}
/* Wanneer een eyebrow in een gecentreerde kop staat, chip ook centreren */
.reviews__head, .faq__intro, .waarom__head, .collectie__head, .chero__inner,
.garantie__intro-wrap, .bloghead, .proces__head-text { }

/* Story-items gebruiken al flex-gap; eyebrow-chip niet extra laten stapelen */
.story__item .story__eyebrow { margin-bottom: 0; }

/* ============================================================
   Standaard-menu op niet-home pagina's: volle balk, logo gecentreerd
   bovenaan, menu-items eronder in het midden, winkelwagen rechts.
============================================================ */
@media (min-width: 861px) {
  .nav--standard {
    top: 2.05rem;
    left: 0;
    right: 0;
    padding: var(--space-3) var(--edge);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-4);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-line);
  }
  body.admin-bar .nav--standard { top: calc(2.05rem + 32px); }
  .nav--standard .nav__bar { display: contents; }
  .nav--standard .nav__logo { justify-self: start; }
  .nav--standard .nav__logo-img { height: clamp(40px, 3.4vw, 50px) !important; max-height: 50px; }
  .nav--standard .nav__menu { justify-self: center; gap: clamp(1.5rem, 3vw, 2.75rem); }
  .nav--standard .nav__cart { justify-self: end; }
}

/* ============================================================
   Consistente sectie-titels (zelfde grootte overal)
============================================================ */
.overons__title,
.types__heading,
.collectie__title,
.atelier__title,
.faq__title,
.cta__title,
.reviews__title,
.waarom__title,
.proces__title,
.condrapport__title,
.garantie__rapport-title,
.cinfo__title,
.cform__title,
.bento__cta-title,
.hgallery__title,
.article__cta-title {
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  line-height: 1.12;
}

/* ============================================================
   Consistente type-schaal over de HELE site (H1 / H2 / H3)
============================================================ */
:root {
  --tv-h1: clamp(2.25rem, 4.6vw, 3.4rem);  /* pagina-hero titels */
  --tv-h2: clamp(1.75rem, 3.2vw, 2.6rem);  /* sectie-titels */
  --tv-h3: clamp(1.3rem, 1.9vw, 1.65rem);  /* sub- en kaart-titels */
}
/* H1 — pagina-hero titels */
.chero__title,
.vhero__title,
.vhero--wz .vhero__title,
.bloghead__title {
  font-size: var(--tv-h1);
  line-height: 1.08;
}
/* H2 — sectie-titels */
.overons__title,
.types__heading,
.collectie__title,
.atelier__title,
.faq__title,
.cta__title,
.reviews__title,
.waarom__title,
.proces__title,
.condrapport__title,
.garantie__rapport-title,
.cinfo__title,
.cform__title,
.bento__cta-title,
.hgallery__title,
.article__cta-title,
.vintro__title,
.founder__title,
.story__heading {
  font-size: var(--tv-h2);
  line-height: 1.12;
}
/* H3 — sub- en kaart-titels */
.stepcard__title,
.pcard__name,
.prod__name,
.garantie__block-title,
.founder__title + *,
.review-card__name {
  /* laat naam/kleine titels ongemoeid indien nodig */
}
.stepcard__title,
.pcard__name,
.garantie__block-title {
  font-size: var(--tv-h3);
  line-height: 1.18;
}

/* Garantie-blokken: icoon-tegels i.p.v. nummers */
.garantie__icon { display: block; width: clamp(48px, 5vw, 58px); height: auto; margin-bottom: var(--space-5); }

/* Ons verhaal — hero-titel groot (mag flink beeld vullen) */
.vhero:not(.vhero--wz) .vhero__title {
  font-size: clamp(3rem, 13vw, 12rem);
  line-height: 1;
}

/* Founder-sectie: papiertextuur + noise op de achtergrond (zoals de hero) */
.founder { position: relative; }
.founder::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/misc/texture.webp");
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply;
  opacity: 0.18;
  pointer-events: none;
}
.founder::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/misc/noise.gif");
  background-repeat: repeat;
  opacity: 0.04;
  pointer-events: none;
}
.founder__inner { position: relative; z-index: 1; }

/* NL + BE vlaggetjes */
.tv-flags { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; margin-left: 5px; }
.tv-flags svg { display: block; border-radius: 2px; }
.footer__delivery .tv-flags { position: relative; top: -1px; }

/* ============================================================
   PDP-herzieningen: sterren/trust boven titel, mobiele sticky-balk, blogtitel
============================================================ */
.pdp__trustrow { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.pdp__stars { color: #c9a227; letter-spacing: 0.12em; font-size: var(--text-base); }
.pdp__trustrow-text { font-size: var(--text-sm); color: var(--color-ink-muted); }

/* Mobiele sticky-balk — prijs boven, titel eronder (klein), dan 2 knoppen */
.pdp-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--edge) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  box-shadow: 0 -8px 24px rgba(15, 26, 46, 0.1);
  transform: none;
}
@media (max-width: 860px) { body.single-product .pdp-sticky { display: block; } }
.pdp-sticky__info { display: flex; flex-direction: column; gap: 1px; }
.pdp-sticky__price { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.05; color: var(--color-ink); }
.pdp-sticky__title { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-sticky__actions { display: flex; gap: var(--space-3); }
.pdp-sticky__cart, .pdp-sticky__wa {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
}
.pdp-sticky__cart { background: var(--color-navy); color: var(--color-cream); }
.pdp-sticky__wa { background: var(--color-gold); color: var(--color-cream); }
.pdp-sticky__wa .wa-ico { width: 16px; height: 16px; }

/* Blog-titel iets kleiner */
.bloghead__title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }

/* Blog: post-kaart-titels en artikel-titel kleiner */
.post-card__title { font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.2; }
.article__title { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.1; }

/* ============================================================
   Winkelwagen / afrekenen — passend bij het thema
============================================================ */
/* Notices in thema-stijl (geen felblauwe balk) */
.woocommerce-info, .woocommerce-message, .woocommerce-noreviews, .cart-empty.woocommerce-info {
  border-top-color: var(--color-gold) !important;
  background: var(--color-surface);
  color: var(--color-ink);
}
.woocommerce-info::before, .woocommerce-message::before { color: var(--color-gold); }
/* WooCommerce-knoppen als navy pill */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce .button, .woocommerce #respond input#submit {
  background: var(--color-navy) !important;
  color: var(--color-cream) !important;
  border-radius: 999px !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  padding: 0.9em 1.8em !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover { background: color-mix(in srgb, var(--color-navy) 84%, black) !important; }
/* Onze eigen knop (lege winkelwagen) — tekst gegarandeerd cream/wit */
body.woocommerce .btn--primary, body.woocommerce-cart .btn--primary,
.cart-empty__wrap .btn--primary { color: var(--color-cream) !important; }
.cart-empty__wrap { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); margin-top: var(--space-5); }
.cart-empty { font-size: var(--text-lg); color: var(--color-ink); margin: 0; }

/* Trustblok met icoon-tegels (niet meer de vinkjes) */
.tv-trust { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.tv-trust__item { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-ink); }
.tv-trust__ico { width: 34px !important; height: 34px !important; max-height: 34px; border-radius: 8px; flex-shrink: 0; display: block; }

/* PDP: conditierapport-regel ook tonen als er (nog) geen PDF is */
.pdp__download--soon { color: var(--color-ink-muted); cursor: default; }

/* Winkelwagen/checkout — koppen in de huisstijl (display-font) */
.cart_totals h2,
#order_review_heading,
.woocommerce-checkout h3,
.woocommerce-billing-fields > h3,
.woocommerce-additional-fields > h3,
.woocommerce-column__title {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  color: var(--color-ink) !important;
}
.woocommerce, .woocommerce-page { font-family: var(--font-ui); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { font-family: var(--font-ui); color: var(--color-ink); }

/* Winkelwagen — meer ruimte tussen trust-iconen en rond de totalen */
.woocommerce-cart .tv-trust {
  margin-top: clamp(2rem, 4vw, 3rem);
  gap: var(--space-5) clamp(2.5rem, 5vw, 4rem);
}
.woocommerce-cart .tv-trust__item { gap: var(--space-4); }
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart_totals { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.woocommerce-cart .cart_totals h2 { margin: 0 0 var(--space-5) !important; }
.woocommerce-cart .cart_totals table { margin-bottom: var(--space-5); }

/* Blog — netter en ruimer */
.bloghead { padding-top: clamp(7rem, 9vw, 9.5rem) !important; padding-bottom: clamp(2rem, 4vw, 3rem) !important; }
.blog { padding-top: 0; }
.blog__grid { row-gap: clamp(2rem, 4vw, 3rem); }
.post-card__body { gap: var(--space-4); padding: clamp(1.5rem, 2vw, 1.75rem); }
.post-card__media { aspect-ratio: 16 / 11; background: var(--color-bg); }
.post-card__media--empty { background: linear-gradient(135deg, #e6ddc9, #f3ecdd); position: relative; }
.post-card__media--empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/misc/noise.gif") repeat;
  opacity: 0.05;
}

/* Blog — minder loze ruimte onder de kaarten (vooral bij weinig posts) */
.blog { padding-bottom: clamp(1.75rem, 3vw, 2.5rem) !important; }
.bloghead { padding-bottom: clamp(1.25rem, 2.5vw, 2rem) !important; }
.blog .the_posts_pagination:empty,
.blog nav.pagination:empty { display: none !important; margin: 0 !important; }

/* ============================================================
   Voor & na (before/after) — homepage
============================================================ */
.ba { background: var(--color-bg); padding: var(--section-y) 0; }
.ba__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 var(--edge);
}
/* Beeld staat links (gecentreerd in de linkerhelft), tekst begint aan de
   linkerkant van de rechterhelft. */
.ba__media { order: -1; justify-self: center; width: 100%; max-width: 600px; }
.ba__eyebrow {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.ba__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.ba__title i { font-style: italic; color: var(--color-accent); }
.ba__lead {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-ink);
  max-width: 46ch;
}
.ba__intro {
  margin-top: var(--space-4);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-ink-muted);
  max-width: 54ch;
}
.ba__steps-title {
  display: block;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink);
  font-weight: 600;
}
.ba__acc { display: flex; flex-direction: column; }
.ba__item { border-top: 1px solid var(--color-line); }
.ba__item:last-child { border-bottom: 1px solid var(--color-line); }
.ba__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
  transition: color var(--duration) var(--ease-out);
}
.ba__q::-webkit-details-marker { display: none; }
.ba__q:hover { color: var(--color-accent); }
.ba__marker { position: relative; flex-shrink: 0; width: 14px; height: 14px; }
.ba__marker::before,
.ba__marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--color-accent);
  transform: translate(-50%, -50%);
}
.ba__marker::before { width: 14px; height: 2px; }
.ba__marker::after { width: 2px; height: 14px; transition: transform var(--duration) var(--ease-out); }
.ba__item[open] .ba__marker::after { transform: translate(-50%, -50%) scaleY(0); }
.ba__a { padding: 0 0 var(--space-4); }
.ba__a p {
  margin: 0;
  max-width: 56ch;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-ink-muted);
}
/* Smoother openen: echte hoogte-transitie waar ::details-content wordt
   ondersteund, plus een zachte inschuif-reveal die in elke browser werkt. */
:root { interpolate-size: allow-keywords; }
.ba__item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.4s var(--ease-out), content-visibility 0.4s allow-discrete;
}
.ba__item[open]::details-content { block-size: auto; }
.ba__item[open] .ba__a { animation: baReveal 0.38s var(--ease-out) both; }
@keyframes baReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ba__item::details-content { transition: none; }
  .ba__item[open] .ba__a { animation: none; }
}
.ba__result {
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.4;
  color: var(--color-ink);
}
.ba__actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Vergelijk-slider */
.bacompare {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
  background: var(--color-navy-deep);
  box-shadow: 0 30px 60px -30px rgba(15, 26, 46, 0.5);
}
.bacompare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
}
.bacompare__before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.bacompare__tag {
  position: absolute;
  top: var(--space-4);
  z-index: 2;
  padding: 0.3em 0.7em;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(15, 26, 46, 0.55);
  color: var(--color-cream);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.bacompare__tag--before { left: var(--space-4); }
.bacompare__tag--after { right: var(--space-4); }
.bacompare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.bacompare__line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-cream);
  box-shadow: 0 0 0 1px rgba(15, 26, 46, 0.15);
  transform: translateX(-50%);
}
.bacompare__grip {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--color-cream);
  color: var(--color-navy);
  transform: translateX(-50%);
  box-shadow: 0 6px 18px -6px rgba(15, 26, 46, 0.6);
}
.bacompare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  /* Touch/klik gaat naar de pointer-drag op .bacompare (iOS laat range niet
     springen bij tikken); de range blijft focusbaar voor toetsenbord. */
  pointer-events: none;
}
.bacompare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 100%; }
.bacompare__range::-moz-range-thumb { width: 2px; height: 100%; border: 0; background: transparent; }
.bacompare__range::-moz-range-track { background: transparent; }
.bacompare:focus-within .bacompare__grip { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* ============================================================
   Voorwaarden / informatie-pagina's
============================================================ */
.voorw { background: var(--color-bg); }
.voorw__inner {
  max-width: var(--hero-max);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--edge) var(--section-y);
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.voorw__nav {
  position: sticky;
  top: 6.5rem;
  display: flex;
  flex-direction: column;
}
.voorw__nav-title {
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.voorw__nav-list { display: flex; flex-direction: column; }
.voorw__nav-link {
  padding: 0.6rem 0;
  font-size: var(--text-base);
  color: var(--color-ink-muted);
  border-bottom: 1px solid var(--color-line);
  transition: color 0.3s var(--ease-out);
}
.voorw__nav-link:hover { color: var(--color-ink); }
.voorw__nav-link.is-active { color: var(--color-ink); font-weight: 600; }
.voorw__nav-wa {
  margin-top: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold);
}
.voorw__nav-wa:hover { color: color-mix(in srgb, var(--color-gold) 80%, black); }

.legal { max-width: 760px; }
.legal__updated { font-size: var(--text-sm); color: var(--color-ink-muted); margin: 0 0 var(--space-6); }
.legal h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.15;
  color: var(--color-ink);
  margin: clamp(2rem, 4vw, 2.75rem) 0 var(--space-4);
}
.legal > h2:first-child { margin-top: 0; }
.legal p { margin: 0 0 var(--space-4); line-height: 1.75; color: var(--color-ink); font-size: var(--text-base); }
.legal ul { margin: 0 0 var(--space-4); padding-left: 1.2em; list-style: disc; }
.legal li { margin-bottom: var(--space-2); line-height: 1.7; color: var(--color-ink); }
.legal strong { font-weight: 600; color: var(--color-ink); }
.legal a { color: var(--color-accent); }
.legal__contact {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}
.legal__contact p { color: var(--color-ink-muted); }

/* ============================================================
   Footer — 5 kolommen (Informatie toegevoegd)
   Alleen op desktop; de bestaande media queries (<=760px 2-koloms,
   <=460px 1-koloms) blijven leidend op mobiel.
============================================================ */
@media (min-width: 761px) {
  .footer__top { grid-template-columns: 1.5fr 1fr 1fr 1.15fr 1fr; }
}

/* ============================================================
   Responsive — nieuwe secties
============================================================ */
@media (max-width: 860px) {
  .ba__inner { grid-template-columns: 1fr; gap: clamp(1.75rem, 6vw, 2.5rem); }
  .ba__media { order: -1; }

  .voorw__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .voorw__nav { position: static; }
  .voorw__nav-title { margin-bottom: var(--space-3); }
  .voorw__nav-list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }
  .voorw__nav-link {
    white-space: nowrap;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-size: var(--text-sm);
  }
  .voorw__nav-link.is-active {
    background: var(--color-navy);
    color: var(--color-cream);
    border-color: var(--color-navy);
  }
  .voorw__nav-wa { margin-top: var(--space-4); }
}

@media (max-width: 560px) {
  .bacompare__grip { width: 40px; height: 40px; }
  .ba__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   Garantie & Levering — detailsecties
============================================================ */
.gldetail { background: var(--color-bg); padding: 0 0 var(--section-y); }
.gldetail__inner {
  max-width: var(--hero-max);
  margin: 0 auto;
  padding: 0 var(--edge);
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 5.5rem);
}
.gldetail__eyebrow {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.gldetail__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1.1;
  color: var(--color-ink);
}
.gldetail__title i { font-style: italic; color: var(--color-accent); }
.gldetail__lead {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-ink-muted);
  max-width: 60ch;
}
.gldetail__cols {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.gldetail__col-title {
  display: block;
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}
.gldetail__list { display: flex; flex-direction: column; gap: var(--space-3); }
.gldetail__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-ink);
}
.gldetail__ico { flex-shrink: 0; margin-top: 2px; }
.gldetail__item--pos .gldetail__ico { color: var(--color-accent); }
.gldetail__item--neg { color: var(--color-ink-muted); }
.gldetail__item--neg .gldetail__ico { color: var(--color-ink-muted); }
.gldetail__more {
  display: inline-block;
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
}
.gldetail__more:hover { color: var(--color-ink); }
.gldetail__steps {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 2rem) clamp(2rem, 5vw, 4rem);
}
.gldetail__step { display: flex; gap: var(--space-4); align-items: flex-start; }
.gldetail__step-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--color-accent);
  line-height: 1;
  flex-shrink: 0;
}
.gldetail__step-body { display: flex; flex-direction: column; gap: 2px; }
.gldetail__step-title { font-weight: 600; color: var(--color-ink); }
.gldetail__step-text { font-size: var(--text-base); line-height: 1.6; color: var(--color-ink-muted); }
.gldetail__note {
  margin-top: var(--space-5);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-ink-muted);
  max-width: 64ch;
}
.gldetail__acc { margin-top: var(--space-6); max-width: 760px; }
.gldetail__cta {
  background: var(--color-navy);
  color: var(--color-cream);
  border-radius: 8px;
  padding: clamp(1.75rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.gldetail__cta-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
  color: var(--color-cream);
}
.gldetail__cta-text p { margin-top: var(--space-3); color: var(--color-cream-muted); line-height: 1.6; }
.gldetail__cta-actions { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.gldetail__cta-links { display: flex; gap: var(--space-5); }
.gldetail__cta-links a { font-size: var(--text-sm); color: var(--color-steel); text-decoration: underline; text-underline-offset: 3px; }
.gldetail__cta-links a:hover { color: var(--color-cream); }

@media (max-width: 760px) {
  .gldetail__cols { grid-template-columns: 1fr; }
  .gldetail__steps { grid-template-columns: 1fr; }
  .gldetail__cta { grid-template-columns: 1fr; align-items: start; }
}

/* ============================================================
   Checkout — meer ruimte boven de betaalmethodes
============================================================ */
.woocommerce-checkout #payment.woocommerce-checkout-payment {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-top: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--color-line);
}


/* ============================================================
   MOBIELE VERFIJNING (batch aug 2026)
============================================================ */
/* Knoppen nooit over 2 regels breken */
.btn { white-space: nowrap; }

/* WhatsApp-kaart op contact: label leesbaar (wit) op goud */
.cinfo__item--wa .cinfo__label { color: var(--color-cream); opacity: 0.9; }
.cinfo__item--wa .cinfo__value { color: var(--color-cream); }

@media (max-width: 860px) {
  /* Alle alinea-teksten 15px op mobiel (tokens die de body-copy voeden) */
  :root { --text-base: 0.9375rem; --text-lg: 0.9375rem; }

  /* Hero-aside: alinea 14px, prijsindicatie 12px */
  .hero__aside-text { font-size: 14px; line-height: 1.55; }
  .hero__price { font-size: 12px; }
  /* USP-vinkjes in de hero net iets kleiner op mobiel */
  .hero__aside .usp-list__item,
  .hero__aside .usp-list__link { font-size: 14px; }

  /* Fornuizen-pagina: minder bovenruimte op mobiel (was 72px → 24px) zodat de
     merkfilters hoger komen te staan */
  .shop { padding-top: 24px; }

  /* Carousels links uitlijnen met de content-rand (scroll-snap respecteert de
     gutter pas mét scroll-padding, anders plakt de eerste kaart tegen de rand) */
  .types__right,
  .garantie__grid,
  .collectie__track,
  .reviews__track { scroll-padding-inline-start: var(--edge); }
  .types__right { padding-left: var(--edge); }

  /* Overlay-hero's (desktop blijft ongewijzigd — alles staat in deze media query) */
  .vhero__title { font-size: clamp(2.6rem, 13vw, 3.6rem); line-height: 1.0; }
  .vhero__intro { font-size: 15px; line-height: 1.6; color: var(--color-cream); }
  .vhero--wz .vhero__intro { font-size: 15px; }
  /* Werkwijze: meer bovenruimte zodat de eyebrow niet aan het menu plakt */
  .vhero--wz .vhero__inner { justify-content: flex-start; padding-top: calc(var(--nav-inset) + 8.5rem); }
  .vhero--wz .vhero__headline { margin: 0 0 var(--space-6); }
  /* Ons verhaal: verticaal gecentreerd; de twee caption-regels verborgen op mobiel;
     minimaal 24px tussen de titel en de paragraaf */
  .vhero:not(.vhero--wz) .vhero__inner { justify-content: center; padding-top: calc(var(--nav-inset) + 4rem); }
  .vhero:not(.vhero--wz) .vhero__headline { margin: 0 0 clamp(1.5rem, 6vw, 2rem); }
  .vhero__row { display: none; }

  /* Homepage atelier: bijschriften én CTA een flink stuk omhoog zodat ze niet
     achter Safari's onderbalk (±90px) wegvallen. env() vangt de home-indicator. */
  .atelier__intro { top: clamp(7.5rem, 21vw, 9.5rem); }
  .atelier__captions { bottom: calc(clamp(11rem, 30vw, 13rem) + env(safe-area-inset-bottom, 0px)); }
  .atelier__caption-text { font-size: 0.75rem; }
  .atelier__cta { bottom: calc(clamp(6rem, 16vw, 7.5rem) + env(safe-area-inset-bottom, 0px)); }
}

/* Hero- en voor/na-knoppen: elk op een eigen volle regel op smallere schermen */
@media (max-width: 640px) {
  .hero__actions,
  .ba__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero__actions .btn,
  .ba__actions .btn { width: 100%; }
}

/* ============================================================
   Checkout — grotere velden + gelijk uitgelijnde labels (mobiel + desktop)
============================================================ */
.woocommerce-checkout .form-row { margin-bottom: 1.1rem; }
.woocommerce-checkout .form-row > label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 15px;
  font-weight: 600;
  min-height: 1.35em;
  color: var(--color-ink);
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout select,
.woocommerce-checkout .select2-container--default .select2-selection--single {
  min-height: 54px;
  padding: 0.95rem 1rem;
  font-size: 16px;
  line-height: 1.3;
  border-radius: 8px;
  border: 1px solid var(--color-line);
  background: #fff;
}
.woocommerce-checkout .select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal;
  padding-left: 0;
  color: var(--color-ink);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 52px; }

/* ============================================================
   Shop-banner (fornuizen) — compacter
============================================================ */
.chero--shop { height: 34vh; min-height: 220px; }

/* ============================================================
   Productpagina — betaalicons + bezorgnotitie + before/after
============================================================ */
.pdp__delivery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin: var(--space-5) 0;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}
.pdp__delivery svg { color: var(--color-accent); flex-shrink: 0; }
.pdp__delivery .tv-flags { display: inline-flex; align-items: center; gap: 3px; }
.pdp__pay {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-4);
}
.pdp__pay-label { font-size: var(--text-xs); color: var(--color-ink-muted); margin-right: 0.25rem; }
.pdp__pay img { height: 30px; width: auto; }
.pdp__ba { background: var(--color-bg); padding: var(--section-y) 0; }
.pdp__ba-inner { max-width: 860px; margin: 0 auto; padding: 0 var(--edge); }
.pdp__ba-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.1;
  color: var(--color-ink);
  margin: 0 0 var(--space-5);
}
.pdp__ba-title i { font-style: italic; color: var(--color-accent); }

/* Blog — intro-lead (chero-hero vervangt de oude bloghead), strak onder de hero */
.blog__lead {
  max-width: 60ch;
  margin: 0 auto clamp(1.25rem, 3vw, 1.75rem);
  padding: 0;
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--color-ink-muted);
  text-align: center;
}

/* ============================================================
   Merken-marquee — dunne strip, grijzig, oneindig (geen lege rand)
============================================================ */
.logos {
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  overflow: hidden;
}
.logos__track {
  display: flex;
  width: max-content;
  animation: tv-logos-marquee 42s linear infinite;
  /* Eigen compositor-laag: voorkomt dat de lus zichtbaar "verspringt"
     nadat de browser de animatie tijdens/na het scrollen heeft geknepen. */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.logos__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-right: clamp(1.5rem, 4vw, 3rem);
}
.logos__logo {
  height: clamp(34px, 4.4vw, 54px) !important;
  max-height: 54px;
  width: auto !important;
  aspect-ratio: 500 / 238;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.38;
  filter: saturate(0);
}
@keyframes tv-logos-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logos__track { animation: none; } }

/* ============================================================
   Reserveren — info-tooltip (hover desktop, tik mobiel)
============================================================ */
.pdp__reserve-row { position: relative; }
.pdp__info { position: absolute; top: 50%; right: clamp(0.9rem, 3vw, 1.4rem); transform: translateY(-50%); z-index: 5; }
.pdp__info-btn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-navy);
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}
.pdp__info-btn:hover { background: var(--color-navy); color: var(--color-cream); }
.pdp__info-pop {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: min(258px, 74vw);
  padding: 0.7rem 0.85rem;
  background: var(--color-navy);
  color: var(--color-cream);
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.45;
  box-shadow: 0 14px 34px -12px rgba(15, 26, 46, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0.2s;
  z-index: 10;
  pointer-events: none;
}
.pdp__info-pop::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 9px;
  border: 6px solid transparent;
  border-top-color: var(--color-navy);
}
@media (hover: hover) {
  .pdp__info:hover .pdp__info-pop,
  .pdp__info:focus-within .pdp__info-pop { opacity: 1; visibility: visible; transform: none; }
}
.pdp__info.is-open .pdp__info-pop { opacity: 1; visibility: visible; transform: none; }