/* ============================================================================
   stijl.css — design-tokens + basiscomponenten van Waterhangmat.nl
   EIGENDOM VAN DE FUNDAMENT-AGENT.
   Bouwagenten: voeg paginaspecifieke stijl toe in je EIGEN bestand
   public/css/<pagina>.css en link dat via de extraCss-optie van het layout.
   Bron van waarheid: DESIGN-SPEC.md ("De 23:59-lijn").
   ========================================================================== */

/* ----- Fonts (lokaal gehost, AVG-proof: geen Google-CDN) ------------------ */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/nunito-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/nunito-sans-700.woff2') format('woff2');
}

/* ----- Design-tokens (DESIGN-SPEC §2 + §3) -------------------------------- */
:root {
  /* Kleuren */
  --kleur-wit: #FFFFFF;        /* Schuimwit — hoofdachtergrond */
  --kleur-zwembad: #E4F6F9;    /* Zwembad-licht — secundaire secties, kaarten */
  --kleur-navy: #10243E;       /* Diepzee-navy — tekst, announcement, navy secties */
  --kleur-navy-diep: #0B1A2E;  /* Een tint dieper — alleen de voettekst, zodat die
                                  zich losmaakt van een navy sectie erboven */
  --kleur-oranje: #FF7200;     /* Signaal-oranje — primaire knop, sale-badge */
  --kleur-aqua: #0E7C8A;       /* Diep Aqua — links, secundaire knoppen */
  --kleur-groen: #1E7B33;      /* Voorraadgroen — uitsluitend voorraad/bezorg-microcopy */
  --kleur-geel: #FFD23F;       /* Zongeel — golf-onderstreep en stickers, nooit tekstkleur */

  /* Typografie */
  --font-kop: 'Poppins', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-tekst: 'Nunito Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Vorm & maat */
  --radius-knop: 40px;         /* pill-knoppen */
  --radius-kaart: 18px;        /* productkaarten */
  --radius-veld: 10px;         /* formuliervelden */
  --schaduw-kaart: 0 6px 20px rgba(16, 36, 62, 0.08);
  --schaduw-kaart-zweef: 0 10px 28px rgba(16, 36, 62, 0.14);
  --container-breedte: 1200px;
  --sectie-ruimte: 3rem;
}

/* ----- Basisreset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-tekst);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--kleur-navy);
  background: var(--kleur-wit);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img, svg, video { display: block; max-width: 100%; }
input, button, select, textarea { font: inherit; color: inherit; }

.pagina-inhoud { flex: 1 0 auto; }

/* ----- Typografie --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-kop);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}
h1 { font-size: clamp(1.75rem, 4vw, 2.6rem); margin-bottom: 0.75rem; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 0.6rem; }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); margin-bottom: 0.5rem; }
p { margin-bottom: 1rem; }
a { color: var(--kleur-aqua); }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 700; }

/* Prijzen: altijd vet, nooit groter dan de knop. */
.prijs { font-weight: 700; font-size: 1.125rem; }
.prijs--oud {
  font-weight: 400;
  font-size: 0.95rem;
  text-decoration: line-through;
  opacity: 0.65;
  margin-left: 0.4rem;
}

/* Voorraad-/bezorg-microcopy: uitsluitend Voorraadgroen, nooit rood. */
.bezorgregel, .vinkje { color: var(--kleur-groen); }
.bezorgregel { font-weight: 700; }
.vinkje { font-weight: 700; margin-right: 0.25rem; }

/* ----- Layout-hulpen ------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-breedte);
  margin-inline: auto;
  padding-inline: 1rem;
}
.container.smal { max-width: 720px; }
.midden { text-align: center; }

.sectie { padding-block: var(--sectie-ruimte); }
.sectie--aqua { background: var(--kleur-zwembad); }
.sectie--navy { background: var(--kleur-navy); color: var(--kleur-wit); }
.sectie--midden { padding-block: clamp(4rem, 12vh, 7rem); }

/* ----- Golf-onderstreep (visuele signatuur, DESIGN-SPEC §9.2) -------------
   Uitsluitend onder H1/H2-koppen gebruiken. Eén amplitude, één kleur. */
.golf {
  display: inline-block;
  padding-bottom: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='9' viewBox='0 0 64 9'%3E%3Cpath d='M2 4.5 C10 1.5 22 1.5 32 4.5 S54 7.5 62 4.5' fill='none' stroke='%23FFD23F' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 64px 9px;
}
.midden .golf { background-position: center bottom; }

/* ----- Knoppen (pill, radius 40) ------------------------------------------ */
.knop {
  display: inline-block;
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  padding: 0.8rem 1.75rem;
  border-radius: var(--radius-knop);
  border: 2px solid var(--kleur-oranje);
  background: var(--kleur-oranje);
  color: var(--kleur-navy);      /* knoplabel ALTIJD navy, nooit wit (AA) */
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.knop:hover {
  box-shadow: 0 6px 16px rgba(255, 114, 0, 0.35);
  transform: translateY(-1px);
}
.knop:active { transform: translateY(0); box-shadow: none; }
.knop:focus-visible { outline: 3px solid var(--kleur-aqua); outline-offset: 2px; }

.knop--secundair {
  background: transparent;
  border-color: var(--kleur-aqua);
  color: var(--kleur-aqua);
}
.knop--secundair:hover {
  background: var(--kleur-aqua);
  color: var(--kleur-wit);
  box-shadow: 0 6px 16px rgba(14, 124, 138, 0.25);
}
.sectie--navy .knop--secundair { border-color: var(--kleur-wit); color: var(--kleur-wit); }
.sectie--navy .knop--secundair:hover { background: var(--kleur-wit); color: var(--kleur-navy); }

.knop--klein { padding: 0.5rem 1.15rem; font-size: 0.9rem; }
.knop[disabled], .knop.is-uit {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ----- Kaarten (producten & collecties) ----------------------------------- */
.kaart {
  background: var(--kleur-zwembad);
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-kaart);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
a.kaart, .kaart a { color: inherit; text-decoration: none; }
.kaart:hover { transform: translateY(-3px); box-shadow: var(--schaduw-kaart-zweef); }
/* De kaartfoto is een beeldkader in img-vorm: vast vierkant vak (gelijke
   kaarthoogtes in het raster) met de foto CONTAIN erbinnen. Zie het blok
   "Beeldkader" hieronder — dat is het patroon, dit is de kant-en-klare vorm
   voor kaarten die alleen een <img> plaatsen. */
.kaart__afbeelding {
  aspect-ratio: 1 / 1;
  width: 100%;
  /* height: auto is hier geen franje maar noodzaak: het width/height-attribuut
     op de <img> telt als presentational hint, en zolang de hoogte daaruit
     definitief is, wordt aspect-ratio genegeerd — dan wordt de kaart zo hoog
     als de foto in pixels is. Met height: auto bepaalt de verhouding hem. */
  height: auto;
  object-fit: contain;   /* NOOIT cover: dan valt er beeld buiten het kader */
  object-position: center;
  padding: 0.5rem;
  background: var(--kleur-wit);
}
.kaart__inhoud { padding: 0.9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
/* Lange productnamen mogen breken; op een 320px-scherm past "Waterhangmat"
   anders net niet in een halve kolom en duwt de kaart het raster breder.
   Moét er gebroken worden, dan liever met een koppelteken op een geldige
   lettergreepgrens dan zomaar middenin het woord. De pagina staat op lang="nl",
   dus de browser hanteert Nederlandse afbreekregels. */
.kaart__naam {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  overflow-wrap: break-word;
  hyphens: auto;
}
.kaart__prijs { margin-top: auto; }

/* minmax(0, 1fr) in plaats van 1fr: een rasterkolom is standaard minstens zo
   breed als zijn min-content, en dan kan één lang woord het hele raster breder
   maken dan het scherm. Met minmax(0, ...) kan dat niet meer — dát is wat een
   horizontale schuifbalk op mobiel voorkomt. */
.kaart-raster {
  display: grid;
  /* Eén kaart per rij op de telefoon, drie op een breed scherm. Bewuste keuze
     van de eigenaar: liever een grote, rustige foto dan vier postzegels naast
     elkaar. Verander je dit, pas dan ook SIZES.kaart en SIZES.kaartSmal in
     lib/afbeelding.js aan, anders kiest de browser de verkeerde fotovariant. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
@media (min-width: 700px) {
  .kaart-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (min-width: 980px) {
  .kaart-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}

/* ============================================================================
   BEELDKADER — het vaste patroon voor élke foto op deze site.
   Gebruik dit overal; voeg geen nieuwe object-fit: cover meer toe.
   ----------------------------------------------------------------------------
   WAAROM
   Onze foto's hebben niet allemaal dezelfde verhouding: van de 285 productfoto's
   is ongeveer 60% vierkant (1024x1024), 28% staand (2:3) en 12% liggend (3:2).
   Zetten we die in een vierkant kader met object-fit: cover, dan snijdt de
   browser bij een staande foto een derde van het beeld weg. Dát was de klacht.

   HOE
   Het KADER bepaalt de plek in het raster: een vaste verhouding, dus gelijke
   kaarthoogtes en geen layout-sprong. De FOTO staat daarbinnen gecentreerd en
   is altijd helemaal te zien (object-fit: contain). Wat overblijft is rustige
   achtergrond uit de tokens — nooit afgesneden beeld, nooit uitgerekt beeld.

   GEBRUIK (altijd samen met lib/afbeelding.js: srcset + width/height erbij)
     <div class="beeldkader beeldkader--kaart">
       <%- imgTag(pad, { alt: '...', klasse: 'beeldkader__foto',
                         sizes: IMG_SIZES.kaart }) %>
     </div>

   MODIFIERS — verhouding
     (geen)            1 / 1   vierkant, de standaard
     --breed           3 / 2   sfeerbeeld dat breed mag staan
     --hoog            4 / 5   plek waar staand beeld de hoofdrol speelt
     --vrij            geen vaste verhouding: de foto bepaalt zelf de hoogte
   MODIFIERS — uiterlijk
     --zacht           zwembad-aqua achtergrond in plaats van wit
     --vlak            geen eigen radius (voor een kader dat strak in een kaart zit)
     --rand            dun kaartrandje
     --ruim / --krap   meer of minder binnenmarge rond de foto
   VASTE MATEN
     --thumb           galerij-thumbnail (4.5rem)
     --regel           regelfoto in winkelwagen/bevestiging (88px)
   ========================================================================== */
.beeldkader {
  display: grid;               /* één cel: foto's stapelen netjes (hover-foto) */
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0.5rem;
  background: var(--kleur-wit);
  border-radius: var(--radius-kaart);
  overflow: hidden;
}
/* Ook zonder de klasse op de <img> werkt het kader — zo kan geen enkele view
   er per ongeluk naast grijpen. */
.beeldkader__foto,
.beeldkader > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;         /* NOOIT cover: dan valt er beeld buiten beeld */
  object-position: center;
}

/* Horizontaal spiegelen. Handig als de compositie van een foto de verkeerde
   kant op kijkt: gespiegeld kijkt het onderwerp naar de tekst toe in plaats van
   de pagina uit. Alleen gebruiken bij beeld ZONDER tekst of logo erin — die
   zouden in spiegelschrift komen te staan. */
.beeldkader__foto--gespiegeld { transform: scaleX(-1); }

.beeldkader--breed { aspect-ratio: 3 / 2; }
.beeldkader--hoog  { aspect-ratio: 4 / 5; }
.beeldkader--vrij  { aspect-ratio: auto; }
.beeldkader--vrij .beeldkader__foto,
.beeldkader--vrij > img { height: auto; }

.beeldkader--zacht { background: var(--kleur-zwembad); }
.beeldkader--vlak  { border-radius: 0; }
.beeldkader--rand  { border: 1px solid rgba(16, 36, 62, 0.10); }
.beeldkader--ruim  { padding: clamp(0.75rem, 2.5vw, 1.5rem); }
.beeldkader--krap  { padding: 0.25rem; }

.beeldkader--thumb {
  width: 4.5rem;
  padding: 0.25rem;
  border-radius: 10px;
}
.beeldkader--regel {
  width: 88px;
  padding: 0.25rem;
  border-radius: 12px;
}

/* ----- Badges ------------------------------------------------------------- */
.badge {
  display: inline-block;
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-knop);
}
.badge--voorraad { background: var(--kleur-groen); color: var(--kleur-wit); }
.badge--sale { background: var(--kleur-oranje); color: var(--kleur-navy); }
.badge--uitverkocht { background: var(--kleur-navy); color: var(--kleur-wit); }
.badge--deal { background: var(--kleur-geel); color: var(--kleur-navy); }

/* ----- USP-balk ----------------------------------------------------------- */
/* De USP-balk: drie beloftes op één regel elk, met een icoon ernaast.
   Geen onderteksten — die maakten de balk rommelig terwijl de kop het al zegt.
   Het icoon staat naast de tekst in plaats van erboven: dat leest als één
   uitspraak en houdt de balk laag, ook als kolom 2 in het Late Night-venster
   een langere regel krijgt. */
.usp-balk {
  background: var(--kleur-zwembad);
  border-radius: var(--radius-kaart);
  padding: 1.25rem 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  list-style: none;
  margin: 0;
}
@media (min-width: 700px) {
  .usp-balk {
    grid-template-columns: repeat(3, 1fr);
    padding: 1.35rem 1.5rem;
    gap: 1.25rem;
  }
  /* Fijne scheiding tussen de drie, in plaats van drie losse eilandjes. */
  .usp-balk__item + .usp-balk__item {
    border-left: 1px solid rgba(16, 36, 62, 0.12);
    padding-left: 1.25rem;
  }
}
.usp-balk__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  /* Links uitgelijnd leest rustiger dan gecentreerd zodra er een icoon vóór
     staat: de teksten beginnen dan allemaal op dezelfde plek. */
  text-align: left;
}
.usp-balk__icoon {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--kleur-aqua);
}
.usp-balk__item h3, .usp-balk__titel {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  margin: 0;
}
.usp-balk__item p { margin: 0; }

/* ----- Formulieren -------------------------------------------------------- */
.veld { margin-bottom: 1rem; }
.veld label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.veld input[type="text"],
.veld input[type="email"],
.veld input[type="tel"],
.veld input[type="password"],
.veld input[type="number"],
.veld select,
.veld textarea,
input.invoer, select.invoer, textarea.invoer {
  width: 100%;
  padding: 0.7rem 0.9rem;
  /* De rand van een invoerveld is de enige aanwijzing dát het een invoerveld
     is, en moet daarom 3:1 halen met de achtergrond (WCAG 1.4.11 "Non-text
     Contrast"). 0,25 alfa navy op wit gaf 1,7:1; 0,5 alfa (#88929E) haalt
     3,2:1 en blijft optisch nog steeds een licht randje. */
  border: 2px solid rgba(16, 36, 62, 0.5);
  border-radius: var(--radius-veld);
  background: var(--kleur-wit);
  color: var(--kleur-navy);
}
.veld input:focus-visible, .veld select:focus-visible, .veld textarea:focus-visible,
.invoer:focus-visible {
  outline: none;
  border-color: var(--kleur-aqua);
  box-shadow: 0 0 0 3px rgba(14, 124, 138, 0.2);
}
.veld .veld__hint { font-size: 0.85rem; opacity: 0.75; margin-top: 0.2rem; }
.veld--fout input, .veld--fout select, .veld--fout textarea { border-color: #B3261E; }
.veld__foutmelding { color: #B3261E; font-size: 0.9rem; margin-top: 0.25rem; }

/* Aantal-invoer (winkelwagen) */
.aantal-invoer {
  width: 4.5rem;
  text-align: center;
  padding: 0.5rem 0.4rem;
  border: 2px solid rgba(16, 36, 62, 0.5); /* zie de toelichting hierboven */
  border-radius: var(--radius-veld);
}

/* ----- Announcement-balk (rouleert door de 3 USPs, puur CSS) --------------- */
.aankondiging {
  position: relative;
  background: var(--kleur-navy);
  color: var(--kleur-wit);
  height: 2.25rem;
  overflow: hidden;
  text-align: center;
  font-size: 0.9rem;
}
.aankondiging__regel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding-inline: 1rem;
  opacity: 0;
  animation: aankondiging-rouleer 12s infinite;
}
.aankondiging__regel:nth-child(2) { animation-delay: 4s; }
.aankondiging__regel:nth-child(3) { animation-delay: 8s; }
@keyframes aankondiging-rouleer {
  0%       { opacity: 0; transform: translateY(0.4rem); }
  3%, 28%  { opacity: 1; transform: translateY(0); }
  33%, 100%{ opacity: 0; transform: translateY(-0.4rem); }
}
@media (prefers-reduced-motion: reduce) {
  .aankondiging__regel { animation: none; }
  .aankondiging__regel:first-child { opacity: 1; }
}
/* De beloftergel draagt altijd haar voorwaarde ("— met Late Night, € 2,95")
   mee en is daarmee langer dan de andere twee. Op smalle schermen mag hij
   daarom over twee regels: iets meer hoogte, iets kleinere letter. */
@media (max-width: 560px) {
  .aankondiging { height: 3rem; font-size: 0.78rem; }
  .aankondiging__regel { line-height: 1.25; }
}

/* ----- Sticky header ------------------------------------------------------ */
.site-kop {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--kleur-wit);
  border-bottom: 1px solid rgba(16, 36, 62, 0.08);
  box-shadow: 0 2px 10px rgba(16, 36, 62, 0.06);
}
.site-kop__binnen {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.75rem;
  flex-wrap: wrap;
  padding-block: 0.4rem;
}
/* Het woordmerk als TEKST, op verzoek van de eigenaar. De beeldversie is
   geprobeerd en afgekeurd; deze typografische vorm bleef staan.
   Voordeel: altijd scherp op elk scherm, geen extra verzoek naar de server, en
   hij groeit mee als een bezoeker zijn lettergrootte hoger zet. Het merkbeeld
   zelf leeft door in de favicon en de app-iconen. */
.site-kop__logo {
  display: inline-flex;
  align-items: baseline;
  flex-shrink: 0;
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: clamp(1.15rem, 3.4vw, 1.4rem);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--kleur-navy);
  text-decoration: none;
  white-space: nowrap;
}
/* Het domeindeel in het merk-oranje: dat maakt er een naam van in plaats van
   een woord, en het is precies het accent dat in de rest van de winkel terugkomt. */
.site-kop__logo-tld { color: var(--kleur-oranje); }
.site-kop__logo:hover { text-decoration: none; }
.site-kop__logo:focus-visible {
  outline: 3px solid var(--kleur-aqua);
  outline-offset: 3px;
  border-radius: 6px;
}

.site-kop__menu {
  display: flex;
  gap: 1.1rem;
  order: 3;
  flex-basis: 100%;
  overflow-x: auto;
  padding-block: 0.35rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.site-kop__menu::-webkit-scrollbar { display: none; }
.site-kop__menu a {
  color: var(--kleur-navy);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.site-kop__menu a:hover { border-bottom-color: var(--kleur-geel); }

.site-kop__wagen {
  position: relative;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  color: var(--kleur-navy);
  padding: 0.35rem;
}
.site-kop__wagen-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.35rem;
  background: var(--kleur-oranje);
  color: var(--kleur-navy);
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1;
  min-width: 1.15rem;
  padding: 0.2rem 0.3rem;
  border-radius: var(--radius-knop);
  text-align: center;
}

@media (min-width: 900px) {
  .site-kop__menu {
    order: 0;
    flex-basis: auto;
    overflow: visible;
    margin-inline: auto;
    padding-block: 0;
  }
  .site-kop__wagen { margin-left: 0; }
}

/* ----- Footer (navy) ------------------------------------------------------ */
/* Geen margin-top meer. Die marge liet de witte pagina-achtergrond doorschijnen
   en dat was op elke pagina die op een gekleurde sectie eindigt een witte
   streep tussen die sectie en de voettekst. De ruimte die de voettekst nodig
   heeft zit nu in zijn eigen padding, en die schildert wél mee.

   De voettekst is bovendien een tint donkerder dan --kleur-navy. Anders liep
   hij op de homepage naadloos over in het navy nieuwsbriefblok erboven en werd
   het één groot blauw vlak waarin je niet meer ziet waar het een ophoudt en
   het ander begint. */
.site-voet {
  background: var(--kleur-navy-diep);
  color: var(--kleur-wit);
  padding-block: 3rem 1.5rem;
  font-size: 0.95rem;
}
.site-voet a { color: var(--kleur-wit); text-decoration-color: rgba(255, 255, 255, 0.4); }
.site-voet a:hover { text-decoration-color: var(--kleur-geel); }
.site-voet__kolommen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
@media (min-width: 700px) {
  .site-voet__kolommen { grid-template-columns: 1.4fr 1fr 1fr; }
}
.site-voet__merk { font-family: var(--font-kop); font-weight: 600; font-size: 1.2rem; margin-bottom: 0.3rem; }
.site-voet__merkzin { opacity: 0.85; margin-bottom: 1rem; }
.site-voet__usps { list-style: none; padding: 0; display: grid; gap: 0.35rem; }
.site-voet__usps .vinkje { color: var(--kleur-geel); }
.site-voet__kopje { font-family: var(--font-kop); font-weight: 600; margin-bottom: 0.6rem; }
.site-voet__links { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
/* De wettelijke herroepingsfunctie (EU 2023/2673 / artikel 6:230oa BW). Hij
   staat tussen de juridische links, maar moet als ACTIE herkenbaar zijn: de wet
   verbiedt hem weg te moffelen tussen de kleine lettertjes. Vandaar wit op navy
   met een dun kader. Bewust géén oranje: dit is een wettelijke voorziening en
   geen knop die met "In winkelwagen" moet concurreren. */
.site-voet__links-actie { margin-top: 0.55rem; }
.site-voet__herroep {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-knop);
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}
.site-voet a.site-voet__herroep:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--kleur-wit);
  text-decoration: none;
}
.site-voet__herroep:focus-visible { outline: 3px solid var(--kleur-geel); outline-offset: 2px; }
.site-voet__herroep-pijl { font-weight: 400; }
.site-voet__herroep-uitleg {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  opacity: 0.75;
}
@media (prefers-reduced-motion: reduce) {
  .site-voet__herroep { transition: none; }
}
.site-voet__mail { margin-top: 1rem; opacity: 0.9; }
/* Wettelijke bedrijfsgegevens: sober, één regel onder de kolommen. */
.site-voet__bedrijf {
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
  opacity: 0.75;
}
.site-voet__onder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.25rem;
}
.site-voet__onder p { margin: 0; }
.betaal-icoon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  font-weight: 700;
  font-size: 0.85rem;
}

/* ----- Herroepingsrecht in de winkel --------------------------------------
   Twee vormen voor dezelfde wettelijke verwijzing (EU 2023/2673 / artikel
   6:230oa BW):

     .herroep-regel  één rustige zin, voor de bedankpagina na de betaling.
                     Daar begint de bedenktijd, dus daar moet de klant weten
                     waar de functie staat. Een tekstlink, want naast
                     "Verder winkelen" hoort geen tweede knop.
     .herroep-blok   het blok bovenaan de retourpagina, dat de functie als de
                     snelste weg aanwijst met het modelformulier eronder als
                     alternatief.

   Allebei in aqua en zwembadblauw, nooit in signaal-oranje: een wettelijke
   voorziening mag duidelijk zijn zonder te schreeuwen. */
.herroep-regel {
  max-width: 46rem;
  margin-inline: auto;
  font-size: 0.95rem;
  opacity: 0.85;
}
.herroep-blok {
  background: var(--kleur-zwembad);
  border-left: 4px solid var(--kleur-aqua);
  border-radius: var(--radius-kaart);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
/* Iets zwaardere selector dan .inhoud-pagina h2 uit paginas.css (die laadt ná
   dit bestand en zou de kop anders van het blok af duwen). */
.inhoud-pagina .herroep-blok h2 { margin-top: 0; }
.herroep-blok__kop { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
.herroep-blok__actie { margin-bottom: 0.85rem; }
.herroep-blok__voet { margin-bottom: 0; font-size: 0.9rem; opacity: 0.8; }

/* ----- Toegankelijkheid --------------------------------------------------- */
/* Overslaan-link: voor toetsenbord- en schermlezergebruikers de eerste tabstop,
   zodat ze de aankondigingsbalk en het menu kunnen overslaan. Onzichtbaar tot
   hij focus krijgt. */
.overslaan-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 100;
  background: var(--kleur-navy);
  color: var(--kleur-wit);
  font-weight: 700;
  text-decoration: none;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-knop);
  transition: top 120ms ease;
}
.overslaan-link:focus-visible {
  top: 0.5rem;
  outline: 3px solid var(--kleur-geel);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .overslaan-link { transition: none; }
}

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

/* ===========================================================================
   FLITSMELDING — "Toegevoegd! Je artikel ligt in je winkelwagen."
   ===========================================================================
   Stond eerst in winkelwagen.css, want hij verscheen alleen op de
   winkelwagenpagina. Sinds er een knop op de productkaart zit kan de melding
   op elke pagina terechtkomen, dus staat hij nu hier.

   Twee verschijningsvormen, dezelfde bouwstenen:
     .flits                 in de pagina zelf, boven de inhoud (winkelwagen)
     .flitsbak > .flits     zwevend rechtsonder, na een klik op de kaartknop
   ========================================================================== */
/* ----- Flash-melding ("flits") -------------------------------------------- */
.flits {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--kleur-zwembad);
  border-left: 5px solid var(--kleur-groen);
  border-radius: var(--radius-veld);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  font-weight: 700;
  overflow: hidden;
}
.flits--info { border-left-color: var(--kleur-geel); }
.flits__tekst { flex: 1 1 auto; }

/* Sluitknop: klein en rustig, maar met een aanraakvlak dat op een telefoon te
   raken is (44px is de vuistregel). */
.flits__sluit {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  margin: -0.4rem -0.35rem -0.4rem 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--kleur-navy);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 120ms ease, background 120ms ease;
}
.flits__sluit:hover { opacity: 1; background: rgba(16, 36, 62, 0.08); }
.flits__sluit:focus-visible {
  outline: 3px solid var(--kleur-aqua);
  outline-offset: 1px;
  opacity: 1;
}

/* Aflopend balkje onderin: laat zien dat de melding zo weggaat, zodat het
   verdwijnen geen verrassing is. Puur decoratief. */
.flits__balk {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  transform-origin: left center;
  background: var(--kleur-groen);
  opacity: 0.4;
}
.flits--info .flits__balk { background: var(--kleur-geel); opacity: 0.7; }
.flits.is-aftellen .flits__balk { animation: flits-aflopen linear forwards; }
@keyframes flits-aflopen { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Wegfaden bij het sluiten. */
.flits.is-weg {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 220ms ease, transform 220ms ease;
}

/* Wie beweging heeft uitgezet krijgt geen aflopend balkje en geen fade; de
   melding verdwijnt dan gewoon ineens. De timer blijft wel gewoon werken. */
@media (prefers-reduced-motion: reduce) {
  .flits.is-aftellen .flits__balk { animation: none; }
  .flits.is-weg { transition: none; }
}

/* ----- Zwevende variant ---------------------------------------------------
   Rechtsonder, boven de inhoud. Op een telefoon over de volle breedte, want
   daar is een smal kaartje in de hoek onleesbaar. pointer-events op de bak
   staat uit zodat de melding geen klikken opvangt van wat eronder ligt. */
.flitsbak {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  pointer-events: none;
}
@media (min-width: 700px) {
  .flitsbak { left: auto; max-width: 24rem; }
}
.flitsbak .flits {
  margin-bottom: 0;
  pointer-events: auto;
  background: var(--kleur-wit);
  box-shadow: 0 10px 30px rgba(16, 36, 62, 0.18);
  animation: flits-binnen 220ms ease-out both;
}
@keyframes flits-binnen {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .flitsbak .flits { animation: none; }
}