/* Molen & Boon — stijl.css (site-na, fix-versie 2026-07-25)
   Wijzigingen t.o.v. site-voor zijn gemarkeerd met een FIX-commentaar en
   verwijzen naar de fix-groepen in fix-voorstel-2026-07-25.md.
   Alle nieuwe kleuren zijn nagerekend met de WCAG 2.1-luminantieformule;
   de ratio staat er per kleur bij. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --espresso: #2f1b12;
  --mokka: #5a3a26;
  --karamel: #c98d4e;
  --karamel-licht: #d8a86e;
  --creme: #faf3ea;
  --creme-donker: #f1e6d6;
  --lijn: #e3d5c2;
  --inkt: #3b2c22;
  /* FIX C1: contrastpalet — vervangt de te lichte tinten.
     subtekst 5,97:1 op creme · prijs 6,82:1 op wit · knop-bg: witte tekst
     6,71:1 · link 5,96:1 op creme · fout 6,62:1 op wit */
  --subtekst: #6d5a44;
  --prijs-kleur: #7a5230;
  --knop-bg: #7d5320;
  --knop-bg-hover: #6f4a1c;
  --link: #7a562f;
  --fout: #a93226;
  --fout-achtergrond: #fdf5f3;
}

/* FIX V10 (kruiscontrole): vloeiend scrollen alleen voor wie geen "minder
   beweging" heeft ingesteld. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--inkt);
  background: var(--creme);
  line-height: 1.65;
}

/* FIX C1: linkkleur van #8a6238 (4,91:1) naar 5,96:1 op creme.
   FIX C2 (1.4.1): links in lopende tekst zijn ook zonder kleur herkenbaar —
   onderstreping aan; in navigatie/knoppen (waar plaats en vorm het al zeggen)
   niet. */
a { color: var(--link); text-decoration: underline; }
a:hover { color: var(--espresso); }
.hoofdnav a, .merk, .knop, .knop-omlijnd, .skip-link { text-decoration: none; }

img, svg { max-width: 100%; }

/* FIX A2 (2.4.7): de twee outline:none-regels zijn verwijderd. Hiervoor in de
   plaats een dubbele focusring (creme + espresso, 14,83:1 t.o.v. elkaar):
   zichtbaar op lichte én donkere achtergronden. De transparante outline blijft
   staan voor Windows-hoogcontrastmodus. */
:focus {
  outline: 3px solid transparent;
  box-shadow: 0 0 0 3px var(--creme), 0 0 0 6px var(--espresso);
  border-radius: 2px;
}
:focus:not(:focus-visible) {
  box-shadow: none;
  outline: none;
}
:focus-visible {
  outline: 3px solid transparent;
  box-shadow: 0 0 0 3px var(--creme), 0 0 0 6px var(--espresso);
  border-radius: 2px;
}

/* FIX B3 (2.4.1): skip-link — off-screen, zichtbaar zodra hij focus krijgt. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--espresso);
  color: #ffffff; /* 14,56:1 */
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
}

/* FIX A1/A3/B5: visueel verborgen, wel voorleesbaar. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.2;
  color: var(--espresso);
  letter-spacing: -0.3px;
}
h1 { font-size: 2.4rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }
p { margin-bottom: 0.9rem; }

/* FIX C1: gedeelde klasse voor toelichtende subtekst (was inline #8a7460, 4,01:1). */
.subtekst { color: var(--subtekst); }

.omhulsel { max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* ---------- aankondigingsbalk ---------- */

/* FIX V2 (2.2.2, kruiscontrole): de balk wisselt automatisch, dus er hoort een
   pauzeknop bij. Balk en knop staan naast elkaar; de knop erft de balkkleuren. */
.aankondiging {
  background: var(--espresso);
  color: #e9d9c6; /* 9,9:1 op espresso */
  text-align: center;
  font-size: 0.85rem;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.aankondiging-pauze {
  background: none;
  border: 1px solid #e9d9c6;
  border-radius: 3px;
  color: #e9d9c6;
  font: inherit;
  font-size: 0.78rem;
  padding: 1px 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.aankondiging-pauze:hover { background: #4a2f1e; color: #ffffff; }

/* ---------- header ---------- */

.kop {
  background: var(--creme);
  border-bottom: 1px solid var(--lijn);
  padding: 22px 0 0;
  text-align: center;
}

.merk {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--espresso);
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.merk img { width: 42px; height: 42px; }

.hoofdnav {
  margin-top: 16px;
  border-top: 1px solid var(--lijn);
}
/* FIX C3 (1.4.10): min-width 760px weg — het menu vouwt nu om op smalle
   schermen in plaats van buiten beeld te vallen. */
.hoofdnav ul {
  display: flex;
  justify-content: center;
  gap: 6px;
  list-style: none;
  flex-wrap: wrap;
}
.hoofdnav a {
  display: block;
  padding: 12px 18px;
  color: var(--mokka); /* 9,22:1 op creme */
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.hoofdnav a:hover { color: var(--espresso); background: var(--creme-donker); }
/* FIX C1: nav-wagen stond in karamel (2,57:1); nu dezelfde mokka, vetter. */
.hoofdnav .nav-wagen { color: var(--mokka); font-weight: 800; }

/* ---------- hero ---------- */

.hero {
  background: linear-gradient(135deg, #3a2417 0%, #5a3a26 100%);
  color: #f5e8d7;
  padding: 64px 0;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}
.hero h1 { color: #ffffff; margin-bottom: 14px; }
/* FIX C1 (bevinding 28): herotekst naar 7,97:1 op het lichtste gradientdeel. */
.hero p { color: #f0e2cf; font-size: 1.08rem; max-width: 34em; }

/* FIX C1: knop-achtergrond van karamel (witte tekst 2,83:1) naar 6,71:1.
   FIX A1: .knop zit nu ook op echte <button>-elementen: font mee laten erven. */
.knop {
  display: inline-block;
  background: var(--knop-bg);
  color: #ffffff;
  font-family: inherit;
  font-weight: 700;
  padding: 13px 26px;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
}
.knop:hover { background: var(--knop-bg-hover); color: #ffffff; }

/* FIX C1: omlijnde knop — tekst naar 6,85:1 op het lichtste herodeel;
   de karamelrand haalt 3,58:1 (eis 3:1 voor niet-tekstuele markering). */
.knop-omlijnd {
  display: inline-block;
  border: 2px solid var(--karamel);
  color: #f0cfa4;
  font-weight: 700;
  padding: 11px 24px;
  border-radius: 4px;
  margin-left: 12px;
}

/* ---------- usp-strook ---------- */

.usp-strook {
  background: var(--creme-donker);
  border-bottom: 1px solid var(--lijn);
  padding: 18px 0;
}
.usp-strook .omhulsel {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.usp {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--mokka);
}
.usp svg { width: 26px; height: 26px; flex-shrink: 0; }

/* ---------- secties ---------- */

.sectie { padding: 52px 0; }
.sectie-kop { text-align: center; margin-bottom: 30px; }
.sectie-kop p { color: var(--subtekst); } /* FIX C1: was #8a7460 (4,01:1) */
/* FIX B2: kopniveau = betekenis, formaat = CSS. Sectiekoppen zijn nu h2 met
   het oude h4-formaat. */
.sectie-kop h2 { font-size: 1.05rem; }

/* ---------- productraster ---------- */

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

.kaart {
  background: #ffffff;
  border: 1px solid var(--lijn);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.kaart-beeld {
  background: var(--creme-donker);
  padding: 18px;
  text-align: center;
}
.kaart-beeld img { width: 130px; height: 130px; }
.kaart-body { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
/* FIX B2: kaarttitels kunnen h2 of h3 zijn; formaat blijft gelijk. */
.kaart-body h2, .kaart-body h3, .kaart-body h4 { margin-bottom: 4px; font-size: 1.05rem; }
/* FIX C1: categorielabel van #a08a72 (3,29:1) naar 5,97:1. */
.kaart-cat {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--subtekst);
  margin-bottom: 2px;
}
/* FIX C1 (WAVE 2,31:1): prijs naar 6,82:1 op wit. */
.prijs {
  color: var(--prijs-kleur);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 8px 0 12px;
}
.kaart .knop { margin-top: auto; text-align: center; }

.kaart-meer { font-size: 0.88rem; margin-top: 8px; }

/* FIX A1 (4.1.3): statusmelding "toegevoegd" — alleen zichtbaar mét inhoud. */
.status-melding {
  margin-top: 18px;
  background: #f0e8db;
  border: 1px solid var(--lijn);
  border-radius: 4px;
  padding: 12px 16px;
}
.status-melding:empty { display: none; }

/* ---------- sorteerbalk ---------- */

.sorteerbalk {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  gap: 14px;
  flex-wrap: wrap;
}
.sorteerbalk label { font-weight: 600; margin-right: 8px; } /* FIX A3 */
.sorteerbalk select {
  padding: 8px 12px;
  border: 1px solid var(--lijn);
  border-radius: 4px;
  background: #fff;
  font-size: 0.92rem;
  font-family: inherit;
  color: var(--inkt);
}
.telling { color: var(--subtekst); font-size: 0.92rem; } /* FIX C1 */

/* ---------- productdetail ---------- */

.detail {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 44px;
  align-items: start;
  padding: 48px 0;
}
.detail-beeld {
  background: #ffffff;
  border: 1px solid var(--lijn);
  border-radius: 6px;
  padding: 40px;
  text-align: center;
}
.detail-beeld img { width: 260px; height: 260px; }
.detail-info .kaart-cat { margin-bottom: 6px; }
.detail-info .prijs { font-size: 1.5rem; margin: 14px 0; }
.detail-info table { border-collapse: collapse; margin: 18px 0; width: 100%; }
/* FIX B5-verwant: specificatietabel krijgt echte rijkoppen (th scope=row). */
.detail-info td, .detail-info th {
  border-bottom: 1px solid var(--lijn);
  padding: 8px 10px 8px 0;
  font-size: 0.94rem;
  text-align: left;
}
.detail-info th { color: var(--subtekst); width: 40%; font-weight: 600; }

.voorraad { color: #3f6b3f; font-size: 0.9rem; font-weight: 600; } /* FIX C1-meelift: 6,20:1 (was 3,2:1) */

/* ---------- winkelwagen ---------- */

/* FIX C3 (1.4.10): de datatabel scrollt binnen het eigen blok — de pagina
   zelf krijgt geen horizontale schuifbalk meer op 320 px. */
.tabel-scroll { overflow-x: auto; }

.wagen-tabel { width: 100%; border-collapse: collapse; margin: 24px 0; background: #fff; border: 1px solid var(--lijn); border-radius: 6px; }
.wagen-tabel th {
  text-align: left;
  padding: 12px 16px;
  background: var(--creme-donker);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--mokka);
}
.wagen-tabel td { padding: 14px 16px; border-top: 1px solid var(--lijn); vertical-align: middle; }
.wagen-tabel img { width: 56px; height: 56px; background: var(--creme-donker); border-radius: 4px; padding: 6px; }

.aantal-groep { display: inline-flex; align-items: center; gap: 8px; }
.aantal-groep button {
  width: 30px; height: 30px;
  border: 1px solid var(--lijn);
  background: var(--creme);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  color: var(--mokka);
}
.aantal-groep button:hover { background: var(--creme-donker); }

/* FIX C1 (WAVE 3,22:1): verwijderknop naar 6,72:1. */
.verwijder-knop {
  border: none;
  background: none;
  color: #7d5232;
  font-size: 1.2rem;
  font-family: inherit;
  cursor: pointer;
}
.verwijder-knop:hover { color: var(--espresso); }

.wagen-onder {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 26px;
  margin: 20px 0 40px;
}
.totaal { font-size: 1.25rem; font-weight: 800; color: var(--espresso); }

.leeg-melding { padding: 40px 0 60px; color: var(--subtekst); } /* FIX C1 */

/* ---------- checkout ---------- */

.afreken {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 44px;
  padding: 44px 0 60px;
  align-items: start;
}

.veldgroep { margin-bottom: 14px; }
/* FIX A3: zichtbare labels boven de velden. */
.veldgroep label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}
.veldgroep input,
.veldgroep select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--lijn);
  border-radius: 4px;
  font-size: 0.98rem;
  font-family: inherit;
  background: #fff;
  color: var(--inkt);
}
.veldgroep input::placeholder { color: var(--subtekst); } /* FIX C1 */
.veldgroep input.verplicht-veld, .veldgroep select.verplicht-veld { border-left: 3px solid var(--knop-bg); }
.veldgroep input.veld-fout { border: 1px solid var(--fout); border-left-width: 3px; background: var(--fout-achtergrond); }
.hint { font-size: 0.85rem; color: var(--subtekst); margin: 4px 0 0; }

/* FIX A4: foutmeldingen — tekst bij het veld en een overzicht bovenaan. */
.foutmelding { color: var(--fout); font-weight: 600; font-size: 0.9rem; margin: 4px 0 0; }
.fout-overzicht {
  background: var(--fout-achtergrond);
  border: 2px solid var(--fout);
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.fout-overzicht h2 { color: var(--fout); font-size: 1.1rem; margin-bottom: 8px; }
.fout-overzicht ul { margin: 0 0 0 20px; }
.fout-overzicht a { color: var(--fout); }

.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.overzicht-blok {
  background: #ffffff;
  border: 1px solid var(--lijn);
  border-radius: 6px;
  padding: 24px;
}
.overzicht-blok h2 { margin-bottom: 14px; font-size: 1.2rem; } /* FIX B2: was h3 */
.overzicht-regel { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--creme-donker); font-size: 0.94rem; }
.overzicht-regel.totaalregel { font-weight: 800; font-size: 1.05rem; border-bottom: none; padding-top: 12px; }

.plaats-knop {
  margin-top: 18px;
  width: 100%;
  text-align: center;
}

.bevestiging {
  background: #ffffff;
  border: 1px solid var(--lijn);
  border-radius: 6px;
  padding: 46px 40px;
  text-align: center;
  margin: 48px auto 64px;
  max-width: 620px;
}
.bevestiging svg { width: 74px; height: 74px; margin-bottom: 18px; }

/* ---------- contact ---------- */

.contact-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  padding: 44px 0 60px;
}
.contact-blok { background: #fff; border: 1px solid var(--lijn); border-radius: 6px; padding: 26px; margin-bottom: 20px; }
.contact-blok h2 { margin-bottom: 8px; font-size: 1.05rem; } /* FIX B2: was h4 */
.contact-blok h3 { margin-top: 14px; color: var(--mokka); font-size: 1rem; } /* FIX B2: FAQ-vragen waren h4 */

/* ---------- banden ---------- */

.band-donker {
  background: var(--mokka);
  color: #f0e2cf;
  padding: 44px 0;
  text-align: center;
}
.band-donker h2 { color: #ffffff; }
.band-donker p { color: #f0e2cf; max-width: 40em; margin: 10px auto 18px; } /* FIX C1: was #dfc9ac */
.band-donker a { color: #f5ead9; } /* 8,54:1 op mokka */

/* ---------- footer ---------- */

.voet {
  background: var(--espresso);
  color: #d8c5a9; /* FIX C1: was #c9b394 (3,8:1), nu 9,70:1 */
  padding: 40px 0 30px;
  margin-top: 40px;
  font-size: 0.9rem;
}
.voet-kolommen {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 34px;
  margin-bottom: 26px;
}
.voet h2 { color: #f0e2cf; font-size: 0.95rem; margin-bottom: 10px; } /* FIX B2: was h4 */
.voet ul { list-style: none; }
.voet li { margin-bottom: 6px; }
.voet a { color: #d8c5a9; } /* FIX C1 */
.voet a:hover { color: #ffffff; }
.voet-onder { border-top: 1px solid #4a2f1e; padding-top: 18px; color: #c0aa8c; font-size: 0.82rem; } /* FIX C1: was #8f7657 (3,8:1), nu 7,28:1 */

/* ---------- klein ---------- */

@media (max-width: 900px) {
  .hero-inner, .detail, .afreken, .contact-raster { grid-template-columns: 1fr; }
  .voet-kolommen { grid-template-columns: 1fr; }
}

/* FIX C3: op heel smalle schermen (320 px) ook de veldparen stapelen. */
@media (max-width: 480px) {
  .veld-rij { grid-template-columns: 1fr; }
}