/* ══════════════════════════════════════════════════════════════
   MAHOWA — webshop-onderdelen
   Bouwt voort op style.css (tokens, typografie, knoppen, footer).
   ══════════════════════════════════════════════════════════════ */

/* ── Basis per paginatype ───────────────────────────────────── */
/* De kopbalk is hoger dan --header-h: daarboven staat nog de balk met
   "gratis levering vanaf". Die telde hier niet mee, waardoor de inhoud
   onder die balk begon — op de winkelpagina sneed dat het kruimelpad
   doormidden. main.js meet de balk en zet --topbalk-h; het getal in de
   terugval is wat hij op een gewoon scherm hoog is.

   De meldbalk staat hier bewust niet bij: die telt al mee in de padding
   van body zelf.

   De plakkende elementen verderop rekenen met --kop-vast (kopbalk plus
   meldbalk, zie style.css) en niet met de bovenste balk: zodra je scrolt
   klapt die dicht. */
body.page main { padding-top: calc(var(--header-h) + var(--topbalk-h, 38px)); }

/* Dicht, zoals op de homepage zodra je scrolt. Met 92 % en een waas
   schemerde de tekst van de pagina er wazig doorheen. */
body.page .site-header {
  background: var(--ivory);
  border-bottom-color: var(--line-soft);
}

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

body.is-locked { overflow: hidden; }

/* Twee lijnen op elkaar: een vaste grijze onderstreping en daaroverheen
   een inktlijn die bij hover van links naar rechts dichtgroeit. Met een
   border kan dat niet — die is er in één klap of niet. */
.link {
  color: var(--ink); text-decoration: none;
  padding-bottom: 1px;
  background-image:
    linear-gradient(var(--lijn-sterk), var(--lijn-sterk)),
    linear-gradient(var(--ink), var(--ink));
  background-size: 100% 1px, 0 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size .45s var(--ease);
}
.link:hover { background-size: 100% 1px, 100% 1px; }
@media (prefers-reduced-motion: reduce) {
  .link { transition: none; }
  .link:hover { background-size: 100% 1px, 100% 1px; }
}

.btn--block { width: 100%; }
.btn--lg { padding: 20px 32px; font-size: .76rem; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ── Uitklapmenu onder "Shop" ───────────────────────────────── */
.nav__group { position: relative; }
.nav__menu {
  position: absolute; top: 100%; left: -22px;
  margin-top: 14px; padding: 10px 0;
  min-width: 250px;
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  box-shadow: 0 12px 34px rgba(33, 30, 26, .07);
  z-index: 5;
}
.nav__menu[hidden] { display: none; }
.nav__menu a {
  display: grid; gap: 2px;
  padding: 11px 22px;
  transition: background-color .2s var(--ease);
}
.nav__menu a::after { content: none; }
.nav__menu a:hover { background: rgba(33, 30, 26, .04); }
.nav__menu a span:first-child {
  font-family: var(--font-display); font-size: .9rem; color: var(--ink);
}
.nav__menu a span:last-child { font-size: .78rem; color: var(--ink-3); }

/* ── Header-iconen ──────────────────────────────────────────── */
.icon-btn {
  position: relative;
  width: 38px; height: 38px;
  display: grid; place-content: center;
  background: none; border: 0; cursor: pointer;
  color: var(--kopmerk, var(--ink));
}
.icon-btn svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 1.25;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon-btn:hover { color: #000; }

.cart-count {
  position: absolute; top: 3px; right: 1px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-content: center;
  background: var(--ink); color: var(--ivory);
  border-radius: var(--vormronding);
  font-size: .62rem; letter-spacing: .02em; line-height: 1;
}

@media (max-width: 899px) {
  #search-open, #account-open { display: none; }
}

/* ── Overlays ───────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(33, 30, 26, .28);
}
.overlay[hidden] { display: none; }

.search { background: rgba(246, 242, 236, .97); backdrop-filter: blur(6px); }
.search__inner { padding-top: clamp(28px, 8vh, 90px); }
.search__bar {
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 12px;
}
.search__bar input {
  flex: 1; min-width: 0;
  background: none; border: 0; padding: 8px 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.3rem, 3.6vw, 2.2rem);
  color: var(--ink);
}
.search__bar input:focus { outline: none; }
.search__bar input::placeholder { color: var(--ink-3); opacity: 1; }

.search__results { margin-top: clamp(20px, 3vw, 34px); max-height: 62vh; overflow-y: auto; }
.search__hint { font-size: .95rem; color: var(--ink-3); }
.search__list li + li { border-top: 1px solid var(--line-soft); }
.search__list a {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 0;
}
.search__thumb { flex: 0 0 56px; width: 56px; }
.search__thumb img { width: 56px; height: 70px; object-fit: cover; }
.search__thumb--empty { height: 70px; background: var(--sand); }
.search__text { display: grid; gap: 3px; }
.search__text strong { font-weight: 400; }
.search__text span { font-size: .9rem; color: var(--ink-3); }
.search__price { margin-left: auto; font-size: .92rem; }

/* ── De popup op de startpagina ──────────────────────────────────
   Gecentreerd en niet van de zijkant: dit is geen lade waar je iets
   ophaalt, het is een vraag die je beantwoordt of wegklikt. Daarom ook een
   donkerdere achtergrond dan bij de andere overlays — de pagina eronder
   hoort even stil te vallen. */
.welkom {
  background: rgba(33, 30, 26, .46);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.welkom__kaart {
  border-radius: var(--vormronding);
  position: relative;
  width: min(460px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  padding: clamp(22px, 3vw, 30px) clamp(26px, 4vw, 38px) clamp(28px, 4vw, 38px);
  text-align: center;
  animation: welkomIn .42s var(--ease);
}
@keyframes welkomIn { from { transform: translateY(14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .welkom__kaart { animation: none; } }

/* sticky en niet absolute: op een laptop van 768 px hoog past de kaart net
   niet altijd, en dan scrolt ze. Met een absolute knop verdwijnt het kruisje
   dan naar boven uit beeld en kan de bezoeker de popup niet meer wegklikken
   zonder eerst terug te scrollen. float haalt hem uit de tekststroom, sticky
   houdt hem bovenaan. */
.welkom__sluit {
  position: sticky; top: 0; float: right;
  width: 38px; height: 38px;
  margin: -6px -6px 0 0; z-index: 2;
}

.welkom__eyebrow {
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--oak-donker); margin: 0;
}

/* Het getal draagt de hele boodschap, dus het mag groot. Het procentteken
   blijft klein: 15% met een even groot procentteken leest als een prijs. */
.welkom__cijfer {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(4rem, 13vw, 5.6rem); line-height: .92;
  margin: 10px 0 0; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.welkom__cijfer span { font-size: .34em; vertical-align: super; margin-left: .06em; }

.welkom__titel {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.1rem, 2.6vw, 1.35rem); line-height: 1.3;
  margin: 2px 0 0; color: var(--ink);
}

.welkom__tekst {
  margin: 16px auto 0; max-width: 34ch;
  font-size: .95rem; line-height: 1.62; color: var(--ink-2);
}

.welkom__form { display: flex; gap: 8px; margin-top: 22px; }
.welkom__form input {
  flex: 1 1 auto; min-width: 0;
  padding: 13px 15px;
  font-family: inherit; font-size: .95rem;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line-soft); border-radius: var(--vormronding);
}
.welkom__form input:focus-visible { outline: 2px solid var(--oak); outline-offset: -2px; }
.welkom__form input::placeholder { color: var(--ink-3); opacity: 1; }
.welkom__form .btn { flex: 0 0 auto; }

/* De drie instapniveaus in de popup. Bedrag links, korting rechts, één
   regel per niveau — genoeg om de trap te zien zonder de campagnepagina te
   herhalen. Wie meer wil weten klikt; daar staat het volledige verhaal. */
.popbouw { list-style: none; margin: 22px 0 0; padding: 0; }
.popbouw li { border-top: 1px solid var(--line-soft); }
.popbouw li:last-child { border-bottom: 1px solid var(--line-soft); }
.popbouw__rij {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 8px; margin: 0 -8px;
  font-size: .94rem; text-decoration: none; color: inherit;
  transition: background .2s var(--ease);
}
.popbouw__rij:hover, .popbouw__rij:focus-visible { background: var(--sand); }
.popbouw__naam { flex: 1 1 auto; color: var(--ink-3); font-size: .88rem; }
.popbouw__bed {
  font-family: var(--font-display); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.popbouw__pct { color: var(--oak-donker); font-weight: 500; }
/* Het laatste niveau is het punt van de hele lijst: daar wil je ze hebben. */
.popbouw li:last-child .popbouw__bed,
.popbouw li:last-child .popbouw__pct { font-weight: 500; color: var(--ink); }

/* Het beeld bovenin de popup. Een strook, geen foto op zich: de kaart moet
   op een laptop van 768 px hoog nog helemaal passen, anders staat de knop
   onder de vouw en klikt niemand. */
.welkom__beeld { margin: 0 -8px 18px; clear: both; }
.welkom__beeld img {
  display: block; width: 100%; height: 132px;
  object-fit: cover; object-position: center 62%;
  /* Alleen bovenin rond: de strook loopt tot de rand van de kaart en zou er
     anders als rechthoek uit de zachte hoek steken. */
  border-radius: var(--vormronding) var(--vormronding) 0 0;
}

.welkom__voorwaarde {
  margin: 16px 0 0; font-size: .84rem; line-height: 1.55; color: var(--ink-3);
}

.welkom__fout { margin: 10px 0 0; font-size: .86rem; color: #8A3324; }

.welkom__klein {
  margin: 14px auto 0; max-width: 36ch;
  font-size: .78rem; line-height: 1.6; color: var(--ink-3);
}
.welkom__meer { margin: 16px 0 0; font-size: .88rem; }

/* De code na afloop. Ruim gespatieerd: dit wordt overgetypt op een telefoon
   terwijl er een laptop naast staat. */
.welkom__code {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.6rem, 5.4vw, 2.1rem);
  letter-spacing: .2em; color: var(--ink);
  margin: 14px 0 0;
  padding: 18px 10px;
  background: #fff; border: 1px solid var(--oak);
  word-break: break-all;
}
.welkom__kopieer { margin-top: 10px; font-size: .84rem; }
.welkom__knoprij { justify-content: center; margin-top: 22px; }

@media (max-width: 560px) {
  .welkom__form { flex-direction: column; }
  .welkom__form .btn { width: 100%; }
}

.panel { display: flex; justify-content: flex-end; }
.panel__box {
  width: min(430px, 100%);
  background: var(--ivory);
  display: flex; flex-direction: column;
  max-height: 100%;
  animation: panelIn .38s var(--ease);
}
@keyframes panelIn { from { transform: translateX(24px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .panel__box { animation: none; } }

.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter) 18px;
  border-bottom: 1px solid var(--line-soft);
}
.panel__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
}
.panel__body { padding: 22px var(--gutter); overflow-y: auto; flex: 1; }
.panel__body p + p { margin-top: 1em; }
.panel__empty { color: var(--ink-3); margin-bottom: 20px; }
.panel__foot {
  padding: 20px var(--gutter) 26px;
  border-top: 1px solid var(--line-soft);
}
.panel__row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .95rem; margin-bottom: 6px;
}
.panel__note { font-size: .84rem; color: var(--ink-3); margin-bottom: 16px; }

.mini-cart__item {
  display: grid; grid-template-columns: 68px 1fr auto; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--line-soft);
}
.mini-cart__media img { width: 68px; height: 84px; object-fit: cover; }
.mini-cart__name { font-size: .96rem; }
.mini-cart__spec { font-size: .82rem; color: var(--ink-3); margin-top: 3px; }
.mini-cart__price { font-size: .92rem; white-space: nowrap; }

/* ── Paginakop en kruimelpad ────────────────────────────────── */
.crumbs {
  /* Op een telefoon hebben de links extra ruimte om op te tikken; op de
     basislijn blijven ze met de huidige pagina ernaast op één lijn. */
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  padding-top: clamp(22px, 3vw, 40px);
  font-size: .8rem; color: var(--ink-3);
}
.crumbs a { border-bottom: 1px solid transparent; }
.crumbs a:hover { border-bottom-color: var(--line); }
.crumbs span[aria-hidden] { opacity: .5; }

/* Wie op Shop klikt wil producten zien. De kop mag ademen, maar 440 px
   voordat de eerste plank begint is te veel — dat is bijna een half scherm. */
.page-head { padding: clamp(24px, 3.4vw, 44px) 0 clamp(24px, 3vw, 40px); }
.page-head .h2 { margin-bottom: clamp(16px, 2vw, 26px); }
.page-head .measure { color: var(--ink-2); }

/* ── Productraster ──────────────────────────────────────────── */
.pgrid {
  display: grid; gap: clamp(22px, 3vw, 42px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.pcard { display: flex; flex-direction: column; }
.pcard__media {
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand-deep);
  margin-bottom: 18px;
}
.pcard__media picture { display: block; width: 100%; height: 100%; }
.pcard__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
@media (hover: hover) { .pcard:hover .pcard__media img { transform: scale(1.035); } }

.pcard__label {
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 8px;
}
.pcard__name { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; }
.pcard__desc { font-size: .92rem; color: var(--ink-3); margin-top: 8px; flex: 1; }
.pcard__price { margin-top: 14px; font-size: 1.02rem; font-weight: 500; color: var(--ink); }
.pcard__price span { color: var(--ink-2); font-size: .86rem; font-weight: 400; }
.pcard__cta { margin-top: 16px; align-self: flex-start; }


/* ── Hoe wil je bestellen? ──────────────────────────────────── */
.routes__title { margin-bottom: clamp(28px, 3.4vw, 44px); max-width: 22ch; }




/* ── Brugsectie: meer dan een wandplank ─────────────────────── */
.bridge {
  max-width: 62ch; margin-inline: auto; text-align: center;
  padding-bottom: clamp(50px, 7vw, 96px);
}
.bridge__title {
  text-wrap: balance;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.1; letter-spacing: -.015em;
  margin-bottom: clamp(20px, 2.6vw, 30px);
}
.bridge__text { color: var(--ink-2); }
.bridge__line {
  margin-top: clamp(22px, 2.8vw, 32px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem); color: var(--ink);
}

/* ── Collectiekaarten op /shop/ ─────────────────────────────── */
.collections {
  display: grid; gap: clamp(30px, 4vw, 54px);
  padding-bottom: clamp(40px, 5vw, 70px);
}
@media (min-width: 820px) { .collections { grid-template-columns: repeat(3, 1fr); } }

.collection { display: flex; flex-direction: column; }
.collection__media {
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand-deep);
  margin-bottom: 22px;
}
.collection__media--plain { background: var(--ivory); }
.collection__media picture { display: block; width: 100%; height: 100%; }
.collection__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
@media (hover: hover) { .collection:hover .collection__media img { transform: scale(1.035); } }

.collection__label {
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 10px;
}
.collection__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; letter-spacing: -.01em;
}
.collection__sub { margin-top: 10px; color: var(--ink-2); }
.collection__points { margin-top: 18px; flex: 1; }
.collection__points li {
  position: relative; padding-left: 18px; padding-block: 5px;
  font-size: .9rem; color: var(--ink-3);
}
.collection__points li::before { content: "—"; position: absolute; left: 0; }
.collection__price { margin-top: 18px; font-size: .98rem; }
.collection__cta { margin-top: 18px; align-self: flex-start; }

.collection-sub {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--ink);
  margin-bottom: .8em;
}
.strong { font-weight: 400; color: var(--ink); }

/* ── Voorraadstatus ─────────────────────────────────────────── */
.stock {
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase;
}
.stock--in { color: #4A6B4E; }
.stock--out { color: #9A4A32; }
.stock-line { margin: 18px 0; font-size: .9rem; color: var(--ink-3); }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { accent-color: var(--ink); width: 15px; height: 15px; }
.switch span { font-size: .88rem; color: var(--ink-2); }
.compare-3__col .link { display: inline-block; margin-top: 14px; font-size: .9rem; }

/* ── Vlakke specificatielijst op productpagina's ────────────── */
.specs-flat { margin: clamp(22px, 3vw, 30px) 0; border-top: 1px solid var(--line-soft); }
.specs-flat li {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
  font-size: .92rem; color: var(--ink);
}
.specs-flat li span:first-child { color: var(--ink-2); }
.specs-flat li span:last-child { color: var(--ink); font-weight: 500; }

/* ── Bevestigingen ──────────────────────────────────────────── */
.mount-preview {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 2vw, 20px);
}
@media (min-width: 560px) { .mount-preview { grid-template-columns: repeat(4, 1fr); } }
.mount-preview li {
  display: grid; justify-items: center; gap: 10px;
  padding: 20px 10px; background: var(--sand);
}
.mount-preview img { width: 54px; height: 54px; }
.mount-preview span {
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}

.mount-list { display: grid; gap: clamp(18px, 2.4vw, 26px); }
@media (min-width: 700px) { .mount-list { grid-template-columns: 1fr 1fr; } }

/* ── Filters en sorteren ────────────────────────────────────── */
.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
  padding: 18px 0;
  border-block: 1px solid var(--line-soft);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.filters__group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filters__label {
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
}
.filters__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.filters__count { font-size: .85rem; color: var(--ink-3); }
.filters select {
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--vormronding); padding: 8px 12px;
  font-family: var(--font-body); font-size: .85rem; color: var(--ink);
}

/* ── Catalogus met zijbalk ──────────────────────────────────── */
.catalog { display: grid; gap: clamp(28px, 3.4vw, 56px); align-items: start; }
@media (min-width: 900px) { .catalog { grid-template-columns: 210px minmax(0, 1fr); } }

.catalog__side { display: none; }
@media (min-width: 900px) {
  .catalog__side { display: block; position: sticky; top: calc(var(--kop-vast) + 24px); }
}

.facet { padding: clamp(18px, 2vw, 24px) 0; border-bottom: 1px solid var(--line-soft); }
.facet__title {
  font-family: var(--font-display); font-weight: 400; font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 12px;
}
.facet__list { display: grid; gap: 2px; }

.check { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 3px 0; }
.check input { accent-color: var(--ink); width: 14px; height: 14px; flex: 0 0 auto; }
.check span { font-size: .88rem; color: var(--ink-2); }
.check:hover span { color: var(--ink); }

.facet input[type="range"] {
  width: 100%; accent-color: var(--ink);
  background: transparent; margin: 4px 0 6px;
}
.facet__range { font-size: .85rem; color: var(--ink-2); }

.catalog__bar {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 16px; margin-bottom: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid var(--line-soft);
}
.catalog__sort { margin-left: auto; }
.catalog__sort select {
  background: transparent; border: 1px solid var(--line); border-radius: var(--vormronding);
  padding: 8px 12px; font-family: var(--font-body); font-size: .85rem; color: var(--ink);
}
.catalog__filterbtn { display: inline-flex; }
@media (min-width: 900px) { .catalog__filterbtn { display: none; } }

.catalog__active { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(18px, 2vw, 26px); }
.chip--active {
  border-color: var(--ink); background: var(--ink); color: var(--ivory);
  font-size: .8rem; padding: 8px 13px;
}
.chip--active:hover { border-color: #000; background: #000; color: var(--ivory); }

.catalog__empty { padding: clamp(30px, 5vw, 60px) 0; color: var(--ink-2); }

/* ── Productkaart in de catalogus ───────────────────────────── */
.rgrid {
  display: grid; gap: clamp(24px, 2.8vw, 40px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr));
}
.rcard { display: flex; flex-direction: column; }
.rcard__media {
  /* 3:2 — de verhouding van de productopname, dus er valt niets weg. Een
     plank is bovendien een liggend voorwerp. */
  aspect-ratio: 3 / 2; overflow: hidden; background: var(--sand-deep);
  margin-bottom: 16px;
}
.rcard__media picture { display: block; width: 100%; height: 100%; }
.rcard__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
@media (hover: hover) { .rcard:hover .rcard__media img { transform: scale(1.035); } }

.rcard__tag {
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 8px;
}
.rcard__name { font-family: var(--font-display); font-weight: 400; font-size: 1.02rem; }
.rcard__dims { margin-top: 5px; font-size: .93rem; color: var(--ink); }
.rcard__material { margin-top: 3px; font-size: .84rem; color: var(--ink-3); }
.rcard__status { margin-top: 10px; }
.rcard__price { margin-top: 8px; font-size: 1.02rem; font-weight: 500; color: var(--ink); flex: 1; }
.rcard__cta { margin-top: 14px; align-self: stretch; text-align: center; }

/* ── Filterlade op mobiel ───────────────────────────────────── */
.panel--filters { justify-content: flex-start; }
.panel--filters .panel__box { animation: none; }
.panel--filters .facet:first-child { padding-top: 0; }

/* ── Geen passende maat ─────────────────────────────────────── */
.nosize {
  display: grid; gap: clamp(22px, 3vw, 40px);
  align-items: center;
  padding: clamp(30px, 4vw, 48px);
  background: var(--sand);
}
@media (min-width: 760px) { .nosize { grid-template-columns: 1.4fr auto; } }
.nosize .h2 { margin: 12px 0 14px; }
.nosize p { max-width: 52ch; }

/* ── Keuzeknoppen (chips) ───────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--vormronding);
  padding: 11px 16px;
  font-size: .86rem; line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip.is-active {
  border-color: var(--ink); background: var(--ink); color: var(--ivory);
}

/* ── Productpagina ──────────────────────────────────────────── */
.pdp {
  display: grid; gap: clamp(30px, 4vw, 64px);
  padding-bottom: clamp(50px, 7vw, 96px);
}
@media (min-width: 960px) {
  .pdp { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }

  /* Beide kolommen mogen blijven staan. Wie korter is heeft ruimte in de rij
     en blijft dus hangen; wie langer is vult de rij en scrolt gewoon door.
     Zo blijft de foto in beeld terwijl je de configurator doorloopt, en op
     een pagina waar de rechterkolom kort is gebeurt het omgekeerde —
     zonder dat we per paginatype iets hoeven te regelen. */
  .pdp > *:first-child,
  .pdp__buy {
    position: sticky;
    top: calc(var(--kop-vast) + 24px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pdp > *:first-child, .pdp__buy { position: static; }
}

.pdp__main { background: var(--sand-deep); overflow: hidden; }
.pdp__main picture { display: block; }
.pdp__main img { width: 100%; height: auto; display: block; }

@media (min-width: 960px) {
  /* Het beeld blijft staan terwijl je de keuzes doorloopt. Dan moet het ook
     helemaal in het scherm passen: een foto die hoger is dan het venster zou
     met haar onderkant onbereikbaar blijven hangen. De ondergrens houdt het
     beeld fatsoenlijk op een laag scherm. */
  .pdp__main img {
    max-height: max(460px, calc(100vh - var(--kop-vast) - 210px));
    object-fit: cover;
  }
}

.pdp__thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.pdp__thumb {
  /* Vierkant, en op beide productpagina's even groot: een rij
     miniaturen van verschillende hoogte leest als een fout. */
  width: 82px; padding: 0; background: none; cursor: pointer;
  border: 1px solid transparent; line-height: 0;
  border-radius: var(--beeldronding); overflow: hidden;
}
.pdp__thumb img { width: 100%; height: 80px; object-fit: cover; }
.pdp__thumb[aria-current="true"] { border-color: var(--ink); }

.pdp__eyebrow {
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 14px;
}
.pdp__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.1rem, 3.8vw, 3rem); line-height: 1.06; letter-spacing: -.014em;
  color: var(--ink);
}
.pdp__short { margin-top: 16px; max-width: 46ch; }
.pdp__from {
  margin-top: 20px; padding-bottom: 22px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 1.2rem; color: var(--ink); font-weight: 500;
}
/* Het bedrag zelf is de prijs, niet de uitleg: het stond hier even klein
   als de zin erachter, onder één regel voor alle spans. Nu draagt het
   bedrag, en de uitleg staat eronder op een eigen regel. */
.pdp__from [data-from-price],
.pdp__from [data-price-live] { font-size: 1.15em; font-weight: 500; color: var(--ink); }
.pdp__from span:not([data-from-price]):not([data-price-live]) {
  display: block; margin-top: 4px;
  font-size: .88rem; line-height: 1.5; color: var(--ink-2); font-weight: 400;
}

.pdp__noscript {
  margin-top: 24px; padding: 18px 20px;
  border: 1px solid var(--line);
  font-size: .92rem;
}

/* ── Configurator ───────────────────────────────────────────── */
/* Het keuzeblok op een stukpagina. Dezelfde groepen als in de configurator,
   maar hier staan ze in een smalle kolom naast de foto's — vandaar een lijn
   erboven in plaats van eronder, zodat het blok bij de knop hoort en niet
   bij het paspoort eronder. */
.stukcfg { margin: clamp(20px, 2.6vw, 28px) 0 clamp(24px, 3vw, 32px); }
.stukcfg .cfg__group:first-child { border-top: 1px solid var(--line-soft); }
.stukcfg .cfg__group:last-child { border-bottom: 0; padding-bottom: 0; }
.stukcfg .kleuren { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) {
  .stukcfg .kleuren { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cfg__group { padding: clamp(22px, 2.8vw, 30px) 0; border-bottom: 1px solid var(--line-soft); }
.cfg__modes { display: flex; gap: 8px; padding-top: clamp(22px, 2.8vw, 30px); }
.cfg__head {
  /* Niet space-between: sinds er bij "Dikte" een hulplink naast de waarde
     staat, zou dat de waarde daar naar het midden duwen terwijl ze bij de
     andere groepen rechts staat. Met margin-left:auto op de waarde blijft
     ze overal op dezelfde plek en schuift de link er netjes achteraan. */
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 6px 14px; margin-bottom: 14px;
}
.cfg__head .cfg__value { margin-left: auto; }
.cfg__group .cfg__head + .chips + .cfg__head { margin-top: 26px; }
.cfg__head h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
}
.cfg__value { font-size: .9rem; color: var(--ink-3); }
.cfg__note { margin-top: 12px; font-size: .87rem; color: var(--ink-3); }
.cfg__lead { margin-bottom: 18px; }
.cfg__lead strong { font-weight: 400; color: var(--ink); }
.cfg__error { margin-top: 12px; font-size: .87rem; color: #9A4A32; }
.cfg__fields { display: grid; gap: 18px; }
@media (min-width: 520px) { .cfg__fields { grid-template-columns: 1fr 1fr; } }
.cfg__fields input {
  width: 100%; background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  padding: 10px 0; font-family: var(--font-body); font-size: 1.05rem; color: var(--ink);
}
.cfg__fields input:focus { outline: none; border-bottom-color: var(--ink); }

.mounts { display: grid; gap: 10px; }
.mount {
  display: grid; grid-template-columns: 56px 1fr auto;
  align-items: center; gap: 16px;
  padding: 14px 16px;
  background: transparent; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--vormronding);
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.mount:hover { border-color: var(--ink-3); }
.mount.is-active { border-color: var(--ink); background: rgba(33, 30, 26, .035); }
.mount__img { width: 56px; height: 56px; background: var(--sand); display: grid; place-content: center; }
.mount__img img { width: 46px; height: 46px; }
.mount__body { display: grid; gap: 3px; }
.mount__name { font-family: var(--font-display); font-size: .95rem; }
.mount__desc { font-size: .84rem; color: var(--ink-3); line-height: 1.5; }
.mount__price { font-size: .85rem; color: var(--ink-2); white-space: nowrap; }

/* ── Afwerking: kiezen op de kleur ──────────────────────────────────
   Een naam als "Charcoal" zegt niets zonder het hout ernaast. De knop is
   daarom het staal zelf; de naam staat eronder als bijschrift. De ring om
   het actieve staal ligt in box-shadow en niet in border, zodat de foto
   niet verspringt op het moment dat je kiest. */
.kleuren { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 620px) { .kleuren { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.kleur {
  display: grid; gap: 6px; padding: 0;
  background: none; border: 0; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
}
.kleur__staal {
  display: block; overflow: hidden;
  border-radius: var(--beeldronding);
  box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow .3s var(--ease);
}
.kleur__staal img {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
}

/* Twee tegels, dus meer ruimte per tegel — en een liggend kader, want een
   knoest zegt pas iets als je hem kan tellen. */
.kleuren--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 620px) { .kleuren--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kleuren--twee .kleur__staal img { aspect-ratio: 16 / 9; }
.kleuren--twee .kleur__naam { font-size: 1rem; }

/* Vier randen, twee bij twee. Een rij van vier zou de tegels zo klein maken
   dat het profiel op de hoek — waar het hier om draait — wegvalt. */
.kleuren--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 620px) { .kleuren--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kleuren--vier .kleur__staal img { aspect-ratio: 20 / 9; }
.kleuren--vier .kleur__naam { font-size: 1rem; }
/* Het lege vak heeft geen foto en dus geen eigen hoogte: die komt hier
   vandaan, zodat het even groot blijft als de stalen ernaast. */
.kleur__staal--leeg {
  aspect-ratio: 1 / 1;
  /* Flex en niet grid: bij een gecentreerde grid-track wordt de kolom zo
     breed als de inhoud, en dan heeft de procentbreedte van het teken niets
     om zich aan te meten. In een flexregel meet het zich aan de tegel. */
  display: flex; align-items: center; justify-content: center;
  background: var(--sand);
  color: var(--ink-3);
  transition: color .3s var(--ease);
}
.kleur__merk { width: 42%; height: auto; display: block; }
.kleur.is-active .kleur__staal--leeg { color: var(--ink); }

.kleur:hover .kleur__staal { box-shadow: 0 0 0 1px var(--ink-3); }
.kleur.is-active .kleur__staal { box-shadow: 0 0 0 2px var(--ink); }
.kleur:focus-visible { outline: none; }
.kleur:focus-visible .kleur__staal { box-shadow: 0 0 0 2px var(--ink); }
.kleur__naam { font-family: var(--font-display); font-size: .9rem; line-height: 1.25; }
.kleur__prijs { font-size: .78rem; color: var(--ink-3); }

/* ── Het overzicht onder de configurator ────────────────────────── */
.kleurgrid {
  display: grid; gap: clamp(16px, 2.2vw, 26px);
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(30px, 4vw, 48px);
}
@media (min-width: 760px) { .kleurgrid { grid-template-columns: repeat(3, 1fr); } }

.kleurkaart .media { background: #fff; }
.kleurkaart figcaption {
  display: grid; gap: 4px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.kleurkaart__naam { font-family: var(--font-display); font-size: 1.02rem; }
.kleurkaart__prijs { font-size: .82rem; color: var(--ink-3); }
.kleurkaart__desc {
  margin-top: 4px; font-size: .89rem; line-height: 1.6; color: var(--ink-2);
}
.kleurgrid__voet {
  margin-top: clamp(26px, 3vw, 38px);
  max-width: 62ch; font-size: .92rem; color: var(--ink-2);
}

/* ── Samenvatting en toevoegen ──────────────────────────────── */
.summary { margin-top: clamp(26px, 3.4vw, 36px); }
.summary__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: 14px;
}
.summary__list { border-top: 1px solid var(--line-soft); margin-bottom: 18px; }
.summary__list li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
  font-size: .92rem;
}
.summary__list li span:first-child { color: var(--ink-2); }
.summary__list li span:last-child { color: var(--ink); font-weight: 500; text-align: right; }

.summary__lines { margin-bottom: 20px; }
.summary__row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0; font-size: .95rem;
}
.summary__row--total {
  margin-top: 6px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 1.25rem; font-weight: 500; color: var(--ink);
}
/* ── Kortingscode ────────────────────────────────────────────────
   Staat onder het totaal en niet erboven: wie geen code heeft, hoeft er
   niet langs. Een leeg invoerveld halverwege een overzicht laat mensen
   twijfelen of ze iets missen. */
.kortingveld {
  margin: 14px 0 18px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.kortingveld__rij { display: flex; gap: 8px; }
.kortingveld__rij input {
  /* width: 0: een invoerveld heeft een eigen breedte (size=20) die meetelt
     als "minstens zo breed". Met 0 als basis groeit het wel, maar duwt het
     de winkelmand niet breder dan het scherm. */
  flex: 1 1 auto; min-width: 0; width: 0;
  padding: 12px 14px;
  font-family: inherit; font-size: .92rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line-soft); border-radius: var(--vormronding);
}
.kortingveld__rij input:focus-visible {
  outline: 2px solid var(--oak); outline-offset: -2px;
}
.kortingveld__rij input::placeholder {
  color: var(--ink-3); opacity: 1; letter-spacing: .04em; text-transform: none;
}
.kortingveld__rij .btn { flex: 0 0 auto; }

.kortingveld__fout {
  margin: 9px 0 0; font-size: .85rem; color: #8A3324;
}

/* Toegepast: geen invoerveld meer, alleen wat er geldt. */
.kortingveld--actief { border-top-color: var(--oak); }
.kortingveld__actief {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.kortingveld__code {
  font-family: var(--font-display); font-size: .84rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.kortingveld__wat { flex: 1 1 auto; font-size: .88rem; color: var(--ink-3); }
.kortingveld__weg { font-size: .84rem; }

/* De kortingregel in het overzicht. Eik en niet rood: dit is goed nieuws. */
/* De korting is geld: donkere eik, niet de lichte (die haalde 2:1). */
.summary__row--korting span:last-child { color: var(--oak-donker); font-weight: 500; }

.summary__provisional {
  font-size: .8rem; color: var(--ink-3);
  margin-bottom: 16px; padding-left: 12px;
  border-left: 2px solid var(--line);
}
.summary__done {
  margin-top: 16px; padding: 16px 18px;
  border: 1px solid var(--line);
}
.summary__doneline { font-size: .95rem; color: var(--ink); margin-bottom: 14px; }
.summary__doneactions { display: flex; flex-wrap: wrap; gap: 10px; }
.summary__ship { margin-top: 14px; font-size: .84rem; color: var(--ink-3); }

/* ── Accordeon met productinfo ──────────────────────────────── */
.acc { border-top: 1px solid var(--line-soft); }
.acc details { border-bottom: 1px solid var(--line-soft); }
.acc summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: .95rem;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "+"; font-size: 1.1rem; color: var(--ink-3); line-height: 1;
}
.acc details[open] summary::after { content: "–"; }
.acc__body { padding-bottom: 20px; max-width: 62ch; }
.acc__body p + p, .acc__body ul { margin-top: .9em; }
.acc__body li { position: relative; padding-left: 18px; margin-top: 6px; color: var(--ink-2); }
.acc__body li::before { content: "—"; position: absolute; left: 0; color: var(--ink-3); }

/* ── Winkelmandpagina ───────────────────────────────────────── */
/* minmax(0, 1fr) en niet de standaardkolom: anders duwt het breedste kind
   (het kortingsveld) de hele kolom breder dan een telefoon — 420 px op een
   scherm van 360, en de winkelmand schoof zijwaarts. */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 4vw, 60px); align-items: start; }
@media (min-width: 900px) { .cart-layout { grid-template-columns: minmax(0, 1fr) 340px; } }

.cart-list { border-top: 1px solid var(--line-soft); }
.cart-row {
  display: grid; gap: 16px 20px;
  grid-template-columns: 96px 1fr;
  padding: 22px 0; border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 700px) {
  .cart-row { grid-template-columns: 140px 1fr auto auto; align-items: start; }
}
.cart-row__media img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.cart-row__name { font-family: var(--font-display); font-size: 1.05rem; }
.cart-row__specs { margin-top: 10px; }
.cart-row__specs li { font-size: .87rem; color: var(--ink-2); }
.cart-row__specs span { color: var(--ink-3); }
.cart-row__remove {
  margin-top: 12px; background: none; border: 0; padding: 0; cursor: pointer;
  font-size: .85rem; color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.cart-row__remove:hover { color: var(--ink); }
.cart-row__price { font-size: 1rem; text-align: right; }
.cart-row__unit { display: block; font-size: .8rem; color: var(--ink-3); margin-top: 4px; }
.cart-row__unique {
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
}

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); }
.stepper button {
  width: 38px; height: 38px; background: none; border: 0; cursor: pointer;
  font-size: 1rem; color: var(--ink-2);
}
.stepper button:hover { color: var(--ink); }
.stepper input {
  width: 42px; height: 38px; text-align: center;
  border: 0; border-inline: 1px solid var(--line);
  background: none; font-family: var(--font-body); font-size: .92rem; color: var(--ink);
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: none; }

.cart-continue { display: inline-block; margin-top: 26px; font-size: .9rem; }

.cart-sum { background: var(--sand); padding: clamp(22px, 3vw, 30px); }
.cart-sum__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: 16px;
}
.cart-sum__note { font-size: .84rem; color: var(--ink-3); margin: 10px 0 16px; }
.cart-sum .btn { margin-top: 6px; }

.cart-empty { text-align: center; padding: clamp(40px, 8vw, 90px) 0; }
.cart-empty p { margin: 18px auto 0; max-width: 42ch; }
.cart-empty .btn-row { justify-content: center; }

/* ── Afrekenen ──────────────────────────────────────────────── */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(34px, 4vw, 60px); align-items: start; padding-bottom: clamp(50px, 7vw, 90px); }
@media (min-width: 900px) { .checkout { grid-template-columns: minmax(0, 1fr) 360px; } }

/* Een fieldset krijgt van de browser een eigen kadertje met een inkeping
   voor het opschrift. Dat hoort niet bij deze bladspiegel: het opschrift
   draagt de groep al, met een lijn eronder. */
.checkout__block {
  border: 0; padding: 0;
  margin: 0 0 clamp(30px, 4vw, 46px);
}
.checkout__legend {
  font-family: var(--font-display); font-weight: 400;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  padding-bottom: 14px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
  width: 100%;
}

.choice {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 14px;
  padding: 15px 16px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: var(--vormronding); cursor: pointer;
  transition: border-color .25s var(--ease);
}
.choice:hover { border-color: var(--ink-3); }
.choice:has(input:checked) { border-color: var(--ink); background: rgba(33, 30, 26, .035); }
.choice input { accent-color: var(--ink); width: 16px; height: 16px; }
.choice__body { display: grid; gap: 3px; }
.choice__name { font-size: .95rem; }
.choice__desc { font-size: .84rem; color: var(--ink-3); }
.choice__price { font-size: .9rem; color: var(--ink-2); }
.choice--slim { grid-template-columns: auto 1fr; }

.checkout-sum { background: var(--sand); padding: clamp(22px, 3vw, 30px); position: sticky; top: calc(var(--kop-vast) + 24px); }
.checkout-items { margin-bottom: 18px; }
.checkout-items li {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.checkout-items__media img { width: 64px; height: 78px; object-fit: cover; }
.checkout-items__body { display: grid; gap: 2px; font-size: .84rem; color: var(--ink-3); }
.checkout-items__body strong { font-weight: 400; font-size: .95rem; color: var(--ink); }
.checkout-items__price { font-size: .9rem; white-space: nowrap; }

.notice {
  padding: 18px 20px; margin-bottom: 26px;
  border: 1px solid var(--line);
  background: rgba(33, 30, 26, .025);
  font-size: .92rem;
}
.notice strong { font-weight: 400; }
.notice p + p { margin-top: .7em; }

.checkout-result { margin-top: 30px; }
.checkout-result pre {
  margin-top: 14px; padding: 18px 20px;
  border: 1px solid var(--line); background: var(--ivory-hi);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: .8rem; line-height: 1.6; color: var(--ink-2);
  white-space: pre-wrap; overflow-x: auto;
}

/* ── Vertrouwensbalk in de footer ───────────────────────────── */
.trust {
  display: flex; flex-wrap: wrap; gap: 12px clamp(20px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.trust li {
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}

/* ── Meedoen ─────────────────────────────────────────────────────
   Eén formulier onder de kaarten. Het staat in een kader zodat duidelijk is
   dat het bij de keuze hoort en niet bij de tekst eronder. */
.niveau__kies { margin-top: auto; }
.niveau { display: flex; flex-direction: column; }

.meedoen {
  border-radius: var(--vormronding);
  margin-top: clamp(26px, 3.4vw, 38px);
  padding: clamp(22px, 3vw, 30px);
  background: var(--ivory); border: 1px solid var(--oak);
  max-width: 560px;
}
.meedoen__gekozen {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; font-size: .95rem; color: var(--ink);
}
.meedoen__wissel { font-size: .86rem; }
.meedoen__rij { display: flex; gap: 8px; }
.meedoen__rij input {
  flex: 1 1 auto; min-width: 0; padding: 13px 15px;
  font-family: inherit; font-size: .95rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--vormronding);
}
.meedoen__rij input:focus-visible { outline: 2px solid var(--oak); outline-offset: -2px; }
.meedoen__rij .btn { flex: 0 0 auto; }
.meedoen__fout { margin: 10px 0 0; font-size: .86rem; color: #8A3324; }
.meedoen__klein { margin: 14px 0 0; font-size: .8rem; line-height: 1.6; color: var(--ink-3); }
.meedoen__zonderjs { margin-top: 22px; font-size: .92rem; color: var(--ink-3); }
@media (max-width: 560px) {
  .meedoen__rij { flex-direction: column; }
  .meedoen__rij .btn { width: 100%; }
}

/* ── Hoe werkt het: vier stappen ─────────────────────────────────
   Genummerd, want het is een volgorde en geen opsomming. Het cijfer staat
   groot en licht: het telt mee als ritme, niet als inhoud. */
.stappen {
  list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0;
  display: grid; gap: clamp(20px, 3vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.stap { margin: 0; }
.stap__nr {
  font-family: var(--font-display); font-weight: 400;
  font-size: 2.4rem; line-height: 1; color: var(--oak-donker);
  margin: 0 0 10px; font-variant-numeric: tabular-nums;
}
.stap__kop {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1rem; line-height: 1.3; margin: 0 0 8px; color: var(--ink);
}
.stap p:last-child { font-size: .94rem; line-height: 1.6; color: var(--ink-2); margin: 0; }

/* ── De rekentabel ───────────────────────────────────────────────
   Op een telefoon past een tabel van vier kolommen niet. Ze scrolt dan
   zijwaarts in haar eigen kader — liever dat dan cijfers die over elkaar
   vallen of een kolom die wegvalt. */
.voordeel-blok { margin-top: clamp(36px, 5vw, 60px); }
.voordeel__kop {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.3rem); margin: 0 0 8px;
}
.voordeel__uitleg { max-width: 60ch; color: var(--ink-2); font-size: .95rem; margin: 0 0 20px; }

.voordeel { width: 100%; border-collapse: collapse; font-size: .95rem; }
.voordeel th, .voordeel td { padding: 12px 10px; text-align: right; }
.voordeel thead th { border-bottom: 1px solid var(--ink); }
.voordeel thead th:first-child,
.voordeel tbody th, .voordeel tfoot th { text-align: left; font-weight: 400; }
.voordeel thead th span {
  display: block; font-size: .78rem; color: var(--ink-3); letter-spacing: .04em;
}
.voordeel tbody th span { display: block; font-size: .82rem; color: var(--ink-3); }
.voordeel tbody tr + tr th, .voordeel tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.voordeel tbody td { font-variant-numeric: tabular-nums; color: var(--ink); }
/* Plafond bereikt: het getal blijft staan maar stopt met groeien. Grijs
   maken zou het als fout laten lezen; het is alleen niet meer het beste.
   Met de tabelselector ervoor, anders wint '.voordeel tbody td' hierboven
   op specificiteit en blijft de cel gewoon zwart. */
.voordeel tbody td.voordeel__vol { color: var(--ink-3); }
.voordeel tfoot th, .voordeel tfoot td {
  border-top: 1px solid var(--ink); font-size: .88rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.voordeel__voet {
  margin: 14px 0 0; font-size: .84rem; line-height: 1.6; color: var(--ink-3);
  max-width: 66ch;
}
@media (max-width: 620px) {
  .voordeel-blok { overflow-x: auto; }
  .voordeel { min-width: 460px; }
}

/* ── Bij klanten thuis ───────────────────────────────────────────
   Geen strak raster: klantenfoto's komen in alle verhoudingen binnen, staand
   en liggend door elkaar. Een raster dat ze allemaal in hetzelfde vierkant
   duwt, snijdt de helft van de keukens af — en dan lijkt het alsnog op
   studiowerk, wat precies de bedoeling niet is.

   Ze staan daarom naast elkaar op gelijke breedte en houden hun eigen
   hoogte. Bij één foto is dat een enkel beeld links; dat is eerlijk als er
   er maar één is, en het groeit vanzelf mee. */
.klantfotos {
  display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 22px);
  align-items: flex-start;
}
.klantfoto { flex: 0 1 clamp(240px, 30%, 340px); margin: 0; }
/* Zolang er weinig foto's zijn, mogen ze groter. Eén smalle kolom in een
   lege rij oogt niet bescheiden maar verlaten. */
.klantfotos--een .klantfoto { flex-basis: min(460px, 100%); }
.klantfotos--twee .klantfoto { flex-basis: min(380px, 100%); }
.klantfoto img {
  display: block; width: 100%; height: auto;
  border-radius: var(--vormronding);
}
.klantfoto figcaption {
  margin-top: 10px; font-size: .86rem; line-height: 1.5; color: var(--ink-3);
}
.klantfotos__vraag {
  margin-top: clamp(24px, 3vw, 34px); font-size: .95rem; color: var(--ink-3);
}
@media (max-width: 620px) {
  .klantfoto { flex: 1 1 100%; }
}

/* ── Sfeerbeeld op een tekstpagina ───────────────────────────────
   Geen product erop, alleen omgeving: een pagina met louter tekst leest
   zwaar, en een beeld dat niets belooft geeft rust zonder iets te claimen.
   figure en niet div, want dat is wat het is. */
.sfeer { margin: clamp(28px, 4vw, 52px) 0; }
.sfeer img {
  display: block; width: 100%; height: auto;
  border-radius: var(--vormronding);
}
.prose .sfeer { margin-left: 0; margin-right: 0; }

/* Een band is een strook, geen foto: hij mag nooit zo hoog worden dat je
   eroverheen moet scrollen om bij de tekst te komen. */
.sfeer--band img { max-height: 240px; object-fit: cover; object-position: center; }

/* ── FAQ en tekstpagina's ───────────────────────────────────── */
.prose { max-width: 68ch; }
.prose h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.2;
  margin-top: clamp(34px, 4vw, 52px); margin-bottom: 14px;
}
.prose h2:first-child { margin-top: 0; }
/* Sinds de onderhoudspagina in twee gevallen uiteenvalt (geolied en
   onbehandeld) is er een tussenniveau nodig: h2 voor het geval, h3 voor de
   stappen erbinnen. Kleiner dan h2 en zonder de grote witruimte erboven,
   zodat de kopjes bij hun blok blijven horen. */
.prose h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.3;
  margin-top: clamp(22px, 2.6vw, 30px); margin-bottom: 8px;
}
.prose p + p, .prose ul { margin-top: 1em; }
.prose li { position: relative; padding-left: 20px; margin-top: 8px; color: var(--ink-2); }
.prose li::before { content: "—"; position: absolute; left: 0; color: var(--ink-3); }
.prose table { width: 100%; border-collapse: collapse; margin-top: 1.2em; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.prose th { font-weight: 400; color: var(--ink-3); font-size: .8rem;
            letter-spacing: .12em; text-transform: uppercase; }

/* ── Unieke stukken: de 1-of-1 pagina ───────────────────────── */
.ex-hero { padding-top: clamp(20px, 3vw, 40px); }
.ex-hero__grid { display: grid; gap: clamp(26px, 4vw, 56px); align-items: start; }
@media (min-width: 960px) {
  .ex-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  /* Zelfde afspraak als op de andere productpagina's: de korte kolom blijft
     staan terwijl je de lange doorleest. */
  .ex-hero__grid > * { position: sticky; top: calc(var(--kop-vast) + 24px); }
  .ex-main img { max-height: max(460px, calc(100vh - var(--kop-vast) - 210px)); object-fit: contain; }
}
@media (prefers-reduced-motion: reduce) { .ex-hero__grid > * { position: static; } }

.ex-main { background: var(--sand-deep); overflow: hidden; }
.ex-main picture { display: block; }
.ex-main img { width: 100%; height: auto; }

.ex-thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ex-thumbs button {
  width: 82px; padding: 0; background: none; cursor: pointer;
  border: 1px solid transparent; line-height: 0;
  border-radius: var(--beeldronding); overflow: hidden;
}
.ex-thumbs img { width: 100%; height: 80px; object-fit: cover; }
.ex-thumbs button[aria-current="true"] { border-color: var(--ink); }

.ex-meta { display: grid; gap: 6px; }
.ex-collection {
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3);
}
.ex-name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -.02em;
}
.ex-edition {
  display: inline-block; margin-top: 12px;
  padding: 7px 14px; border: 1px solid var(--ink);
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .28em; text-transform: uppercase;
}
.ex-facts { margin-top: clamp(22px, 3vw, 32px); border-top: 1px solid var(--line-soft); }
.ex-facts li {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
  font-size: .92rem;
}
.ex-facts li span:first-child {
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.ex-facts .is-tbd span:last-child { color: var(--ink-3); font-style: italic; }

.ex-price {
  margin-top: clamp(24px, 3vw, 34px);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem); letter-spacing: -.01em;
}
.ex-buy { margin-top: 20px; }
.ex-incart { margin-top: 12px; font-size: .88rem; color: var(--ink-3); }
.ex-sold {
  margin-top: 20px; padding: 20px 22px; border: 1px solid var(--ink);
}
.ex-sold__label {
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .28em; text-transform: uppercase; margin-bottom: 8px;
}

/* De studio-opname staat op ivoor: geen kader, het stuk zweeft op de pagina.
   Vandaar ook een ivoren kaderachtergrond in plaats van de gebruikelijke zandtint. */
.ex-main--studio,
.media--plain,
.pcard__media--plain { background: var(--ivory); }

.ex-plate { padding-block: clamp(50px, 8vw, 110px); background: var(--ivory); }
.ex-plate__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding-bottom: 20px; border-bottom: 1px solid var(--line-soft);
}
.ex-plate__head .eyebrow { margin-bottom: 0; }
.ex-plate__meta {
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.ex-plate__figure { margin-top: clamp(26px, 4vw, 48px); text-align: center; }
.ex-plate__figure picture { display: inline-block; max-width: min(640px, 88%); }
.ex-plate__figure img { width: 100%; height: auto; }
.ex-plate__figure figcaption {
  margin: clamp(18px, 3vw, 30px) auto 0; max-width: 46ch;
  font-size: .92rem; color: var(--ink-3);
}

/* 1 OF 1 — het typografische moment */
.oneofone {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 4vw, 48px);
  padding: clamp(40px, 7vw, 90px) 0 clamp(20px, 3vw, 34px);
}
.oneofone span {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(4rem, 17vw, 13rem); line-height: .84; letter-spacing: -.03em;
}
.oneofone .oneofone__of {
  font-size: clamp(.9rem, 2vw, 1.4rem); letter-spacing: .3em;
  text-transform: uppercase; color: var(--ink-3);
  align-self: center;
}

.compare { display: grid; gap: clamp(24px, 3vw, 44px); margin-top: clamp(30px, 4vw, 50px); }
@media (min-width: 760px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare__col { padding-top: 22px; border-top: 1px solid var(--line); }
.compare__col--accent { border-top-color: var(--ink); }
.compare__title {
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .22em; text-transform: uppercase; margin-bottom: 16px;
}
.compare__col li { padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: .95rem; color: var(--ink-2); }
.compare__col--accent li { color: var(--ink); }

.ex-final { text-align: center; padding-block: clamp(50px, 8vw, 110px); }
.ex-final p { font-family: var(--font-display); font-weight: 400;
              font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.35; color: var(--ink); }
.ex-final p + p { margin-top: .25em; }
.ex-final .ex-final__meta {
  font-family: var(--font-body); font-size: .95rem; color: var(--ink-3);
  margin-top: clamp(24px, 3vw, 36px);
}
.ex-final .btn-row { justify-content: center; }

/* ── Inspiratieraster ───────────────────────────────────────── */
.insp {
  display: grid; gap: clamp(10px, 1.4vw, 18px);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .insp { grid-template-columns: repeat(4, 1fr); } }
.insp figure { overflow: hidden; background: var(--sand-deep); aspect-ratio: 1 / 1; }
.insp picture { display: block; width: 100%; height: 100%; }
.insp img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
@media (hover: hover) { .insp figure:hover img { transform: scale(1.04); } }
.insp .insp--wide { grid-column: span 2; aspect-ratio: 2 / 1; }

/* Zes beelden met een onderschrift: atelier, detail, rand, interieur, uniek stuk */
@media (min-width: 760px) { .insp--6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .insp--6 { grid-template-columns: repeat(6, 1fr); } }
.insp--6 figure { aspect-ratio: auto; background: none; }
.insp--6 picture { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sand-deep); }
.insp--6 figcaption {
  margin-top: 10px;
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.about-head .h2 { margin-bottom: clamp(18px, 2.4vw, 28px); }

/* ── Over MAHOWA ────────────────────────────────────────────────
   De pagina had een oprichtersblok: portret, citaat, principes. Dat is er
   in september 2026 uit gegaan en niet vervangen door een ander gezicht.
   Wat ervoor in de plaats komt is typografie en twee foto's van hout.

   Er zitten geen kaarten in, geen icoontjes en geen verlopen. Een merk dat
   zegt dat het één ding doet, hoort dat ook in zijn opmaak te laten zien:
   een grote zin, een haarlijn, twee kolommen. */
.overkop__zin {
  /* 24ch en niet 18: op 18 brak "Daar houdt het ongeveer op." alsnog af en
     stond er een losse "op." op de derde regel. De <br> in de HTML zet de
     twee zinnen onder elkaar; deze maat moet daar alleen niet tussen komen. */
  max-width: 24ch;
  margin-bottom: clamp(26px, 3.4vw, 42px);
  text-wrap: balance;
}
.overkop__tekst p + p { margin-top: 1.05em; }
/* "Wij kiezen eik. Punt." is geen gewone alinea maar het einde van het
   betoog. Hij staat daarom op de maat van een tussenkop. */
.overkop__punt {
  margin-top: clamp(20px, 2.6vw, 28px);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.25;
  letter-spacing: -.008em; color: var(--ink);
}

/* De ronding en de achtergrond zitten op een eigen omhulsel en niet op de
   hele figure. Stonden ze op de figure, dan viel het bijschrift binnen dat
   getinte vlak en las het als een balkje dat aan de foto vastzit in plaats
   van als een onderschrift. */
.overbeeld { margin: 0 auto; max-width: 1100px; }
.overbeeld__kader {
  display: block;
  border-radius: var(--beeldronding);
  overflow: hidden;
  background: var(--sand-deep);
}
.overbeeld picture { display: block; }
.overbeeld img { width: 100%; height: auto; display: block; }
.overbeeld__bij {
  padding-top: 14px;
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}

/* De haarlijn. Eén punt hoog en over de volle kolom: dat is genoeg om twee
   gedachten te scheiden zonder er een kader omheen te zetten. */
.overlijn {
  height: 1px;
  background: var(--line);
  margin-bottom: clamp(38px, 5vw, 64px);
}

.overblok { display: grid; gap: clamp(18px, 3vw, 40px); }
@media (min-width: 900px) {
  /* De kop links, de tekst rechts: een redactionele indeling, en de kop
     blijft daardoor kort genoeg om in één regel te staan. */
  .overblok { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
}
.overblok__kop { margin: 0; }
.overblok__tekst p + p { margin-top: 1.05em; }

/* ── Wat we wel en niet doen ────────────────────────────────────
   Twee kolommen met een lijn ertussen. Geen vinkjes en geen kruisjes: de
   koppen zeggen het al, en zo'n rij icoontjes maakt van een standpunt een
   infographic. Onder de 760 px staan ze onder elkaar, met de lijn boven de
   tweede kop in plaats van ertussen. */
.welniet { display: grid; gap: clamp(30px, 4vw, 56px); }
@media (min-width: 760px) {
  .welniet { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 92px); }
  .welniet__kolom + .welniet__kolom {
    padding-left: clamp(40px, 6vw, 92px);
    border-left: 1px solid var(--line);
  }
}
@media (max-width: 759px) {
  .welniet__kolom + .welniet__kolom {
    padding-top: clamp(28px, 5vw, 40px);
    border-top: 1px solid var(--line);
  }
}
.welniet__kop {
  margin: 0 0 clamp(18px, 2.4vw, 26px);
  font-family: var(--font-display); font-weight: 400;
  font-size: .78rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink);
}
.welniet__lijst { list-style: none; margin: 0; padding: 0; }
.welniet__lijst li {
  padding: clamp(11px, 1.4vw, 15px) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.45;
  color: var(--ink);
  max-width: 34ch;
}
.welniet__lijst li:last-child { border-bottom: 0; }
/* Wat we niet doen staat in de bijkleur. Niet doorgestreept en niet rood:
   het is geen waarschuwing, het is een grens. */
.welniet__lijst--niet li { color: var(--ink-3); }

/* ── Het slot ───────────────────────────────────────────────────
   De tweede foto staat naast de uitsmijter en niet eronder: staand beeld
   naast staande tekst leest als één blok, en de knop komt zo mee in beeld.
   Op een telefoon gaat de foto eerst. */
.slot { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) {
  .slot { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
}
.slot__beeld {
  margin: 0;
  border-radius: var(--beeldronding);
  overflow: hidden;
  background: var(--sand-deep);
}
.slot__beeld picture { display: block; }
.slot__beeld img { width: 100%; height: auto; display: block; }
.slot__kop { margin-bottom: clamp(20px, 2.6vw, 30px); text-wrap: balance; }
.slot__tekst p + p { margin-top: 1.05em; }
.slot__knop { margin-top: clamp(26px, 3.4vw, 38px); }
@media (max-width: 520px) { .slot__knop .btn { width: 100%; text-align: center; } }

.pillars {
  display: grid; gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(40px, 6vw, 76px);
}
@media (min-width: 760px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillars li { padding-top: 20px; border-top: 1px solid var(--line); }
.pillars__n {
  display: block; margin-bottom: 12px;
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .2em; color: var(--ink-3);
}
.pillars h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.02rem; letter-spacing: .02em; margin-bottom: 8px;
}
.pillars p { font-size: .93rem; color: var(--ink-2); line-height: 1.6; }

.about-cta { margin-top: clamp(38px, 5vw, 64px); text-align: center; }

/* ── Europese herkomst ──────────────────────────────────────── */
.origin__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.55; color: var(--ink);
  max-width: 44ch;
}
.origin__statement {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.32;
  letter-spacing: -.006em; color: var(--ink);
  margin-top: clamp(26px, 3vw, 36px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--line);
  max-width: 40ch;
}


.trustline {
  display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 3vw, 38px);
  margin-top: clamp(30px, 3.6vw, 44px);
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.trustline li {
  position: relative;
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
@media (min-width: 560px) {
  .trustline li + li::before {
    content: "·"; position: absolute;
    left: calc(clamp(18px, 3vw, 38px) / -2 - 3px); color: var(--line);
  }
}

/* ── Slotregel en slotsectie ────────────────────────────────── */
.closing-line {
  margin: clamp(40px, 5vw, 62px) auto 0;
  max-width: 46ch; text-align: center;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.4; color: var(--ink);
}

/* Een slotwoord staat in het midden, net als op de homepage — links
   uitgelijnd liet het de halve breedte leeg. */
.final-word { text-align: center; }
.final-word .h2 {
  text-wrap: balance;
  max-width: 22ch; margin-inline: auto;
  margin-bottom: clamp(22px, 2.8vw, 32px);
}
.final-word .measure { margin-inline: auto; }
.final-word .measure p + p { margin-top: 1.1em; }

/* ── Stappen met nummers (werkwijze) ────────────────────────── */
.flow { counter-reset: step; border-top: 1px solid var(--line-soft); }
.flow li {
  display: grid; gap: 4px 24px;
  padding: 20px 0; border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 640px) { .flow li { grid-template-columns: 5rem 14rem 1fr; align-items: baseline; } }
.flow li::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .2em; color: var(--ink-3);
}
.flow h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.02rem; }
.flow p { font-size: .93rem; color: var(--ink-3); }

/* ══════════════════════════════════════════════════════════════
   Losse stukken — Select en 1 of 1
   Een raster van exemplaren, en een productpagina die eerder
   aanvoelt als een materiaalarchief dan als een winkelpagina.
   ══════════════════════════════════════════════════════════════ */

/* ── Standard of Select ──────────────────────────────────────── */
.tiers {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  grid-template-columns: 1fr;
  margin-top: clamp(26px, 3.4vw, 40px);
}
@media (min-width: 760px) { .tiers { grid-template-columns: 1fr 1fr; } }

.tier {
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--line-soft);
  background: var(--ivory-hi);
}
.tier--now { border-color: var(--line); background: var(--sand); }
.tier__label {
  font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 10px;
}
.tier p { font-size: .92rem; }
.tier__here {
  display: inline-block; margin-top: 12px;
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}

/* ── Filterbalk ──────────────────────────────────────────────── */
.piece-bar {
  display: flex; flex-wrap: wrap; gap: clamp(10px, 2vw, 26px);
  padding-bottom: 18px; border-bottom: 1px solid var(--line-soft);
}
.piece-bar__group { display: flex; flex-wrap: wrap; gap: 8px; }
.piece-bar .chip[aria-pressed="true"] {
  border-color: var(--ink); background: var(--ink); color: var(--ivory);
}
.piece-count {
  margin: 16px 0 clamp(20px, 2.6vw, 30px);
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}

/* ── Raster van stukken ──────────────────────────────────────── */
.piece-grid {
  display: grid; gap: clamp(18px, 2.6vw, 34px);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .piece-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .piece-grid { grid-template-columns: repeat(4, 1fr); } }

/* Ligt er maar één stuk, dan neemt het de volle breedte in plaats van één
   kolom — een kaart naast leegte leest als een raster waar iets uit weg is.
   Vanaf 760 px komt het beeld naast de gegevens te staan; zie onderaan. */
.klaar .piece-card:only-child,
.piece-grid .piece-card:only-child { grid-column: 1 / -1; }

.piece-card { display: flex; flex-direction: column; }
.piece-card__media {
  position: relative; display: block; aspect-ratio: 4 / 5;
  background: var(--sand-deep); overflow: hidden;
}
.piece-card__media picture { display: block; width: 100%; height: 100%; }
.piece-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s var(--ease);
}
/* Alleen op apparaten die echt hover kennen: op een telefoon blijft
   een :hover na het tikken hangen. */
@media (hover: hover) { .piece-card__media:hover img { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .piece-card__media img { transition: none; } }

/* Uitgeknipte opname: het stuk staat op de paginakleur zelf, dus geen vlak
   eronder. En niet bijsnijden — met `cover` valt juist de rand weg. */
.piece-card__media--vrij { background: transparent; }
.piece-card__media--vrij img { object-fit: contain; }

.piece-card__stamp {
  position: absolute; inset: auto 0 0 0;
  padding: 9px 12px; background: rgba(33, 30, 26, .82); color: var(--ivory);
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .22em; text-transform: uppercase; text-align: center;
}
.piece-card--sold .piece-card__media img { opacity: .55; }

.piece-card__id {
  margin-top: 14px;
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
}
.piece-card__dims { margin-top: 6px; font-size: .92rem; color: var(--ink-2); }
.piece-card__meta { margin-top: 4px; font-size: .82rem; color: var(--ink-3); flex: 1; }
.piece-card__price { margin-top: 12px; font-size: 1.02rem; font-weight: 500; color: var(--ink); }
.piece-card__cta { margin-top: 14px; align-self: flex-start; }

/* ── Lege lijst ──────────────────────────────────────────────── */
.piece-empty {
  padding: clamp(30px, 5vw, 60px) 0;
  border-top: 1px solid var(--line-soft);
  max-width: 56ch;
}
.piece-empty__line {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--ink);
  margin-bottom: 12px;
}
.piece-empty .btn-row { margin-top: clamp(20px, 2.6vw, 28px); }

/* ── Stukpagina ──────────────────────────────────────────────── */
.piece__main { background: var(--sand-deep); }

.piece__views { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.piece__view {
  display: block; padding: 0; border: 1px solid var(--line-soft);
  background: none; cursor: pointer; width: 82px;
}
.piece__view img {
  display: block; width: 100%; height: 84px; object-fit: cover;
}
.piece__view span {
  display: block; padding: 5px 0;
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .16em; color: var(--ink-3);
}
.piece__view[aria-pressed="true"] { border-color: var(--ink); }
.piece__view[aria-pressed="true"] span { color: var(--ink); }

.piece__viewhint {
  margin-top: 12px; font-size: .8rem; color: var(--ink-3); letter-spacing: .01em;
}

.piece__tier .only-select,
.piece__tier .only-signature { display: none; }
.piece[data-tier="select"] .only-select { display: inline; }
.piece[data-tier="signature"] .only-signature { display: inline; }

.piece__id { letter-spacing: .06em; }
.piece__species {
  margin-top: 4px;
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
}

/* Maatlijnen, zoals in een materiaalcatalogus */
.piece__dims {
  display: flex; gap: clamp(18px, 3vw, 40px);
  margin: clamp(22px, 3vw, 30px) 0;
  padding: 18px 0; border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.piece__dimv {
  display: block;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1; color: var(--ink);
}
.piece__diml {
  display: block; margin-top: 6px;
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}

.piece__promise {
  margin-bottom: clamp(20px, 2.6vw, 26px);
  font-size: .92rem; color: var(--ink-2);
  padding-left: 14px; border-left: 2px solid var(--oak);
}

.piece__sold {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--ink);
  letter-spacing: .04em; margin-bottom: 10px;
}

/* ── Materiaalpaspoort ───────────────────────────────────────── */
.passport {
  margin-top: clamp(28px, 3.4vw, 40px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--line);
}
.passport__head {
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
}
.passport .specs-flat { margin-top: 14px; }
.passport__note { font-size: .82rem; color: var(--ink-3); }

/* ══════════════════════════════════════════════════════════════
   Respons in de winkel
   ══════════════════════════════════════════════════════════════ */

.chip {
  transition: border-color .25s var(--ease), color .25s var(--ease),
              background-color .25s var(--ease), transform .14s var(--ease);
}
.chip:active { transform: scale(.96); }

.mount, .choice, .kleur {
  transition: border-color .25s var(--ease), background-color .25s var(--ease),
              transform .14s var(--ease);
}
.mount:active, .choice:active, .kleur:active { transform: scale(.99); }

.check:active span { opacity: .6; }
.stepper button { transition: color .3s var(--ease), transform .12s var(--ease); }
.stepper button:active { transform: scale(.86); }
.cart-row__remove:active { opacity: .5; }

/* Raakvlakken op een telefoon */
@media (max-width: 760px) {
  .chip { min-height: 44px; }
  .stepper button { min-width: 44px; min-height: 44px; }
}

/* De aanzichten van één stuk */
.piece__view {
  transition: border-color .25s var(--ease), transform .14s var(--ease);
}
.piece__view:active { transform: scale(.96); }

/* ══════════════════════════════════════════════════════════════
   Koopbalk op smalle schermen
   Verschijnt zodra de echte knop uit beeld is, en verdwijnt weer
   zodra die terugkomt — nooit twee dezelfde knoppen tegelijk.
   ══════════════════════════════════════════════════════════════ */
.buybar {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  background: rgba(246, 242, 236, .97);
  border-top: 1px solid var(--line);
  padding: 10px var(--gutter);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  transition: transform .34s var(--ease), opacity .28s var(--ease);
}
@supports (backdrop-filter: blur(10px)) {
  .buybar { background: rgba(246, 242, 236, .86); backdrop-filter: blur(12px); }
}

/* Niet met het hidden-attribuut werken: style.css zet daar
   display:none !important op, en dan valt er niets te animeren.
   De balk staat dus standaard onder de rand en schuift omhoog. */
.buybar {
  transform: translateY(118%);
  opacity: 0;
  pointer-events: none;
}
.buybar.is-on {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.buybar__inner {
  display: flex; align-items: center; gap: 14px;
  max-width: var(--maxw); margin-inline: auto;
}
.buybar__price {
  display: flex; flex-direction: column; line-height: 1.15;
  font-family: var(--font-display); font-size: 1.05rem; color: var(--ink);
  white-space: nowrap;
}
.buybar__label {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2);
}
.buybar--nopricing .buybar__price { display: none; }
.buybar__btn { flex: 1; text-align: center; }

.buybar.is-done .buybar__btn { background: #3F5E43; border-color: #3F5E43; }

@media (min-width: 900px) { .buybar { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .buybar { transition: none; } }

/* Verwijderen is onomkeerbaar: geef het een fatsoenlijk raakvlak in
   plaats van een regel tekst van 24 px hoog. */
.cart-row__remove { padding: 6px 0; }

@media (max-width: 760px) {
  .stepper input { height: 44px; }
  .cart-row__remove { padding: 10px 0; }
}


/* De vier manieren: hetzelfde kaartje als de collecties, maar met z'n
   vieren naast elkaar op een breed scherm. */
.ways {
  display: grid; gap: clamp(26px, 3vw, 42px);
  grid-template-columns: 1fr;
  margin-top: clamp(28px, 3.6vw, 46px);
}
@media (min-width: 620px)  { .ways { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .ways { grid-template-columns: repeat(3, 1fr); } }

.ways .collection__name { font-size: clamp(1.35rem, 1.9vw, 1.75rem); }
.ways .collection__sub { font-size: .9rem; flex: 1; }

/* Sorteren is een keuzemenu: op een telefoon hoort het even goed
   aanraakbaar te zijn als de rest. */
@media (max-width: 760px) {
  .catalog__sort select { min-height: 44px; font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════
   Contact — formulier met een kolom die antwoord geeft
   Een formulier alleen op een leeg vlak voelt als een balie zonder
   iemand erachter. Ernaast staat wat mensen hier komen zoeken:
   hoe snel we antwoorden, waar het atelier ligt, en de kortere weg
   voor wie gewoon wil bestellen.
   ══════════════════════════════════════════════════════════════ */
.contact {
  display: grid;
  gap: clamp(34px, 5vw, 70px);
  padding-bottom: clamp(50px, 7vw, 96px);
}
@media (min-width: 900px) {
  .contact {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .72fr);
    align-items: start;
  }
  .contact-aside { position: sticky; top: calc(var(--kop-vast) + 28px); }
}
@media (prefers-reduced-motion: reduce) { .contact-aside { position: static; } }

.contact-aside__media {
  background: var(--sand-deep); overflow: hidden;
  margin-bottom: clamp(24px, 2.8vw, 32px);
}
.contact-aside__media picture { display: block; }
.contact-aside__media img {
  display: block; width: 100%; height: 100%;
  /* De opname is vierkant; een hoger kader zou de vaas en de plank eruit
     snijden. */
  aspect-ratio: 1 / 1; object-fit: cover;
}

.contact-aside__block {
  padding-top: clamp(18px, 2vw, 22px);
  margin-top: clamp(18px, 2vw, 22px);
  border-top: 1px solid var(--line-soft);
}
.contact-aside__block:first-of-type { border-top: 1px solid var(--line); }
.contact-aside__label {
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 8px;
}
.contact-aside__block p { font-size: .92rem; }
.contact-aside__block .link { display: inline-block; margin-top: 12px; font-size: .9rem; }

/* ── Verwijzingen naar de servicepagina's ────────────────────── */
.helpgrid {
  display: grid; gap: 0;
  margin-top: clamp(28px, 3.6vw, 46px);
}
.helpgrid li { border-top: 1px solid var(--line-soft); }
.helpgrid li:first-child { border-top-color: var(--line); }
.helpgrid a {
  display: block; padding: clamp(18px, 2.2vw, 24px) 0;
  transition: background-color .3s var(--ease);
}
.helpgrid__name {
  display: block;
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.05rem; color: var(--ink);
}
.helpgrid__desc {
  display: block; margin-top: 6px;
  font-size: .88rem; color: var(--ink-3);
}
@media (min-width: 820px) {
  .helpgrid { grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.6vw, 34px); }
  .helpgrid li { border-top: 1px solid var(--line); }
  .helpgrid a { padding: clamp(18px, 2vw, 22px) 0 0; }
}
@media (hover: hover) {
  .helpgrid a:hover .helpgrid__name { text-decoration: underline; text-underline-offset: 4px; }
}

/* ══════════════════════════════════════════════════════════════
   De shoppagina — vier niveaus op ware grootte

   Vier kolommen naast elkaar gaven op een breed scherm kaartjes van
   nog geen 300 px: alles paste, niets sprak. Twee naast elkaar geeft
   het beeld ruimte en de tekst gewicht. Eén zin per niveau zegt wat
   je krijgt; drie regels opsomming in lichtgrijs zeiden alles, en
   dus niets.
   ══════════════════════════════════════════════════════════════ */
.ways--shop { gap: clamp(30px, 3.4vw, 56px); }
@media (min-width: 780px)  { .ways--shop { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .ways--shop { grid-template-columns: 1fr 1fr; } }

.ways--shop .collection__media { aspect-ratio: 5 / 4; margin-bottom: 26px; }

.ways--shop .collection__label {
  color: var(--ink); font-size: .74rem; letter-spacing: .24em; margin-bottom: 12px;
}
.ways--shop .collection__name {
  font-size: clamp(2.1rem, 3.4vw, 3.1rem); line-height: 1.02; letter-spacing: -.02em;
}
.ways--shop .collection__sub {
  margin-top: 14px; max-width: 24ch; flex: none;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.3;
  letter-spacing: -.005em; color: var(--ink);
}
.ways--shop .collection__price {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 1rem; color: var(--ink);
}
.ways--shop .collection__cta { margin-top: 20px; }

/* Het niveau dat maar één keer bestaat, staat ook maar één keer op donker. */
.ways--shop .collection--dark {
  background: var(--ink);
  padding: clamp(22px, 2.4vw, 30px);
}
/* Het beeld loopt tot aan de rand van de kaart; alleen de tekst staat
   binnen de marge. Anders is het kader van deze kaart zichtbaar kleiner
   dan dat van de buren. */
.ways--shop .collection--dark .collection__media {
  background: #2C2823;
  margin: calc(-1 * clamp(22px, 2.4vw, 30px));
  margin-bottom: 24px;
}
.ways--shop .collection--dark .collection__label,
.ways--shop .collection--dark .collection__name,
.ways--shop .collection--dark .collection__sub,
.ways--shop .collection--dark .collection__price { color: var(--ivory); }
.ways--shop .collection--dark .collection__price { border-top-color: rgba(246, 242, 236, .28); }
.ways--shop .collection--dark .btn--solid {
  background: var(--ivory); border-color: var(--ivory); color: var(--ink);
}
@media (hover: hover) {
  .ways--shop .collection--dark .btn--solid:hover { background: #fff; border-color: #fff; }
}

/* Op de homepage staan de vier niveaus als overzicht, kleiner dan in de
   shop. De zin eronder is nu kort — dan mag ze ook daar zwaarder staan. */
.ways .collection__sub {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.3; color: var(--ink);
}

/* De vier combinaties op de Custom-pagina zijn geen bijproducten maar de
   hele keuze: twee naast elkaar in plaats van vier smalle kolommen. */
.pgrid--groot { gap: clamp(28px, 3.4vw, 54px); }
@media (min-width: 780px) { .pgrid--groot { grid-template-columns: 1fr 1fr; } }
.pgrid--groot .pcard__media { aspect-ratio: 5 / 4; }
.pgrid--groot .pcard__label {
  color: var(--ink); letter-spacing: .24em; margin-bottom: 10px;
}
.pgrid--groot .pcard__name { font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.05; }
.pgrid--groot .pcard__desc {
  margin-top: 12px; flex: none; max-width: 26ch;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.3; color: var(--ink);
}
.pgrid--groot .pcard__price {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 1rem;
}

/* ══════════════════════════════════════════════════════════════
   Winkel — drie manieren

   Geen kaarten. Een kaart nodigt uit tot vergelijken op prijs, en dat
   is hier de verkeerde vraag: het hout is in alle drie hetzelfde. Wat
   verschilt is hoeveel je zelf kiest, en dat lees je in de belofte —
   daarom staat die groot en de naam klein erboven.
   ══════════════════════════════════════════════════════════════ */

.winkelkop .display { margin-top: 14px; }
.winkelkop .measure { margin-top: clamp(22px, 2.6vw, 32px); }

/* De index: drie regels waarin het verschil in één blik te lezen is. */
.index3 {
  margin-top: clamp(46px, 6vw, 86px);
  display: grid;
  border-top: 1px solid var(--line);
}
@media (min-width: 820px) { .index3 { grid-template-columns: repeat(3, 1fr); } }

/* Zowel links (in de winkel) als gewone cellen (de tarieven op
   /shipping/) krijgen dezelfde lijnen. */
.index3 > * {
  display: grid; align-content: start; gap: 7px;
  padding: clamp(20px, 2.4vw, 30px) 0 clamp(24px, 2.8vw, 34px);
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 820px) {
  .index3 > * { padding-inline: clamp(18px, 2.4vw, 34px); }
  .index3 > *:first-child { padding-left: 0; }
  .index3 > *:last-child { padding-right: 0; }
  .index3 > * + * { border-left: 1px solid var(--line-soft); }
}

.index3__naam {
  font-family: var(--font-display); font-size: 1.14rem;
  letter-spacing: .05em; color: var(--ink);
}
/* Het pijltje verschijnt pas bij aanwijzen: in rust is de index alleen
   tekst, en dat houdt de bovenkant van de pagina rustig. */
.index3__naam::after {
  content: " \2192"; display: inline-block;
  opacity: 0; transform: translateX(-5px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.index3 a:hover .index3__naam::after,
.index3 a:focus-visible .index3__naam::after { opacity: 1; transform: none; }

.index3__regel { font-size: .97rem; line-height: 1.55; color: var(--ink-2); max-width: 32ch; }
.index3__meta { margin-top: 3px; font-size: .82rem; color: var(--ink-3); }

/* De drie hoofdstukken. Veel lucht ertussen: elk hoofdstuk moet als een
   eigen bladzijde lezen, niet als een rij in een lijst. */
.wegen { display: grid; gap: clamp(72px, 11vw, 172px); }

.weg { display: grid; gap: clamp(24px, 4vw, 44px); align-items: center; }
@media (min-width: 900px) {
  .weg { grid-template-columns: 1fr 1fr; gap: clamp(44px, 6vw, 96px); }
  .weg--gedraaid .weg__media { order: 2; }
}
.weg__media { display: block; }

/* De naam van de categorie voert. Op deze pagina kiest de bezoeker tussen
   drie categorieën; dan hoort de naam daarvan het grootste woord te zijn en
   de belofte de regel die uitlegt wat hij betekent. */
.weg__naam {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.02; letter-spacing: -.018em;
  color: var(--ink);
}
.weg__belofte {
  margin-top: clamp(12px, 1.4vw, 18px);
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  line-height: 1.45; color: var(--ink-2);
  text-wrap: balance; max-width: 34ch;
}
.weg__tekst .measure { margin-top: clamp(18px, 2.2vw, 26px); max-width: 46ch; }
.weg__prijs {
  margin-top: clamp(18px, 2.2vw, 26px);
  font-size: .92rem; line-height: 1.6; color: var(--ink-3); max-width: 46ch;
}
.weg__nummer { margin-top: clamp(16px, 2vw, 22px); font-size: .92rem; }

/* Hoe Select werkt, in drie regels op haarlijnen. */
.hoe {
  margin-top: clamp(24px, 3vw, 34px);
  display: grid; max-width: 46ch;
  border-top: 1px solid var(--line-soft);
}
.hoe li {
  display: grid; gap: 3px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.hoe__kop { font-family: var(--font-display); font-size: .95rem; }
.hoe__uitleg { font-size: .88rem; line-height: 1.55; color: var(--ink-3); }

/* Op maat is geen categorie maar een uitweg onderaan de winkel. */
.opmaat {
  display: grid; gap: clamp(22px, 3vw, 34px);
  padding-top: clamp(30px, 4vw, 46px);
  border-top: 1px solid var(--line);
}
@media (min-width: 820px) {
  .opmaat { grid-template-columns: 1.5fr auto; align-items: end; }
}
.opmaat .measure { margin-top: 16px; }

/* ── Collection: een eigen band ─────────────────────────────────────
   Zwart met betongrijs. De waarden zijn nagerekend op #1A1815: de
   lopende tekst haalt 10,1:1 en het label 7,0:1, ruim boven de 4,5:1
   die WCAG AA vraagt.

   De foto houdt zijn ivoren plaat. Die plaat op zwart leest als een
   sokkel; hem betongrijs maken zou de hele opname donkerder
   vermenigvuldigen en dan klopt de kleur van het eiken niet meer. */
.wegband {
  background: #1A1815;
  color: #C9C3BA;
}
.wegband .eyebrow { color: #A8A29A; }
.wegband .measure p { color: #C9C3BA; }

.band__kop { max-width: 64ch; }
/* Zelfde verhouding als hierboven: de naam groot, de belofte eronder.
   Let op: .band__naam bestond al voor het bijschrift bij het stuk verderop
   in deze band. Vandaar een eigen naam. */
.band__categorie {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.02; letter-spacing: -.018em;
  color: #F3EFE8;
}
.band__belofte {
  margin-top: clamp(12px, 1.4vw, 18px);
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  line-height: 1.45; color: #C9C3BA;
  max-width: 34ch;
}
.band__kop .measure { margin-top: clamp(20px, 2.4vw, 30px); }

/* Het stuk zelf: over de volle breedte, met een zachte lichtkring erachter
   zodat het in een spot staat in plaats van op een zwart vlak. */
.band__stuk { display: block; position: relative; margin-top: clamp(40px, 5.5vw, 78px); }
.band__stuk::before {
  content: "";
  position: absolute; inset: -10% -6% 12%;
  background: radial-gradient(ellipse at 50% 46%,
              rgba(233, 226, 214, .11), rgba(233, 226, 214, 0) 66%);
  pointer-events: none;
}
/* Het stuk is uitgeknipt, dus er ligt geen plaat meer onder: alleen het hout
   op het zwart, met de lichtkring van .band__stuk::before eromheen. */
.band__plaat {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--beeldronding); background: transparent;
}
.band__plaat img { display: block; width: 100%; height: auto; transition: transform 1.2s var(--ease); }
.band__stuk:hover .band__plaat img { transform: scale(1.015); }

.band__regel {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px clamp(14px, 2.2vw, 28px);
  margin-top: 18px; padding-top: 15px;
  border-top: 1px solid rgba(237, 233, 226, .18);
}
.band__nr {
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .26em; color: #A8A29A;
}
.band__naam { font-family: var(--font-display); font-size: 1.08rem; color: #F3EFE8; }
.band__maat { font-size: .9rem; color: #A8A29A; }
/* Standard en Select noemen allebei een prijs in hun blok. Zonder deze regel
   was Collection het enige hoofdstuk waar je ervoor moest doorklikken. */
.band__prijs { font-size: .9rem; color: #F3EFE8; }
.band__meer { font-size: .9rem; color: #F3EFE8; }
@media (min-width: 620px) { .band__meer { margin-left: auto; } }
.band__stuk:hover .band__meer { text-decoration: underline; text-underline-offset: 4px; }

.band__voet { margin-top: clamp(32px, 4vw, 50px); }
/* Op zwart is een ivoren knop het enige dat echt roept. Dat is hier de
   bedoeling: dit blok moet mensen naar binnen halen. */
.wegband .btn--solid { background: #F3EFE8; border-color: #F3EFE8; color: #1A1815; }
.wegband .btn--solid:hover { background: #FFF; border-color: #FFF; }

/* ── Levering ───────────────────────────────────────────────────────
   De belofte staat in werkdagen, de regel eronder in echte datums.
   levering.js vult die; zonder JavaScript blijft ze verborgen. */
.leverdatum {
  margin-top: clamp(18px, 2.2vw, 26px);
  font-size: 1rem; line-height: 1.6; color: var(--ink-2);
  max-width: 52ch;
}

/* De stappen. Elke cel krijgt een eigen bovenlijn: in twee kolommen zou
   één lijn boven het geheel de rechterkolom zonder lijn laten beginnen. */
.stappen { display: grid; }
@media (min-width: 760px) {
  .stappen { grid-template-columns: 1fr 1fr; column-gap: clamp(30px, 5vw, 80px); }
}
.stappen li {
  display: grid; gap: 5px;
  padding: 17px 0 20px;
  border-top: 1px solid var(--line-soft);
}
.stappen__kop { font-family: var(--font-display); font-size: 1.04rem; }
.stappen__uitleg { font-size: .92rem; line-height: 1.65; color: var(--ink-2); max-width: 46ch; }

/* ── De lengte als uitklaplijst ─────────────────────────────────────
   Dertien knoppen namen drie regels; dit is er één. Achter elke maat
   staat wat die maat kost met de diepte, dikte en kwaliteit die je op dat
   moment hebt staan — verander je iets, dan verspringt de hele lijst. */
/* De ruimte tussen twee keuzes hing aan .chips; deze lijst staat op die
   plek en heeft dezelfde ruimte eronder nodig. */
.maatkies { position: relative; }
.maatkies + .cfg__head { margin-top: 26px; }

.maatknop {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: none; border: 1px solid var(--line); border-radius: var(--vormronding);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: border-color .25s var(--ease);
}
.maatknop:hover { border-color: var(--ink-3); }
.maatknop[aria-expanded="true"] { border-color: var(--ink); }
.maatknop__maat { font-size: 1rem; }
.maatknop__prijs { margin-left: auto; font-size: .95rem; color: var(--ink-2); }
.maatknop__pijl {
  width: 8px; height: 8px; flex: none;
  border-right: 1px solid var(--ink-2); border-bottom: 1px solid var(--ink-2);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease);
}
.maatknop[aria-expanded="true"] .maatknop__pijl { transform: rotate(225deg) translate(-3px, -3px); }

.maatlijst {
  position: absolute; z-index: 6; left: 0; right: 0; top: calc(100% + 6px);
  /* Op een gewoon scherm passen alle dertien maten in één blik; op een
     lage laptop scrollt de lijst in plaats van van het scherm te lopen. */
  max-height: min(58vh, 660px); overflow-y: auto;
  padding: 6px; margin: 0;
  background: var(--ivory); border: 1px solid var(--line);
  border-radius: var(--vormronding);
  box-shadow: 0 14px 38px rgba(33, 30, 26, .10);
}
.maatlijst[hidden] { display: none; }

.maatoptie {
  width: 100%; display: flex; align-items: baseline; gap: 12px;
  padding: 10px 12px;
  background: none; border: 0; border-radius: var(--vormronding);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.maatoptie:hover { background: rgba(33, 30, 26, .045); }
.maatoptie__prijs { margin-left: auto; font-size: .9rem; color: var(--ink-3); }
.maatoptie.is-active { background: var(--ink); color: var(--ivory); }
.maatoptie.is-active .maatoptie__prijs { color: var(--ivory); }

/* Foutmelding bij het afrekenen. Rustig van vorm — een mislukte betaling
   is vervelend genoeg zonder een rood kader erbij. */
.checkout__melding {
  margin-top: 16px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--vormronding);
  background: rgba(33, 30, 26, .025);
  font-size: .92rem; line-height: 1.6; color: var(--ink-2);
}

/* ── De stukken die klaarliggen ─────────────────────────────────────
   Staat in het hoofdstuk Select zelf, niet als losse sectie erna: het
   zijn de stukken waar dat hoofdstuk over gaat. */
.klaar {
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(30px, 3.6vw, 44px);
  border-top: 1px solid var(--line);
}
.klaar[hidden] { display: none; }
.klaar__kop {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 8px clamp(16px, 2.4vw, 30px);
  margin-bottom: clamp(24px, 3vw, 36px);
}
.klaar__titel { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.klaar__regel { font-size: .92rem; color: var(--ink-2); }
@media (min-width: 700px) { .klaar__kop .link { margin-left: auto; } }

/* ── De hoofdactie van een hoofdstuk ────────────────────────────────
   Een knop en geen tekstlink: dit is de weg waar de bezoeker heen moet.
   De pijl zit in de opmaak en niet in de tekst, zodat hij kan bewegen
   zonder dat er een teken in de zin blijft staan. */
.weg__cta,
.band__voet .btn {
  gap: 12px;
  padding-inline: clamp(26px, 3vw, 34px);
}
.weg__cta { margin-top: clamp(22px, 2.6vw, 30px); }

.weg__cta::after,
.band__voet .btn::after {
  content: "→";   /* het teken zelf, geen escape */
  font-size: 1.05em; line-height: 0;
  transition: transform .3s var(--ease);
}
.weg__cta:hover::after,
.band__voet .btn:hover::after { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .weg__cta::after, .band__voet .btn::after { transition: none; }
}

/* De inleiding van de winkel is drie regels lang en had een halve
   schermhoogte aanloop. Het kruimelpad geeft al lucht; dit is genoeg. */
.section--kort { padding-top: clamp(18px, 2.4vw, 40px); }
.section--kort .winkelkop .measure { margin-bottom: clamp(10px, 1.6vw, 24px); }

/* Ligt er maar één stuk klaar, dan is een raster voor drie of vier vooral
   leegte. Die ene kaart gaat dan naar het midden en zet beeld en gegevens
   naast elkaar. De verhouding van het kader blijft 4:5, zodat er niets
   verspringt zodra er een tweede stuk bij komt en alles vanzelf terug gaat
   naar gewone kaarten. */
@media (min-width: 760px) {
  .klaar .piece-card:only-child,
  .piece-grid .piece-card:only-child {
    max-width: 900px; margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    column-gap: clamp(34px, 4.5vw, 60px);
    align-items: center;
  }
  .klaar .piece-card:only-child .piece-card__media,
  .piece-grid .piece-card:only-child .piece-card__media { grid-row: 1 / span 6; }
  .klaar .piece-card:only-child > :not(.piece-card__media),
  .piece-grid .piece-card:only-child > :not(.piece-card__media) { grid-column: 2; }
  .klaar .piece-card:only-child .piece-card__id,
  .piece-grid .piece-card:only-child .piece-card__id { align-self: end; }
  /* In een raster rekt een knop mee met zijn kolom. align-self stuurt de
     hoogte, niet de breedte — daarvoor is justify-self nodig. */
  .klaar .piece-card:only-child .piece-card__cta,
  .piece-grid .piece-card:only-child .piece-card__cta { justify-self: start; }
}

/* ── De uitweg onderaan Select ──────────────────────────────────────
   Eén blok en geen tweede kaart naast Select: de bezoeker heeft die
   keuze al gemaakt. Dit beantwoordt alleen wat er overblijft als er
   niets tussen zat, en zet de knop op de plek waar die vraag opkomt. */
.anders {
  display: grid; gap: clamp(18px, 2.4vw, 30px);
  padding-top: clamp(26px, 3.2vw, 40px);
  border-top: 1px solid var(--line);
}
@media (min-width: 820px) {
  .anders { grid-template-columns: minmax(0, 58ch) auto; align-items: center; }
  .anders__cta { justify-self: end; }
}
.anders__titel {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.15;
  margin-bottom: 10px;
}
.anders__tekst p:last-child { color: var(--ink-2); }

/* ── Vragen in groepen ──────────────────────────────────────────────
   Twaalf vragen onder elkaar zijn een muur; in drieën is het een lijst
   die je kunt overslaan. De kop is kleiner dan een sectiekop: hij deelt
   de pagina in, hij begint geen nieuw hoofdstuk. */
.vraaggroep { max-width: 68ch; }
.vraaggroep + .vraaggroep { margin-top: clamp(34px, 4vw, 54px); }
.vraaggroep__titel {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  margin-bottom: clamp(8px, 1.2vw, 14px);
}

/* ── Het lege vak in de collectie ───────────────────────────────────
   Een kaart zonder foto, want er is nog niets te fotograferen. Zelfde
   kader als de andere kaarten zodat het raster heel blijft. */
.pcard__media--leeg { display: grid; place-content: center; background: var(--sand); }
.pcard__wachten {
  margin: 0; padding: 0 24px; text-align: center;
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; line-height: 1.8;
  color: var(--ink-3);
}

/* ══ Account ═══════════════════════════════════════════════════════
   Vier toestanden op één pagina; account.js zet er telkens één aan. */
.account { padding-bottom: clamp(50px, 7vw, 96px); }
.account__laden { color: var(--ink-3); font-size: .92rem; }
.account__blok[hidden] { display: none !important; }

.account__form {
  display: grid; gap: 16px; align-items: end;
  max-width: 460px; margin-top: clamp(20px, 2.6vw, 30px);
}
@media (min-width: 560px) { .account__form { grid-template-columns: 1fr auto; } }
.account__melding:empty { display: none; }
.account__melding {
  margin-top: 14px; max-width: 52ch;
  font-size: .92rem; color: var(--ink-2);
}

.account__uitleg {
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: clamp(22px, 2.8vw, 30px);
  border-top: 1px solid var(--line-soft);
  font-size: .92rem; color: var(--ink-2);
}
.account__uitleg p + p { margin-top: .9em; }

/* De regel die de toestand draagt: groter dan gewone tekst, want dit is
   het antwoord waar de bezoeker op wacht. */
.account__groot {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2;
  margin-bottom: clamp(12px, 1.6vw, 18px);
}

/* Een knop die als tekstlink leest: "probeer een ander adres" is geen
   tweede hoofdactie naast de knop erboven. */
.account__opnieuw {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
}

.account__kop {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px;
  padding-bottom: 16px; margin-bottom: clamp(24px, 3vw, 34px);
  border-bottom: 1px solid var(--line);
}
.account__wie { font-size: .92rem; color: var(--ink-2); }
@media (min-width: 620px) { .account__af { margin-left: auto; } }

/* ── Eén bestelling ─────────────────────────────────────────────────
   Een kaart en geen rij met een streep eronder: een bestelling is één ding
   met een kop, een inhoud en een som, en dat leest slechter als de randen
   van de buur ertussen zitten. */
.bestelling {
  background: var(--ivory-hi);
  border: 1px solid var(--line-soft);
  border-radius: var(--vormronding);
  padding: clamp(20px, 2.6vw, 30px);
  margin-bottom: clamp(14px, 1.8vw, 20px);
}
.bestelling__kop {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
  margin-bottom: 10px;
}
.bestelling__nr {
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase;
}
.bestelling__datum { font-size: .88rem; color: var(--ink-3); }
@media (min-width: 620px) { .bestelling__datum { margin-left: auto; } }

/* De stand als een woord in een kadertje. Kleur zegt hetzelfde als de tekst
   en niets extra's: wie kleur niet ziet, mist niets. */
.bestelling__stand {
  display: inline-block;
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 12px; margin: 0 0 18px;
  border: 1px solid var(--line);
  /* Zelfde vorm als het label op een stukkaart: een korte stand hoort in een
     pil, niet in een hoekig vakje. */
  border-radius: 999px;
  color: var(--ink-2);
}
.bestelling__stand--loopt { border-color: var(--oak); color: var(--ink); }
.bestelling__stand--klaar { border-color: #4A7A57; color: #3D6849; }
.bestelling__stand--stil  { border-color: var(--line-soft); color: var(--ink-3); }

/* ── Het spoor ──────────────────────────────────────────────────────
   Vijf punten met een lijn ertussen. Geen percentages en geen animatie: het
   zegt waar de bestelling staat, niet hoe snel het gaat. Onder 560 px staan
   de namen niet meer naast elkaar zonder te breken, dus dan alleen punten
   met de huidige stap eronder in woorden. */
.spoor {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
}
.spoor__stap {
  position: relative;
  padding-top: 16px;
  text-align: center;
  font-size: .72rem; color: var(--ink-3);
}
/* De lijn loopt tussen de punten door, niet eronderdoor: hij begint en
   eindigt in het midden van de eerste en laatste punt. */
.spoor__stap::before {
  content: ''; position: absolute; top: 4px; height: 1px;
  left: 0; right: 0;
  background: var(--line-soft);
}
.spoor__stap:first-child::before { left: 50%; }
.spoor__stap:last-child::before { right: 50%; }
.spoor__stap--gehad::before, .spoor__stap--nu::before { background: var(--oak); }

.spoor__punt {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ivory-hi);
  box-shadow: inset 0 0 0 1px var(--line);
}
.spoor__stap--gehad .spoor__punt { background: var(--oak); box-shadow: none; }
.spoor__stap--nu .spoor__punt {
  background: var(--ink); box-shadow: 0 0 0 4px rgba(201, 168, 124, .35);
}
.spoor__stap--nu .spoor__naam { color: var(--ink); }

@media (max-width: 559px) {
  .spoor__naam { display: none; }
  .spoor__stap--nu .spoor__naam {
    display: block; white-space: nowrap;
    position: absolute; left: 50%; transform: translateX(-50%);
  }
  .spoor { margin-bottom: 34px; }
}

/* ── De regels ─────────────────────────────────────────────────────── */
.bestelling__regels { list-style: none; margin: 0; padding: 0; }
.bestelregel {
  display: flex; gap: 18px; justify-content: space-between; align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
}
.bestelregel:first-child { border-top: 0; }
.bestelregel__naam { font-size: .96rem; color: var(--ink); margin: 0; }
.bestelregel__aantal { color: var(--ink-3); }
.bestelregel__maat { font-size: .84rem; color: var(--ink-3); margin: 3px 0 0; }
.bestelregel__bedrag {
  margin: 0; font-size: .96rem; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── De som ─────────────────────────────────────────────────────────
   Verzending staat hier als eigen regel met een eigen bedrag. Vroeger stond
   de verzendwijze naast het totaal, en dan las "Levering aan huis € 129,95"
   alsof de levering dat kostte. */
.som {
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.som__rij {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 3px 0; font-size: .9rem; color: var(--ink-2);
}
.som__rij dt, .som__rij dd { margin: 0; }
.som__rij dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.som__rij--totaal {
  margin-top: 8px; padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-display); font-size: 1rem; color: var(--ink);
}

.bestelling__extra {
  font-size: .86rem; color: var(--ink-3);
  margin: 12px 0 0;
}

/* ── Het modelformulier voor herroeping ─────────────────────────────
   Wettelijk verplicht op de voorwaardenpagina. Het staat in een kader
   omdat het geen lopende tekst is maar een formulier dat iemand kan
   overnemen — met regels waar je iets op invult. */
.formulier {
  margin: clamp(24px, 3vw, 34px) 0;
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--line);
  background: var(--ivory-hi);
}
.formulier__kop {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.05rem; margin-bottom: 10px;
}
.formulier__hint { font-size: .9rem; color: var(--ink-2); margin-bottom: 16px; }
.formulier__regels { list-style: none; margin: 0; padding: 0; }
.formulier__regels li {
  padding: 9px 0;
  font-size: .92rem; line-height: 1.6;
  border-bottom: 1px solid var(--line-soft);
}
.formulier__regels li:last-child { border-bottom: 0; }

/* ══ Beheer ════════════════════════════════════════════════════════
   Het scherm waar de eigenaar zijn cijfers ziet. Eén accentkleur voor
   alle grafieken: er is telkens maar één reeks, dus een tweede kleur zou
   niets betekenen. De kleur is door scripts/validate_palette.js gehaald —
   binnen de lichtheidsband, genoeg chroma om niet als grijs te lezen, en
   boven 3:1 tegen de ivoren ondergrond. */
.beheer { padding-bottom: clamp(50px, 7vw, 96px); }
.beheer__laden { color: var(--ink-3); font-size: .92rem; }

.beheer__kop {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 30px;
  padding-bottom: clamp(18px, 2.4vw, 26px);
  border-bottom: 1px solid var(--line);
}
.beheer__wie { font-size: .9rem; color: var(--ink-2); }
.beheer__wie .link { margin-left: 14px; }
@media (min-width: 700px) { .beheer__wie { margin-left: auto; } }

.beheer__voet {
  margin-top: clamp(30px, 4vw, 44px);
  padding-top: 18px; border-top: 1px solid var(--line-soft);
  font-size: .86rem; color: var(--ink-3); max-width: 62ch;
}

/* ── Het getal waar het om draait ─────────────────────────────────
   Geen grafiek: één waarde heeft geen assen nodig. */
.held { padding: clamp(30px, 4vw, 46px) 0 clamp(24px, 3vw, 34px); }
.held__label {
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.held__getal {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1.02;
  letter-spacing: -.02em; margin-top: 8px;
}
.held__delta { margin-top: 10px; font-size: .94rem; color: var(--ink-2); }
.held__delta--op   { color: #1F6B45; }
.held__delta--neer { color: #9B3B2E; }

/* ── Vier getallen op een rij ─────────────────────────────────── */
.tegels {
  display: grid; gap: 1px; background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 860px) { .tegels { grid-template-columns: repeat(4, 1fr); } }
.tegel { background: var(--ivory); padding: clamp(16px, 2.2vw, 24px); }
.tegel__label { font-size: .78rem; color: var(--ink-3); line-height: 1.4; }
.tegel__getal {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: 8px;
}

/* ── Een grafiek met zijn kop ─────────────────────────────────── */
.grafiek { margin-top: clamp(34px, 4.4vw, 56px); }
.grafiek__kop {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
  margin-bottom: clamp(16px, 2vw, 22px);
}
.grafiek__titel {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
}
.grafiek__hint { font-size: .86rem; color: var(--ink-3); }
.grafiek__leeg { font-size: .92rem; color: var(--ink-3); padding: 20px 0; }

/* ── Staafjes per dag ─────────────────────────────────────────── */
.staafjes__schuif { overflow-x: auto; }
.staafjes { display: block; width: 100%; min-width: 720px; height: auto; }
.staafjes__as { stroke: var(--line); stroke-width: 1; }
.staafjes__staaf { fill: #A0561A; transition: fill .18s var(--ease); }
.staafjes__staaf:hover { fill: #7E4213; }
.staafjes__nul { fill: var(--line); }
.staafjes__datum {
  fill: var(--ink-3); font-size: 9px; text-anchor: middle;
  font-family: var(--font-display); letter-spacing: .08em;
}
.staafjes__piek {
  fill: var(--ink); font-size: 11px; text-anchor: middle;
  font-family: var(--font-display);
}

/* ── Liggende staven ──────────────────────────────────────────── */
.balken { list-style: none; margin: 0; padding: 0; }
.balk {
  display: grid; gap: 4px 16px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
  grid-template-columns: 1fr auto;
}
@media (min-width: 760px) {
  .balk { grid-template-columns: minmax(0, 22ch) minmax(0, 1fr) auto; }
}
.balk__naam {
  font-size: .92rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.balk__spoor {
  grid-column: 1 / -1; display: block; height: 10px;
  background: var(--sand-deep); border-radius: 5px; overflow: hidden;
}
@media (min-width: 760px) { .balk__spoor { grid-column: auto; } }
.balk__vulling { display: block; height: 100%; background: #A0561A; border-radius: 5px; }
.balk__cijfer {
  font-family: var(--font-display); font-size: .92rem;
  white-space: nowrap; text-align: right;
}
.balk__aantal { color: var(--ink-3); font-size: .8rem; margin-left: 8px; }

/* ── De tabel met bestellingen ────────────────────────────────── */
.tabel-schuif { overflow-x: auto; }
.tabel { width: 100%; min-width: 620px; border-collapse: collapse; }
.tabel th {
  text-align: left; padding: 0 14px 10px 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--line);
}
.tabel td {
  padding: 13px 14px 13px 0; font-size: .92rem; vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}
.tabel td span { display: block; font-size: .8rem; color: var(--ink-3); margin-top: 3px; }
.tabel__datum { white-space: nowrap; }
.tabel__klein { color: var(--ink-2); }
.tabel__bedrag {
  font-family: var(--font-display); text-align: right; white-space: nowrap;
}

/* Bezoekcijfers: twee tegels in plaats van vier, en twee lijsten naast
   elkaar op een breed scherm. */
.tegels--twee { margin-top: clamp(34px, 4.4vw, 56px); grid-template-columns: 1fr 1fr; }
@media (min-width: 860px) { .tegels--twee { grid-template-columns: 1fr 1fr; } }

.twee-kolommen { display: grid; gap: clamp(20px, 3vw, 44px); }
@media (min-width: 820px) { .twee-kolommen { grid-template-columns: 1fr 1fr; } }

/* ── Een foto zonder schok verwisselen ─────────────────────────────
   De hoogte van het kader beweegt mee met de nieuwe verhouding in plaats
   van te springen, en de oude foto vaagt weg over de nieuwe heen. De
   afhandeling staat in shop.js bij MAHOWA_WISSEL.

   position: relative is hier nodig omdat de oude foto tijdens de wissel
   uit de stroom gehaald wordt: anders bepaalt hij de hoogte nog mee en
   valt er niets te animeren. */
.pdp__main, .ex-main { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  .pdp__main.is-wisselen, .ex-main.is-wisselen {
    transition: height .46s var(--ease);
  }
  /* De oude ligt bovenop en verdwijnt; de nieuwe komt eronder vandaan.
     Iets langzamer uit dan in, zodat er nooit een gat tussen valt. */
  .beeld--oud {
    position: absolute; inset: 0; z-index: 2;
    opacity: 1; transition: opacity .40s var(--ease);
  }
  .beeld--oud img { width: 100%; height: 100%; object-fit: cover; }
  .beeld--oud.is-weg { opacity: 0; }

  .beeld--nieuw { opacity: 0; transition: opacity .34s var(--ease) .06s; }
  .beeld--nieuw.is-er { opacity: 1; }
}

/* Zonder animatie hoort de oude foto meteen weg te zijn. */
@media (prefers-reduced-motion: reduce) {
  .beeld--oud { display: none; }
  .beeld--nieuw { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   De galerij

   Kolommen, geen raster. Een raster met vaste vakken zou elke foto
   naar hetzelfde vierkant snijden, en juist de vorm van een plank —
   lang en smal, of kort en diep — is wat iemand wil zien. In kolommen
   houdt elk beeld zijn eigen verhouding; de hoogte staat op de img
   zelf, dus er verspringt niets terwijl ze binnenkomen.
   ══════════════════════════════════════════════════════════════ */
.galerij { columns: 1; column-gap: 14px; }
@media (min-width: 620px)  { .galerij { columns: 2; column-gap: 16px; } }
@media (min-width: 1000px) { .galerij { columns: 3; column-gap: 20px; } }

.galerij__stuk {
  break-inside: avoid;
  margin: 0 0 14px;
  overflow: hidden;
  border-radius: var(--beeldronding);
  background: var(--sand-deep);
}
@media (min-width: 620px)  { .galerij__stuk { margin-bottom: 16px; } }
@media (min-width: 1000px) { .galerij__stuk { margin-bottom: 20px; } }

.galerij__stuk picture { display: block; }
.galerij__stuk img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1.1s var(--ease);
}
/* Alleen waar er echt een muis is: op een telefoon zou dit bij het
   scrollen als een haperende animatie voelen. */
@media (hover: hover) {
  .galerij__stuk { cursor: zoom-in; }
  .galerij__stuk:hover img { transform: scale(1.04); }
}
.galerij__stuk:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ── Het beeld groot ───────────────────────────────────────────
   Een <dialog>: die vangt zelf de focus en sluit zelf op Escape.
   Dat met de hand naschrijven levert altijd een val waar je met
   Tab uit het venster loopt terwijl het nog open staat. */
.lichtbak {
  border: 0; padding: 0;
  width: 100vw; max-width: 100vw;
  height: 100dvh; max-height: 100dvh;
  background: rgba(20, 18, 15, .94);
  color: var(--ivory);
  overscroll-behavior: contain;
}
.lichtbak::backdrop { background: rgba(20, 18, 15, .94); }

.lichtbak__vlak {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  padding: clamp(48px, 7vw, 72px) clamp(12px, 4vw, 56px) clamp(20px, 3vw, 32px);
  box-sizing: border-box;
}
/* Het rasterkind is de <picture>, niet de <img>. Centreren op de img
   deed dus niets: het beeld bleef bovenaan hangen met een gat eronder. */
.lichtbak__vlak picture {
  display: grid;
  place-self: center;
  min-height: 0;              /* anders weigert een 1fr-rij te krimpen */
  max-width: 100%;
  max-height: 100%;
}
.lichtbak__beeld {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--beeldronding);
}
.lichtbak__tekst {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: .01em;
  color: rgba(246, 242, 236, .72);
}

.lichtbak button {
  position: absolute;
  display: grid; place-items: center;
  width: 44px; height: 44px;          /* raakvlak groot genoeg voor een duim */
  border: 0; border-radius: 50%;
  background: rgba(246, 242, 236, .12);
  color: var(--ivory);
  font: 400 22px/1 var(--font-body);
  cursor: pointer;
  transition: background .2s var(--ease);
}
.lichtbak button:hover { background: rgba(246, 242, 236, .24); }
.lichtbak button:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
.lichtbak__sluit   { top: clamp(10px, 2vw, 20px); right: clamp(10px, 2vw, 20px); }
.lichtbak__vorig   { left:  clamp(8px, 2vw, 20px);  top: 50%; transform: translateY(-50%); }
.lichtbak__volgend { right: clamp(8px, 2vw, 20px);  top: 50%; transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) {
  .galerij__stuk img, .lichtbak button { transition: none; }
  .galerij__stuk:hover img { transform: none; }
}

/* De foto is een knop geworden; die mag er niet als een knop uitzien. */
.galerij__knop {
  display: block; width: 100%;
  padding: 0; border: 0; background: none;
  cursor: zoom-in; font: inherit; color: inherit;
}
.galerij__knop:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Wat elke foto is: bij een klant, in het atelier, studio of sfeerbeeld.
   Een sfeerbeeld naast een klantfoto zonder label laat de bezoeker denken
   dat alles een geleverde plank is. Klein en rustig in de hoek, maar altijd
   leesbaar: een licht vlak onder donkere letters, op elke foto. */
.galerij__stuk, .galerij__knop { position: relative; }
.galerij__soort {
  position: absolute; left: 10px; top: 10px; z-index: 1;
  padding: 5px 9px 4px;
  font-family: var(--font-display); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1.2;
  color: var(--ink); background: rgba(246, 242, 236, .9);
  border-radius: var(--vormronding);
  pointer-events: none;
}
.galerij__soort--klant { background: var(--ink); color: var(--ivory); }
.galerij__onder {
  padding: 10px 12px 12px;
  font-size: .86rem; line-height: 1.5; color: var(--ink-2);
  background: var(--ivory);
}
.galerij__onder .link { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════
   Bladeren door de fotogalerij
   ══════════════════════════════════════════════════════════════ */
.bladeren { position: relative; }

/* pan-y en niet none: verticaal moet de pagina gewoon blijven scrollen
   met een vinger op de foto. Alleen de horizontale beweging is voor ons. */
.bladeren [data-gallery-main] { touch-action: pan-y; }

.bladeren__knop {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: rgba(246, 242, 236, .86);
  color: var(--ink);
  font: 400 21px/1 var(--font-body);
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(33, 30, 26, .14);
  transition: background .2s var(--ease), opacity .2s var(--ease);
  z-index: 2;
}
.bladeren__knop--vorige   { left: 10px; }
.bladeren__knop--volgende { right: 10px; }
.bladeren__knop:hover { background: var(--ivory-hi); }
.bladeren__knop:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Op een muisscherm blijven ze weg tot je er bent: de foto is het
   onderwerp, niet de knoppen. Op een aanraakscherm bestaat "hover" niet,
   dus daar staan ze gewoon altijd. */
@media (hover: hover) {
  .bladeren__knop { opacity: 0; }
  .bladeren:hover .bladeren__knop,
  .bladeren__knop:focus-visible { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bladeren__knop { transition: none; }
}

/* Kaartvlak voor een studio-opname of een uitgeknipte plank: die mag niet
   bijgesneden worden, want dan valt het uiteinde van de plank weg. Inpassen
   dus, en zonder gevulde achtergrond — het beeld staat al op de paginakleur
   of is doorzichtig. */
.collection__media--vrij { background: transparent; }
.collection__media--vrij img { object-fit: contain; }

/* ── Wat een keuze kost, op de knop zelf ─────────────────────────
   Een plakkertje op de hoek, niet een regel eronder. Reden: als het
   bedrag in de knop staat, leest het als onderdeel van het label —
   "40 mm − € 20" lijkt één ding. Los op de hoek is het duidelijk een
   prijskaartje dat bij die knop hoort.

   Het staat er alleen als er iets te melden valt (:empty verdwijnt), en
   omdat het absoluut ligt verschuift er niets in de rij als het er niet
   is. De rij krijgt wel wat lucht bovenaan, anders wordt het plakkertje
   door de kop erboven doorsneden. */
.chips { padding-top: 16px; }

.chip--prijs { position: relative; overflow: visible; }
.chip__label { display: block; }

.chip__delta,
.kleur__delta {
  position: absolute;
  z-index: 1;
  padding: 2px 7px 3px;
  border-radius: 999px;
  background: var(--ivory-hi);
  border: 1px solid var(--line-soft);
  box-shadow: 0 1px 4px rgba(33, 30, 26, .12);
  font-family: var(--font-body);
  font-size: .72rem;
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
}
/* Geen verschil, geen plakkertje. */
.chip__delta:empty,
.kleur__delta:empty { display: none; }

.chip__delta { top: -14px; right: 4px; }

/* Op een tegel hangt het over de hoek van de foto, zoals een prijskaartje
   aan een stuk in de winkel. */
.kleur { position: relative; }
.kleur__delta { top: -8px; right: -6px; }

@media (max-width: 520px) {
  .chip__delta, .kleur__delta { font-size: .74rem; padding: 1px 6px 2px; }
}

/* ── De feiten boven de hero-knoppen ─────────────────────────────
   Drie dingen, één regel: vanafprijs, wachttijd, leverkring. Ze stonden
   ná de knoppen, maar dat is de verkeerde volgorde: wie op een telefoon
   staat te twijfelen, wil het bedrag en de levertijd zien vóór hij op een
   knop drukt, niet erna. Klein en rustig, want de foto en de kop dragen
   het scherm, niet deze lijst. */
.hero__feiten {
  display: flex; flex-wrap: wrap;
  gap: 6px clamp(14px, 2vw, 26px);
  margin: clamp(14px, 1.8vw, 22px) 0 0;
  padding: 0; list-style: none;
  font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2);
}
/* Een dun streepje tussen de feiten, maar niet vóór het eerste. */
.hero__feiten li + li { position: relative; }
.hero__feiten li + li::before {
  content: ""; position: absolute;
  left: calc(clamp(14px, 2vw, 26px) / -2); top: .35em; bottom: .35em;
  border-left: 1px solid var(--line);
}
.hero__feiten [data-from-price],
.hero__feiten [data-from-price-heel] { color: var(--ink); }
@media (max-width: 520px) {
  .hero__feiten { font-size: .74rem; gap: 5px 14px; }
}
@media (max-width: 430px) {
  .hero__feiten li:nth-child(3) { flex-basis: 100%; }
  .hero__feiten li:nth-child(3)::before { display: none; }
}

/* Wat de vanafprijs precies is. Klein onder de feiten: het is een
   voetnoot bij een getal, geen verkoopzin. */
.hero__uitleg {
  margin: 8px 0 0; max-width: 46ch;
  font-size: .8rem; line-height: 1.5; color: var(--ink-3);
}
.hero__uitleg:empty { display: none; }

/* ── BUILD, kort, op de startpagina ──────────────────────────────
   Eén alinea en een link. De campagne zelf staat op /build/. */
.kortbuild {
  max-width: 62ch; margin-inline: auto; text-align: center;
  padding-block: clamp(10px, 2vw, 24px);
}
.kortbuild .eyebrow { margin-bottom: 12px; }
.kortbuild__tekst { color: var(--ink-2); margin-bottom: 14px; }

/* ── De diktes ───────────────────────────────────────────────────
   Elke plank ligt er heel, op de kleur van de pagina: het witte vlak van de
   opname is weggesneden, de plank zelf is onaangeroerd. Links de dikte en
   wat ze doet, rechts de plank.

   De twee beelden staan op dezelfde schaal (tools/maak_diktefotos.py). De
   dikke plank vult de kolom; de dunne krijgt --lengte, haar lengte ten
   opzichte van de dikke. Zo is één millimeter in beide beelden even groot,
   op elke breedte. */
.diktes {
  display: grid; gap: clamp(30px, 4vw, 52px);
  grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none;
}
.dikte {
  display: grid; gap: 10px;
  grid-template-areas: "maat" "beeld" "uitleg";
}
@media (min-width: 800px) {
  .dikte {
    grid-template-columns: minmax(200px, 26%) minmax(0, 1fr);
    grid-template-areas: "maat beeld" "uitleg beeld";
    column-gap: clamp(28px, 4.5vw, 72px);
  }
  .dikte__maat { align-self: end; }
  .dikte__uitleg { align-self: start; }
}
.dikte__maat { grid-area: maat; }
.dikte__uitleg { grid-area: uitleg; }
.dikte__beeld { grid-area: beeld; align-self: center; }
.dikte__beeld picture { display: block; width: var(--lengte, 100%); }
.dikte__beeld img { display: block; width: 100%; height: auto; }
.diktes__bron {
  margin: 14px 0 0; color: var(--ink-3); font-size: .82rem;
}
.dikte__maat {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: 1.35rem; color: var(--ink);
}
.dikte__uitleg { margin: 0; color: var(--ink-2); font-size: .95rem; max-width: 36ch; }
.diktes__voet {
  margin: clamp(30px, 3.6vw, 46px) 0 0;
  max-width: 62ch; color: var(--ink-3); font-size: .9rem;
}

/* ── Links naar de maten ernaast ─────────────────────────────────
   Een raster van kleine kaartjes, geen opsomming: acht maten onder
   elkaar leest als een lijst waar je doorheen moet, naast elkaar als
   keuzes waaruit je er één pakt. */
.maatlinks {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
  margin: 0; padding: 0; list-style: none;
}
.maatlinks a {
  display: block; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--vormronding);
  font-family: var(--font-display); font-size: .9rem;
  color: var(--ink-2); text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.maatlinks a:hover { border-color: var(--ink); color: var(--ink); }
.maatlinks a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.maatlinks__voet { margin: clamp(20px, 2.4vw, 30px) 0 0; color: var(--ink-3); font-size: .9rem; }

/* ── Snelle prijs op de homepage ─────────────────────────────────
   Twee kolommen: links de keuzes, rechts het bedrag. Op een smal scherm
   onder elkaar, met het bedrag onderaan — dan staat het antwoord direct
   boven de knop waar je op moet drukken. */
.snelprijs {
  display: grid; gap: clamp(28px, 3.4vw, 48px);
  align-items: start;
}
@media (min-width: 900px) { .snelprijs { grid-template-columns: 1fr auto; } }

.snelprijs__keuzes { display: grid; gap: clamp(18px, 2.2vw, 26px); }
.snelprijs__label {
  margin: 0 0 10px; font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
}
.snelprijs__uit {
  min-width: min(100%, 260px);
  padding-top: clamp(0px, 1vw, 8px);
}
.snelprijs__bedrag {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 3.8rem); line-height: 1; color: var(--ink);
}
.snelprijs__voet {
  margin: 12px 0 20px; max-width: 34ch;
  font-size: .86rem; color: var(--ink-3);
}
@media (min-width: 900px) {
  .snelprijs__uit { text-align: right; }
  .snelprijs__voet { margin-left: auto; }
}

/* Een hulplink in een keuzekop: zelfde regel als de titel, maar duidelijk
   ondergeschikt eraan. */
.cfg__hulp {
  /* De configuratorkolom is smal; titel, waarde en link samen op één regel
     drukken de waarde uit haar plek. Eigen regel dus: de kop blijft gelijk
     aan die van de andere groepen en de link staat er rustig onder. */
  flex: 0 0 100%; margin-top: 2px;
  font-family: var(--font-body); font-size: .78rem;
  color: var(--ink-3); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.cfg__hulp:hover { color: var(--ink); border-bottom-color: var(--ink); }
.cfg__hulp:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* "Uit één stuk" op een kaart in Select. Rustig en klein: het is een feit
   over het stuk, geen keurmerk en geen actie. Linksboven, tegenover de
   plek waar "Verkocht" staat — twee mededelingen die elkaar nooit in de
   weg zitten omdat een verkocht stuk niets meer hoeft te verkopen. */
.piece-card__heel {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 9px 5px;
  border-radius: 999px;
  background: rgba(246, 242, 236, .92);
  border: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
}

/* Wie er achter het merk staat, onder de voettekst. Kleiner dan de
   tagline maar niet weggemoffeld: het is een argument, geen disclaimer. */
.site-footer__onder {
  margin: 14px 0 0;
  font-size: .84rem; line-height: 1.55;
  color: var(--ink-3);
  max-width: 44ch;
}
.site-footer__onder a { color: var(--ink-2); border-bottom: 1px solid var(--line); }
.site-footer__onder a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* "Inclusief 21 % btw" onder het totaal. Klein, maar niet verstopt: een
   consumentenprijs hoort inclusief btw te zijn én zo genoemd te worden. */
.summary__btw {
  margin: 8px 0 0;
  font-size: .78rem;
  color: var(--ink-3);
  text-align: right;
}

/* De uitleg waarom 34 en 40 mm hetzelfde kosten. Staat vlak onder de drie
   blokjes, want daar valt het op — iemand die de prijzen vergelijkt ziet
   het gelijke bedrag en denkt aan een fout. */
.diktes__prijs {
  margin: clamp(26px, 3vw, 38px) 0 0;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: .95rem;
}

/* ══════════════════════════════════════════════════════════════
   De zaagbalk op een stukpagina
   ══════════════════════════════════════════════════════════════ */
.zaag {
  display: grid; gap: clamp(24px, 3vw, 44px);
  align-items: start;
}
@media (min-width: 860px) { .zaag { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); } }

.zaag__beeld {
  position: relative;
  /* De greep steekt buiten de foto uit; die mag niet afgesneden worden. */
  overflow: visible;
  /* Geen touch-action: none hier. Dat staat op de grepen, waar het slepen
     gebeurt; op de hele foto zou het een veeg over het beeld blokkeren en
     kon je met je vinger niet meer langs de plank scrollen. */
  user-select: none;

  /* Een gewoon blok met een vaste hoogte. De verhouding bewaakt de foto zelf
     met object-fit: contain — niet het vlak eromheen.

     Hier stond eerder `width: fit-content` met `aspect-ratio` uit een custom
     property, en `display: contents` op de <picture>. Op Safari van de iPhone
     kwam die combinatie niet uit: het vlak werd zo breed als de foto zelf en
     de <img> werd erin uitgerekt. De plank leek daardoor veel breder en
     korter dan ze is — alsof je een stuk van de plank zag in plaats van de
     hele. Zo'n stapel afhankelijkheden hoort niet in een mechaniek die op
     elk toestel exact moet kloppen; zaag.js rekent nu zelf uit waar het beeld
     binnen dit vlak staat.

     De hoogte volgt het scherm en niet een vast percentage. Boven en onder
     staat namelijk iets vasts: de kop (76 px) en de balk met de knop (68 px).
     Trek je die er niet af, dan valt de plank op een telefoon in liggende
     stand deels achter die twee — en juist dan moet je de hele plank kunnen
     zien, anders zaag je aan iets wat buiten beeld staat.

     Twee keer opgeschreven: svh is de hoogte van het venster zonder de
     adresbalk, maar oudere browsers kennen die eenheid niet en slaan de hele
     regel over. Die krijgen de vh-versie erboven. */
  width: 100%;
  height: clamp(180px, calc(100vh - 200px), 520px);
  height: clamp(180px, calc(100svh - 200px), 520px);
}
.zaag__beeld picture { display: block; height: 100%; }
.zaag__beeld img {
  display: block;
  width: 100%; height: 100%;
  /* contain, dus de foto houdt haar eigen verhouding en staat gecentreerd. */
  object-fit: contain;
}

/* Het weggezaagde deel. Niet wegdrukken maar vervagen: je moet nog kunnen
   zien wát je weggeeft, anders zaag je blind. */
.zaag__weg {
  /* Plaats en maat komen van zaag.js: het masker dekt precies de foto, niet
     het lege vlak ernaast. */
  position: absolute;
  background: var(--sand);
  opacity: .82;
  pointer-events: none;
  transition: none;
}

/* De zaaglijn loopt over de plank en niet over de hele foto: zaag.js zet
   left en width uit het gemeten plankvak. */
.zaag__greep {
  position: absolute;
  height: 34px;
  /* Springt de focus met Tab naar een greep, dan mag de vaste kop er niet
     overheen staan — anders zaag je aan iets wat je niet ziet. */
  scroll-margin: calc(var(--kop-vast) + 24px) 0 120px;
  transform: translateY(-50%);
  padding: 0; border: 0; background: none;
  cursor: ns-resize; touch-action: none;
}
/* De zaaglijn zelf: een dunne streep over de volle breedte, met een greep
   in het midden waar je hem kunt pakken. */
.zaag__greep::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; margin-top: -1px;
  background: var(--ink);
  box-shadow: 0 0 0 1px rgba(246, 242, 236, .7);
}
.zaag__greep > span {
  position: absolute; left: 50%; top: 50%;
  width: 46px; height: 26px; margin: -13px 0 0 -23px;
  border-radius: 999px;
  background: var(--ink); color: var(--ivory);
  box-shadow: 0 2px 8px rgba(33, 30, 26, .28);
}
/* Drie streepjes, zoals op een greep die je vastpakt. */
.zaag__greep > span::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 6px; margin: -3px 0 0 -7px;
  border-top: 1px solid var(--ivory);
  border-bottom: 1px solid var(--ivory);
}
.zaag__greep.is-bezig > span,
.zaag__greep:hover > span { background: #000; }
.zaag__greep:focus-visible > span { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Ligt de plank op de foto, dan snijdt de lijn rechtop en draait de greep mee.
   Vandaag staan alle stukken rechtop; dit staat er zodat een liggende foto
   later geen kapotte mechaniek oplevert. */
.zaag--liggend .zaag__greep {
  cursor: ew-resize;
  width: 34px; height: auto;
  transform: translateX(-50%);
}
.zaag--liggend .zaag__greep::before {
  left: 50%; right: auto; top: 0; bottom: 0;
  width: 2px; height: auto; margin: 0 0 0 -1px;
}
.zaag--liggend .zaag__greep > span { transform: rotate(90deg); }

.zaag__label {
  margin: 0; font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.zaag__maat {
  margin: 6px 0 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; color: var(--ink);
}
.zaag__rest { margin: 14px 0 0; font-size: .9rem; color: var(--ink-2); max-width: 34ch; }
/* Aan welke kant er gezaagd wordt, in woorden: dit gaat zo de bestelling in. */
.zaag__kanten { margin: 10px 0 0; font-size: .9rem; color: var(--ink); max-width: 34ch; }
.zaag__note { margin: 18px 0 0; font-size: .84rem; color: var(--ink-3); max-width: 34ch; }
.zaag__uit .btn { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) { .zaag__weg { transition: none; } }


/* ══ Aanmelden met Google ═══════════════════════════════════════
   Boven het e-mailveld, want voor de meeste mensen is dit de kortste weg.
   De knop staat er alleen als de server zegt dat hij werkt — zie
   naarAanmelden() in account.js. */
.account__google { margin: 0 0 22px; }
.account__googleknop {
  display: inline-flex; align-items: center; gap: 10px;
  width: 100%; justify-content: center;
}
.account__of {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 0; color: var(--ink-3); font-size: .85rem;
}
.account__of::before, .account__of::after {
  content: ""; flex: 1; height: 1px; background: var(--line, #DED4C3);
}

/* ══ Aanmelden en registreren ═══════════════════════════════════
   Twee tabbladen boven één kolom. Geen kaarten naast elkaar: op een telefoon
   staat de tweede dan onder de vouw en lijkt hij er niet te zijn, en dat is
   precies de helft die iemand zoekt als hij hier voor het eerst komt.

   De tabs zijn echte knoppen met role="tab" — een div met een klikhandler
   is voor wie met het toetsenbord of een schermlezer werkt geen keuze maar
   een raadsel. */
.auth { max-width: 460px; }
.auth__tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  margin-bottom: clamp(24px, 3.4vw, 34px);
  border-bottom: 1px solid var(--line);
}
.auth__tab {
  padding: 12px 4px 14px;
  background: none; border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-display); font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.auth__tab:hover { color: var(--ink-2); }
.auth__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.auth__paneel[hidden] { display: none; }

/* De regel onderaan die naar het andere tabblad wijst. Iemand die op het
   verkeerde tabblad staat, hoort niet omhoog te hoeven zoeken. */
.auth__wissel {
  margin: clamp(20px, 2.6vw, 26px) 0 0;
  font-size: .95rem; color: var(--ink-2);
}
/* Een <button class="link"> houdt zonder dit de rand en het grijs van de
   browser: dan staat er een knopje in een zin in plaats van een link. */
.auth__wissel .link {
  font-size: inherit;
  background: none; border: 0; padding: 0;
  font-family: inherit; cursor: pointer;
}

/* Wat je aan een account hebt. Drie regels, geen icoontjes: dit is een
   opsomming en geen productblok. */
.auth__punten { list-style: none; margin: clamp(20px, 2.6vw, 26px) 0 0; padding: 0; }
.auth__punten li {
  position: relative; padding: 7px 0 7px 18px;
  font-size: .95rem; color: var(--ink-2);
}
.auth__punten li::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--oak);
}

.form__row--naam { display: grid; gap: 14px; }
@media (min-width: 520px) { .form__row--naam { grid-template-columns: 1fr 1fr; } }

/* ══ Het profiel ════════════════════════════════════════════════
   Eén formulier met alles erin en één knop eronder. Niet elk veld apart
   opslaan: dan weet je halverwege niet meer wat er al vast staat, en een
   adres dat half bewaard is, is geen adres. */
.profiel {
  margin: 0 0 clamp(34px, 5vw, 56px);
  padding-bottom: clamp(26px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
}
.profiel[hidden] { display: none !important; }
.profiel__kop, .profiel__sub {
  margin: 0 0 14px;
  font-family: var(--font-display); font-weight: 400;
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink);
}
.profiel__sub { margin-top: clamp(24px, 3vw, 32px); }
.profiel__form { max-width: 560px; }
.profiel__form .form__row + .form__row,
.profiel__form .field + .field { margin-top: 14px; }
.profiel__form .form__row { margin-top: 14px; }
.field--land { max-width: 260px; }
.profiel__voet {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: clamp(22px, 3vw, 30px) 0 0;
}
.profiel__melding:empty { display: none; }
.profiel__melding { font-size: .92rem; color: var(--ink-2); }
@media (max-width: 520px) { .profiel__voet .btn { width: 100%; text-align: center; } }

/* ══ Aanmelden met een sleutel ══════════════════════════════════
   Bovenaan, boven Google en boven het e-mailveld: als er een sleutel op dit
   toestel staat is dit de kortste weg die er is — één aanraking, zonder de
   winkel te verlaten. Hij staat er alleen als het toestel het aankan; zie
   slAanAanmelden() in account.js. */
.account__sleutel { margin: 0 0 22px; }
.account__sleutelknop {
  display: inline-flex; align-items: center; gap: 10px;
  width: 100%; justify-content: center;
}
.account__sleutelbij:empty { display: none; }
.account__sleutelbij {
  margin: 10px 0 0; font-size: .9rem; color: var(--ink-2);
}

/* ── De sleutels van dit account ──────────────────────────────────
   Een lijst en niets meer. Elke rij is een toestel dat binnen mag; de knop
   ernaast haalt dat recht weg. Geen kaarten en geen icoontjes: dit is een
   lijstje waar je zelden komt en dan meteen moet snappen. */
.sleutels {
  margin: 0 0 clamp(34px, 5vw, 56px);
  padding-bottom: clamp(26px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
}
.sleutels[hidden] { display: none !important; }
.sleutels__kop {
  margin: 0 0 12px;
  font-family: var(--font-display); font-weight: 400;
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink);
}
.sleutels__lijst { list-style: none; margin: 18px 0 0; padding: 0; }
.sleutels__lijst:empty { display: none; }
.sleutels__rij {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  max-width: 460px;
}
.sleutels__naam { font-size: 1rem; color: var(--ink); }
.sleutels__weg { font-size: .9rem; color: var(--ink-3); }
.sleutels__knoprij {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 18px 0 0;
}
.sleutels__melding:empty { display: none; }
.sleutels__melding { font-size: .9rem; color: var(--ink-2); }

/* ── Adresvelden in het afrekenen ─────────────────────────────────
   Terug sinds Mollie: die verzamelt geen leveradres, Stripe deed dat wel.
   De rijen zelf gebruiken .form__row, dat er al was — een tweede mechaniek
   voor hetzelfde loopt vroeg of laat uiteen. Alleen dit komt erbij: straat
   hoort breder dan het huisnummer, en gemeente breder dan de postcode. */

@media (min-width: 700px) {
  .form__row--adres  { grid-template-columns: 2fr 1fr; }
  .form__row--plaats { grid-template-columns: 1fr 2fr; }
}

/* "(optioneel)": een tint, geen doorzichtigheid. Die maakte het onleesbaar
   op elke ondergrond die niet ivoor was. */
.field__opt { font-weight: 400; color: var(--ink-3); }

/* Nieuws bij Objects. Geen badge en geen kleurvlek: één regel die zegt wat er
   gebeurd is. Zodra er niets te melden valt, gaat de regel eruit. */
.collection__nieuws {
  font-size: .84rem;
  color: var(--ink-3);
  margin: 6px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

/* Een verkocht 1-of-1 blijft in de etalage staan. Het mag alleen niet meer
   schreeuwen dat het te koop is: het beeld zakt iets terug, de stempel legt
   uit waarom. Geen doorgestreepte prijs — er valt niets af te dingen. */
.pcard--verkocht .pcard__media { position: relative; }
.pcard--verkocht picture img { opacity: .82; }
.pcard__stempel {
  position: absolute; left: 14px; top: 14px;
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  background: var(--ink); color: var(--ivory);
}
.pcard--verkocht .pcard__price span {
  font-size: .86rem; color: var(--ink-3); font-family: var(--font-body);
  letter-spacing: 0; text-transform: none;
}

/* ══ BUILD MAHOWA WITH US ═══════════════════════════════════════════
   De campagnepagina. Iets meer lucht en iets grotere cijfers dan de rest
   van de site — dit is de enige pagina die om een besluit vraagt. Maar
   dezelfde kleuren, hetzelfde raster, dezelfde letters: een campagne die
   eruitziet als een andere website leest als een advertentie. */

.bouw-kop {
  padding: clamp(48px, 8vw, 104px) 0 clamp(40px, 6vw, 72px);
  background: var(--ivory);
}
.bouw-kop__label { margin-bottom: 14px; }
.bouw-kop__titel {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.4rem);
  line-height: 1.02; letter-spacing: -.02em;
  margin: 0 0 clamp(18px, 2.4vw, 28px);
}
.bouw-kop__lead { font-size: clamp(1rem, .96rem + .3vw, 1.16rem); }

/* ── De stand ───────────────────────────────────────────────────
   Het bedrag is het grootste getal op de pagina, want dat is waar ieder
   oog als eerste heen gaat. Het doel staat er klein naast: samen lezen
   ze als één zin. */
.stand {
  margin: clamp(30px, 4.5vw, 52px) 0 clamp(24px, 3vw, 34px);
  max-width: 640px;
}
.stand__cijfers { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.stand__op {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem);
  line-height: 1; margin: 0; font-variant-numeric: tabular-nums;
}
.stand__doel { font-size: 1rem; color: var(--ink-3); margin: 0; }

.stand__balk {
  height: 6px; margin: 18px 0 12px;
  background: var(--sand-deep);
  border-radius: 999px; overflow: hidden;
}
.stand__vul {
  height: 100%; background: var(--ink);
  border-radius: 999px;
  /* Minimaal een streepje bij nul: een lege balk leest als kapot. */
  min-width: 3px;
}

.stand__voet { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.stand__builders {
  margin: 0; font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase;
}
.stand__builders strong { font-weight: 400; }
.stand__regel { margin: 0; font-size: .92rem; color: var(--ink-3); }

.bouw-kop__knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.bouw-kop__dicht {
  margin: 18px 0 0; font-size: .92rem; color: var(--ink-3);
  max-width: 46ch; padding-left: 14px; border-left: 2px solid var(--oak);
}

/* ── Waaraan ────────────────────────────────────────────────────── */
.besteding {
  display: grid; gap: clamp(22px, 3vw, 34px);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .besteding { grid-template-columns: repeat(3, 1fr); } }
.besteding__bedrag {
  font-family: var(--font-display); font-size: 1.5rem;
  margin: 0 0 4px; font-variant-numeric: tabular-nums;
}
.besteding__naam {
  font-family: var(--font-display); font-weight: 400; font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase;
  margin: 0 0 10px; color: var(--ink-3);
}
.besteding__item p:last-child { font-size: .95rem; }

/* ── De niveaus ─────────────────────────────────────────────────
   Drie kaarten, en de derde springt eruit — niet met kleur maar met een
   donkere grond. Kleur zou hier verkoop worden; contrast is genoeg. */
/* Drie kaarten, drie kolommen. Er stonden er vijf, in een raster van zes
   kolommen met een uitzondering voor de bovenste drie; dat mag weg. */
.niveaus {
  display: grid; gap: clamp(14px, 1.8vw, 20px);
  grid-template-columns: 1fr; align-items: stretch;
}
@media (min-width: 660px) { .niveaus { grid-template-columns: repeat(3, 1fr); } }


.niveau {
  background: var(--ivory-hi);
  border: 1px solid var(--line-soft);
  border-radius: var(--vormronding);
  padding: clamp(24px, 2.8vw, 32px);
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .3s var(--ease);
}
.niveau:hover { border-color: var(--oak); }

/* Het laatste niveau krijgt de nadruk: daar hoort de bezoeker uit te komen.
   Het verdient zichzelf al terug bij twee planken en bestaat alleen zolang
   de campagne loopt. Een donkere kaart naast twee lichte zegt dat, zonder
   dat er "populair" bij hoeft te staan. */
.niveau--aanbevolen {
  background: var(--ink); border-color: var(--ink); color: var(--ivory);
}
.niveau--aanbevolen .niveau__naam,
.niveau--aanbevolen .niveau__prijs { color: var(--ivory); }
.niveau--aanbevolen .niveau__btw,
.niveau--aanbevolen .niveau__regel { color: rgba(255, 255, 255, .68); }
.niveau--aanbevolen .niveau__lijst { border-top-color: rgba(255, 255, 255, .18); }
.niveau--aanbevolen .niveau__lijst li { color: rgba(255, 255, 255, .88); }
.niveau--aanbevolen .niveau__lijst li::before { background: var(--oak); }
.niveau--aanbevolen .niveau__kies {
  background: var(--ivory); color: var(--ink); border-color: var(--ivory);
}
.niveau__merk {
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--oak-donker); margin: 0 0 8px;
}
.niveau__prijs {
  font-family: var(--font-display); font-size: 2.4rem; line-height: 1;
  margin: 0; font-variant-numeric: tabular-nums;
}
/* Het ronde bedrag is de bijdrage; dit is wat er werkelijk wordt afgerekend.
   Boek VI WER wil dat de consument het eindbedrag ziet, dus dit mag niet
   weggestopt worden — klein mag, onleesbaar niet. */
.niveau__btw {
  font-size: .76rem; color: var(--ink-3);
  margin: 4px 0 0; font-variant-numeric: tabular-nums;
}
.niveau--top .niveau__btw { color: rgba(255, 255, 255, .62); }

.niveau__naam {
  font-family: var(--font-display); font-weight: 400; font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; margin: 8px 0 0;
}
.niveau__regel { font-size: .92rem; color: var(--ink-3); margin: 6px 0 0; }
.niveau__lijst {
  list-style: none; margin: 16px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 9px;
  font-size: .94rem;
}
.niveau__lijst li { padding-left: 18px; position: relative; }
.niveau__lijst li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 7px; height: 1px; background: var(--oak);
}
/* Uit de popup gekomen. Een rand in eik, geen andere achtergrond: de kaart
   moet opvallen zonder dat de andere vier eruitzien alsof ze uitstaan. */
.niveau.is-gekozen { border-color: var(--oak); box-shadow: 0 0 0 1px var(--oak); }

.niveau--top {
  background: var(--ink); border-color: var(--ink);
  color: var(--ivory);
}
.niveau--top .niveau__regel,
.niveau--top .niveau__naam { color: rgba(246, 242, 236, .72); }
.niveau--top .niveau__lijst { border-top-color: rgba(246, 242, 236, .18); }
.niveau--top .niveau__lijst li::before { background: var(--oak); }
.niveau--top .niveau__merk { color: var(--oak); }

/* ── Het pasje ──────────────────────────────────────────────────
   Het ding dat iemand wil laten zien. Bewust klein en stil: een badge die
   schreeuwt wordt niet gedeeld. */
.pasje { margin-top: clamp(30px, 4vw, 46px); display: flex; }
.pasje__kaart {
  background: var(--ink); color: var(--ivory);
  border-radius: var(--vormronding);
  padding: 22px 26px; min-width: 250px;
  display: flex; flex-direction: column; gap: 3px;
}
.pasje__merk {
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .3em; margin: 0 0 14px; color: rgba(246,242,236,.6);
}
.pasje__nr {
  font-family: var(--font-display); font-size: 1.5rem;
  letter-spacing: .04em; margin: 0; font-variant-numeric: tabular-nums;
}
.pasje__rol {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--oak); margin: 4px 0 0;
}

/* ── Mijlpalen ──────────────────────────────────────────────────── */
.mijlpalen { list-style: none; margin: 0; padding: 0; counter-reset: mp; }
.mijlpaal {
  display: grid; gap: 2px 20px;
  grid-template-columns: 1fr;
  padding: 16px 0; border-top: 1px solid var(--line-soft);
}
@media (min-width: 700px) {
  .mijlpaal { grid-template-columns: 7rem 13rem 1fr; align-items: baseline; }
}
.mijlpaal__cent {
  font-family: var(--font-display); font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.mijlpaal__naam {
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.mijlpaal__belofte { font-size: .95rem; color: var(--ink-2); }
.mijlpaal--eind { border-bottom: 1px solid var(--line); }
.mijlpaal--eind .mijlpaal__cent { color: var(--ink); }

/* ── De regels ──────────────────────────────────────────────────
   Deze sectie is geen kleine lettertjes. Ze staat op ware grootte, want
   het is precies de tekst die iemand overtuigt dat het geen truc is. */
.regels ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 11px; }
.regels li { padding-left: 20px; position: relative; font-size: .97rem; }
.regels li::before {
  content: ''; position: absolute; left: 0; top: .64em;
  width: 8px; height: 1px; background: var(--ink-3);
}
.regels__wie { margin-top: 20px; font-size: .86rem; color: var(--ink-3); }

/* ── Slot ───────────────────────────────────────────────────────── */
.slot__blok { max-width: 46rem; }
.slot__blok .btn-row { margin-top: 22px; }

/* De machine waar het om gaat. Groot, want dit is het enige concrete ding
   op de pagina — al het andere is een belofte. */
.machine { margin: 0 0 clamp(28px, 4vw, 44px); }
.machine picture img {
  display: block; width: 100%; height: auto;
  border-radius: var(--vormronding);
}
.machine__bijschrift {
  margin: 12px 0 0; font-size: .88rem; color: var(--ink-3);
  max-width: 52ch;
}


/* ── Taalkeuze in de voet ────────────────────────────────────────
   Stond eerst alleen hier, en daar vond niemand haar. De kop heeft nu een
   eigen, kortere versie (.taalkop en .taalmenu in style.css); deze blijft
   voor wie onderaan zoekt.

   De huidige taal is geen link — zie taalkeuze() in build_site.py. */
.taalkeuze { display: flex; gap: 14px; align-items: baseline; }
.taalkeuze a, .taalkeuze span {
  font-size: .82rem; letter-spacing: .04em;
}
.taalkeuze a { color: var(--ink-3); text-decoration: none; }
.taalkeuze a:hover { color: var(--ink); text-decoration: underline; }
.taalkeuze [aria-current] { color: var(--ink); }

/* ══ DE PLANK IN 3D ═══════════════════════════════════════════════
   Het beeldvlak op de productpagina kan twee dingen tonen: de foto's, of
   de plank zoals hij met de huidige keuzes wordt. De schakelaar staat in
   de hoek van het beeld en niet eronder — daar zoekt niemand hem.
   ═══════════════════════════════════════════════════════════════════ */

.pdp__media { position: relative; }

.beeldschakel {
  position: absolute; z-index: 3; top: 14px; left: 14px;
  display: flex; gap: 4px; padding: 4px;
  background: color-mix(in srgb, var(--ivory-hi, #FBF9F5) 88%, transparent);
  border: 1px solid var(--lijn, rgba(33, 30, 26, .14));
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.beeldschakel__knop {
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 15px; border: 0; border-radius: 999px;
  min-height: 40px;                       /* een duim is geen muisaanwijzer */
  background: none; color: var(--ink-3); cursor: pointer;
  transition: background-color .2s, color .2s;
}
.beeldschakel__knop:hover { color: var(--ink); }
.beeldschakel__knop.is-active { background: var(--ink); color: var(--ivory); }
.beeldschakel__knop:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* De twee beelden wisselen elkaar af; ze staan niet naast elkaar. */
.plank3d { display: none; }
.pdp__media.is-3d .plank3d { display: block; }
.pdp__media.is-3d .pdp__main,
.pdp__media.is-3d .bladeren { display: none; }

.plank3d__toneel {
  position: relative;
  border-radius: var(--beeldronding);
  overflow: hidden;
  /* Dezelfde hoogte als de foto ernaast, zodat de pagina niet springt bij
     het wisselen. */
  aspect-ratio: 3 / 2;
  min-height: 320px;
  background:
    radial-gradient(120% 100% at 50% 12%, #F3EEE6 0%, #E2D9CB 62%, #D2C6B3 100%);
}
@media (min-width: 960px) {
  .plank3d__toneel {
    max-height: max(460px, calc(100vh - var(--kop-vast) - 260px));
  }
}
.plank3d__doek {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; cursor: grab; touch-action: none;
}
.plank3d__doek.is-sleep { cursor: grabbing; }

.plank3d__melding {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0 28px;
  font-size: .88rem; color: var(--ink-3);
}

.plank3d__balk {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: space-between;
  margin-top: 10px;
}
.plank3d__standen { display: flex; flex-wrap: wrap; gap: 6px; }
.plank3d__standen button,
.plank3d__door {
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 13px; cursor: pointer;
  background: none; color: var(--ink-3);
  border: 1px solid var(--lijn, rgba(33, 30, 26, .14));
  border-radius: 7px;
  transition: border-color .2s, color .2s, background-color .2s;
}
.plank3d__standen button:hover,
.plank3d__door:hover { color: var(--ink); border-color: var(--ink-3); }
.plank3d__standen button[aria-pressed="true"],
.plank3d__door.is-active {
  background: var(--ink); color: var(--ivory); border-color: var(--ink);
}
.plank3d__standen button:focus-visible,
.plank3d__door:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.plank3d__voet {
  margin: 8px 0 0; font-size: .78rem; color: var(--ink-3);
}

@media (max-width: 560px) {
  .plank3d__toneel { aspect-ratio: 4 / 3; min-height: 260px; }
  .plank3d__standen button, .plank3d__door {
    padding: 7px 10px; font-size: .74rem; white-space: nowrap;
  }
  /* Op een telefoon vielen vijf knoppen over drie regels en duwden ze de
     configurator van het scherm. Eén regel die je opzij schuift houdt het
     beeld waar het hoort. */
  .plank3d__balk {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    justify-content: flex-start; gap: 6px;
  }
  .plank3d__balk::-webkit-scrollbar { display: none; }
  .plank3d__standen { flex-wrap: nowrap; }
  .plank3d__voet { font-size: .74rem; }
}

/* ── Formulieren: het veld voor robots ──────────────────────────
   Buiten beeld en buiten de tabvolgorde, maar niet display:none: sommige
   robots slaan velden over die verborgen zijn, en juist die moeten erin
   trappen. Een schermlezer slaat het over door aria-hidden. */
.field--hp {
  position: absolute !important; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ── De herroepingsfunctie (/herroepen/) ────────────────────────── */
.herroep { max-width: 760px; }
.herroep__verklaring {
  margin: 8px 0 18px; padding: 14px 16px;
  border-left: 2px solid var(--ink); background: var(--line-soft);
  font-size: .95rem; color: var(--ink);
}
.herroep__klaar {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line-soft); border-radius: var(--vormronding);
  background: #fff;
}
.herroep__klaar:focus { outline: none; }
.herroep__klaar h2 {
  margin: 0 0 12px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--ink);
}
.herroep__klaar p + p { margin-top: 10px; }

/* Onder de foto's op de productpagina: dat het voorbeelden zijn. */
.pdp__fotonoot { margin: 10px 0 0; font-size: .8rem; line-height: 1.5; color: var(--ink-3); max-width: 60ch; }

/* Een waarschuwing bij een keuze die later spijt geeft (22 mm, lang). Geen
   rood: het is een raad, geen fout. */
.cfg__waarschuwing { margin-top: 10px; padding-left: 10px; border-left: 2px solid var(--ink-3); color: var(--ink-2); }

/* De maten van een Object, vlak boven de prijs. Opgemeten, dus met komma's:
   lengte × diepte (van–tot) × dikte. */
.pcard__maat {
  margin: 8px 0 0; font-size: .88rem; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* ══ CONCEPT: BUILD ALS DAGBOEK ══════════════════════════════════
   Alleen voor /concept/build-dagboek/ (niet online). */
.conceptbalk {
  background: #FFF4D6; border-bottom: 1px solid #E9D59A;
  padding: 12px 0; font-size: .9rem; color: var(--ink);
}
.dagboek { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(26px, 3vw, 40px); max-width: 44rem; }
.dagboek__item { border-top: 1px solid var(--line-soft); padding-top: 18px; }
.dagboek__datum {
  display: block; font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.dagboek__titel { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; margin: 6px 0 12px; }
.dagboek__item picture { display: block; max-width: 260px; margin: 0 0 12px; }
.dagboek__item img { width: 100%; height: auto; border-radius: var(--beeldronding); }
.dagboek__leeg { color: var(--ink-3); }

.potten { width: 100%; max-width: 36rem; border-collapse: collapse; }
.potten th, .potten td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.potten th { font-weight: 400; color: var(--ink-2); }
.potten td { text-align: right; font-variant-numeric: tabular-nums; }
.potten__open { color: var(--ink-3); font-style: italic; }
.potten__voet { margin-top: 18px; color: var(--ink-3); max-width: 44rem; }

.volgen { max-width: 30rem; display: grid; gap: 14px; }
.volgen__vink { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--ink-2); }
.volgen__vink input { margin-top: 4px; width: 18px; height: 18px; flex: 0 0 auto; }
.volgen .btn { justify-self: start; }
.volgen__melding { margin: 0; font-size: .92rem; color: var(--ink); }
.volgen__melding.is-fout { color: #8A3324; }
.volgen__klein { margin: 0; font-size: .82rem; color: var(--ink-3); }

.bestaand { padding-left: 1.1em; }
.bestaand li { margin-bottom: 10px; color: var(--ink-2); }
.concept__voorstel {
  margin-top: 24px; padding: 14px 16px; background: #FFF4D6;
  border-left: 3px solid #E0B84A; font-size: .92rem;
}

/* Op het concept staat er geen stand tussen de inleiding en de knoppen. */
.bouw-kop__lead + .bouw-kop__knoppen { margin-top: clamp(22px, 3vw, 32px); }

/* ══ DE ACTIE: DE BALK EN HET VENSTER ════════════════════════════
   De knop op de balk ziet eruit als de link die er stond, maar is een knop:
   hij opent een venster en gaat niet naar een pagina. */
.meldbalk__knop {
  background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  /* Het raakvlak is groter dan de tekst: als tekst was dit 46 x 16 px en dat
     mist een duim. Met padding werd de hele balk 24 px hoger (en daarmee ook
     alles wat zich aan --kop-vast vasthoudt); een laagje erover verandert
     niets aan de hoogte. */
  position: relative;
}
.meldbalk__knop::after {
  content: ''; position: absolute; left: -10px; right: -10px;
  top: 50%; height: 40px; transform: translateY(-50%);
}
.meldbalk__knop:hover { opacity: .8; }

/* Boven de balk bovenaan (z-index 200): die staat vast bovenin, en een
   venster dat eronder valt, verliest zijn sluitknop achter de balk. */
.actie { z-index: 220; align-items: center; justify-content: center; padding: 20px; }
.actie__kaart {
  position: relative;
  width: min(100%, 34rem); max-height: calc(100dvh - 40px); overflow-y: auto;
  padding: clamp(26px, 4vw, 40px);
  background: var(--ivory); border-radius: var(--vormronding);
  box-shadow: 0 24px 60px rgba(33, 29, 24, .22);
}
.actie__sluit { position: absolute; top: 10px; right: 10px; }
.actie__titel {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.15;
  margin: 0 36px 22px 0;
}
.actie__blok { margin-bottom: 18px; }
.actie__blok h3 {
  font-family: var(--font-display); font-weight: 400; font-size: 1.02rem;
  margin: 0 0 4px;
}
.actie__blok p { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.6; }
.actie__klein {
  margin: 0 0 12px; font-size: .84rem; line-height: 1.6; color: var(--ink-3);
}
.actie__knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.actie__melding { margin: 12px 0 0; font-size: .9rem; color: var(--ink); }
@media (max-width: 480px) {
  .actie { padding: 0; align-items: flex-end; }
  .actie__kaart {
    width: 100%; max-height: 92dvh;
    border-radius: var(--vormronding) var(--vormronding) 0 0;
  }
  .actie__knoppen .btn { flex: 1 1 100%; }
}

/* De tip in de winkelmand: rustig, en alleen bij één plank. */
.cart-sum__tip { color: var(--ink-2); }

/* ══ SET SAMENSTELLEN ════════════════════════════════════════════
   De configurator links, de set rechts. Op een telefoon onder elkaar:
   eerst kiezen, dan zien wat er ligt. */
.setpagina { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start;
  padding-bottom: clamp(50px, 7vw, 96px); }
@media (min-width: 900px) { .setpagina { grid-template-columns: minmax(0, 1fr) 340px; } }
.setpagina__kop { margin-bottom: 18px; }

.setpaneel {
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--sand); border-radius: var(--vormronding);
}
@media (min-width: 900px) { .setpaneel { position: sticky; top: calc(var(--kop-vast) + 20px); } }
.setpaneel__kop { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; margin: 0; }
.setpaneel__telling { margin: 4px 0 14px; font-size: .88rem; color: var(--ink-3); }
.setpaneel__leeg { margin: 10px 0 0; color: var(--ink-3); }
.setpaneel__lijst { list-style: none; margin: 0 0 14px; padding: 0; }
.setpaneel__rij {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  padding: 12px 0; border-top: 1px solid var(--line-soft);
}
.setpaneel__naam { font-size: .95rem; }
.setpaneel__maat { grid-column: 1; font-size: .84rem; color: var(--ink-3); }
.setpaneel__prijs { grid-column: 2; grid-row: 1; text-align: right; font-size: .95rem; }
.setpaneel__weg { grid-column: 2; grid-row: 2; justify-self: end; font-size: .82rem; color: var(--ink-3); background: none; border: 0; cursor: pointer; }
.setpaneel__weg:hover { color: var(--ink); }
.setpaneel__klein { margin: 10px 0 0; font-size: .82rem; color: var(--ink-3); }
.setpaneel__tip { margin: 10px 0 0; font-size: .88rem; color: var(--ink-2); }
.setpaneel__knoppen { display: grid; gap: 8px; margin-top: 16px; }

/* De ingang naar "set samenstellen": een knop met één regel uitleg ernaast. */
.section-head__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.winkelkop__set {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: clamp(18px, 2.4vw, 26px);
}
.winkelkop__set span { font-size: .9rem; color: var(--ink-2); }

/* ══ CAMPAGNEBLOK ════════════════════════════════════════════════
   Staat er alleen als er een film en een echte set zijn. Het label bij het
   beeld zegt dat het interieur gemaakt beeld is; de planken zijn echt. */
.campagne .u-container { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (min-width: 900px) { .campagne .u-container { grid-template-columns: 1.2fr 1fr; } }
.campagne__beeld { margin: 0; }
.campagne__beeld video { width: 100%; height: auto; display: block; border-radius: var(--beeldronding); background: var(--sand-deep); }
.campagne__label { margin-top: 8px; font-size: .78rem; color: var(--ink-3); }
.campagne__titel {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.1; margin: 0 0 12px;
}
.campagne__zin { color: var(--ink-2); margin-bottom: 18px; }
.campagne__set { list-style: none; margin: 0 0 12px; padding: 0; }
.campagne__set li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: .92rem;
}
.campagne__samen { display: flex; justify-content: space-between; gap: 12px; font-size: 1.05rem; margin: 0 0 16px; }
.campagne__melding { margin: 10px 0 0; font-size: .9rem; color: var(--ink); }

/* De lichtkring onder een Object steekt 6 % buiten het stuk (::before met
   inset -6%). Op een smal scherm gaf dat twee pixels horizontale scroll:
   onzichtbaar, maar de pagina schuift wel. Hier afgeknipt — clip en niet
   hidden, zodat een sticky element in deze band blijft werken. */
.wegband { overflow-x: clip; }

/* Een regel uitleg onder de titel van een grafiek in het beheer. */
.grafiek__uitleg { margin-top: 4px; font-size: .82rem; color: var(--ink-3); }


/* ══ MEER ════════════════════════════════════════════════════════
   Vier ingangen naast de plank: afwerking, bevestiging, accessoires,
   salontafels. Twee daarvan hebben nog geen foto — en een geleende foto
   is erger dan geen foto, want die belooft een product dat er niet is.
   Zonder beeld krijgt de kaart een rustig vlak met de naam erin; ze staat
   dan naast een kaart met foto zonder eruit te vallen.
   ════════════════════════════════════════════════════════════════ */
.meerkaarten {
  display: grid;
  gap: clamp(18px, 2.4vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
@media (min-width: 900px) { .meerkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.meerkaart {
  display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
}
.meerkaart__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--beeldronding);
  background: var(--sand-deep);
}
.meerkaart__media picture { display: block; width: 100%; height: 100%; }
.meerkaart__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
@media (hover: hover) { .meerkaart:hover .meerkaart__media img { transform: scale(1.04); } }

/* Het vlak zonder foto. De naam staat er groot in, in dezelfde letter als
   de koppen: het leest als een hoofdstuktitel, niet als een gat. */
.meerkaart__media--vlak {
  display: flex; align-items: flex-end; padding: clamp(18px, 2.4vw, 28px);
  background: var(--sand-deep);
}
.meerkaart__naam--groot {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  line-height: 1.1; color: var(--ink-2);
}
.meerkaart__naam {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  color: var(--ink);
}
.meerkaart__tekst {
  margin-top: 8px; max-width: 46ch;
  font-size: .95rem; line-height: 1.6; color: var(--ink-2);
}
.meerkaart__naar {
  margin-top: 12px;
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  transition: color .2s;
}
.meerkaart:hover .meerkaart__naar { color: var(--ink); }

/* ── De artikelen zelf ───────────────────────────────────────────
   Staat er niets in site/data/meer.json, dan komt hier het eerlijke vak:
   nog niet in de winkel, vraag het ons. Beter dan een lege rij kaarten. */
.meer-leeg {
  border: 1px solid var(--line);
  border-radius: var(--beeldronding);
  padding: clamp(22px, 3vw, 36px);
  background: var(--ivory);
}
.meer-leeg__kop {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  color: var(--ink);
}
.meer-leeg__tekst {
  margin: 10px 0 clamp(18px, 2.4vw, 24px); max-width: 60ch;
  font-size: .95rem; line-height: 1.65; color: var(--ink-2);
}

.artikelen {
  display: grid;
  gap: clamp(20px, 2.6vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  /* Met één artikel rekt auto-fit die ene kaart over de hele breedte uit:
     een tafel van 1200 px naast een lege rechterhelft. Vandaar een plafond
     per kaart en links uitlijnen. */
  justify-content: start;
}
.artikel { max-width: 460px; }
.artikel { display: flex; flex-direction: column; }
.artikel__media {
  aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--beeldronding); background: var(--sand-deep);
  margin-bottom: 14px;
}
.artikel__media picture { display: block; width: 100%; height: 100%; }
.artikel__media img { width: 100%; height: 100%; object-fit: cover; }
.artikel__naam {
  margin: 0; font-family: var(--font-display);
  font-size: 1.02rem; color: var(--ink);
}
.artikel__kort {
  margin: 8px 0 0; font-size: .92rem; line-height: 1.6; color: var(--ink-2);
}
.artikel__specs { margin: 12px 0 0; display: grid; gap: 4px; }
.artikel__specs > div {
  display: flex; justify-content: space-between; gap: 14px;
  padding-top: 6px; border-top: 1px solid var(--line-soft);
  font-size: .84rem;
}
.artikel__specs dt { color: var(--ink-3); }
.artikel__specs dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.artikel__past { margin: 10px 0 0; font-size: .84rem; color: var(--ink-3); }
.artikel__prijs {
  margin: 14px 0 0; font-family: var(--font-display);
  font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums;
}
.artikel__knop { margin-top: 12px; align-self: start; }
.artikel__uit {
  margin: 14px 0 0; font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}


/* ── Maak je bestelling compleet ─────────────────────────────────
   Op de productpagina boven de knop, in de winkelmand onder de regels.
   Hooguit twee regels, en alleen voor iets wat er echt is: een rij
   suggesties die zichzelf herhaalt leest als een winkel die iets kwijt
   moet. Rustig kader, geen rode badge, geen "laatste kans". */
.compleet {
  margin: clamp(18px, 2.4vw, 26px) 0;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--line);
  border-radius: var(--beeldronding);
  background: var(--ivory);
}
.compleet--mand { margin-top: clamp(22px, 3vw, 32px); background: var(--sand); }
.compleet__titel {
  margin: 0 0 12px;
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.compleet__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.compleet__lijst > li {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px;
}
.compleet__wat { display: grid; gap: 4px; min-width: min(100%, 220px); flex: 1 1 220px; }
.compleet__kop { font-size: .95rem; color: var(--ink); }
.compleet__uit { font-size: .86rem; line-height: 1.55; color: var(--ink-2); }
.compleet__knop { flex: 0 0 auto; }
@media (max-width: 520px) {
  .compleet__knop { width: 100%; text-align: center; }
}


/* Het etiket en de maatlijn onder de galerij. Ze horen bij de foto en niet
   bij de knoppen: links kijk je, rechts kies je. */
.pdp__objectlabel { margin-top: clamp(18px, 2.4vw, 26px); }
.pdp__maatlijn { margin-top: 14px; max-width: 460px; }

/* De regel met de dikte en het maatwerk op een productkaart. Wat een koper
   op een kaart wil zien staat er nu voluit: wat het is, hoe dik, of het op
   maat kan en wat het vanaf kost. Vier regels, geen badges. */
.pcard__spec {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}

/* Het bestelnummer op de bedankpagina. Zelfde vorm als het etiket onder een
   plank: dit is het object dat nu in productie gaat. */
.bestelblok {
  margin-top: clamp(30px, 4vw, 44px);
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--beeldronding);
  background: var(--ivory);
  max-width: 460px;
}
.bestelblok__noot { margin: 12px 0 0; font-size: .86rem; line-height: 1.6; color: var(--ink-3); }

/* De enige grap in de winkelmand, en klein. Dichter bij de betaling wordt
   de winkel rustiger, niet grappiger. */
.cart-sum__mdf {
  display: flex; justify-content: space-between; gap: 12px;
  margin: 14px 0 0; padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Research Division, klein ────────────────────────────────────
   Eén tegeltje op de startpagina in plaats van een hele afdeling: het
   merk mag opvallen, maar niet tussen de bezoeker en de kassa gaan staan.
   Zelfde vorm als een dossier, een maat kleiner. */
.rdteaser {
  display: grid; gap: 8px; justify-items: start;
  max-width: 560px;
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--beeldronding);
  background: var(--ivory);
}
.rdteaser__naam {
  margin: 0;
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.rdteaser__maten {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rdteaser__zin { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.6; }

/* De afdeling zet haar naam bij de muurstudie: dat is het enige plekje
   waar de Research Division op de startpagina nog staat. */
.muurstudie__afdeling {
  margin: clamp(14px, 2vw, 18px) 0 4px;
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}

/* Een productkaart zonder foto. Komt voor bij categorieën die we wel
   maken maar nog niet gefotografeerd hebben; een geleend beeld zou een
   product beloven dat er niet is. */
.pcard__media--vlak {
  display: flex; align-items: flex-end;
  padding: clamp(16px, 2.2vw, 24px);
  background: var(--sand-deep);
  text-decoration: none;
}
.pcard__media--vlak > span {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  line-height: 1.15; color: var(--ink-3);
}

/* Uitklapblokken op de productpagina. De klasse .acc staat hier op het
   <details> zelf (en niet op een omhulsel zoals in de FAQ), dus de randen
   staan hier apart. Alles wat je moet weten om te kopen staat erboven;
   dit is voor wie doorleest. */
.acc--pdp {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.acc--pdp + .acc--pdp { border-top: 0; }
.acc--pdp > summary { padding: 20px 0; }
.acc--pdp[open] > summary { color: var(--ink); }

/* Een film op een artikelkaart. Zelfde kader als een foto; hij laadt pas
   als iemand op play drukt (preload="none"), anders kost één pagina met
   een tafel erop meteen een paar megabyte. */
.artikel__media--film { aspect-ratio: 1 / 1; }
.artikel__media--film video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: var(--sand-deep);
}
/* De code van het stuk, in de vorm die overal op de site terugkomt. */
.artikel__code {
  margin: 0 0 6px;
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.artikel__prijs--vraag { font-size: .95rem; color: var(--ink-2); letter-spacing: 0; }

/* De tafel in een echte kamer, klein onder de gegevens. Twee beelden naast
   elkaar: genoeg om te zien hoe het staat, niet zoveel dat de kaart een
   galerij wordt. */
.artikel__strip {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 14px 0 0; padding: 0; list-style: none;
}
.artikel__strip li {
  overflow: hidden; border-radius: var(--beeldronding); background: var(--sand-deep);
  aspect-ratio: 1 / 1;
}
.artikel__strip picture { display: block; width: 100%; height: 100%; }
.artikel__strip img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ══ MEUBELPAGINA ════════════════════════════════════════════════
   Links een collage, rechts wat je moet weten. De verhouding is bewust
   niet 50/50: het beeld verkoopt een tafel, de tekst bevestigt hem.
   ════════════════════════════════════════════════════════════════ */
.tafel__grid { display: grid; gap: clamp(28px, 4vw, 56px); }
.tafel { padding-bottom: clamp(48px, 7vw, 110px); }
@media (min-width: 900px) {
  .tafel__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
  }
}

.tafel__media { display: grid; gap: clamp(14px, 2vw, 22px); }
.tafel__beeld {
  margin: 0; overflow: hidden;
  border-radius: var(--beeldronding);
  background: var(--sand-deep);
}
.tafel__beeld picture { display: block; }
.tafel__beeld img,
.tafel__beeld video { width: 100%; height: auto; display: block; }
/* Eén kolom, elk beeld over de volle breedte. Twee naast elkaar leek een
   collage, maar met een vierkant, een staand beeld en een film van 16:9
   werd het een rafelrand: rijen van ongelijke hoogte met gaten ernaast.
   Zo scrol je erlangs zoals bij een meubelmerk hoort — steeds even breed,
   steeds een andere verhouding. */
.tafel__media { grid-template-columns: minmax(0, 1fr); }

/* Op een telefoon wordt het collage een veeg-galerij: vijf beelden naast
   elkaar die inklikken, en de gegevens eronder. Anders staat de prijs pas
   na vijf schermen beeld — en dat is precies de fout die deze pagina niet
   mag maken. */
@media (max-width: 899px) {
  .tafel__media {
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* De galerij loopt tot aan de rand van het scherm, niet tot aan de
       kolom: dat leest als iets om te vegen. */
    margin: 0 calc(var(--rand, 20px) * -1);
    padding: 0 var(--rand, 20px);
  }
  .tafel__media::-webkit-scrollbar { display: none; }
  .tafel__beeld { scroll-snap-align: center; }
  .tafel__beeld img, .tafel__beeld video { aspect-ratio: 4 / 3; object-fit: cover; height: auto; }
  .tafel__beeld--groot img { aspect-ratio: 1 / 1; }
}

/* De rechterkolom heeft twee delen: de gegevens die blijven plakken, en
   onderaan het dossier en het onderhoud. Zonder dat tweede deel stond er
   onder aan deze sectie bijna 1700 px niets naast het collage. */
/* HOE HET PLAKKEN WERKT
   Een plakkend blok schuift mee binnen het vak waar het in staat, tot de
   onderkant van dat vak. Stond het dossier in hetzelfde vak eronder, dan
   schoof de prijs er bij het scrollen overheen (gemeld 19 september 2026).
   Nu zit het plakkende deel in een eigen vak (.tafel__plak) dat de hele
   hoogte boven het dossier vult: de gegevens blijven in beeld langs de
   foto's en stoppen precies boven het dossier, dat onderaan de kolom staat,
   op de hoogte van de laatste foto. */
.tafel__rechts {
  display: flex; flex-direction: column;
  gap: clamp(40px, 6vw, 80px);
}
.tafel__plak { flex: 1 1 auto; }
.tafel__info { display: grid; gap: 0; }
@media (min-width: 900px) {
  .tafel__grid { align-items: stretch; }
  .tafel__media { align-self: start; }
  .tafel__info {
    position: sticky;
    top: calc(var(--kop-vast, 76px) + 24px);
  }
}
.tafel__extra { display: grid; gap: clamp(20px, 2.6vw, 28px); }
.tafel__onderhoud {
  padding-top: clamp(18px, 2.4vw, 24px);
  border-top: 1px solid var(--line);
  font-size: .92rem; line-height: 1.65; color: var(--ink-2);
  max-width: 46ch;
}
.tafel__onderhoud p { margin: 0; }
.tafel__onderhoud-kop {
  margin: 0 0 8px !important;
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.tafel__code {
  margin: 10px 0 0;
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.tafel__naam {
  margin: 8px 0 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.02; letter-spacing: -.01em; color: var(--ink);
}
.tafel__kort {
  margin: clamp(14px, 2vw, 18px) 0 0; max-width: 46ch;
  font-size: 1rem; line-height: 1.65; color: var(--ink-2);
}
.tafel__specs { margin: clamp(20px, 2.6vw, 28px) 0 0; display: grid; gap: 0; }
.tafel__specs > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-top: 1px solid var(--line);
  font-size: .95rem;
}
.tafel__specs > div:last-child { border-bottom: 1px solid var(--line-soft); }
.tafel__specs dt { color: var(--ink-2); }
.tafel__specs dd { margin: 0; color: var(--ink); text-align: right; font-weight: 500; }
.tafel__prijs {
  margin: clamp(20px, 2.6vw, 26px) 0 0;
  font-family: var(--font-display); font-size: 1.75rem; font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tafel__prijs--vraag { font-size: 1.05rem; color: var(--ink-2); }
.tafel__btw { margin: 4px 0 0; font-size: .82rem; color: var(--ink-3); }
.tafel__knop { margin-top: clamp(16px, 2vw, 20px); justify-self: start; }
.tafel__lijn {
  margin: clamp(22px, 3vw, 30px) 0 0;
  padding-top: clamp(18px, 2.4vw, 24px);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.05rem; line-height: 1.35; color: var(--ink-3);
}

/* De tweede film, over de hele kolom. */
.tafel__breedfilm {
  margin: clamp(24px, 3vw, 34px) 0 0;
  overflow: hidden; border-radius: var(--beeldronding);
  background: var(--sand-deep);
}
.tafel__breedfilm video { width: 100%; height: auto; display: block; }

/* Het slot, in de toon van /over-mahowa/: één zin, groot genoeg om te
   blijven hangen. */
.tafel__slot {
  margin: clamp(34px, 4.5vw, 56px) 0 clamp(12px, 1.6vw, 18px);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.4vw, 2.3rem);
  line-height: 1.2; color: var(--ink); max-width: 20ch;
}

/* Een verzendkeuze die niet kan. Grijs en niet aanklikbaar, met de reden
   eronder — dat is duidelijker dan hem weglaten, want dan vraagt iemand
   zich af waar de bezorging gebleven is. */
.choice--uit { opacity: .45; cursor: not-allowed; }
.choice--uit * { cursor: not-allowed; }

/* Hoe een meubel bij je komt. Staat bij de knop en niet in een uitklapblok:
   wie op "in winkelmand" drukt hoort dit al te weten. */
.tafel__levering {
  margin: clamp(14px, 2vw, 18px) 0 0; max-width: 46ch;
  font-size: .88rem; line-height: 1.6; color: var(--ink-2);
}
.tafel__levering span {
  display: block;
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 4px;
}

/* ── De onderrand van de films ───────────────────────────────────
   De films komen uit een generator die onderin een merkje zet. Het beeld
   is 1280 x 720; hier staat een kader van 1280 x 648 omheen en het beeld
   wordt vanaf de bovenkant bijgesneden. Dat kost de onderste 12 % — ruim genoeg voor
   de strook waar dat merkje staat — en scheelt het opnieuw uitrekenen van
   de film (er staat geen ffmpeg op deze computer).

   Volledig scherm staat daarom uit: daar zou het hele beeld te zien zijn,
   inclusief die strook. */
.tafel__beeld--film video,
.tafel__breedfilm video,
.artikel__media--film video {
  aspect-ratio: 1280 / 634;   /* 12 % eraf: iets ruimer dan het merkje zelf */
  object-fit: cover;
  object-position: center top;
  height: auto;
}

/* Een menu-item met een lade stond 2 px hoger dan de gewone links ernaast:
   het ene was een blok, het andere een regel tekst in een blok. Nu allebei
   een blok, en ze staan op één lijn. */
.nav__group > a { display: block; }

/* ── De veeg-galerij van de salontafel op een telefoon ─────────────
   Twee fouten, allebei alleen op een telefoon zichtbaar:
   1. De studiofoto (het duidelijkste beeld van de tafel) had breedte 0.
      De vaste kolom uit de desktopopmaak (minmax(0, 1fr)) bleef staan; in
      een rij die naar rechts doorloopt kreeg die eerste kolom de restruimte,
      en die is nul.
   2. De film is bovenaan bijgesneden tot 1280 x 634 (het merkje van de
      generator valt eronder weg). In een rij van 4:3-beelden bleef er onder
      de film een lege zandstrook over.
   Nu is elke dia 4:3. De film vult zijn dia en is 13,6 % hoger dan het vak,
   zodat de onderste strook van het beeld (met het merkje) buiten het vak
   valt — dezelfde uitsnede als op een groot scherm. */
@media (max-width: 899px) {
  .tafel__media { grid-template-columns: none; }
  .tafel__beeld--groot img { aspect-ratio: 4 / 3; }
  .tafel__beeld--film { aspect-ratio: 4 / 3; }
  .tafel__beeld--film video {
    aspect-ratio: auto; width: 100%; height: 113.6%;
    object-fit: cover; object-position: center top;
  }
}

/* Een drager die op deze dikte niet kan (Hettich Titan 1 vraagt 24 mm):
   zichtbaar uit, niet verdwenen — zo blijft duidelijk dat de keuze bestaat
   en waarom ze nu niet meedoet. De regel eronder zegt het in woorden. */
.mount.is-uit { opacity: .45; cursor: not-allowed; }
.mount.is-uit:hover { border-color: var(--line); }