/* ==========================================================================
   Comfort by Sons — winkelsysteem
   Huisstijl "Concept 5": inkt #1F1F1F, terracotta #D46A37, taupe #CDB8A6 op
   crème #F3ECE6. Het weefselteken uit het logo is het enige ornament.
   Dunne lijnen, veel lucht, weinig omkadering.

   Over de terracotta: #D46A37 haalt met witte tekst 3,6:1 en dat is te weinig
   om op te lezen. Vlakken met tekst erop krijgen daarom --actie (#B4501F,
   5,1:1); de merkkleur zelf blijft over voor lijnen, tekens en accenten waar
   niets op staat.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* Vlakken — crème uit de huisstijl */
  --vlak:       #F3ECE6;
  --wit:        #FFFFFF;
  --vlak-diep:  #E9DFD6;   /* beeldvlakken, rustige zones */
  --rand:       #DACBBD;
  --rand-fijn:  #E6DCD2;
  --taupe:      #CDB8A6;   /* alleen decoratief, nooit onder tekst */

  /* Inkt */
  --inkt:       #1F1F1F;   /* 14.1:1 op vlak */
  --inkt-2:     #4A443E;   /*  8.2:1 */
  --inkt-3:     #6B6259;   /*  5.1:1 — ondergrens voor kleine tekst */
  --inkt-uit:   #A79C92;   /* uitsluitend uitgeschakelde staat */

  /* Actie — terracotta, donker genoeg om witte tekst te dragen */
  --actie:      #B4501F;   /* wit erop 5,1:1 */
  --actie-diep: #93400F;   /* wit erop 7,0:1 */
  --merk:       #D46A37;   /* de huisstijlkleur zelf: lijnen en tekens */
  --merk-tekst: #A8481A;   /* oranje tekst op crème, 5,0:1 */
  --tint:       #EBE1D8;   /* rustige band */
  --tintlijn:   #DDCFC2;

  --rood:       #9B2C2C;   /* alleen fouten */

  --letter: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Vaste schaal — winkel-UI, geen vloeiende koppen */
  --t-xs:  12px;
  --t-s:   13px;
  --t-m:   15px;
  --t-l:   16px;
  --t-xl:  19px;
  --t-2xl: 24px;
  --t-3xl: 30px;
  --t-4xl: 38px;

  --ronding: 2px;          /* bijna recht: werkplaats, geen app */

  --zijmarge: clamp(18px, 4vw, 52px);
  --breed:    1360px;

  --vlot: 160ms cubic-bezier(.4,0,.2,1);
  --rust: 300ms cubic-bezier(.22,1,.36,1);

  --z-plakkerig: 100;
  --z-balk:      200;
  --z-overlay:   300;
}

/* --------------------------------------------------------------- basis -- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--vlak);
  color: var(--inkt);
  font-family: var(--letter);
  font-size: var(--t-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em;
  overflow-wrap: break-word;   /* "Privacyverklaring" past anders niet op 320px */
}
h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-l); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--inkt); color: var(--wit); }
:focus-visible { outline: 2px solid var(--actie); outline-offset: 2px; }

.wrap { max-width: var(--breed); margin-inline: auto; padding-inline: var(--zijmarge); }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.streep { height: 1px; background: var(--rand-fijn); border: 0; margin: 0; }

/* Cijfers in prijzen en maten uitlijnen */
.cijfers { font-variant-numeric: tabular-nums; }

/* Raakvlakken. Op een touchscreen is een link van 26px hoog te klein om
   betrouwbaar te raken; we vergroten het raakvlak zonder de tekst te
   verzetten. */
@media (pointer: coarse) {
  .link, .kruimels a, .chip, .cfg-soort, .cfg-wis, .cfg-fam { position: relative; }
  .link::after, .kruimels a::after, .chip::after,
  .cfg-soort::after, .cfg-wis::after, .cfg-fam::after {
    content: ''; position: absolute; left: 0; right: 0;
    top: 50%; height: 44px; transform: translateY(-50%);
  }
}

/* --------------------------------------------------------------- knop -- */

/* Regelhoogte 1 gaf de knop de hoogte van de letters. Zodra er een pictogram
   in stond werd hij 3 tot 5 px hoger dan zijn buren — zichtbaar zodra er twee
   naast elkaar staan. Nu bepaalt de regelhoogte de maat en past het teken
   daarbinnen, dus is elke knop even hoog. */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: var(--t-m); font-weight: 600; line-height: 1.25;
  padding: 15px 26px;
  border: 1px solid var(--actie); border-radius: var(--ronding);
  background: var(--actie); color: var(--wit);
  cursor: pointer;
  transition: background var(--vlot), border-color var(--vlot), color var(--vlot);
}
.knop svg { width: 18px; height: 18px; flex: none; }
.knop:hover { background: var(--actie-diep); border-color: var(--actie-diep); }
.knop[disabled] {
  background: var(--rand-fijn); border-color: var(--rand); color: var(--inkt-uit);
  cursor: not-allowed;
}

.knop--rand { background: transparent; color: var(--inkt); border-color: var(--rand); }
.knop--rand:hover { background: transparent; color: var(--actie-diep); border-color: var(--actie); }

.knop--breed { width: 100%; }
.knop--klein { padding: 11px 18px; font-size: var(--t-s); }
.knop--vierkant { width: 54px; padding: 0; flex: none; }

/* Onderstreepte tekstlink — het enige linkidioom op de site */
.link {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 500;
  border-bottom: 1px solid var(--tintlijn); padding-bottom: 1px;
  transition: border-color var(--vlot), color var(--vlot);
}
.link:hover { color: var(--actie-diep); border-color: var(--actie); }

.icoonknop {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border: 1px solid transparent; border-radius: var(--ronding);
  background: transparent; color: var(--inkt); cursor: pointer;
  transition: background var(--vlot), border-color var(--vlot);
}
.icoonknop:hover { background: var(--vlak-diep); }
/* Met een vinger is 38 px krap. Hier kan het vlak zelf groeien, dus dat doen we
   liever dan er een onzichtbaar raakvlak overheen te leggen. */
@media (pointer: coarse) {
  .icoonknop { width: 42px; height: 42px; }
}

/* ----------------------------------------------------------------- kop --
   Eén slanke regel. Geen zoekbalk in het midden, geen zwarte reclamebalk:
   de mededeling staat als dunne strip onder de navigatie. */

.kop {
  position: sticky; top: 0; z-index: var(--z-plakkerig);
  background: color-mix(in srgb, var(--vlak) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rand-fijn);
}
.kop .wrap { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); padding-block: 17px; }

/* Het nieuwe beeldmerk: het weefselteken naast het woordmerk, uit het
   merkblad gesneden en vrijgemaakt. Vaste hoogte, breedte volgt. */
.merk { display: flex; align-items: center; gap: 12px; flex: none; }
.merk img { height: 34px; width: auto; }
.voet .merk img { height: 34px; }

.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }
.nav a {
  font-size: var(--t-m); font-weight: 500; color: var(--inkt-2);
  padding-block: 3px; border-bottom: 1.5px solid transparent;
  transition: color var(--vlot), border-color var(--vlot);
}
.nav a:hover { color: var(--inkt); }
.nav a[aria-current] { color: var(--inkt); border-color: var(--actie); }

.kop-acties { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.kop-acties .link { margin-right: 10px; font-size: var(--t-s); }

.menuknop { display: none; }

/* USP-balk bovenaan — dezelfde drie beloften als op de huidige site.
   Donkere inkt met terracotta vinkjes: de merkkleur is aanwezig zonder dat
   een balk van 40 pixels de hele pagina overstemt. */
.usp {
  background: #1C1917; color: #E8DED5;
  font-size: var(--t-s);
}
.usp svg { color: var(--merk); }
.usp .wrap {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(20px, 4vw, 56px);
  padding-block: 11px; overflow-x: auto; scrollbar-width: none;
}
.usp .wrap::-webkit-scrollbar { display: none; }
.usp span { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.usp b { color: #fff; font-weight: 600; }
.usp .staart { font-style: normal; }
.usp svg { flex: none; }

/* ============================================================ mobiel menu --
   Een paneel dat vanaf rechts inschuift. Als <dialog> zodat Escape, de
   focusval en de achtergrond automatisch goed staan. */

.menu {
  margin: 0 0 0 auto;                    /* tegen de rechterrand */
  width: min(400px, 88vw); max-width: none;
  height: 100dvh; max-height: none;
  padding: 0; border: 0; border-radius: 0;
  background: var(--vlak); color: var(--inkt);
  flex-direction: column;
  box-shadow: -12px 0 40px rgba(24,19,16,.16);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}
/* Alleen tonen als hij openstaat. Zonder deze regel overschrijft ons eigen
   display:flex de standaard van een dicht <dialog>, en dan staat het paneel
   permanent naast de pagina — goed voor 280px horizontale overloop. */
.menu[open] { display: flex; }
.menu.aan { transform: none; }
.menu::backdrop { background: rgba(24,19,16,0); transition: background 280ms ease; }
.menu.aan::backdrop { background: rgba(24,19,16,.46); }

/* ------------------------------------------------------- winkelmandlade --
   Zelfde bouw als het menu: een <dialog> tegen de rechterrand die inschuift.
   Wie iets in zijn mand legt, wordt zo niet van de pagina gehaald waar hij
   mee bezig was. */
.lade {
  margin: 0 0 0 auto;
  width: min(430px, 92vw); max-width: none;
  height: 100dvh; max-height: none;
  padding: 0; border: 0; border-radius: 0;
  background: var(--vlak); color: var(--inkt);
  flex-direction: column;
  box-shadow: -12px 0 40px rgba(24,19,16,.16);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}
.lade[open] { display: flex; }
.lade.aan { transform: none; }
.lade::backdrop { background: rgba(24,19,16,0); transition: background 280ms ease; }
.lade.aan::backdrop { background: rgba(24,19,16,.46); }

.lade-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--rand-fijn);
  background: var(--wit); flex: none;
}
.lade-kop h2 { font-size: var(--t-l); display: flex; align-items: center; gap: 9px; }
.lade-aantal {
  display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: 999px; background: var(--actie); color: var(--wit);
  font-size: var(--t-xs); font-weight: 600;
}

.lade-inhoud { flex: 1; overflow-y: auto; padding: 4px 20px; }

.lade-regel {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 14px; align-items: start;
  padding: 18px 0; border-bottom: 1px solid var(--rand-fijn);
}
.lade-regel:last-child { border-bottom: 0; }
.lade-regel .beeld {
  aspect-ratio: 1; background: var(--wit); border-radius: var(--ronding);
  overflow: hidden; display: block;
}
.lade-regel .beeld img { width: 100%; height: 100%; object-fit: cover; }
.lade-regel .naam { display: block; font-weight: 600; line-height: 1.3; }
.lade-regel .naam:hover { color: var(--actie-diep); }
.lade-regel .bij {
  display: block; font-size: var(--t-s); color: var(--inkt-3); margin-top: 3px;
}
.lade-regel .aantalkiezer { margin-top: 10px; }
.lade-regel .rechts {
  display: grid; justify-items: end; gap: 8px; text-align: right;
}
.lade-regel .bedrag { font-weight: 600; white-space: nowrap; }
.lade-regel .offerte {
  font-size: var(--t-s); color: var(--merk-tekst); font-weight: 600; white-space: nowrap;
}

.lade-leeg {
  display: grid; justify-items: center; gap: 12px; text-align: center;
  padding: 54px 10px; color: var(--inkt-2);
}
.lade-leeg .teken {
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 50%; background: var(--vlak-diep); color: var(--inkt-3);
}
.lade-leeg b { font-size: var(--t-l); color: var(--inkt); }
.lade-leeg p { max-width: 30ch; }
.lade-leeg .knop { margin-top: 4px; }

.lade-voet {
  flex: none; padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rand); background: var(--wit);
}
.lade-rij {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: var(--t-m); color: var(--inkt-2); margin-bottom: 8px;
}
.lade-rij b { color: var(--inkt); font-size: var(--t-l); }
.lade-voet .knop { margin-top: 10px; }
.lade-voet .fijn { margin-top: 10px; }
.lade-voet .fijn:last-child { text-align: center; }

.menu-kop {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 16px 20px; border-bottom: 1px solid var(--rand-fijn);
  flex: none;
}
.menu-kop img { height: 30px; width: auto; }

.menu-nav { flex: 1; overflow-y: auto; padding: 6px 0; }
.menu-nav a, .menu-onder > a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 20px; font-size: var(--t-xl); font-weight: 500;
  border-bottom: 1px solid var(--rand-fijn);
  transition: background var(--vlot);
}
.menu-nav a:last-child { border-bottom: 0; }
.menu-nav a:active, .menu-onder > a:active { background: var(--tint); }
.menu-nav a[aria-current] { font-weight: 700; }
.menu-nav a[aria-current] span { box-shadow: inset 0 -2px 0 var(--actie); }
.menu-nav svg, .menu-onder svg { color: var(--inkt-uit); flex: none; }

.menu-onder { flex: none; border-top: 1px solid var(--rand); background: var(--tint); }
.menu-onder > a { font-size: var(--t-m); padding-block: 13px; border-bottom: 1px solid var(--tintlijn); }
.menu-contact { display: flex; gap: 8px; padding: 14px 20px 10px; }
.menu-contact .knop { flex: 1; }
.menu-contact svg { color: currentColor; }
.menu-usp {
  margin: 0; padding: 0 20px 16px;
  font-size: var(--t-xs); color: var(--inkt-3); line-height: 1.5;
}

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

/* ============================================================== zoekbalk --
   Vaste band onder de kop. Zoekt in de modellen, de stofcollecties en de
   kleurfamilies — alle drie staan al in het geheugen, dus het antwoord komt
   terwijl je typt. */

.zoekbalk { background: var(--wit); border-bottom: 1px solid var(--rand-fijn); }
.zoekbalk .wrap { position: relative; padding-block: 12px; }

.zoekveld {
  display: flex; align-items: center; gap: 10px;
  max-width: 620px; margin-inline: auto;
  padding: 0 14px;
  background: var(--vlak); border: 1px solid var(--rand); border-radius: 999px;
  transition: border-color var(--vlot), background var(--vlot);
}
.zoekveld:focus-within { border-color: var(--actie); background: var(--wit); }
.zoekveld .teken { display: grid; place-items: center; color: var(--inkt-3); flex: none; }
.zoekveld input {
  flex: 1; min-width: 0; font: inherit; font-size: var(--t-m);
  padding: 11px 0; border: 0; background: none; color: var(--inkt);
}
.zoekveld input:focus { outline: 0; }
.zoekveld input::placeholder { color: var(--inkt-3); }
.zoekveld input::-webkit-search-cancel-button { display: none; }
.zoekveld .wis {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border: 0; border-radius: 50%; background: none; color: var(--inkt-3); cursor: pointer;
}
.zoekveld .wis:hover { background: var(--vlak-diep); color: var(--inkt); }

.zoekuitslag {
  position: absolute; z-index: calc(var(--z-plakkerig) + 1);
  left: 50%; transform: translateX(-50%); top: calc(100% - 6px);
  width: min(620px, calc(100% - var(--zijmarge) * 2));
  max-height: min(70vh, 520px); overflow-y: auto;
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--ronding);
  box-shadow: 0 14px 40px rgba(24,19,16,.16);
}
.zoekgroep { padding: 8px 0; border-bottom: 1px solid var(--rand-fijn); }
.zoekgroep:last-child { border-bottom: 0; }
.zoekgroep > b {
  display: block; padding: 6px 16px 8px;
  font-size: var(--t-xs); font-weight: 600; color: var(--inkt-3);
}
.zoekgroep a {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px;
  transition: background var(--vlot);
}
.zoekgroep a:hover { background: var(--vlak); }
.zoekgroep img {
  width: 46px; height: 38px; flex: none; object-fit: cover;
  border-radius: var(--ronding); background: var(--vlak-diep);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.zoekgroep .bolletje {
  width: 26px; height: 26px; flex: none; border-radius: 50%; margin: 6px 10px 6px 10px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.zoekgroep a > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.zoekgroep .naam { font-size: var(--t-m); font-weight: 600; }
.zoekgroep .bij { font-size: var(--t-s); color: var(--inkt-3); }
.zoekgroep .prijs { flex: none; font-size: var(--t-s); color: var(--inkt-2); }
.zoekleeg { margin: 0; padding: 18px 16px; font-size: var(--t-m); color: var(--inkt-2); }

/* --------------------------------------------------------- kruimelpad -- */

.kruimels {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-block: 22px 0;
  font-size: var(--t-s); color: var(--inkt-3);
}
.kruimels a:hover { color: var(--inkt); }
.kruimels i { font-style: normal; color: var(--rand); }

/* ==========================================================================
   Productpagina — foto's links in een stapel, koopblok rechts zonder kader
   ========================================================================== */

.product {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  gap: clamp(28px, 4vw, 68px);
  align-items: start;
  padding-block: 26px 60px;
}

.fotostapel { display: grid; gap: 10px; }
.fotostapel .groot {
  aspect-ratio: 4/3; background: var(--vlak-diep); overflow: hidden;
  border-radius: var(--ronding);
}
.fotostapel .groot img { width: 100%; height: 100%; object-fit: cover; }
.fotostapel .rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fotostapel .rij button {
  padding: 0; border: 0; cursor: pointer; overflow: hidden;
  aspect-ratio: 4/3; background: var(--vlak-diep); border-radius: var(--ronding);
  position: relative;
}
.fotostapel .rij img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--vlot); }
.fotostapel .rij button:hover img { opacity: .82; }
.fotostapel .rij button[aria-current="true"]::after {
  content: ''; position: absolute; inset: 0; outline: 2px solid var(--inkt); outline-offset: -2px;
}

/* Koopblok */
.koop { position: sticky; top: 92px; }
.koop h1 { margin-bottom: 8px; }
.beoordeling { margin-bottom: 12px; }

.betaalregel {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; font-size: var(--t-s); color: var(--inkt-3);
}

.prijsregel { display: flex; align-items: baseline; gap: 10px; }
.prijsregel .bedrag { font-size: var(--t-2xl); font-weight: 700; }
.prijsregel .vanaf { font-size: var(--t-s); color: var(--inkt-3); }

.inleiding { color: var(--inkt-2); margin-top: 14px; max-width: 46ch; }

/* Stofstrook: een liggende reep stalen in plaats van losse bolletjes */
.stofstrook { margin-top: 26px; }
.stofstrook-kop {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: var(--t-s); color: var(--inkt-3); margin-bottom: 9px;
}
.stofstrook-kop b { color: var(--inkt); font-weight: 600; font-size: var(--t-m); }
.strook { display: flex; gap: 2px; height: 46px; }
.strook a, .strook span, .strook button {
  flex: 1; overflow: hidden; position: relative; padding: 0; border: 0;
  background: var(--vlak-diep); cursor: zoom-in;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}
.strook img { width: 100%; height: 100%; object-fit: cover; }
.strook a, .strook button { transition: flex var(--rust); }
.strook a:hover, .strook button:hover { flex: 1.5; }
.strook .rest {
  flex: none; width: 62px; display: grid; place-items: center;
  background: var(--vlak-diep); box-shadow: inset 0 0 0 1px var(--rand);
  font-size: var(--t-s); font-weight: 600; color: var(--inkt-2);
}

.koopknoppen { display: grid; gap: 10px; margin-top: 22px; }
.koopknoppen .naast { display: flex; gap: 10px; }
.koopknoppen .naast .knop:first-child { flex: 1; }

/* Feiten in plaats van uitklaprijen met chevrons */
.feiten {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--rand-fijn);
  border-block: 1px solid var(--rand-fijn);
  margin-top: 28px;
}
.feit { background: var(--vlak); padding: 14px 2px 14px 0; }
.feit dt { font-size: var(--t-xs); color: var(--inkt-3); }
.feit dd { margin: 3px 0 0; font-size: var(--t-m); font-weight: 600; }

.zeker { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 9px; font-size: var(--t-s); }
.zeker li { display: flex; gap: 9px; align-items: flex-start; color: var(--inkt-2); }
.zeker svg { flex: none; margin-top: 3px; color: var(--actie); }

/* ------------------------------------------------------- onderin product */

.uitleg {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 68px);
  padding-block: 44px; border-top: 1px solid var(--rand-fijn);
}
.uitleg h2 { margin-bottom: 14px; }
.uitleg p { color: var(--inkt-2); max-width: 60ch; }
.uitleg #omschrijving p + p { margin-top: 12px; }
.uitleg #omschrijving ul { margin: 12px 0; max-width: 60ch; }
.uitleg #omschrijving ul:last-child { margin-bottom: 0; }

.specs { width: 100%; border-collapse: collapse; font-size: var(--t-m); }
.specs tr { border-bottom: 1px solid var(--rand-fijn); }
.specs tr:first-child { border-top: 1px solid var(--rand-fijn); }
.specs th { text-align: left; font-weight: 400; color: var(--inkt-3); padding: 12px 18px 12px 0; width: 40%; vertical-align: top; }
.specs td { padding: 12px 0; font-weight: 500; }

/* ----------------------------------------------------------- productrij */

.blok { padding-block: 44px; border-top: 1px solid var(--rand-fijn); }
.blok--krap { padding-bottom: 12px; }
.blok-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.blok-kop .link { flex: none; }
.blok-onder { font-size: var(--t-m); color: var(--inkt-2); margin: 7px 0 0; max-width: 52ch; }

.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 30px 22px; }

.kaart { display: block; }
.kaart-beeld {
  aspect-ratio: 4/4.4; background: var(--vlak-diep); overflow: hidden;
  border-radius: var(--ronding); margin-bottom: 14px; position: relative;
}
.kaart-beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--rust); }
.kaart:hover .kaart-beeld img { transform: scale(1.04); }

/* Tweede foto eroverheen: bij hover zie je het model vanuit een andere hoek.
   Geen extra klik nodig om te weten of je verder wilt kijken. */
.kaart-beeld .twee {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity var(--rust), transform var(--rust);
}
.kaart:hover .kaart-beeld .twee { opacity: 1; }

/* Wat er over dit model te kiezen valt, direct op de foto */
.kaart .vlag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(255,255,255,.94); color: var(--inkt);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .01em;
  padding: 5px 10px; border-radius: var(--ronding);
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
}

/* Kleurbolletjes onder de kaart. Een handvol echte kleuren en een teller —
   de volledige waaier hoort in de configurator, niet in een overzicht.
   De kleur komt uit de gemiddelde pixel van het staal (zie docs/stofkleuren.py). */
/* Wrap: op een smalle kaart in het raster past de teller niet naast zes
   bolletjes. Dan zakt hij een regel, in plaats van de kaart uit te rekken. */
.bollen { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.bollen span {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.16);
  transition: transform var(--vlot);
}
.kaart:hover .bollen span { transform: scale(1.12); }
.bollen em {
  /* Niet laten afbreken: "Alle 250+ / kleuren" over twee regels trekt de
     onderstreping scheef en maakt de rij ongelijk hoog. */
  flex: none; white-space: nowrap;
  font-style: normal; font-size: var(--t-s); color: var(--inkt-3); margin-left: 3px;
  border-bottom: 1px solid var(--tintlijn); padding-bottom: 2px;
}
.kaart:hover .bollen em { color: var(--inkt); border-color: var(--actie); }

/* Naam en prijs op één regel: zo lees je een rij modellen als een prijslijst */
.kaart-regel { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kaart h3 { font-size: var(--t-l); font-weight: 600; min-width: 0; }
.kaart .prijs { flex: none; font-size: var(--t-m); font-weight: 700; }
.kaart .prijs .vanaf { font-weight: 400; color: var(--inkt-3); font-size: var(--t-s); }
.kaart .meta { font-size: var(--t-s); color: var(--inkt-3); margin-top: 5px; }

.kaart-actie {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
  font-size: var(--t-s); font-weight: 600; color: var(--inkt);
  border-bottom: 1px solid var(--rand); padding-bottom: 2px;
  transition: border-color var(--vlot);
}
.kaart:hover .kaart-actie { border-color: var(--actie); }
.kaart-actie svg { transition: transform var(--vlot); }
.kaart:hover .kaart-actie svg { transform: translateX(2px); }

/* -------------------------------------------------------------- filter -- */

/* Negen categorieën op één onderstreepte regel werden een krappe strook tekst
   die zich als navigatie voordroeg. Het zijn knoppen, dus zien ze er nu ook
   naar uit: dezelfde ronde pillen als de kleurfilters in de configurator. */
.filterbalk {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding-bottom: 20px; margin-bottom: 26px;
  border-bottom: 1px solid var(--rand-fijn);
}
.chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 8px 13px; cursor: pointer;
  font-size: var(--t-s); font-weight: 500;
  font-family: inherit; color: var(--inkt-2);
  background: var(--wit); border: 1px solid var(--rand); border-radius: 999px;
  transition: border-color var(--vlot), color var(--vlot),
              background var(--vlot), box-shadow var(--vlot);
}
.chip:hover { border-color: var(--inkt-3); color: var(--inkt); }
.chip .aantal { color: var(--inkt-3); font-weight: 400; font-size: var(--t-xs); }
/* Gekozen: gevuld in plaats van gestreept — op een rij van negen zie je in één
   oogopslag welke aan staat, ook zonder de kleur te kunnen onderscheiden. */
.chip[aria-pressed="true"] {
  background: var(--inkt); border-color: var(--inkt); color: var(--wit); font-weight: 600;
}
.chip[aria-pressed="true"] .aantal { color: rgba(255, 255, 255, .62); }
.chip:focus-visible { outline: 2px solid var(--actie); outline-offset: 2px; }
.filterbalk .telling {
  margin-left: auto; padding-left: 12px;
  font-size: var(--t-s); color: var(--inkt-3);
}

/* ------------------------------------------------------- mobiele balk -- */

.mobielbalk { display: none; }

/* ==========================================================================
   Stoffenbibliotheek
   ========================================================================== */

.stofgroep { padding-block: 26px; border-top: 1px solid var(--rand-fijn); }
.stofgroep-kop { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.stofgroep-kop h3 { font-size: var(--t-xl); }
.stofgroep-kop .soort { font-size: var(--t-s); color: var(--actie-diep); }
.stofgroep-kop .aantal { margin-left: auto; font-size: var(--t-s); color: var(--inkt-3); }
.opaanvraag {
  font-size: var(--t-xs); font-weight: 600; color: var(--merk-tekst);
  background: var(--tint); border: 1px solid var(--tintlijn);
  padding: 2px 8px; border-radius: 999px;
}
.stofstalen { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.staalknop {
  padding: 0; border: 0; cursor: zoom-in; aspect-ratio: 1; overflow: hidden;
  background: var(--vlak-diep); border-radius: var(--ronding);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
  transition: transform var(--vlot), box-shadow var(--vlot);
}
.staalknop:hover { transform: scale(1.06); box-shadow: inset 0 0 0 1px var(--inkt-3), 0 3px 12px rgba(0,0,0,.16); }
.stofstalen img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Hero — volle breedte, het meubel groot, de stof als bewijs eronder
   ========================================================================== */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: #1A1614;
  min-height: clamp(430px, 60vh, 560px);
  display: flex; align-items: flex-end;
}
.hero-beeld { position: absolute; inset: 0; z-index: -2; }
.hero-beeld picture { display: block; width: 100%; height: 100%; }
.hero-beeld img { width: 100%; height: 100%; object-fit: cover; }
/* Scrim vanaf links: de tekst staat op het donkerste deel, het meubel blijft vrij */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(103deg, rgba(24,19,16,.80) 0%, rgba(24,19,16,.56) 30%,
                            rgba(24,19,16,.16) 58%, rgba(24,19,16,0) 80%),
    linear-gradient(to top, rgba(24,19,16,.52), rgba(24,19,16,0) 42%);
}
.hero .wrap { width: 100%; padding-block: clamp(48px, 7vw, 86px) clamp(28px, 3.5vw, 44px); }
.hero-tekst { max-width: 560px; }
.hero h1 {
  color: #fff; font-size: clamp(30px, 3.8vw, 47px); letter-spacing: -0.035em;
  line-height: 1.06; max-width: 13ch; text-wrap: balance;
}
.hero h1 em { font-style: normal; display: block; color: rgba(255,255,255,.62); }
.hero p {
  color: rgba(255,255,255,.86); font-size: var(--t-l); line-height: 1.55;
  margin: 18px 0 0; max-width: 46ch;
}
.hero .knoppen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.hero .knop { background: var(--wit); border-color: var(--wit); color: var(--inkt); }
.hero .knop:hover { background: rgba(255,255,255,.86); border-color: rgba(255,255,255,.86); }
/* Lichte vulling: de knop staat soms op een licht deel van de foto */
.hero .knop--rand { background: rgba(24,19,16,.32); color: #fff; border-color: rgba(255,255,255,.5); }
.hero .knop--rand:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }

/* De stalenreep in de hero: geen illustratie maar de echte collectie */
.hero-stalen {
  margin-top: clamp(30px, 4vw, 52px);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.hero-stalen .reep { display: flex; gap: 3px; }
.hero-stalen .reep span {
  width: 42px; height: 42px; overflow: hidden; flex: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.hero-stalen .reep img { width: 100%; height: 100%; object-fit: cover; }
.hero-stalen .bij { font-size: var(--t-s); color: rgba(255,255,255,.78); }
.hero-stalen .bij b { color: #fff; font-weight: 600; display: block; font-size: var(--t-m); }

/* Binnenkomst: één keer, gestaffeld. Standaard zichtbaar — de animatie
   begint op de eindwaarde als ze niet draait. */
@keyframes opkomst { from { opacity: 0; transform: translateY(14px); } }
.hero h1        { animation: opkomst 640ms cubic-bezier(.22,1,.36,1) both; }
.hero p         { animation: opkomst 640ms cubic-bezier(.22,1,.36,1) 90ms both; }
.hero .knoppen  { animation: opkomst 640ms cubic-bezier(.22,1,.36,1) 170ms both; }
.hero-stalen    { animation: opkomst 640ms cubic-bezier(.22,1,.36,1) 250ms both; }
@media (prefers-reduced-motion: reduce) { .hero * { animation: none !important; } }

/* ==========================================================================
   Baan — liggende rij die rechts het beeld uit loopt, met ronde bladerknoppen
   ========================================================================== */

.baan-veld { position: relative; }
.baan {
  display: flex; gap: clamp(12px, 1.6vw, 22px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  /* Uit het midden-kader breken zodat de rij doorloopt tot de schermrand */
  margin-right: calc(50% - 50vw);
  padding-right: var(--zijmarge);
  padding-bottom: 4px;
}
.baan::-webkit-scrollbar { display: none; }
.baan > * { flex: 0 0 clamp(232px, 26vw, 330px); scroll-snap-align: start; }
/* Passen alle kaarten al in beeld, dan is scrollen zinloos: dan vullen ze
   de rij netjes op in plaats van links te blijven hangen. */
.baan--vol { margin-right: 0; padding-right: 0; }
.baan--vol > * { flex: 1 1 0; }

/* Een sectie die over de volle breedte een eigen vlak krijgt. Doordat de
   binnenmaat gelijk blijft aan .wrap, blijft de rechterrand van de baan
   precies op de schermrand vallen. */
.blok--band {
  background: var(--tint);
  border-top: 0;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--zijmarge), calc(50vw - 50%));
  padding-block: clamp(38px, 4.5vw, 62px);
}
.blok--band + .blok { border-top: 0; }
.blok--band .kaart .vlag { background: var(--wit); }

.baan-knop {
  /* Op de hoogte van de foto, niet van de hele kaart met tekst eronder */
  position: absolute; top: 34%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--wit); color: var(--inkt);
  border: 1px solid var(--rand);
  box-shadow: 0 2px 14px rgba(0,0,0,.10);
  transition: background var(--vlot), border-color var(--vlot), opacity var(--vlot);
}
.baan-knop:hover { border-color: var(--inkt); }
.baan-knop[disabled] { opacity: 0; pointer-events: none; }
.baan-knop.vorige { left: -20px; }
.baan-knop.volgende { right: 8px; }

/* ==========================================================================
   Homepage
   ========================================================================== */

/* Assortimentstegels. Eerst stond de naam naast een uitsnede van de foto;
   met zes categorieën werden de titels afgekapt en sneed de uitsnede elk
   model anders aan. Nu staat het meubel bovenin, volledig in beeld (contain,
   niet cover) op hetzelfde vlak — zo lijken de zes tegels op elkaar. */
.assortiment {
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.assort {
  display: grid; grid-template-rows: auto 1fr;
  background: var(--tint); border-radius: var(--ronding); overflow: hidden;
  transition: background var(--vlot);
}
.assort:hover { background: var(--vlak-diep); }
.assort .beeld {
  position: relative; aspect-ratio: 4 / 3;
  background: var(--wit); overflow: hidden;
}
/* De foto's zijn allemaal vierkant. In een liggend vak met "contain" bleven er
   brede witte banen links en rechts staan; met "cover" vult de foto het vak en
   valt er alleen wat achtergrond boven en onder weg — het meubel zelf staat
   ruim binnen die marge. */
.assort .beeld img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; transition: transform var(--rust);
}
.assort:hover .beeld img { transform: scale(1.04); }
.assort > span:last-child {
  display: grid; align-content: center; gap: 2px;
  padding: 14px clamp(14px, 1.6vw, 20px) 16px;
}
.assort b { font-size: var(--t-l); font-weight: 600; }
.assort .n { font-size: var(--t-s); color: var(--inkt-3); }

.opening { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 60px); align-items: center; padding-block: clamp(28px, 4vw, 56px); }
.opening h1 { font-size: clamp(30px, 4vw, 50px); letter-spacing: -0.03em; text-wrap: balance; }
/* Alleen de inleiding in de tekstkolom, niet elke alinea die verderop in deze
   sectie in een kaartje staat: die kreeg anders ook een regellengte van 44ch
   en werd smaller dan het kaartje eromheen. */
.opening > div > p {
  font-size: var(--t-l); color: var(--inkt-2); margin: 18px 0 0; max-width: 44ch;
}
.opening .knoppen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.opening-beeld { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--ronding); background: var(--vlak-diep); }
.opening-beeld img { width: 100%; height: 100%; object-fit: cover; }

.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.tegel { position: relative; display: block; aspect-ratio: 4/3.2; overflow: hidden; border-radius: var(--ronding); background: var(--vlak-diep); }
.tegel img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--rust); }
.tegel:hover img { transform: scale(1.035); }
/* Het verloop liep van vol naar niets over de hele hoogte, waardoor de tekst
   zelf in het lichte deel ervan stond: witte letters op een lichte houten
   vloer, ongeveer 2:1. Nu blijft het verloop op sterkte tot boven de tekst en
   vervaagt het pas daarboven. */
.tegel-tekst {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 60px 22px 22px; color: #fff;
  background: linear-gradient(to top,
    rgba(24,19,16,.88) 0%, rgba(24,19,16,.80) 48%,
    rgba(24,19,16,.44) 76%, rgba(24,19,16,0) 100%);
}
.tegel-tekst b { font-size: var(--t-xl); font-weight: 600; }
.tegel-tekst span { display: block; font-size: var(--t-s); color: #EFE9E3; margin-top: 3px; }

.werkplaats { background: var(--inkt); color: #D8CCC2; border-radius: var(--ronding); padding: clamp(28px, 4vw, 56px); overflow: hidden; }
.werkplaats-beeld {
  margin: calc(clamp(28px, 4vw, 56px) * -1) calc(clamp(28px, 4vw, 56px) * -1) clamp(28px, 4vw, 48px);
  aspect-ratio: 21/8; overflow: hidden; background: #141110;
}
.werkplaats-beeld img { width: 100%; height: 100%; object-fit: cover; opacity: .88; }
.werkplaats h2 { color: #fff; max-width: 22ch; }
.werkplaats > p { margin-top: 16px; max-width: 62ch; }
.ambachten { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 26px; margin-top: 36px; }
.ambacht b { display: block; color: #fff; font-size: var(--t-l); font-weight: 600; margin-bottom: 6px; }
.ambacht p { font-size: var(--t-s); margin: 0; }

/* --------------------------------------------------------------- over ons */
/* De homepage vertelde het fabrieksverhaal in hetzelfde donkere blok als de
   pagina Over ons — zelfde kop, zelfde drie ambachten, woord voor woord.
   Dit blok neemt die plek over: het draagt hetzelfde bewijs (eigen pand,
   eigen ambachten) maar dan als introductie van de mensen, en verwijst voor
   het hele verhaal door. Donker, want het is het enige rustpunt tussen de
   productbanen — en dat contrast markeert dat hier iets anders staat. */
.overons {
  background: var(--inkt); color: #D8CCC2;
  border-radius: var(--ronding); overflow: hidden;
}
.overons-in {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 58px); align-items: center;
  padding: clamp(26px, 3.6vw, 50px);
}

/* Twee opnames naast elkaar met de onderkant gelijk: de werkplaats staand en
   groter, de showroom vierkant en lager. Eén beeld werd een banner, twee
   gelijke een raster; dit leest als een stel foto's op tafel. */
.overons-beeld {
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: 10px; align-items: end; margin: 0;
}
.overons-beeld figure {
  margin: 0; overflow: hidden; background: #141110;
  border-radius: var(--ronding);
}
.overons-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.overons-beeld figure:first-child { aspect-ratio: 3/4; }
.overons-beeld figure:last-child  { aspect-ratio: 1/1; }

.overons-tekst h2 { color: #fff; max-width: 24ch; text-wrap: balance; }
.overons-tekst p { margin: 16px 0 0; max-width: 54ch; }
.overons .knoppen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }

/* Witte knop op inkt haalt 14,1:1; de omlijnde variant leest #EFE7E0 op inkt
   en blijft ook bij hover ruim boven de norm. */
.knop--licht { background: var(--wit); border-color: var(--wit); color: var(--inkt); }
.knop--licht:hover { background: #EFE7E0; border-color: #EFE7E0; color: var(--inkt); }
.knop--randlicht { background: transparent; color: #EFE7E0; border-color: rgba(255,255,255,.34); }
.knop--randlicht:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.6); }

/* Vier feiten over de volle breedte onderaan de kaart. Ze komen uit FEITEN en
   CONTACT, dus ze kunnen niet uit de pas gaan lopen met de rest van de site. */
.overons-cijfers {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255,255,255,.15); margin: 0;
}
.overons-cijfers > div { padding: 18px clamp(26px, 3.6vw, 50px); }
.overons-cijfers > div + div { border-left: 1px solid rgba(255,255,255,.15); }
.overons-cijfers dt { font-size: var(--t-xs); color: #BEB2A8; }
.overons-cijfers dd { margin: 4px 0 0; color: #fff; font-size: var(--t-l); font-weight: 600; }

/* ==========================================================================
   Vertrouwen en betalen — waar het besluit valt
   ========================================================================== */

/* Vlak boven de voet: vier beloften die de laatste twijfel wegnemen. */
/* Deze band staat als sectie ín de pagina, boven de laatste blokken. Onder
   aan de voet geplakt las niemand hem meer. Hij breekt uit het middenkader
   zodat het vlak over de volle breedte loopt. */
.vertrouwen {
  background: var(--tint); border-block: 1px solid var(--rand-fijn);
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--zijmarge), calc(50vw - 50%));
}
.vertrouwen-in {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(20px, 3vw, 40px); padding-block: clamp(28px, 3.5vw, 44px);
}
.vert { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; align-items: start; }
.vert .vink {
  grid-row: span 2; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  background: var(--merk); color: #fff;
}
.vert b { font-size: var(--t-m); font-weight: 600; }
.vert span:last-child { font-size: var(--t-s); color: var(--inkt-3); line-height: 1.45; }

/* Betaalmerken — witte tegel van 4:3, het logo erin passend. Sommige merken
   leveren hun icoon mét eigen kaartvlak; die vullen de tegel dan helemaal. */
.betaal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.betaal li {
  flex: none; width: 46px; height: 32px; overflow: hidden;
  background: var(--wit); border: 1px solid var(--rand-fijn); border-radius: 5px;
  display: grid; place-items: center;
}
.betaal img { width: 100%; height: 100%; object-fit: contain; }
.betaal li.vol img { object-fit: cover; }
.betaal--klein li { width: 40px; height: 28px; }

/* Termijnbetaling onder de prijs: bij € 750 is dat het verschil tussen
   "duur" en "€ 250 per maand". */
.termijn {
  display: flex; align-items: center; gap: 9px;
  margin-top: 12px; padding: 10px 12px;
  background: var(--wit); border: 1px solid var(--rand-fijn); border-radius: var(--ronding);
  font-size: var(--t-s); color: var(--inkt-2);
}
.termijn b { color: var(--inkt); font-weight: 600; }
.termijn svg { flex: none; }
/* Het merk noemen we met het logo, niet met het woord. Middenin de zin liep dat
   mis: bij een smalle kolom viel het logo als los blokje op de volgende regel.
   Vooraan, als vast merkteken naast de tekst, kan dat niet gebeuren. */
.termijn-logo { height: 24px; width: auto; flex: none; }
/* houdt een bedrag en het merk erachter op één regel */
.bijeen { white-space: nowrap; }

/* Sterren bij de titel. De cijfers komen uit ECHTE reviews — zie site.js. */
.sterren { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-s); color: var(--inkt-2); }
.sterren .rij { display: inline-flex; gap: 1px; color: var(--merk); }
.sterren a { border-bottom: 1px solid var(--tintlijn); }

/* ==========================================================================
   Inhoudspagina's — showroom en herstoffering
   ========================================================================== */

/* Een mededeling die de klant echt moet lezen voordat hij in de auto stapt */
.melding {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 0; padding: 14px 18px;
  background: var(--tint); border: 1px solid var(--tintlijn);
  border-radius: var(--ronding);
  font-size: var(--t-m); color: var(--inkt-2); line-height: 1.5;
}
.melding b { color: var(--inkt); }
.melding svg { flex: none; margin-top: 4px; color: var(--merk); }

.gegevens { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(24px, 3vw, 44px); }
.gegeven h2 { font-size: var(--t-l); margin-bottom: 12px; }
.gegeven address { font-style: normal; color: var(--inkt-2); margin-bottom: 12px; line-height: 1.6; }
.gegeven address b { color: var(--inkt); font-weight: 600; }
.ontbreekt {
  color: var(--inkt-3); font-size: var(--t-s); line-height: 1.5;
  padding-left: 12px; border-left: 2px solid var(--rand); margin-bottom: 12px;
}

.kaal { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.kaal li { display: flex; align-items: center; gap: 10px; color: var(--inkt-2); }
.kaal svg { flex: none; color: var(--merk); }
.kaal a:hover { color: var(--inkt); }

/* Ambachtenblok ook bruikbaar buiten het donkere vlak */
.ambachten--licht .ambacht b { color: var(--inkt); }
.ambachten--licht .ambacht p { color: var(--inkt-2); font-size: var(--t-m); }

/* Beloftes: dezelfde rij als de vertrouwensband, maar in de inhoud */
.beloftes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 3vw, 40px); }

/* Genummerde stappen. Nummers omdat dit echt een volgorde in de tijd is;
   op andere pagina's staan ze bewust niet. */
.stappenrij {
  list-style: none; counter-reset: stap; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(20px, 2.5vw, 34px);
}
.stappenrij li { counter-increment: stap; padding-top: 16px; border-top: 2px solid var(--inkt); }
.stappenrij li::before {
  content: counter(stap, decimal-leading-zero);
  display: block; margin-bottom: 8px;
  font-size: var(--t-s); font-weight: 700; color: var(--merk-tekst);
  font-variant-numeric: tabular-nums;
}
.stappenrij b { display: block; font-size: var(--t-l); font-weight: 600; margin-bottom: 5px; }
.stappenrij p { margin: 0; font-size: var(--t-m); color: var(--inkt-2); }

/* Beeldvlak met een knop eroverheen */
.kaartvlak { position: relative; aspect-ratio: 4/3.4; overflow: hidden; border-radius: var(--ronding); background: var(--vlak-diep); }
.kaartvlak img { width: 100%; height: 100%; object-fit: cover; }
.kaartvlak-knop { position: absolute; left: 16px; bottom: 16px; }

/* Zijkaart met de directe contactknoppen */
.zijkaart { background: var(--tint); border: 1px solid var(--tintlijn); border-radius: var(--ronding); padding: clamp(20px, 2.5vw, 28px); }
.zijkaart h3 { font-size: var(--t-xl); margin-bottom: 6px; }
.zijkaart p { color: var(--inkt-2); font-size: var(--t-m); margin-bottom: 16px; }
.zijkaart .knop { margin-bottom: 8px; }
.zijkaart .feiten { margin-top: 20px; }
.feiten--staand { grid-template-columns: 1fr; }
.feiten--staand .feit { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-block: 11px; }
.feiten--staand .feit dd { margin: 0; }

/* ------------------------------------------------------------ formulier -- */

.formulier { display: grid; gap: 14px; margin-top: 22px; max-width: 34rem; }
.veldrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.veld { display: grid; gap: 6px; }
.veld > span { font-size: var(--t-s); font-weight: 600; }
.veld > span em { font-style: normal; font-weight: 400; color: var(--inkt-3); }
.veld input, .veld textarea, .veld select {
  font: inherit; font-size: var(--t-m); color: var(--inkt);
  padding: 12px 14px; width: 100%;
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--ronding);
  transition: border-color var(--vlot);
}
.veld textarea { resize: vertical; min-height: 90px; }
.veld input:hover, .veld textarea:hover, .veld select:hover { border-color: var(--inkt-3); }
.veld input:focus-visible, .veld textarea:focus-visible, .veld select:focus-visible { border-color: var(--actie); }
.veld ::placeholder { color: var(--inkt-3); }   /* 5,1:1 — leesbaar, niet lichtgrijs */
.formulier .knop { justify-self: start; }
.formulier-melding { margin: 0; font-size: var(--t-s); color: var(--inkt-2); }
.formulier-melding[data-fout="true"] { color: var(--rood); font-weight: 600; }

/* Pagina-inleiding zonder beeld ernaast */
.kop-blok { padding-block: clamp(20px, 3vw, 34px) 0; max-width: 60ch; }
.kop-blok h1 { margin-bottom: 14px; }
.kop-blok p { color: var(--inkt-2); font-size: var(--t-l); }

/* De drie contactkanalen als gelijkwaardige keuzes */
.contactkaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.contactkaart {
  display: grid; gap: 3px; align-content: start;
  padding: clamp(20px, 2.4vw, 26px);
  background: var(--wit); border: 1px solid var(--rand-fijn); border-radius: var(--ronding);
  transition: border-color var(--vlot), transform var(--vlot);
}
.contactkaart:hover { border-color: var(--actie); transform: translateY(-2px); }
.contactkaart .teken {
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px;
  border-radius: 50%; background: var(--tint); color: var(--merk-tekst);
}
.contactkaart .soort { font-size: var(--t-s); color: var(--inkt-3); }
.contactkaart b { font-size: var(--t-xl); font-weight: 600; }
.contactkaart .toelichting { font-size: var(--t-s); color: var(--inkt-2); margin-top: 6px; line-height: 1.45; }

.zijkaart address { font-style: normal; color: var(--inkt-2); line-height: 1.6; margin-bottom: 16px; }
.zijkaart .melding { font-size: var(--t-s); background: var(--wit); }

/* Feiten als brede reeks, voor de kerngegevens op Over ons */
.feiten--groot { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.feiten--groot .feit { padding: 18px 14px 18px 0; }
.feiten--groot dd { font-size: var(--t-xl); }

/* ==========================================================================
   Juridische pagina's — lange lopende tekst met een inhoudsopgave ernaast
   ========================================================================== */

.juridisch {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  padding-block: clamp(26px, 3vw, 40px) 60px;
  align-items: start;
}

.juridisch-nav {
  position: sticky; top: 92px; min-width: 0; overflow-wrap: anywhere;
  max-height: calc(100vh - 130px); overflow-y: auto;
  font-size: var(--t-s);
  padding-right: 8px;
}
.juridisch-nav b { display: block; margin-bottom: 12px; font-size: var(--t-xs); color: var(--inkt-3); }
.juridisch-nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.juridisch-nav a {
  display: block; padding: 5px 0 5px 12px;
  color: var(--inkt-2); line-height: 1.4;
  border-left: 2px solid var(--rand-fijn);
  transition: color var(--vlot), border-color var(--vlot);
}
.juridisch-nav a:hover { color: var(--inkt); border-color: var(--actie); }

/* Leesmaat: juridische tekst wordt onleesbaar over de volle breedte */
.juridisch-tekst { max-width: 68ch; min-width: 0; overflow-wrap: anywhere; }
.juridisch-tekst h2 {
  font-size: var(--t-xl); margin: 34px 0 12px;
  padding-top: 22px; border-top: 1px solid var(--rand-fijn);
}
.juridisch-tekst > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.juridisch-tekst p { color: var(--inkt-2); line-height: 1.65; }
.juridisch-tekst a { border-bottom: 1px solid var(--tintlijn); }
.juridisch-lijst { color: var(--inkt-2); margin: 0 0 1em; padding-left: 1.3em; line-height: 1.65; }
.juridisch-lijst li { margin-bottom: .5em; }
.juridisch-lijst li::marker { color: var(--inkt-3); }

/* Zodra je op een anker springt moet de kop onder de plakkende balk uitkomen */
.juridisch-tekst h2[id] { scroll-margin-top: 100px; }

@media (max-width: 940px) {
  .juridisch { grid-template-columns: minmax(0, 1fr); }
  .juridisch-nav {
    position: static; max-height: none;
    background: var(--tint); border: 1px solid var(--tintlijn);
    border-radius: var(--ronding); padding: 16px 18px;
  }
  .juridisch-nav ol { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* ======================================================== stofvergroting --
   Een staal van 60 pixels zegt niets over structuur; hier krijgt hij het hele
   scherm. */

.zoom {
  width: min(760px, 94vw); max-width: none;
  max-height: 92vh; padding: 0; border: 0; border-radius: var(--ronding);
  background: var(--wit); color: var(--inkt);
  box-shadow: 0 24px 70px rgba(24,19,16,.30);
  overflow: hidden;
}
.zoom[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.zoom::backdrop { background: rgba(24,19,16,.62); }

.zoom-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 14px 14px 20px; border-bottom: 1px solid var(--rand-fijn);
}
.zoom-titel { display: grid; min-width: 0; }
.zoom-titel b { font-size: var(--t-xl); font-weight: 600; }
.zoom-titel span { font-size: var(--t-s); color: var(--inkt-3); }

.zoom-vlak {
  margin: 0; min-height: 0; background: var(--vlak-diep);
  aspect-ratio: 3 / 2;                 /* de verhouding van de staalfoto's */
  overflow: hidden; cursor: zoom-in;
  display: flex; align-items: center; justify-content: center;
}
.zoom-vlak img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--rust);
}
/* Echt inzoomen op het weefsel, op het punt waar je tikt */
.zoom-vlak.dichtbij { cursor: zoom-out; }
.zoom-vlak.dichtbij img { transform: scale(2.6); }

.zoom-voet {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 10px; border-top: 1px solid var(--rand-fijn);
}
.zoom-voet .icoonknop { border-color: var(--rand); }
.zoom-voet .icoonknop[disabled] { opacity: .35; pointer-events: none; }
.zoom-voet .chevron { transform: none; }
.zoom-teller { font-size: var(--t-s); color: var(--inkt-3); min-width: 62px; text-align: center; }

.zoom-noot {
  margin: 0; padding: 12px 20px 16px; text-align: center;
  font-size: var(--t-s); color: var(--inkt-3); background: var(--tint);
}

/* De knop die de vergroting opent */
.vergrootknop {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; cursor: pointer;
  font-size: var(--t-s); font-weight: 600; color: var(--inkt);
  background: var(--wit); border: 1px solid var(--rand); border-radius: 999px;
  transition: border-color var(--vlot);
}
.vergrootknop:hover { border-color: var(--actie); }

@media (max-width: 700px) {
  /* Geen volle schermhoogte: de staalfoto is liggend, dus een paneel dat de
     hele telefoon vult laat vooral leegte zien. */
  .zoom { width: 100vw; max-width: none; max-height: 100dvh; border-radius: 0;
          margin: auto 0 0; }
  .zoom[open] { grid-template-rows: auto auto auto auto; }
  .zoom-titel b { font-size: var(--t-l); }
}

/* ============================================================ winkelmand -- */

.mandknop { position: relative; }
.mandteller {
  position: absolute; top: 1px; right: 0;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--actie); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  border-radius: 999px; box-shadow: 0 0 0 2px var(--vlak);
}

.mand { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(24px, 3vw, 48px); align-items: start; padding-block: 26px 60px; }

.mandregels { display: grid; }
.mandregel {
  display: grid; grid-template-columns: 108px minmax(0, 1fr) auto;
  gap: clamp(14px, 2vw, 22px); align-items: start;
  padding-block: 22px; border-top: 1px solid var(--rand-fijn);
}
.mandregel:first-child { border-top: 0; padding-top: 4px; }
.mandregel-beeld {
  aspect-ratio: 1; background: var(--wit); border-radius: var(--ronding);
  overflow: hidden; position: relative;
}
.mandregel-beeld img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; }
.mandregel h3 { font-size: var(--t-l); }
.mandregel .kenmerken { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; font-size: var(--t-s); color: var(--inkt-2); }
.mandregel .kenmerken li { display: flex; align-items: center; gap: 8px; }
.mandregel .kenmerken img { width: 20px; height: 20px; object-fit: cover; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.mandregel .rechts { display: grid; justify-items: end; gap: 10px; }
.mandregel .bedrag { font-size: var(--t-l); font-weight: 700; white-space: nowrap; }
.mandregel .offerte { font-size: var(--t-s); color: var(--merk-tekst); font-weight: 600; }

.aantalkiezer {
  display: inline-flex; align-items: center;
  border: 1px solid var(--rand); border-radius: 999px; background: var(--wit);
}
.aantalkiezer button {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; background: none; cursor: pointer; color: var(--inkt-2);
  border-radius: 999px;
}
.aantalkiezer button:hover { background: var(--vlak-diep); color: var(--inkt); }
.aantalkiezer button[disabled] { opacity: .35; cursor: not-allowed; }
.aantalkiezer span { min-width: 26px; text-align: center; font-weight: 600; font-size: var(--t-m); }

.mandweg {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: var(--t-s); color: var(--inkt-3); border-bottom: 1px solid var(--tintlijn);
}
.mandweg:hover { color: var(--rood); border-color: var(--rood); }

.mandkaart {
  position: sticky; top: 92px;
  background: var(--tint); border: 1px solid var(--tintlijn);
  border-radius: var(--ronding); padding: clamp(20px, 2.4vw, 26px);
}
.mandkaart h2 { font-size: var(--t-xl); margin-bottom: 16px; }
.mandrij { display: flex; justify-content: space-between; gap: 14px; padding-block: 9px; font-size: var(--t-m); color: var(--inkt-2); }
.mandrij.totaal {
  border-top: 1px solid var(--tintlijn); margin-top: 8px; padding-top: 14px;
  font-size: var(--t-xl); font-weight: 700; color: var(--inkt);
}
.mandkaart .knop { margin-top: 16px; }
.mandkaart .betaal { margin-top: 16px; }
.fijn { font-size: var(--t-s); color: var(--inkt-3); }
.mandkaart .fijn { margin-top: 12px; }

.mandleeg { text-align: center; padding: clamp(40px, 8vw, 90px) 20px; }
.mandleeg h1 { margin-bottom: 12px; }
.mandleeg p { color: var(--inkt-2); max-width: 46ch; margin-inline: auto; }
.mandleeg .knoppen { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* -------------------------------------------------------------- afrekenen */

.afrekenen { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(24px, 3vw, 48px); align-items: start; padding-block: 26px 60px; }
.afreken-stap { padding-block: 26px; border-top: 1px solid var(--rand-fijn); }
.afreken-stap:first-child { border-top: 0; padding-top: 0; }
.afreken-stap h2 { font-size: var(--t-xl); margin-bottom: 4px; }
.afreken-stap .bij { font-size: var(--t-s); color: var(--inkt-3); margin-bottom: 16px; }

.keuzelijst { display: grid; gap: 8px; }
.keuze {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 14px 16px; background: var(--wit);
  border: 1px solid var(--rand); border-radius: var(--ronding);
  transition: border-color var(--vlot);
}
.keuze:hover { border-color: var(--inkt-3); }
.keuze:has(input:checked) { border-color: var(--actie); box-shadow: inset 0 0 0 1px var(--actie); }
.keuze input { width: 18px; height: 18px; accent-color: var(--actie); flex: none; }
.keuze .tekst { flex: 1; min-width: 0; display: grid; gap: 2px; }
.keuze b { font-size: var(--t-m); font-weight: 600; }
.keuze .bij { font-size: var(--t-s); color: var(--inkt-3); margin: 0; }
.keuze .prijs { flex: none; font-size: var(--t-m); font-weight: 600; }
/* De logo's komen uit verschillende bronnen: iDEAL en Klarna zijn een compleet
   badge-vlak, Visa is een los woordmerk. Op één hoogte zetten geeft dan drie
   verschillende formaten. Daarom hier hetzelfde tegeltje als in de voet. */
.keuze .merkje {
  flex: none; width: 46px; height: 32px; overflow: hidden;
  background: var(--wit); border: 1px solid var(--rand-fijn); border-radius: 5px;
  display: grid; place-items: center;
}
.keuze .merkje img { width: 100%; height: 100%; object-fit: contain; }
.keuze .merkje--vol img { object-fit: cover; }

@media (max-width: 940px) {
  .mand, .afrekenen { grid-template-columns: minmax(0, 1fr); }
  .mandkaart { position: static; }
}
@media (max-width: 560px) {
  .mandregel { grid-template-columns: 84px minmax(0, 1fr); }
  .mandregel .rechts { grid-column: 1 / -1; justify-items: start;
                       display: flex; align-items: center; justify-content: space-between; width: 100%; }
}

/* --------------------------------------------------------------- voet -- */

.voet { border-top: 1px solid var(--rand); padding-block: 44px 22px; }
.voet-betalen { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-bottom: 22px; }
.voet-betalen h4 { margin: 0; flex: none; }
/* .voet ul zet display:grid op alle lijsten in de voet en is specifieker dan
   .betaal — daardoor stonden de betaalmerken onder elkaar. */
.voet .betaal { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; min-width: 0; }
.voet h3 { font-size: var(--t-s); font-weight: 600; margin: 0 0 14px; }
.voet-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 34px; padding-bottom: 34px; }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: var(--t-m); color: var(--inkt-2); }
.voet ul a:hover { color: var(--inkt); }
.voet .over { color: var(--inkt-2); font-size: var(--t-m); margin-top: 14px; max-width: 34ch; }
.voet-onder { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--rand-fijn); font-size: var(--t-s); color: var(--inkt-3); }

/* ==========================================================================
   Configurator — geen doorklikmenu maar één rail waarin alles openstaat
   ========================================================================== */

/* De rij moet expliciet 1fr zijn: een impliciete auto-rij groeit mee met de
   foto en dan valt de stofreep onder de vouw. */
.cfg {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: grid; grid-template-columns: minmax(0, 1fr) 540px;
  grid-template-rows: minmax(0, 1fr);
  background: var(--vlak); overflow: hidden;
}

/* Links: het meubel, met de gekozen stof als brede reep eronder */
.cfg-podium { position: relative; background: var(--vlak-diep); display: grid; grid-template-rows: minmax(0, 1fr) auto; }

.cfg-kop { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 18px 22px; }
.cfg-kop .titel { font-size: var(--t-xl); font-weight: 600; }
.cfg-kop .rechts { margin-left: auto; display: flex; gap: 4px; }

.cfg-foto { position: relative; display: flex; align-items: center; justify-content: center; padding: 70px 30px 44px; min-height: 0; }
.cfg-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--ronding); }

/* ------------------------------------------------- het meubel in jouw kleur
   Eén grijze basisopname doet alle 800+ kleuren: het vlak krijgt de kleur van
   het staal en wordt gemaskerd op het silhouet, de opname ligt er met multiply
   overheen zodat plooien, naden en schaduw blijven staan. */
.cfg-verf {
  flex: 1; align-self: stretch; min-width: 0;
  mask-size: contain; mask-repeat: no-repeat; mask-position: center;
  -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
  transition: background var(--rust);
}
.cfg-verf img {
  width: 100%; height: 100%; object-fit: contain;
  mix-blend-mode: multiply; border-radius: 0;
}

/* Wissel tussen de geverfde weergave en de echte foto's */
.cfg-weergave {
  position: absolute; top: 66px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; gap: 2px; padding: 3px;
  background: var(--wit); border: 1px solid var(--rand); border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
}
.cfg-weergave button {
  border: 0; cursor: pointer; padding: 6px 14px; border-radius: 999px;
  font-size: var(--t-s); font-weight: 500; color: var(--inkt-3); background: none;
  transition: background var(--vlot), color var(--vlot);
}
.cfg-weergave button[aria-pressed="true"] { background: var(--inkt); color: #fff; font-weight: 600; }

/* De eerlijke kanttekening. Hoort in beeld te staan, niet in de kleine
   lettertjes: een scherm is geen stof. */
.cfg-benadering {
  position: absolute; left: 50%; bottom: 138px; transform: translateX(-50%);
  z-index: 3; margin: 0; max-width: min(560px, 88%);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  padding: 9px 16px; text-align: center;
  background: color-mix(in srgb, var(--wit) 88%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--rand-fijn); border-radius: 999px;
  font-size: var(--t-s); color: var(--inkt-2); line-height: 1.4;
}
.cfg-benadering .link { font-size: var(--t-s); }
.cfg-benadering .kort { display: none; }

.cfg-bladeren { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; font-size: var(--t-s); color: var(--inkt-3); }
.cfg-bladeren button { width: 40px; height: 40px; border: 1px solid var(--rand); background: var(--wit); border-radius: var(--ronding); display: grid; place-items: center; cursor: pointer; }
.cfg-bladeren button:hover { border-color: var(--inkt); }

/* De stofreep: het gekozen staal over de volle breedte, als een echt lapje */
/* Vaste hoogte: anders bepaalt de intrinsieke maat van de stoffoto hoe hoog
   de reep wordt en verschilt hij per staal. */
.cfg-reep { display: flex; align-items: stretch; height: 124px; background: var(--wit); border-top: 1px solid var(--rand); }
.cfg-reep .staal {
  width: 40%; max-width: 260px; position: relative; overflow: hidden;
  background: var(--vlak-diep);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);   /* witte stoffen hebben een rand nodig */
}
.cfg-reep .staal img { width: 100%; height: 100%; object-fit: cover; }
/* Eigen naam: .uitleg is al de tweekoloms sectie op de productpagina. */
.cfg-reep-tekst {
  flex: 1; min-width: 0; padding: 0 26px;
  display: flex; flex-direction: column; justify-content: center;
}
.cfg-reep .label { font-size: var(--t-xs); color: var(--inkt-3); }
.cfg-reep b { font-size: var(--t-xl); font-weight: 600; display: block; margin-top: 2px; }
.cfg-reep .soort { font-size: var(--t-s); color: var(--inkt-2); margin-top: 3px; }
.cfg-reep .leeg { color: var(--inkt-3); font-size: var(--t-m); }
.cfg-reep-knop { align-self: center; margin-right: 20px; flex: none; }

/* Rechts: alle stappen onder elkaar, altijd zichtbaar */
.cfg-rail { background: var(--vlak); border-left: 1px solid var(--rand); display: flex; flex-direction: column; min-height: 0; }

/* Stappenbalk boven de rail: wegwijzer, geen wizard. Blijft staan tijdens
   het scrollen en springt naar de stap waarop je klikt. */
.cfg-stappen {
  display: flex; gap: 4px; padding: 12px 22px;
  border-bottom: 1px solid var(--rand-fijn); background: var(--wit); flex: none;
}
.cfg-stapknop {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: var(--ronding);
  transition: background var(--vlot);
}
.cfg-stapknop:hover { background: var(--vlak); }
.cfg-stapknop .bol {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--rand); color: transparent;
  transition: background var(--vlot), border-color var(--vlot), color var(--vlot);
}
.cfg-stapknop[data-af="true"] .bol { background: var(--actie); border-color: var(--actie); color: #fff; }
.cfg-stapknop .tekst { min-width: 0; display: grid; }
.cfg-stapknop b { font-size: var(--t-s); font-weight: 600; }
.cfg-stapknop .tekst span {
  font-size: var(--t-xs); color: var(--inkt-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cfg-stapknop[data-af="true"] .tekst span { color: var(--merk-tekst); }
/* Wat deze stap met de prijs doet — anders zie je pas onderaan wat een bredere
   bank kost en moet je terugrekenen waar dat vandaan komt. */
.cfg-stapknop .tekst span.bedrag {
  font-size: var(--t-xs); font-weight: 600; color: var(--inkt-2);
  margin-top: 1px;
}

/* Deelblok in het overzicht */
.cfg-delen { margin-top: 20px; }
.cfg-delen .knop { justify-content: center; }
.cfg-delen .fijn { margin-top: 10px; line-height: 1.5; }
.cfg-delen .fijn[data-fout="false"] { color: var(--merk-tekst); font-weight: 500; }

.cfg-rail-inhoud { flex: 1; overflow-y: auto; padding: 0 30px 30px; scroll-behavior: smooth; }

.cfg-stap { padding-block: 26px; border-bottom: 1px solid var(--rand-fijn); }
.cfg-stap:last-child { border-bottom: 0; }
.cfg-stap-kop { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.cfg-stap-kop .nr {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
  background: var(--vlak-diep); color: var(--inkt-3);
  align-self: center;
}
.cfg-stap[data-af="true"] .cfg-stap-kop .nr { background: var(--actie); color: #fff; }
.cfg-stap-kop h2 { font-size: var(--t-l); }
.cfg-stap-kop .waarde { margin-left: auto; font-size: var(--t-s); color: var(--inkt-2); text-align: right; }

/* Maatkeuze */
/* grid-auto-rows: 1fr — anders staat "Andere maat" als enige op de laatste rij
   en is dat vak 20 px lager dan de vier erboven. */
.cfg-maten {
  display: grid; grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr; gap: 8px;
}
.cfg-maat {
  text-align: left; cursor: pointer; padding: 12px 14px;
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--ronding);
  transition: border-color var(--vlot), background var(--vlot);
}
.cfg-maat:hover { border-color: var(--inkt-3); }
.cfg-maat[aria-pressed="true"] { border-color: var(--inkt); border-width: 1.5px; background: var(--wit); }
.cfg-maat .tekening { display: block; margin-bottom: 8px; }
.cfg-maat .naam { display: block; font-weight: 600; font-size: var(--t-m); }
.cfg-maat .bij { display: block; font-size: var(--t-s); color: var(--inkt-3); margin-top: 1px; }
.cfg-maat[aria-pressed="true"] .bij { color: var(--actie-diep); }

/* Stofsoort als tekstrij, niet als pillen */
.cfg-soorten { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 20px; }
.cfg-soort {
  background: none; border: 0; padding: 0 0 3px; cursor: pointer;
  font-size: var(--t-m); font-weight: 500; color: var(--inkt-3);
  border-bottom: 1.5px solid transparent;
  transition: color var(--vlot), border-color var(--vlot);
}
.cfg-soort:hover { color: var(--inkt); }
.cfg-soort[aria-pressed="true"] { color: var(--inkt); font-weight: 600; border-color: var(--actie); }
.cfg-soort .n { color: var(--inkt-3); font-weight: 400; font-size: var(--t-s); margin-left: 3px; }

/* --- Kleur zoeken in plaats van collecties doorbladeren -------------------
   Niemand zoekt "Cube": mensen zoeken iets groens. Daarom eerst filteren op
   kleurfamilie en stofsoort, en dan alle passende stalen in één raster,
   dwars door de collecties heen. */

.cfg-filterkop {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em;
  color: var(--inkt-3); margin: 4px 0 9px;
}
.cfg-filterkop + * { margin-bottom: 20px; }

.cfg-familie { display: flex; flex-wrap: wrap; gap: 6px; }
.cfg-fam {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 7px; cursor: pointer;
  font-size: var(--t-s); font-weight: 500;
  background: var(--wit); color: var(--inkt-2);
  border: 1px solid var(--rand); border-radius: 999px;
  transition: border-color var(--vlot), color var(--vlot), background var(--vlot);
}
.cfg-fam:hover { border-color: var(--inkt-3); color: var(--inkt); }
.cfg-fam[aria-pressed="true"] {
  border-color: var(--actie); color: var(--inkt); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--actie);
}
.cfg-fam .bol {
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
/* "Alles" krijgt geen kleur maar een waaiertje */
.cfg-fam .bol[data-alles] {
  background: conic-gradient(#1F1F1F, #B4501F, #C9A227, #4E7A4A, #3A5F8A, #8A4A6B, #1F1F1F);
}
.cfg-fam .n { color: var(--inkt-3); font-weight: 400; }

.cfg-raster-kop {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: var(--t-s); color: var(--inkt-3); margin: 2px 0 10px;
}
.cfg-wis {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: var(--t-s); font-weight: 600; color: var(--inkt);
  border-bottom: 1px solid var(--tintlijn);
}
.cfg-wis:hover { border-color: var(--actie); }

.cfg-leeg { font-size: var(--t-m); color: var(--inkt-2); padding: 18px 0; }

/* Kleurstalen */
.cfg-kleuren { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 7px; }
.cfg-kleur {
  padding: 0; border: 0; cursor: pointer; aspect-ratio: 1; overflow: hidden;
  background: var(--vlak-diep); position: relative; border-radius: var(--ronding);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.16);
  transition: box-shadow var(--vlot), transform var(--vlot);
}
.cfg-kleur img { width: 100%; height: 100%; object-fit: cover; }
.cfg-kleur:hover { transform: scale(1.06); box-shadow: inset 0 0 0 1px var(--inkt-3), 0 3px 10px rgba(0,0,0,.14); }
.cfg-kleur[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--vlak), 0 0 0 4px var(--actie);
  transform: scale(1.04);
}
/* Vinkje op het gekozen staal — een ring alleen is op een druk weefsel
   niet altijd te zien. */
.cfg-kleur[aria-pressed="true"]::after {
  content: ''; position: absolute; right: 4px; bottom: 4px;
  width: 15px; height: 15px; border-radius: 50%; background: var(--actie);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.4 3.4L13 4.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

/* Maatwerk: een eigen vlak, want het is geen voetnoot maar een aanbod */
.cfg-maatwerk, .cfg-notitie {
  display: flex; gap: 9px; align-items: flex-start;
  margin-top: 16px; font-size: var(--t-s); color: var(--inkt-2); line-height: 1.5;
}
.cfg-maatwerk svg, .cfg-notitie svg { flex: none; margin-top: 3px; color: var(--merk); }
.cfg-maatwerk {
  background: var(--tint); border: 1px solid var(--tintlijn);
  border-radius: var(--ronding); padding: 14px 16px; margin-top: 4px;
}
.cfg-maatwerk b { display: block; margin-bottom: 2px; }
.cfg-maatwerk .link { margin-top: 6px; }

.cfg-uitleg { font-size: var(--t-s); color: var(--inkt-3); margin: -6px 0 14px; }

/* De vrije maat staat tussen de standaardmaten, niet eronder als voetnoot */
.cfg-maat--vrij { display: grid; align-content: center; text-align: center; }
.cfg-maat--vrij .tekening-vrij {
  display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 8px;
  border-radius: 50%; background: var(--vlak-diep); color: var(--merk-tekst);
}
.cfg-maat--vrij .naam, .cfg-maat--vrij .bij { text-align: center; }

.cfg-aanvraag { font-size: var(--t-l) !important; }

/* Afsluiting */
.cfg-keuzelijst { width: 100%; border-collapse: collapse; font-size: var(--t-m); }
.cfg-keuzelijst tr { border-bottom: 1px solid var(--rand-fijn); }
.cfg-keuzelijst tr:first-child { border-top: 1px solid var(--rand-fijn); }
.cfg-keuzelijst th { text-align: left; font-weight: 400; color: var(--inkt-3); padding: 11px 14px 11px 0; width: 38%; }
.cfg-keuzelijst td { padding: 11px 0; font-weight: 600; }
.cfg-keuzelijst .staal { width: 24px; height: 24px; object-fit: cover; display: inline-block; vertical-align: -7px; margin-right: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.16); }

.cfg-vinkje { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; margin-top: 18px; font-size: var(--t-m); }
.cfg-vinkje input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--actie); flex: none; }

/* Voetregel van de rail */
.cfg-voet { border-top: 1px solid var(--rand); background: var(--wit); padding: 16px 30px; display: flex; align-items: center; gap: 18px; }
.cfg-voet .prijs { font-size: var(--t-xl); font-weight: 700; }
.cfg-voet .onder { font-size: var(--t-s); color: var(--inkt-3); }
.cfg-voet .knop { margin-left: auto; flex: none; }

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 1120px) {
  .product { grid-template-columns: minmax(0, 1fr) 340px; }
  .cfg { grid-template-columns: minmax(0, 1fr) 430px; }
}

@media (max-width: 940px) {
  .assortiment { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product { grid-template-columns: 1fr; }
  .koop { position: static; }
  .uitleg { grid-template-columns: 1fr; }
  .opening { grid-template-columns: 1fr; }
  .opening-beeld { order: -1; aspect-ratio: 16/9; }
  .voet-top { grid-template-columns: 1fr 1fr; }

  /* Beeld boven de tekst, en de feiten in twee rijen van twee. De scheidslijn
     links moet dan bij de eerste van elke rij weg, anders staat hij los. */
  .overons-in { grid-template-columns: 1fr; }
  .overons-beeld { order: -1; }
  .overons-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overons-cijfers > div:nth-child(2n+1) { border-left: 0; }
  .overons-cijfers > div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.15); }

  /* Configurator op een telefoon. Het podium was zo hoog dat er van de
     keuzes nog twee rijen stalen overbleven. Nu: kleiner beeld, dunnere
     reep, en de kanttekening als één regel — alles wat overblijft gaat naar
     de rail, want daar gebeurt het kiezen. */
  .cfg { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .cfg-podium { grid-template-rows: 27vh auto; }
  .cfg-rail { border-left: 0; border-top: 1px solid var(--rand); }
  .cfg-kop { padding: 12px 14px; background: linear-gradient(to bottom, rgba(240,240,238,.96), rgba(240,240,238,0)); }
  .cfg-kop .titel { font-size: var(--t-m); }
  .cfg-foto { padding: 78px 14px 8px; }

  /* De kanttekening lag als pil midden over het meubel. Op een smal scherm
     hoort hij eronder, als gewone regel. */
  .cfg-benadering {
    position: static; transform: none; max-width: none;
    border: 0; border-top: 1px solid var(--rand-fijn); border-radius: 0;
    background: var(--wit); backdrop-filter: none;
    padding: 6px 14px; font-size: 11px; line-height: 1.35; text-align: center;
    gap: 4px;
  }
  .cfg-benadering .kort { display: inline; }
  .cfg-benadering .lang { display: none; }
  .cfg-weergave { top: 48px; bottom: auto; padding: 2px; }   /* onder de kopregel, niet erover */
  .cfg-weergave button { padding: 5px 11px; font-size: var(--t-xs); }

  .cfg-reep { height: 54px; }
  .cfg-reep .staal { width: 62px; }
  .cfg-reep b { font-size: var(--t-s); }
  .cfg-reep .soort { display: none; }

  .cfg-stappen { padding: 8px 14px; gap: 2px; }
  .cfg-stapknop { padding: 6px 7px; gap: 7px; }
  .cfg-stapknop .bol { width: 18px; height: 18px; }
  .cfg-stapknop b { font-size: var(--t-xs); }
  .cfg-stapknop .tekst span { font-size: 11px; }

  .cfg-stap { padding-block: 16px; }
  .cfg-stap-kop { margin-bottom: 12px; }
  .cfg-filterkop { margin: 2px 0 7px; }
  .cfg-filterkop + * { margin-bottom: 14px; }
  .cfg-voet { padding-block: 10px; }
  .cfg-voet-prijs .prijs { font-size: var(--t-l); }
  .cfg-notitie { font-size: var(--t-xs); margin-top: 12px; }
  .cfg-foto img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }
  .cfg-reep { height: 64px; }
  .cfg-reep .staal { width: 78px; max-width: none; flex: none; }
  .cfg-reep-tekst { padding: 0 14px; }
  .cfg-reep .label { display: none; }
  .cfg-reep b { font-size: var(--t-m); }
  .cfg-reep .soort { font-size: var(--t-xs); margin-top: 0; }
  .cfg-bladeren { bottom: 6px; }
  .cfg-stap { padding-block: 20px; }

  /* Collecties liggend: één swipe in plaats van een lange lijst, zodat de
     kleuren direct onder je duim staan zodra je een collectie kiest. */
  .cfg-collecties {
    display: flex; gap: 8px; max-height: none; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: -30px; padding-inline: 30px;   /* gelijk aan de railmarge */
  }
  .cfg-collecties::-webkit-scrollbar { display: none; }
  .cfg-collectie {
    flex: 0 0 132px; scroll-snap-align: start;
    flex-direction: column; align-items: stretch; gap: 0;
  }
  .cfg-collectie .beeld { width: 100%; height: 72px; }
  .cfg-collectie > span:last-child { padding: 8px 10px 9px; }
  .cfg-collectie .naam { font-size: var(--t-s); }
  .cfg-collectie .n { font-size: var(--t-xs); }

  /* Koopbalk onderaan: op een telefoon staat de knop anders buiten beeld */
  .mobielbalk {
    display: flex; align-items: center; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-balk);
    background: var(--wit); border-top: 1px solid var(--rand);
    padding: 10px var(--zijmarge);
    transform: translateY(100%); transition: transform var(--rust);
  }
  .mobielbalk.zichtbaar { transform: none; }
  .mobielbalk .prijs { font-weight: 700; }
  .mobielbalk .knop { margin-left: auto; }
  main { padding-bottom: 64px; }
}

/* De volledige navigatie past tot ongeveer 900px; daaronder het menu.
   Bij 768px liep de pagina anders 954px breed. */
@media (max-width: 900px) {
  .nav { display: none; }
  .menuknop { display: grid; }
  .kop-acties .link { display: none; }
}

@media (max-width: 700px) {
  .merk img { height: 26px; }
  /* Eén belofte tegelijk in plaats van een balk die je opzij moet slepen */
  /* Eén belofte tegelijk, en alleen de kop — de toelichting past er niet bij
     zonder te gaan afbreken, en dan springt de balk in hoogte. */
  .usp .wrap { justify-content: center; overflow: hidden; min-height: 22px; position: relative; }
  .usp span {
    position: absolute; inset: 0; justify-content: center; align-items: center;
    padding-inline: 10px; font-size: var(--t-s);
    opacity: 1; transition: opacity var(--rust);
  }
  .usp .staart { display: none; }
  .usp span[aria-hidden] { opacity: 0; pointer-events: none; }
  .usp b { font-weight: 600; }

  .zoekbalk .wrap { padding-block: 10px; }
  .zoekveld { max-width: none; }
  .feiten { grid-template-columns: 1fr; }
  .feit { padding-block: 12px; }
  .raster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 12px; }
  .voet-top { grid-template-columns: 1fr; }
  .cfg-maten { grid-template-columns: 1fr; }
  .cfg-rail-kop, .cfg-rail-inhoud, .cfg-voet { padding-inline: 18px; }
  .cfg-voet { flex-wrap: wrap; }
  .cfg-voet .knop { margin-left: 0; width: 100%; }
  .cfg-collecties { margin-inline: -18px; padding-inline: 18px; }
  .cfg-kleuren { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); }
  .fotostapel .rij { grid-template-columns: repeat(4, 1fr); }

  /* Op een telefoon staat de tekst over de hele foto, niet naast het meubel:
     dan moet het verloop van onder naar boven lopen in plaats van opzij. */
  .hero { min-height: 68vh; }
  .hero-beeld img { object-position: 38% center; }
  .hero::before {
    background: linear-gradient(to top,
      rgba(24,19,16,.90) 0%, rgba(24,19,16,.74) 42%, rgba(24,19,16,.46) 100%);
  }
  .hero-tekst { max-width: none; }
  .hero h1 { max-width: 16ch; }
  .hero .knoppen .knop { flex: 1 1 auto; white-space: nowrap; padding-inline: 14px; }

  .baan > * { flex: 0 0 66vw; }
  .baan-knop { display: none; }        /* op touch swipe je gewoon */
  .assortiment { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .assort .beeld { aspect-ratio: 4 / 3; }
  .assort b { font-size: var(--t-m); }
  .blok-kop { flex-wrap: wrap; }
  .hero-stalen .reep span { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}