/* ==========================================================================
   Kaasshop Heyhoef — stijl.css
   Handgeschreven CSS, geen framework, geen build-stap.
   Bron van waarheid voor kleur/typografie: ONTWERPBASIS.md
   Opbouw:  1 tokens · 2 basis · 3 typografie · 4 knoppen · 5 formulieren
            6 header · 7 homepage-secties · 8 winkelonderdelen · 9 footer
   Alle media queries staan bij het onderdeel zelf (mobile first).
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Kleuren — exact uit ONTWERPBASIS.md */
  --kh-groen-diep:  #16281c;
  --kh-groen-mid:   #1e3626;
  --kh-goud:        #c8951f;
  --kh-goud-licht:  #d9a441;
  --kh-goud-zacht:  #d19a2a;
  --kh-creme:       #f6f1e6;
  --kh-creme-licht: #fbf8f1;
  --kh-inkt:        #23201a;
  --kh-inkt-zacht:  #5c564b;
  --kh-lijn:        #e2d9c6;
  /* Voor de omlijning van iets dat een besturingselement IS (uitklappaneel,
     omkaderde knop). WCAG 1.4.11 vraagt daar 3,0:1 tegen de achtergrond, en
     --kh-lijn haalt maar 1,18:1 — goed genoeg voor een scheidingslijn, te weinig
     om een paneel mee af te bakenen. Deze haalt 4,09:1 op creme. */
  --kh-lijn-sterk:  #7d7466;
  --kh-wit:         #ffffff;

  /* Toegevoegd t.o.v. de ontwerpbasis (zie VERSLAG.md):
     goud is als tékst op creme te licht (2,4:1). Dit is dezelfde goudtint,
     donkerder gemaakt tot 5,6:1 op creme — voor bovenkopjes en links. */
  --kh-goud-donker: #7d5a0f;
  /* Rood alleen voor foutmeldingen en de "verwijderen"-actie. 6,5:1 op creme. */
  --kh-rood:        #9a2b1e;

  /* Typografie */
  --kh-font-kop:  "Playfair Display", Georgia, "Times New Roman", serif;
  --kh-font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Vorm */
  --kh-rond-knop:  4px;
  --kh-rond-kaart: 6px;
  --kh-schaduw:    0 1px 3px rgba(35, 32, 26, .08);
  --kh-schaduw-op: 0 4px 14px rgba(35, 32, 26, .14);

  /* Ritme */
  --kh-breedte:  1200px;
  --kh-marge:    1.25rem;   /* zijmarge mobiel */
  --kh-raak:     44px;      /* minimale aanraakhoogte */
}

/* ---------- 2. Basis ----------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--kh-creme);
  color: var(--kh-inkt);
  font-family: var(--kh-font-body);
  font-size: 1rem;
  line-height: 1.6;
}

img { max-width: 100%; }
/* De browser geeft <figure> standaard 40px zijmarge; dat perst de
   cadeaufoto's tot een derde van hun kolom. */
figure { margin: 0; }

a { color: var(--kh-goud-donker); }
a:hover { color: var(--kh-inkt); }

/* Zichtbare focus op alles wat je kunt bedienen.
   Donkere ring op lichte grond, goudlichte ring binnen donkere secties. */
:focus-visible {
  outline: 3px solid var(--kh-inkt);
  outline-offset: 2px;
  border-radius: 2px;
}
.kh-donker :focus-visible,
.kh-goudvlak :focus-visible { outline-color: var(--kh-groen-diep); }
.kh-donker :focus-visible { outline-color: var(--kh-goud-licht); }

/* Sla-over-link */
.kh-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--kh-goud);
  color: var(--kh-inkt);
  padding: .75rem 1rem;
  font-weight: 600;
  text-decoration: none;
}
.kh-skip:focus { left: .5rem; top: .5rem; }

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

.kh-omhulsel {
  width: 100%;
  max-width: var(--kh-breedte);
  margin-inline: auto;
  padding-inline: var(--kh-marge);
}
@media (min-width: 768px) { .kh-omhulsel { padding-inline: 1.75rem; } }

.kh-sectie { padding-block: 3rem; }
@media (min-width: 768px)  { .kh-sectie { padding-block: 4rem; } }
@media (min-width: 1024px) { .kh-sectie { padding-block: 5rem; } }

.kh-donker { background: var(--kh-groen-diep); color: var(--kh-creme); }
.kh-sectie--licht { background: var(--kh-creme-licht); border-block: 1px solid var(--kh-lijn); }
/* Let op: knoppen en het logo houden hun eigen kleur. Zonder de :not()
   kreeg een gouden knop binnen een donkere sectie gouden tekst (1,2:1). */
.kh-donker a:not(.kh-knop):not(.kh-logo) { color: var(--kh-goud-licht); }
.kh-donker a:not(.kh-knop):not(.kh-logo):hover { color: var(--kh-wit); }

/* Beeldhouder: krijgt de lijnkleur als grond, zodat een ontbrekende foto
   geen kapot wit vlak geeft maar een rustig creme-bruin vlak. */
.kh-beeld {
  position: relative;
  display: grid;
  /* minmax(0,1fr) is nodig: zonder dat groeit het vak mee met de alt-tekst
     van een foto die (nog) niet bestaat, en steekt het buiten zijn kolom. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: stretch;
  align-content: center;
  overflow: hidden;
  background: var(--kh-lijn);
  color: var(--kh-inkt-zacht);
  font-size: .8rem;
  text-align: center;
  border-radius: var(--kh-rond-kaart);
}
.kh-beeld img {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  grid-area: 1 / 1;
}

/* ---------- 3. Typografie ------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--kh-font-kop);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 .6em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2.6vw, 1.4rem); font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }

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

.kh-bovenkop {
  display: block;
  margin: 0 0 .75rem;
  font-family: var(--kh-font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kh-goud-donker);
}
.kh-donker .kh-bovenkop,
.kh-verhaal__tekst .kh-bovenkop,
.kh-hero .kh-bovenkop { color: var(--kh-goud-licht); }

.kh-lead { font-size: 1.075rem; color: var(--kh-inkt-zacht); }
.kh-donker .kh-lead { color: #d9d3c4; }

.kh-sectiekop { max-width: 46rem; margin-bottom: 2rem; }
.kh-sectiekop p { color: var(--kh-inkt-zacht); }
.kh-donker .kh-sectiekop p { color: #d9d3c4; }

.kh-prijs {
  font-family: var(--kh-font-body);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--kh-inkt);
}
.kh-eenheid {
  font-size: .82rem;
  font-weight: 400;
  color: var(--kh-inkt-zacht);
}
.kh-prijs-oud {
  font-weight: 400;
  font-size: .95rem;
  color: var(--kh-inkt-zacht);
  text-decoration: line-through;
  margin-left: .4rem;
}

/* ---------- 4. Knoppen --------------------------------------------------- */

.kh-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--kh-raak);
  padding: .7rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--kh-rond-knop);
  font-family: var(--kh-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.kh-knop svg { flex: none; width: 20px; height: 20px; }
.kh-knop--goud {
  background: var(--kh-goud);
  border-color: var(--kh-goud);
  color: var(--kh-inkt);          /* op goud altijd donkere tekst */
}
.kh-knop--goud:hover { background: var(--kh-goud-licht); border-color: var(--kh-goud-licht); color: var(--kh-inkt); }

.kh-knop--groen {
  background: var(--kh-groen-diep);
  border-color: var(--kh-groen-diep);
  color: var(--kh-creme);
}
.kh-knop--groen:hover { background: var(--kh-groen-mid); border-color: var(--kh-groen-mid); color: var(--kh-wit); }

.kh-knop--rand {
  background: transparent;
  border-color: var(--kh-inkt);
  color: var(--kh-inkt);
}
.kh-knop--rand:hover { background: var(--kh-inkt); color: var(--kh-creme); }
.kh-donker .kh-knop--rand { border-color: var(--kh-creme); color: var(--kh-creme); }
.kh-donker .kh-knop--rand:hover { background: var(--kh-creme); color: var(--kh-groen-diep); }

.kh-knop--breed { width: 100%; }
.kh-knop--groot { padding: .95rem 1.75rem; font-size: 1.05rem; }

/* Tekstlink met pijl */
.kh-pijl {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: var(--kh-raak);
  font-weight: 600;
  text-decoration: none;
  color: var(--kh-goud-donker);
}
.kh-pijl svg { flex: none; width: 20px; height: 20px; }
.kh-pijl span { text-decoration: underline; text-underline-offset: 3px; }
.kh-pijl:hover { color: var(--kh-inkt); }
.kh-donker .kh-pijl { color: var(--kh-goud-licht); }

/* ---------- 5. Formulieren ----------------------------------------------- */

label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }

input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="number"], select, textarea {
  width: 100%;
  min-height: var(--kh-raak);
  padding: .6rem .75rem;
  border: 1px solid #c9bfa8;
  border-radius: var(--kh-rond-knop);
  background: var(--kh-wit);
  color: var(--kh-inkt);
  font-family: var(--kh-font-body);
  font-size: 1rem;
}
input::placeholder, textarea::placeholder { color: #7b7466; opacity: 1; }
select { appearance: none; padding-right: 2.25rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--kh-inkt) 50%),
                    linear-gradient(135deg, var(--kh-inkt) 50%, transparent 50%);
  background-position: right 1.05rem center, right .8rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
textarea { min-height: 6rem; resize: vertical; }

.kh-veld { margin-bottom: 1rem; }
.kh-veld--half { margin-bottom: 1rem; }
.kh-veldrij { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .kh-veldrij--2 { grid-template-columns: 1fr 1fr; } }
/* 9rem/8rem: smaller past het label "Huisnummer" niet en botst het met "Straat". */
@media (min-width: 768px) { .kh-veldrij--pc { grid-template-columns: 9rem 8rem 1fr; } }

.kh-hulp { font-size: .85rem; color: var(--kh-inkt-zacht); margin-top: .3rem; }

fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
legend { padding: 0; }

/* Keuzeblok (verzendmethode / betaalmethode) */
.kh-keuze {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 56px;
  padding: .75rem 1rem;
  border: 1px solid var(--kh-lijn);
  border-radius: var(--kh-rond-knop);
  background: var(--kh-wit);
  margin-bottom: .6rem;
  cursor: pointer;
  font-weight: 400;
}
.kh-keuze:has(input:checked) { border-color: var(--kh-goud); box-shadow: inset 0 0 0 1px var(--kh-goud); }
.kh-keuze > span { min-width: 0; }
.kh-keuze input[type="radio"] { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--kh-groen-diep); }
.kh-keuze__naam { font-weight: 600; }
.kh-keuze__uitleg { display: block; font-weight: 400; font-size: .87rem; color: var(--kh-inkt-zacht); }
.kh-keuze__prijs { margin-left: auto; font-weight: 700; white-space: nowrap; }
.kh-keuze__merk {
  flex: none; width: 46px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--kh-lijn); border-radius: 3px; background: var(--kh-wit);
  font-size: .62rem; font-weight: 700; letter-spacing: .02em;
}
.kh-keuze__merk img { width: 34px; height: auto; }

/* ---------- 6. Topbalk, header en menu ----------------------------------- */

.kh-topbalk {
  background: var(--kh-groen-diep);
  color: var(--kh-creme);
  font-size: .85rem;
}
.kh-topbalk__rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .1rem 1.5rem;
  min-height: 44px;
  text-align: center;
}
/* De opmaak van deze span staat in sectie 19; hier stond een regel met dezelfde
   selector die daar volledig door overschreven werd. */
.kh-topbalk svg { width: 17px; height: 17px; flex: none; color: var(--kh-goud-licht); }
.kh-topbalk a {
  color: var(--kh-goud-licht);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: var(--kh-raak);
}
.kh-topbalk a:hover { color: var(--kh-wit); text-decoration: underline; }
@media (min-width: 768px) { .kh-topbalk__rij { justify-content: space-between; text-align: left; } }

.kh-header {
  background: var(--kh-creme);
  border-bottom: 1px solid var(--kh-lijn);
  position: relative;
  z-index: 20;
}
.kh-header__rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  padding-block: .7rem;
}

.kh-logo {
  order: 0;
  flex: none;
  display: inline-block;
  background: var(--kh-goud);
  color: var(--kh-inkt);
  text-decoration: none;
  padding: .45rem .7rem;
  border-radius: 3px;
  font-family: var(--kh-font-kop);
  line-height: 1.05;
}
.kh-logo:hover { background: var(--kh-goud-licht); color: var(--kh-inkt); }
.kh-logo b { display: block; font-size: 1rem; font-weight: 700; letter-spacing: .01em; }
.kh-logo i { display: block; font-size: 1rem; font-weight: 700; font-style: normal; }
.kh-logo small {
  display: block;
  font-family: var(--kh-font-body);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .17em;
}
@media (min-width: 1024px) {
  .kh-logo { padding: .55rem .85rem; }
  .kh-logo b, .kh-logo i { font-size: 1.18rem; }
  .kh-logo small { font-size: .6rem; }
}

.kh-header__acties { order: 1; margin-left: auto; display: flex; align-items: center; gap: .1rem; }

.kh-icoonknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: var(--kh-raak);
  min-height: var(--kh-raak);
  padding: .5rem;
  border: 0;
  background: transparent;
  color: var(--kh-inkt);
  border-radius: var(--kh-rond-knop);
  cursor: pointer;
  text-decoration: none;
}
.kh-icoonknop:hover { background: var(--kh-lijn); color: var(--kh-inkt); }
.kh-icoonknop svg { width: 22px; height: 22px; }
.kh-teller {
  position: absolute;
  top: 3px; right: 3px;
  min-width: 19px; height: 19px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--kh-groen-diep);
  color: var(--kh-creme);
  font-size: .68rem;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}

/* Zoekveld: op mobiel een eigen regel onder de balk, vanaf 1024px in de balk */
.kh-zoek { order: 4; flex: 1 0 100%; display: none; padding-bottom: .4rem; }
.kh-zoek[data-open] { display: block; }
.kh-zoek__rij { display: flex; }
.kh-zoek input {
  border-radius: var(--kh-rond-knop) 0 0 var(--kh-rond-knop);
  border-right: 0;
  min-width: 0;
}
.kh-zoek button {
  flex: none;
  min-width: var(--kh-raak);
  min-height: var(--kh-raak);
  border: 1px solid var(--kh-groen-diep);
  background: var(--kh-groen-diep);
  color: var(--kh-creme);
  border-radius: 0 var(--kh-rond-knop) var(--kh-rond-knop) 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.kh-zoek button svg { width: 20px; height: 20px; }

/* Menu */
.kh-nav { order: 5; flex: 1 0 100%; display: none; }
.kh-nav[data-open] { display: block; }
.kh-nav ul {
  list-style: none;
  margin: 0;
  padding: 0 0 .5rem;
  border-top: 1px solid var(--kh-lijn);
}
.kh-nav a {
  display: flex;
  align-items: center;
  min-height: var(--kh-raak);
  padding: .5rem 0;
  color: var(--kh-inkt);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--kh-lijn);
}
.kh-nav a:hover { color: var(--kh-goud-donker); }
.kh-nav a[aria-current="page"] { color: var(--kh-goud-donker); }

@media (min-width: 1024px) {
  .kh-menuknop, .kh-zoekknop { display: none; }
  .kh-nav { order: 1; flex: 1 1 auto; display: block; margin-left: 1.5rem; }
  .kh-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.4rem; padding: 0; border-top: 0; }
  .kh-nav a {
    padding: .45rem 0;
    border-bottom: 3px solid transparent;
    font-size: .95rem;
  }
  .kh-nav a:hover,
  .kh-nav a[aria-current="page"] { border-bottom-color: var(--kh-goud); }
  /* 0 1: het veld mag krimpen als het menu breed is, maar de placeholder
     "Zoek in de shop" moet er bij 1280px helemaal in passen. */
  .kh-zoek { order: 2; flex: 0 1 16rem; min-width: 8rem; display: block; padding-bottom: 0; }
  .kh-header__acties { order: 3; margin-left: .35rem; }
}

/* ---------- 7. Homepage-secties ------------------------------------------ */

/* Hero */
.kh-hero { display: grid; background: var(--kh-groen-diep); color: var(--kh-creme); }
.kh-hero__beeld { border-radius: 0; min-height: 240px; }
.kh-hero__beeld img { height: 100%; }
.kh-hero__inhoud { padding: 2.5rem var(--kh-marge) 3rem; }
.kh-hero h1 { color: var(--kh-wit); margin-bottom: .5rem; }
.kh-hero p { max-width: 34rem; color: #ded8c9; font-size: 1.075rem; }
.kh-hero__knoppen { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.75rem; }
.kh-hero__knoppen .kh-knop { width: 100%; }
.kh-hero .kh-knop--groen { background: var(--kh-groen-mid); border-color: var(--kh-creme); }
.kh-hero .kh-knop--groen:hover { background: var(--kh-creme); color: var(--kh-groen-diep); }

@media (min-width: 768px) {
  .kh-hero__beeld { min-height: 300px; }
  .kh-hero__knoppen { flex-direction: row; flex-wrap: wrap; }
  .kh-hero__knoppen .kh-knop { width: auto; }
}
@media (min-width: 1024px) {
  .kh-hero { position: relative; }
  .kh-hero__beeld, .kh-hero__inhoud { grid-area: 1 / 1; }
  .kh-hero__beeld { min-height: 520px; }
  .kh-hero__inhoud {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: var(--kh-breedte);
    margin-inline: auto;
    padding: 4rem 1.75rem;
  }
  .kh-hero__inhoud > * { max-width: 33rem; }

  /* De leesbaarheidswaas hoort op de hero zelf, niet op de inhoudskolom. Zat hij
     op .kh-hero__inhoud, dan stopte hij bij max-width 1200px en zag je op een
     breed scherm een verticale naad in de foto. */
  .kh-hero::before {
    content: "";
    grid-area: 1 / 1;
    z-index: 1;
    background: linear-gradient(100deg,
      rgba(22,40,28,.94) 0%,
      rgba(22,40,28,.88) 34%,
      rgba(22,40,28,.55) 62%,
      rgba(22,40,28,.18) 100%);
  }
}

/* Beloftebalk */
.kh-beloftes { background: var(--kh-groen-mid); color: var(--kh-creme); }
.kh-beloftes ul {
  list-style: none;
  display: grid;
  gap: .25rem;
  margin: 0;
  padding-block: 1rem;
}
.kh-beloftes li {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: var(--kh-raak);
  font-size: .95rem;
}
.kh-beloftes svg { flex: none; width: 22px; height: 22px; color: var(--kh-goud-licht); }
@media (min-width: 768px)  { .kh-beloftes ul { grid-template-columns: 1fr 1fr; gap: .5rem 2rem; } }
@media (min-width: 1024px) { .kh-beloftes ul { grid-template-columns: repeat(4, 1fr); padding-block: 1.15rem; } }

/* Rasters */
.kh-raster { display: grid; gap: 1rem; }
@media (min-width: 768px)  { .kh-raster { gap: 1.25rem; grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .kh-raster--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .kh-raster--4 { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }

/* Categoriekaart */
.kh-catkaart {
  display: grid;
  grid-template-columns: 104px 1fr;
  align-items: stretch;
  gap: 0;
  background: var(--kh-creme-licht);
  border: 1px solid var(--kh-lijn);
  border-radius: var(--kh-rond-kaart);
  overflow: hidden;
  text-decoration: none;
  color: var(--kh-inkt);
  min-height: 104px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.kh-catkaart:hover { box-shadow: var(--kh-schaduw-op); border-color: var(--kh-goud); color: var(--kh-inkt); }
.kh-catkaart .kh-beeld { border-radius: 0; height: 100%; }
.kh-catkaart__tekst {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1rem;
}
.kh-catkaart__tekst h3 { margin: 0; overflow-wrap: break-word; }
.kh-catkaart__tekst span { font-size: .85rem; color: var(--kh-inkt-zacht); display: block; font-family: var(--kh-font-body); }
.kh-catkaart svg { flex: none; width: 20px; height: 20px; color: var(--kh-goud-donker); }
@media (min-width: 768px) {
  .kh-catkaart { grid-template-columns: 1fr; }
  .kh-catkaart .kh-beeld { aspect-ratio: 4 / 3; height: auto; }
}

/* Productkaart — mobiel foto links / tekst rechts, vanaf 768px staand */
.kh-productkaart {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: .9rem;
  padding: .75rem;
  background: var(--kh-creme-licht);
  border: 1px solid var(--kh-lijn);
  border-radius: var(--kh-rond-kaart);
}
.kh-productkaart .kh-beeld { aspect-ratio: 1 / 1; }
.kh-productkaart__tekst { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.kh-productkaart h3 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.25;
}
.kh-productkaart h3 a { color: var(--kh-inkt); text-decoration: none; }
.kh-productkaart h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* de hele kaart klikbaar, maar de knop blijft een eigen doel */
.kh-productkaart h3 a::after { content: ""; position: absolute; inset: 0; }
.kh-toevoegen { position: relative; z-index: 1; margin-top: auto; width: 100%; }
.kh-productkaart .kh-knop { width: 100%; padding-inline: .8rem; }
.kh-productkaart__prijsrij { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .45rem; }
.kh-vlag {
  position: absolute;
  top: .75rem; left: .75rem;
  z-index: 2;
  background: var(--kh-goud);
  color: var(--kh-inkt);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2rem .45rem;
  border-radius: 3px;
}
@media (min-width: 768px) {
  .kh-productkaart { grid-template-columns: 1fr; gap: .75rem; padding: .85rem; }
  .kh-productkaart .kh-knop { width: 100%; }
  .kh-toevoegen { width: 100%; }
}

.kh-onderkant { display: flex; justify-content: center; margin-top: 2rem; }

/* Verhaalblok */
.kh-verhaal { display: grid; gap: 0; }
.kh-verhaal__tekst { background: var(--kh-groen-diep); color: var(--kh-creme); padding: 2.5rem var(--kh-marge); }
.kh-verhaal__tekst h2 { color: var(--kh-wit); }
.kh-verhaal__tekst p { color: #ded8c9; }
.kh-verhaal__beeld { border-radius: 0; min-height: 260px; }
@media (min-width: 768px) {
  .kh-verhaal { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .kh-verhaal__tekst { padding: 3rem 2rem; display: flex; flex-direction: column; justify-content: center; }
  /* Een vaste ondergrens, geen min-height:100%. Dat laatste lost op naar niets
     zolang de rij geen vaste hoogte heeft: de foto kreeg dan hoogte nul en je
     zag alleen de plaatshouderkleur. De rij rekt daarna gewoon mee met de tekst. */
  .kh-verhaal__beeld { min-height: 380px; }
}
@media (min-width: 1024px) {
  .kh-verhaal__beeld { min-height: 460px; }
}
@media (min-width: 1024px) { .kh-verhaal__tekst { padding: 4.5rem 4rem; } }

/* Cadeaublok */
.kh-goudvlak { background: var(--kh-goud-zacht); color: var(--kh-inkt); }
.kh-goudvlak .kh-bovenkop { color: var(--kh-groen-diep); }
.kh-goudvlak .kh-lead { color: #3a3225; }
.kh-goudvlak a:not(.kh-knop):not(.kh-logo) { color: var(--kh-groen-diep); }
.kh-cadeau { display: grid; gap: 2rem; }
.kh-cadeau__lijst { display: grid; gap: 1rem; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
.kh-cadeau__lijst .kh-beeld { aspect-ratio: 4 / 3; background: rgba(35,32,26,.12); }
.kh-cadeau__lijst figcaption { padding-top: .5rem; font-weight: 600; font-size: .95rem; }
.kh-cadeau__lijst small { display: block; font-weight: 400; color: #3a3225; }
@media (min-width: 768px)  { .kh-cadeau__lijst { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .kh-cadeau { grid-template-columns: 5fr 7fr; gap: 3.5rem; align-items: center; } }

/* Bezorgblok */
.kh-bezorg { display: grid; gap: 2rem; }
.kh-tarieven { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.kh-tarieven li {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 56px;
  padding: .6rem .9rem;
  background: var(--kh-creme-licht);
  border: 1px solid var(--kh-lijn);
  border-radius: var(--kh-rond-kaart);
  margin-bottom: .6rem;
}
.kh-tarieven svg { flex: none; width: 24px; height: 24px; color: var(--kh-goud-donker); }
.kh-tarieven b { margin-left: auto; white-space: nowrap; font-size: 1.02rem; }
@media (min-width: 1024px) { .kh-bezorg { grid-template-columns: 5fr 7fr; gap: 3.5rem; align-items: center; } }

/* WhatsApp-blok */
.kh-whatsapp { display: grid; }
.kh-whatsapp__beeld { border-radius: 0; min-height: 220px; }
.kh-whatsapp__tekst { padding: 2.5rem var(--kh-marge); }
@media (min-width: 768px) {
  .kh-whatsapp { grid-template-columns: 1fr 1fr; }
  .kh-whatsapp__tekst { padding: 3rem 2rem; display: flex; flex-direction: column; justify-content: center; }
  .kh-whatsapp__beeld { min-height: 100%; }
}
@media (min-width: 1024px) { .kh-whatsapp__tekst { padding: 4.5rem 4rem; } }

/* ---------- 8. Winkelonderdelen ------------------------------------------ */

/* Broodkruimels */
.kh-kruimels { font-size: .87rem; padding-block: .9rem; border-bottom: 1px solid var(--kh-lijn); }
.kh-kruimels ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; margin: 0; padding: 0; }
.kh-kruimels a { color: var(--kh-inkt-zacht); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--kh-raak); }
.kh-kruimels a:hover { color: var(--kh-inkt); text-decoration: underline; }
.kh-kruimels li[aria-current] { color: var(--kh-inkt); font-weight: 600; }
.kh-kruimels li + li::before { content: "›"; margin-right: .5rem; color: var(--kh-inkt-zacht); }

.kh-paginakop { padding-block: 2rem 1.5rem; }
.kh-paginakop h1 { margin-bottom: .35rem; }
.kh-paginakop p { color: var(--kh-inkt-zacht); max-width: 46rem; }

/* Categoriepagina: filters links, raster rechts */
.kh-winkel { display: grid; gap: 2rem; padding-bottom: 3.5rem; }
@media (min-width: 1024px) { .kh-winkel { grid-template-columns: 260px 1fr; gap: 2.5rem; } }

.kh-filters h2 { font-size: 1.2rem; margin-bottom: .75rem; }
.kh-filtergroep {
  border: 1px solid var(--kh-lijn);
  border-radius: var(--kh-rond-kaart);
  background: var(--kh-creme-licht);
  margin-bottom: .75rem;
  padding: 0 .9rem;
}
.kh-filtergroep > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--kh-raak);
  padding: .6rem 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.kh-filtergroep > summary::-webkit-details-marker { display: none; }
.kh-filtergroep > summary::after { content: "＋"; font-weight: 400; color: var(--kh-inkt-zacht); }
.kh-filtergroep[open] > summary::after { content: "－"; }
.kh-filtergroep[open] > summary { border-bottom: 1px solid var(--kh-lijn); }
.kh-filtergroep__inhoud { padding: .6rem 0 .9rem; }
.kh-vinkje {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: var(--kh-raak);
  font-weight: 400;
  font-size: .95rem;
  cursor: pointer;
  margin: 0;
}
.kh-vinkje input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--kh-groen-diep); }
.kh-vinkje .kh-aantal { margin-left: auto; color: var(--kh-inkt-zacht); font-size: .85rem; }

.kh-prijsfilter { display: flex; align-items: flex-end; gap: .5rem; }
.kh-prijsfilter > div { flex: 1 1 0; min-width: 0; }
.kh-prijsfilter span { padding-bottom: .7rem; }

.kh-resultaatbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding-bottom: 1.25rem;
}
.kh-resultaatbalk p { color: var(--kh-inkt-zacht); font-size: .92rem; }
.kh-sorteer { display: flex; align-items: center; gap: .6rem; }
.kh-sorteer label { margin: 0; white-space: nowrap; }
.kh-sorteer select { width: auto; min-width: 12rem; }

/* Paginering */
.kh-paginering { margin-top: 2.5rem; }
.kh-paginering ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 0; padding: 0; }
.kh-paginering a, .kh-paginering span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--kh-raak);
  min-height: var(--kh-raak);
  padding: 0 .75rem;
  border: 1px solid var(--kh-lijn);
  border-radius: var(--kh-rond-knop);
  background: var(--kh-creme-licht);
  color: var(--kh-inkt);
  text-decoration: none;
  font-weight: 600;
}
.kh-paginering a:hover { background: var(--kh-lijn); }
.kh-paginering [aria-current="page"] { background: var(--kh-groen-diep); border-color: var(--kh-groen-diep); color: var(--kh-creme); }
.kh-paginering .kh-uit { color: var(--kh-inkt-zacht); background: transparent; border-style: dashed; }

/* Productdetail */
.kh-product { display: grid; gap: 2rem; padding-block: 1.5rem 3rem; }
@media (min-width: 768px)  { .kh-product { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; } }
@media (min-width: 1024px) {
  .kh-product { grid-template-columns: 7fr 5fr; gap: 3.5rem; }
  /* de foto blijft in beeld terwijl je de beschrijving leest */
  .kh-galerij { position: sticky; top: 1.25rem; }
}

.kh-galerij__groot { aspect-ratio: 4 / 3; border: 1px solid var(--kh-lijn); }
.kh-galerij__mini { display: flex; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; padding: 0; list-style: none; }
.kh-galerij__mini button {
  width: 72px; height: 72px;
  padding: 0;
  border: 2px solid var(--kh-lijn);
  border-radius: var(--kh-rond-knop);
  background: var(--kh-lijn);
  cursor: pointer;
  overflow: hidden;
}
.kh-galerij__mini button[aria-pressed="true"] { border-color: var(--kh-groen-diep); }
.kh-galerij__mini img { display: block; width: 100%; height: 100%; object-fit: cover; }

.kh-product__kop h1 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); margin-bottom: .35rem; }
.kh-product__merk { color: var(--kh-inkt-zacht); font-size: .95rem; margin-bottom: 1rem; }
.kh-product__prijs { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .25rem; }
.kh-product__prijs .kh-prijs { font-size: 1.7rem; }
.kh-voorraad { display: inline-flex; align-items: center; gap: .45rem; font-size: .92rem; font-weight: 600; color: #1f5c33; margin-bottom: 1.25rem; }
.kh-voorraad svg { width: 18px; height: 18px; }

.kh-kopenrij { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.kh-aantal { display: inline-flex; align-items: stretch; border: 1px solid #c9bfa8; border-radius: var(--kh-rond-knop); background: var(--kh-wit); overflow: hidden; }
.kh-aantal button {
  width: var(--kh-raak); min-height: var(--kh-raak);
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.2rem; font-weight: 700; color: var(--kh-inkt);
  line-height: 1;
}
.kh-aantal button:hover { background: var(--kh-lijn); }
.kh-aantal input {
  width: 3.25rem;
  min-height: var(--kh-raak);
  border: 0;
  border-inline: 1px solid var(--kh-lijn);
  border-radius: 0;
  text-align: center;
  font-weight: 700;
  -moz-appearance: textfield;
}
.kh-aantal input::-webkit-outer-spin-button,
.kh-aantal input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kh-kopenrij .kh-knop { flex: 1 1 12rem; }

.kh-blokken { margin-top: 2rem; border-top: 1px solid var(--kh-lijn); }
.kh-blok { border-bottom: 1px solid var(--kh-lijn); padding-block: 1.25rem; }
.kh-blok h2 { font-size: 1.15rem; margin-bottom: .5rem; }
.kh-blok ul { margin: 0; padding-left: 1.1rem; }
.kh-blok li { margin-bottom: .3rem; }
.kh-specs { list-style: none; padding: 0; margin: 0; }
.kh-specs li { display: flex; gap: 1rem; padding: .45rem 0; border-bottom: 1px dotted var(--kh-lijn); }
.kh-specs li:last-child { border-bottom: 0; }
.kh-specs dt, .kh-specs b { flex: none; width: 9rem; font-weight: 600; }

/* Winkelwagen */
.kh-wagen { display: grid; gap: 2rem; padding-block: 1.5rem 3.5rem; align-items: start; }
@media (min-width: 1024px) { .kh-wagen { grid-template-columns: 7fr 5fr; gap: 3rem; } }
@media (min-width: 1280px) { .kh-wagen { grid-template-columns: 8fr 4fr; } }

.kh-regels { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--kh-lijn); }
.kh-regel {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: .9rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--kh-lijn);
}
.kh-regel .kh-beeld { aspect-ratio: 1 / 1; }
.kh-regel__body { display: grid; gap: .5rem; min-width: 0; }
.kh-regel__kop { display: flex; justify-content: space-between; gap: .75rem; align-items: start; }
.kh-regel h2, .kh-regel h3 { font-size: 1.02rem; margin: 0; }
.kh-regel h3 a {
  display: inline-flex;
  align-items: center;
  min-height: var(--kh-raak);
  color: var(--kh-inkt);
  text-decoration: none;
}
.kh-regel h3 a:hover { text-decoration: underline; }
.kh-regel__meta { font-size: .87rem; color: var(--kh-inkt-zacht); }
.kh-regel__voet { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.kh-regel__totaal { margin-left: auto; font-weight: 700; white-space: nowrap; }
.kh-weg {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: var(--kh-raak);
  background: none; border: 0; padding: 0;
  color: var(--kh-rood);
  font: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.kh-weg:hover { color: var(--kh-inkt); }
.kh-weg svg { width: 16px; height: 16px; }
@media (min-width: 768px) { .kh-regel { grid-template-columns: 104px 1fr; gap: 1.25rem; padding: 1.25rem 0; } }

.kh-wagen__voet { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin-top: 1.5rem; }

/* Samenvatting */
.kh-samenvatting {
  background: var(--kh-creme-licht);
  border: 1px solid var(--kh-lijn);
  border-radius: var(--kh-rond-kaart);
  padding: 1rem;
}
@media (min-width: 1024px) { .kh-samenvatting { position: sticky; top: 1.25rem; padding: 1.5rem; } }
.kh-samenvatting h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.kh-somrij { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; font-size: .97rem; }
.kh-somrij--totaal {
  margin-top: .5rem; padding-top: .9rem;
  border-top: 1px solid var(--kh-lijn);
  font-size: 1.2rem; font-weight: 700;
}
.kh-somrij--totaal small { display: block; font-size: .78rem; font-weight: 400; color: var(--kh-inkt-zacht); }
.kh-gratis { margin: 1rem 0 1.25rem; }
.kh-gratis p { font-size: .92rem; margin-bottom: .5rem; }
.kh-gratis b { color: var(--kh-goud-donker); }
.kh-balk { height: 10px; background: var(--kh-lijn); border-radius: 5px; overflow: hidden; }
.kh-balk span { display: block; height: 100%; background: var(--kh-goud); border-radius: 5px; }
.kh-betaallogos { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.kh-betaallogos img { height: 26px; width: auto; }
.kh-veilig { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; font-size: .87rem; color: var(--kh-inkt-zacht); }
.kh-veilig svg { flex: none; width: 18px; height: 18px; }
.kh-samenvatting__actie { margin-top: 1.25rem; }

/* Gewone tekstpagina (privacy, voorwaarden) */
.kh-tekstpagina { max-width: 44rem; padding-block: 2.5rem 4rem; }
.kh-tekstpagina h2 { margin-top: 2rem; }

/* Afrekenen */
.kh-afrekenen { display: grid; gap: 2rem; padding-block: 1.5rem 3.5rem; align-items: start; }
@media (min-width: 1024px) { .kh-afrekenen { grid-template-columns: 7fr 5fr; gap: 3rem; } }
.kh-stap {
  background: var(--kh-creme-licht);
  border: 1px solid var(--kh-lijn);
  border-radius: var(--kh-rond-kaart);
  padding: 1rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 768px) { .kh-stap { padding: 1.5rem; } }
.kh-stap > h2 {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.25rem; margin-bottom: 1rem;
}
.kh-stap__nr {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--kh-groen-diep);
  color: var(--kh-creme);
  font-family: var(--kh-font-body);
  font-size: .95rem; font-weight: 700;
}
.kh-bestelregels { list-style: none; margin: 0 0 1rem; padding: 0; }
.kh-bestelregels li {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: .75rem;
  align-items: center;
  padding: .6rem 0;
  border-bottom: 1px solid var(--kh-lijn);
  font-size: .95rem;
}
.kh-bestelregels .kh-beeld { aspect-ratio: 1 / 1; border-radius: var(--kh-rond-knop); }
.kh-bestelregels b { display: block; font-weight: 600; }
.kh-bestelregels small { color: var(--kh-inkt-zacht); }

/* ---------- 9. Winkelblok, footer, zwevende knop -------------------------- */

.kh-gegevens { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.kh-gegevens li { display: flex; gap: .75rem; align-items: flex-start; padding: .45rem 0; }
.kh-gegevens svg { flex: none; width: 20px; height: 20px; margin-top: .2rem; color: var(--kh-goud-licht); }
.kh-gegevens a { display: inline-flex; align-items: center; min-height: var(--kh-raak); }

.kh-footer { background: var(--kh-groen-diep); color: var(--kh-creme); border-top: 1px solid rgba(246,241,230,.16); }
.kh-footer__raster { display: grid; gap: 2rem; padding-block: 2.5rem; }
@media (min-width: 768px)  { .kh-footer__raster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .kh-footer__raster { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; } }
.kh-footer h2 {
  font-family: var(--kh-font-body);
  font-size: .82rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--kh-goud-licht);
  margin-bottom: .85rem;
}
.kh-footer ul { list-style: none; margin: 0; padding: 0; }
.kh-footer li a, .kh-footer p a {
  display: inline-flex; align-items: center;
  min-height: var(--kh-raak);
  color: var(--kh-creme);
  text-decoration: none;
}
.kh-footer li a:hover, .kh-footer p a:hover { color: var(--kh-goud-licht); text-decoration: underline; }
.kh-footer__onderschrift { font-size: .9rem; color: #c6c0b0; margin-top: .75rem; }
.kh-sociaal { display: flex; gap: .5rem; margin-top: .5rem; }
.kh-sociaal a {
  display: grid; place-items: center;
  width: var(--kh-raak); height: var(--kh-raak);
  border: 1px solid rgba(246,241,230,.3);
  border-radius: var(--kh-rond-knop);
  color: var(--kh-creme);
}
.kh-sociaal a:hover { background: var(--kh-groen-mid); border-color: var(--kh-goud-licht); }
.kh-sociaal svg { width: 20px; height: 20px; }
.kh-footer__slot {
  display: flex; flex-wrap: wrap; gap: .25rem 1.5rem;
  align-items: center; justify-content: space-between;
  padding-block: 1rem;
  border-top: 1px solid rgba(246,241,230,.16);
  font-size: .87rem;
  color: #c6c0b0;
}

/* Zwevende winkelwagenknop — alleen op mobiel */
.kh-zwevend {
  position: fixed;
  right: 1rem; bottom: 1rem;
  z-index: 40;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--kh-goud);
  color: var(--kh-inkt);
  box-shadow: var(--kh-schaduw-op);
  text-decoration: none;
}
.kh-zwevend:hover { background: var(--kh-goud-licht); color: var(--kh-inkt); }
.kh-zwevend svg { width: 24px; height: 24px; }
.kh-zwevend .kh-teller { top: -2px; right: -2px; border: 2px solid var(--kh-creme); }
@media (min-width: 768px) { .kh-zwevend { display: none; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   10. WooCommerce-integratie
   ==========================================================================
   Alles hierboven komt uit het prototype en is de bron. Hieronder staat wat
   WooCommerce zelf op het scherm zet en wat het prototype niet kent:
   meldingen, formulierregels, de galerij, de verzendbalk van de mu-plugin.
   Regel: geen nieuwe kleuren, geen nieuwe maten — alleen de tokens hierboven.

   Waarom veel selectors een element ervoor hebben (a.kh-knop in plaats van
   .kh-knop): WooCommerce schrijft `a.button` (0,1,1) en dat weegt zwaarder dan
   `.kh-knop` (0,1,0). Onze knoppen dragen beide klassen, dus zonder dit wint
   het grijs van WooCommerce van het goud uit de ontwerpbasis.
   -------------------------------------------------------------------------- */

/* ---------- 10.1 Knoppen die WooCommerce meelevert ----------------------- */

a.kh-knop, button.kh-knop, input.kh-knop {
  min-height: var(--kh-raak);
  padding: .7rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--kh-rond-knop);
  font-family: var(--kh-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
a.kh-knop.kh-knop--goud, button.kh-knop.kh-knop--goud, input.kh-knop.kh-knop--goud {
  background: var(--kh-goud);
  border-color: var(--kh-goud);
  color: var(--kh-inkt);
}
a.kh-knop.kh-knop--goud:hover, button.kh-knop.kh-knop--goud:hover {
  background: var(--kh-goud-licht); border-color: var(--kh-goud-licht); color: var(--kh-inkt);
}
a.kh-knop.kh-knop--groen, button.kh-knop.kh-knop--groen {
  background: var(--kh-groen-diep); border-color: var(--kh-groen-diep); color: var(--kh-creme);
}
a.kh-knop.kh-knop--groen:hover, button.kh-knop.kh-knop--groen:hover {
  background: var(--kh-groen-mid); border-color: var(--kh-groen-mid); color: var(--kh-wit);
}
a.kh-knop.kh-knop--rand, button.kh-knop.kh-knop--rand {
  background: transparent; border-color: var(--kh-inkt); color: var(--kh-inkt);
}
a.kh-knop.kh-knop--rand:hover, button.kh-knop.kh-knop--rand:hover {
  background: var(--kh-inkt); color: var(--kh-creme);
}
/* Knoppen van WooCommerce die wij niet zelf plaatsen (bijv. van een uitbreiding). */
.woocommerce button.button, .woocommerce a.button, .woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--kh-raak);
  padding: .7rem 1.4rem;
  border: 2px solid var(--kh-groen-diep);
  border-radius: var(--kh-rond-knop);
  background: var(--kh-groen-diep);
  color: var(--kh-creme);
  font-family: var(--kh-font-body);
  font-size: 1rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
}
.woocommerce button.button:hover, .woocommerce a.button:hover, .woocommerce input.button:hover {
  background: var(--kh-groen-mid); border-color: var(--kh-groen-mid); color: var(--kh-wit);
}
.woocommerce button.button:disabled, .woocommerce button.button[disabled] {
  opacity: .55; cursor: not-allowed;
}

/* Verborgen tekst van WordPress en WooCommerce = onze .kh-verborgen. */
.screen-reader-text, .woocommerce-form__label-for-checkbox .screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- 10.2 Meldingen ----------------------------------------------- */

.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-error, .woocommerce-info,
ul.woocommerce-error, .wc-block-components-notice-banner {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: .9rem 1rem;
  border: 1px solid var(--kh-lijn);
  border-left: 4px solid var(--kh-groen-diep);
  border-radius: var(--kh-rond-knop);
  background: var(--kh-creme-licht);
  color: var(--kh-inkt);
  font-size: .95rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
}
.woocommerce-error, ul.woocommerce-error { border-left-color: var(--kh-rood); }
.woocommerce-message { border-left-color: var(--kh-goud); }
.woocommerce-message .button, .woocommerce-error .button, .woocommerce-info .button {
  margin-left: auto;
}
.woocommerce-error li { margin: 0; }

/* ---------- 10.3 Verzendbalk (mu-plugin kaasshop-verzending) -------------- */
/* Zelfde vorm als .kh-gratis + .kh-balk in de samenvatting, maar dan als losse
   balk boven de winkelwagen en het afrekenen. */

.kh-verzendbalk {
  margin: 0 0 1.5rem;
  padding: .85rem 1rem;
  background: var(--kh-creme-licht);
  border: 1px solid var(--kh-lijn);
  border-radius: var(--kh-rond-kaart);
}
.kh-verzendbalk__tekst { margin: 0 0 .5rem; font-size: .95rem; }
.kh-verzendbalk__tekst strong { color: var(--kh-goud-donker); }
.kh-verzendbalk__tekst--gehaald { font-weight: 600; color: #1f5c33; margin-bottom: .5rem; }
.kh-verzendbalk__spoor {
  height: 10px;
  background: var(--kh-lijn);
  border-radius: 5px;
  overflow: hidden;
}
.kh-verzendbalk__spoor span {
  display: block; height: 100%;
  background: var(--kh-goud);
  border-radius: 5px;
}

/* ---------- 10.4 Formulieren van WooCommerce ----------------------------- */

p.form-row, .form-row { margin: 0 0 1rem; padding: 0; }
p.form-row label, .form-row > label {
  display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem;
}
.form-row .required { color: var(--kh-rood); text-decoration: none; border: 0; }
.form-row .optional { color: var(--kh-inkt-zacht); font-weight: 400; }
.form-row-first, .form-row-last { width: 100%; float: none; }
@media (min-width: 768px) {
  .form-row-first, .form-row-last {
    width: calc(50% - .55rem); display: inline-block; vertical-align: top;
  }
  .form-row-first { margin-right: 1rem; }
}
.form-row-wide { clear: both; }
/* select2 (land- en provinciekeuze) in dezelfde vorm als onze eigen velden. */
.select2-container .select2-selection--single {
  height: var(--kh-raak);
  border: 1px solid #c9bfa8;
  border-radius: var(--kh-rond-knop);
  background: var(--kh-wit);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: var(--kh-raak); color: var(--kh-inkt); padding-left: .75rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: var(--kh-raak); }
.select2-dropdown { border-color: #c9bfa8; }
.woocommerce-input-wrapper { display: block; }
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select { border-color: var(--kh-rood); }
.woocommerce form .form-row.woocommerce-invalid label { color: var(--kh-rood); }
/* Het aankruisvakje "ander bezorgadres" en de voorwaarden. */
.woocommerce-form__label-for-checkbox, .woocommerce-terms-and-conditions-wrapper label.checkbox {
  display: flex; align-items: center; gap: .6rem;
  min-height: var(--kh-raak);
  font-weight: 400; cursor: pointer;
}
.woocommerce-form__label-for-checkbox input[type="checkbox"],
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
  width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--kh-groen-diep);
}
.woocommerce-terms-and-conditions-wrapper { margin-bottom: 1rem; }

/* ---------- 10.5 Aantalkiezer -------------------------------------------- */
/* .kh-aantal staat in het prototype (sectie 8). Hier alleen wat WooCommerce
   nodig heeft: het veld heet daar input.qty en krijgt soms readonly mee. */

.kh-aantal input.qty { width: 3.25rem; }
.kh-aantal input[readonly] { background: var(--kh-creme-licht); }
.kh-aantal--vast .kh-aantal__knop { display: none; }
.kh-aantal .kh-aantal__knop { font-family: var(--kh-font-body); }

/* ---------- 10.6 Winkelwagen --------------------------------------------- */

.kh-wagen .cart-collaterals { display: contents; }
.kh-regels .kh-regel:first-child { border-top: 0; }
.kh-regel .kh-beeld img { border-radius: var(--kh-rond-kaart); }
.kh-regel .variation { margin: 0; font-size: .87rem; color: var(--kh-inkt-zacht); }
.kh-regel .variation dt, .kh-regel .variation dd { display: inline; margin: 0; }
.kh-wagen__voet .kh-bon { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.kh-wagen__voet .kh-bon input { min-width: 10rem; }

/* De totalen van WooCommerce staan in een <table>; die vorm laten we staan,
   want wc_cart_totals_*_html() geeft <tr> terug. We geven de rijen alleen de
   vorm van .kh-somrij uit het prototype. */
.kh-samenvatting .shop_table { width: 100%; border-collapse: collapse; margin: 0; }
.kh-samenvatting .shop_table tr {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .4rem 0; font-size: .97rem;
}
.kh-samenvatting .shop_table th,
.kh-samenvatting .shop_table td {
  padding: 0; border: 0; text-align: left; font-weight: 400;
}
.kh-samenvatting .shop_table th { font-weight: 400; }
.kh-samenvatting .shop_table td { text-align: right; }
.kh-samenvatting .shop_table td.product-name,
.kh-samenvatting .shop_table th { text-align: left; }
.kh-samenvatting .shop_table tr.order-total {
  margin-top: .5rem; padding-top: .9rem;
  border-top: 1px solid var(--kh-lijn);
  font-size: 1.2rem;
}
.kh-samenvatting .shop_table tr.order-total th,
.kh-samenvatting .shop_table tr.order-total td { font-weight: 700; }
.kh-samenvatting .shop_table tr.order-total small,
.kh-samenvatting .shop_table .includes_tax {
  display: block; font-size: .78rem; font-weight: 400; color: var(--kh-inkt-zacht);
}
.kh-samenvatting .shop_table thead { display: none; }
.kh-samenvatting .wc-proceed-to-checkout { margin-top: 1.25rem; }
.kh-samenvatting .woocommerce-shipping-destination { font-size: .85rem; color: var(--kh-inkt-zacht); }
.kh-samenvatting .shipping-calculator-button { font-size: .9rem; }

/* Verzendkeuzes in de totalen: staand, met genoeg aanraakruimte. */
#shipping_method, ul#shipping_method {
  list-style: none; margin: 0; padding: 0; text-align: left; width: 100%;
}
#shipping_method li {
  display: flex; align-items: flex-start; gap: .6rem;
  min-height: var(--kh-raak);
  padding: .35rem 0;
}
#shipping_method li input[type="radio"] {
  width: 20px; height: 20px; margin: .2rem 0 0; flex: none; accent-color: var(--kh-groen-diep);
}
#shipping_method li label {
  margin: 0; font-weight: 400; font-size: .95rem;
  display: flex; flex-wrap: wrap; gap: 0 .4rem;
  /* zonder dit duwt een lange methodenaam de kolom breder dan het scherm */
  min-width: 0; overflow-wrap: anywhere;
}
#shipping_method .amount { font-weight: 700; }

/* ---------- 10.7 Afrekenen ----------------------------------------------- */

.kh-bestelregels .kh-beeld img { border-radius: var(--kh-rond-knop); }
.kh-samenvatting .woocommerce-checkout-review-order-table tbody tr {
  align-items: flex-start;
  border-bottom: 1px solid var(--kh-lijn);
  padding: .6rem 0;
}
.kh-samenvatting .woocommerce-checkout-review-order-table .product-name {
  display: flex; align-items: center; gap: .75rem; min-width: 0; overflow-wrap: anywhere;
}
.kh-samenvatting .woocommerce-checkout-review-order-table .product-thumbnail img {
  width: 48px; height: 48px; object-fit: cover; border-radius: var(--kh-rond-knop); display: block;
}
.kh-samenvatting .woocommerce-checkout-review-order-table .product-quantity {
  display: block; font-weight: 400; font-size: .87rem; color: var(--kh-inkt-zacht);
}

/* Betaalmethoden krijgen de vorm van .kh-keuze uit het prototype. */
.wc_payment_methods { list-style: none; margin: 0 0 1rem; padding: 0; }
.wc_payment_methods > li {
  border: 1px solid var(--kh-lijn);
  border-radius: var(--kh-rond-knop);
  background: var(--kh-wit);
  margin-bottom: .6rem;
  padding: .75rem 1rem;
}
.wc_payment_methods > li:has(input:checked) {
  border-color: var(--kh-goud); box-shadow: inset 0 0 0 1px var(--kh-goud);
}
.wc_payment_methods > li > label {
  display: flex; align-items: center; gap: .75rem;
  min-height: 32px;
  margin: 0; font-weight: 600; cursor: pointer;
  min-width: 0; overflow-wrap: anywhere;
}
.wc_payment_methods > li > input[type="radio"] {
  width: 22px; height: 22px; margin: 0 .75rem 0 0; flex: none;
  accent-color: var(--kh-groen-diep); float: left;
}
.wc_payment_methods img { max-height: 26px; width: auto; margin-left: auto; }
.wc_payment_methods .payment_box {
  margin: .6rem 0 0; padding: .75rem 1rem;
  background: var(--kh-creme-licht);
  border-radius: var(--kh-rond-knop);
  font-size: .9rem;
}
.wc_payment_methods .payment_box p:last-child { margin-bottom: 0; }
#place_order { width: 100%; }
.woocommerce-privacy-policy-text { font-size: .87rem; color: var(--kh-inkt-zacht); }
.woocommerce-privacy-policy-text p:last-child { margin-bottom: 0; }

/* Een keuzeblok mag nooit breder worden dan het scherm. min-width alleen is
   niet genoeg: de min-content van een flexitem blijft anders zo breed als het
   langste woord ("Heyhoefpromenade"), en dat duwde de afrekenpagina op 320px
   acht pixels naar rechts. overflow-wrap:anywhere haalt die bodem weg. */
.kh-keuze > span { min-width: 0; overflow-wrap: anywhere; }

/* ---------- 10.8 Productpagina ------------------------------------------- */

.woocommerce-product-gallery { margin: 0; }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__image:first-child a,
.woocommerce-product-gallery__image:first-child img {
  display: block; width: 100%; border-radius: var(--kh-rond-kaart);
}
.woocommerce-product-gallery .flex-viewport {
  border: 1px solid var(--kh-lijn);
  border-radius: var(--kh-rond-kaart);
  overflow: hidden;
}
.woocommerce-product-gallery .flex-control-thumbs {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin: .6rem 0 0; padding: 0; list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs li { width: 72px; }
.woocommerce-product-gallery .flex-control-thumbs img {
  width: 72px; height: 72px; object-fit: cover;
  border: 2px solid var(--kh-lijn);
  border-radius: var(--kh-rond-knop);
  cursor: pointer; display: block;
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover { border-color: var(--kh-groen-diep); }
.woocommerce-product-gallery__trigger {
  position: absolute; top: .6rem; right: .6rem; z-index: 3;
  min-width: var(--kh-raak); min-height: var(--kh-raak);
  border: 1px solid var(--kh-lijn); border-radius: var(--kh-rond-knop);
  background: var(--kh-wit); color: var(--kh-inkt);
  font-size: 1.1rem; cursor: pointer;
}
/* Zonder JavaScript toont WooCommerce alle foto's onder elkaar; dat is prima,
   maar dan wel netjes onder elkaar en niet in volle grootte. */
.woocommerce-product-gallery--zonder-js .woocommerce-product-gallery__image {
  margin-bottom: .6rem;
}

/* De voorraadregel van WooCommerce in de vorm van .kh-voorraad. */
.kh-product__kop .stock {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .92rem; font-weight: 600; margin: 0 0 1.25rem;
}
.kh-product__kop .stock.in-stock { color: #1f5c33; }
.kh-product__kop .stock.out-of-stock, .kh-product__kop .stock.available-on-backorder { color: var(--kh-rood); }
.kh-kopenrij .single_add_to_cart_button { flex: 1 1 12rem; }
.kh-product__prijs .kh-prijs del { font-weight: 400; font-size: .95rem; color: var(--kh-inkt-zacht); }
.kh-product__prijs .kh-prijs ins { text-decoration: none; }

/* Doorgestreepte oude prijs zoals .kh-prijs-oud, ook als WooCommerce hem in
   <del>/<ins> zet in plaats van in een eigen span. */
.kh-prijs del, .kh-productkaart__prijsrij del {
  font-weight: 400; font-size: .95rem; color: var(--kh-inkt-zacht);
}
.kh-prijs ins, .kh-productkaart__prijsrij ins { text-decoration: none; background: none; color: inherit; }
.kh-prijs .woocommerce-Price-currencySymbol { margin-right: .1em; }

/* ---------- 10.9 Losse dingen -------------------------------------------- */

/* Betaalmerk als tekst, zolang het officiële iDEAL-logo nog niet geleverd is. */
.kh-betaalmerk {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 54px; height: 30px; padding: 0 .5rem;
  border: 1px solid rgba(246, 241, 230, .35);
  border-radius: 3px;
  background: var(--kh-wit);
  color: #cc0066;              /* huisrood van iDEAL, op wit 5,1:1 */
  font-size: .75rem; font-weight: 700; letter-spacing: .02em;
}

/* Het wippen van de teller nadat er iets in de winkelwagen is gelegd. */
@keyframes kh-wip {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.kh-teller--wip { animation: kh-wip .35s ease; }

/* Berichten en gewone tekstpagina's. */
.kh-artikel { padding-block: 1.5rem; border-bottom: 1px solid var(--kh-lijn); }
.kh-artikel:last-child { border-bottom: 0; }
.kh-artikel h2 { font-size: clamp(1.3rem, 3vw, 1.75rem); margin-bottom: .3rem; }
.kh-artikel h2 a { color: var(--kh-inkt); text-decoration: none; }
.kh-artikel h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kh-meta { font-size: .87rem; color: var(--kh-inkt-zacht); margin-bottom: .6rem; }
.kh-tekstpagina img { height: auto; border-radius: var(--kh-rond-kaart); }
.kh-tekstpagina ul, .kh-tekstpagina ol { padding-left: 1.2rem; }
.kh-tekstpagina li { margin-bottom: .4rem; }
.kh-leeg { padding-block: 2rem 3rem; }

/* Zoekvak op de 404- en zoekpagina: geen inklapper, gewoon een blok. */
.kh-zoek--blok { display: block; order: 0; flex: none; max-width: 26rem; padding: 0; margin-bottom: 1.5rem; }

/* ---------- 10.10 Kolommen die niet mogen uitzetten ----------------------- */
/* Een rasterkind heeft standaard min-width:auto en wordt dus zo breed als zijn
   breedste inhoud. Bij echte productnamen ("CHOCO CAPUCCINOBOLLEN") duwt dat de
   kolom voorbij de schermrand. min-width:0 haalt die bodem weg; met
   overflow-wrap breekt een te lang woord in plaats van uit te steken. */

.kh-winkel > *, .kh-product > *, .kh-wagen > *, .kh-afrekenen > *,
.kh-verhaal > *, .kh-cadeau > *, .kh-bezorg > *,
.kh-footer__raster > *, .kh-raster > * { min-width: 0; }

/* anywhere en niet break-word: alleen 'anywhere' verlaagt óók de min-content
   van het element. Met break-word blijft "MOSTERDMANNEKE" de ondergrens van de
   kolom en schuift de winkelwagenregel op 360px 4px buiten beeld. Gemeten, niet
   geraden — zie thema/VERSLAG.md. */
.kh-productkaart h3, .kh-regel h3,
.kh-catkaart__tekst h3, .kh-samenvatting .product-name,
.kh-regel__kop, .kh-bestelregels b { overflow-wrap: anywhere; }

/* De h1 op de productpagina hoorde hier niet bij: op 40px brak "Cashewnoten"
   middenin een woord tot "Cashewnot / en". Op een brede kolom is dat nooit
   nodig; alleen op een heel smal scherm laten we het alsnog toe. */
.kh-product__kop h1 { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 480px) { .kh-product__kop h1 { overflow-wrap: anywhere; } }

/* De sorteerkeuze staat naast de resultaatteller. Op een smal scherm past een
   optietekst als "Prijs: hoog naar laag" daar niet naast; dan onder elkaar. */
@media (max-width: 480px) {
  .kh-sorteer { flex-wrap: wrap; }
  .kh-sorteer select { min-width: 0; width: 100%; }
}

/* WooCommerce zet de klant- en bezorgvelden in .col2-set naast elkaar (48%).
   Het prototype zet de stappen onder elkaar over de volle breedte. */
.kh-afrekenen .col2-set { display: block; }
.kh-afrekenen .col2-set .col-1,
.kh-afrekenen .col2-set .col-2 { float: none; width: 100%; }
.kh-afrekenen__stappen { min-width: 0; }
.kh-afrekenen .kh-stap:last-child { margin-bottom: 0; }
.kh-afrekenen .woocommerce-shipping-fields h3,
.kh-afrekenen .woocommerce-additional-fields h3 {
  font-family: var(--kh-font-body);
  font-size: .95rem;
  font-weight: 600;
  margin: 1.25rem 0 .5rem;
}

/* Foto bij een bestelregel in de samenvatting. */
.kh-samenvatting .product-thumbnail {
  flex: none;
  width: 48px; height: 48px;
  border-radius: var(--kh-rond-knop);
}

/* De galerij is een rasterkolom en moet dus ook kunnen krimpen. */
.kh-galerij { min-width: 0; }
.kh-galerij img { height: auto; }

/* ---------- 10.11 Twee dingen die WooCommerce anders noemt ---------------- */

/* De aanbiedingsvlag op de productpagina heet bij WooCommerce .onsale. Zelfde
   vorm als .kh-vlag op de kaart. */
.kh-galerij .onsale, .woocommerce-product-gallery .onsale {
  position: absolute;
  top: .75rem; left: .75rem;
  z-index: 2;
  margin: 0;
  background: var(--kh-goud);
  color: var(--kh-inkt);
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .2rem .45rem;
  border-radius: 3px;
}
.kh-galerij { position: relative; }

/* Een sfeerblok zonder foto: het lichte lijnvlak van .kh-beeld valt in een
   donkere sectie uit de toon. Zolang de foto's er nog niet zijn, blijft het
   vlak dan gewoon groen in plaats van een lichte balk. */
.kh-hero .kh-beeld:not(:has(img)),
.kh-verhaal .kh-beeld:not(:has(img)),
.kh-whatsapp .kh-beeld:not(:has(img)) { background: var(--kh-groen-mid); }

/* ---------- 10. Correcties na de eerste live-meting ---------------------- */

/* WooCommerce zet zelf een marge achter het euroteken, terwijl wc_price er al
   een vaste spatie in zet. Samen gaf dat "€  45" met een gat erin. */
.woocommerce-Price-currencySymbol { margin-right: 0; }
/* Deze regel stond eerst alleen op .kh-beloftes en .kh-bezorg. Hij is algemeen
   gemaakt omdat een bedrag nergens over twee regels hoort te breken.

   Eerlijk over de onderbouwing: de breuk in de topbalk is NIET door deze regel
   verholpen maar door `display: block` in sectie 19 — die breuk zat tussen de
   zin en het bedrag, niet binnen het bedrag. Binnen het bedrag zelf zet
   wc_price() al een harde spatie, dus daar valt weinig te breken. Wat deze
   regel wel dekt: aanbiedingsprijzen en prijsbereiken, die uit losse spans
   bestaan. (Aangescherpt na de code-review van 2026-09-04.) */
.woocommerce-Price-amount { white-space: nowrap; }

/* Verderop staat `a.kh-knop.kh-knop--rand` met donkere inkt. Dat weegt zwaarder
   dan `.kh-donker .kh-knop--rand`, dus binnen een donkergroene sectie werd die
   knop zwart op donkergroen — onzichtbaar. Zelfde gewicht terugleggen. */
.kh-donker a.kh-knop.kh-knop--rand,
.kh-donker button.kh-knop.kh-knop--rand {
  border-color: var(--kh-creme);
  color: var(--kh-creme);
}
.kh-donker a.kh-knop.kh-knop--rand:hover,
.kh-donker button.kh-knop.kh-knop--rand:hover {
  background: var(--kh-creme);
  color: var(--kh-groen-diep);
}

/* Zelfde valkuil als bij .kh-verhaal__beeld: min-height:100% lost op naar niets
   zolang de rij geen vaste hoogte heeft, en dan krijgt de foto hoogte nul. */
@media (min-width: 768px) {
  .kh-whatsapp__beeld { min-height: 340px; }
}
@media (min-width: 1024px) {
  .kh-whatsapp__beeld { min-height: 420px; }
}

/* De bijschriften onder de cadeaufoto's zijn geen leeslinks maar labels bij een
   plaatje. Een onderstreping maakt er een rommelige lijst van. */
.kh-cadeau__lijst figcaption a { text-decoration: none; color: inherit; }
.kh-cadeau__lijst figcaption a:hover { text-decoration: underline; }

/* De sfeerblokken met een vaste minimumhoogte kregen hun foto niet in beeld: in
   het rasterveld van .kh-beeld kwam de img op breedte nul uit. Deze twee blokken
   vullen we daarom absoluut binnen de (al aanwezige) position:relative. */
.kh-whatsapp__beeld img,
.kh-verhaal__beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 11. Correcties uit de meting van web-verify ------------------ */

/* WooCommerce dimensioneert a.remove op één teken (font-size 1.5em, width 1em)
   omdat daar normaal een kruisje in staat. Dit thema zet er het woord
   "Verwijderen" in en overschreef die maten niet: 142px tekst in een doos van
   24px. Bij 360px liep de winkelwagen daardoor 68px buiten het scherm. */
.woocommerce a.remove.kh-weg,
a.remove.kh-weg {
  width: auto;
  height: auto;
  line-height: 1.4;
  font-size: .9rem;
  font-weight: 500;
  border-radius: var(--kh-rond-knop);
  padding: .25rem .1rem;
  color: var(--kh-rood);
  background: none;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.woocommerce a.remove.kh-weg:hover,
a.remove.kh-weg:hover {
  color: var(--kh-wit);
  background: var(--kh-rood);
  text-decoration: none;
  padding-inline: .45rem;
}

/* "Op voorraad" haalde 3,03:1 — dat is WooCommerce's eigen #958e09.
   Let op de specificiteit: WooCommerce gebruikt
       .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock
   en `:where()` telt nul mee, dus die regel weegt (0,3,1). Een eenvoudige
   `.woocommerce .stock` weegt (0,2,0) en komt er nooit aan — volgorde helpt niet.
   Hieronder staat hetzelfde gewicht of zwaarder, zodat het wél aankomt. */
.stock { color: #1f5c33; font-weight: 600; }
.woocommerce div.product .stock,
.woocommerce ul.products li.product .stock,
.woocommerce div.product p.stock,
.kh-product__kop .stock { color: #1f5c33; font-weight: 600; }

.stock.out-of-stock,
.stock.available-on-backorder,
.woocommerce div.product .stock.out-of-stock,
.woocommerce div.product .stock.available-on-backorder,
.woocommerce ul.products li.product .stock.out-of-stock { color: var(--kh-rood); }

/* WooCommerce zet de verwijderlink met !important op var(--wc-red) = #aa0000.
   Dat haalt 6,88:1 en is dus niet fout, maar het staat los van ons palet.
   Met een eigen !important nemen we die kleur in eigen beheer. */
.woocommerce a.remove.kh-weg,
a.remove.kh-weg { color: var(--kh-rood) !important; }
.woocommerce a.remove.kh-weg:hover,
a.remove.kh-weg:hover { color: var(--kh-wit) !important; }

/* De eenheid achter de prijs ("/ stuk") stond op het gouden vlak op 2,90:1.
   Binnen dat vlak een donkerdere tint; buiten blijft hij zoals hij was. */
.kh-goudvlak .kh-eenheid { color: #3a3225; } /* 5,03:1 op het gouden vlak */

/* ---------- 12. Reparaties uit het ontwerpoordeel ------------------------ */

/* A. DE BELANGRIJKSTE. WooCommerce zet in woocommerce-layout.css
      div.product div.images{float:left;width:48%}, div.product div.summary
      {float:right;width:48%} en .cart-collaterals .cart_totals{float:right;
      width:48%}. Dit thema zette die nooit uit. Binnen onze eigen rasters
      halveerde dat de kolom nog eens: de productfoto stond op 305px in een
      spoor van 634px, met 1525px leeg vlak eronder, en de samenvatting van de
      winkelwagen stond ónder de regels in plaats van ernaast.
      Onder 769px viel het niet op omdat woocommerce-smallscreen.css daar
      width:100% zet — de pagina was dus kapot op precies de schermen waarop
      iemand koopt, en heel op de telefoon. */
.kh-product .woocommerce-product-gallery,
.kh-product .kh-product__kop,
.kh-product div.images,
.kh-product div.summary,
.kh-wagen .kh-samenvatting,
.kh-wagen .cart-collaterals,
.kh-wagen .cart_totals {
  float: none;
  width: auto;
  clear: none;
}
.woocommerce-product-gallery__wrapper img { width: 100%; height: auto; }

/* C. Alle 203 productfoto's staan op een witte studio-achtergrond. Op een lichte
      ondergrond laat multiply dat wit wegvallen: de kaas komt op het creme vlak
      te liggen in plaats van in een wit doosje. Niet toepassen op donkere
      secties — daar vreet multiply de foto op. */
.kh-productkaart .kh-beeld,
.kh-catkaart .kh-beeld,
.kh-cadeau__lijst .kh-beeld,
.kh-regel .kh-beeld { background: transparent; }

.kh-productkaart .kh-beeld img,
.kh-catkaart .kh-beeld img,
.kh-cadeau__lijst .kh-beeld img,
.kh-regel .kh-beeld img { mix-blend-mode: multiply; }

/* D. Creme pagina, creme kaart met rand, wit fotovlak, witte foto: drie bijna
      gelijke tinten met een lijntje ertussen. Dat is de handtekening van een
      themasjabloon uit 2014. De foto is het kaartje. */
.kh-productkaart,
.kh-catkaart {
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.kh-productkaart .kh-beeld img,
.kh-catkaart .kh-beeld img { transition: transform .4s ease; }
.kh-productkaart:hover .kh-beeld img,
.kh-catkaart:hover .kh-beeld img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .kh-productkaart .kh-beeld img,
  .kh-catkaart .kh-beeld img { transition: none; }
  .kh-productkaart:hover .kh-beeld img,
  .kh-catkaart:hover .kh-beeld img { transform: none; }
}

/* E. Twaalf massief gouden balken onder elkaar op een categoriepagina: je ziet
      de knoppen, niet de kaas. Goud houden we voor de productpagina en de
      winkelwagen; in het raster een rustige randknop. */
.kh-productkaart .kh-knop {
  width: auto;
  padding: .45rem .9rem;
  background: transparent;
  border: 1px solid var(--kh-groen-diep);
  color: var(--kh-groen-diep);
  font-size: .9rem;
}
.kh-productkaart:hover .kh-knop,
.kh-productkaart .kh-knop:focus-visible {
  background: var(--kh-groen-diep);
  color: var(--kh-creme);
}

/* A2. De eerste poging woog te licht. WooCommerce gebruikt `div.product div.images`
       en `div.product div.summary` — twee typen plus twee klassen, dus (0,2,2).
       `.kh-product .woocommerce-product-gallery` is (0,2,0) en komt er niet aan.
       Hieronder staat (0,3,1): drie klassen wegen zwaarder dan twee. */
.kh-product div.woocommerce-product-gallery.images,
.kh-product div.kh-product__kop.summary,
.kh-wagen div.cart-collaterals .cart_totals,
.kh-wagen .cart-collaterals div.cart_totals {
  float: none;
  width: auto;
  clear: none;
}

/* De galerij krijgt van WooCommerce `style="opacity:0"` mee en wordt pas zichtbaar
   als flexslider hem initialiseert. Gaat dat mis, dan blijft de productfoto
   onzichtbaar terwijl alles eromheen gewoon staat — precies wat hier gebeurde.
   Deze regel maakt de foto onafhankelijk van dat script. */
.woocommerce-product-gallery { opacity: 1 !important; }

/* A3. Ook (0,3,1) volstond niet. De echte regel van WooCommerce is
       `.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product div.images`
       — `:where()` telt nul, maar de rest weegt (0,3,2). Verder opbieden levert
       een onleesbare selector op; hier is !important het eerlijke gereedschap,
       met deze uitleg erbij zodat niemand zich later afvraagt waarom. */
.kh-product div.woocommerce-product-gallery.images,
.kh-product div.kh-product__kop.summary,
.kh-wagen .cart-collaterals,
.kh-wagen .cart_totals {
  float: none !important;
  width: auto !important;
  clear: none !important;
  margin-inline: 0 !important;
}

/* ---------- 13. Mozaiek bovenaan de homepage ----------------------------- */

/* De indeling van de oude winkel: twee grote vlakken links en rechts, de
   verzendkosten in het midden, en daaronder drie kleine. Die opbouw is bewust
   behouden. Nieuw is dat de categorienaam in tekst over de foto staat in plaats
   van erin gebakken — dat schaalde niet mee en werd afgeknipt. */

.kh-mozaiek {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.kh-tegel {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 200px;
  border-radius: var(--kh-rond-kaart);
  background: var(--kh-groen-diep);
  color: var(--kh-creme);
  text-decoration: none;
  isolation: isolate;
}

.kh-tegel__beeld {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
}
.kh-tegel__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.kh-tegel:hover .kh-tegel__beeld img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .kh-tegel__beeld img { transition: none; }
  .kh-tegel:hover .kh-tegel__beeld img { transform: none; }
}

/* De waas maakt de naam leesbaar, ook boven een foto met een lichte onderkant.
   Bovenaan blijft de foto onaangetast. */
.kh-tegel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(15, 26, 18, .92) 0%,
    rgba(15, 26, 18, .72) 26%,
    rgba(15, 26, 18, .18) 55%,
    rgba(15, 26, 18, 0) 78%);
}

.kh-tegel__label {
  position: relative;
  z-index: 2;
  display: block;
  padding: 1.25rem 1.1rem 1.1rem;
  margin-top: auto;
}
.kh-tegel { display: flex; flex-direction: column; justify-content: flex-end; }

.kh-tegel__naam {
  display: block;
  font-family: var(--kh-font-kop);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--kh-wit);
}
.kh-tegel__onder {
  display: block;
  margin-top: .2rem;
  font-size: .9rem;
  color: #ded8c9;
}

.kh-tegel svg {
  position: absolute;
  z-index: 2;
  right: 1.1rem;
  bottom: 1.35rem;
  width: 24px;
  height: 24px;
  color: var(--kh-goud-licht);
  transition: transform .25s ease;
}
.kh-tegel:hover svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .kh-tegel:hover svg { transform: none; } }

.kh-tegel__vlag {
  display: inline-block;
  margin-bottom: .5rem;
  padding: .2rem .5rem;
  border-radius: 3px;
  background: var(--kh-goud);
  color: var(--kh-inkt);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Het actievlak heeft geen foto; die krijgt de goudtint als vlak. */
.kh-tegel--actie { background: var(--kh-groen-mid); }
.kh-tegel--actie::before { background: none; }

/* De verzendkaart: geen foto, wel dezelfde hoogte en hoeken. */
.kh-mozaiek__kaart {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .75rem;
  padding: 1.5rem 1.35rem;
  border: 1px solid var(--kh-lijn);
  border-radius: var(--kh-rond-kaart);
  background: var(--kh-creme-licht);
}
.kh-mozaiek__tarieven { list-style: none; margin: 0; padding: 0; }
.kh-mozaiek__tarieven li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--kh-lijn);
  font-size: .95rem;
}
.kh-mozaiek__tarieven li:last-child { border-bottom: 0; }
.kh-mozaiek__tarieven b { font-weight: 700; white-space: nowrap; }
.kh-mozaiek__gratis { color: #1f5c33; }
.kh-mozaiek__noot { margin: 0; font-size: .85rem; color: var(--kh-inkt-zacht); }

@media (min-width: 768px) {
  .kh-mozaiek { grid-template-columns: repeat(2, 1fr); }
  .kh-tegel { min-height: 240px; }
}

@media (min-width: 1024px) {
  .kh-mozaiek {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 400px 220px;
    gap: 1.25rem;
  }
  .kh-tegel { min-height: 0; }
  .kh-tegel--groot-links  { grid-column: 1; grid-row: 1; }
  .kh-mozaiek__kaart      { grid-column: 2; grid-row: 1; }
  .kh-tegel--groot-rechts { grid-column: 3; grid-row: 1; }
  .kh-tegel--groot-links .kh-tegel__naam,
  .kh-tegel--groot-rechts .kh-tegel__naam { font-size: 2rem; }
}

/* De kaasfoto's staan op wit met het product laag in beeld. Bij een uitsnede op
   het midden zie je in een staande tegel vooral de witte lucht erboven. Iets
   naar beneden opschuiven zet het product in beeld; bij de volvlakse
   notenfoto's maakt het geen zichtbaar verschil. */
.kh-tegel__beeld img { object-position: center 68%; }

/* ---------- 14. Correcties uit meetronde 2 ------------------------------- */

/* E2. De randknop in het productraster kwam niet aan: `.kh-productkaart .kh-knop`
       weegt (0,2,0) en verliest van `a.kh-knop.kh-knop--goud` (0,2,1), ongeacht
       de volgorde. Hieronder (0,3,1). Dit is niet alleen smaak: een gouden vlak
       op creme geeft een begrenzing van 2,40:1 en WCAG 1.4.11 vraagt 3,0 voor de
       omtrek van een bedieningselement. Met de groene rand wordt dat 13,78:1. */
.kh-productkaart a.kh-knop.kh-knop--goud,
.kh-productkaart button.kh-knop.kh-knop--goud,
.kh-productkaart input.kh-knop.kh-knop--goud {
  width: auto;
  padding: .45rem .9rem;
  background: transparent;
  border: 1px solid var(--kh-groen-diep);
  color: var(--kh-groen-diep);
  font-size: .9rem;
}
.kh-productkaart:hover a.kh-knop.kh-knop--goud,
.kh-productkaart a.kh-knop.kh-knop--goud:focus-visible,
.kh-productkaart:hover button.kh-knop.kh-knop--goud,
.kh-productkaart button.kh-knop.kh-knop--goud:focus-visible {
  background: var(--kh-groen-diep);
  color: var(--kh-creme);
}

/* De afrekenknop stond nog in het paars van WooCommerce (rgb(127,84,179)):
   `button.button.alt` weegt (0,3,1) en versloeg onze regel. Dit is de knop
   waarmee iemand een bestelling plaatst — die hoort niet in een vreemde kleur. */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce button.button.alt:hover,
.woocommerce #place_order.button.alt {
  background: var(--kh-goud);
  border: 1px solid var(--kh-goud);
  color: var(--kh-inkt);
  font-weight: 600;
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce #place_order.button.alt:hover {
  background: var(--kh-goud-licht);
  border-color: var(--kh-goud-licht);
  color: var(--kh-inkt);
}

/* Twee bedieningselementen in de winkelwagen haalden 44px niet: de keuzerondjes
   van de verzendmethode (20x20) en "Bereken verzendkosten" (hoogte 23,3). */
#shipping_method li,
.woocommerce-shipping-calculator > a {
  display: flex;
  align-items: center;
  min-height: var(--kh-raak);
}
#shipping_method input[type="radio"] {
  width: 20px;
  height: 20px;
  margin-right: .55rem;
  flex: none;
}
#shipping_method label { min-height: var(--kh-raak); display: flex; align-items: center; }
.woocommerce-shipping-calculator > a { padding-block: .6rem; }

/* De naam op de lichtste tegels haalde 3,49:1 tegen de fotopixels. Dat is genoeg
   voor 24px vette tekst (drempel 3,0) maar zonder marge. De waas onderaan iets
   dieper geeft lucht zonder de foto dicht te smeren. */
.kh-tegel::before {
  background: linear-gradient(to top,
    rgba(15, 26, 18, .96) 0%,
    rgba(15, 26, 18, .82) 30%,
    rgba(15, 26, 18, .24) 58%,
    rgba(15, 26, 18, 0) 80%);
}

/* Vervolg op de afrekenknop. Het paars is weg, maar de rand had dezelfde kleur
   als de vulling: dan is er geen scheidende lijn en meet de omtrek 2,16:1,
   terwijl WCAG 1.4.11 er 3,0 vraagt voor de begrenzing van een bedieningselement.
   Een donkergroene rand geeft 12,41:1 tegen het vlak eromheen. */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order.button.alt {
  border: 1px solid var(--kh-groen-diep);
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce #place_order.button.alt:hover {
  border-color: var(--kh-groen-diep);
}

/* Het betaalblok stond nog in het lila van WooCommerce (rgba(129,110,153,.14)).
   Dat is de enige plek in de winkel waar die kleur opdook. */
.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-payment {
  background: var(--kh-creme-licht);
  border: 1px solid var(--kh-lijn);
  border-radius: var(--kh-rond-kaart);
}
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--kh-lijn);
  background: transparent;
}
.woocommerce-checkout #payment div.form-row { background: transparent; }
.woocommerce-checkout #payment div.payment_box {
  background: var(--kh-creme);
  color: var(--kh-inkt);
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--kh-creme); }

/* ---------- 15. Opening zonder herofoto ---------------------------------- */

/* De herofoto is eruit: het was een notenfoto voor een winkel die "Kaasshop"
   heet, hij was 3,2x uitvergroot uit een bron van 900px, en hij duwde de
   secties onder de vouw. De pagina opent nu met de kop en meteen de tegels. */

.kh-sectiekop--opening { max-width: 42rem; margin-bottom: 2.5rem; }

.kh-sectiekop--opening h1 {
  margin: .35rem 0 .75rem;
  font-size: clamp(2.4rem, 6.2vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.015em;
}
.kh-sectiekop--opening .kh-lead { max-width: 34rem; }

.kh-opening__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}
.kh-opening__knoppen .kh-knop { width: 100%; }

@media (min-width: 480px) {
  .kh-opening__knoppen .kh-knop { width: auto; }
}

/* De eerste sectie stond op de standaardafstand die bedoeld is voor een sectie
   ná een hero. Zonder hero mag dat strakker. */
#assortiment { padding-top: 2.5rem; }
@media (min-width: 1024px) { #assortiment { padding-top: 3.5rem; } }

/* De beloftebalk staat nu onder de tegels in plaats van erboven; daar hoort
   iets meer lucht omheen zodat hij niet tegen het raster plakt. */
.kh-beloftes { margin-block: 0; }

/* ---------- 16. Correctie uit de tegenlezing ----------------------------- */

/* Een mislukte kortingscode echoot WooCommerce letterlijk terug in de melding.
   `p.coupon-error-notice` staat op `overflow-wrap: normal`, dus een code zonder
   spaties kan niet afbreken. Gemeten: vanaf 40 tekens overloop bij 360px, en
   698px overloop bij 320px met een code van 120 tekens. Iemand die per ongeluk
   een URL in het kortingsveld plakt, schuift de hele winkelwagen scheef.

   Dit geldt voor elke melding die gebruikersinvoer teruggeeft, niet alleen die
   ene — vandaar de brede selector. */
p.coupon-error-notice,
.woocommerce-error li,
.woocommerce-message,
.woocommerce-info,
.woocommerce-notices-wrapper li,
.woocommerce form .form-row .required + .woocommerce-error {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.kh-bon, .kh-bon > * { min-width: 0; }

/* ---------- 17. Menu met twee niveaus ------------------------------------ */

/* Het menu stond op `depth => 1`. Daardoor viel elke categorie eruit en hielden
   "Kaas" en "Noten" allebei alleen /shop/ over: twee kopregels met dezelfde
   bestemming, en geen van de elf categorieen bereikbaar vanuit de kop. Nu staan
   ze er wel, en dat vraagt om twee verschillende vormen.

   Mobiel: het submenu staat open en ingesprongen. Geen uitklapper, want dan
   heb je JavaScript nodig om uberhaupt bij een categorie te komen, en het menu
   zelf is juist bewust een gewone lijst die zonder JavaScript werkt.

   Vanaf 1024px: een uitklapper op hover en op focus. `:focus-within` doet het
   toetsenbordwerk — wie doortabt houdt het paneel open. */

.kh-nav .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 .35rem 1rem;
  border-top: 0;                      /* de mobiele lijstrand hoort alleen op het hoofdniveau */
}
.kh-nav .sub-menu a {
  font-weight: 500;
  font-size: .95rem;
  color: var(--kh-inkt-zacht, var(--kh-inkt));
  min-height: var(--kh-raak);         /* 44px blijft ook hier de ondergrens */
}

@media (min-width: 1024px) {
  .kh-nav > ul > li { position: relative; }

  /* Een pijltje maakt zichtbaar dat er iets onder zit. Puur decoratief, dus
     aria-hidden is hier niet nodig: het is een pseudo-element. */
  .kh-nav > ul > li.menu-item-has-children > a::after {
    content: "";
    width: .42rem;
    height: .42rem;
    margin-left: .45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .55;
  }

  .kh-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: -.9rem;
    z-index: 30;
    display: block;
    min-width: 15rem;
    padding: .4rem 0;
    /* Gemeten vóór deze regel: het paneel had exact de paginakleur (contrast
       1,00) en een rand van 1,25:1. Dan is de enige aanwijzing dat er een
       paneel opengaat de slagschaduw, en die valt weg zodra iemand contrast
       verhoogt of schaduwen uitzet. Nu: een eigen wit vlak en een rand die
       WCAG 1.4.11 haalt. */
    background: var(--kh-wit);
    border: 1px solid var(--kh-lijn-sterk);
    border-radius: var(--kh-rond-knop, 4px);
    box-shadow: 0 14px 34px rgba(22, 40, 28, .16);

    /* Niet display:none maar onzichtbaar-en-onklikbaar: zo kan er een
       overgang op, en blijft het paneel voor een schermlezer buiten beeld
       zolang het dicht is (visibility doet dat, opacity alleen niet). */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.35rem);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .kh-nav > ul > li:hover > .sub-menu,
  .kh-nav > ul > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .kh-nav .sub-menu li { display: block; }
  .kh-nav .sub-menu a {
    display: block;
    padding: .5rem .95rem;
    border-bottom: 0;                 /* de gouden onderstreping is voor het hoofdniveau */
    font-size: .92rem;
    white-space: nowrap;
  }
  .kh-nav .sub-menu a:hover,
  .kh-nav .sub-menu a:focus-visible {
    background: var(--kh-creme-licht, rgba(0, 0, 0, .04));
    color: var(--kh-goud-donker);
  }
  .kh-nav .sub-menu a[aria-current="page"] {
    color: var(--kh-goud-donker);
    font-weight: 700;
  }

  /* Het hoofdniveau mag niet meer terugvallen op een tweede regel: met een
     uitklapper eronder springt de rij dan over de tegels heen. */
  .kh-nav > ul { flex-wrap: nowrap; }
}

/* ---------- 18. Studiofoto op een donker vlak ---------------------------- */

/* Het afsluitblok is donkergroen; de foto erin is een productfoto op wit. Zo'n
   foto legt een wit blok in het groen. Gemeten: 20 van de 202 foto's uit de
   bron staan op een witte studioachtergrond (alle cadeaupakketten en het
   toebehoren); de rest vult het kader zelf en heeft dit niet nodig.

   Vandaar een klasse in plaats van een regel op het blok: wie hier een echte
   winkelfoto neerzet, haalt de klasse weg en krijgt de foto zoals hij is. */
.kh-beeld--studio { background: var(--kh-creme); }
.kh-beeld--studio img { mix-blend-mode: multiply; }

/* ---------- 19. Gat in de topbalk ---------------------------------------- */

/* `.kh-topbalk span` is een flexregel met `gap: .4rem`, bedoeld voor de ruimte
   tussen het icoon en de tekst. Maar het bedrag komt uit wc_price() als een
   eigen <span>, dus staan er drie flexitems in plaats van twee en valt die
   .4rem ook tussen "vanaf" en "EUR 45" — bovenop de spatie die daar al staat.
   Gemeten: 6,4px extra, zichtbaar als een dubbele spatie.

   De ruimte hoort bij het icoon, dus zet hem daar. */
.kh-topbalk__rij > span { display: block; }
.kh-topbalk__rij > span > svg { vertical-align: -.22em; margin-right: .4rem; }

/* Waarom `block` en niet `gap: 0`: als flexregel zijn "Gratis verzending in
   Nederland vanaf" en het bedrag twee losse items die niet samen kunnen
   afbreken. Bij 320px gaf dat "...vanaf" op een tweede regel met "EUR 45"
   eenzaam rechtsboven. Als gewone tekstregel loopt de zin gewoon door en breekt
   het bedrag mee. Het icoon lijnt uit met `vertical-align`. */

/* ---------- 20. De kop tussen 1024 en 1200 px ---------------------------- */

/* Het uitklappijltje achter "Kaas" en "Noten" maakt het menu ongeveer 28px
   breder. Net genoeg om de kopregel te laten omslaan op precies de breedte waar
   het thema zijn breekpunt legt: gemeten 140px hoge kopregel op 1024 en 1028px,
   met het account- en winkelwagenicoon linksonder onder het logo en de hele
   rechterhelft leeg. Een iPad in liggende stand is exact 1024px.

   Gevonden door de code-review van 2026-09-04, die het pseudo-element als enige
   variabele uitzette en de kopregel toen op 90px zag uitkomen.

   Oplossing: in die band iets krapper zetten in plaats van het pijltje weghalen
   — het pijltje is juist wat verraadt dat er een submenu onder zit. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .kh-nav ul { gap: 0 1rem; }
  .kh-nav a { font-size: .9rem; }
  /* Het zoekveld mag hier verder krimpen; de placeholder wordt afgekapt maar
     het veld blijft bruikbaar, en dat is beter dan een omgeslagen kop. */
  .kh-zoek { flex: 0 1 12rem; min-width: 6.5rem; }
}

/* ---------- 21. Aanraakvlakken die te klein waren ------------------------ */

/* Gemeten door web-verify (2026-09-04). WCAG 2.5.8 vraagt 24x24 CSS-pixels, en
   dit thema houdt zelf 44px aan (--kh-raak). Drie plekken haalden dat niet en
   hadden geen alternatief ernaast:

   1. De cadeaupakketten op de homepage: alleen de ~19px titeltekst was klikbaar.
      De foto erboven was dood gebied — een klik erop deed niets, met een muis
      net zo goed als met een duim. De productkaarten in het raster hebben daar
      al een oplossing voor (een ::after die over de kaart heen ligt); die is
      hier niet meegenomen. Nu wel.
   2. De categorielijst op de 404-pagina: een kale <ul> zonder opmaak, 20px hoog.
   3. "Wachtwoord vergeten?" op Mijn account: standaardmarkup van WooCommerce in
      een eigen alinea, dus niet gedekt door de inline-uitzondering. */

/* 1 — de hele cadeaukaart klikbaar maken */
.kh-cadeau__lijst li { position: relative; }
.kh-cadeau__lijst figcaption a::after { content: ""; position: absolute; inset: 0; }

/* 2 — categorielijst op de 404-pagina */
.kh-lijstlinks { list-style: none; margin: .5rem 0 1.5rem; padding: 0; }
.kh-lijstlinks li { border-bottom: 1px solid var(--kh-lijn); }
.kh-lijstlinks a {
  display: flex;
  align-items: center;
  min-height: var(--kh-raak);
  text-decoration: none;
  font-weight: 600;
}
.kh-lijstlinks a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 3 — losse WooCommerce-links die in een eigen alinea staan */
.woocommerce-LostPassword a,
.woocommerce-privacy-policy-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--kh-raak);
}

/* ---------- 22. Uit het ontwerpoordeel ----------------------------------- */

/* 1. Waar sta ik in het menu?
   WordPress zet `aria-current="page"` alleen op het item zelf. Sta je op
   /assortiment/boerenkaas/, dan zit dat item in het dichtgeklapte paneel en
   licht er in de zichtbare balk dus NIETS op — gemeten: op een categoriepagina
   staan er wel `current-menu-parent` en `current-menu-ancestor`, maar daar hing
   geen enkele opmaak aan. De bezoeker kon niet zien waar hij was. */
.kh-nav .current-menu-ancestor > a,
.kh-nav .current-menu-parent > a { color: var(--kh-goud-donker); }
@media (min-width: 1024px) {
  .kh-nav .current-menu-ancestor > a,
  .kh-nav .current-menu-parent > a { border-bottom-color: var(--kh-goud); }
}

/* 2. Twee donkere vlakken die tegen elkaar aan liggen.
   Het afsluitblok en de voettekst hadden allebei exact rgb(22,40,28), gescheiden
   door een haarlijn. Samen las dat als één zwart blok van bijna duizend pixels.
   De voet krijgt de tweede donkere tint uit het palet, zodat de overgang te zien
   is zonder dat het onrustig wordt. */
.kh-footer { background: var(--kh-groen-mid); }

/* ---------- 23. Tekstpagina met een zijkolom ----------------------------- */

/* Contact en Over ons stonden als kop plus kale tekst op een leeg vlak: gemeten
   1090px hoog inclusief kop en voet, waarvan meer dan de helft leeg. Dat zijn
   net de pagina's waar iemand besluit of hij een winkel vertrouwt.
   De juridische pagina's houden bewust de smalle leeskolom. */
.kh-tekstpagina--zij { max-width: none; display: grid; gap: 2rem; align-items: start; }
.kh-tekstpagina--zij .kh-tekstpagina__tekst { max-width: 44rem; }

@media (min-width: 900px) {
  .kh-tekstpagina--zij { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 3rem; }
}

.kh-zijkaart { display: grid; gap: 1.25rem; align-content: start; }
.kh-zijkaart__beeld { aspect-ratio: 4 / 3; border-radius: var(--kh-rond-kaart); overflow: hidden; }
.kh-zijkaart__blok {
  background: var(--kh-groen-diep);
  color: var(--kh-creme);
  border-radius: var(--kh-rond-kaart);
  padding: 1.5rem;
}
.kh-zijkaart__blok h2 { margin: 0 0 .75rem; color: var(--kh-wit); font-size: 1.15rem; }
.kh-zijkaart__blok .kh-gegevens { margin-bottom: 1.25rem; }
.kh-zijkaart__blok .kh-gegevens a { color: var(--kh-goud-licht); }
.kh-zijkaart__blok .kh-knop { width: 100%; }
.kh-zijkaart__noot { margin: 1rem 0 0; font-size: .88rem; color: #ded8c9; }