/* Axyvera -- de vormgeving.
 *
 * Eén bestand, geen bouwketen. Een webshop die op een kale server moet kunnen
 * draaien heeft geen npm-installatie nodig om een pagina te tonen.
 *
 * Alles wat kleur, letter of maat is, staat hieronder als variabele. De rest
 * van dit bestand noemt geen enkele kleurcode en geen los getal: elke afstand
 * komt uit de ruimteschaal. Dat is wat een pagina strak maakt -- niet zorgvuldig
 * gekozen losse waarden, maar het ontbreken van keuzes. Twee blokken die
 * 22 en 24 pixels uit elkaar staan zien er slordig uit zonder dat iemand kan
 * aanwijzen waarom.
 */

:root {
  /* -- Kleur ------------------------------------------------------------ */
  --grond:        #FBFBF9;   /* de pagina */
  --vlak:         #FFFFFF;   /* kaarten, header, panelen */
  --vlak-dof:     #F2F5F3;   /* beeldvlakken */
  --rand:         #E2E6E1;
  --rand-sterk:   #CFD5CF;

  --inkt:         #10171C;
  --inkt-zacht:   #3D4A47;
  --inkt-stil:    #5B6663;

  --accent:       #0E5A63;
  --accent-licht: #0A464D;
  --accent-op:    #FFFFFF;
  --accent-vlak:  #F1F7F6;
  --accent-rand:  #A8C6C6;

  --let-op:       #8A6A1F;
  --fout:         #97302A;
  --fout-vlak:    #FCF4F3;
  --fout-rand:    #E3C6C2;

  --donker:       #10171C;
  --donker-inkt:  #FFFFFF;
  --donker-zacht: #C6CECB;
  --donker-stil:  #97A29F;
  --donker-rand:  #2A3336;

  /* -- Ruimte -----------------------------------------------------------
     Een schaal van acht. Elke marge, elke padding en elke gap in dit bestand
     komt hieruit. Staat er een los getal, dan is dat een fout. */
  --r1: 4px;  --r2: 8px;  --r3: 12px; --r4: 16px; --r5: 20px;
  --r6: 24px; --r7: 32px; --r8: 40px; --r9: 56px; --r10: 80px;

  /* -- Vorm -------------------------------------------------------------- */
  --radius-s:  3px;
  --radius:    6px;
  --radius-l:  10px;
  --lijn:      1px solid var(--rand);
  --lijn-sterk: 1px solid var(--rand-sterk);
  --schaduw:   0 1px 2px rgba(16, 23, 28, 0.04), 0 4px 12px rgba(16, 23, 28, 0.05);
  --overgang:  140ms ease;

  /* -- Maatvoering ------------------------------------------------------- */
  --breedte:   1240px;
  --kantlijn:  clamp(var(--r5), 4.4vw, var(--r9));
  --raakvlak:  44px;         /* kleinste aanraakbare knop */

  /* -- Letters ----------------------------------------------------------- */
  --display: "Space Grotesk", "Helvetica Neue", sans-serif;
  --tekst:   "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ====================================================================== */
/* Grondslag                                                              */
/* ====================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font-family: var(--tekst);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 700; margin: 0;
  line-height: 1.08; letter-spacing: -0.018em; text-wrap: balance;
}
h1 { font-size: clamp(34px, 5.2vw, 58px); }
h2 { font-size: clamp(25px, 3vw, 33px); }
h3 { font-size: clamp(17px, 1.8vw, 19px); letter-spacing: -0.012em; }
h4 { font-size: 16px; letter-spacing: -0.008em; }
p  { margin: 0; text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; transition: color var(--overgang); }
a:hover { color: var(--accent-licht); text-decoration: underline; text-underline-offset: 3px; }

/* Bedragen moeten onder elkaar uitlijnen; cijfers van gelijke breedte doen dat. */
.prijs, .specs td, .mono, .kenmerk b, .totalen__regel span:last-child,
.overzichtsregels li span:last-child, .wagenregel__aantal input, .teller input {
  font-variant-numeric: tabular-nums;
}

/* Toetsenbordgebruikers moeten kunnen zien waar ze zijn. Nooit weghalen. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

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

.overslaan {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-op);
  padding: var(--r3) var(--r5); border-radius: 0 0 var(--radius) 0; font-weight: 600;
}
.overslaan:focus { left: 0; }

.omhulsel { max-width: var(--breedte); margin: 0 auto; padding-inline: var(--kantlijn); }
.bladzijde { min-height: 100vh; display: flex; flex-direction: column; }

/* ====================================================================== */
/* Kop van de pagina                                                      */
/* ====================================================================== */

.disclaimerbalk {
  background: var(--donker); color: #E7EAE6;
  font-family: var(--mono); font-size: 12.5px;
}
.disclaimerbalk .omhulsel {
  min-height: 40px; display: flex; align-items: center;
  justify-content: center; text-align: center; gap: var(--r4); padding-block: var(--r2);
}

.kop {
  background: var(--vlak); border-bottom: var(--lijn);
  position: sticky; top: 0; z-index: 20;
}
.kop .omhulsel {
  min-height: 80px; display: flex; align-items: center;
  justify-content: flex-start; gap: var(--r6); padding-block: var(--r3);
}

.merk {
  display: inline-flex; align-items: center; gap: var(--r3);
  color: var(--accent); text-decoration: none; flex-shrink: 0;
}
.merk:hover { color: var(--accent-licht); text-decoration: none; }
.merk__teken { display: flex; }
.merk__woord {
  font-family: var(--display); font-weight: 700; font-size: 23px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--inkt);
  line-height: 1; padding-top: 2px;
}

.hoofdmenu { display: flex; gap: var(--r7); flex-wrap: wrap; flex: 1; align-items: center; }
.hoofdmenu a {
  position: relative; color: var(--inkt); font-size: 15px; font-weight: 500;
  padding-block: var(--r1);
}
.hoofdmenu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--overgang);
}
.hoofdmenu a:hover { text-decoration: none; }
.hoofdmenu a:hover::after { transform: scaleX(1); }
.hoofdmenu a[aria-current="page"] { color: var(--accent); }
.hoofdmenu a[aria-current="page"]::after { transform: scaleX(1); }

/* Op een telefoon bedien je dit met een duim. De menu-ingangen waren 68 bij
   32 pixels; de richtlijn is 44 in de kleinste richting, en daaronder raak je
   te vaak de buurman. De letter blijft even groot -- alleen het vlak eromheen
   groeit, en dat kost niets omdat het menu daar toch onder de kopregel op een
   eigen rij staat. */
@media (max-width: 720px) {
  .hoofdmenu a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Hetzelfde geldt voor het pijltje van de uitklap: 22 bij 22 is een muisdoel,
     geen duimdoel. Het pijltje zelf blijft 14 pixels -- alleen het raakvlak
     groeit, en het negatieve marge houdt de kopregel even breed. */
  .menupunt__klep {
    min-width: 44px; min-height: 44px;
    align-items: center; justify-content: center;
    margin: calc(var(--r1) * -1) calc(var(--r2) * -1);
  }

  /* De kruimels zijn 18 pixels hoog. Met marge boven en onder wordt het
     raakvlak 44 zonder dat de regel verspringt: een marge op een inline-link
     duwt de regel niet uit elkaar, en de 20 pixels lucht die het kruimelpad
     toch al heeft vangen de overloop op. */
  .kruimels a { padding-block: 13px; }

  /* De linkjes in de voet staan onder elkaar op 12 pixels afstand. Dat leest
     prettig op een scherm en raakt beroerd met een duim. De tussenruimte gaat
     naar de links zelf, zodat de voet maar een beetje langer wordt. */
  .voetkolom { gap: 0; }
  .voetkolom strong { margin-bottom: var(--r2); }
  .voetkolom a { display: flex; align-items: center; min-height: 44px; }

  /* "Alles bekijken →" naast een kop. */
  .sectiekop > a { display: inline-flex; align-items: center; min-height: 44px; }
}

.kopknoppen { display: flex; align-items: center; gap: var(--r2); margin-left: auto; }

/* Het hamburgermenu bestaat alleen op een smal scherm, en alleen als het
   script draait. Zonder script staat de knop niet in de weg en blijft het
   menu zelf zichtbaar. */
.menuknop { display: none; position: relative; }
.menuknop__tekst {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.menuknop__tekst--dicht,
.menuknop__ico--dicht { display: none; }
.menuknop[aria-expanded="true"] .menuknop__tekst--open,
.menuknop[aria-expanded="true"] .menuknop__ico--open { display: none; }
.menuknop[aria-expanded="true"] .menuknop__tekst--dicht { display: block; }
.menuknop[aria-expanded="true"] .menuknop__ico--dicht { display: block; }
.menuknop[aria-expanded="true"] {
  background: var(--accent-vlak); border-color: var(--accent); color: var(--accent);
}

.menuscherm {
  position: fixed; inset: 0; z-index: 25;
  border: 0; padding: 0; margin: 0;
  background: rgba(16, 23, 28, 0.45); cursor: pointer;
}
.menuscherm[hidden] { display: none; }

/* Zoeken staat in het menu alleen op een smal scherm. In de balk is het
   vergrootglas er al. */
.menu-zoek { display: none; align-items: center; gap: var(--r3); }

/* Taalkeuze: een pil met een globe, de huidige code en een pijl.
   Zonder script klapt details alsnog open. */
.taalmenu { position: relative; margin-left: auto; }
.taalmenu summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--r2);
  height: 40px; padding: 0 var(--r3) 0 var(--r4);
  border: var(--lijn-sterk); border-radius: 999px;
  background: var(--vlak); color: var(--inkt);
  font-size: 14px; font-weight: 600; letter-spacing: 0.04em; line-height: 1;
}
.taalmenu summary::-webkit-details-marker { display: none; }
.taalmenu summary:hover { border-color: var(--inkt); }
.taalmenu__pijl { color: var(--inkt-stil); transition: transform var(--overgang); }
.taalmenu[open] .taalmenu__pijl { transform: rotate(180deg); }
.taalmenu__lijst {
  position: absolute; top: calc(100% + var(--r2)); right: 0; z-index: 40;
  min-width: 7rem; padding: var(--r2);
  background: var(--vlak); border: var(--lijn); border-radius: var(--radius-l);
  box-shadow: 0 2px 6px rgba(16,23,28,.08), 0 16px 40px rgba(16,23,28,.16);
  display: flex; flex-direction: column;
}
.taalmenu__lijst a {
  padding: var(--r2) var(--r3); border-radius: var(--radius-s);
  font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
}
.taalmenu__lijst a::after { content: none; }
.taalmenu__lijst a:hover { background: var(--accent-vlak); text-decoration: none; }
.taalmenu__lijst a[aria-current="true"] { color: var(--accent); }

/* -- Uitklapmenu en zoekveld in de kopregel ----------------------------- */

/* De uitklap hangt aan zijn menupunt en niet aan de pagina: schuift de
   kopregel, dan schuift hij mee. */
.menupunt, .zoekhoek { position: relative; display: flex; align-items: center; gap: var(--r1); }

.menupunt__klep {
  border: 0; background: transparent; color: var(--inkt-stil);
  padding: var(--r1); cursor: pointer; display: flex; border-radius: var(--radius-s);
  transition: color var(--overgang), transform var(--overgang);
}
.menupunt__klep:hover { color: var(--accent); }
.menupunt__klep[aria-expanded="true"] { color: var(--accent); transform: rotate(180deg); }

.uitklap {
  position: absolute; top: calc(100% + var(--r3)); left: 0; z-index: 40;
  min-width: 17rem; padding: var(--r2);
  background: var(--vlak); border: var(--lijn); border-radius: var(--radius-l);
  box-shadow: 0 2px 6px rgba(16,23,28,.08), 0 16px 40px rgba(16,23,28,.16);
  display: flex; flex-direction: column;
}
.uitklap[hidden] { display: none; }

.uitklap a {
  padding: var(--r2) var(--r3); border-radius: var(--radius-s);
  font-size: 14.5px; font-weight: 500; color: var(--inkt); line-height: 1.35;
}
.uitklap a:hover { background: var(--accent-vlak); text-decoration: none; }
.uitklap a[aria-current="page"] { color: var(--accent); }
/* De uitklap mag geen onderstreping van het hoofdmenu erven. */
.uitklap a::after { content: none; }

.uitklap__alles {
  margin-top: var(--r1); padding-top: var(--r3) !important;
  border-top: var(--lijn); color: var(--inkt-stil) !important; font-size: 13.5px !important;
}

/* Het zoekveld hangt rechts uit, anders loopt het buiten het scherm. */
.uitklap--zoek {
  left: auto; right: 0; flex-direction: row; gap: var(--r2);
  padding: var(--r3); min-width: min(22rem, calc(100vw - var(--r6) * 2));
}
.uitklap--zoek input {
  flex: 1 1 auto; min-width: 0; padding: var(--r2) var(--r3);
  border: var(--lijn-sterk); border-radius: var(--radius); font: inherit; font-size: 14px;
}

/* Het zoekformulier op de zoekpagina zelf. */
.zoekformulier {
  display: flex; gap: var(--r3); flex-wrap: wrap; margin-bottom: var(--r7);
}
.zoekformulier input {
  flex: 1 1 22rem; min-width: 0; padding: var(--r3) var(--r4);
  border: var(--lijn-sterk); border-radius: var(--radius); font: inherit;
  background: var(--vlak); color: var(--inkt);
}
.zoekformulier input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Wel voorlezen, niet tonen. */
.visueel-verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ====================================================================== */
/* Knoppen                                                                */
/* ====================================================================== */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r2);
  min-height: 52px; padding-inline: var(--r7);
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--tekst); font-size: 15.5px; font-weight: 600; line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--overgang), border-color var(--overgang), color var(--overgang);
}
.knop:hover { text-decoration: none; }
.knop:active { transform: translateY(1px); }

.knop--vol { background: var(--accent); color: var(--accent-op); }
.knop--vol:hover { background: var(--accent-licht); color: var(--accent-op); }

.knop--rand { border-color: var(--rand-sterk); color: var(--inkt); background: var(--vlak); }
.knop--rand:hover { border-color: var(--inkt); color: var(--inkt); background: var(--vlak); }

.knop--accentrand { border-color: var(--accent); color: var(--accent); background: var(--vlak); }
.knop--accentrand:hover { background: var(--accent-vlak); color: var(--accent-licht); }

.knop--klein { min-height: var(--raakvlak); padding-inline: var(--r5); font-size: 13.5px; }
.knop--breed { width: 100%; }
.knop[disabled] { opacity: 0.4; cursor: not-allowed; }
.knop[disabled]:active { transform: none; }

.pictogramknop {
  width: var(--raakvlak); height: var(--raakvlak); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vlak); border: var(--lijn-sterk);
  border-radius: var(--radius); cursor: pointer; color: var(--inkt);
  transition: background var(--overgang), border-color var(--overgang);
}
.pictogramknop:hover { background: var(--vlak-dof); border-color: var(--inkt-stil); }
/* Na .pictogramknop, anders wint die display en staat de knop ook op desktop. */
.pictogramknop.menuknop { display: none; }

.tekstknop {
  background: none; border: 0; padding: var(--r1) 0; cursor: pointer;
  font-family: var(--tekst); font-size: 13.5px; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
}
.tekstknop:hover { color: var(--accent-licht); }

/* ====================================================================== */
/* Banner en kenmerken                                                    */
/* ====================================================================== */

.banner {
  position: relative; background: var(--vlak);
  border-bottom: var(--lijn); overflow: hidden;
}
/* Een fijn raster, zoals millimeterpapier. Zo licht dat je het eerder voelt
   dan ziet -- het maakt het vlak minder leeg zonder iets te beloven. */
.banner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--rand) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rand) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.55;
  mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 82%, transparent);
}
.banner__binnen {
  position: relative;
  display: flex; align-items: center; gap: clamp(var(--r7), 4vw, var(--r10));
  padding-block: clamp(var(--r8), 5.5vw, var(--r10));
}
.banner__tekst { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: var(--r6); }
/* De kop moet op drie regels blijven. Eén onbreekbaar woord als
   "laboratoriumonderzoek" maakt deze kolom anders zo breed dat de flacons
   ernaast in de breedte worden platgedrukt. */
.banner__tekst h1 { max-width: 10.5em; }

.banner__schap {
  flex: 1 1 480px; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.banner__vials {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(var(--r2), 1.4vw, var(--r5));
}
/* Ze staan op één lijn: de bodems van alle vials liggen op de plank. */
.banner__vial { display: flex; align-items: flex-end; }
/* De hoogte komt uit het sjabloon (elke flacon zijn eigen maat); de breedte
   loopt mee. Zonder `width: auto` houdt de browser het width-attribuut aan en
   worden ze allemaal even breed uitgerekt. */
.banner__vial img { width: auto; display: block; }
.banner__vial--achter { opacity: 0.45; }
.banner__vial--voor   { position: relative; z-index: 1; }
/* De plank hoort precies zo breed te zijn als de rij vials die erop staat.
   Een losse lijn met een vaste breedte klopt bij één schermmaat en bij alle
   andere niet; een onderrand op de rij zelf klopt altijd. */
.banner__vials {
  border-bottom: 1px solid var(--rand-sterk);
  padding: 0 var(--r5);
}

/* -- tekst in de banner ------------------------------------------------- */

.bovenkop {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
}
.inleiding { font-size: 18px; line-height: 1.62; color: var(--inkt-zacht); max-width: 52ch; }
.knoppenrij { display: flex; gap: var(--r3); flex-wrap: wrap; padding-top: var(--r1); }

/* De vier beloftes onder de banner.
   Ze stonden op de paginakleur met een dunne lijn eronder, en daardoor lazen
   ze als een voetnoot bij de banner in plaats van als een belofte. Nu staan ze
   op een eigen, iets koelere ondergrond met een accentlijn erboven: dat maakt
   het één blok dat je ziet staan, zonder dat het met de banner gaat
   concurreren. Het pictogram doet het grootste deel van dat werk -- vier
   tekens vallen eerder op dan vier regels tekst. */
.kenmerken {
  background: var(--accent-vlak);
  border-top: 2px solid var(--accent);
  border-bottom: var(--lijn);
}
.kenmerken__rij {
  max-width: var(--breedte); margin-inline: auto;
  padding-inline: var(--kantlijn);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--r5);
}
.kenmerk {
  padding: var(--r6) var(--r5) var(--r6) 0;
  display: grid; grid-template-columns: auto 1fr; align-items: start;
  column-gap: var(--r3); row-gap: var(--r1);
}
/* De scheidslijn hoort tússen de tegels en niet aan de rand van het blok:
   met een rand op elk kind staat er ook een streep tegen de kantlijn aan. */
.kenmerk + .kenmerk {
  border-left: var(--lijn); padding-left: var(--r5);
}
.kenmerk__teken { grid-row: span 2; color: var(--accent); margin-top: 1px; }
.kenmerk__kop {
  font-size: 15.5px; font-weight: 600; color: var(--inkt); line-height: 1.3;
}
.kenmerk__bij {
  grid-column: 2; font-size: 13px; color: var(--inkt-stil); line-height: 1.45;
}

/* Vier kolommen worden vier onleesbare kokers op een telefoon. Twee bij twee
   op een tablet, en onder elkaar op een telefoon -- met de scheidslijn boven
   in plaats van opzij, want naast elkaar staan ze dan niet meer. */
@media (max-width: 900px) {
  .kenmerken__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .kenmerk { padding: var(--r5) var(--r5) var(--r5) 0; }
  .kenmerk + .kenmerk { border-left: 0; padding-left: 0; }
  .kenmerk:nth-child(2n) { padding-left: var(--r5); border-left: var(--lijn); }
  .kenmerk:nth-child(n + 3) { border-top: var(--lijn); }
}
@media (max-width: 560px) {
  .kenmerken__rij { grid-template-columns: 1fr; }
  .kenmerk { padding: var(--r4) 0; }
  .kenmerk:nth-child(2n) { padding-left: 0; border-left: 0; }
  .kenmerk + .kenmerk { border-top: var(--lijn); }
}

/* ====================================================================== */
/* Secties en rooster                                                     */
/* ====================================================================== */

.sectie { padding-block: clamp(var(--r8), 5vw, var(--r10)); }
.sectie--kort { padding-block: var(--r7); }
.sectiekop {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--r5); flex-wrap: wrap; margin-bottom: var(--r7);
}
.sectiekop__tekst { display: flex; flex-direction: column; gap: var(--r2); }

.rooster {
  display: grid; gap: var(--r6);
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}

.kaart {
  border: var(--lijn); border-radius: var(--radius-l);
  background: var(--vlak); overflow: hidden;
  display: flex; flex-direction: column; position: relative;
  transition: border-color var(--overgang), box-shadow var(--overgang);
}
.kaart:hover { border-color: var(--rand-sterk); box-shadow: var(--schaduw); }
.kaart--uit { background: var(--grond); }
.kaart--uit:hover { box-shadow: none; }
.kaart__beeld {
  aspect-ratio: 4 / 3; background: var(--vlak-dof); border-bottom: var(--lijn);
  display: flex; align-items: center; justify-content: center; padding: var(--r6);
  /* Het is een link naar het product, maar hij hoort er niet als tekst uit te
     zien: geen kleur van een link en geen onderstreping onder een foto. */
  color: inherit; text-decoration: none;
}
.kaart--uit .kaart__beeld { filter: grayscale(1); opacity: 0.6; }
.kaart__tekst {
  padding: var(--r5); display: flex; flex-direction: column;
  gap: var(--r2); flex-grow: 1;
}
/* Als blok, niet als tekst: dan loopt het raakvlak door tot de rand
   van de kaart en raak je hem ook net naast de naam. */
.kaart__tekst h3 a { display: block; color: var(--inkt); }
.kaart__tekst h3 a:hover { color: var(--accent); text-decoration: none; }
.kaart__samenvatting { font-size: 13.5px; line-height: 1.5; color: var(--inkt-stil); flex-grow: 1; }
/* Prijs op een eigen regel, knop eronder over de volle breedte.
   Naast elkaar ziet er bij een korte prijs beter uit, maar dan springt de knop
   bij "vanaf € 129,95" naar de volgende regel en staat geen enkele kaart in
   het rooster meer gelijk. Eén vorm die altijd klopt wint van twee die dat
   soms doen. */
.kaart__onder {
  display: flex; flex-direction: column; align-items: stretch;
  gap: var(--r3); padding-top: var(--r4); margin-top: auto;
}
.kaart__onder .knop { white-space: nowrap; width: 100%; }
.kaart__onder form { width: 100%; }

.prijs { font-family: var(--mono); font-size: 18px; font-weight: 500; white-space: nowrap; }
.prijs--groot {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(30px, 3.4vw, 38px); letter-spacing: -0.02em;
}
.prijs__vanaf { font-family: var(--tekst); font-size: 12.5px; color: var(--inkt-stil); }

.etiket {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
  color: var(--accent); text-transform: uppercase;
}
.etiket--waarschuwing { color: var(--let-op); }
.vlag {
  position: absolute; top: var(--r3); left: var(--r3); z-index: 1;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; background: var(--donker); color: var(--donker-inkt);
  padding: var(--r1) var(--r2); border-radius: var(--radius-s); line-height: 1.4;
}
/* Het kortingsvlaggetje krijgt de accentkleur en staat onder het
   nieuw-vlaggetje, zodat ze elkaar niet overlappen bij een product dat
   allebei is. */
.vlag--korting {
  background: var(--accent); color: #fff; letter-spacing: 0.06em;
}
.vlag + .vlag--korting { top: calc(var(--r3) + 26px); }

/* -- Korting: de oude prijs en het vlaggetje ----------------------------- */

/* Doorgestreept en stiller dan de echte prijs. De klant moet in één oogopslag
   zien wélk bedrag hij betaalt; de oude prijs is context, geen keuze. */
.prijs__was, .maat__was, .prijs--was {
  font-family: var(--mono); color: var(--inkt-stil);
  text-decoration: line-through; font-weight: 400;
}
.prijs__was, .maat__was { font-size: 0.82em; margin-left: var(--r1); }
.prijs--was { font-size: 16px; }

.kortingsvlag {
  display: inline-flex; align-items: center; gap: var(--r1);
  background: var(--accent-vlak); color: var(--accent);
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  padding: 3px var(--r2); border-radius: var(--radius-s); line-height: 1.3;
}
.kortingsvlag svg { flex: none; }
.kortingsduur { font-size: 13.5px; color: var(--inkt-stil); margin-top: calc(var(--r2) * -1); }

/* ====================================================================== */
/* Productpagina                                                          */
/* ====================================================================== */

/* Twee kolommen, en een derde blok onder de foto.

   Dit was een wrappende flexbox. Dat werkte zolang beide kolommen ongeveer
   even lang waren, maar het beeldvlak heeft een vaste verhouding van 7:6 en
   de koopkolom groeit mee met alles wat erin staat -- maat, prijs, afteller,
   bezorgschatting. Daardoor stond er vierhonderd pixels wit onder de foto.

   Met een rooster kan de koopkolom over twee rijen lopen en schuiven de
   beloftes in die lege ruimte. `align-items: start` zodat de foto zijn eigen
   verhouding houdt in plaats van uitgerekt te worden. */
/* Twee kolommen, en de linker loopt mee.

   Dit was een wrappende flexbox. Dat werkte zolang beide kolommen ongeveer
   even lang waren, maar het beeldvlak heeft een vaste verhouding van 7:6 en
   de koopkolom groeit mee met alles wat erin staat -- maat, prijs, extra's,
   een staffel, afteller, bezorgschatting. Bij een product met extra's én een
   staffel stond er vierhonderd pixels wit onder de foto.

   De foto en de beloftes zijn nu één kolom die blijft staan terwijl je de
   koopkolom afgaat. Wat er aan hoogte overblijft, vult zich dus met het enige
   wat er hoort te staan: het product waar je naar kijkt. `align-items: start`
   zodat die kolom zijn eigen hoogte houdt en de ruimte heeft om in te
   schuiven. */
.product {
  display: grid; gap: clamp(var(--r7), 4vw, var(--r9));
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start; padding-block: var(--r6) var(--r9);
}
.product__beeld {
  display: flex; flex-direction: column; gap: var(--r5);
  position: sticky; top: var(--r6);
}

/* Onder elkaar valt de beeldkolom weg als blok -- `display: contents` haalt
   hem uit de opmaak -- zodat de drie delen los in de kolom komen en de
   volgorde foto, kopen, beloftes wordt. Vier regels geruststelling horen niet
   tussen de foto en de bestelknop. */
@media (max-width: 900px) {
  .product { grid-template-columns: minmax(0, 1fr); }
  .product__beeld { display: contents; }
  .product__vlak { order: 1; }
  .product__info { order: 2; }
  .product .beloftes { order: 3; }
}

.product__vlak {
  aspect-ratio: 7 / 6; border-radius: var(--radius-l); background: var(--vlak-dof);
  border: var(--lijn);
  display: flex; align-items: center; justify-content: center; padding: var(--r8);
  /* De foto blijft staan terwijl je de rechterkolom afgaat.

     De twee kolommen zijn even hoog, maar het beeldvlak heeft een vaste
     verhouding van 7:6 en de koopkolom groeit mee met wat erin staat -- maat,
     prijs, afteller, bezorgschatting, beloftes. Daardoor stond er vierhonderd
     tot vijfhonderd pixels wit onder de foto, precies naast het deel waar je
     je keuze maakt. Met `sticky` vult die ruimte zich met het enige wat er
     hoort te staan: het product waar je naar kijkt. */
}

.product__info { flex: 1 1 380px; display: flex; flex-direction: column; gap: var(--r6); }
.product__kop { display: flex; flex-direction: column; gap: var(--r3); }

.zuiverheid {
  display: flex; align-items: center; gap: var(--r3);
  padding: var(--r3) var(--r5); border-radius: var(--radius);
  background: var(--accent-vlak); border: 1px solid var(--accent-rand);
  font-size: 14.5px; color: #0B4148;
}
.zuiverheid svg { flex-shrink: 0; }
.zuiverheid strong { font-weight: 600; }

.maten { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--r3); }
.maten legend { padding: 0; font-size: 13.5px; font-weight: 600; color: var(--inkt-zacht); }
.matenrij { display: flex; gap: var(--r2); flex-wrap: wrap; }
.maat {
  position: relative; border: var(--lijn-sterk); border-radius: var(--radius);
  background: var(--vlak); padding: var(--r3) var(--r5);
  display: flex; flex-direction: column; gap: var(--r1);
  cursor: pointer; min-width: 104px;
  transition: border-color var(--overgang), background var(--overgang), box-shadow var(--overgang);
}
.maat:hover { border-color: var(--inkt-stil); }
/* Een dikkere rand zou het blokje laten verspringen; een tweede rand binnenin
   niet. Vandaar box-shadow in plaats van border-width. */
.maat:has(input:checked) {
  border-color: var(--accent); background: var(--accent-vlak);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.maat:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.maat input { position: absolute; opacity: 0; width: 0; height: 0; }
.maat b { font-family: var(--display); font-size: 16px; font-weight: 700; }
.maat span { font-family: var(--mono); font-size: 13px; color: var(--inkt-stil); }
.maat:has(input:checked) span { color: var(--accent); }
.maat--uit { opacity: 0.45; cursor: not-allowed; }
.maat--uit:hover { border-color: var(--rand-sterk); }

.prijsregel { display: flex; align-items: baseline; gap: var(--r3); flex-wrap: wrap; }
.prijsregel small { font-size: 13.5px; color: var(--inkt-stil); }

.bestelrij { display: flex; gap: var(--r3); align-items: center; flex-wrap: wrap; }
.teller {
  display: flex; align-items: center; background: var(--vlak);
  border: var(--lijn-sterk); border-radius: var(--radius); height: 52px;
}
.teller button {
  width: var(--raakvlak); height: 50px; border: 0; background: transparent;
  font-size: 20px; color: var(--inkt); cursor: pointer; line-height: 1;
}
.teller button:hover { color: var(--accent); }
.teller input {
  width: 44px; border: 0; background: transparent; color: var(--inkt);
  text-align: center; font-family: var(--mono); font-size: 16px;
  -moz-appearance: textfield;
}
.teller input::-webkit-outer-spin-button,
.teller input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bestelrij .knop { flex-grow: 1; min-height: 52px; font-size: 16px; }

.beloftes {
  display: flex; flex-direction: column; gap: var(--r3);
  padding-top: var(--r5); border-top: var(--lijn);
}
.belofte { display: flex; gap: var(--r3); align-items: center; font-size: 14.5px; color: var(--inkt-zacht); }
.belofte svg { flex-shrink: 0; }

.specs { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.specs th, .specs td {
  padding: var(--r3) 0; text-align: left; border-bottom: var(--lijn); vertical-align: top;
}
.specs th { color: var(--inkt-stil); font-weight: 400; width: 240px; }
.specs td { font-family: var(--mono); }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }

.kolommen { display: flex; gap: clamp(var(--r7), 4vw, var(--r9)); flex-wrap: wrap; }
.kolommen > * { flex: 1 1 360px; }

/* Een sectie die alleen leestekst bevat, staat op leesbreedte in het midden
   -- kop, streep en tekst op dezelfde lijn. Zonder dit stond de tekst (die
   een leesbare regellengte houdt, zie .lopende-tekst) tegen de linkerrand met
   de halve pagina leeg ernaast, terwijl de kop wél de volle breedte pakte:
   twee blokken die niet bij elkaar leken te horen. */
/* In `rem` en niet in `ch`: `ch` rekent met de lettergrootte van het element
   zelf, dus 62ch onder een kop van 26px is bijna twee keer zo breed als 62ch
   leestekst. Dan staan kop en tekst alsnog niet op dezelfde lijn. */
/* De leestekst stond gecentreerd in een sectie van ruim elfhonderd pixels: een
   smal lint met evenveel leegte links als rechts, terwijl de rest van de
   pagina links tegen de kantlijn staat. Dat leest niet als een keuze maar als
   een fout. Hij staat nu links uitgelijnd met de rest, met de inhoudsopgave
   en de specificaties in de ruimte die daardoor rechts vrijkomt.

   Zeventig tekens is de leesbreedte; breder wordt het springen met je oog van
   regeleinde naar regelbegin. */
.sectie--lezen__raam {
  display: grid; grid-template-columns: minmax(0, 37rem) minmax(0, 1fr);
  gap: var(--r8) var(--r9); align-items: start;
}
.sectie--lezen .lopende-tekst { max-width: 37rem; }
.sectie--lezen .specs { margin-bottom: var(--r6); width: 100%; }

/* De bijkolom: wat je erbij wilt hebben terwijl je leest, niet ervóór. Hij
   blijft staan bij het scrollen -- bij een tekst van drieduizend pixels is
   een inhoudsopgave die mee naar boven verdwijnt geen inhoudsopgave. */
.sectie--lezen__zij { position: sticky; top: var(--r6); }

@media (max-width: 900px) {
  .sectie--lezen__raam { grid-template-columns: 1fr; gap: var(--r6); }
  /* Op een telefoon hoort de inhoudsopgave bóven de tekst: eronder is hij
     een lijst met verwijzingen naar iets wat je al voorbij bent. */
  .sectie--lezen__zij { position: static; order: -1; }
}

.kolommen__kop {
  margin: 0 0 var(--r4); font-family: var(--display); font-size: 15px;
  font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--inkt-stil);
}

/* ====================================================================== */
/* Kruimelpad                                                             */
/* ====================================================================== */

.kruimels { font-size: 13.5px; color: var(--inkt-stil); padding-block: var(--r5); }
.kruimels ol { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--r2); flex-wrap: wrap; }
.kruimels li::after { content: "/"; padding-left: var(--r2); color: var(--rand-sterk); }
.kruimels li:last-child::after { content: ""; }
.kruimels [aria-current="page"] { color: var(--inkt); }

/* ====================================================================== */
/* Winkelwagen en afrekenen                                               */
/* ====================================================================== */

.afrekenlayout { display: flex; gap: clamp(var(--r6), 3.5vw, var(--r8)); align-items: flex-start; flex-wrap: wrap; }
.afrekenlayout__hoofd { flex: 1 1 460px; display: flex; flex-direction: column; gap: var(--r5); }
.afrekenlayout__zij {
  flex: 0 1 360px; position: sticky; top: 104px;
  display: flex; flex-direction: column; gap: var(--r4);
  background: var(--vlak); border: var(--lijn);
  border-radius: var(--radius-l); padding: var(--r6);
}

.wagenregel {
  display: flex; align-items: center; gap: var(--r5); flex-wrap: wrap;
  padding: var(--r5); background: var(--vlak);
  border: var(--lijn); border-radius: var(--radius-l);
}
.wagenregel__naam { flex: 1 1 200px; display: flex; flex-direction: column; gap: var(--r1); }
.wagenregel__naam a { color: var(--inkt); font-family: var(--display); font-weight: 700; font-size: 17px; }
.wagenregel__naam a:hover { color: var(--accent); text-decoration: none; }
.wagenregel__meta { font-family: var(--mono); font-size: 12.5px; color: var(--inkt-stil); }
.wagenregel__aantal { display: flex; align-items: center; gap: var(--r2); }
.wagenregel__aantal input {
  width: 72px; height: var(--raakvlak); text-align: center;
  font-family: var(--mono); font-size: 15px; color: var(--inkt);
  background: var(--grond); border: var(--lijn-sterk); border-radius: var(--radius);
}
.wagenregel__prijs {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: var(--r1); min-width: 112px;
}
.wagenregel__stuks { font-size: 12.5px; color: var(--inkt-stil); }

.codeformulier { display: flex; flex-direction: column; gap: var(--r2); padding-top: var(--r2); }
.codeformulier label { font-size: 13.5px; font-weight: 600; color: var(--inkt-zacht); }
/* Een invoerveld krimpt van zichzelf niet onder de breedte van zijn eigen
   tekst. Veld plus knop hadden daardoor samen een ondergrens die de pagina op
   een smalle telefoon breder duwde dan het scherm. min-width: 0 laat het veld
   wel krimpen, en past het dan nog niet, dan zakt de knop eronder. */
.codeformulier__rij { display: flex; flex-wrap: wrap; gap: var(--r2); }
/* In de smalle kolom naast de bestelling haalt 220px niets meer uit: daar mag
   het veld juist meegroeien met de ruimte die er is. */
.codeformulier--zij .codeformulier__rij input { flex: 1 1 150px; }
.codeformulier__rij input {
  flex: 0 1 220px; min-width: 0; height: var(--raakvlak); padding-inline: var(--r4);
  font-family: var(--mono); font-size: 14px; color: var(--inkt);
  background: var(--vlak); border: var(--lijn-sterk); border-radius: var(--radius);
  text-transform: uppercase;
}

.totalen { display: flex; flex-direction: column; gap: var(--r3); }
.totalen__regel { display: flex; justify-content: space-between; gap: var(--r4); font-size: 14.5px; }
.totalen__regel span:last-child { font-family: var(--mono); white-space: nowrap; }
.totalen__regel--korting { color: var(--accent); }
.totalen__regel--totaal {
  border-top: var(--lijn); margin-top: var(--r1); padding-top: var(--r4);
  font-family: var(--display); font-weight: 700; font-size: 20px; align-items: baseline;
}
.totalen__regel--totaal span:last-child { font-family: var(--display); font-size: 22px; }
.totalen__btw { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--inkt-stil); }
.totalen__hint { font-size: 13px; color: var(--accent); }

.overzichtsregels {
  list-style: none; margin: 0; padding: 0 0 var(--r3);
  display: flex; flex-direction: column; gap: var(--r3);
  border-bottom: var(--lijn);
}
.overzichtsregels li { display: flex; justify-content: space-between; gap: var(--r4); font-size: 14px; }
.overzichtsregels li span:last-child { font-family: var(--mono); white-space: nowrap; }
.overzichtsregels small { color: var(--inkt-stil); }

/* ====================================================================== */
/* Formulieren                                                            */
/* ====================================================================== */

.blok {
  border: var(--lijn); border-radius: var(--radius-l);
  background: var(--vlak); padding: var(--r6); margin: 0;
  display: flex; flex-direction: column; gap: var(--r5);
}
.blok legend {
  padding-inline: var(--r2); margin-left: calc(var(--r2) * -1);
  font-family: var(--display); font-weight: 700; font-size: 19px;
  letter-spacing: -0.012em;
}

/* Geen `flex: 1 1 160px` op het veld zelf. Die basis is bedoeld als *breedte*
   binnen een `.veldrij`, maar een `.blok` is een kolom -- en daar wordt
   dezelfde 160px een *hoogte*. Een veld van label plus invoervak is 74px hoog
   en werd zo op 160px gezet: gaten van bijna honderd pixels tussen elk veld. */
.veld { display: flex; flex-direction: column; gap: var(--r2); }
.veldrij > .veld { flex: 1 1 160px; }
.veld label { font-size: 13.5px; font-weight: 500; color: var(--inkt-zacht); }
.veld input, .veld select, .veld textarea {
  min-height: 48px; padding: var(--r3) var(--r4);
  font-family: var(--tekst); font-size: 15px; color: var(--inkt);
  background: var(--grond); border: var(--lijn-sterk);
  border-radius: var(--radius); width: 100%;
  transition: border-color var(--overgang), background var(--overgang);
}
.veld input:hover, .veld select:hover, .veld textarea:hover { border-color: var(--inkt-stil); }
.veld input:focus, .veld select:focus, .veld textarea:focus { background: var(--vlak); }
.veld textarea { min-height: 88px; resize: vertical; }
.veld--fout input, .veld--fout select { border-color: var(--fout); background: var(--fout-vlak); }
/* De onderzoeksdisclaimer onder elk product. Een kader en niet los in de
   pagina: dit hoort als één mededeling te lezen, en niet als nog een alinea
   productinformatie. */
.onderzoeksblok {
  display: flex; gap: var(--r4); padding: var(--r5);
  background: var(--vlak-dof); border: var(--lijn); border-radius: var(--radius);
  color: var(--inkt-zacht);
}
.onderzoeksblok__teken { flex: 0 0 auto; padding-top: 2px; color: var(--inkt-stil); }
.onderzoeksblok__tekst { display: flex; flex-direction: column; gap: var(--r3); }
.onderzoeksblok h2 {
  margin: 0; font-family: var(--display); font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--inkt);
}
.onderzoeksblok p { margin: 0; font-size: 14px; line-height: 1.6; }
.onderzoeksblok__akkoord { color: var(--inkt); font-weight: 500; }
@media (max-width: 560px) { .onderzoeksblok { flex-direction: column; } }

/* De aftelling boven het afrekenformulier. Rustig vlak, geen rood en geen
   knipperen: een klok die schreeuwt leest als een truc, ook als hij klopt. */
.aftelling {
  display: flex; align-items: center; gap: var(--r3);
  margin: calc(var(--r7) * -1) 0 var(--r6); padding: var(--r3) var(--r5);
  background: var(--vlak-dof); border: var(--lijn); border-radius: var(--radius);
  font-size: 14.5px; color: var(--inkt-zacht);
}
.aftelling__teken { display: flex; color: var(--accent); }
.aftelling strong { font-family: var(--mono); color: var(--inkt); }
.aftelling--om { color: var(--inkt-stil); }

/* Het vertrouwensblok naast het formulier: merk, sociaal bewijs, drie
   punten. Bewust stil -- het staat naast het moment van betalen, en daar
   helpt rust meer dan nadruk. */
.vertrouwen {
  display: flex; flex-direction: column; gap: var(--r4);
  padding-bottom: var(--r5); border-bottom: var(--lijn);
}
.vertrouwen__merk { display: flex; flex-direction: column; gap: var(--r2); }
.vertrouwen__bewijs {
  font-size: 13px; font-weight: 600; color: var(--inkt-zacht);
  letter-spacing: 0.01em;
}
.vertrouwen__punten { list-style: none; margin: 0; padding: 0;
                      display: flex; flex-direction: column; gap: var(--r3); }
.vertrouwen__punten li { display: flex; align-items: flex-start; gap: var(--r3); }
.vertrouwen__vink {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--accent); color: var(--vlak);
}
.vertrouwen__punten strong { display: block; font-size: 13.5px; color: var(--inkt); }
.vertrouwen__punten small { display: block; font-size: 12.5px; color: var(--inkt-stil); }

/* Hoe ver de klant is naar gratis verzending. Een eigen vlak en geen
   voetnoot: dit is het blok dat iemand aanzet om nog iets bij te leggen, en
   een regeltje grijze tekst onder de bedragen doet dat niet. */
.gratisbalk {
  display: flex; flex-direction: column; gap: var(--r3);
  padding: var(--r4) var(--r5);
  background: var(--vlak-dof); border: var(--lijn); border-radius: var(--radius);
}
.gratisbalk--klaar {
  /* Gehaald: het accent mag hier wél, want er valt iets te vieren. */
  background: color-mix(in srgb, var(--accent) 8%, var(--vlak));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--vlak));
}
.gratisbalk__tekst {
  display: flex; align-items: center; gap: var(--r3);
  margin: 0; font-size: 15px; line-height: 1.35; color: var(--inkt-zacht);
}
.gratisbalk__tekst strong { color: var(--inkt); }
.gratisbalk--klaar .gratisbalk__tekst,
.gratisbalk--klaar .gratisbalk__tekst strong { color: var(--accent); }
.gratisbalk__doos { display: flex; flex: 0 0 auto; color: var(--inkt-stil); }
.gratisbalk__vink {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: var(--vlak);
}
.gratisbalk__spoor {
  height: 8px; border-radius: 999px; background: var(--vlak);
  border: var(--lijn); overflow: hidden;
}
.gratisbalk__spoor span {
  display: block; height: 100%; border-radius: 999px; background: var(--accent);
  /* Een balk die verspringt bij het herberekenen leest als een storing. */
  transition: width 240ms ease-out;
}

/* De inleidende zin onder een paginakop. */
.paginalead {
  max-width: 62ch; margin: calc(var(--r7) * -1) 0 var(--r7);
  font-size: 16px; line-height: 1.65; color: var(--inkt-zacht);
}

/* Labresultaten. Eén regel per rapport, en die regel moet in één oogopslag
   drie dingen zeggen: welke maat, wie het testte, en wat eruit kwam. De knop
   staat rechts en draagt zijn bestemming bij zich -- bij een bewijsstuk is een
   link waarvan je de bestemming pas na het klikken kent het tegenovergestelde
   van vertrouwen wekken. */
.labgroep { padding-block: var(--r6); border-top: var(--lijn); }
.labgroep:first-of-type { border-top: 0; padding-top: 0; }
.labgroep__kop, .labblok__kop {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--r4); flex-wrap: wrap; margin-bottom: var(--r5);
}
.labgroep__kop h2 {
  margin: 0; font-family: var(--display); font-size: 22px; letter-spacing: -0.01em;
}
.labblok {
  padding: var(--r5); background: var(--vlak-dof);
  border: var(--lijn); border-radius: var(--radius);
}
/* Het lablabel onder de productnaam springt hierheen als er meer dan één
   rapport is. De kop blijft bovenaan het scherm staan, dus zonder deze ruimte
   landt het blok eronder. */
#labresultaten { scroll-margin-top: 104px; }

/* Het labrapport onder de productnaam. Een rustig label en geen knop met
   een vol vlak: het mag de bestelknop niet beconcurreren, maar het moet wel
   het eerste zijn wat je na de naam ziet. Het accent zit in het icoon en de
   actie, zodat het als klikbaar leest zonder te schreeuwen. */
.labknop {
  align-self: flex-start;
  display: inline-flex; align-items: center; flex-wrap: wrap;
  column-gap: var(--r2); row-gap: 2px;
  min-height: 36px; padding: var(--r1) var(--r4) var(--r1) var(--r3);
  background: var(--accent-vlak); border: 1px solid var(--accent-rand);
  border-radius: 999px;
  font-size: 13.5px; line-height: 1.3; color: var(--inkt); text-decoration: none;
  transition: border-color var(--overgang), background var(--overgang);
}
/* Geen onderstreping bij hover, zoals elke andere link die wel krijgt: dit
   is een label, en de rand die donkerder wordt zegt al dat het te klikken is. */
.labknop:hover {
  color: var(--inkt); text-decoration: none;
  border-color: var(--accent);
}
.labknop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.labknop__ikoon { flex: 0 0 auto; color: var(--accent); }
.labknop strong { font-weight: 700; }
.labknop__lab { color: var(--inkt-zacht); }
.labknop__lab::before { content: "·"; margin-right: var(--r2); color: var(--inkt-stil); }
.labknop__actie { color: var(--accent); font-weight: 600; }
.labknop__actie::before { content: "·"; margin-right: var(--r2); color: var(--inkt-stil); font-weight: 400; }
/* Op een smal scherm valt de labnaam weg: "Labgetest" plus wat er gebeurt
   als je tikt, op één regel. */
@media (max-width: 420px) {
  .labknop__lab { display: none; }
}
/* Met een duim iets hoger: 40 is de grens die `bin/opmaakcontrole.py` ook
   aanhoudt. Met een muis mag hij compacter. */
@media (max-width: 500px) {
  .labknop { min-height: 40px; }
}
.labblok__kop h2 {
  margin: 0; font-family: var(--display); font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--inkt);
}

.labrapporten { list-style: none; margin: 0; padding: 0;
                display: flex; flex-direction: column; gap: var(--r3); }
.labrapport {
  display: flex; align-items: center; gap: var(--r5); flex-wrap: wrap;
  padding: var(--r4) var(--r5);
  background: var(--vlak); border: var(--lijn); border-radius: var(--radius);
}
.labrapport__wat { flex: 1 1 140px; display: flex; flex-direction: column; gap: 2px; }
.labrapport__wat strong { font-size: 15px; }
.labrapport__lab { font-size: 13px; color: var(--inkt-stil); }
.labrapport__cijfers { display: flex; gap: var(--r6); margin: 0; }
.labrapport__cijfers dt {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--inkt-stil);
}
.labrapport__cijfers dd { margin: 0; font-family: var(--mono); font-size: 14.5px; }
.labrapport__zuiver { color: var(--accent); font-weight: 600; }
/* De bestemming onder het opschrift van de knop, niet ernaast: naast elkaar
   wordt de knop op een telefoon twee regels breed en valt hij uit de rij. */
.labrapport .knop { flex-direction: column; gap: 1px; line-height: 1.25; }
.labrapport__waar { font-size: 11.5px; font-weight: 400; opacity: 0.75; }
@media (max-width: 560px) {
  .labrapport { align-items: flex-start; }
  .labrapport .knop { width: 100%; }
}

.veldfout { font-size: 13px; color: var(--fout); }
/* De nieuwsbrief onderaan de homepage. Subtiel: geen kleurvlak en geen
   kader dat om aandacht schreeuwt, maar een rustig vlak met één regel en één
   veld. Wie hem niet wil, scrolt eroverheen zonder gestoord te zijn. */
.nieuwsbrief { padding-top: 0; }
.nieuwsbriefvak {
  display: flex; flex-direction: column; align-items: center; gap: var(--r3);
  padding: var(--r7) var(--r5); text-align: center;
  background: var(--vlak-dof); border: var(--lijn); border-radius: var(--radius);
}
.nieuwsbrief__kop {
  margin: 0; max-width: 34rem;
  font-family: var(--display); font-size: 20px; font-weight: 700;
  letter-spacing: -0.014em; line-height: 1.3; color: var(--inkt);
}
.nieuwsbrief__klein { margin: 0; font-size: 14px; color: var(--inkt-stil); }
.nieuwsbriefvorm {
  display: flex; gap: var(--r3); flex-wrap: wrap; justify-content: center;
  width: 100%; max-width: 30rem; margin-top: var(--r2);
}
.nieuwsbriefvorm input {
  flex: 1 1 220px; min-height: 48px; padding: var(--r3) var(--r4);
  font-family: var(--tekst); font-size: 15px; color: var(--inkt);
  background: var(--grond); border: var(--lijn-sterk); border-radius: var(--radius);
}
.nieuwsbriefvorm input:focus { border-color: var(--accent); }
.nieuwsbriefvorm .knop { flex: 0 0 auto; }
.nieuwsbrief__code {
  margin: 0; font-family: var(--mono);
  font-size: 26px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent);
}

/* Het blok met de afteller en de bezorgschatting, op de productpagina onder
   de bestelknop. De drie stappen staan als één balk naast elkaar: het is één
   verhaal van besteld tot geleverd, en drie losse regels lezen als drie
   losse mededelingen. */
.levertijd {
  display: flex; flex-direction: column; align-items: center; gap: var(--r3);
  margin-top: var(--r5); padding: var(--r5);
  background: var(--grond); border: var(--lijn); border-radius: var(--radius);
  text-align: center;
}
.levertijd__kop {
  margin: 0; font-family: var(--display); font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--inkt);
}
.levertijd__kop b { color: var(--accent); }
.levertijd__klok { margin: 0; font-size: 14px; color: var(--inkt-stil); }

.levertijdstap {
  display: grid; grid-template-columns: repeat(3, 1fr);
  width: 100%; margin: var(--r3) 0 0; padding: 0; list-style: none;
}
.levertijdstap > li {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: var(--r1); color: var(--inkt-stil);
}
.levertijdstap__teken { color: var(--rand); line-height: 0; }
.levertijdstap--klaar .levertijdstap__teken { color: var(--accent); }
.levertijdstap__naam { font-size: 13.5px; font-weight: 600; color: var(--inkt); }
.levertijdstap__dag { font-size: 13px; }
/* De streep tussen de stappen. Achter het teken langs en niet eronder: een
   lijn die onder de tekst doorloopt, leest als een onderstreping. */
.levertijdstap > li::before {
  content: ""; position: absolute; top: 11px; left: -50%; width: 100%;
  height: 2px; background: var(--vlak-dof);
}
.levertijdstap > li:first-child::before { display: none; }
.levertijdstap--klaar::before { background: var(--accent); }

.levertijd__land { display: flex; gap: var(--r2); align-items: center; }
.levertijd__land select {
  min-height: 40px; padding: var(--r2) var(--r3);
  font-family: var(--tekst); font-size: 14px; color: var(--inkt);
  background: var(--grond); border: var(--lijn-sterk); border-radius: var(--radius);
}
/* Vijfde keer: `.knop` zet een eigen `display` en die wint het van [hidden]. */
.levertijd__knop[hidden] { display: none; }
.levertijd__klein { margin: 0; font-size: 12.5px; color: var(--inkt-stil); }

/* Eén extrablok per stuk, zodra je er meer dan één bestelt. De blokken staan
   onder elkaar met een lijn ertussen: het zijn drie keer dezelfde keuzes, en
   zonder scheiding leest dat als één lange rij kaarten. */
.extras__stuk + .extras__stuk {
  margin-top: var(--r4); padding-top: var(--r4); border-top: var(--lijn);
}
.extras__stukkop {
  margin: 0 0 var(--r3); font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--inkt-stil);
}
/* `display` moet hier staan, anders wint het van de browserregel achter
   [hidden] en blijft "Stuk 1" staan bij een bestelling van één. Zesde keer. */
.extras__stukkop[hidden] { display: none; }
.extras__uitleg { margin: 0 0 var(--r4); font-size: 13px; color: var(--inkt-stil); }
.extras__uitleg[hidden] { display: none; }

.veldhint { font-size: 13px; color: var(--inkt-stil); }

/* Het vinkje boven de bestelknop. Het hokje naast de tekst en niet erboven:
   een vinkje dat niet naast zijn eigen zin staat, wordt aangeklikt zonder dat
   iemand weet waarvoor. */
.bevestiging { margin-bottom: var(--r4); }
.bevestiging__regel {
  display: flex; align-items: flex-start; gap: var(--r3); cursor: pointer;
  font-size: 14px; line-height: 1.5; color: var(--inkt);
}
.bevestiging__regel input {
  flex: 0 0 auto; width: 18px; height: 18px; min-height: 0; margin-top: 2px;
  accent-color: var(--accent);
}
.bevestiging__regel small {
  display: block; font-size: 13px; color: var(--inkt-stil); margin-top: 2px;
}
.bevestiging.veld--fout .bevestiging__regel { color: var(--fout); }
.veldrij { display: flex; gap: var(--r4); flex-wrap: wrap; }
.veldrij > .veld--kort { flex: 0 1 120px; }

/* Het afhaalpuntveld komt en gaat met de gekozen verzendwijze. `display` moet
   hier staan: een eigen display-waarde wint het van de browserregel achter
   [hidden], en dan blijft een verborgen blok gewoon staan. Dat is in deze
   winkel al vier keer misgegaan. */
.afhaalpunt { display: grid; gap: var(--r3); margin-top: var(--r4); }
.afhaalpunt[hidden] { display: none; }

/* PostNL-punten uit MyParcel. Een lijst om uit te kiezen boven het tekstvak;
   het tekstvak blijft, voor wie zonder script of zonder resultaat komt. */
.puntzoeker { display: grid; gap: var(--r2); }
.puntzoeker[hidden] { display: none; }
.puntzoeker__knop { justify-self: start; }
.puntzoeker .veldhint:empty { display: none; }
.puntzoeker__lijst {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r2);
}
.puntkeuze {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--r3);
  align-items: start; padding: var(--r3); cursor: pointer;
  border: 1px solid var(--rand); border-radius: 8px; background: var(--vlak);
}
.puntkeuze:has(input:checked) { border-color: var(--accent); background: var(--accent-vlak); }
.puntkeuze input { grid-row: span 2; margin-top: 3px; accent-color: var(--accent); }
.puntkeuze__naam { font-weight: 600; color: var(--inkt); min-width: 0; overflow-wrap: anywhere; }
.puntkeuze__adres { font-size: 0.875rem; color: var(--inkt-stil); min-width: 0; overflow-wrap: anywhere; }
/* Vierde keer dat dit misgaat: `.knop` zet een eigen `display`, en die wint
   het van de browserregel achter [hidden]. Zonder deze regel blijft de knop
   staan nadat het script hem heeft verborgen. */
.herbereken { align-self: start; font-size: 13.5px; }
.herbereken[hidden] { display: none; }

.keuze {
  position: relative; display: flex; align-items: center; gap: var(--r3);
  padding: var(--r4); cursor: pointer;
  border: var(--lijn-sterk); border-radius: var(--radius); background: var(--grond);
  transition: border-color var(--overgang), background var(--overgang), box-shadow var(--overgang);
}
.keuze:hover { border-color: var(--inkt-stil); }
.keuze:has(input:checked) {
  border-color: var(--accent); background: var(--accent-vlak);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.keuze:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.keuze__naam { flex-grow: 1; font-size: 15px; }
.keuze__prijs { font-family: var(--mono); font-size: 15px; }

.melding--fout {
  padding: var(--r4) var(--r5); margin-bottom: var(--r6);
  border: 1px solid var(--fout-rand); border-radius: var(--radius);
  background: var(--fout-vlak); color: var(--fout); font-size: 14.5px;
}

.instructies {
  margin: 0; padding: var(--r5); border-radius: var(--radius);
  background: var(--vlak-dof); border: var(--lijn);
  font-family: var(--mono); font-size: 13.5px; line-height: 1.7;
  color: var(--inkt); white-space: pre-wrap; overflow-x: auto;
}

.leeg { padding-block: var(--r9); color: var(--inkt-stil); }
.melding { padding-block: var(--r9) var(--r8); display: flex; flex-direction: column; gap: var(--r5); align-items: flex-start; }

/* ====================================================================== */
/* Voet                                                                   */
/* ====================================================================== */

/* De voet is donker. In plaats van elke regel hieronder een eigen kleur te
   geven, worden de variabelen binnen dit blok opnieuw gezet -- de opmaak
   eronder blijft dan precies hetzelfde. */
.voet {
  --inkt:       var(--donker-inkt);
  --inkt-zacht: var(--donker-zacht);
  --inkt-stil:  var(--donker-stil);
  --rand:       var(--donker-rand);
  --vlak:       var(--donker);
  margin-top: auto; background: var(--donker); color: var(--donker-zacht);
  padding-block: var(--r9) var(--r7);
}
.voet .merk { color: var(--donker-inkt); }
.voet .merk__woord { color: var(--donker-inkt); font-size: 21px; }
.voetkolommen { display: flex; gap: clamp(var(--r7), 5vw, var(--r10)); flex-wrap: wrap; }
.voetkolom { display: flex; flex-direction: column; gap: var(--r3); }
.voetkolom strong {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--donker-inkt);
}
.voet a { color: var(--donker-zacht); font-size: 14px; }
.voet a:hover { color: var(--donker-inkt); }
.voet__over { flex: 1 1 260px; max-width: 320px; display: flex; flex-direction: column; gap: var(--r4); }
.voet__over p { font-size: 14px; color: var(--donker-stil); line-height: 1.65; }
.voetmelding {
  margin-top: var(--r8); max-width: 72rem;
  display: flex; flex-direction: column; gap: var(--r3);
}
.voetmelding p {
  margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--donker-stil);
}
.voetregel {
  margin-top: var(--r9); padding-top: var(--r6); border-top: 1px solid var(--donker-rand);
  display: flex; justify-content: space-between; gap: var(--r4); flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; color: var(--donker-stil);
}

/* ====================================================================== */
/* Smallere schermen                                                      */
/* ====================================================================== */

@media (max-width: 1000px) {
  /* Twee gelijke zijden, het logo in het midden. De hamburger en de
     winkelwagen mogen dan verschillend breed zijn zonder dat het logo
     meeschuift. */
  .kop .omhulsel {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--r3);
  }
  .kop .menuknop { grid-column: 1; grid-row: 1; justify-self: start; }
  .kop .merk { grid-column: 2; grid-row: 1; justify-self: center; min-width: 0; }
  .kop .kopknoppen { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }
  .kop .hoofdmenu { grid-column: 1 / -1; grid-row: 2; }
  .afrekenlayout__zij { position: static; }

  /* Zonder script: het menu onder de kop, onder elkaar. Geen horizontale
     schuifbalk, want die zie je niet en je mist de helft van de ingangen. */
  .hoofdmenu {
    order: 3; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    border-top: var(--lijn); padding-top: var(--r2);
    overflow: visible;
  }
  .hoofdmenu .menupunt { flex-wrap: wrap; }
  .hoofdmenu .uitklap {
    position: static; box-shadow: none; border: 0; min-width: 0; width: 100%;
    padding-left: var(--r4);
  }
  .hoofdmenu a { white-space: normal; min-height: 48px; }
  .zoekhoek { display: none; }
  .menu-zoek {
    display: flex; margin-top: var(--r3); padding-top: var(--r2);
    border-top: var(--lijn);
  }
  .taalmenu { margin-left: 0; width: 100%; }
  .taalmenu summary {
    width: 100%; height: auto; min-height: 52px;
    border: 0; border-radius: 0; border-top: var(--lijn);
    padding: var(--r3) 0; justify-content: flex-start;
  }
  .taalmenu__lijst {
    position: static; box-shadow: none; border: 0; min-width: 0;
    padding: 0 0 var(--r2) var(--r4);
  }

  html.js .menuknop { display: inline-flex; }
  html.js .hoofdmenu {
    display: none;
    position: fixed; z-index: 30;
    top: var(--menu-top, 80px); right: 0; bottom: 0; left: 0;
    width: auto; margin: 0;
    padding: var(--r3) var(--kantlijn) var(--r8);
    background: var(--vlak);
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-top: var(--lijn);
    gap: 0;
  }
  html.js .hoofdmenu.is-open { display: flex; }
  html.js .hoofdmenu.is-open > .menupunt > a,
  html.js .hoofdmenu.is-open > a {
    font-size: 18px; min-height: 52px; padding-block: var(--r3);
  }
  html.js .hoofdmenu.is-open a::after { content: none; }
  html.js .hoofdmenu.is-open .uitklap {
    position: static; box-shadow: none; border: 0; background: transparent;
    min-width: 0; width: 100%; padding: 0 0 var(--r2) var(--r4);
  }
  html.js .hoofdmenu.is-open .uitklap a { min-height: 48px; font-size: 16px; }
  html.menu-open { overflow: hidden; }
  html.menu-open .kop { z-index: 40; }
  html.menu-open .zwevend { display: none; }
}

@media (max-width: 900px) {
  .kenmerken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kenmerk:nth-child(2) { border-right: 0; }
  .kenmerk:nth-child(1), .kenmerk:nth-child(2) { border-bottom: var(--lijn); }
  .banner__binnen { flex-direction: column; align-items: stretch; gap: var(--r8); }
  /* In een kolom is flex-basis een HOOGTE, geen breedte. Blijven de waarden
     van het brede scherm staan, dan krijgt de bannerinhoud 400 en 480 pixels
     hoogte toegewezen en staat er een half scherm leegte onder de plank. */
  .banner__tekst, .banner__schap { flex: 0 0 auto; }
}

@media (max-width: 560px) {
  /* Vijf vials naast elkaar worden op een telefoon vijf streepjes. De twee
     buitenste eruit; drie blijven herkenbaar. */
  .banner__vial--achter { display: none; }
}

.knop__telling {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding-inline: 5px;
  border-radius: 10px; background: var(--accent); color: var(--accent-op);
  font-family: var(--mono); font-size: 11.5px; line-height: 1;
}

@media (max-width: 620px) {
  /* De kop moet in twee rijen passen: logo met knoppen, menu eronder. Met het
     woord "Winkelwagen" erbij past dat niet op 390 pixels en valt de kop over
     drie rijen uiteen. Het pictogram en het aantal zeggen hetzelfde; het
     aria-label houdt hem voorleesbaar. */
  .knop__label { display: none; }
  .knop--wagen { padding-inline: var(--r3); }
  /* Twee knoppen naast elkaar passen hier niet; onder elkaar horen ze dan
     even breed te zijn, anders oogt het als een fout. */
  .knoppenrij .knop { width: 100%; }
  .kenmerken { grid-template-columns: 1fr; }
  .kenmerk { border-right: 0; border-bottom: var(--lijn); }
  .rooster { grid-template-columns: 1fr; }
  .bestelrij .knop, .kaart__onder .knop, .kaart__onder form { width: 100%; }
  .kaart__onder { justify-content: flex-start; }
  .specs th { width: 45%; }
  .disclaimerbalk { font-size: 11.5px; }
  .merk__woord { font-size: 20px; }
  .wagenregel { gap: var(--r3); }
  .wagenregel__prijs { align-items: flex-start; min-width: 0; }
  .voetregel { flex-direction: column; gap: var(--r2); }
}

/* ====================================================================== */
/* Afdrukken -- een bestelbevestiging wordt bewaard, niet weggeklikt      */
/* ====================================================================== */

@media print {
  .disclaimerbalk, .hoofdmenu, .menuknop, .menuscherm, .kopknoppen, .voetkolommen, .knop, .overslaan { display: none; }
  .kop { position: static; border-bottom: 1px solid #000; }
  .voet { background: none; color: #000; padding-block: var(--r4); }
  .voetregel { margin-top: 0; }
  body { background: #fff; font-size: 12pt; }
  .afrekenlayout { display: block; }
  .afrekenlayout__zij { border: 1px solid #000; page-break-inside: avoid; }
  .blok { border: 1px solid #000; page-break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}

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

/* ====================================================================== */
/* Losse koppen en tekstblokken                                           */
/* ====================================================================== */

.paginakop { font-size: clamp(30px, 4vw, 40px); margin-bottom: var(--r7); }
.zijkop { font-size: 19px; }
.blokkop { font-size: 19px; margin-bottom: var(--r4); }
.sectiestreep {
  font-size: clamp(22px, 2.6vw, 26px);
  padding-bottom: var(--r5); margin-bottom: var(--r6);
  border-bottom: var(--lijn);
}
.lopende-tekst { color: var(--inkt-zacht); line-height: 1.72; max-width: 62ch; }
.adres { color: var(--inkt-zacht); line-height: 1.72; }
.telling { font-family: var(--mono); font-size: 13.5px; color: var(--inkt-stil); }

/* ====================================================================== */
/* Rubrieken op de cataloguspagina                                        */
/* ====================================================================== */

/* Een rij brede regels en geen rooster van kaartjes: een rubriek is een
   keuze, geen product. Zo blijft de lange naam op één regel leesbaar en
   staat het aantal er rustig achter. */
.rubrieken { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r3); }

.rubriek {
  display: flex; align-items: center; gap: var(--r4);
  padding: var(--r5) var(--r6);
  border: var(--lijn-sterk); border-radius: var(--radius);
  background: var(--vlak); color: var(--inkt);
  transition: border-color var(--overgang), background var(--overgang);
}
.rubriek:hover {
  border-color: var(--accent); background: var(--accent-vlak);
  text-decoration: none;
}
.rubriek__naam { font-weight: 600; font-size: clamp(16px, 1.6vw, 18px); }
.rubriek__aantal {
  margin-left: auto; color: var(--inkt-stil); font-size: 14px; white-space: nowrap;
}
.rubriek__pijl { color: var(--inkt-stil); flex: 0 0 auto; }
/* De restbak hoort er wel te staan, maar hoeft niet mee te dingen met de
   echte rubrieken. */
.rubriek--rest { border-style: dashed; }
.rubriek--rest .rubriek__naam { font-weight: 500; color: var(--inkt-zacht); }
.rubriek:hover .rubriek__pijl { color: var(--accent); }

@media (max-width: 34rem) {
  .rubriek { padding: var(--r4) var(--r4); gap: var(--r3); }
  .rubriek__aantal { font-size: 13px; }
}

/* ====================================================================== */
/* Filterrij op de catalogus                                              */
/* ====================================================================== */

.filterrij {
  display: flex; gap: var(--r2); flex-wrap: wrap;
  margin-bottom: var(--r7);
}
.filterrij a {
  padding: var(--r2) var(--r4); border-radius: var(--radius);
  border: var(--lijn-sterk); background: var(--vlak);
  color: var(--inkt); font-size: 14px; line-height: 1.4;
  transition: border-color var(--overgang), background var(--overgang), color var(--overgang);
}
.filterrij a:hover { border-color: var(--inkt); text-decoration: none; }
.filterrij a[aria-current="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-op);
}

/* ====================================================================== */
/* "Zo werkt het" op de startpagina                                       */
/* ====================================================================== */

/* Vier blokken, en dus vier kolommen -- niet `auto-fit`. Met een ondergrens
   van 260px paste er op 1240px precies drie naast elkaar, en dan staat het
   vierde blok alleen op een tweede rij. Drie plus een leest als een fout.
   Op een tablet twee bij twee, op een telefoon onder elkaar. */
.stappen {
  display: grid; gap: clamp(var(--r6), 3vw, var(--r8));
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1080px) {
  .stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .stappen { grid-template-columns: 1fr; }
}
.stap { display: flex; flex-direction: column; gap: var(--r3); }
.stap svg { flex-shrink: 0; }
.stap h3 { font-size: 18px; }
.stap p { font-size: 15px; line-height: 1.66; color: var(--inkt-zacht); max-width: 42ch; }
.stap h3 { line-height: 1.3; }

/* ====================================================================== */
/* Betaalmerken in de voettekst                                           */
/* ====================================================================== */

.betaalmerken { display: flex; align-items: center; gap: var(--r2); flex-wrap: wrap; }
.betaalmerken img {
  height: 30px; width: auto; display: block;
  border-radius: var(--radius-s); background: #FFFFFF;
}

/* ====================================================================== */
/* Tekstpagina's: voorwaarden, privacy, disclaimer                        */
/* ====================================================================== */

/* Eén kolom van hooguit 70 tekens. Langere regels laat het oog de weg terug
   niet meer vinden aan het begin van de volgende regel -- en juist deze
   pagina's worden al met tegenzin gelezen. */
.tekstpagina {
  max-width: 70ch; padding-block: var(--r5) var(--r10);
  display: flex; flex-direction: column; gap: var(--r6);
}
.tekstpagina h1 { font-size: clamp(30px, 4vw, 40px); }
.tekstpagina h2 {
  font-size: clamp(19px, 2.2vw, 22px); margin-top: var(--r7);
  padding-bottom: var(--r3); border-bottom: var(--lijn);
}
.tekstpagina h3 { font-size: 17px; margin-top: var(--r4); }
.tekstpagina p, .tekstpagina li { color: var(--inkt-zacht); line-height: 1.72; }
.tekstpagina ul, .tekstpagina ol { margin: 0; padding-left: var(--r5); display: flex; flex-direction: column; gap: var(--r2); }
.tekstpagina strong { color: var(--inkt); font-weight: 600; }
.tekstpagina .bijgewerkt { font-family: var(--mono); font-size: 13px; color: var(--inkt-stil); }
.tekstpagina .invullen {
  font-family: var(--mono); font-size: 0.92em;
  background: var(--accent-vlak); border: 1px solid var(--accent-rand);
  border-radius: var(--radius-s); padding: 1px 5px; color: var(--accent);
}
.tekstpagina .kader {
  border: var(--lijn); border-radius: var(--radius); background: var(--vlak);
  padding: var(--r5); display: flex; flex-direction: column; gap: var(--r3);
}
.tekstpagina dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--r2) var(--r5); }
.tekstpagina dt { color: var(--inkt-stil); font-size: 14.5px; }
.tekstpagina dd { margin: 0; color: var(--inkt-zacht); font-size: 14.5px; }

@media (max-width: 560px) {
  .tekstpagina dl { grid-template-columns: 1fr; gap: 0 0; }
  .tekstpagina dt { margin-top: var(--r3); }
}

/* De retourmelding bij het afrekenen. Klein, maar niet weggestopt: dit is de
   informatie die de wettelijke uitzondering overeind houdt. */
.kleinevoorwaarde {
  font-size: 12.5px; line-height: 1.6; color: var(--inkt-stil);
  padding-top: var(--r2); border-top: var(--lijn);
}

/* ====================================================================== */
/* Zwevende knoppen: winkelwagen rechtsonder, chat linksonder             */
/* ====================================================================== */

.zwevend {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: var(--r5) var(--r5) max(var(--r5), env(safe-area-inset-bottom));
  pointer-events: none;   /* alleen de knoppen zelf vangen kliks op */
}
.zwevend__hoek { position: relative; pointer-events: auto; }

.bel {
  width: 56px; height: 56px; border-radius: 50%; border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
  box-shadow: 0 2px 6px rgba(16,23,28,.10), 0 8px 24px rgba(16,23,28,.14);
  transition: transform var(--overgang), background var(--overgang);
}
.bel:hover { transform: translateY(-2px); }
.bel:active { transform: translateY(0); }
.bel--wagen { background: var(--accent); color: var(--accent-op); }
.bel--wagen:hover { background: var(--accent-licht); }
.bel--chat { background: var(--vlak); color: var(--inkt); border: var(--lijn-sterk); }
.bel--chat:hover { background: var(--vlak-dof); }

.bel__telling {
  position: absolute; top: -2px; right: -2px;
  min-width: 22px; height: 22px; padding-inline: 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px; background: var(--donker); color: var(--donker-inkt);
  font-family: var(--mono); font-size: 11.5px; line-height: 1;
  border: 2px solid var(--grond);
}

/* -------------------------------------------------------------- panelen */

.paneel {
  position: absolute; bottom: calc(56px + var(--r3));
  width: min(360px, calc(100vw - var(--r6) * 2));
  background: var(--vlak); border: var(--lijn); border-radius: var(--radius-l);
  box-shadow: 0 2px 6px rgba(16,23,28,.08), 0 16px 40px rgba(16,23,28,.16);
  display: flex; flex-direction: column; overflow: hidden;
}
.paneel--rechts { right: 0; }
.paneel--links  { left: 0; }
.paneel[hidden] { display: none; }

.paneel__kop {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r4); padding: var(--r4) var(--r5);
  border-bottom: var(--lijn);
}
.paneel__kop strong { font-family: var(--display); font-size: 16px; }

/* De openingstijden van de chat. Subtiel: één regel onder de kop die zegt of
   er nu iemand meeleest, en onderaan het paneel de volledige tijden in klein
   grijs. Geen banner en geen waarschuwing -- buiten kantooruren kun je nog
   steeds een vraag achterlaten, hij wordt alleen later gelezen. */
.chatkop { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chatstand {
  font-size: 12px; color: var(--inkt-stil); display: flex;
  align-items: baseline; gap: var(--r2);
}
/* Het stipje zit vóór de tekst en niet in een eigen element: één regel css
   is minder dan een extra span in elk sjabloon dat dit ooit hergebruikt. */
.chatstand::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto; align-self: center;
}
.chatstand--open { color: #17635A; }
.chatstand--dicht { color: var(--inkt-stil); }

.chaturen {
  margin: 0; padding: var(--r3) var(--r5) var(--r4);
  border-top: var(--lijn); background: var(--grond);
  display: flex; flex-wrap: wrap; gap: 2px var(--r3);
  font-size: 11.5px; color: var(--inkt-stil); line-height: 1.5;
}
.chaturen__kop {
  width: 100%; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; font-size: 10px; color: var(--inkt-stil);
}
.paneel__sluit {
  width: 32px; height: 32px; border: 0; background: transparent;
  border-radius: var(--radius-s); cursor: pointer; color: var(--inkt-stil);
  display: flex; align-items: center; justify-content: center;
}
.paneel__sluit:hover { background: var(--vlak-dof); color: var(--inkt); }

.paneel__lijf {
  padding: var(--r5); display: flex; flex-direction: column; gap: var(--r4);
  max-height: min(52vh, 420px); overflow-y: auto;
}
.paneel__lijf p { font-size: 14.5px; line-height: 1.66; color: var(--inkt-zacht); }
.paneel__leeg { font-size: 14.5px; color: var(--inkt-stil); }
.paneel__voet {
  padding: var(--r4) var(--r5) var(--r5);
  border-top: var(--lijn); display: flex; flex-direction: column;
  gap: var(--r3); align-items: center;
}

.paneelregels {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--r3);
}
.paneelregels li { display: flex; justify-content: space-between; gap: var(--r4); font-size: 14px; }
.paneelregels li span:last-child { font-family: var(--mono); white-space: nowrap; }
.paneelregels a { color: var(--inkt); }
.paneelregels a:hover { color: var(--accent); }
.paneelregels small { display: block; color: var(--inkt-stil); font-size: 12.5px; }

.upsell {
  border-top: var(--lijn); padding-top: var(--r4);
  display: flex; flex-direction: column; gap: var(--r3);
}
.upsell__rij { display: flex; align-items: center; gap: var(--r3); }
/* De duimnagel krijgt een vaste maat en krimpt niet mee: een afbeelding die
   per productnaam een andere breedte heeft, laat de hele rij verspringen. */
.upsell__beeld {
  flex: 0 0 auto; display: block; width: 40px; height: 64px;
  border: var(--lijn); border-radius: var(--radius-s);
  background: var(--vlak); overflow: hidden;
}
.upsell__beeld svg { display: block; width: 100%; height: 100%; }
.upsell__naam { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.upsell__naam a { color: var(--inkt); font-weight: 500; }
.upsell__naam a:hover { color: var(--accent); }
.upsell__naam small { display: block; font-family: var(--mono); font-size: 12.5px; color: var(--inkt-stil); }

@media (max-width: 620px) {
  .zwevend { padding: var(--r4) var(--r4) max(var(--r4), env(safe-area-inset-bottom)); }
  .bel { width: 52px; height: 52px; }
  .paneel { bottom: calc(52px + var(--r2)); width: calc(100vw - var(--r4) * 2); }
  /* Op een telefoon past een paneel van 360 px niet naast de rand waar het
     aan hangt; dan mag het over de volle breedte. */
  .paneel--links  { left: 0; right: auto; }
  .paneel--rechts { right: 0; left: auto; }
}

@media print { .zwevend { display: none; } }

/* De productafbeelding staat als SVG in de pagina, zodat hij de kleuren en
   letters van het thema overneemt. Hij vult zijn vlak en houdt zijn
   verhouding. */
/* De productafbeelding vult zijn vlak van rand tot rand, zoals een foto dat
   zou doen. Geen padding: de achtergrond van de tekening ís de achtergrond. */
.kaart__beeld, .product__vlak { padding: 0; overflow: hidden; }
/* Een geüploade foto vult zijn vak net zo als de tekening dat doet. Zonder
   deze regel houdt hij zijn eigen verhouding en staan er lichte banden boven
   en onder -- en dan verspringt elke kaart met een andere foto. */
.kaart__beeld img, .product__vlak img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.kaart__beeld svg, .product__vlak svg { width: 100%; height: 100%; display: block; }



/* ------------------------------------------------- bankgegevens (bedankt) */

.blokinleiding { color: var(--inkt-stil); margin: 0 0 var(--r5); max-width: 52ch; }
.blokvoet { color: var(--inkt-stil); font-size: 14px; margin: var(--r5) 0 0; }

.bankgegevens { margin: 0; display: flex; flex-direction: column; gap: var(--r3); }
.bankgegevens__rij {
  display: grid; grid-template-columns: 11rem 1fr; gap: var(--r4);
  align-items: baseline; padding-bottom: var(--r3); border-bottom: var(--lijn);
}
.bankgegevens__rij:last-child { border-bottom: 0; padding-bottom: 0; }
.bankgegevens dt { color: var(--inkt-stil); font-size: 14px; }
.bankgegevens dd { margin: 0; font-family: var(--mono); font-weight: 500; }
/* IBAN en kenmerk worden overgetypt in een bankomgeving. Groter, en met één
   klik in zijn geheel te selecteren -- half een IBAN kopiëren is een
   mislukte overboeking. */
.bankgegevens__groot { font-size: 18px; letter-spacing: 0.02em; user-select: all; }

@media (max-width: 560px) {
  .bankgegevens__rij { grid-template-columns: 1fr; gap: var(--r1); }
}

/* ====================================================================== */
/* Staffel voor de bundelkorting, op de productpagina                     */
/* ====================================================================== */

/* Voor de bestelknop en niet erna: een korting die je pas ziet nadat je hebt
   besteld, verkoopt niets. */
.staffel {
  border: 1px dashed var(--accent-rand); border-radius: var(--radius);
  background: var(--accent-vlak);
  padding: var(--r4) var(--r5); margin-bottom: var(--r5);
}
.staffel__kop {
  display: block; font-family: var(--display); font-size: 14px;
  color: var(--accent); margin-bottom: var(--r3);
}
.staffel__treden {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--r2);
}
.staffel__treden li { display: flex; }
.staffel__treden button {
  display: flex; align-items: baseline; gap: var(--r2);
  background: var(--vlak); border: 1px solid var(--accent-rand);
  border-radius: var(--radius-s); padding: var(--r2) var(--r3);
  font: inherit; font-size: 13.5px; white-space: nowrap; color: inherit;
  cursor: default;
}
/* Pas klikbaar oogen als de code draait die er iets mee doet. */
.staffel__treden--klikbaar button {
  cursor: pointer;
  transition: border-color var(--overgang), background var(--overgang);
}
/* Zweven blijft licht: de tekst moet leesbaar blijven. */
.staffel__treden--klikbaar button:hover { border-color: var(--accent); }

/* De trede die je met dit aantal haalt. Vol vlak, witte tekst -- dit is de
   enige plek waar het oog heen mag. */
.staffel__treden button.aan {
  background: var(--accent); border-color: var(--accent);
}
.staffel__treden button.aan b,
.staffel__treden button.aan span { color: var(--accent-op); }
.staffel__treden b { font-variant-numeric: tabular-nums; }
.staffel__treden span { color: var(--accent); font-weight: 600; }
.staffel__uitleg {
  margin: var(--r3) 0 0; font-size: 12.5px; color: var(--inkt-stil);
}

/* Wat je bespaart, in één getal. Twee kortingsregels optellen doet niemand. */
.bespaard {
  margin: var(--r3) 0 0; padding: var(--r2) var(--r3);
  background: var(--accent-vlak); border: 1px solid var(--accent-rand);
  border-radius: var(--radius-s);
  font-size: 13.5px; color: var(--accent); text-align: center;
}
.bespaard strong { font-variant-numeric: tabular-nums; }

/* ====================================================================== */
/* Duimnagels in de winkelwagen                                           */
/* ====================================================================== */

/* Een vast vakje, zodat regels met en zonder foto even hoog blijven en de
   lijst niet gaat hobbelen. */
.wagenregel__beeld, .paneelregels__beeld {
  flex: 0 0 auto; display: block; overflow: hidden;
  border: var(--lijn); border-radius: var(--radius-s); background: var(--vlak-dof);
}
.wagenregel__beeld { width: 64px; height: 64px; }
.paneelregels__beeld { width: 44px; height: 44px; }
.wagenregel__beeld img, .wagenregel__beeld svg,
.paneelregels__beeld img, .paneelregels__beeld svg {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.paneelregels li { display: flex; align-items: center; gap: var(--r3); }
.paneelregels li > span:nth-of-type(1) { flex: 1 1 auto; min-width: 0; }
.paneelregels__prijs { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 34rem) {
  .wagenregel__beeld { width: 48px; height: 48px; }
}

/* ====================================================================== */
/* Extra's bij een product                                                */
/* ====================================================================== */

.extras { border: 0; padding: 0; margin: 0 0 var(--r5); }
.extras legend {
  padding: 0 0 var(--r3); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--inkt-stil);
}
.extras__rij {
  display: grid; gap: var(--r3);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* De hele kaart is het vinkje. Een klein vierkantje aanwijzen is op een
   telefoon een precisieklus; een kaart van 140 pixels niet. */
.extrakaart {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: var(--r2); padding: var(--r5) var(--r3) var(--r4);
  border: 1.5px solid var(--rand-sterk); border-radius: var(--radius-l);
  background: var(--vlak); cursor: pointer; text-align: center;
  transition: border-color var(--overgang), background var(--overgang);
}
/* Een kaart die bij deze keuze niet hoort, gaat echt weg: `display: flex`
   wint anders van de browserregel voor `hidden`. Dezelfde val als bij de
   cijfers van de calculator. */
.extrakaart[hidden] { display: none; }
.extrakaart:hover { border-color: var(--accent-rand); }
.extrakaart input { position: absolute; opacity: 0; width: 0; height: 0; }

.extrakaart__vink {
  position: absolute; top: var(--r3); left: var(--r3);
  width: 22px; height: 22px; border-radius: var(--radius-s);
  border: 1.5px solid var(--rand-sterk); background: var(--vlak);
  display: flex; align-items: center; justify-content: center;
  color: transparent; transition: all var(--overgang);
}
.extrakaart:has(input:checked) { border-color: var(--accent); background: var(--accent-vlak); }
.extrakaart:has(input:checked) .extrakaart__vink {
  background: var(--accent); border-color: var(--accent); color: var(--accent-op);
}
/* Wie met het toetsenbord werkt, moet ook zien waar hij staat. */
.extrakaart:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.extrakaart__beeld { display: block; line-height: 0; }
.extrakaart__naam { font-weight: 600; font-size: 14px; line-height: 1.3; }
.extrakaart__prijs { font-size: 13.5px; color: var(--inkt-stil); font-variant-numeric: tabular-nums; }
.extrakaart__prijs small { display: block; font-size: 11.5px; }

.extrakaart__uitleg {
  position: absolute; top: var(--r3); right: var(--r3);
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--rand-sterk); background: var(--vlak);
  color: var(--inkt-stil); font-size: 12px; font-weight: 700; line-height: 1;
  cursor: help; display: flex; align-items: center; justify-content: center;
}
.extrakaart__uitleg:hover { border-color: var(--accent); color: var(--accent); }

/* De toelichting verschijnt boven de kaart en dekt hem niet af. */
.uitlegwolk {
  position: absolute; z-index: 20; bottom: calc(100% + 8px); right: 0;
  width: max(200px, 100%); padding: var(--r3);
  background: var(--inkt); color: #fff; border-radius: var(--radius);
  font-size: 12.5px; font-weight: 400; line-height: 1.45; text-align: left;
  box-shadow: 0 8px 24px rgba(16,23,28,.22);
}

@media (max-width: 34rem) {
  .extras__rij { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
  .extrakaart { padding: var(--r5) var(--r2) var(--r3); }
}

/* ====================================================================== */
/* De peptide-calculator                                                  */
/* ====================================================================== */

.rekensectie { padding-block: var(--r6) var(--r10); max-width: 62rem; }

.rekenkop { display: flex; flex-direction: column; gap: var(--r3); }
.rekenkop__label {
  margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.rekenkop h1 { margin: 0; }
.rekenkop__intro {
  margin: 0; max-width: 46rem; font-size: 15.5px; line-height: 1.7;
  color: var(--inkt-stil);
}

/* De voorbeeldknoppen. Verzendknoppen, geen links: ze vullen het formulier
   dat er onder staat, en doen dat ook zonder JavaScript. */
.rekenchips { display: flex; flex-wrap: wrap; gap: var(--r2); margin-top: var(--r6); }
.rekenchip {
  padding: var(--r2) var(--r4); min-height: 36px;
  font-family: var(--tekst); font-size: 13.5px; color: var(--inkt-zacht);
  background: var(--vlak); border: var(--lijn-sterk); border-radius: 999px;
  cursor: pointer; transition: border-color var(--overgang), color var(--overgang),
                               background var(--overgang);
}
.rekenchip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-vlak); }
.rekenchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.rekenvak {
  margin-top: var(--r5); padding: var(--r7);
  border: var(--lijn); border-radius: var(--radius-l);
  background: var(--vlak); box-shadow: var(--schaduw);
  display: flex; flex-direction: column; gap: var(--r6);
}

.rekenvelden {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r5);
}

/* Het getal en zijn eenheid horen bij elkaar, dus staan ze in één vak. */
.rekenveld__duo { display: flex; gap: var(--r2); }
.rekenveld__duo input { flex: 1 1 auto; }
.rekenveld__duo select { flex: 0 0 5.5rem; width: auto; }

.rekenknop { margin: 0; }

.rekenuitkomst { margin-top: var(--r6); }

.rekencijfers {
  margin: 0; display: grid; gap: var(--r4);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
/* `display: grid` wint anders van de browserregel voor `hidden`, en dan
   blijven de cijfers staan terwijl er een foutmelding boven hangt. */
.rekencijfers[hidden] { display: none; }
.rekencijfer {
  padding: var(--r5); border: var(--lijn); border-radius: var(--radius-l);
  background: var(--vlak-dof);
  display: flex; flex-direction: column; gap: var(--r2);
}
.rekencijfer dt {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--inkt-stil);
}
.rekencijfer dd {
  margin: 0; font-family: var(--display); font-size: 28px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--inkt); font-variant-numeric: tabular-nums;
}
.rekencijfer__maat {
  display: block; font-family: var(--tekst); font-size: 13px; font-weight: 400;
  letter-spacing: 0; color: var(--inkt-stil);
}

/* Het getal waar het om gaat, krijgt het vlak van de winkel zelf. */
.rekencijfer--groot {
  background: var(--accent); border-color: var(--accent);
}
.rekencijfer--groot dt { color: rgba(255, 255, 255, 0.72); }
.rekencijfer--groot dd { color: var(--accent-op); font-size: 34px; }
.rekencijfer--groot .rekencijfer__maat { color: rgba(255, 255, 255, 0.72); }

.rekenwaarschuwing {
  margin: var(--r4) 0 0; padding: var(--r4) var(--r5);
  border: 1px solid var(--accent-rand); border-radius: var(--radius);
  background: var(--accent-vlak); color: var(--let-op); font-size: 14.5px;
}

.rekenuitleg {
  margin-top: var(--r8); padding-top: var(--r6); border-top: var(--lijn);
  display: flex; flex-direction: column; gap: var(--r3);
}
.rekenuitleg h2 { margin: 0; font-size: 18px; }
.rekenuitleg p { margin: 0; max-width: 46rem; font-size: 14.5px; color: var(--inkt-stil); }
.rekenuitleg__klein { font-size: 13px !important; color: var(--inkt-stil); }

@media (max-width: 40rem) {
  .rekenvelden { grid-template-columns: minmax(0, 1fr); }
  .rekenvak { padding: var(--r5); }
}

/* ====================================================================== */
/* De collectie: zoekbalk, filters, telling                               */
/* ====================================================================== */

/* De zoekbalk staat bovenaan de catalogus en niet in de kopregel: wie de
   catalogus opent, zoekt meestal binnen de catalogus. */
.collectiezoek {
  display: flex; align-items: center; gap: var(--r2);
  max-width: 34rem; margin-top: var(--r2);
  padding: var(--r1) var(--r2) var(--r1) var(--r5);
  background: var(--vlak); border: var(--lijn-sterk); border-radius: 999px;
  transition: border-color var(--overgang);
}
.collectiezoek:focus-within { border-color: var(--accent); }
.collectiezoek input {
  flex: 1 1 auto; min-height: 48px; border: 0; background: transparent;
  font-family: var(--tekst); font-size: 15.5px; color: var(--inkt);
}
.collectiezoek input:focus { outline: none; }
.collectiezoek input::placeholder { color: var(--inkt-stil); }
.collectiezoek__knop {
  flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: var(--inkt-zacht); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--overgang), color var(--overgang);
}
.collectiezoek__knop:hover { background: var(--accent-vlak); color: var(--accent); }

.collectie__bovenkop {
  margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; color: var(--inkt-stil);
}
.collectie__kop { margin: var(--r2) 0 0; }

.filterchips { display: flex; flex-wrap: wrap; gap: var(--r2); margin-top: var(--r5); }
.filterchip {
  padding: var(--r2) var(--r5); min-height: 40px;
  display: inline-flex; align-items: center;
  font-size: 14.5px; color: var(--inkt-zacht);
  background: var(--vlak); border: var(--lijn-sterk); border-radius: 999px;
  transition: border-color var(--overgang), color var(--overgang),
              background var(--overgang);
}
.filterchip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.filterchip--aan {
  border-color: var(--accent); background: var(--accent-vlak);
  color: var(--accent); font-weight: 600;
}

/* Op een smal scherm stapelen de lange rubrieknamen tot een halve pagina.
   Eén rij die je opzij veegt houdt de producten in beeld. De volgende chip
   wordt afgesneden, zodat je ziet dat er meer is. */
@media (max-width: 1000px) {
  .filterchips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--kantlijn) * -1);
    padding-inline: var(--kantlijn);
    scroll-padding-inline: var(--kantlijn);
  }
  .filterchips::-webkit-scrollbar { display: none; }
  .filterchip { flex: 0 0 auto; white-space: nowrap; min-height: var(--raakvlak); }
}

.collectie__telling {
  margin: var(--r6) 0 0; font-size: 14.5px; color: var(--inkt-stil);
}
.collectie__telling a { color: var(--inkt-stil); text-decoration: underline; }
.collectie__telling a:hover { color: var(--accent); }

.collectie__kop + .filterchips { margin-top: var(--r5); }

/* De extra's van één wagenregel. Dicht tenzij je hem opent: de wagen hoort
   een overzicht te blijven, niet een tweede productpagina. */
.regelextras {
  /* Een eigen regel over de volle breedte. Naast de productnaam werd het een
     smalle kolom waarin de kaarten op elkaar stapelden. */
  flex: 1 0 100%; margin-top: var(--r1);
  padding-top: var(--r4); border-top: var(--lijn);
}
.regelextras > summary {
  cursor: pointer; font-size: 13.5px; color: var(--accent);
  padding-block: var(--r1); width: fit-content;
}
.regelextras > summary:hover { text-decoration: underline; }
.regelextras form {
  margin-top: var(--r3); display: flex; flex-direction: column;
  gap: var(--r4); align-items: flex-start;
}
.regelextras .extras__rij {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); width: 100%;
}
.regelextras .extrakaart { padding: var(--r4) var(--r2) var(--r3); }

/* ====================================================================== */
/* De schuifrij op de homepage                                            */
/* ====================================================================== */

/* Passen de kaarten, dan is dit een gewone rij. Passen ze niet, dan schuift
   hij -- dat doet de browser zelf, zonder dat er iets ingesteld hoeft te
   worden. De pijlen zijn extra en verschijnen alleen als er wat te schuiven
   valt; met alleen een aanraakscherm heb je ze niet nodig. */
.schuifrij { position: relative; }

.schuifrij__spoor {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr);
  gap: var(--r5); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scroll-padding-left: 0;
  /* Ruimte onder de rij voor de schaduw van de kaarten, anders snijdt de
     overflow hem af. */
  padding-block: var(--r1) var(--r3);
  scrollbar-width: thin;
}
/* Het omhulsel rekt mee met de hoogste kaart in de rij, maar de kaart erin
   deed dat niet: die bleef zo hoog als zijn eigen tekst. Met een korte
   omschrijving naast een lange stonden de knoppen dan niet op één lijn.
   `display: flex` laat de kaart het hele vak vullen. */
.schuifrij__vak {
  scroll-snap-align: start; min-width: 0; display: flex;
}
.schuifrij__vak > * { flex: 1 1 auto; min-width: 0; }

/* Vier kaarten naast elkaar op een breed scherm, net als het oude rooster. */
@media (min-width: 62rem) {
  .schuifrij__spoor { grid-auto-columns: calc((100% - var(--r5) * 3) / 4); }
}
@media (min-width: 44rem) and (max-width: 61.99rem) {
  .schuifrij__spoor { grid-auto-columns: calc((100% - var(--r5) * 2) / 3); }
}

.schuifknop {
  position: absolute; top: 50%; z-index: 5; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  border: var(--lijn-sterk); background: var(--vlak); color: var(--inkt);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--schaduw);
  transition: border-color var(--overgang), color var(--overgang);
}
.schuifknop:hover { border-color: var(--accent); color: var(--accent); }
.schuifknop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.schuifknop[hidden] { display: none; }
.schuifknop--terug { left: calc(var(--r7) * -1); }
.schuifknop--verder { right: calc(var(--r7) * -1); }

/* Op een smal scherm is er geen ruimte naast de rij; daar schuif je met je
   duim en horen de knoppen weg te blijven. */
@media (max-width: 74rem) {
  .schuifknop { display: none; }
}

/* ====================================================================== */
/* Opgemaakte producttekst, inhoudsopgave en vragen                       */
/* ====================================================================== */

/* De tekst komt uit shop/opmaak.py en bestaat uit een handvol vormen; die
   krijgen hier maat en ruimte. Alles wat er niet in staat, kan er ook niet
   uit komen, dus deze lijst is compleet. */
.lopende-tekst > * + * { margin-top: var(--r4); }
.lopende-tekst h2 {
  margin-top: var(--r7); font-size: clamp(20px, 2.2vw, 24px);
  scroll-margin-top: var(--r8);
}
.lopende-tekst h3 {
  margin-top: var(--r6); font-size: 17px; scroll-margin-top: var(--r8);
}
.lopende-tekst h2:first-child, .lopende-tekst h3:first-child { margin-top: 0; }
.lopende-tekst strong { color: var(--inkt); font-weight: 600; }
.lopende-tekst a { color: var(--accent); text-decoration: underline; }
.lopende-tekst ul, .lopende-tekst ol { padding-left: var(--r5); }
.lopende-tekst li + li { margin-top: var(--r2); }
.lopende-tekst blockquote {
  margin-left: 0; padding-left: var(--r5); border-left: 3px solid var(--accent-rand);
  color: var(--inkt-stil); font-style: italic;
}
.lopende-tekst .tabelvak { overflow-x: auto; }
.lopende-tekst table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.lopende-tekst th, .lopende-tekst td {
  padding: var(--r2) var(--r3); text-align: left; border-bottom: var(--lijn);
}
.lopende-tekst th { color: var(--inkt); font-weight: 600; background: var(--vlak-dof); }

/* Een inhoudsopgave bij een lange tekst. Springlinks, meer niet: Google
   toont ze soms als 'spring naar' onder het zoekresultaat, en een bezoeker
   ziet in één blik waar de pagina over gaat. */
.inhoudsopgave {
  margin-bottom: var(--r6); padding: var(--r5);
  border: var(--lijn); border-radius: var(--radius-l); background: var(--vlak-dof);
}
.inhoudsopgave__kop {
  margin: 0 0 var(--r3); font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--inkt-stil);
}
.inhoudsopgave ol { margin: 0; padding-left: var(--r5); font-size: 14.5px; }
.inhoudsopgave li + li { margin-top: var(--r2); }
.inhoudsopgave a { color: var(--accent); }

/* Veelgestelde vragen. `details`, zodat de tekst in de pagina staat ook als
   hij dichtgeklapt is -- Google leest hem dan mee, en zonder JavaScript gaat
   hij gewoon open. */
.vragen { display: flex; flex-direction: column; gap: var(--r3); max-width: 62ch; }
.vraag {
  border: var(--lijn); border-radius: var(--radius-l); background: var(--vlak);
  padding: var(--r4) var(--r5);
}
.vraag > summary {
  cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 16px;
  color: var(--inkt); list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: var(--r4);
}
.vraag > summary::-webkit-details-marker { display: none; }
.vraag > summary::after {
  content: "+"; font-family: var(--mono); font-size: 20px; font-weight: 400;
  color: var(--accent); line-height: 1;
}
.vraag[open] > summary::after { content: "–"; }
.vraag__antwoord {
  margin-top: var(--r3); color: var(--inkt-zacht); line-height: 1.7;
  font-size: 15px;
}

/* ====================================================================== */
/* De toestemmingsbalk                                                    */
/* ====================================================================== */

/* Onderaan en over de volle breedte, maar niet als een muur: de winkel blijft
   bruikbaar terwijl hij er staat. Weigeren staat links en is even groot als
   accepteren -- een weigerknop die je moet zoeken, is geen keuze. */
.toestemming {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r6); flex-wrap: wrap;
  padding: var(--r5) var(--kantlijn);
  background: var(--vlak); border-top: var(--lijn-sterk);
  box-shadow: 0 -2px 24px rgba(16, 23, 28, 0.10);
}
.toestemming__tekst { flex: 1 1 28rem; min-width: 0; }
.toestemming__tekst strong {
  display: block; font-family: var(--display); font-size: 15px; color: var(--inkt);
}
.toestemming__tekst p {
  margin: var(--r1) 0 0; font-size: 13.5px; line-height: 1.6;
  color: var(--inkt-stil); max-width: 62ch;
}
.toestemming__knoppen { display: flex; gap: var(--r3); flex-shrink: 0; }
.toestemming__knoppen .knop { white-space: nowrap; }

@media (max-width: 40rem) {
  .toestemming { flex-direction: column; align-items: stretch; }
  .toestemming__knoppen > form { flex: 1 1 0; }
  .toestemming__knoppen .knop { width: 100%; }
}

/* -- reviews -------------------------------------------------------------
   Alles hieronder gebruikt de tokens bovenaan dit bestand. Een losse kleur
   in deze sectie is een fout: een gouden ster zou de enige kleur op de site
   zijn die nergens anders voorkomt. De sterren staan daarom in --accent, en
   een lege ster in --rand-sterk. */

.reviewkop {
  display: grid; grid-template-columns: 1fr; gap: var(--r7);
  padding: var(--r8) 0 var(--r7);
  border-bottom: var(--lijn);
}
@media (min-width: 860px) {
  .reviewkop { grid-template-columns: 1fr 340px; align-items: start; gap: var(--r10); }
}
.reviewkop__label {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  color: var(--inkt-stil); margin: 0 0 var(--r3);
}
.reviewkop h1 { margin: 0 0 var(--r4); }
.reviewkop__intro {
  margin: 0 0 var(--r6); max-width: 54ch; color: var(--inkt-zacht);
}

.reviewscore {
  padding: var(--r6); background: var(--vlak);
  border: var(--lijn); border-radius: var(--radius-l);
}
.reviewscore__cijfer {
  margin: 0; font-family: var(--display); font-size: 44px; line-height: 1;
  color: var(--inkt);
}
.reviewscore__cijfer small {
  font-family: var(--tekst); font-size: 14px; font-weight: 400;
  color: var(--inkt-stil); margin-left: var(--r2);
}
.reviewscore .sterren { margin: var(--r3) 0 var(--r2); }
.reviewscore__aantal { margin: 0 0 var(--r5); color: var(--inkt-stil); font-size: 14px; }
.reviewscore__filter { margin: var(--r4) 0 0; font-size: 14px; }

.sterren { display: inline-flex; gap: 2px; vertical-align: middle; }
.ster { width: 16px; height: 16px; }
.sterren--groot .ster { width: 21px; height: 21px; }
.ster--vol { fill: var(--accent); }
.ster--leeg { fill: var(--rand-sterk); }

.verdeling { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r2); }
.verdeling a {
  display: grid; grid-template-columns: 18px 1fr 42px; align-items: center;
  gap: var(--r3); text-decoration: none; color: var(--inkt-zacht);
  font-size: 13.5px; padding: 2px var(--r2); border-radius: var(--radius-s);
  transition: background var(--overgang);
}
.verdeling a:hover, .verdeling a.aan { background: var(--accent-vlak); }
.verdeling a.aan { color: var(--accent); font-weight: 500; }
.verdeling__ster { font-variant-numeric: tabular-nums; }
.verdeling__balk {
  height: 8px; background: var(--vlak-dof); border-radius: 99px; overflow: hidden;
}
.verdeling__balk span { display: block; height: 100%; background: var(--accent); }
.verdeling__deel {
  text-align: right; font-family: var(--mono); font-size: 12px;
  color: var(--inkt-stil);
}

/* De kaarten staan naast elkaar zodra er plek is. Een review is meestal een
   paar zinnen; over de volle breedte van de pagina wordt dat één dunne
   regel in een grote lege doos. Elke kaart houdt zijn eigen hoogte: een
   korte review naast een lange met een antwoord eronder zou anders een
   halve kaart leegte krijgen. */
.reviewlijst {
  list-style: none; margin: var(--r7) 0 var(--r10); padding: 0;
  display: grid; gap: var(--r4); grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 760px) {
  .reviewlijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.review {
  display: flex; flex-direction: column;
  padding: var(--r6); background: var(--vlak);
  border: var(--lijn); border-radius: var(--radius-l);
}
.review__kop {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r3); flex-wrap: wrap;
}
.review__wanneer { margin: 0; font-size: 13px; color: var(--inkt-stil); }
.review__titel { margin: var(--r4) 0 var(--r2); font-size: 17px; line-height: 1.3; }
.review__tekst { margin: 0; color: var(--inkt-zacht); white-space: pre-line; }

/* Wie het zei, onderaan en op de bodem van de kaart. */
.review__voet {
  margin-top: auto; padding-top: var(--r5);
  display: flex; align-items: center; gap: var(--r3);
}
.review__letter {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 15px; font-weight: 700;
  color: var(--accent); background: var(--accent-vlak);
  border: 1px solid var(--accent-rand);
}
.review__wie {
  margin: 0; display: flex; flex-direction: column; gap: 1px;
  font-size: 14px; line-height: 1.3; min-width: 0;
}
.review__wie strong { color: var(--inkt); font-weight: 600; overflow-wrap: anywhere; }
.review__merk {
  display: inline-flex; align-items: center; gap: var(--r1);
  font-size: 12.5px; color: var(--inkt-stil);
}
.review__merk svg {
  width: 13px; height: 13px; flex: none;
  fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.review__antwoord {
  margin: var(--r5) 0 0; padding: var(--r4) var(--r5);
  background: var(--accent-vlak); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.review__antwoordkop {
  margin: 0 0 var(--r2); font-size: 13px; font-weight: 600; color: var(--accent);
}
.review__antwoord p:last-child { margin: 0; color: var(--inkt-zacht); }

.reviewleeg {
  margin: var(--r8) 0; padding: var(--r8); text-align: center;
  color: var(--inkt-stil); background: var(--vlak);
  border: 1px dashed var(--rand-sterk); border-radius: var(--radius-l);
}

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

.reviewvorm, .reviewdank { max-width: 640px; margin: var(--r8) auto var(--r10); }
.reviewvorm h1, .reviewdank h1 { margin: 0 0 var(--r4); }
.reviewvorm__intro { margin: 0 0 var(--r6); color: var(--inkt-zacht); }
.reviewvorm form { display: grid; gap: var(--r5); }
.reviewvorm .knop { justify-self: start; }
.veldhulp { margin: 0; font-size: 13px; color: var(--inkt-stil); }
.reviewfout {
  margin: 0 0 var(--r5); padding: var(--r4) var(--r5);
  color: var(--fout); background: var(--fout-vlak);
  border: 1px solid var(--fout-rand); border-radius: var(--radius);
}
.reviewdank p { color: var(--inkt-zacht); margin: 0 0 var(--r6); }

.sterkeus { border: 0; padding: 0; margin: 0; }
.sterkeus legend {
  font-size: 13.5px; font-weight: 500; color: var(--inkt-zacht);
  padding: 0; margin-bottom: var(--r2);
}
.sterkeus__rij { display: flex; flex-wrap: wrap; gap: var(--r2); }
.sterkeus__optie {
  display: inline-flex; align-items: center; gap: var(--r2);
  padding: var(--r2) var(--r4); cursor: pointer;
  background: var(--grond); border: var(--lijn-sterk);
  border-radius: 99px; font-size: 14px; color: var(--inkt-zacht);
  transition: border-color var(--overgang), background var(--overgang);
}
.sterkeus__optie:hover { border-color: var(--accent-rand); }
.sterkeus__optie:has(input:checked) {
  background: var(--accent-vlak); border-color: var(--accent);
  color: var(--accent); font-weight: 500;
}
/* :has() kent niet elke browser. Zonder die regel blijft het vinkje zelf
   zichtbaar en is de keuze nog steeds af te lezen -- vandaar dat de radio
   niet wordt weggehaald maar alleen klein gehouden. */
.sterkeus__optie input { accent-color: var(--accent); }

.bladeren {
  display: flex; align-items: center; justify-content: center; gap: var(--r4);
  margin: var(--r7) 0 var(--r10); color: var(--inkt-stil); font-size: 14px;
}
.bladeren a {
  padding: var(--r2) var(--r4); border: var(--lijn-sterk);
  border-radius: var(--radius); text-decoration: none; color: var(--inkt-zacht);
}
.bladeren a:hover { border-color: var(--accent-rand); color: var(--accent); }

.homereviews__score {
  display: flex; align-items: center; gap: var(--r3);
  margin: 0 0 var(--r6); flex-wrap: wrap;
}
.homereviews__score strong { font-family: var(--display); font-size: 24px; }
.homereviews__aantal { color: var(--inkt-stil); font-size: 14px; }
.homereviews__rij {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--r4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.homereviews .review__titel { font-size: 16px; }

/* -- de chat --------------------------------------------------------------
   Het paneel bestond al; dit is wat erin komt te staan. Alles uit de tokens
   bovenaan dit bestand. */

.chat__uit p { margin: 0 0 var(--r4); }
.chatstap { display: grid; gap: var(--r4); }
/* `display: grid` wint van de ingebouwde regel voor [hidden], dus zonder dit
   blijft een afgeronde stap gewoon staan. Dat is hier al drie keer misgegaan;
   zet deze regel er altijd bij zodra een element dat verborgen kan worden een
   eigen display krijgt. */
.chatstap[hidden], .chatgesprek[hidden] { display: none; }
.chatstap__tel {
  margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  color: var(--inkt-stil); text-transform: uppercase;
}
.chatstap__vraag { margin: 0; font-weight: 500; }
.chatkeus { display: flex; gap: var(--r2); flex-wrap: wrap; }
.chatkeus--kolom { flex-direction: column; }
.chatkeus--kolom .knop { width: 100%; justify-content: flex-start; }
.chatveld { display: grid; gap: var(--r2); }
.chatveld > span { font-size: 13.5px; font-weight: 500; color: var(--inkt-zacht); }
.chatveld input {
  min-height: 44px; padding: var(--r2) var(--r3);
  font-family: var(--tekst); font-size: 15px; color: var(--inkt);
  background: var(--grond); border: var(--lijn-sterk); border-radius: var(--radius);
}
.chatveld small { font-size: 12.5px; color: var(--inkt-stil); }

.chatgesprek { display: grid; gap: var(--r3); }
.chatregels {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r3);
  max-height: 46vh; overflow-y: auto; scroll-behavior: smooth;
}
.chatregel { display: grid; gap: 2px; }
.chatregel p {
  margin: 0; padding: var(--r3) var(--r4); border-radius: var(--radius-l);
  font-size: 14.5px; white-space: pre-line; overflow-wrap: anywhere;
}
.chatregel__wie {
  font-size: 11.5px; color: var(--inkt-stil); font-family: var(--mono);
}
.chatregel--bezoeker { justify-items: end; }
.chatregel--bezoeker p {
  background: var(--accent); color: var(--accent-op);
  border-bottom-right-radius: var(--radius-s);
}
.chatregel--winkel p {
  background: var(--vlak-dof); color: var(--inkt);
  border-bottom-left-radius: var(--radius-s);
}
.chatregel--systeem p {
  background: transparent; padding: 0; text-align: center;
  font-size: 13px; color: var(--inkt-stil);
}

.chatvorm { display: grid; gap: var(--r2); }
.chatvorm textarea {
  padding: var(--r3); font-family: var(--tekst); font-size: 15px;
  color: var(--inkt); background: var(--grond); border: var(--lijn-sterk);
  border-radius: var(--radius); resize: vertical; min-height: 60px;
}
.chatvorm textarea:disabled { background: var(--vlak-dof); color: var(--inkt-stil); }
.chatfout {
  margin: 0; padding: var(--r2) var(--r3); font-size: 13.5px;
  color: var(--fout); background: var(--fout-vlak);
  border: 1px solid var(--fout-rand); border-radius: var(--radius);
}
.chat__stop { justify-self: center; font-size: 13px; }

/* ====================================================================== */
/* Wachtlijst bij een uitverkochte maat                                    */
/* ====================================================================== */
/* Hier stond een knop die naar deze pagina zelf linkte. Nu staat er het
   enige wat je op dit moment nog kunt doen, en dat mag opvallen: het is de
   laatste kans om deze bezoeker vast te houden. Vandaar het accentvlak en
   niet nóg een grijs kadertje. */
.voorraadmelding {
  margin-top: var(--r5); padding: var(--r5);
  background: var(--accent-vlak); border: 1px solid var(--accent-rand);
  border-radius: var(--radius);
}
.voorraadmelding__kop {
  margin: 0 0 var(--r2); font-size: 16px; font-weight: 600; color: var(--inkt);
}
.voorraadmelding__uitleg {
  margin: 0 0 var(--r4); font-size: 13.5px; line-height: 1.55;
  color: var(--inkt-zacht);
}
.voorraadmelding__goed {
  margin: 0; font-size: 14px; color: #17635A; font-weight: 500;
}
.voorraadmelding__vorm { display: flex; flex-wrap: wrap; gap: var(--r2); }
.voorraadmelding__vorm input[type=email] { flex: 1 1 200px; min-width: 0; }
.voorraadmelding__vorm .knop { flex: 0 0 auto; }


/* -- bijlagen in de chat -------------------------------------------------- */

/* De paperclip staat naast het tekstvak en niet eronder: het is een tweede
   manier om hetzelfde bericht te vullen, geen tweede handeling. Een
   `input[type=file]` is in elke browser anders vormgegeven en in geen enkele
   mooi, dus hij zit verborgen in een label dat er wél uitziet als een knop. */
/* Het tekstvak op een eigen regel, daaronder de paperclip links en de
   verstuurknop rechts. Zonder dit zet de grid van `.chatvorm` ze alle drie
   onder elkaar en is het venster drie regels hoger voor niets. */
.chatvorm { grid-template-columns: auto 1fr; }
.chatvorm textarea { grid-column: 1 / -1; }
.chatvorm > .knop { justify-self: end; }

.chatklem {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; cursor: pointer;
  border: 1px solid var(--rand); border-radius: var(--radius-m);
  color: var(--inkt-stil); background: var(--vlak);
}
.chatklem:hover { border-color: var(--accent); color: var(--accent); }
.chatklem:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Wat klaarstaat om mee te gaan, boven het tekstvak. Klein: het is een
   bevestiging dat het gelukt is, niet de afbeelding zelf. */
.chatklaar {
  display: flex; flex-wrap: wrap; gap: var(--r2);
  list-style: none; margin: 0 0 var(--r2); padding: 0;
}
.chatklaar li { position: relative; }
.chatklaar img {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: var(--radius-s); border: 1px solid var(--rand);
}
.chatklaar__weg {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  display: grid; place-items: center; cursor: pointer; line-height: 1;
  border: 0; border-radius: 50%; background: var(--donker);
  color: var(--donker-inkt); font-size: 14px;
}

/* En de bijlage in het gesprek zelf. Beperkt in hoogte, want een staande
   telefoonfoto duwt het hele gesprek anders van het scherm. */
/* De bijlage hoort bij de ballon erboven en gaat dus mee naar dezelfde kant:
   links wat de winkel stuurt, rechts wat de bezoeker stuurt. Staat hij over
   de volle breedte, dan lijkt hij van niemand. */
.chatbijlage { display: block; width: fit-content; max-width: 78%;
               margin-top: var(--r2); }
.chatregel--bezoeker .chatbijlage { margin-left: auto; }
.chatbijlage img {
  display: block; max-width: 100%; max-height: 220px; width: auto;
  border-radius: var(--radius-s); border: 1px solid var(--rand);
}