/* ============================================================
   knussie-stijl.css - EEN stylesheet voor de hele site
   ------------------------------------------------------------
   Blok C, stap 2 - samengesteld op 28-08-2026 uit drie bronnen:
     1. de oude knussie-stijl.css (zijpaginas: 195 regels, 310 selectors)
     2. het stijlblok van Ontwerpbronnen/ontwerp-bijna.html
        (homepage-mockup, post 206: 641 regels, 782 selectors)
     3. het stijlblok van Ontwerpbronnen/ontwerp-bijna-product.html
        (productpagina-mockup, post 208: 322 regels, 340 selectors)
   De twee mockupbronnen dragen geen eigen stijlblok meer; ze halen
   hun opmaak nu hier vandaan. Reproduceerbaar samen te stellen met
   Backups/blokc-stap2-bronnen/build.py - zie STIJL-INDELING.md.

   INDELING
     1  Fonts (@font-face, eigen uploads, geen extern verkeer)
     2  Designtokens - de enige canonieke set, --kn-*
     3  Aliaslaag .knc: de oude mockupnamen wijzen naar sectie 2
     4  Paginaframe van de mockups (was de losse <style> in de body)
     5  Zijpaginas: leeskolom, kopband, tekst, tabellen, formulieren,
        banner, footer, WooCommerce "Mijn account"  (secties 5.3-5.22
        houden de nummering van het oude bestand)
     6  Mockups - gedeelde basislaag (.knc)
     7  Mockups - homepage (.knc:where(:not(.pdp2)))
     8  Mockups - productpagina (.knc:where(.pdp2))
     9  Paletlagen (gedeeld, beide paletten)
    10  Letteropties: sitefont en logofont (gedeeld)
    11  Styleguide-kiezers en knopkleuren (staart van de homepage-bron)
    12  Componentlaag .knus-*

   SCOPING - alles hangt aan :where(), en dat is met opzet:
   :where() telt NIET mee in de specificiteit. Elke regel houdt dus
   exact het gewicht dat hij in zijn bron had; alleen zijn bereik
   verandert. Daardoor blijft ook de rangorde ten opzichte van de
   inline stijlblokken op /bouwpakket, /bundel en /bedrijven precies
   zoals hij was.
   - mockups: alles hangt onder .knc; de homepage krijgt
     :where(:not(.pdp2)), de productpagina :where(.pdp2), en wat in
     beide bronnen letterlijk gelijk was staat een keer in sectie 6;
   - zijpaginas: alles wat binnen .entry-content, .site-main,
     .inside-article of .content-area valt, draagt
     :where(:not(:has(.knc:not(.kn-kader)))), zodat het niet in een mockup lekt.
   De volgorde van de secties volgt de volgorde van de bronnen:
   basis -> componenten -> paletten -> letters -> kiezers.
   ============================================================ */

/* ---------- 1. Fonts (bestaande uploads, geen extern verkeer) */
@font-face{font-family:'Young Serif';src:url(/wp-content/uploads/knussie-fonts/youngserif-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Karla';src:url(/wp-content/uploads/knussie-fonts/karla-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Karla';src:url(/wp-content/uploads/knussie-fonts/karla-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Karla';src:url(/wp-content/uploads/knussie-fonts/karla-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Fraunces';src:url(/wp-content/uploads/knussie-fonts/fraunces-var.woff2) format('woff2');font-weight:300 900;font-display:swap}
@font-face{font-family:'Mulish';src:url(/wp-content/uploads/knussie-fonts/mulish-var.woff2) format('woff2');font-weight:200 900;font-display:swap}
@font-face{font-family:'Bree Serif';src:url(/wp-content/uploads/knussie-fonts/breeserif-400.woff2) format('woff2');font-weight:400;font-display:swap}

/* ---------- 2. Designtokens - EEN canonieke set (--kn-*)
   Kleur: de definitieve huisstijl (ronde 18, palet antraciet & goud).
   De contrasten zijn geverifieerd: tekst/bg >= 7, muted/bg >= 4.5,
   knoptekst/goud >= 4.5.
   Ruimte en typografie: NIET verzonnen maar geteld in de drie bronnen;
   elke stap hieronder is een cluster dat er feitelijk in staat (het
   aantal treffers staat erbij). */
:root{
  /* -- kleur -------------------------------------------------- */
  --kn-cream:#EFEDE8;      /* paginakleur */
  --kn-vlak:#D6D4CE;       /* licht vlak / tabelkop (mockup: --beige) */
  --kn-oat:#E4E2DC;        /* zacht tussenvlak, zebra, kopzone */
  --kn-wit:#F7F6F4;        /* kaartwit */
  --kn-zacht:#A09D95;      /* gedempte lijn (alleen decoratief) */
  --kn-poeder:#B8B5AE;     /* neutrale steuntint (stalen, avatars) */
  --kn-goud:#D79C2F;       /* actiekleur, schaars gebruiken */
  --kn-goudd:#B08027;      /* actie donker: hover, focus */
  --kn-knop:#E0AC4A;       /* knopkleur honing, gekozen 02-09; in de mockups het hoofdaccent (--mosterd) */
  --kn-knopd:#C7942F;      /* knop hover (focusringen blijven op --kn-goudd, 3.0:1 op cream) */
  --kn-oker:#85601D;       /* labels op licht (AA-veilige goudtint) */
  --kn-donker:#0B0C0E;     /* koppen, knoptekst */
  --kn-donkerd:#070809;    /* nog een tint dieper (overlays) */
  --kn-tekst:#161719;      /* lopende tekst */
  --kn-muted:#6B6A6A;      /* bijschrift op cream (zijpaginas, 4.5:1) */
  --kn-muted-diep:#5E5D5B; /* bijschrift in de mockups (zie aliastabel) */
  --kn-lijn:rgba(11,12,14,.08);
  --kn-lijn2:rgba(11,12,14,.14);
  --kn-markering:rgba(215,156,47,.36);

  /* -- schaduw ------------------------------------------------ */
  --kn-sh-sm:0 1px 2px rgba(0,0,0,.08);
  --kn-sh-md:0 1px 3px rgba(0,0,0,.07),0 14px 30px -18px rgba(0,0,0,.28);
  --kn-sh-lg:0 2px 6px rgba(0,0,0,.08),0 22px 44px -22px rgba(0,0,0,.34);
  --kn-sh-knop:0 10px 22px -12px rgba(0,0,0,.4);
  --kn-sh-knop-hover:0 14px 26px -12px rgba(0,0,0,.45);

  /* -- hoeken ------------------------------------------------- */
  --kn-radius-xs:8px;      /* 8x  - kleine tegels */
  --kn-radius-s:12px;      /* 11x - velden, tegels */
  --kn-radius:16px;        /* 22x - kaarten (de maat van het huis) */
  --kn-radius-l:22px;      /* 2x  - grote panelen */
  --kn-pil:999px;          /* 39x - knoppen en chips */

  /* -- ruimte (geteld in de drie bronnen) --------------------- */
  --kn-sp-1:4px;           /* 18x */
  --kn-sp-2:8px;           /* 38x */
  --kn-sp-3:10px;          /* 59x */
  --kn-sp-4:12px;          /* 49x */
  --kn-sp-5:14px;          /* 53x */
  --kn-sp-6:18px;          /* 44x */
  --kn-sp-7:24px;          /* 60x - ook de zijmarge van de site */
  --kn-sp-8:32px;          /* 15x */
  --kn-ruim-s:44px;        /* 11x */
  --kn-ruim-m:56px;        /* 16x */
  --kn-ruim-l:64px;        /* 11x */
  --kn-ruim-xl:96px;       /*  5x */
  --kn-sec-y:clamp(64px,9vw,96px);  /* sectiepadding boven/onder */
  --kn-kolom:680px;        /* leeskolom zijpaginas */
  --kn-breed:1080px;       /* inhoudsbreedte banner, footer, mockups */
  --kn-pad:24px;           /* zijmarge */

  /* -- typografie --------------------------------------------- */
  --kn-font-kop:'Young Serif',Georgia,serif;
  --kn-font-tekst:'Karla',system-ui,sans-serif;
  --kn-tekst-xs:12.5px;    /* label, legal (37x met 12px) */
  --kn-tekst-s:14.5px;     /* bijschrift (50x met 14px) */
  --kn-tekst-m:15.5px;     /* compacte tekst (45x met 15px) */
  --kn-tekst-l:16.5px;     /* lead, knop (35x met 16px) */
  --kn-tekst-basis:17px;   /* lopende tekst */
  --kn-tekst-lead:clamp(18px,2vw,19.5px);
  --kn-kop-s:clamp(20px,2.4vw,23px);
  --kn-kop-m:clamp(24px,3vw,30px);
  --kn-kop-l:clamp(30px,3.3vw,42px);
  --kn-kop-xl:clamp(31px,4.6vw,46px);
  --kn-lh-tekst:1.7;
  --kn-lh-kop:1.18;

  /* -- beeldverhoudingen (beeldpijplijn, zie Beeldpijplijn/CONVENTIE.md) */
  --kn-beeld-hero:16/9;
  --kn-beeld-hero-mobiel:4/5;
  --kn-beeld-collectiekaart:4/3;
  --kn-beeld-collectie-hoofd:4/5;
  --kn-beeld-kleurstaal:1/1;
  --kn-beeld-bewijskaart:4/5;

  /* -- sierdetail: het golfje, een keer gedefinieerd ----------- */
  --kn-golf:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'><path d='M8 8 C 26 -1 46 -1 60 8 C 74 17 94 17 112 8' stroke='%23D79C2F' stroke-width='3' stroke-linecap='round' fill='none'/></svg>");
}
/* Paginas met een tabel- of kolomindeling hebben meer breedte nodig
   dan een leeskolom (WooCommerce zet deze body-klassen). */
body.woocommerce-account,
body.woocommerce-cart,
body.woocommerce-checkout{--kn-kolom:1040px}

/* ---------- 3. Aliaslaag voor de mockups (.knc)
   ------------------------------------------------------------
   De mockups (homepage 206, productpagina 208) gebruiken hun eigen
   tokennamen in 700+ selectors. Die namen blijven bestaan, maar ze
   zijn nu ALIASSEN van de canonieke --kn-*-set hierboven; er is dus
   nog maar een plek waar een kleur of schaduw verandert.

   mockupnaam    canoniek token        waarde (palet antraciet & goud)
   ------------  --------------------  ------------------------------
   --pruim       --kn-donker           #0B0C0E
   --pruimd      --kn-donkerd          #070809
   --mosterd     --kn-knop             #E0AC4A  (sinds 02-09: honing)
   --mosterdd    --kn-knopd            #C7942F
   --poeder      --kn-poeder           #B8B5AE
   --beige       --kn-vlak             #D6D4CE
   --oat         --kn-oat              #E4E2DC
   --cream       --kn-cream            #EFEDE8
   --wit         --kn-wit              #F7F6F4
   --tekst       --kn-tekst            #161719
   --muted       --kn-muted-diep       #5E5D5B
   --oker        --kn-oker             #85601D
   --btntxt      --kn-donker           #0B0C0E
   --markering   --kn-markering        rgba(215,156,47,.36)
   --sh-sm/md/lg --kn-sh-sm/md/lg      idem
   --beeld-*     --kn-beeld-*          idem

   BOTSING, bewust laten staan: --kn-muted (#6B6A6A) op de zijpaginas
   en --kn-muted-diep (#5E5D5B) in de mockups zijn twee verschillende
   grijzen. Ze halen allebei 4.5:1 op hun eigen achtergrond; ze
   samenvoegen zou beeld verschuiven. Bij de volgende kleurronde is
   dit het eerste punt om gelijk te trekken.

   De kleuren in .knc hieronder zijn de BASISLAAG van de mockups
   (ronde 17, pruim/mosterd). Die staat er alleen nog voor als een
   paletattribuut ontbreekt; de paletlagen (sectie 9) zetten hem om.
   ------------------------------------------------------------ */
.knc{--pruim:#491A32;--pruimd:#3A1226;--mosterd:#F0A832;--mosterdd:#D68F1B;--poeder:#AFC0DC;--beige:#DAB59A;--oat:#F2DCCA;--cream:#F0DBC7;--wit:#FBF1E5;--tekst:#42303A;--muted:#5C4550;--oker:#8A5F1C;--btntxt:#491A32;--markering:rgba(240,168,50,.32);--beeld-hero:var(--kn-beeld-hero);--beeld-hero-mobiel:var(--kn-beeld-hero-mobiel);--beeld-collectiekaart:var(--kn-beeld-collectiekaart);--beeld-collectie-hoofd:var(--kn-beeld-collectie-hoofd);--beeld-kleurstaal:var(--kn-beeld-kleurstaal);--beeld-bewijskaart:var(--kn-beeld-bewijskaart);--sh-sm:var(--kn-sh-sm);--sh-md:var(--kn-sh-md);--sh-lg:var(--kn-sh-lg);font-family:'Nunito',system-ui,sans-serif;color:var(--tekst);background:var(--cream);line-height:1.7;font-size:17px;position:relative}

/* ---------- 4. Paginaframe van de mockups (206 en 208)
   ------------------------------------------------------------
   Stond als losse <style> in de body van beide mockups. Alles is
   afgeschermd met body:has(.knc:not(.kn-kader)), zodat de zijpaginas hun eigen
   kopband, leeskolom en .inside-article houden. Dat was de enige
   echte botsing tussen de bronnen: zonder deze afscherming zou
   .entry-header verdwijnen en .site-main zijn padding verliezen op
   elke zijpagina. */
html:has(.knc:not(.kn-kader)){margin-top:0!important}/* K1 (16-09): de vloeiende scroll eruit - die werd door de laadverschuivingen onderbroken en ankers kwamen niet aan */
body:has(.knc:not(.kn-kader)) :is(.site-header,.site-footer,.entry-header,.site-info,#wpadminbar){display:none!important}
body:has(.knc:not(.kn-kader)) :is(#page,.site-content,.content-area,.container,.grid-container,.site-main){max-width:none!important;margin:0!important;padding:0!important}
body:has(.knc:not(.kn-kader)) .entry-content{margin:0!important}
/* De paginakleur onder de mockup. De homepage zette hier de oude
   basiscream #F0DBC7, wat als een beige strook onder de footer te
   zien was; blok C stap 3 heeft dat gelijkgetrokken met de rest van
   de site (--kn-cream, hetzelfde als de productpagina). */
body:has(.knc:not(.kn-kader)){margin:0!important;background:var(--kn-cream)!important}

/* ============================================================
   5. ZIJPAGINAS
   ------------------------------------------------------------
   De secties hieronder houden de nummering van het oude bestand
   (3 t/m 22), zodat oude notities blijven kloppen.
   ============================================================ */
/* ---------- 5.3. Basis: kleur en letter op de hele pagina. */
html:where(:not(:has(.knc:not(.kn-kader)))){
  /* De paginakop-zone loopt van rand tot rand (sectie 5) en is
     daarvoor 100vw breed. Met een zichtbare scrollbar is 100vw
     iets breder dan de zichtbare breedte; clip vangt dat op
     zonder een scrollcontainer te maken (sticky blijft werken). */
  overflow-x:clip;
}
body:where(:not(:has(.knc:not(.kn-kader)))){
  margin:0; /* GP reset doet dit ook; vangnet voor kale contexten */
  background:var(--kn-cream);
  color:var(--kn-tekst);
  font-family:'Karla',system-ui,sans-serif;
  font-size:17px;
  line-height:1.7;
}
::selection{background:var(--kn-goud);color:var(--kn-donker)}
/* ---------- 5.4. Skip-link (A4): eerste element in de body,
   onzichtbaar tot hij focus krijgt. Doel is het ankertje dat de
   mu-plugin in <main id="main"> zet. */
.knussie-skip{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.knussie-skip:focus{
  position:fixed;
  top:14px;left:14px;
  z-index:9999;
  width:auto;height:auto;
  margin:0;padding:13px 26px;
  clip-path:none;
  background:var(--kn-donker);
  color:var(--kn-cream);
  font-family:'Karla',system-ui,sans-serif;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  border-radius:999px;
  box-shadow:var(--kn-sh-md);
  outline:3px solid var(--kn-goud);
  outline-offset:2px;
}
/* Het ankertje zelf mag geen ruimte innemen of een ring krijgen. */
.knussie-inhoud-anker{height:0;overflow:hidden}
.knussie-inhoud-anker:focus{outline:none}
/* ---------- 5.5. Leeskolom en paginakop-zone (D3).
   Elke zijpagina krijgt dezelfde opbouw: een zachte kopband van
   rand tot rand met label, titel en golfje, daaronder een
   rustige leeskolom van 680px op de cream-achtergrond. Puur op
   wat GeneratePress al levert, dus geen template-wijziging. */
.site-main:where(:not(:has(.knc:not(.kn-kader)))){padding:0 var(--kn-pad) clamp(56px,7vw,92px);margin:0}
/* Staat de paginatitel uit, dan is er geen kopband en zou de
   tekst tegen de banner aan plakken. Dan toch lucht bovenaan. */
.site-main:where(:not(:has(.knc:not(.kn-kader)))):not(:has(.entry-header)){padding-top:clamp(32px,5vw,56px)}
.separate-containers .site-main:where(:not(:has(.knc:not(.kn-kader)))){margin:0 auto}
.separate-containers .inside-article:where(:not(:has(.knc:not(.kn-kader)))),.one-container .inside-article:where(:not(:has(.knc:not(.kn-kader)))),.inside-article:where(:not(:has(.knc:not(.kn-kader)))){
  background:transparent;
  box-shadow:none;
  padding:0;
  margin:0 auto;
  max-width:var(--kn-kolom);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))){margin-top:0}
/* 30-08: GeneratePress geeft directe kinderen van .site-main een
   margin-bottom van 20px. Het onzichtbare inhoud-anker van de mu-plugin
   is zo'n kind, en die marge duwde de kopband 20px van de banner af -
   een streep paginakleur die als een tweede balk las. */
.knussie-inhoud-anker{margin:0!important;padding:0;height:0}
/* De kopband. De titel zelf blijft netjes in de leeskolom staan;
   alleen het gekleurde vlak breekt uit naar de volle breedte, als
   pseudo-element. Zo staan titel en tekst altijd op dezelfde
   lijn, ook op mobiel, en hoeft er niets met vw-breedtes op de
   inhoud zelf te gebeuren. html{overflow-x:clip} vangt op dat
   100vw met een zichtbare scrollbar iets te breed is.
   D1: het beeldmerk boven de titel is hier vervallen; de banner
   bovenaan toont het merk al. */
.entry-header{
  position:relative;
  margin:0 0 clamp(22px,2.6vw,34px);
  padding:clamp(32px,5vw,60px) 0 clamp(26px,3.2vw,40px);
}
.entry-header::before{
  content:"";
  position:absolute;
  top:0;bottom:0;
  left:calc(50% - 50vw);
  right:calc(50% - 50vw);
  background:
    radial-gradient(110% 150% at 24% 0%,rgba(215,156,47,.13),rgba(215,156,47,0) 62%),
    linear-gradient(180deg,var(--kn-oat) 0%,var(--kn-cream) 100%);
}
/* De inhoud van de kop boven het vlak houden (het vlak is
   absoluut gepositioneerd en zou anders overheen liggen). */
.entry-header > *{position:relative}
.entry-header::after{
  content:"";
  display:block;
  position:relative;
  width:100%;
  height:14px;
  margin-top:18px;
  background:var(--kn-golf) left center/auto 14px no-repeat;
}
/* Sectielabel boven de titel (mu-plugin, per pagina bepaald). */
.knussie-kop-label{
  margin:0 0 12px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--kn-oker);
}
/* ---------- 5.6. Koppen: Young Serif, alleen gewicht 400
   (het font heeft er maar een - niet vet maken). */
.entry-title,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) h1,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) h2,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) h3,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) h4{
  font-family:'Young Serif',Georgia,serif;
  font-weight:400;
  color:var(--kn-donker);
  line-height:1.18;
  letter-spacing:normal;
  margin:0;
}
.entry-title{font-size:clamp(31px,4.6vw,46px);line-height:1.08}
/* R24-11 - het merkteken in de paginatitel (en in een kop die
   het merk voor het eerst noemt): klein, hoog en in de
   Karla-letter, dezelfde verhoudingen als het woordmerk in de
   banner en in de mockups. De mu-plugin zet het (tm) uit de
   post_title om naar <sup class="knussie-tm">; staat er geen (tm)
   in de titel, dan komt deze regel nergens aan.
   font-size in em, dus het schaalt mee met de titel: op mobiel
   klein, op 1440 iets groter, altijd dezelfde verhouding. */
.knussie-tm{
  font-family:'Karla',system-ui,sans-serif;
  font-size:.42em;
  font-weight:700;
  line-height:1;
  vertical-align:baseline;   /* de standaard super van <sup> uit */
  position:relative;
  top:-.52em;
  margin-left:1px;
  letter-spacing:0;
  opacity:.8;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) h2{font-size:clamp(24px,3vw,30px);margin:0 0 .55em}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) h3{font-size:clamp(20px,2.4vw,23px);margin:1.9em 0 .5em}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) h4{font-size:18px;margin:1.7em 0 .4em}
/* Leesritme: elke h2 opent een sectie met lucht en een haarlijn.
   Rijke secties en WooCommerce houden hun eigen ritme. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) h2:not([class*="knb"],[class*="knb"] *,[class*="woocommerce"],[class*="woocommerce"] *,[class*="wc-block"],[class*="wc-block"] *){
  margin-top:clamp(38px,5vw,58px);
  padding-top:clamp(26px,3.4vw,36px);
  border-top:1px solid var(--kn-lijn);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) > h2:first-child,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) h3:first-child,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) > *:first-child > h2:first-child{margin-top:0;padding-top:0;border-top:0}
/* Ankers uit de inhoudsopgave niet onder de banner laten vallen.
   De banner staat nu gewoon mee te scrollen (niet sticky), dus is
   dit vooral lucht boven de kop waar je op landt. Wordt de banner
   in blok C wel sticky, zet dit dan op de bannerhoogte plus 16px
   (nu zou dat 66 + 16 = 82px zijn). */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) h2,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) h3,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) h4,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) [id]{scroll-margin-top:28px}
/* ---------- 5.7. Lopende tekst, lijsten, links */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) p{margin:0 0 1.15em}
/* Introzin van de pagina: iets groter, rustiger, als aanloop. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) > p:first-child{
  font-size:clamp(18px,2vw,19.5px);
  line-height:1.62;
  color:var(--kn-muted);
  margin-bottom:1.5em;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) ul,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) ol{margin:0 0 1.3em;padding-left:1.35em}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) li{margin-bottom:.45em}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) li::marker{color:var(--kn-goudd)}
/* Verzorgde opsommingen: eigen markers in plaats van kale
   bullets. Alleen op gewone content (zie kop van dit bestand). */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) ul:not([class*="knb"],[class*="knb"] *,[class*="woocommerce"],[class*="woocommerce"] *,[class*="wc-block"],[class*="wc-block"] *){
  list-style:none;
  padding-left:0;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) ul:not([class*="knb"],[class*="knb"] *,[class*="woocommerce"],[class*="woocommerce"] *,[class*="wc-block"],[class*="wc-block"] *) > li{
  position:relative;
  padding-left:28px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) ul:not([class*="knb"],[class*="knb"] *,[class*="woocommerce"],[class*="woocommerce"] *,[class*="wc-block"],[class*="wc-block"] *) > li::before{
  content:"";
  position:absolute;
  left:2px;top:.62em;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--kn-goud);
  box-shadow:0 0 0 3.5px rgba(215,156,47,.16);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) ol:not([class*="knb"],[class*="knb"] *,[class*="woocommerce"],[class*="woocommerce"] *,[class*="wc-block"],[class*="wc-block"] *){
  list-style:none;
  padding-left:0;
  counter-reset:knussie-tel;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) ol:not([class*="knb"],[class*="knb"] *,[class*="woocommerce"],[class*="woocommerce"] *,[class*="wc-block"],[class*="wc-block"] *) > li{
  position:relative;
  padding-left:44px;
  counter-increment:knussie-tel;
  margin-bottom:.7em;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) ol:not([class*="knb"],[class*="knb"] *,[class*="woocommerce"],[class*="woocommerce"] *,[class*="wc-block"],[class*="wc-block"] *) > li::before{
  content:counter(knussie-tel);
  position:absolute;
  left:0;top:.06em;
  width:28px;height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--kn-oat);
  color:var(--kn-oker);
  font-size:13.5px;
  font-weight:700;
  line-height:1;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) a{
  color:var(--kn-tekst);
  text-decoration:underline;
  text-decoration-color:var(--kn-goud);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
@media (hover:hover){.entry-content:where(:not(:has(.knc:not(.kn-kader)))) a:hover{color:var(--kn-goudd)}}
/* Zelfde focusring als op de ontwerppagina */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(a,button,input,textarea,select,summary):focus-visible{
  outline:2.5px solid var(--kn-goudd);
  outline-offset:3px;
  border-radius:6px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) strong{font-weight:700;color:var(--kn-donker)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) small,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-klein{font-size:14.5px;color:var(--kn-muted)}
/* ---------- 5.8. Inhoudsopgave op de lange juridische paginas.
   Markup (komt uit de content, niet uit deze plugin):
   <nav class="knussie-toc" aria-label="Op deze pagina">
     <p class="knussie-toc-kop">Op deze pagina</p>
     <ol><li><a href="#anker">Kop</a></li></ol>
   </nav> */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-toc{
  margin:0 0 2.2em;
  padding:20px 24px 18px;
  background:var(--kn-wit);
  border:1px solid var(--kn-lijn);
  border-radius:var(--kn-radius);
  box-shadow:var(--kn-sh-sm);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-toc-kop{
  margin:0 0 12px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--kn-oker);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-toc ol{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:knussie-toc;
  display:grid;
  gap:2px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-toc li{
  position:relative;
  margin:0;
  padding-left:32px;
  counter-increment:knussie-toc;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-toc li::before{
  content:counter(knussie-toc);
  position:absolute;
  left:0;top:6px;
  width:22px;height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--kn-oat);
  color:var(--kn-oker);
  font-size:12px;
  font-weight:700;
  line-height:1;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-toc a{
  min-height:44px;
  display:flex;
  align-items:center;
  display:block;
  padding:4px 0;
  font-size:16px;
  font-weight:500;
  color:var(--kn-tekst);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
@media (hover:hover){.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-toc a:hover{
  color:var(--kn-donker);
  border-bottom-color:var(--kn-goud);
}}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-toc a:focus-visible{
  outline:2.5px solid var(--kn-goudd);
  outline-offset:3px;
  border-radius:6px;
}
/* ---------- 5.9. Citaat, notitie en scheidingslijn.
   .knussie-notitie is bedoeld voor tekstblokken die opvallen
   zonder alarm te slaan (uitzondering, uitleg, klein voorbehoud);
   <aside> in de content krijgt dezelfde vorm. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) blockquote:not([class*="knb"],[class*="knb"] *,[class*="woocommerce"],[class*="woocommerce"] *,[class*="wc-block"],[class*="wc-block"] *){
  margin:1.8em 0;
  padding:20px 24px 20px 26px;
  background:var(--kn-wit);
  border:1px solid var(--kn-lijn);
  border-left:3px solid var(--kn-goud);
  border-radius:var(--kn-radius-s);
  box-shadow:var(--kn-sh-sm);
  font-style:normal;
  color:var(--kn-tekst);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) blockquote > :last-child{margin-bottom:0}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) blockquote cite{
  display:block;
  margin-top:8px;
  font-size:14px;
  color:var(--kn-muted);
  font-style:normal;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-notitie,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) aside:not([class*="knb"],[class*="knb"] *,[class*="woocommerce"],[class*="woocommerce"] *,[class*="wc-block"],[class*="wc-block"] *){
  margin:1.8em 0;
  padding:18px 22px;
  background:var(--kn-oat);
  border-radius:var(--kn-radius-s);
  font-size:16px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-notitie > :last-child,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) aside > :last-child{margin-bottom:0}
/* hr wordt een golfje - het sierdetail van het merk */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) hr,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .wp-block-separator{
  border:0;
  width:104px;height:14px;
  margin:clamp(38px,5vw,52px) auto;
  background:var(--kn-golf) center/contain no-repeat;
}
/* ---------- 5.10. Knoppen: gouden pil (zelfde recept als .btn
   op de ontwerppagina; knoptekst donker = 4.5:1+ op goud). */
.knus-btn,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .wp-block-button__link,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-knop,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-contact button,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-herroeping button,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-offerte button{
  display:inline-block;
  background:var(--kn-knop);
  color:var(--kn-donker);
  padding:14px 32px;
  border:0;
  border-radius:999px;
  font-family:inherit;
  font-size:16.5px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.4);
  transition:transform .22s,box-shadow .22s,background .22s;
}
@media (hover:hover){.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .wp-block-button__link:hover,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-knop:hover,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-contact button:hover,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-herroeping button:hover,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-offerte button:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 26px -12px rgba(0,0,0,.45);
  background:var(--kn-knopd);
  color:var(--kn-donker);
}}
/* ---------- 5.11. Tabellen: witte kaart, 16px hoeken, donkere
   koprij, zachte zebra. Geldt ook voor kale <table> in de
   content en voor de WooCommerce-tabellen (sectie 20). */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .wp-block-table{margin:1.8em 0 2.2em;overflow-x:auto}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) table:not([class*="knb"],[class*="knb"] *,[class*="wc-block"],[class*="wc-block"] *){
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--kn-wit);
  border-radius:var(--kn-radius);
  overflow:hidden;
  box-shadow:var(--kn-sh-md);
  font-size:15.5px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) table:not([class*="knb"],[class*="knb"] *,[class*="wc-block"],[class*="wc-block"] *) th{
  background:var(--kn-donker);
  color:var(--kn-cream);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:left;
  padding:13px 18px;
  border:0;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) table:not([class*="knb"],[class*="knb"] *,[class*="wc-block"],[class*="wc-block"] *) td{
  padding:12px 18px;
  border:0;
  border-top:1px solid rgba(11,12,14,.07);
  vertical-align:top;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) table:not([class*="knb"],[class*="knb"] *,[class*="wc-block"],[class*="wc-block"] *) tbody tr:nth-child(even) td{background:var(--kn-oat)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .wp-block-table figcaption{
  margin-top:10px;
  font-size:14px;
  color:var(--kn-muted);
  text-align:left;
}
/* ---------- 5.12. FAQ-accordeons (wp:details) als kaartjes. Sinds 22-09 (stap 4, F1) NIET voor de Complianz-uitklappers
   in het cookiebeleid (.cmplz-dropdown): die tekenen hun eigen chevron (document.min.css, summary div:after) en kregen
   van deze regels een tweede pijl erbij (Felix-punt 25). */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .wp-block-details,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) details:not([class*="knb"],[class*="knb"] *,.cmplz-dropdown){
  background:var(--kn-wit);
  border:1px solid var(--kn-lijn);
  border-radius:var(--kn-radius-s);
  box-shadow:var(--kn-sh-sm);
  padding:4px 20px;
  margin:0 0 12px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .wp-block-details summary,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) details:not(.cmplz-dropdown) summary{
  font-weight:700;
  color:var(--kn-donker);
  padding:14px 40px 14px 0;
  cursor:pointer;
  list-style:none;
  position:relative;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) details:not(.cmplz-dropdown) summary::-webkit-details-marker{display:none}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) details:not(.cmplz-dropdown) summary::after{
  content:"";
  position:absolute;
  right:2px;top:50%;
  width:20px;height:20px;
  margin-top:-10px;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%230B0C0E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  transition:transform .2s;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) details:not(.cmplz-dropdown)[open] summary::after{transform:rotate(180deg)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) details:not(.cmplz-dropdown)[open] summary{border-bottom:1px solid var(--kn-lijn)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) details:not(.cmplz-dropdown) > p{margin:.9em 0 1em}
/* ---------- 5.13. Formulieren (mu-plugin: contact, herroeping,
   offerte). De plugins zetten een eigen inline <style> in de
   body; die wint van deze head-stylesheet bij gelijke
   specificiteit, daarom overal .entry-content ervoor. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-contact label,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-herroeping label,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-offerte label{
  display:block;
  font-weight:700;
  font-size:15.5px;
  color:var(--kn-donker);
  margin:1.2em 0 .35em;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-optioneel{font-weight:400;color:var(--kn-muted);opacity:1}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-contact input[type=text],.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-contact input[type=email],.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-contact textarea,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-herroeping input[type=text],.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-herroeping input[type=email],.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-herroeping textarea,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-herroeping select,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-offerte input[type=text],.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-offerte input[type=email],.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-offerte textarea,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-offerte select{
  width:100%;
  min-height:48px;
  padding:11px 14px;
  background:var(--kn-wit);
  color:var(--kn-tekst);
  border:1.5px solid rgba(11,12,14,.32);
  border-radius:var(--kn-radius-s);
  font:inherit;
  font-size:16px; /* 16px+ voorkomt inzoomen op iOS */
  box-sizing:border-box;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-contact textarea,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-herroeping textarea,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-offerte textarea{min-height:9em}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-contact :is(input,textarea,select):focus,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-herroeping :is(input,textarea,select):focus,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-offerte :is(input,textarea,select):focus{
  outline:2.5px solid var(--kn-goudd);
  outline-offset:1px;
  border-color:var(--kn-goudd);
}
/* Gelukt- en foutmeldingen als rustige kaartjes */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-contact-ok,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-herroeping-ok,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-offerte-ok{
  background:var(--kn-oat);
  border-radius:var(--kn-radius);
  padding:18px 22px;
  box-shadow:var(--kn-sh-sm);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-contact-fout,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-herroeping-fout,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-offerte-fout{
  background:var(--kn-vlak);
  border-left:4px solid var(--kn-goudd);
  border-radius:var(--kn-radius-s);
  padding:14px 18px;
  color:var(--kn-donker);
}
/* Honeypot blijft onzichtbaar (plugins regelen dit zelf al,
   dit is een vangnet voor als die inline stijl ooit sneuvelt) */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-webveld{position:absolute!important;left:-9999px!important;height:0;overflow:hidden}
/* ---------- 5.14. Modelformulier-groep (verzenden-en-retourneren)
   Het blok heeft inline border-width:1px; wij geven kleur,
   hoeken en kaartwit. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-modelformulier{
  background:var(--kn-wit);
  border-color:var(--kn-lijn2);
  border-style:solid;
  border-radius:var(--kn-radius);
  box-shadow:var(--kn-sh-sm);
}
/* ---------- 5.15. Beeld en klein spul */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) img{max-width:100%;height:auto;border-radius:var(--kn-radius)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) figure:not([class*="knb"],[class*="knb"] *){margin:1.8em 0}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) figcaption{font-size:14px;color:var(--kn-muted)}
/* Warme grade en tijdelijk-label, zelfde recept als de mockups. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .foto,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-foto{filter:sepia(.18) saturate(.9) brightness(.92) contrast(1.03)}
/* ---------- 5.16. GeneratePress-header en -footer uit.
   Het thema levert alleen nog de contentkolom; banner en
   footer komen als .knussie-kop / .knussie-voet uit de
   mu-plugin (zie knussie-stijl-mu.php). */
.site-header,.site-footer,.footer-widgets,.site-info{display:none}
/* Vangnet: nooit een sidebarkolom op inhoudspaginas, ongeacht de
   GP-layoutinstelling. Het metaveld _generate-sidebar-layout-meta
   staat sinds r22 op no-sidebar voor alle bestaande paginas; dit
   dekt paginas die later zonder dat veld worden aangemaakt
   (anders schuift de hele leeskolom naar links). */
.site-content .content-area:where(:not(:has(.knc:not(.kn-kader)))){width:100%!important;float:none}
.site-content .sidebar,.site-content .widget-area{display:none!important}
/* ---------- 5.17. Sitebanner: witte balk met haarlijn, links
   beeldmerk + woordmerk, rechts korte nav + mandje (zelfde
   opbouw als de sitehead van de homepage-mockup). */
.knussie-kop{
  background:var(--kn-wit);
  border-bottom:1px solid rgba(11,12,14,.07);
  padding:0 24px;
  font-family:'Karla',system-ui,sans-serif;
}
.knussie-kop-in{
  max-width:1080px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:66px;
}
.knussie-merk{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  padding:6px 0;
}
.knussie-merk svg{display:block;flex:none}
.knussie-woordmerk{
  font-family:'Young Serif',Georgia,serif;
  font-weight:400;
  font-size:23px;
  line-height:1;
  color:var(--kn-donker);
  letter-spacing:-.01em;
}
.knussie-woordmerk sup{
  font-family:'Karla',system-ui,sans-serif;
  font-size:.42em;
  font-weight:700;
  vertical-align:baseline;
  position:relative;
  top:-.52em;
  margin-left:1px;
  opacity:.8;
}
.knussie-kop-nav{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end}
.knussie-kop-nav a{
  text-decoration:none;
  font-size:15px;
  font-weight:700;
  color:var(--kn-donker);
  padding:11px 13px;
  border-radius:999px;
  white-space:nowrap;
}
@media (hover:hover){.knussie-kop-nav a:hover{background:var(--kn-oat)}}
.knussie-mandje{
  display:inline-flex;
  align-items:center;
  flex:none;
  padding:10px;
  border-radius:999px;
  color:var(--kn-donker);
}
.knussie-mandje svg{display:block}
@media (hover:hover){.knussie-mandje:hover{background:var(--kn-oat)}}
.knussie-kop a:focus-visible,.knussie-voet a:focus-visible{
  outline:2.5px solid var(--kn-goudd);
  outline-offset:2px;
  border-radius:8px;
}
@media (max-width:900px){
  .knussie-kop-nav a{font-size:14px;padding:10px 8px}
}
@media (max-width:680px){
  .knussie-kop{padding:0 14px}
  .knussie-kop-nav{display:none}
}
/* ---------- 5.18. Footer: merkblok + drie linkkolommen op wit,
   haarlijn erboven, legal-regel eronder (mockup-footmock). */
.knussie-voet{
  background:var(--kn-wit);
  border-top:1px solid rgba(11,12,14,.07);
  padding:56px 24px 44px;
  font-family:'Karla',system-ui,sans-serif;
  font-size:17px;
  line-height:1.7;
  color:var(--kn-tekst);
}
.knussie-voet-in{
  max-width:1080px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:40px 56px;
  justify-content:space-between;
}
.knussie-voet-merk .knussie-woordmerk{font-size:26px}
.knussie-voet-tagline{
  margin-top:10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--kn-muted);
}
.knussie-voet-golf{display:block;margin-top:10px;overflow:visible}
.knussie-voet-kop{
  font-family:'Karla',system-ui,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--kn-oker);
  margin:0 0 12px;
}
.knussie-voet ul{list-style:none;margin:0;padding:0;font-size:15px}
.knussie-voet li{margin-bottom:4px}
.knussie-voet a{
  color:var(--kn-muted);
  text-decoration:none;
  display:inline-block;
  padding:5px 0;
}
@media (hover:hover){.knussie-voet a:hover{color:var(--kn-donker);text-decoration:underline}}
.knussie-voet-legal{
  max-width:1080px;
  margin:40px auto 0;
  padding-top:20px;
  border-top:1px solid rgba(11,12,14,.07);
  font-size:13px;
  color:var(--kn-muted);
}
@media (max-width:680px){
  .knussie-voet{padding:44px 18px 36px}
  .knussie-voet-in{gap:32px 40px;justify-content:flex-start}
}
/* ---------- 5.19. Terug naar home: secundaire outline-pil,
   gecentreerd onder de content (mu-plugin hangt hem via een
   the_content-filter achter de paginatekst). */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-terug{
  text-align:center;
  margin-top:clamp(40px,6vw,64px);
  padding-top:clamp(28px,4vw,40px);
  border-top:1px solid var(--kn-lijn);
}
.knus-btn-sec,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-terug a{
  display:inline-block;
  background:transparent;
  color:var(--kn-donker);
  border:1.5px solid var(--kn-donker);
  border-radius:999px;
  padding:13px 32px;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  transition:background .2s,color .2s;
}
@media (hover:hover){.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-terug a:hover{
  background:var(--kn-donker);
  color:var(--kn-cream);
}}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-terug a:focus-visible{
  outline:2.5px solid var(--kn-goudd);
  outline-offset:3px;
  border-radius:999px;
}
/* ============================================================
   5.20. WooCommerce "Mijn account" (D7)
   ------------------------------------------------------------
   De accountpagina rendert binnen .entry-content, dus alle
   basisregels hierboven gelden al. Hieronder krijgt WooCommerce
   dezelfde kaarten, knoppen, velden en tabellen als de rest.
   De leeskolom is op deze paginas breder (zie sectie 2).
   ============================================================ */
/* Navigatie links, inhoud rechts. :has zodat alleen de
   my-account-pagina deze indeling krijgt; zonder :has vallen de
   twee blokken netjes onder elkaar. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce:has(.woocommerce-MyAccount-navigation){
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  gap:36px;
  align-items:start;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-MyAccount-navigation,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-MyAccount-content{float:none;width:auto;margin:0}
/* min-width:0 - anders duwt de bestellijst (vijf kolommen) de
   gridkolom breder dan de leeskolom en loopt de tabel buiten de
   kaart. Met wat compactere cellen past hij op 1040px. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-MyAccount-content{min-width:0}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce :is(table.woocommerce-orders-table,table.woocommerce-MyAccount-downloads,table.woocommerce-MyAccount-paymentMethods) :is(th,td){padding:12px 13px}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-notices-wrapper{grid-column:1 / -1}
/* De navigatiekolom als kaart met een duidelijke actieve staat. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-MyAccount-navigation{
  position:sticky;
  top:20px;
  background:var(--kn-wit);
  border:1px solid var(--kn-lijn);
  border-radius:var(--kn-radius);
  box-shadow:var(--kn-sh-sm);
  padding:10px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-MyAccount-navigation ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:2px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-MyAccount-navigation li{margin:0}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-MyAccount-navigation li::before{content:none}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-MyAccount-navigation a{
  display:block;
  padding:11px 16px;
  border-radius:var(--kn-radius-s);
  font-size:15.5px;
  font-weight:700;
  color:var(--kn-tekst);
  text-decoration:none;
}
@media (hover:hover){.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-MyAccount-navigation a:hover{background:var(--kn-oat);color:var(--kn-donker)}}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-MyAccount-navigation li.is-active > a{
  background:var(--kn-donker);
  color:var(--kn-cream);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-MyAccount-navigation-link--customer-logout{
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid var(--kn-lijn);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-MyAccount-navigation-link--customer-logout a{
  color:var(--kn-muted);
  font-weight:500;
}
/* De inhoudkolom: dezelfde koppen en ruimte als de rest. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-MyAccount-content > p:first-child{
  font-size:18px;
  color:var(--kn-tekst);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-MyAccount-content h2,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-MyAccount-content h3,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-Address-title h3,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-Address-title h2,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-EditAccountForm legend{
  font-family:'Young Serif',Georgia,serif;
  font-weight:400;
  color:var(--kn-donker);
  line-height:1.2;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-MyAccount-content h2{font-size:26px;margin:1.6em 0 .6em}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-MyAccount-content h3{font-size:21px;margin:1.5em 0 .5em}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-MyAccount-content > :first-child{margin-top:0}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-MyAccount-content a{text-decoration-color:var(--kn-goud)}
/* Meldingen (message, info, error) als nette blokken. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-message,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-info,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-error,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-notice{
  list-style:none;
  margin:0 0 1.6em;
  padding:16px 20px;
  background:var(--kn-wit);
  border:1px solid var(--kn-lijn);
  border-left:4px solid var(--kn-goud);
  border-radius:var(--kn-radius-s);
  box-shadow:var(--kn-sh-sm);
  font-size:16px;
  color:var(--kn-tekst);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 18px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-message::before,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-info::before,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-error::before{content:none}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-message li,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-info li,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-error li{margin:0;padding:0;width:100%}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-message li::before,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-info li::before,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-error li::before{content:none}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-info{border-left-color:var(--kn-zacht)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-error{border-left-color:var(--kn-donker)}
/* order:2 want WooCommerce zet de knop VOOR de tekst in de dom
   (wc_add_to_cart_message); zonder dit staat hij links met een gat
   erachter. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-message .button,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-info .button,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-error .button{float:none;margin-left:auto;order:2}
/* Knoppen: gouden pil, net als in de rest van de huisstijl. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .button,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce button.button,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce a.button,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce input.button,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce button[type=submit],.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-Button{
  display:inline-block;
  background:var(--kn-knop);
  color:var(--kn-donker);
  padding:13px 30px;
  border:0;
  border-radius:999px;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  line-height:1.3;
  text-decoration:none;
  text-transform:none;
  cursor:pointer;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.4);
  transition:transform .22s,box-shadow .22s,background .22s;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .button:hover,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce button.button:hover,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce a.button:hover,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce input.button:hover,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce button[type=submit]:hover,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-Button:hover{
  background:var(--kn-knopd);
  color:var(--kn-donker);
  transform:translateY(-2px);
  box-shadow:0 14px 26px -12px rgba(0,0,0,.45);
}
/* Knoppen in tabellen en kaarten: compacte outline-pil. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table .button,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-Address .button,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .button.knussie-secundair{
  background:transparent;
  color:var(--kn-donker);
  border:1.5px solid var(--kn-donker);
  padding:8px 20px;
  font-size:14.5px;
  box-shadow:none;
}
@media (hover:hover){.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table .button:hover,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-Address .button:hover,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .button.knussie-secundair:hover{
  background:var(--kn-donker);
  color:var(--kn-cream);
  box-shadow:none;
}}
/* Formuliervelden: zelfde vorm als de mu-plugin-formulieren. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce form .form-row,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-form-row{
  display:block;
  margin:0 0 1.1em;
  padding:0;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce label,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce legend{
  display:block;
  font-weight:700;
  font-size:15.5px;
  color:var(--kn-donker);
  margin:0 0 .35em;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-EditAccountForm fieldset{
  margin:2em 0 1.4em;
  padding:22px 24px;
  background:var(--kn-wit);
  border:1px solid var(--kn-lijn);
  border-radius:var(--kn-radius);
  box-shadow:var(--kn-sh-sm);
}
/* Een legend staat standaard IN de rand van de fieldset en
   knipt die doormidden. Als float gedraagt hij zich als een
   gewone kop binnen de kaart; de ::after ruimt de float op. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-EditAccountForm legend{
  float:left;
  width:100%;
  font-size:20px;
  padding:0;
  margin:0 0 .7em;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-EditAccountForm fieldset::after{
  content:"";
  display:table;
  clear:both;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce input.input-text,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce input[type=text],.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce input[type=email],.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce input[type=tel],.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce input[type=password],.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce textarea,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce select,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .select2-selection{
  width:100%;
  min-height:48px;
  padding:11px 14px;
  background:var(--kn-wit);
  color:var(--kn-tekst);
  border:1.5px solid rgba(11,12,14,.32);
  border-radius:var(--kn-radius-s);
  font:inherit;
  font-size:16px; /* 16px+ voorkomt inzoomen op iOS */
  box-sizing:border-box;
  box-shadow:none;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce :is(input,textarea,select):focus{
  outline:2.5px solid var(--kn-goudd);
  outline-offset:1px;
  border-color:var(--kn-goudd);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-form-login__rememberme,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-form__label-for-checkbox{
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:500;
  font-size:15.5px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-form-login__rememberme input,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-form__input-checkbox{
  width:18px;
  height:18px;
  min-height:0;
  accent-color:var(--kn-goudd);
}
/* WooCommerce zet zelf een rand met hoeken om form.login en
   form.register. Samen met onze kolomkaart werd dat een kaart in
   een kaart; de rand van WooCommerce gaat eruit. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce form.login,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce form.register{
  border:0;
  border-radius:0;
  padding:0;
  margin:0;
}
/* Op /mijn-account/ (uitgelogd) staan beide formulieren al in een
   kolomkaart; daar hoeft het formulier zelf geen kaart te zijn. Op
   het afrekenscherm staat het inlogformulier los en dan wel. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce #customer_login .woocommerce-form-login,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce #customer_login .woocommerce-form-register{
  max-width:none;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-form-login,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-ResetPassword{
  max-width:480px;
  margin:0;
  padding:26px 28px;
  background:var(--kn-wit);
  border:1px solid var(--kn-lijn);
  border-radius:var(--kn-radius);
  box-shadow:var(--kn-sh-md);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-form-login .lost_password{
  margin:1em 0 0;
  font-size:15px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .required{color:var(--kn-oker);text-decoration:none}
/* Tabellen (bestellingen, downloads): de kaartvorm uit sectie 11
   plus een leesbare uitlijning per kolom. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.shop_table,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.woocommerce-orders-table,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.woocommerce-MyAccount-downloads{
  border:0;
  border-radius:var(--kn-radius);
  margin:0 0 1.8em;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.shop_table th{border:0}
/* WooCommerce zet het bestelnummer en de totaalregels in een <th>
   BINNEN de tbody. Sectie 5.11 maakt van elke th de donkere koprij,
   dus die cellen werden zwarte blokken met cremekleurige tekst - op
   /mijn-account/bestellingen/ was het bestelnummer daardoor
   onleesbaar. Een rijkop is hier gewoon een cel, iets zwaarder. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.shop_table tbody th,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.woocommerce-table tbody th{
  background:transparent;
  color:var(--kn-tekst);
  font-size:15.5px;
  font-weight:700;
  letter-spacing:normal;
  text-transform:none;
  padding:12px 18px;
  border-top:1px solid rgba(11,12,14,.07);
  vertical-align:top;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.shop_table tbody tr:first-child th{border-top:0}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.shop_table tbody tr:nth-child(even) th{background:var(--kn-oat)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-orders-table__cell-order-date{white-space:nowrap}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.shop_table td{
  border:0;
  border-top:1px solid rgba(11,12,14,.07);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.shop_table tbody tr:first-child td{border-top:0}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-orders-table__cell-order-actions{text-align:right;white-space:nowrap}
/* Adressen naast elkaar, elk als kaart. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-Addresses,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .u-columns.col2-set{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:22px;
  margin:1.4em 0 0;
}
/* De selectors zijn met opzet een stap specifieker dan die van
   woocommerce-layout.css (.woocommerce .col2-set .col-1), zodat
   de kolombreedte hoe dan ook uit deze stylesheet komt. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-Addresses .woocommerce-Address,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .col2-set .col-1,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .col2-set .col-2,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .u-columns .u-column1,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .u-columns .u-column2{
  float:none;
  width:auto;
  padding:22px 24px;
  background:var(--kn-wit);
  border:1px solid var(--kn-lijn);
  border-radius:var(--kn-radius);
  box-shadow:var(--kn-sh-sm);
}
/* Zelfde verhaal als hierboven: WooCommerce clearfixt ook de kop
   van een adreskaart, en die maken wij flex. Vier klassen, want
   de regel van WooCommerce heeft er zelf drie. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .addresses .title::before,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .addresses .title::after{content:none}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-Address-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-Address-title h3,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-Address-title h2{margin:0;font-size:19px;padding:0;border-top:0}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-Address address{
  font-style:normal;
  font-size:16px;
  line-height:1.6;
  color:var(--kn-tekst);
}
/* Paginering onder de bestellijst. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-pagination ul{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  list-style:none;
  margin:0;
  padding:0;
  border:0;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-pagination li{margin:0;border:0}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-pagination li::before{content:none}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-pagination a,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-pagination span{
  display:inline-block;
  min-width:40px;
  padding:9px 12px;
  text-align:center;
  border-radius:999px;
  background:var(--kn-wit);
  border:1px solid var(--kn-lijn);
  color:var(--kn-tekst);
  text-decoration:none;
  font-weight:700;
  font-size:15px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-pagination .current{
  background:var(--kn-donker);
  color:var(--kn-cream);
  border-color:var(--kn-donker);
}
/* ============================================================
   5.20b. WooCommerce KLASSIEK: winkelmand, afrekenen, bestelling
   ------------------------------------------------------------
   Sectie 5.20 doet de accountpagina; de regels daar hangen aan
   `.woocommerce` en gelden dus al voor elke WooCommerce-shortcode
   (knoppen, velden, tabellen, meldingen). Hieronder alleen wat
   per scherm nog verschilt.

   WAAR DIT VANDAAG AANKOMT (peildatum 28-08-2026):
   - /mijn-account/ en al zijn endpoints        : ja
   - /afrekenen/bestelling-ontvangen/           : ja (thankyou.php)
   - /afrekenen/order-pay/ en betaalmethode
     toevoegen (#payment, .wc_payment_methods,
     #place_order)                              : ja
   - /winkelmand/ en /afrekenen/ zelf           : NEE - die pagina's
     dragen de Cart- en Checkout-BLOKKEN, zie 5.20c. De regels voor
     .woocommerce-cart-form__contents en .woocommerce-checkout
     staan hier klaar voor het geval die pagina's ooit terug naar
     de shortcodes gaan; ze raken nu niets.
   ============================================================ */

/* WooCommerce zet zijn eigen formulierknoppen op --wc-*-variabelen.
   Ze hier op de huisstijl zetten scheelt tientallen losse regels en
   vangt ook velden op die we niet met naam kennen. --wc-red blijft
   rood: dat is een foutsignaal, geen huisstijlkleur. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce{
  --wc-form-border-color:rgba(11,12,14,.32);
  --wc-form-border-width:1.5px;
  --wc-form-border-radius:var(--kn-radius-s);
  --wc-form-color-background:var(--kn-wit);
  --wc-form-color-text:var(--kn-tekst);
}
/* De span die WooCommerce om elk veld zet is inline; als blok loopt
   de breedte van het veld gelijk met het label erboven. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-input-wrapper{display:block}
/* WooCommerce zet op elke kolomindeling een clearfix met ::before en
   ::after. Zodra wij daar een grid van maken worden dat twee LEGE
   CELLEN en schuift elke kolom een plek op. Dat was al zichtbaar op
   /mijn-account/: de twee adreskaarten stonden diagonaal in plaats
   van naast elkaar (sectie 5.20 maakt .woocommerce-Addresses een
   grid). Deze regel hoort dus net zo goed bij 5.20. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce :is(.col2-set,.u-columns,.cart-collaterals,.woocommerce-columns,.woocommerce-Addresses,.order_details,.woocommerce-order-overview)::before,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce :is(.col2-set,.u-columns,.cart-collaterals,.woocommerce-columns,.woocommerce-Addresses,.order_details,.woocommerce-order-overview)::after{content:none}
/* Twee velden naast elkaar zonder floats (voornaam/achternaam,
   postcode/plaats). WooCommerce doet dit met float+47%; grid houdt
   de rijen gelijk hoog en heeft geen clearfix nodig. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce form .form-row-first,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce form .form-row-last{
  float:none;
  width:auto;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce form:has(.form-row-first) .woocommerce-billing-fields__field-wrapper,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-shipping-fields__field-wrapper,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-EditAccountForm{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 20px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-billing-fields__field-wrapper > :not(.form-row-first):not(.form-row-last),.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-shipping-fields__field-wrapper > :not(.form-row-first):not(.form-row-last),.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-EditAccountForm > :not(.form-row-first):not(.form-row-last){
  grid-column:1 / -1;
}
/* De clearfix-div's van WooCommerce hebben in een grid niets te doen. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .clear{display:none}
/* Verplicht-sterretje: WooCommerce verbergt hem (visibility:hidden)
   en toont in plaats daarvan (optioneel). Wij tonen hem wel, in de
   labelkleur, want de formulieren op de zijpagina's doen dat ook. */
/* Het sterretje blijft verborgen (WooCommerce toont in plaats
   daarvan "(optioneel)" bij niet-verplichte velden); alleen de
   kleur en de rand gaan mee met de huisstijl, voor de plekken waar
   WooCommerce hem wel toont (abbr in de afrekenvelden). */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce form .form-row .required,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce abbr.required{
  color:var(--kn-oker);
  border:0;
  text-decoration:none;
}
/* Een goed ingevuld veld krijgt van WooCommerce een groene rand.
   Rood bij een fout houden we (dat is een signaal), groen bij goed
   niet: dat is decoratie in een kleur die niet in het palet zit. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce form .form-row.woocommerce-validated input.input-text,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce form .form-row.woocommerce-validated select{border-color:rgba(11,12,14,.32)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .optional{color:var(--kn-muted);font-weight:400}

/* ---------- 5.20b.1 Winkelmand (klassiek) */
/* De producttabel krijgt de kaartvorm al uit 5.11. Hier alleen de
   kolommen en de bediening erin. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart th.product-remove,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.product-remove{width:52px;padding-right:0}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart th.product-thumbnail,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.product-thumbnail{width:96px}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.product-thumbnail img{
  width:78px;
  height:auto;
  border-radius:var(--kn-radius-xs);
  display:block;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td{vertical-align:middle}
/* Zebra uit: de rijen zijn hier hoog en hebben een foto; het
   verwijderknopje moet bovendien op elke rij dezelfde tint hebben. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart tbody tr:nth-child(even) td{background:transparent}
/* Productnaam: geen dikke gouden onderstreping in een tabel. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.product-name > a{
  font-weight:700;
  color:var(--kn-donker);
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}
/* Variaties (kleur, maat) compact onder de naam. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce dl.variation{
  margin:.35em 0 0;
  font-size:14.5px;
  color:var(--kn-muted);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0 6px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce dl.variation dt{float:none;margin:0;font-weight:500}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce dl.variation dd{margin:0}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce dl.variation p{margin:0}
/* Verwijderkruisje. WooCommerce zet de kleur met !important op rood;
   daarom moet deze regel dat ook doen. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce a.remove{
  width:30px;
  height:30px;
  line-height:28px;
  font-size:22px;
  color:var(--kn-tekst)!important;
  background:var(--kn-oat);
  border-radius:var(--kn-pil);
}
@media (hover:hover){.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce a.remove:hover{
  color:var(--kn-cream)!important;
  background:var(--kn-donker);
}}
/* Aantalveld. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .quantity{display:inline-block}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .quantity .qty{
  width:84px;
  min-height:44px;
  text-align:center;
  padding:9px 6px;
  background:var(--kn-wit);
  color:var(--kn-tekst);
  border:1.5px solid rgba(11,12,14,.32);
  border-radius:var(--kn-radius-s);
  font:inherit;
  font-size:16px;
}
/* De actiebalk onderin de tabel: kortingscode links, bijwerken rechts. */
/* LET OP: geen display:flex op deze cel. Een <td> met colspan=6 die
   flex wordt, is geen tabelcel meer; de colspan vervalt en de balk
   krimpt tot de breedte van de eerste kolom. Daarom hier gewoon de
   floats die WooCommerce zelf ook gebruikt, met een clearfix. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.actions{
  background:var(--kn-oat);
  padding:16px 18px;
  text-align:right;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.actions::after{content:"";display:block;clear:both}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.actions .coupon{
  float:left;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.actions > .button{float:right;margin-left:12px}
/* flex-basis EN max-width:none. GeneratePress zet op elke input
   een max-width van 100 procent; dat percentage rekent tegen een
   zwevende flexbox met onbepaalde breedte, waardoor het veld tot de
   breedte van de placeholder kromp (80px gemeten). */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.actions .coupon .input-text{
  flex:0 0 220px;
  max-width:none;
  width:220px;
  min-height:44px;
  padding:9px 14px;
  background:var(--kn-wit);
  border:1.5px solid rgba(11,12,14,.32);
  border-radius:var(--kn-radius-s);
  font:inherit;
  font-size:16px;
}
/* Beide knoppen in deze balk zijn secundair; de gouden pil is voor
   de doorgaan-knop hieronder, die mag als enige de aandacht. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.actions .button{
  background:transparent;
  color:var(--kn-donker);
  border:1.5px solid var(--kn-donker);
  padding:10px 22px;
  font-size:15px;
  box-shadow:none;
  float:none;
  width:auto;
  display:inline-block;
}
@media (hover:hover){.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.actions .button:hover{
  background:var(--kn-donker);
  color:var(--kn-cream);
  box-shadow:none;
}}
/* Totalen naast de tabel in plaats van de float van 48 procent. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .cart-collaterals{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,380px);
  gap:28px;
  align-items:start;
  margin-top:26px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .cart-collaterals .cart_totals{
  float:none;
  width:auto;
  grid-column:2;
  padding:24px 26px;
  background:var(--kn-wit);
  border:1px solid var(--kn-lijn);
  border-radius:var(--kn-radius);
  box-shadow:var(--kn-sh-md);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .cart-collaterals .cross-sells,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .cart-collaterals .shipping_calculator{float:none;width:auto;grid-column:1}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .cart_totals h2{
  font-family:'Young Serif',Georgia,serif;
  font-weight:400;
  font-size:22px;
  color:var(--kn-donker);
  margin:0 0 .7em;
  padding:0;
  border-top:0;
}
/* De tabel binnen de totalenkaart is geen tweede kaart. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .cart_totals table,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-checkout-review-order table{
  background:transparent;
  box-shadow:none;
  border-radius:0;
  font-size:16px;
  margin:0;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .cart_totals table th{
  background:transparent;
  color:var(--kn-tekst);
  font-size:15.5px;
  font-weight:500;
  letter-spacing:normal;
  text-transform:none;
  padding:11px 0;
  width:44%;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .cart_totals table td{
  padding:11px 0;
  text-align:right;
  border-top:1px solid var(--kn-lijn);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .cart_totals table tr:first-child td,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .cart_totals table tr:first-child th{border-top:0}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .cart_totals table tbody tr:nth-child(even) td{background:transparent}
/* De verzendcel bevat een lijstje met radio's en een adresregel;
   die hoort links te staan, niet rechts zoals de bedragen. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .cart_totals table tr.shipping td,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .cart_totals table tr.woocommerce-shipping-totals td{text-align:left}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .cart_totals .order-total th,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .cart_totals .order-total td{
  font-size:19px;
  font-weight:700;
  color:var(--kn-donker);
  padding-top:14px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .cart_totals .includes_tax{display:block;font-size:13.5px;font-weight:400;color:var(--kn-muted)}
/* Verzendkeuze: radio's onder elkaar, geen bolletjes van de zijpagina. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce ul#shipping_method,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-shipping-methods{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
  text-align:left;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-shipping-methods li{
  margin:0;
  padding:0;
  display:flex;
  align-items:baseline;
  gap:9px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-shipping-methods li::before{content:none}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-shipping-methods input{
  accent-color:var(--kn-goudd);
  width:auto;
  min-height:0;
  flex:0 0 auto;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-shipping-methods label{
  display:inline;
  font-weight:500;
  font-size:15.5px;
  margin:0;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-shipping-destination,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-shipping-contents{
  margin:.7em 0 0;
  font-size:14.5px;
  color:var(--kn-muted);
}
/* Doorgaan naar afrekenen: de enige gouden knop op deze pagina. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .wc-proceed-to-checkout{margin:22px 0 0;padding:0}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .wc-proceed-to-checkout .checkout-button{
  display:block;
  width:100%;
  text-align:center;
  padding:16px 28px;
  font-size:17px;
}
/* Lege mand. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .cart-empty{margin-bottom:1.2em}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .return-to-shop{margin:0}

/* ---------- 5.20b.2 Afrekenen (klassiek) */
/* Twee kolommen zonder floats; onder 900px onder elkaar. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce #customer_details{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin-bottom:30px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce #customer_details > .col-1,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce #customer_details > .col-2{
  float:none;
  width:auto;
  padding:26px 28px;
  background:var(--kn-wit);
  border:1px solid var(--kn-lijn);
  border-radius:var(--kn-radius);
  box-shadow:var(--kn-sh-sm);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-checkout h3,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce #order_review_heading{
  font-family:'Young Serif',Georgia,serif;
  font-weight:400;
  font-size:21px;
  color:var(--kn-donker);
  margin:0 0 .8em;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce #order_review_heading{margin:34px 0 .7em}
/* Besteloverzicht plus betaalblok als een kaart. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce #order_review{
  padding:26px 28px;
  background:var(--kn-wit);
  border:1px solid var(--kn-lijn);
  border-radius:var(--kn-radius);
  box-shadow:var(--kn-sh-md);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.woocommerce-checkout-review-order-table th{
  background:transparent;
  color:var(--kn-muted);
  font-size:12.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:0 0 10px;
  border-bottom:1px solid var(--kn-lijn);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.woocommerce-checkout-review-order-table td{
  padding:14px 0;
  border-top:0;
  border-bottom:1px solid var(--kn-lijn);
  vertical-align:top;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.woocommerce-checkout-review-order-table tbody tr:nth-child(even) td{background:transparent}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.woocommerce-checkout-review-order-table td.product-total,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.woocommerce-checkout-review-order-table th.product-total{text-align:right}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.woocommerce-checkout-review-order-table tfoot th{
  background:transparent;
  color:var(--kn-tekst);
  font-size:15.5px;
  font-weight:500;
  letter-spacing:normal;
  text-transform:none;
  padding:11px 0;
  border-bottom:0;
  border-top:1px solid var(--kn-lijn);
  text-align:left;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.woocommerce-checkout-review-order-table tfoot td{
  padding:11px 0;
  text-align:right;
  border-bottom:0;
  border-top:1px solid var(--kn-lijn);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.woocommerce-checkout-review-order-table tfoot .order-total th,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.woocommerce-checkout-review-order-table tfoot .order-total td{
  font-size:19px;
  font-weight:700;
  color:var(--kn-donker);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .product-quantity{color:var(--kn-muted);font-weight:500}
/* Betaalmethoden. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce #payment{
  background:transparent;
  border-radius:0;
  margin-top:22px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce ul.wc_payment_methods{
  list-style:none;
  margin:0 0 20px;
  padding:0;
  display:grid;
  gap:10px;
  border:0;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce ul.wc_payment_methods > li{
  margin:0;
  padding:14px 16px;
  background:var(--kn-cream);
  border:1.5px solid var(--kn-lijn2);
  border-radius:var(--kn-radius-s);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce ul.wc_payment_methods > li::before{content:none}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce ul.wc_payment_methods > li:has(input:checked){
  border-color:var(--kn-goudd);
  background:var(--kn-wit);
  box-shadow:var(--kn-sh-sm);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce ul.wc_payment_methods input.input-radio{accent-color:var(--kn-goudd);width:auto;min-height:0;margin-right:8px}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce ul.wc_payment_methods label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-size:16px;
  font-weight:700;
  color:var(--kn-donker);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce ul.wc_payment_methods label img{max-height:26px;width:auto;margin:0}
/* #payment moet in de selector staan, anders wint WooCommerce met
   zijn eigen id-regel: een lila vlak met een driehoekje erboven. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce #payment div.payment_box{
  margin:10px 0 0;
  padding:12px 14px;
  background:var(--kn-oat);
  border-radius:var(--kn-radius-xs);
  font-size:15px;
  color:var(--kn-tekst);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce #payment div.payment_box::before{border-bottom-color:var(--kn-oat)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce #payment ul.payment_methods{padding:0;border-bottom:0}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce #payment div.form-row{padding:0}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .payment_box p:last-child{margin-bottom:0}
/* Voorwaarden en de bestelknop. De knoptekst zelf komt uit
   WooCommerce ("Bestellen met betaalverplichting") en blijft. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-terms-and-conditions-wrapper{margin:0 0 18px}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-terms-and-conditions-wrapper .form-row{margin:0}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce label.checkbox,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-form__label-for-checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-weight:500;
  font-size:15.5px;
  line-height:1.5;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce label.checkbox input,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .input-checkbox{
  width:18px;
  height:18px;
  min-height:0;
  margin-top:.25em;
  accent-color:var(--kn-goudd);
  flex:0 0 auto;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce #place_order{
  display:block;
  width:100%;
  float:none;
  padding:17px 28px;
  font-size:17px;
  text-align:center;
}
/* Kortingscode-uitklap boven het formulier. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce form.checkout_coupon{
  margin:0 0 1.6em;
  padding:20px 22px;
  background:var(--kn-wit);
  border:1px solid var(--kn-lijn);
  border-radius:var(--kn-radius);
  box-shadow:var(--kn-sh-sm);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:end;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce form.checkout_coupon .form-row{margin:0;width:auto;float:none}

/* ---------- 5.20b.3 Bestelling ontvangen en bestelling bekijken */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-thankyou-order-received{
  margin:0 0 1.6em;
  padding:20px 24px;
  background:var(--kn-wit);
  border:1px solid var(--kn-lijn);
  border-left:4px solid var(--kn-goud);
  border-radius:var(--kn-radius-s);
  box-shadow:var(--kn-sh-sm);
  font-size:18px;
  color:var(--kn-donker);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce ul.woocommerce-order-overview{
  list-style:none;
  margin:0 0 2em;
  padding:20px 24px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:18px 24px;
  background:var(--kn-oat);
  border-radius:var(--kn-radius);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce ul.woocommerce-order-overview li{
  margin:0;
  padding:0;
  border:0;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--kn-oker);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce ul.woocommerce-order-overview li::before{content:none}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce ul.woocommerce-order-overview li strong{
  display:block;
  margin-top:5px;
  font-size:17px;
  font-weight:700;
  letter-spacing:normal;
  text-transform:none;
  color:var(--kn-donker);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-order-details__title,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-column__title{
  font-family:'Young Serif',Georgia,serif;
  font-weight:400;
  font-size:21px;
  color:var(--kn-donker);
  margin:0 0 .7em;
  padding:0;
  border-top:0;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-customer-details{margin-top:2em}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-columns--addresses{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:22px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-customer-details address{
  font-style:normal;
  font-size:16px;
  line-height:1.6;
  border:0;
  border-radius:0;
  padding:0;
  width:auto;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-customer-details--email,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-customer-details--phone{margin:.6em 0 0;font-size:15px;color:var(--kn-muted)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.woocommerce-table--order-details tfoot th{
  background:transparent;
  color:var(--kn-tekst);
  font-size:15.5px;
  font-weight:500;
  letter-spacing:normal;
  text-transform:none;
  text-align:left;
  padding:11px 18px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.woocommerce-table--order-details tfoot td{text-align:right}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.woocommerce-table--order-details tfoot tr:last-child th,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.woocommerce-table--order-details tfoot tr:last-child td{
  font-size:18px;
  font-weight:700;
  color:var(--kn-donker);
}

/* ---------- 5.20b.4 Kleinere schermen (klassiek) */
@media (max-width:900px){
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce #customer_details{grid-template-columns:minmax(0,1fr)}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .cart-collaterals{grid-template-columns:minmax(0,1fr)}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .cart-collaterals .cart_totals{grid-column:1}
}
@media (max-width:768px){
  /* WooCommerce laat de winkelmandtabel hier al stapelen
     (woocommerce-smallscreen, breekpunt 768px). Deze regels lopen
     daarmee mee in plaats van pas op 580px. */
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.product-thumbnail{display:none}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.actions{
    display:block;
    text-align:left;
  }
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.actions::before{content:none}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.actions .coupon{margin-bottom:12px}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.actions .coupon .input-text{width:100%}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.actions .button{width:100%;text-align:center}
  /* woocommerce-smallscreen zet het kortingsveld en de knop op
     float + width:48% met een selector die "#content" bevat - en
     #content is precies de wrapper die GeneratePress om de inhoud
     zet. Die id-specificiteit is met klassen niet te verslaan, dus
     staat #content hier ook in. Vervalt die id ooit, dan valt dit
     terug op de twee kolommen van WooCommerce; dat is lelijk, niet
     stuk. */
  #content .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.actions .coupon{display:block;float:none;width:100%}
  #content .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.actions .coupon .input-text{float:none;width:100%;margin:0 0 10px}
  #content .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.actions .coupon .button{float:none;width:100%;margin:0}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.product-remove{text-align:right}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.product-remove a.remove{margin-left:auto}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce dl.variation{grid-template-columns:auto auto;justify-content:end}
  /* De kortingsknop is een flexitem; width:100% zonder flex-basis
     laat hem toch op inhoudsbreedte staan. */
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.actions .coupon{display:block;float:none;width:100%}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.cart td.actions .coupon .input-text{flex:none;width:100%;margin-bottom:10px}
  /* Gestapelde tabelcellen: label en waarde mogen breken, anders
     duwt "Verzenden naar 1234 AB, Amsterdam." de cel buiten de
     kaart (flexitems krimpen niet onder hun min-content). */
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.shop_table_responsive td{flex-wrap:wrap;min-width:0}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.shop_table_responsive td::before{flex:0 0 auto}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.shop_table_responsive td > *{min-width:0}
  /* De verzendcel heeft een lijstje en een adresregel; die krijgen
     de volle breedte in plaats van een kolom naast het label. */
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .cart_totals table.shop_table_responsive tr.shipping td,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals td{display:block;text-align:left}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .cart-collaterals .cart_totals{padding:20px 18px}
}
@media (max-width:600px){
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce form:has(.form-row-first) .woocommerce-billing-fields__field-wrapper,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-shipping-fields__field-wrapper,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-EditAccountForm{grid-template-columns:minmax(0,1fr)}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce form.checkout_coupon{grid-template-columns:minmax(0,1fr)}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce #customer_details > .col-1,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce #customer_details > .col-2,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce #order_review{padding:20px 18px}
}

/* ============================================================
   5.20c. WooCommerce BLOKKEN: winkelmand en afrekenen
   ------------------------------------------------------------
   /winkelmand/ (pagina 6) draagt het Cart-blok en /afrekenen/
   (pagina 7) het Checkout-blok. Die renderen client-side met
   `wc-block-*`-klassen; geen enkele klassieke selector uit 5.20b
   komt daar aan. WooCommerce laadt er cart.css (78 kB) en
   checkout.css (167 kB) bij.

   Werkwijze: alleen selectors gebruiken die letterlijk in die twee
   stylesheets voorkomen - staat een selector daar, dan bestaat hij
   ook in de DOM. De indeling (kolommen, container queries,
   stapelgedrag) blijft van WooCommerce; wij doen letter, kleur,
   vorm en de knoppen. Zo raakt niets aan de bestelstroom.

   LET OP: deze sectie is getoetst op een NAGEBOUWDE DOM, niet op de
   echte pagina (die zit achter basic auth en rendert pas met JS).
   Vóór de lancering nog een keer op de echte /winkelmand/ en
   /afrekenen/ nalopen.
   ============================================================ */

/* ---------- 5.20c.1 De zijpagina-opmaak uit de blokken houden.
   .entry-content stuurt op deze pagina's ook de blokinhoud aan:
   gouden bolletjes voor elke <li>, dikke gouden onderstreping onder
   elke link, en (het ergste) de kaartvorm met donkere koprij over
   `table.wc-block-cart-items` - waardoor de kopregel Product/Totaal
   crème op crème werd en dus onzichtbaar. De uitsluitingslijsten in
   5.6, 5.7 en 5.11 dragen daarom nu ook [class*="wc-block"]. Hier
   staat wat daarna nog rechtgezet moet worden. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) p{margin:0 0 .8em}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) li{margin:0}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) li::marker{color:inherit}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) a{
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  text-decoration-color:var(--kn-goudd);
}
/* Knoppen die als link vermomd zijn (verwijderen, adres wijzigen,
   terug naar winkelmand) horen geen gouden pil te worden. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) :is(.wc-block-cart-item__remove-link,.wc-block-components-totals-shipping__change-address-button,.wc-block-components-checkout-return-to-cart-button){
  background:none;
  border:0;
  padding:0;
  color:var(--kn-muted);
  font:inherit;
  font-size:14.5px;
  text-decoration:underline;
  text-decoration-color:var(--kn-zacht);
  text-underline-offset:2px;
}
/* V3-A1 (18-09): het tikdoel van de verwijderknop naar 44 x 44. De knop zelf is een
   icoon van 24 px; de doos eromheen groeit, het beeld blijft. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-cart-item__remove-link{
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
@media (hover:hover){.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) :is(.wc-block-cart-item__remove-link,.wc-block-components-totals-shipping__change-address-button,.wc-block-components-checkout-return-to-cart-button):hover{color:var(--kn-donker)}}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-checkout-return-to-cart-button{white-space:nowrap}

/* ---------- 5.20c.2 Letter en koppen */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout){
  font-family:'Karla',system-ui,sans-serif;
  color:var(--kn-tekst);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) :is(.wc-block-components-checkout-step__title,.wc-block-components-checkout-order-summary__title-text,.wc-block-cart__totals-title,.wc-block-cart__empty-cart__title){
  font-family:'Young Serif',Georgia,serif;
  font-weight:400;
  font-size:21px;
  line-height:1.2;
  letter-spacing:normal;
  text-transform:none;
  color:var(--kn-donker);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-checkout-step__description{
  font-size:15px;
  color:var(--kn-muted);
  margin:.35em 0 0;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-product-name{
  font-weight:700;
  font-size:16.5px;
  color:var(--kn-donker);
  text-decoration:none;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-product-details{
  list-style:none;
  margin:.3em 0 0;
  padding:0;
  font-size:14.5px;
  color:var(--kn-muted);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-product-details li{padding-left:0}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-product-details li::before{content:none}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-product-details__name{font-weight:500}

/* ---------- 5.20c.3 De winkelmandtabel */
/* De kopregel is crème-op-crème als de tabelregels uit 5.11
   meekomen; hier hoort hij gedempt en klein, zoals de labels
   elders op de site. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header th{
  color:var(--kn-muted);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .wp-block-woocommerce-cart .wc-block-cart-item__image img{border-radius:var(--kn-radius-xs)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .wp-block-woocommerce-cart .wc-block-cart-item__total{font-size:16.5px;font-weight:700;color:var(--kn-donker)}
/* Aantalkiezer als een net veld met twee knoppen. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-quantity-selector{
  border:1.5px solid rgba(11,12,14,.32);
  border-radius:var(--kn-radius-s);
  background:var(--kn-wit);
  max-width:134px;
  /* WooCommerce zet het omhulsel op een vaste 107 px; met knoppen van 44 px (tikdoel) en een veld van
     44 px past dat niet en stak de plusknop 21 px buiten het kader. Gemeten 20-09. 134 en niet 132:
     het omhulsel is border-box met 1 px rand, dus 132 inhoud vraagt 134 (tester, 20-09). */
  width:auto;
  min-width:134px;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-quantity-selector__input{
  font:inherit;
  font-size:16px;
  font-weight:700;
  color:var(--kn-tekst);
  background:transparent;
  border:0;
  min-height:42px;
  /* Twee cijfers moeten passen: met de padding van WooCommerce (15 px) bleef er 10 px over en werd
     "10" afgeknipt tot "1(". Gemeten 20-09. */
  width:44px;
  min-width:44px;
  padding:10px 4px;
  text-align:center;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-quantity-selector__button{
  background:transparent;
  border:0;
  color:var(--kn-tekst);
  font-size:18px;
  min-height:44px;
  min-width:44px;
  padding:0 12px;
}
@media (hover:hover){.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-quantity-selector__button:hover{background:var(--kn-oat);color:var(--kn-donker)}}
/* Pre-orderstand: geen doorgestreepte lanceerprijs en geen "Bespaar"-badge in mand en kassa. De lanceerprijs is
   nog nooit gerekend, dus er is geen vroegere prijs om door te strepen; de duiding staat als regel onder het
   item (knussie-mand.php). Gemeten 20-09. */
body.kn-preorder :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-product-price :is(del,.screen-reader-text),
body.kn-preorder :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-sale-badge{display:none}

/* ---------- 5.20c.4 Totalen en zijkolom als kaart */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) :is(.wc-block-cart__sidebar,.wc-block-checkout__sidebar){
  padding:24px 26px;
  background:var(--kn-wit);
  border:1px solid var(--kn-lijn);
  border-radius:var(--kn-radius);
  box-shadow:var(--kn-sh-md);
  box-sizing:border-box;
}
/* Het besteloverzicht heeft zelf al een rand met hoeken; in onze
   witte kaart is dat een kaart in een kaart. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) :is(.wc-block-cart__sidebar,.wc-block-checkout__sidebar) :is(.wp-block-woocommerce-checkout-order-summary-block,.checkout-order-summary-block-fill){border:0;border-radius:0}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-totals-item__label{font-size:15.5px;font-weight:500;color:var(--kn-tekst)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-totals-item__value{font-size:15.5px;font-weight:700;color:var(--kn-donker)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-totals-footer-item :is(.wc-block-components-totals-item__label,.wc-block-components-totals-item__value){
  font-family:'Karla',system-ui,sans-serif;
  font-size:20px;
  font-weight:700;
  color:var(--kn-donker);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-totals-item__description,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-totals-footer-item-tax{
  font-size:13.5px;
  color:var(--kn-muted);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-totals-shipping__via{font-size:13.5px;color:var(--kn-muted)}

/* ---------- 5.20c.5 Knoppen */
/* WooCommerce laat de blokknoppen bewust aan het thema over; zonder
   deze regels zet GeneratePress ze op donkergrijs, en een knop die
   een <a> is (doorgaan naar afrekenen) blijft zelfs een kale link. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-button:not(.is-link){
  background:var(--kn-knop);
  color:var(--kn-donker);
  border:0;
  border-radius:var(--kn-pil);
  padding:14px 30px;
  min-height:0;
  font-family:inherit;
  font-size:16.5px;
  font-weight:700;
  line-height:1.3;
  text-decoration:none;
  text-transform:none;
  cursor:pointer;
  box-shadow:var(--kn-sh-knop);
  transition:transform .22s,box-shadow .22s,background .22s;
}
@media (hover:hover){.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-button:not(.is-link):hover{
  background:var(--kn-knopd);
  color:var(--kn-donker);
  transform:translateY(-2px);
  box-shadow:var(--kn-sh-knop-hover);
}}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-button:not(.is-link) .wc-block-components-button__text{color:inherit}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) :is(.wc-block-cart__submit-button,.wc-block-components-checkout-place-order-button){
  width:100%;
  padding:17px 28px;
  font-size:17px;
}
/* De knop naast het kortingsveld is secundair. */
/* .wc-block-components-button:not(.is-link) hierboven telt vier
   klassen (de :not telt mee); zonder dat extra deel verliest deze
   regel en blijft de knop goud naast de gouden doorgaan-knop. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__button.wc-block-components-button:not(.is-link){
  background:transparent;
  color:var(--kn-donker);
  border:1.5px solid var(--kn-donker);
  padding:11px 20px;
  font-size:15px;
  box-shadow:none;
}
@media (hover:hover){.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__button.wc-block-components-button:not(.is-link):hover{
  background:var(--kn-donker);
  color:var(--kn-cream);
  box-shadow:none;
  transform:none;
}}
/* De uitklapkop van de kortingscode is een <button> en zou anders
   de grijze themaknop worden. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-panel__button{
  background:transparent;
  color:var(--kn-tekst);
  border:0;
  padding:12px 0;
  font:inherit;
  font-size:15.5px;
  font-weight:700;
  text-align:left;
  width:100%;
  transition:none;
}
@media (hover:hover){.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-panel__button:hover{background:transparent;color:var(--kn-donker)}}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-panel__button-icon{fill:var(--kn-oker)}

/* ---------- 5.20c.6 Velden */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) :is(.wc-block-components-text-input input,.wc-block-components-address-form input,.wc-block-components-combobox-control select,.wc-block-components-combobox-control input,.wc-block-components-textarea){
  background:var(--kn-wit);
  color:var(--kn-tekst);
  border:1.5px solid rgba(11,12,14,.32);
  border-radius:var(--kn-radius-s);
  font:inherit;
  font-size:16px;
  min-height:48px;
  box-shadow:none;
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) :is(input,select,textarea):focus{
  outline:2.5px solid var(--kn-goudd);
  outline-offset:1px;
  border-color:var(--kn-goudd);
}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-text-input label{color:var(--kn-muted)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-checkbox__input{accent-color:var(--kn-goudd)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-checkbox__label{font-size:15.5px}
/* Verzendkeuze en betaalmethode: gekozen optie in goud. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-radio-control__input{accent-color:var(--kn-goudd)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-radio-control__input:checked{background:var(--kn-goudd);border-color:var(--kn-goudd)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-radio-control__option{border-radius:var(--kn-radius-s)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-radio-control__option:has(input:checked){background:var(--kn-oat)}
/* Label en prijs staan met space-between tegen elkaar aan zodra de
   kolom smal wordt; een gat ertussen houdt ze leesbaar. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) :is(.wc-block-components-radio-control__label-group,.wc-block-components-radio-control__description-group){gap:6px 14px}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) :is(.wc-block-components-radio-control__secondary-label,.wc-block-components-radio-control__secondary-description){flex:0 0 auto;text-align:right}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) :is(.wc-block-components-radio-control__label,.wc-block-components-radio-control__secondary-label){font-size:15.5px;font-weight:700;color:var(--kn-donker)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) :is(.wc-block-components-radio-control__description,.wc-block-components-radio-control__secondary-description){font-size:14px;color:var(--kn-muted)}

/* ---------- 5.20c.7 Meldingen van de blokken.
   Dezelfde vorm als de klassieke meldingen uit 5.20: witte kaart,
   zachte rand, gekleurd streepje links. De randkleur van
   WooCommerce (rood, groen, blauw, oranje) blijft als signaal
   staan, maar alleen op dat streepje. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .wc-block-components-notice-banner{
  align-items:flex-start;
  padding:16px 20px;
  background:var(--kn-wit);
  border:1px solid var(--kn-lijn);
  border-left:4px solid var(--kn-goud);
  border-radius:var(--kn-radius-s);
  box-shadow:var(--kn-sh-sm);
  font-size:16px;
  color:var(--kn-tekst);
  margin:0 0 1.6em;
}
/* Dezelfde streepjeskleuren als de klassieke meldingen in 5.20:
   goud voor gelukt, gedempt grijs voor informatie, donker voor
   een fout. Het rood en groen van WooCommerce blijven in het
   pictogram zitten, dus het signaal gaat niet verloren - en er
   komt geen nieuwe kleur bij die niet in het palet staat. */
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .wc-block-components-notice-banner.is-error{background:var(--kn-wit);border-left-color:var(--kn-donker)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .wc-block-components-notice-banner.is-success{background:var(--kn-wit);border-left-color:var(--kn-goud)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .wc-block-components-notice-banner.is-info{background:var(--kn-wit);border-left-color:var(--kn-zacht)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .wc-block-components-notice-banner.is-warning{background:var(--kn-wit);border-left-color:var(--kn-goudd)}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .wc-block-components-notice-banner > svg{height:22px;width:22px;margin-top:1px}
.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .wc-block-components-notice-banner__summary{font-weight:700;color:var(--kn-donker)}

/* ---------- 5.20c.8 Kleinere schermen (blokken).
   De kolomindeling zelf is van WooCommerce (container queries op
   700px); hier alleen de binnenruimte van de kaart. */
@media (max-width:700px){
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) :is(.wc-block-cart__sidebar,.wc-block-checkout__sidebar){padding:20px 18px}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) :is(.wc-block-components-checkout-step__title,.wc-block-components-checkout-order-summary__title-text,.wc-block-cart__totals-title){font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-button:not(.is-link){transition:none}
  @media (hover:hover){.entry-content:where(:not(:has(.knc:not(.kn-kader)))) :is(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout) .wc-block-components-button:not(.is-link):hover{transform:none}}
}

/* ---------- 5.21. Kleinere schermen */
@media (max-width:900px){
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce:has(.woocommerce-MyAccount-navigation){
    grid-template-columns:minmax(0,1fr);
    gap:26px;
  }
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-MyAccount-navigation{position:static}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-MyAccount-navigation ul{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
  /* In twee kolommen zou het streepje boven Uitloggen half in de
     lucht hangen; de gedempte kleur is genoeg onderscheid. */
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce-MyAccount-navigation-link--customer-logout{
    margin-top:0;
    padding-top:0;
    border-top:0;
  }
}
@media (max-width:580px){
  :root{--kn-pad:18px}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .wp-block-table table,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) table{font-size:14.5px}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .wp-block-table th,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .wp-block-table td{padding:10px 12px}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-toc{padding:18px 18px 16px}
}
/* Bestel- en downloadtabellen stapelen per rij; WooCommerce zet zelf
   data-title op elke cel (shop_table_responsive). Het breekpunt is
   768px en niet 580px, want dat is het breekpunt van
   woocommerce-smallscreen.css: daar begint WooCommerce zelf te
   stapelen (`display:block` per td, met een float-label ervoor).
   Stonden deze regels op 580px, dan zag je tussen 581 en 768px de
   kale WooCommerce-versie van de tabel. */
@media (max-width:768px){
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.shop_table_responsive thead{display:none}
  /* WooCommerce verbergt op klein scherm ook de rijkoppen
     (tbody th{display:none}) - en het BESTELNUMMER zit juist in
     zo'n th. Dat is precies de regel waarop je klikt, dus die
     komt terug, met hetzelfde label-en-waarde-ritme als de rest. */
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.shop_table_responsive tbody th{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:5px 0;
    border:0;
    background:transparent;
    text-align:right;
    font-size:15.5px;
  }
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.shop_table_responsive tbody tr{
    display:block;
    padding:14px 16px;
    border-top:1px solid rgba(11,12,14,.07);
  }
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.shop_table_responsive tbody tr:first-child{border-top:0}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.shop_table_responsive tbody tr:nth-child(even) td,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.shop_table_responsive tbody tr:nth-child(even) th{background:transparent}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.shop_table_responsive td{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:5px 0;
    border:0;
    text-align:right;
  }
  /* WooCommerce zet text-align:right met !important op deze cellen
     en op td.order-actions text-align:left; onze cellen heten
     woocommerce-orders-table__cell-*, dus die tweede regel raakt ons
     niet. De eerste zegt hetzelfde als wij. */
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.shop_table_responsive td::before,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.shop_table_responsive tbody th::before{
    content:attr(data-title) ": ";
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--kn-muted);
    text-align:left;
    float:none;
  }
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.shop_table_responsive td.actions::before,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce table.shop_table_responsive td.product-remove::before{content:none}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .woocommerce-orders-table__cell-order-actions{text-align:right}
}
/* ---------- 5.22. Beweging beperken waar dat gevraagd wordt. */
@media (prefers-reduced-motion:reduce){
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .wp-block-button__link,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-knop,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .button,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce button[type=submit]{transition:none}
  .entry-content:where(:not(:has(.knc:not(.kn-kader)))) .wp-block-button__link:hover,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .knussie-knop:hover,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce .button:hover,.entry-content:where(:not(:has(.knc:not(.kn-kader)))) .woocommerce button[type=submit]:hover{transform:none}
}

/* ============================================================
   6. MOCKUPS - GEDEELDE BASISLAAG
   ------------------------------------------------------------
   Regels die in beide mockupbronnen LETTERLIJK gelijk waren en
   die nergens met een even zware regel in hun eigen bron botsen.
   Ze staan hier nog een keer; sectie 7 en 8 bevatten alleen nog
   wat per pagina verschilt.
   ============================================================ */
.knc *{box-sizing:border-box}
.knc h1,.knc h2,.knc h3{font-family:'Baloo 2',system-ui,sans-serif;font-weight:700;line-height:1.12;margin:0;color:var(--pruim)}
.knc h2{font-size:clamp(30px,3.3vw,42px);letter-spacing:-.01em}
.knc .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.knus-label,.knc .lbl{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#7A581B;font-weight:700}
.knc :is(a,button):focus-visible{outline:2.5px solid var(--kn-goudd);outline-offset:3px;border-radius:6px}
@media (hover:hover){.knc .btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(0,0,0,.45);background:var(--mosterdd)}}
.knc .btn-mand svg{flex:none}
.knc .klabel b{text-transform:none;letter-spacing:0;font-size:15px;color:var(--pruim);margin-left:8px}
.knc .foto{filter:sepia(.16) saturate(.95) brightness(.94) contrast(1.03)}
.knc .sitehead .in{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:66px}
@media (hover:hover){.knc .nav a:hover{background:var(--oat)}}
.knc[data-staal="dekentje"] .dot i .dksvg{display:block;width:100%;height:100%}
.knc[data-staal="dekentje"] .dot.on i{outline:2.5px solid var(--pruim);outline-offset:2.5px}
.knc .footmock li{margin-bottom:4px}
.knc .zoekbalk input:focus{outline:2.5px solid var(--kn-goudd);outline-offset:2px}

/* ============================================================
   7. MOCKUP - HOMEPAGE (post 206)
   ============================================================ */
.knc:where(:not(.pdp2)) .sec{padding:clamp(64px,9vw,96px) 24px}
.knc:where(:not(.pdp2)) section{scroll-margin-top:84px}
.knc:where(:not(.pdp2)) a{color:inherit}
/* A4: skip-link - verborgen tot hij focus krijgt */
.knc:where(:not(.pdp2)) .skiplink{
  position:absolute;left:16px;top:-72px;z-index:120;background:var(--wit);color:var(--pruim);
  padding:12px 22px;border-radius:999px;font-size:15px;font-weight:700;text-decoration:none;
  box-shadow:var(--sh-md);border:1.5px solid var(--pruim)
}
.knc:where(:not(.pdp2)) .skiplink:focus,.knc:where(:not(.pdp2)) .skiplink:focus-visible{top:12px}
.knc:where(:not(.pdp2)) main{display:block}
.knc:where(:not(.pdp2)) .btn{
  display:inline-block;background:var(--mosterd);color:var(--btntxt);padding:15px 34px;border-radius:999px;
  font-size:16.5px;text-decoration:none;font-weight:700;font-family:inherit;border:0;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.4);transition:transform .22s,box-shadow .22s,background .22s
}
.knc:where(:not(.pdp2)) .btn-mand{display:flex;align-items:center;justify-content:center;gap:9px}
.knc:where(:not(.pdp2)) .btn-sec{background:transparent;color:var(--pruim);border:1.5px solid var(--pruim);box-shadow:none}
.knc:where(:not(.pdp2)) .btn-ontdek{display:inline-flex;align-items:center;gap:9px;padding:12px 24px;font-size:14.5px}
.knc:where(:not(.pdp2)) .btn-ontdek svg{flex:none;transition:transform .2s}
@media (hover:hover){.knc:where(:not(.pdp2)) .btn-ontdek:hover svg{transform:translateX(3px)}}
@media (hover:hover){.knc:where(:not(.pdp2)) .btn-sec:hover{background:var(--pruim);color:var(--cream);transform:none;box-shadow:none}}
.knc:where(:not(.pdp2)) .pathlink{display:inline-flex;align-items:center;min-height:44px;margin-top:32px;font-size:15.5px;font-weight:700;color:var(--pruim);text-decoration:none;border-bottom:2px solid var(--mosterd);padding:4px 2px;transition:color .2s}
@media (hover:hover){.knc:where(:not(.pdp2)) .pathlink:hover{color:var(--pruimd)}}
.knc:where(:not(.pdp2)) .tag{display:inline-block;font-size:11.5px;border:1px solid var(--oker);color:var(--oker);border-radius:999px;padding:2px 11px;vertical-align:middle;font-weight:700}
.knc:where(:not(.pdp2)) .trustline{margin:16px 0 0;font-size:14px;color:var(--muted);font-weight:600}
.knc:where(:not(.pdp2)) .klabel{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
/* Een maat: er staat geen kiezer meer onder het maatlabel, dus het label draagt zelf de
   ruimte die .sizechips had (28px). Anders plakt de koopknop ertegenaan. */
.knc:where(:not(.pdp2)) .klabel.kmaat-solo{margin-bottom:28px}
.knc:where(:not(.pdp2)) .kuse{color:var(--pruim);--maccent:var(--mosterd)}
.knc:where(:not(.pdp2)) .kuse-licht{color:var(--cream);--maccent:var(--mosterd)}
.knc:where(:not(.pdp2)) .revbar{
  position:sticky;top:0;z-index:70;background:#2E0D1E;color:#DCC0CD;font-size:12px;padding:8px 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;gap:12px;align-items:center;justify-content:center;letter-spacing:.04em
}
.knc:where(:not(.pdp2)) .revbar a{color:#F5B84A;text-decoration:underline;padding:4px 2px}
.knc:where(:not(.pdp2)) .divlbl{text-align:center;padding:56px 0 8px}
.knc:where(:not(.pdp2)) .divlbl span{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.knc:where(:not(.pdp2)) .sitehead{background:var(--wit);border-bottom:1px solid rgba(0,0,0,.07);padding:0 24px}
.knc:where(:not(.pdp2)) .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.knc:where(:not(.pdp2)) .brand .wm{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:22px;color:var(--pruim);letter-spacing:-.01em}
.knc:where(:not(.pdp2)) .nav{display:flex;gap:2px}
.knc:where(:not(.pdp2)) .nav a{text-decoration:none;font-size:15px;font-weight:600;color:var(--pruim);padding:11px 13px;border-radius:999px}
.knc:where(:not(.pdp2)) .cart{display:inline-flex;align-items:center;gap:8px;text-decoration:none;padding:10px;border-radius:999px;font-size:14px;font-weight:700;color:var(--pruim)}
.knc:where(:not(.pdp2)) .cart .aantal{font-size:14px;font-weight:700}
@media (hover:hover){.knc:where(:not(.pdp2)) .cart:hover{background:var(--oat)}}
@media (max-width:900px){
  .knc:where(:not(.pdp2)) .nav a{font-size:14px;padding:10px 8px;white-space:nowrap}
}
@media (max-width:740px){ /* 8.24: tot en met 740 px (was 680), anders past het menu niet naast de iconen */
  .knc:where(:not(.pdp2)) .nav{display:none}
}
.knc:where(:not(.pdp2)) .hero{position:relative;overflow:hidden;color:var(--cream);display:flex;flex-direction:column;min-height:clamp(500px,74vh,680px)}
/* B1 + A1: hero is een echt beeld (eager) met de video eroverheen zodra die mag en kan spelen */
.knc:where(:not(.pdp2)) .heroimg{
  position:absolute;inset:0;overflow:hidden;background:var(--pruimd);
  filter:sepia(.2) saturate(1.02) brightness(.85) contrast(1.02)
}
.knc:where(:not(.pdp2)) .heroimg img,.knc:where(:not(.pdp2)) .herovid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.knc:where(:not(.pdp2)) .heroimg img{filter:none}
.knc:where(:not(.pdp2)) .herovid{opacity:0;transition:opacity .6s ease;pointer-events:none;border:0;background:transparent}
.knc:where(:not(.pdp2)) .herovid.speelt{opacity:1}
@media (prefers-reduced-motion:reduce){
  .knc:where(:not(.pdp2)) .herovid{display:none}
}
@media (max-width:700px){
  .knc:where(:not(.pdp2)) .herovid{display:none}
}
.knc:where(:not(.pdp2)) .herovl{position:absolute;inset:0;background:linear-gradient(99deg,rgba(46,13,30,.94) 0%,rgba(58,18,38,.8) 42%,rgba(73,26,50,.42) 78%,rgba(58,18,38,.6) 100%)}
.knc:where(:not(.pdp2)) .rain,.knc:where(:not(.pdp2)) .rain2{position:absolute;inset:-90px 0;pointer-events:none}
.knc:where(:not(.pdp2)) .rain{background:repeating-linear-gradient(103deg,transparent 0 28px,rgba(240,168,50,.045) 28px 29px);animation:kncrain 15s linear infinite}
.knc:where(:not(.pdp2)) .rain2{background:repeating-linear-gradient(99deg,transparent 0 45px,rgba(240,219,199,.04) 45px 46px);animation:kncrain 24s linear infinite}
@keyframes kncrain{to{transform:translateY(92px) translateX(-28px)}}
/* V16 (18-09): de twee regenlagen liepen oneindig door, ook als het systeem om minder
   beweging vraagt (WCAG 2.2.2). Het beeld blijft staan; alleen de beweging stopt. */
@media (prefers-reduced-motion:reduce){
  .knc .rain,.knc .rain2{animation:none}
}
.knc:where(:not(.pdp2)) .hero .wrap{position:relative;z-index:4;width:100%;flex:1;display:flex;align-items:center;padding-top:clamp(64px,9vh,100px);padding-bottom:clamp(56px,8vh,90px)}
.knc:where(:not(.pdp2)) .hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(11,12,14,.55) 0%,rgba(11,12,14,.4) 34%,rgba(11,12,14,.12) 60%,rgba(11,12,14,0) 76%)}
@media (max-width:700px){.knc:where(:not(.pdp2)) .hero::after{background:linear-gradient(180deg,rgba(11,12,14,.34) 0%,rgba(11,12,14,.14) 32%,rgba(11,12,14,.32) 66%,rgba(11,12,14,.5) 100%)}}
.knc:where(:not(.pdp2)) .hero .inner{max-width:620px}
.knc:where(:not(.pdp2)) .hero .lbl{color:#E9B8D0;margin-bottom:16px}
.knc:where(:not(.pdp2)) .hero h1{font-size:clamp(46px,6vw,76px);color:var(--cream);letter-spacing:-.015em}
.knc:where(:not(.pdp2)) .hero p.sub{margin:18px 0 32px;color:#EFD3BC;font-size:clamp(17.5px,1.8vw,21px);max-width:440px}
.knc:where(:not(.pdp2)) .imgtag{position:absolute;z-index:6;left:12px;bottom:12px;font-size:10.5px;color:#F8EEDF;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.35);padding:3px 11px;border-radius:999px;font-weight:700}
.knc:where(:not(.pdp2)) .hero .imgtag{left:auto;right:14px;bottom:74px}
.knc:where(:not(.pdp2)) .uspband{
  position:relative;z-index:5;background:var(--oat);color:var(--pruim);padding:14px 24px;
  display:flex;gap:12px 38px;flex-wrap:wrap;justify-content:center;font-weight:600;font-size:14.5px
}
.knc:where(:not(.pdp2)) .uspband span{display:inline-flex;align-items:center;gap:8px}
.knc:where(:not(.pdp2)) .story{background:var(--cream);text-align:center;position:relative;overflow:hidden}
.knc:where(:not(.pdp2)) .story .story-wm{position:absolute;right:clamp(10px,2vw,40px);top:50%;transform:translateY(-50%);width:clamp(240px,26vw,400px);aspect-ratio:1;opacity:.055;pointer-events:none}
@media (max-width:900px){
  .knc:where(:not(.pdp2)) .story .story-wm{display:none}
}
.knc:where(:not(.pdp2)) .storyin{max-width:640px;margin:0 auto;position:relative}
.knc:where(:not(.pdp2)) .story .wave{display:block;margin:16px auto 0}
.knc:where(:not(.pdp2)) .storyin .lead{margin:36px 0 0;font-size:clamp(17.5px,1.9vw,20px);line-height:1.85;text-align:left}
/* B3 was: donkere tint plus een zachte markering. Teruggedraaid 30-08 (Robbin): de
   markering las als een onderstreping. Het accent staat weer in de accentkleur,
   zoals voor B3. */
.knc:where(:not(.pdp2)) .dropcap{float:left;font-size:3.55em;line-height:.8;padding:7px 14px 0 0;color:var(--pruim);font-weight:800}
/* 30-08 (Robbin): dezelfde maat en hetzelfde ritme als de .lead erboven - de slotzin
   oogde als een ander lettertype doordat hij net groter en compacter stond. */
/* B7 (besluit Robbin 26-09): het vlak om de slotzin is weg; de tekst donker, het accent in --oker (4,86:1 op de paginakleur;
   honing haalde daar 1,47:1). Was sinds D5 (23-09) een donker vlak. */
.knc:where(:not(.pdp2)) .slotzin{margin:32px 0 0;padding:0;font-size:clamp(17.5px,1.9vw,20px);line-height:1.7;color:var(--tekst);background:none;text-align:left;clear:left}
.knc:where(:not(.pdp2)) .slotzin .accent{color:var(--oker);font-weight:700;white-space:nowrap}
.knc:where(:not(.pdp2)) .story em,.knc:where(:not(.pdp2)) .overons em{font-style:normal;color:var(--pruim);font-weight:700}
.knc:where(:not(.pdp2)) .collmock{background:var(--wit)}
.knc:where(:not(.pdp2)) .collmock h2{text-align:center}
.knc:where(:not(.pdp2)) .collsub{text-align:center;color:var(--muted);font-size:16.5px;margin:12px 0 44px}
.knc:where(:not(.pdp2)) .cdot{width:14px;height:14px;border-radius:5px;flex:none;border:1px solid rgba(0,0,0,.12)}
.knc:where(:not(.pdp2)) .collmock .center,.knc:where(:not(.pdp2)) .prodmock .center,.knc:where(:not(.pdp2)) .reviews .center{text-align:center}
.knc:where(:not(.pdp2)) .ph2 img{transition:transform .6s ease}
@media (hover:hover){.knc:where(:not(.pdp2)) .ph2:hover img{transform:scale(1.03)}}
/* basislaag = variant "ruim" (huidig). kaartje = kleur met foto, chip = volgt-kleur. */
.knc:where(:not(.pdp2)) .collwrap{max-width:1080px;margin:0 auto}
.knc:where(:not(.pdp2)) .collkop .lbl,.knc:where(:not(.pdp2)) .cgalerij,.knc:where(:not(.pdp2)) .kstriplbl{display:none}
/* -- ruim: 4-koloms grid (vervangt .collgrid/.ccard/.cmini) -- */
.knc:where(:not(.pdp2)) .collkleuren{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.knc:where(:not(.pdp2)) .collkaarten,.knc:where(:not(.pdp2)) .collchips{display:contents}
.knc:where(:not(.pdp2)) .ckaartje{display:flex;flex-direction:column;text-decoration:none;background:var(--wit);border-radius:16px;overflow:hidden;box-shadow:var(--sh-md);transition:transform .25s,box-shadow .25s,background .2s}
@media (hover:hover){.knc:where(:not(.pdp2)) .ckaartje:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}}
.knc:where(:not(.pdp2)) .k1{grid-column:span 2;grid-row:span 2}
.knc:where(:not(.pdp2)) .cthumb{display:block;position:relative;overflow:hidden;height:190px;background:var(--c,var(--oat))}
.knc:where(:not(.pdp2)) .k1 .cthumb{flex:1;min-height:340px;height:auto}
.knc:where(:not(.pdp2)) .cthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
@media (hover:hover){.knc:where(:not(.pdp2)) .ckaartje:hover .cthumb img{transform:scale(1.03)}}
.knc:where(:not(.pdp2)) .cinfo{display:flex;flex-direction:column;gap:2px;padding:14px 16px 18px}
.knc:where(:not(.pdp2)) .cnaam{display:inline-flex;align-items:center;gap:9px;font-size:16.5px;font-weight:700;color:var(--pruim);line-height:1.3;white-space:nowrap}
.knc:where(:not(.pdp2)) .k1 .cnaam{font-size:19px}
.knc:where(:not(.pdp2)) .cprijs{font-size:14.5px;color:var(--muted);margin-top:2px;font-weight:600}
.knc:where(:not(.pdp2)) .ckaartje .cdot,.knc:where(:not(.pdp2)) .cchip .cdot{background:var(--c)}
/* chip als kleurtegel (= oude .cmini) */
.knc:where(:not(.pdp2)) .cchip{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:8px;text-decoration:none;background:var(--wit);border-radius:14px;overflow:hidden;box-shadow:var(--sh-sm);transition:transform .25s,box-shadow .25s,background .2s}
@media (hover:hover){.knc:where(:not(.pdp2)) .cchip:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}}
.knc:where(:not(.pdp2)) .cchip .cdot{grid-column:1/-1;width:100%;height:96px;border-radius:0;border:0}
.knc:where(:not(.pdp2)) .cchip .cnaam{font-size:13.5px;padding:10px 0 13px 14px}
.knc:where(:not(.pdp2)) .cchip .tag{font-size:10px;padding:1px 8px;margin-right:14px}
@media (max-width:900px){
  .knc:where(:not(.pdp2)) .collkleuren{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:580px){
  .knc:where(:not(.pdp2)) .collkleuren{grid-template-columns:1fr}
  .knc:where(:not(.pdp2)) .k1{grid-column:auto;grid-row:auto}
  .knc:where(:not(.pdp2)) .k1 .cthumb{min-height:220px}
}
/* -- sfeerfoto's (galerij + magazine) -- */
.knc:where(:not(.pdp2)) .cfoto{position:relative;overflow:hidden;border-radius:16px;box-shadow:var(--sh-md);margin:0;background:var(--oat);aspect-ratio:var(--beeld-collectie-hoofd)}
.knc:where(:not(.pdp2)) .cfoto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
@media (hover:hover){.knc:where(:not(.pdp2)) .cfoto:hover img{transform:scale(1.03)}}
.knc:where(:not(.pdp2)) .cfoto .imgtag{left:auto;right:12px;bottom:auto;top:12px}
.knc:where(:not(.pdp2)) .cfoto figcaption{position:absolute;left:12px;bottom:12px;z-index:5;font-size:12px;font-weight:700;color:#F8EEDF;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.28);padding:3px 12px;border-radius:999px}
/* r23: de crop zit nu in het bestand (beeldpijplijn), dus geen percentagetrucs meer */
.knc:where(:not(.pdp2)) .kstriplbl{text-align:center;margin:36px 0 14px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--oker);font-weight:700}
/* -- gedeeld door de 3 nieuwe varianten -- */
.knc:where(:not(.pdp2))[data-collectie="galerij"] .collmock{background:var(--wit)}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .collmock{background:var(--wit)}
.knc:where(:not(.pdp2))[data-collectie="galerij"] .cpre,.knc:where(:not(.pdp2))[data-collectie="magazine"] .cpre{display:none}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .cthumb .imgtag{display:none}
/* tag zou 58-86px thumbs overwoekeren */
.knc:where(:not(.pdp2))[data-collectie="galerij"] .k1,.knc:where(:not(.pdp2))[data-collectie="magazine"] .k1{grid-column:auto;grid-row:auto}
/* ===== variant: galerij (3 sfeerfoto's + kleurenstrip van dezelfde kaartjes/chips) ===== */
.knc:where(:not(.pdp2))[data-collectie="galerij"] .cgalerij{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.knc:where(:not(.pdp2)) .cgalerij .beeldnoot{grid-column:1/-1;margin:0}
@media (min-width:901px){
  .knc:where(:not(.pdp2))[data-collectie="galerij"] .cf2{margin-top:26px}
}
/* zachte stagger */
.knc:where(:not(.pdp2))[data-collectie="galerij"] .kstriplbl{display:block}
.knc:where(:not(.pdp2))[data-collectie="galerij"] .collkleuren{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.knc:where(:not(.pdp2))[data-collectie="galerij"] .ckaartje{flex-direction:row;align-items:center;gap:9px;border-radius:999px;padding:7px 15px 7px 8px;overflow:visible;box-shadow:var(--sh-sm)}
@media (hover:hover){.knc:where(:not(.pdp2))[data-collectie="galerij"] .ckaartje:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}}
.knc:where(:not(.pdp2))[data-collectie="galerij"] .cthumb{display:none}
.knc:where(:not(.pdp2))[data-collectie="galerij"] .cinfo{display:contents}
.knc:where(:not(.pdp2))[data-collectie="galerij"] .cnaam,.knc:where(:not(.pdp2))[data-collectie="galerij"] .k1 .cnaam{font-size:14px}
.knc:where(:not(.pdp2))[data-collectie="galerij"] .ckaartje .cdot{width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,0,0,.14)}
.knc:where(:not(.pdp2))[data-collectie="galerij"] .cprijs{font-size:13px;margin-top:0}
.knc:where(:not(.pdp2))[data-collectie="galerij"] .cchip{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:6px 14px 6px 8px;overflow:visible;box-shadow:var(--sh-sm);color:var(--muted)}
@media (hover:hover){.knc:where(:not(.pdp2))[data-collectie="galerij"] .cchip:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}}
.knc:where(:not(.pdp2))[data-collectie="galerij"] .cchip .cdot{grid-column:auto;width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.14)}
.knc:where(:not(.pdp2))[data-collectie="galerij"] .cchip .cnaam{font-size:14px;font-weight:600;color:var(--muted);padding:0}
.knc:where(:not(.pdp2))[data-collectie="galerij"] .cchip .tag{margin:0}
@media (max-width:900px){
  .knc:where(:not(.pdp2))[data-collectie="galerij"] .cgalerij{gap:12px}
}
@media (max-width:580px){
  .knc:where(:not(.pdp2))[data-collectie="galerij"] .cgalerij{grid-template-columns:1fr 1fr}
  .knc:where(:not(.pdp2))[data-collectie="galerij"] .cf1{grid-column:1/-1;aspect-ratio:16/10}
  .knc:where(:not(.pdp2))[data-collectie="galerij"] .cf2,.knc:where(:not(.pdp2))[data-collectie="galerij"] .cf3{aspect-ratio:1/1}
  .knc:where(:not(.pdp2))[data-collectie="galerij"] .cfoto figcaption{font-size:11px}
  .knc:where(:not(.pdp2))[data-collectie="galerij"] .collkleuren{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:0 -24px;padding:4px 24px 12px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none}
  .knc:where(:not(.pdp2))[data-collectie="galerij"] .collkleuren::-webkit-scrollbar{display:none}
  .knc:where(:not(.pdp2))[data-collectie="galerij"] .ckaartje,.knc:where(:not(.pdp2))[data-collectie="galerij"] .cchip{flex:none;scroll-snap-align:start}
}
/* ===== variant: magazine (r24: kleurenlijst links, sfeerfoto rechts - de sectie eronder begint met een foto links) ===== */
.knc:where(:not(.pdp2))[data-collectie="magazine"] .collwrap{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,10fr);grid-template-rows:auto auto 1fr;grid-template-areas:"kop foto" "kleuren foto" "cta foto";column-gap:clamp(32px,5.5vw,72px);align-items:start}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .collkop{grid-area:kop}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .collkop .lbl{display:block;margin-bottom:8px}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .collmock h2{text-align:left;font-size:clamp(28px,3vw,38px)}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .collmock .collsub{text-align:left;margin:10px 0 26px}
/* N1 (blok C stap 5): geen reuzenfoto meer maar een collage. Sinds 30-08 (verzoek
   Robbin) gespiegeld: het grote beeld links, de twee kleine beelden rechts gestapeld -
   dezelfde volgorde die de collage op tablet al had. Het grote beeld wisselt met de
   kleurkeuze mee. De collage is duidelijk lager dan de kleurenlijst ernaast en staat
   er verticaal midden naast, zodat beeld en lijst in verhouding blijven. */
.knc:where(:not(.pdp2))[data-collectie="magazine"] .cgalerij{
  display:grid;grid-area:foto;align-self:center;min-height:0;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:auto auto;gap:14px
}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .cf1{display:block;grid-column:2;grid-row:1}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .cf2{display:block;grid-column:2;grid-row:2}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .cf3{grid-column:1;grid-row:1/span 2;height:100%;aspect-ratio:auto}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .cf3 img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;margin:0;object-fit:cover}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .cfoto figcaption{display:none}
/* "Van dichtbij" klopt niet bij de volledige foto; op de kleine beelden zou een bijschrift
   het beeld overwoekeren. Het label "tijdelijk beeld" blijft op het grote beeld staan en
   gaat van de kleine af, om dezelfde reden als bij de kleurthumbs hierboven. */
.knc:where(:not(.pdp2))[data-collectie="magazine"] .ckleinbeeld .imgtag{display:none}
@media (hover:hover){.knc:where(:not(.pdp2))[data-collectie="magazine"] .cf3:hover img{transform:none}}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .collkleuren{display:block;grid-area:kleuren}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .collkaarten,.knc:where(:not(.pdp2))[data-collectie="magazine"] .collchips{display:block}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .collkaarten{border-top:1px solid rgba(0,0,0,.1)}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .ckaartje,.knc:where(:not(.pdp2))[data-collectie="magazine"] .cchip{display:flex;flex-direction:row;align-items:center;gap:16px;background:none;border-radius:10px;padding:10px 8px;border-bottom:1px solid rgba(0,0,0,.1);box-shadow:none;overflow:visible}
@media (hover:hover){.knc:where(:not(.pdp2))[data-collectie="magazine"] .ckaartje:hover,.knc:where(:not(.pdp2))[data-collectie="magazine"] .cchip:hover{transform:none;box-shadow:none;background:var(--wit)}}
@media (hover:hover){.knc:where(:not(.pdp2))[data-collectie="magazine"] .ckaartje:hover .cthumb img{transform:none}}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .cthumb,.knc:where(:not(.pdp2))[data-collectie="magazine"] .k1 .cthumb{width:58px;height:58px;min-height:0;flex:none;border-radius:12px}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .cinfo{flex:1;flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px;padding:0}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .cnaam,.knc:where(:not(.pdp2))[data-collectie="magazine"] .k1 .cnaam{font-size:16.5px}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .ckaartje .cdot{display:none}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .cprijs{font-size:15px;font-weight:700;color:var(--pruim);margin-top:0}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .cchip .cnaam{font-size:16.5px;font-weight:600;color:var(--tekst);padding:0}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .cchip .cdot{grid-column:auto;width:58px;height:30px;border-radius:9px;border:1px solid rgba(0,0,0,.08);flex:none}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .cchip .tag{margin:0 0 0 auto;font-size:10.5px}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .collwrap .collcta{grid-area:cta;text-align:left}
/* extra .collwrap wint van .collmock .center */
.knc:where(:not(.pdp2))[data-collectie="magazine"] .collcta .pathlink{margin-top:10px}
@media (min-width:901px){
  /* r22: cta groter en op de onderlijn van de foto */
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .collwrap .collcta{display:flex;align-items:flex-end;justify-content:center;min-height:150px;padding-bottom:2px}
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .collcta .pathlink{margin-top:0;font-size:17px}
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .collwrap{grid-template-columns:minmax(0,11fr) minmax(0,12fr)}
}
/* B5 (r23): op breed loopt het collectiebeeld tot de schermrand, net als de productfoto - r24: nu de rechterrand */
@media (min-width:1128px){
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .collmock{padding-left:0;padding-right:0}
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .collwrap{max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,46vw);column-gap:clamp(34px,4vw,60px)}
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .cgalerij{min-height:0;align-self:center}
  /* 30-08, na het spiegelen: niet het grote beeld maar de twee kleine raken nu de
     schermrand; de vlakke rechterhoeken verhuizen mee. */
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .cf1,
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .cf2{border-radius:18px 0 0 18px}
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .cf3{border-radius:16px}
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .collkop,.knc:where(:not(.pdp2))[data-collectie="magazine"] .collkleuren,.knc:where(:not(.pdp2))[data-collectie="magazine"] .collwrap .collcta{width:100%;max-width:494px;margin-left:auto;margin-right:auto;padding-left:24px}
  /* 30-08 (Robbin): de hele linkerkolom iets uit het midden, richting de
     foto's - kop, kleurenlijst en cta samen, zodat de linkerlijn een blijft. */
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .collkop,
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .collkleuren,
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .collwrap .collcta{margin-right:48px}
}
@media (min-width:1500px){
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .collwrap{grid-template-columns:minmax(0,1fr) minmax(0,48vw)}
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .collkop,.knc:where(:not(.pdp2))[data-collectie="magazine"] .collkleuren,.knc:where(:not(.pdp2))[data-collectie="magazine"] .collwrap .collcta{max-width:564px}
}
@media (max-width:900px){
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .collwrap{display:block}
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .collmock h2,.knc:where(:not(.pdp2))[data-collectie="magazine"] .collmock .collsub,.knc:where(:not(.pdp2))[data-collectie="magazine"] .collkop .lbl{text-align:center}
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .collmock .collsub{margin-bottom:20px}
  /* N1 op tablet: de collage houdt zijn vorm (groot links, twee klein rechts) maar
     staat nu over de volle breedte. Stapelen zou hem hier twee keer zo hoog maken. */
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .cgalerij{min-height:0;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px;margin:4px 0 24px}
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .cf3{grid-column:1;grid-row:1/span 2;aspect-ratio:auto;height:100%;margin:0}
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .cf1{grid-column:2;grid-row:1}
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .cf2{grid-column:2;grid-row:2}
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .collwrap .collcta{text-align:center}
}
@media (max-width:580px){
  /* N1 op telefoon: nu wel stapelen, anders wordt het grote beeld te smal */
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .cgalerij{grid-template-columns:1fr 1fr;gap:12px}
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .cf3{grid-column:1/-1;grid-row:1;aspect-ratio:16/10;height:auto}
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .cf1{grid-column:1;grid-row:2}
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .cf2{grid-column:2;grid-row:2}
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .cthumb,.knc:where(:not(.pdp2))[data-collectie="magazine"] .k1 .cthumb{width:46px;height:46px;border-radius:10px}
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .cchip .cdot{width:46px;height:26px}
  .knc:where(:not(.pdp2))[data-collectie="magazine"] .cnaam,.knc:where(:not(.pdp2))[data-collectie="magazine"] .k1 .cnaam,.knc:where(:not(.pdp2))[data-collectie="magazine"] .cchip .cnaam{font-size:15px}
}
/* -- kiezertegels collectie-layout -- */
.knc:where(:not(.pdp2)) .collkeuze{display:flex;gap:14px;flex-wrap:wrap}
.knc:where(:not(.pdp2)) .colltegel{cursor:pointer;background:var(--wit);border-radius:12px;padding:12px;box-shadow:var(--sh-sm);text-align:center;width:148px}
.knc:where(:not(.pdp2)) .colltegel small{display:block;margin-top:8px;font-size:12px;font-weight:700;color:var(--muted)}
.knc:where(:not(.pdp2)) .cts{height:66px;border-radius:8px;background:var(--oat);padding:7px;display:grid;gap:3px}
.knc:where(:not(.pdp2)) .cts i,.knc:where(:not(.pdp2)) .cts b{display:block;border-radius:2px;min-width:0;min-height:0}
.knc:where(:not(.pdp2)) .cts .f{background:var(--beige)}
.knc:where(:not(.pdp2)) .cts b{border:1px solid rgba(0,0,0,.1)}
.knc:where(:not(.pdp2)) .cts-ruim{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr}
.knc:where(:not(.pdp2)) .cts-ruim .g2{grid-column:span 2;grid-row:span 2}
.knc:where(:not(.pdp2)) .cts-ruim .g2b{grid-column:span 2}
.knc:where(:not(.pdp2)) .cts-galerij{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 9px}
.knc:where(:not(.pdp2)) .cts-galerij .laag{margin-top:5px}
.knc:where(:not(.pdp2)) .cts-galerij .rij{grid-column:1/-1}
.knc:where(:not(.pdp2)) .cts .rij{display:flex;gap:2px;justify-content:center;align-items:center;min-width:0}
.knc:where(:not(.pdp2)) .cts .rij b{width:6px;height:6px;border-radius:50%;flex:none}
.knc:where(:not(.pdp2)) .cts-compact{grid-template-columns:3fr 2fr;align-items:center}
.knc:where(:not(.pdp2)) .cts .kol{display:flex;gap:3px;min-width:0}
.knc:where(:not(.pdp2)) .cts-compact .kol i{flex:1;height:26px}
.knc:where(:not(.pdp2)) .cts-compact .rij{display:grid;grid-template-columns:1fr 1fr;gap:3px;justify-items:center}
.knc:where(:not(.pdp2)) .cts-compact .rij b{width:7px;height:7px;border-radius:50%}
.knc:where(:not(.pdp2)) .cts-magazine{grid-template-columns:1fr 1.25fr;align-items:stretch}
.knc:where(:not(.pdp2)) .cts-magazine .f{height:100%}
.knc:where(:not(.pdp2)) .cts-magazine .lijst{flex-direction:column;justify-content:center;gap:5px}
.knc:where(:not(.pdp2)) .cts .ln{height:4px;border-radius:2px;background:var(--pruim);opacity:.35}
.knc:where(:not(.pdp2)) .cts .l1{height:6px;opacity:.55}
.knc:where(:not(.pdp2)) .prodmock{background:var(--cream);position:relative}
.knc:where(:not(.pdp2)) .pminfo{background:var(--wit);border-radius:16px;box-shadow:var(--sh-md);padding:clamp(24px,3vw,38px)}
.knc:where(:not(.pdp2)) .pmgrid{display:flex;gap:clamp(36px,5vw,64px);align-items:center;justify-content:center;flex-wrap:wrap;max-width:1080px;margin:0 auto}
.knc:where(:not(.pdp2)) .ph2{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--sh-lg)}
.knc:where(:not(.pdp2)) .ph2 img{width:100%;height:100%;object-fit:cover;display:block}
.knc:where(:not(.pdp2)) .pmimg{flex:1;min-width:300px;max-width:450px;aspect-ratio:1}
.knc:where(:not(.pdp2)) .ph2 img{width:100%;height:100%;object-fit:cover;display:block}
.knc:where(:not(.pdp2)) .pminfo{flex:1;min-width:300px;max-width:470px}
.knc:where(:not(.pdp2)) .pminfo h2{margin:8px 0 12px}
.knc:where(:not(.pdp2)) .pmfeel{color:var(--muted);font-size:16.5px;margin:0 0 18px}
.knc:where(:not(.pdp2)) .pmprice{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.knc:where(:not(.pdp2)) .pmprice b{font-family:'Baloo 2',sans-serif;font-size:clamp(23px,2vw,27px);font-weight:700;color:var(--pruim)}
.knc:where(:not(.pdp2)) .dots{display:flex;gap:12px;margin:0 0 22px;flex-wrap:wrap}
.knc:where(:not(.pdp2)) .dot{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;cursor:pointer;padding:0;position:relative}
/* r21: koopkaart evenwichtig - opties en knoppen vullen de kaartbreedte, iets strakker ritme */
.knc:where(:not(.pdp2)) .pminfo .pmfeel{margin-bottom:14px}
.knc:where(:not(.pdp2)) .pminfo .pmprice{margin-bottom:14px}
.knc:where(:not(.pdp2)) .pminfo .dots{justify-content:flex-start;margin-bottom:20px}
@media (max-width:680px){
  .knc:where(:not(.pdp2)) .pminfo .dots{justify-content:flex-start}
}
/* gewrapte rij niet uit elkaar trekken */
.knc:where(:not(.pdp2)) .pminfo .sizechips{margin-bottom:24px}
.knc:where(:not(.pdp2)) .pminfo .sizechips .schip{flex:1;min-width:130px}
.knc:where(:not(.pdp2)) .pminfo .btn-mand{display:flex;width:100%}
.knc:where(:not(.pdp2)) .pminfo .btn-ontdek{display:flex;width:100%;justify-content:center}
.knc:where(:not(.pdp2)) .pminfo .persoregel{text-align:center}
/* B9 + F3: vertrouwensregels onder elkaar, met het retourpad als link */
.knc:where(:not(.pdp2)) .trustlijst{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid rgba(0,0,0,.09);display:grid;gap:10px}
.knc:where(:not(.pdp2)) .trustlijst li{
  display:grid;grid-template-columns:20px 1fr;align-items:start;column-gap:11px;
  font-size:14.5px;line-height:1.45;color:var(--muted);font-weight:600
}
.knc:where(:not(.pdp2)) .trustlijst svg{margin-top:1px;color:var(--pruim);opacity:.75}
.knc:where(:not(.pdp2)) .trustlijst a{font-weight:700;color:var(--pruim);text-decoration:underline;text-underline-offset:2px}
@media (hover:hover){.knc:where(:not(.pdp2)) .trustlijst a:hover{color:var(--pruimd)}}
/* ===== kleurstaal-stijlen (kiezer 5): dekentje (dk-rijen svg) / garenknopje ===== */
.knc:where(:not(.pdp2)) .dot i .dksvg{display:none}
.knc:where(:not(.pdp2))[data-staal="dekentje"] .dot i{width:32px;height:32px;border-radius:8px;background-color:transparent!important;background-image:none;box-shadow:none}
.knc:where(:not(.pdp2))[data-staal="dekentje"] .bkleur .dot i{width:20px;height:20px}
@media (hover:hover){.knc:where(:not(.pdp2))[data-staal="dekentje"] .dot:hover i{transform:translateY(-1.5px)}}
.knc:where(:not(.pdp2))[data-staal="dekentje"] .dot i{transition:transform .16s ease}
.knc:where(:not(.pdp2))[data-staal="garenknopje"] .dot{position:relative}
.knc:where(:not(.pdp2))[data-staal="garenknopje"] .dot i{
  width:27px;height:27px;display:block;position:relative;border-radius:50%;
  background-image:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.12),rgba(255,255,255,0) 62%),
    repeating-linear-gradient(112deg,rgba(255,255,255,.09) 0 3px,rgba(255,255,255,0) 3px 6px,rgba(46,13,30,.07) 6px 9px,rgba(46,13,30,0) 9px 12px);
  box-shadow:inset 0 0 0 1px rgba(73,26,50,.13),inset 0 -2px 3px rgba(46,13,30,.10),0 1px 2px rgba(46,13,30,.14);
  transition:transform .16s ease
}
.knc:where(:not(.pdp2))[data-staal="garenknopje"] .dot i::after,.knc:where(:not(.pdp2))[data-staal="garenknopje"] .dot i::before{content:none}
@media (hover:hover){.knc:where(:not(.pdp2))[data-staal="garenknopje"] .dot:hover i{transform:scale(1.08) rotate(-4deg)}}
/* selectie: steekjesring om het knopje,
draait rustig op zijn plek */
.knc:where(:not(.pdp2))[data-staal="garenknopje"] .dot::before{
  content:"";position:absolute;left:3px;right:3px;top:3px;bottom:3px;width:auto;height:auto;
  border-radius:50%;border:2px dotted var(--draad,var(--mosterdd,#D68F1B));
  background-image:none;background-color:transparent;opacity:0;transform:scale(.65);
  transition:opacity .16s ease,transform .2s ease;pointer-events:none
}
.knc:where(:not(.pdp2))[data-staal="garenknopje"] .dot.on i{transform:scale(1.04)}
.knc:where(:not(.pdp2))[data-staal="garenknopje"] .dot.on::before{width:auto;height:auto;opacity:1;transform:scale(1) rotate(20deg)}
/* bundelkaart - 19px */
.knc:where(:not(.pdp2))[data-staal="garenknopje"] .bkleur .dot i{
  width:19px;height:19px;border-radius:50%;
  background-image:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.12),rgba(255,255,255,0) 62%),
    repeating-linear-gradient(112deg,rgba(255,255,255,.09) 0 2.3px,rgba(255,255,255,0) 2.3px 4.5px,rgba(46,13,30,.07) 4.5px 6.8px,rgba(46,13,30,0) 6.8px 9px)
}
.knc:where(:not(.pdp2))[data-staal="garenknopje"] .bkleur .dot::before{left:1px;right:1px;top:1px;bottom:1px;border-width:1.8px}
/* (Hier stond een niet-gesloten comment uit de mockupbron met een
   vervallen mini-ring-regel erin; opgeruimd bij de consolidatie.) */
/* alleen voor stalen DIRECT op een donker vlak (NIET nodig op de witte
   bundelkaarten) */
.knc:where(:not(.pdp2))[data-staal="garenknopje"] .op-donker .dot{--draad:#F0DBC7}
.knc:where(:not(.pdp2))[data-staal="garenknopje"] .op-donker .dot i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 -2px 3px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.30)}
.knc:where(:not(.pdp2)) .sizechips{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 28px}
.knc:where(:not(.pdp2)) .schip{border:1.5px solid var(--pruim);background:transparent;color:var(--pruim);padding:11px 18px;font-size:14.5px;font-weight:700;cursor:pointer;border-radius:999px;font-family:inherit}
.knc:where(:not(.pdp2)) .schip.on{background:var(--pruim);color:var(--cream)}
@media (min-width:1128px){
  .knc:where(:not(.pdp2)) .prodmock{padding-left:0}
  .knc:where(:not(.pdp2)) .pmgrid{max-width:none;gap:0;justify-content:flex-start}
  .knc:where(:not(.pdp2)) .pmimg{flex:0 0 46vw;max-width:46vw;aspect-ratio:auto;height:540px;border-radius:0 16px 16px 0}
  .knc:where(:not(.pdp2)) .pminfo{margin-left:auto;margin-right:auto;max-width:470px}
}
@media (min-width:1500px){
  /* r22: op heel breed groeien foto en kaart mee, minder restwit */
  .knc:where(:not(.pdp2)) .pmimg{flex:0 0 48vw;max-width:48vw}
  .knc:where(:not(.pdp2)) .pminfo{max-width:540px}
}
.knc:where(:not(.pdp2)) .bundles{position:relative;overflow:hidden;text-align:center}
.knc:where(:not(.pdp2)) .bundles::before{content:"";position:absolute;inset:0 0 auto 0;height:110%;background:url(/wp-content/uploads/sfeer-2026-09b/sfeer-kerst-groep-hero-960.jpg) 50% calc(50% / 1.1)/cover no-repeat;clip-path:inset(0 0 calc(100% / 11) 0);filter:sepia(.3) saturate(.85) brightness(.5)}
.knc:where(:not(.pdp2)) .bundles::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,13,30,.68),rgba(46,13,30,.84))}
.knc:where(:not(.pdp2)) .bundles>*{position:relative;z-index:3}
.knc:where(:not(.pdp2)) .bundles>.imgtag{position:absolute}
.knc:where(:not(.pdp2)) .bundles h2{color:var(--cream)}
.knc:where(:not(.pdp2)) .bundles .collsub{color:#EBC8AC}
.knc:where(:not(.pdp2)) .bthumbs{display:flex;margin:0 0 14px}
.knc:where(:not(.pdp2)) .bth{width:46px;height:46px;border-radius:50%;overflow:hidden;border:2.5px solid var(--wit);box-shadow:var(--sh-sm);display:inline-block;flex:none}
.knc:where(:not(.pdp2)) .bth+.bth{margin-left:-13px}
.knc:where(:not(.pdp2)) .bth img{width:100%;height:100%;max-width:none;display:block;object-fit:cover}
.knc:where(:not(.pdp2)) .bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1080px;margin:0 auto;text-align:left}
@media (max-width:900px){
  .knc:where(:not(.pdp2)) .bgrid{grid-template-columns:1fr}
}
.knc:where(:not(.pdp2)) .bcard{background:var(--wit);border-radius:16px;padding:28px 26px;box-shadow:var(--sh-md);position:relative;transition:transform .25s,box-shadow .25s;cursor:pointer;display:flex;flex-direction:column}
@media (hover:hover){.knc:where(:not(.pdp2)) .bcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}}
.knc:where(:not(.pdp2)) .bcard.hl{outline:2px solid var(--mosterd)}
.knc:where(:not(.pdp2)) .bcard.actief{outline:2.5px solid var(--mosterd);transform:translateY(-4px);box-shadow:var(--sh-lg)}
.knc:where(:not(.pdp2)) .bkleuren{margin-top:14px;padding-top:14px;border-top:1px solid rgba(0,0,0,.08)}
/* B10 + R24-4: label op de eerste regel, daaronder de stalen met de gekozen kleurnaam er direct achter */
.knc:where(:not(.pdp2)) .bkleur{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:9px;align-items:center}
.knc:where(:not(.pdp2)) .bkleur+.bkleur{margin-top:12px}
.knc:where(:not(.pdp2)) .bkleur .bklabel{grid-column:1/-1;grid-row:1;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pruim);opacity:.75}
.knc:where(:not(.pdp2)) .bkleur .dots{grid-column:1;grid-row:2;margin:5px 0 0;gap:2px;flex-wrap:nowrap}
.knc:where(:not(.pdp2)) .bkleur .bknaam{grid-column:2;grid-row:2;margin-top:5px;font-size:13.5px;font-weight:700;color:var(--pruim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.knc:where(:not(.pdp2)) .bkleur .dot{width:23px;height:23px}
/* V3a (18-09): de stip blijft 23 px; het TIKDOEL groeit naar 25 x 44 via een pseudo-element.
   Niet 44 breed: de stippen staan 25 px hart-op-hart, dus 44 zou de buurstip overlappen.
   25 x 44 haalt WCAG 2.5.8 (24 x 24) en raakt de buur niet. */
.knc:where(:not(.pdp2)) .bkleur .dot::after{content:"";position:absolute;left:50%;top:50%;width:25px;height:44px;transform:translate(-50%,-50%)}
.knc:where(:not(.pdp2)) .bmaat{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0 0 30px}
.knc:where(:not(.pdp2)) .bmaat .klabel{font-size:13px}
.knc:where(:not(.pdp2)) .bmaat .klabel b{font-size:16px}
.knc:where(:not(.pdp2)) .bmaat .sizechips{margin:0;justify-content:center}
.knc:where(:not(.pdp2)) .bundles .schip{border-color:var(--cream);color:var(--cream)}
.knc:where(:not(.pdp2)) .bundles .schip.on{background:var(--cream);color:var(--pruim)}
.knc:where(:not(.pdp2)) .bslider{max-width:560px;margin:clamp(64px,9vw,96px) auto 0;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:16px;padding:24px 28px}
.knc:where(:not(.pdp2)) .bslider .bs-kop{font-size:16px;font-weight:700;color:var(--cream);margin-bottom:14px}
.knc:where(:not(.pdp2)) .bslider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;--bs-pct:37.5%}
.knc:where(:not(.pdp2)) .bslider input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--cream) 0 var(--bs-pct),rgba(255,255,255,.25) var(--bs-pct) 100%)}
.knc:where(:not(.pdp2)) .bslider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--cream);border:3px solid rgba(0,0,0,.35);margin-top:-7px;box-shadow:0 1px 5px rgba(0,0,0,.4)}
.knc:where(:not(.pdp2)) .bslider input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:rgba(255,255,255,.25)}
.knc:where(:not(.pdp2)) .bslider input[type=range]::-moz-range-progress{height:8px;border-radius:999px;background:var(--cream)}
.knc:where(:not(.pdp2)) .bslider input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--cream);border:3px solid rgba(0,0,0,.35);box-shadow:0 1px 5px rgba(0,0,0,.4)}
.knc:where(:not(.pdp2)) .bslider .bs-uit{margin-top:10px;font-size:17px;color:var(--cream)}
.knc:where(:not(.pdp2)) .bslider .bs-uit b{color:var(--cream)}
.knc:where(:not(.pdp2)) .bslider .bs-uit b.bs-hl{background:var(--cream);color:var(--pruim);border-radius:8px;padding:1px 9px}
.knc:where(:not(.pdp2)) .bslider .bs-oud{opacity:.65;font-size:14.5px;text-decoration:line-through}
.knc:where(:not(.pdp2)) .bslider .pathlink{color:var(--cream);border-bottom-color:rgba(255,255,255,.45);margin-top:16px;font-size:14.5px}
.knc:where(:not(.pdp2)) .bbtn{margin-top:auto;padding-top:18px}
.knc:where(:not(.pdp2)) .bbtn .btn{display:block;width:100%;text-align:center;padding:13px 0;font-size:15px}
/* Stap 5e (F2): uitgeschakelde knop. Geen attribuut disabled maar aria-disabled plus deze
   klasse, zodat de knop bereikbaar blijft met de tab-toets en leesbaar voor een schermlezer.
   Kleur uit de tokens, dus hij werkt in beide paletten. */
.knc:where(:not(.pdp2)) .btn.uit{background:var(--beige);color:var(--muted);box-shadow:none;cursor:not-allowed}
@media (hover:hover){.knc:where(:not(.pdp2)) .btn.uit:hover{background:var(--beige);color:var(--muted);transform:none;box-shadow:none}}
.knc:where(:not(.pdp2)) .bmelding{margin:10px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.knc:where(:not(.pdp2)) .bmelding:empty{display:none}
.knc:where(:not(.pdp2)) .bkleur.mist{outline:2px solid var(--mosterd);outline-offset:5px;border-radius:8px;scroll-margin-top:96px}
/* B12: kortingsbadges duidelijk groter en leesbaarder */
.knc:where(:not(.pdp2)) .hlbadge{
  position:absolute;top:-17px;right:20px;background:var(--mosterd);color:var(--btntxt);font-weight:700;
  font-size:16px;line-height:1;letter-spacing:.01em;padding:10px 18px;border-radius:999px;box-shadow:var(--sh-md)
}
.knc:where(:not(.pdp2)) .hlbadge.soft{background:var(--oat);color:var(--pruim);box-shadow:var(--sh-sm);border:1px solid rgba(0,0,0,.07)}
@media (max-width:900px){
  .knc:where(:not(.pdp2)) .hlbadge{font-size:15px;padding:9px 16px;top:-15px}
}
.knc:where(:not(.pdp2)) .bcard h3{font-size:23px;margin:8px 0 4px}
.knc:where(:not(.pdp2)) .bprice{font-family:'Baloo 2',sans-serif;font-size:26px;font-weight:700;color:var(--pruim);margin:2px 0 6px}
.knc:where(:not(.pdp2)) .bsave{margin:0;font-size:14.5px;color:var(--muted)}
.knc:where(:not(.pdp2)) .bship{margin:6px 0 0;font-size:13.5px;font-weight:700;color:var(--pruim)}
.knc:where(:not(.pdp2)) .reviews{background:var(--wit);text-align:center}
.knc:where(:not(.pdp2)) .revnote{margin:12px 0 0}
.knc:where(:not(.pdp2)) .revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1080px;margin:30px auto 0;text-align:left;align-items:start}
@media (max-width:900px){
  .knc:where(:not(.pdp2)) .revgrid{grid-template-columns:1fr}
}
@media (min-width:901px){
  .knc:where(:not(.pdp2)) .revgrid .rcard:nth-child(2){transform:translateY(14px)}
}
.knc:where(:not(.pdp2)) .rcard{background:var(--cream);border-radius:16px;padding:26px 26px 22px;box-shadow:var(--sh-sm)}
.knc:where(:not(.pdp2)) .rstars{color:var(--mosterdd);letter-spacing:4px;font-size:16px;margin-bottom:12px}
.knc:where(:not(.pdp2)) .rstars .roff{opacity:.3}
.knc:where(:not(.pdp2)) .rcard p{margin:0 0 16px;font-size:15.5px;color:var(--tekst)}
.knc:where(:not(.pdp2)) .rwho{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--pruim)}
.knc:where(:not(.pdp2)) .rwho .ava{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:17px;font-weight:700;color:var(--pruim);flex:none}
/* ===== N2 (blok C stap 5): bewijssectie opnieuw. De twee banden van elk twee punten
   zijn vervangen door EEN doorlopende ladder van vier feiten met een beeldkolom ernaast.
   Het grote beeld rekt mee met de ladder (flex:1), dus er kan links nooit een gat vallen
   naast een korte tekst - dat was precies wat er awkward aan de oude opzet was.
   Ritme: vier gelijke stappen, gescheiden door een haarlijn, met het goudnummer in een
   vaste goot zodat alle koppen op dezelfde lijn beginnen. Bewust anders dan de zigzag
   op de productpagina: daar wisselt het beeld per punt van kant, hier staat het stil. ===== */
.knc:where(:not(.pdp2)) .proof{background:var(--cream)}
.knc:where(:not(.pdp2)) .proofkop{max-width:620px;margin:0 auto clamp(40px,5.2vw,66px);text-align:center;padding:0 24px}
.knc:where(:not(.pdp2)) .proofkop h2{margin:10px 0 0}
.knc:where(:not(.pdp2)) .proofsub{color:var(--muted);font-size:16.5px;margin:14px 0 0}
.knc:where(:not(.pdp2)) .proofrij{
  max-width:1080px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,36fr) minmax(0,64fr);
  column-gap:clamp(32px,4.6vw,64px);align-items:stretch
}
.knc:where(:not(.pdp2)) .pbcollage{display:flex;flex-direction:column;gap:16px;min-height:0}
.knc:where(:not(.pdp2)) .pbfoto{
  position:relative;margin:0;overflow:hidden;border-radius:18px;box-shadow:var(--sh-lg);
  background:var(--oat);aspect-ratio:var(--beeld-bewijskaart)
}
.knc:where(:not(.pdp2)) .pbgroot{flex:1;aspect-ratio:auto;min-height:280px}
.knc:where(:not(.pdp2)) .pbklein{flex:none;aspect-ratio:var(--beeld-hero)}
.knc:where(:not(.pdp2)) .pbfoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.knc:where(:not(.pdp2)) .pbfoto .imgtag{left:auto;right:12px;top:12px;bottom:auto}
.knc:where(:not(.pdp2)) .pbladder{display:flex;flex-direction:column;justify-content:center}
.knc:where(:not(.pdp2)) .pfeit{
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(16px,1.8vw,26px);
  align-items:start;padding:clamp(20px,2.3vw,28px) 0;max-width:none
}
.knc:where(:not(.pdp2)) .pfeit+.pfeit{border-top:1px solid var(--kn-lijn)}
.knc:where(:not(.pdp2)) .pfeit:first-child{padding-top:0}
.knc:where(:not(.pdp2)) .pfeit:last-child{padding-bottom:0}
.knc:where(:not(.pdp2)) .pnum{
  display:block;font-family:'Young Serif',Georgia,serif;font-size:clamp(28px,2.5vw,36px);line-height:1;
  color:#9C7122;margin:2px 0 0;letter-spacing:.01em;min-width:52px
}
.knc:where(:not(.pdp2)) .pfeit h3{font-size:clamp(21px,2.1vw,26px);line-height:1.2;color:var(--pruim);margin:0}
.knc:where(:not(.pdp2)) .pfeit p{margin:10px 0 0;color:var(--muted);font-size:clamp(16px,1.2vw,17.5px);line-height:1.78}
@media (max-width:900px){
  /* op smal komt de beeldkolom als een paar boven de ladder te staan */
  .knc:where(:not(.pdp2)) .proofrij{grid-template-columns:minmax(0,1fr);row-gap:clamp(26px,5vw,34px)}
  .knc:where(:not(.pdp2)) .pbcollage{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;align-items:stretch}
  .knc:where(:not(.pdp2)) .pbgroot{flex:none;min-height:0;aspect-ratio:var(--beeld-bewijskaart)}
  .knc:where(:not(.pdp2)) .pbklein{aspect-ratio:auto}
  .knc:where(:not(.pdp2)) .pnum{min-width:44px}
}
.knc:where(:not(.pdp2)) .persoregel{margin:12px 0 0;font-size:13.5px;color:var(--muted)}
.knc:where(:not(.pdp2)) .persoregel a{font-weight:700;color:var(--pruim);display:inline-flex;align-items:center;min-height:44px}
/* B13 (r23), herzien in r24: de ruimte boven de bouwpakket-box is even groot als die eronder.
   De bewijssectie eindigt nu met een harde rand (beeld of tekst, geen kaart), dus de rekensom
   is simpeler: boven = proof-padding-bottom + diy-padding-top, onder = diy-padding-bottom.
   Beide komen uit dezelfde --knsplit, dus ze blijven op elke breedte gelijk. */
.knc:where(:not(.pdp2)){--diy-pt:34px;--knsplit:119px;--overons-pt:64px}
.knc:where(:not(.pdp2)) .diy{background:var(--cream);padding:var(--diy-pt) 24px calc(var(--knsplit) - var(--overons-pt))}
.knc:where(:not(.pdp2)) .proof.sec{padding-bottom:calc(var(--knsplit) - var(--diy-pt))}
.knc:where(:not(.pdp2)) .overons.sec{padding-top:var(--overons-pt)}
@media (max-width:900px){
  .knc:where(:not(.pdp2)){--diy-pt:28px;--knsplit:90px;--overons-pt:44px}
}
.knc:where(:not(.pdp2)) .diykaart{max-width:880px;margin:0 auto;background:var(--wit);border-radius:16px;box-shadow:var(--sh-md);padding:clamp(26px,3.5vw,38px) clamp(24px,4vw,44px);display:flex;align-items:center;gap:clamp(20px,3vw,34px);flex-wrap:wrap;text-align:left}
.knc:where(:not(.pdp2)) .diybol{flex:none}
.knc:where(:not(.pdp2)) .diykaart .din{flex:1;min-width:240px}
.knc:where(:not(.pdp2)) .diy h2{font-size:clamp(22px,2.2vw,27px);margin:0 0 8px}
.knc:where(:not(.pdp2)) .diy p{color:var(--muted);font-size:15.5px;margin:0}
.knc:where(:not(.pdp2)) .diykaart .btn-sec{flex:none;white-space:nowrap}
.knc:where(:not(.pdp2)) .overons{background:var(--wit)}
.knc:where(:not(.pdp2)) .oin{max-width:600px;margin:0 auto}
.knc:where(:not(.pdp2)) .oin h2{margin:8px 0 20px}
.knc:where(:not(.pdp2)) .oin p{margin:0 0 1em;font-size:16.5px}
.knc:where(:not(.pdp2)) .oslot{font-weight:700;color:var(--pruim)}
@media (max-width:680px){
  .knc:where(:not(.pdp2)) .hicon{width:44px;height:44px}
  .knc:where(:not(.pdp2)) .cart{padding:10px}
  .knc:where(:not(.pdp2)) .sitehead{padding:0 14px}
  .knc:where(:not(.pdp2)) .brand{gap:7px}
  .knc:where(:not(.pdp2)) .brand .wm{font-size:19px}
}
.knc:where(:not(.pdp2)) .gift{background:linear-gradient(170deg,#3A1226,#491A32);color:var(--cream);text-align:center;position:relative;overflow:hidden}
.knc:where(:not(.pdp2)) .giftimg{position:absolute;inset:0 0 auto 0;height:110%;background:url(/wp-content/uploads/sfeer-2026-09b/sfeer-doos-oudroze-hero-960.jpg) 50% calc(50% / 1.1)/cover no-repeat;clip-path:inset(0 0 calc(100% / 11) 0);filter:sepia(.25) saturate(.8) brightness(.5)}
.knc:where(:not(.pdp2)) .giftvl{position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,13,30,.82),rgba(58,18,38,.68) 50%,rgba(46,13,30,.86))}
.knc:where(:not(.pdp2)) .giftin{position:relative;z-index:3}
.knc:where(:not(.pdp2)) .gift h2{color:var(--cream)}
.knc:where(:not(.pdp2)) .gift p{color:#EFD3BC;margin:16px auto 30px;max-width:480px;font-size:17px}
.knc:where(:not(.pdp2)) .kraft{margin:0 auto 24px;display:block;filter:drop-shadow(0 12px 20px rgba(0,0,0,.35))}
.knc:where(:not(.pdp2)) .footmock{background:var(--wit);border-top:1px solid rgba(0,0,0,.07);padding:60px 24px 100px}
.knc:where(:not(.pdp2)) .footmock .cols{display:flex;gap:44px 56px;flex-wrap:wrap;justify-content:space-between;max-width:1080px;margin:0 auto}
.knc:where(:not(.pdp2)) .footmock .fm-brand{font-family:'Baloo 2',sans-serif;font-size:26px;font-weight:700;color:var(--pruim)}
.knc:where(:not(.pdp2)) .footmock :is(h4,.fmkop){font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--oker);margin:0 0 12px;font-weight:700}
.knc:where(:not(.pdp2)) .footmock ul{list-style:none;margin:0;padding:0;font-size:15px}
.knc:where(:not(.pdp2)) .footmock a{color:var(--muted);text-decoration:none;display:inline-block;padding:11px 0}
@media (hover:hover){.knc:where(:not(.pdp2)) .footmock a:hover{color:var(--pruim);text-decoration:underline}}
.knc:where(:not(.pdp2)) .legal{text-align:center;margin-top:46px;font-size:12.5px;color:var(--muted);border-top:1px solid rgba(0,0,0,.07);padding-top:22px}
.knc:where(:not(.pdp2)) .stickycta{
  position:fixed;left:0;right:0;bottom:0;z-index:65;background:rgba(30,20,26,.97);border-top:2px solid var(--mosterd);
  display:none;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px;color:#F5EDE2
}
.knc:where(:not(.pdp2)) .stickycta .t{font-size:15px;font-weight:700}
.knc:where(:not(.pdp2)) .stickycta .btn{padding:12px 24px;font-size:15px}
@media (max-width:680px){
  .knc:where(:not(.pdp2)) .stickycta{display:flex}
  .knc:where(:not(.pdp2)) .footmock{padding-bottom:130px}
}
.knc:where(:not(.pdp2)) .sg{padding:20px 24px 100px}
.knc:where(:not(.pdp2)) .sg h2{margin:56px 0 24px;font-size:clamp(26px,2.6vw,32px)}
.knc:where(:not(.pdp2)) .lockups{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.knc:where(:not(.pdp2)) .lockups .tile{cursor:pointer;transition:transform .2s,box-shadow .2s}
@media (hover:hover){.knc:where(:not(.pdp2)) .lockups .tile:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}}
.knc:where(:not(.pdp2)) .tile{border-radius:16px;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:var(--sh-md)}
.knc:where(:not(.pdp2)) .tile .tw{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:29px;color:var(--pruim)}
.knc:where(:not(.pdp2)) .tile .tt{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--pruim)}
.knc:where(:not(.pdp2)) .tile.cream{background:var(--oat)}
.knc:where(:not(.pdp2)) .tile.powder{background:var(--poeder)}
.knc:where(:not(.pdp2)) .tile.mustard{background:var(--mosterd)}
.knc:where(:not(.pdp2)) .tilecap{text-align:center;font-size:13px;color:var(--muted);margin-top:10px;font-weight:600}
.knc:where(:not(.pdp2)) .swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px}
.knc:where(:not(.pdp2)) .sw{background:var(--wit);border-radius:12px;overflow:hidden;box-shadow:var(--sh-sm)}
.knc:where(:not(.pdp2)) .sw .chip{height:88px}
.knc:where(:not(.pdp2)) .sw .meta{padding:10px 13px;font-size:12.5px}
.knc:where(:not(.pdp2)) .sw .meta b{display:block;font-weight:700;color:var(--pruim)}
.knc:where(:not(.pdp2)) .sw .meta span{color:var(--muted);font-size:12px}
.knc:where(:not(.pdp2)) .typerow{background:var(--wit);border-radius:12px;padding:28px 30px;margin-bottom:14px;box-shadow:var(--sh-sm)}
.knc:where(:not(.pdp2)) .typerow .demo-d{font-family:'Baloo 2',sans-serif;font-size:40px;font-weight:700;color:var(--pruim)}
.knc:where(:not(.pdp2)) .typerow .demo-b{font-size:17px;max-width:560px}
.knc:where(:not(.pdp2)) .typerow small{display:block;margin-top:10px;color:var(--muted);font-size:13px}
.knc:where(:not(.pdp2)) .btnrow{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.knc:where(:not(.pdp2)) .favprev{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap}
.knc:where(:not(.pdp2)) .favbox{background:var(--wit);border-radius:12px;padding:14px;text-align:center;box-shadow:var(--sh-sm)}
.knc:where(:not(.pdp2)) .favbox .f32{width:32px;height:32px;margin:0 auto;background:var(--pruim);border-radius:8px;display:grid;place-items:center}
.knc:where(:not(.pdp2)) .favbox .f16{width:16px;height:16px;margin:0 auto;background:var(--pruim);border-radius:4px;display:grid;place-items:center}
.knc:where(:not(.pdp2)) .favbox small{display:block;margin-top:8px;color:var(--muted);font-size:11.5px}
.knc:where(:not(.pdp2)) .note{font-size:14.5px;color:var(--muted);max-width:660px}
.knc:where(:not(.pdp2)) .chips{display:flex;gap:10px;flex-wrap:wrap}
.knc:where(:not(.pdp2)) .chips span{border:1.5px solid var(--pruim);color:var(--pruim);padding:7px 20px;font-size:15px;border-radius:999px;background:var(--wit);font-weight:700}
.knc:where(:not(.pdp2)) .chips span b{color:var(--oker)}
.knc:where(:not(.pdp2)) .fopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.knc:where(:not(.pdp2)) .fopt{background:var(--wit);border-radius:12px;padding:22px 24px;box-shadow:var(--sh-sm)}
.knc:where(:not(.pdp2)) .fopt .fnaam{font-family:'Nunito',sans-serif!important;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--oker);margin-bottom:10px}
.knc:where(:not(.pdp2)) .fopt .fnaam span{color:var(--muted);text-transform:none;letter-spacing:0}
.knc:where(:not(.pdp2)) .fopt .fmerk{font-size:38px;color:var(--pruim);line-height:1.15}
.knc:where(:not(.pdp2)) .fopt .ftag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--pruim);margin:2px 0 10px}
.knc:where(:not(.pdp2)) .fopt .fzin{font-size:15px;color:var(--muted)}
.knc:where(:not(.pdp2)) .palrij{display:flex;align-items:center;gap:18px;background:var(--wit);border-radius:12px;padding:14px 18px;margin-bottom:10px;box-shadow:var(--sh-sm);flex-wrap:wrap}
.knc:where(:not(.pdp2)) .palchips{display:flex;gap:6px}
.knc:where(:not(.pdp2)) .palchips i{width:40px;height:40px;border-radius:8px;display:block;border:1px solid rgba(0,0,0,.08)}
.knc:where(:not(.pdp2)) .palmeta b{display:block;font-size:15px;color:var(--pruim)}
.knc:where(:not(.pdp2)) .palmeta span{font-size:13px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){
  .knc:where(:not(.pdp2)) *,.knc:where(:not(.pdp2)) *::before,.knc:where(:not(.pdp2)) *::after{animation:none!important;transition:none!important}
}
@media (max-width:640px){
  .knc:where(:not(.pdp2)) .herovl{background:linear-gradient(180deg,rgba(46,13,30,.7) 0%,rgba(46,13,30,.88) 62%,rgba(46,13,30,.95) 100%)}
  .knc:where(:not(.pdp2)) .hero .imgtag{bottom:auto;top:12px;right:12px}
}
.knc:where(:not(.pdp2)) .tm{font-size:.42em;vertical-align:baseline;position:relative;top:-.52em;font-family:'Karla',system-ui,sans-serif;font-weight:700;letter-spacing:0;opacity:.8;margin-left:1px}
.knc:where(:not(.pdp2)) .hicon{display:inline-grid;place-items:center;width:44px;height:44px;border:0;background:none;border-radius:999px;color:var(--pruim);cursor:pointer;padding:0}
@media (hover:hover){.knc:where(:not(.pdp2)) .hicon:hover{background:var(--oat)}}
.knc:where(:not(.pdp2)) .zoekbalk{background:var(--wit);border-bottom:1px solid rgba(0,0,0,.07);padding:14px 24px}
.knc:where(:not(.pdp2)) .zoekbalk .in{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:12px;color:var(--muted)}
.knc:where(:not(.pdp2)) .zoekbalk input{flex:1;border:1.5px solid rgba(0,0,0,.18);border-radius:999px;padding:11px 18px;font-family:inherit;font-size:15px;background:var(--cream);color:var(--tekst)}
.knc:where(:not(.pdp2)) .zoekbalk .btn{padding:11px 24px;font-size:14.5px}
/* B22 (r23): betaallogo's als eigen inline SVG, op gelijke optische hoogte in een nette rij */
.knc:where(:not(.pdp2)) .pbk{display:block;height:32px;width:auto;border-radius:6px}
@media (max-width:700px){.knc:where(:not(.pdp2)) .pbk{height:28px}}
.knc:where(:not(.pdp2)) .paybadges{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:40px;flex-wrap:wrap}
.knc:where(:not(.pdp2)) .pb{
  display:inline-flex;align-items:center;justify-content:center;background:#FFFFFF;
  border:1px solid rgba(0,0,0,.13);border-radius:9px;box-shadow:0 1px 2px rgba(0,0,0,.05);
  height:40px;padding:0 14px
}
.knc:where(:not(.pdp2)) .pb svg{display:block;height:20px;width:auto}
.knc:where(:not(.pdp2)) .pb-ideal img{display:block;height:26px;width:auto}
.knc:where(:not(.pdp2)) .paybadges svg text{font-family:Arial,Helvetica,sans-serif;font-variation-settings:normal;letter-spacing:0}
.knc:where(:not(.pdp2)) .molliebadge{display:flex;justify-content:center;margin-top:14px}
.knc:where(:not(.pdp2)) .molliebadge img{display:block;height:32px;width:auto;border-radius:6px}
@media (max-width:700px){.knc:where(:not(.pdp2)) .molliebadge img{height:28px}}
@media (max-width:400px){
  .knc:where(:not(.pdp2)) .pb{height:36px;padding:0 11px}
  .knc:where(:not(.pdp2)) .pb svg{height:17px}
  .knc:where(:not(.pdp2)) .pb-ideal img{height:22px}
}
.knc:where(:not(.pdp2)) .toplink{position:fixed;right:18px;bottom:18px;z-index:75;width:46px;height:46px;border-radius:50%;background:var(--wit);color:var(--pruim);display:grid;place-items:center;box-shadow:var(--sh-md);border:1px solid rgba(0,0,0,.08);opacity:0;pointer-events:none;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s,visibility 0s linear .25s}
.knc:where(:not(.pdp2)) .toplink.zichtbaar{opacity:1;pointer-events:auto;visibility:visible;transform:none;transition:opacity .25s,transform .25s,visibility 0s}
@media (hover:hover){.knc:where(:not(.pdp2)) .toplink:hover{box-shadow:var(--sh-lg);color:var(--mosterdd)}}
@media (max-width:680px){
  .knc:where(:not(.pdp2)) .toplink{bottom:86px;right:12px}
}
.knc:where(:not(.pdp2)) [data-kleur]{cursor:pointer}
.knc:where(:not(.pdp2)) .ckaartje.kleuractief,.knc:where(:not(.pdp2)) .cchip.kleuractief{outline:2px solid var(--mosterd);outline-offset:2px}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .ckaartje.kleuractief,.knc:where(:not(.pdp2))[data-collectie="magazine"] .cchip.kleuractief{outline:none;background:var(--wit);box-shadow:inset 3px 0 0 var(--mosterd)}
/* r21: knusfam-sectie vervallen (popup dekt het aanbod); klein aanmeldblok in de footer */
.knc:where(:not(.pdp2)) .fmfam{max-width:600px;margin:52px auto 0;padding-top:36px;border-top:1px solid rgba(0,0,0,.07);text-align:center}
.knc:where(:not(.pdp2)) .fmfam :is(h4,.fmkop){margin-bottom:8px}
.knc:where(:not(.pdp2)) .fmfam .fmtekst{margin:0 0 16px;font-size:14.5px;color:var(--muted)}
.knc:where(:not(.pdp2)) .fmfam .kfform input{padding:11px 16px;font-size:14px;min-width:150px}
.knc:where(:not(.pdp2)) .fmfam .kfform .btn{padding:12px 22px;font-size:14px}
.knc:where(:not(.pdp2)) .fmfam .kfklein{margin-top:12px;font-size:12px}
/* B2 (18-09): zichtbare instructie boven de Knus Fam-velden. WCAG 3.3.2 is "Labels OR
   Instructions"; dit voldoet zonder de flexrij te herbouwen (dat is V11, stoppunt S-A2). */
.knc:where(:not(.pdp2)) .kfform{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.knc:where(:not(.pdp2)) .kfform input{flex:1;min-width:170px;border:1.5px solid rgba(0,0,0,.18);border-radius:999px;padding:13px 20px;font-family:inherit;font-size:15px;background:var(--wit);color:var(--tekst)}
.knc:where(:not(.pdp2)) .kfform input:focus{outline:2.5px solid var(--kn-goudd);outline-offset:2px}
.knc:where(:not(.pdp2)) .kfklein{margin:16px 0 0;font-size:12.5px;color:var(--muted)}
.knc:where(:not(.pdp2)) .kfklein a{font-weight:700}
.knc:where(:not(.pdp2)) .kfpopup{position:fixed;inset:0;z-index:90;background:rgba(11,12,14,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.knc:where(:not(.pdp2)) .kfpopup[hidden]{display:none}
.knc:where(:not(.pdp2)) .kfp-kaart{position:relative;display:flex;max-width:720px;width:100%;background:var(--wit);border-radius:16px;overflow:hidden;box-shadow:var(--sh-lg)}
.knc:where(:not(.pdp2)) .kfp-tekst{flex:1.1;padding:clamp(24px,4vw,40px);text-align:left}
.knc:where(:not(.pdp2)) .kfp-tekst b{display:block;font-family:'Young Serif',Georgia,serif;font-weight:400;font-size:clamp(21px,2.4vw,26px);color:var(--pruim);margin:14px 0 10px;line-height:1.2}
.knc:where(:not(.pdp2)) .kfp-tekst p{margin:0 0 18px;font-size:14.5px;color:var(--muted);line-height:1.65}
.knc:where(:not(.pdp2)) .kfp-tekst form{display:flex;flex-direction:column;gap:10px}
.knc:where(:not(.pdp2)) .kfp-tekst input{border:1.5px solid rgba(0,0,0,.18);border-radius:999px;padding:12px 18px;font-family:inherit;font-size:14.5px;background:var(--cream);color:var(--tekst)}
.knc:where(:not(.pdp2)) .kfp-tekst input:focus{outline:2.5px solid var(--kn-goudd);outline-offset:2px}
.knc:where(:not(.pdp2)) .kfp-nee{background:none;border:0;color:var(--muted);font-family:inherit;font-size:12.5px;text-decoration:underline;cursor:pointer;margin-top:12px;padding:4px 0;display:block}
.knc:where(:not(.pdp2)) .kfp-tekst small{display:block;margin-top:8px;font-size:11.5px;color:var(--muted)}
.knc:where(:not(.pdp2)) .kfp-foto{flex:1;position:relative;min-height:340px}
.knc:where(:not(.pdp2)) .kfp-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% calc(72% / 1.1)}
.knc:where(:not(.pdp2)) .kfp-x{position:absolute;top:12px;right:12px;z-index:5;width:34px;height:34px;border-radius:50%;border:0;padding:0;line-height:0;background:var(--wit);color:var(--pruim);display:grid;place-items:center;cursor:pointer;box-shadow:var(--sh-sm)}
.knc:where(:not(.pdp2)) .kfp-x svg{display:block}
@media (max-width:640px){
  .knc:where(:not(.pdp2)) .kfp-foto{display:none}
}

/* ============================================================
   8. MOCKUP - PRODUCTPAGINA (post 208)
   ============================================================ */
.knc:where(.pdp2) .sec{padding:clamp(64px,9vw,96px) 24px}
.knc:where(.pdp2) section{scroll-margin-top:64px}
.knc:where(.pdp2) a{color:inherit}
.knc:where(.pdp2) .skiplink{position:absolute;left:-9999px;top:0;z-index:95;background:var(--mosterd);color:var(--btntxt);padding:13px 22px;border-radius:0 0 12px 0;font-weight:700;text-decoration:none;font-size:15px}
.knc:where(.pdp2) .skiplink:focus{left:0}
.knc:where(.pdp2) .btn{
  display:inline-block;background:var(--mosterd);color:var(--btntxt);padding:15px 34px;border-radius:999px;
  font-size:16.5px;text-decoration:none;font-weight:700;font-family:inherit;border:0;cursor:pointer;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.4);transition:transform .22s,box-shadow .22s,background .22s
}
.knc:where(.pdp2) .btn-mand{display:flex;align-items:center;justify-content:center;gap:9px}
.knc:where(.pdp2) .btn-sec{background:transparent;color:var(--pruim);border:1.5px solid var(--pruim);box-shadow:none}
@media (hover:hover){.knc:where(.pdp2) .btn-sec:hover{background:var(--pruim);color:var(--cream);transform:none;box-shadow:none}}
.knc:where(.pdp2) .pathlink{display:inline-flex;align-items:center;min-height:44px;margin-top:32px;font-size:15.5px;font-weight:700;color:var(--pruim);text-decoration:none;border-bottom:2px solid var(--mosterd);padding:4px 2px;transition:color .2s}
@media (hover:hover){.knc:where(.pdp2) .pathlink:hover{color:var(--pruimd)}}
.knc:where(.pdp2) .tag{display:inline-block;font-size:11.5px;border:1px solid var(--oker);color:var(--oker);border-radius:999px;padding:2px 11px;vertical-align:middle;font-weight:700}
.knc:where(.pdp2) .klabel{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.knc:where(.pdp2) .kuse{color:var(--pruim);--maccent:var(--mosterd)}
.knc:where(.pdp2) .kuse-licht{color:var(--cream);--maccent:var(--mosterd)}
.knc:where(.pdp2) .imgtag{position:absolute;z-index:6;left:12px;bottom:12px;font-size:10.5px;color:#F8EEDF;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.35);padding:3px 11px;border-radius:999px;font-weight:700}
.knc:where(.pdp2) .ph2{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--sh-lg)}
.knc:where(.pdp2) .ph2 img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
@media (hover:hover){.knc:where(.pdp2) .ph2:hover img{transform:scale(1.03)}}
.knc:where(.pdp2) .persoregel{margin:14px 0 0;font-size:13.5px;color:var(--muted)}
.knc:where(.pdp2) .persoregel a{font-weight:700;color:var(--pruim);display:inline-flex;align-items:center;min-height:44px}
.knc:where(.pdp2) .collsub{text-align:center;color:var(--muted);font-size:16.5px;margin:12px 0 44px}
.knc:where(.pdp2) .revbar{
  position:sticky;top:0;z-index:70;background:#2E0D1E;color:#DCC0CD;font-size:12px;padding:8px 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;gap:12px;align-items:center;justify-content:center;letter-spacing:.04em
}
.knc:where(.pdp2) .revbar a{color:#F5B84A;text-decoration:underline;padding:4px 2px}
.knc:where(.pdp2) .divlbl{text-align:center;padding:12px 0 2px}
.knc:where(.pdp2) .divlbl span{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.knc:where(.pdp2) .sitehead{background:var(--wit);border-bottom:1px solid rgba(0,0,0,.07);padding:0 24px}
.knc:where(.pdp2) .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.knc:where(.pdp2) .brand .wm{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:22px;color:var(--pruim);letter-spacing:-.01em}
.knc:where(.pdp2) .tm{font-size:.42em;vertical-align:baseline;position:relative;top:-.52em;font-family:'Karla',system-ui,sans-serif;font-weight:700;letter-spacing:0;opacity:.8;margin-left:1px}
.knc:where(.pdp2) .nav{display:flex;gap:2px}
.knc:where(.pdp2) .nav a{text-decoration:none;font-size:15px;font-weight:600;color:var(--pruim);padding:11px 13px;border-radius:999px}
.knc:where(.pdp2) .cart{display:inline-flex;align-items:center;gap:8px;text-decoration:none;padding:10px;border-radius:999px;font-size:14px;font-weight:700;color:var(--pruim)}
.knc:where(.pdp2) .cart .aantal{font-size:14px;font-weight:700}
@media (hover:hover){.knc:where(.pdp2) .cart:hover{background:var(--oat)}}
.knc:where(.pdp2) .hicon{display:inline-grid;place-items:center;width:44px;height:44px;border:0;background:none;border-radius:999px;color:var(--pruim);cursor:pointer;padding:0}
@media (hover:hover){.knc:where(.pdp2) .hicon:hover{background:var(--oat)}}
@media (max-width:680px){
  .knc:where(.pdp2) .nav{display:none}
  .knc:where(.pdp2) .sitehead{padding:0 14px}
  .knc:where(.pdp2) .sitehead .in{gap:8px}
  .knc:where(.pdp2) .hicon{width:44px;height:44px}
  .knc:where(.pdp2) .cart{padding:10px}
  .knc:where(.pdp2) .brand{gap:7px}
  .knc:where(.pdp2) .brand .wm{font-size:19px}
}
.knc:where(.pdp2) .zoekbalk{background:var(--wit);border-bottom:1px solid rgba(0,0,0,.07);padding:14px 24px}
.knc:where(.pdp2) .zoekbalk .in{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:12px;color:var(--muted)}
.knc:where(.pdp2) .zoekbalk input{flex:1;border:1.5px solid rgba(0,0,0,.18);border-radius:999px;padding:11px 18px;font-family:inherit;font-size:15px;background:var(--cream);color:var(--tekst)}
.knc:where(.pdp2) .zoekbalk .btn{padding:11px 24px;font-size:14.5px}
/* ===== kleurstalen (dekentje) ===== */
.knc:where(.pdp2) .dots{display:flex;gap:12px;margin:0 0 22px;flex-wrap:wrap}
.knc:where(.pdp2) .dot{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;cursor:pointer;padding:0;position:relative}
.knc:where(.pdp2) .dot i .dksvg{display:none}
.knc:where(.pdp2)[data-staal="dekentje"] .dot i{width:32px;height:32px;border-radius:8px;background-color:transparent!important;background-image:none;box-shadow:none;transition:transform .16s ease}
@media (hover:hover){.knc:where(.pdp2)[data-staal="dekentje"] .dot:hover i{transform:translateY(-1.5px)}}
.knc:where(.pdp2) .sizechips{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 28px}
.knc:where(.pdp2) .schip{border:1.5px solid var(--pruim);background:transparent;color:var(--pruim);padding:11px 18px;font-size:14.5px;font-weight:700;cursor:pointer;border-radius:999px;font-family:inherit}
.knc:where(.pdp2) .schip.on{background:var(--pruim);color:var(--cream)}
.knc:where(.pdp2) .pmprice{display:flex;align-items:center;gap:14px;margin-bottom:2px}
.knc:where(.pdp2) .pmprice b{font-family:'Baloo 2',sans-serif;font-size:clamp(24px,2.2vw,29px);font-weight:700;color:var(--pruim)}
.knc:where(.pdp2) .pmfeel{color:var(--muted);font-size:16.5px;margin:0 0 18px}
/* ===== koopblok ===== */
.knc:where(.pdp2) .ppkoop{background:var(--cream);padding:clamp(16px,2vw,24px) 24px clamp(56px,7vw,84px);scroll-margin-top:44px}
.knc:where(.pdp2) .ppkoop .in{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);gap:clamp(32px,4.5vw,60px);align-items:start}
.knc:where(.pdp2) .kruimel{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.knc:where(.pdp2) .kruimel a{text-decoration:none;color:var(--muted);display:inline-flex;align-items:center;min-height:44px}
@media (hover:hover){.knc:where(.pdp2) .kruimel a:hover{color:var(--pruim);text-decoration:underline}}
.knc:where(.pdp2) .pd-galwrap{position:relative;padding:0 0 26px 26px}
.knc:where(.pdp2) .pd-galwrap::before{content:"";position:absolute;left:0;bottom:0;width:70%;height:64%;background:var(--beige);border-radius:16px}
.knc:where(.pdp2) .ppgal .hoofd{position:relative;z-index:1;border-radius:16px;overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:5/6;background:var(--oat)}
.knc:where(.pdp2) .ppgal .hoofd img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease,object-position .45s ease}
.knc:where(.pdp2) .ppthumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px;padding-left:26px}
.knc:where(.pdp2) .ppthumb{position:relative;border:0;padding:0;background:var(--oat);border-radius:10px;overflow:hidden;aspect-ratio:1/1;cursor:pointer;box-shadow:var(--sh-sm)}
.knc:where(.pdp2) .ppthumb img{width:100%;height:100%;object-fit:cover;display:block}
.knc:where(.pdp2) .ppthumb.on{outline:2px solid var(--mosterd);outline-offset:2px}
.knc:where(.pdp2) .ppthumb .imgtag{display:none}
/* tag zou de kleine thumbs overwoekeren, zie collectie-magazine */
.knc:where(.pdp2) .ppkolom h1{font-size:clamp(30px,3.5vw,40px);letter-spacing:-.01em;margin:2px 0 4px}
.knc:where(.pdp2) .ppkolom .pmfeel{margin:0 0 12px;font-size:16px}
.knc:where(.pdp2) .ppkolom .dots{margin:0 0 22px}
.knc:where(.pdp2) .sterren{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--tekst);margin:0 0 12px;flex-wrap:wrap}
.knc:where(.pdp2) .rstars{color:var(--mosterdd);letter-spacing:4px;font-size:16px}
.knc:where(.pdp2) .rstars .roff{opacity:.3}
.knc:where(.pdp2) .sterren .rstars{font-size:15px;margin:0}
.knc:where(.pdp2) .sterren a{color:var(--pruim)}
.knc:where(.pdp2) .btwregel{margin:0 0 12px;font-size:12.5px;color:var(--muted)}
.knc:where(.pdp2) .ppkolom .sizechips{margin-bottom:12px}
.knc:where(.pdp2) .maatlink{display:inline-flex;align-items:center;min-height:44px;margin:0 0 14px;font-size:13.5px;font-weight:700;color:var(--pruim)}
/* Blok C stap 5 - de koopknop is een <a> geworden met de echte add-to-cart-URL.
   Een <button> krijgt line-height:normal van de browser, een <a> erft de 1.7 van
   de pagina; zonder deze regel wordt de knop 9px hoger dan in het ontwerp. */
.knc:where(.pdp2) .ppkolom .btn-mand{width:100%;padding:16px 30px;font-size:17px;line-height:normal}
/* C3 - vertrouwensregels onder elkaar, met retourpad (F3) */
.knc:where(.pdp2) .trustlijst{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px}
.knc:where(.pdp2) .trustlijst li{display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;font-size:14.5px;color:var(--muted);line-height:1.5}
.knc:where(.pdp2) .trustlijst svg{margin-top:2px;color:var(--mosterdd);flex:none}
.knc:where(.pdp2) .trustlijst b{color:var(--pruim);font-weight:700}
.knc:where(.pdp2) .trustlijst a{color:var(--pruim);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* C2 - horizontale infoband onder de fotosectie */
.knc:where(.pdp2) .ppinfo{max-width:1080px;margin:clamp(30px,3.4vw,46px) auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.5vw,20px)}
.knc:where(.pdp2) .ppinfokaart{background:var(--wit);border-radius:16px;padding:22px 24px 24px;box-shadow:var(--sh-sm);border-top:3px solid var(--mosterd)}
.knc:where(.pdp2) .ppinfoicoon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--oat);color:var(--pruim);margin:0 0 13px}
.knc:where(.pdp2) .ppinfokaart h2{font-size:17.5px;letter-spacing:normal;margin:0 0 7px}
.knc:where(.pdp2) .ppinfokaart p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.75}
.knc:where(.pdp2) .ppinfokaart .tag{margin-top:2px}
@media (max-width:900px){
  .knc:where(.pdp2) .ppinfo{grid-template-columns:1fr;gap:12px}
  .knc:where(.pdp2) .ppinfokaart{padding:20px 22px 22px}
}
.knc:where(.pdp2) .ppacc{margin-top:24px;border-top:1px solid rgba(0,0,0,.1)}
.knc:where(.pdp2) .ppacc details{border-bottom:1px solid rgba(0,0,0,.1)}
.knc:where(.pdp2) .ppacc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:15px 2px;font-weight:700;color:var(--pruim);font-size:15.5px}
.knc:where(.pdp2) .ppacc summary::-webkit-details-marker{display:none}
.knc:where(.pdp2) .ppacc summary::after{content:"+";font-size:21px;font-weight:400;color:var(--oker);line-height:1;transition:transform .2s;flex:none}
.knc:where(.pdp2) .ppacc details[open] summary::after{transform:rotate(45deg)}
.knc:where(.pdp2) .ppacc .accin{padding:0 2px 16px;font-size:14.5px;color:var(--muted);line-height:1.7}
.knc:where(.pdp2) .ppacc .accin p{margin:0 0 8px}
.knc:where(.pdp2) .ppacc .accin p:last-child{margin-bottom:0}
@media (min-width:901px){
  .knc:where(.pdp2) .ppkolom{position:sticky;top:46px}
}
@media (max-width:900px){
  .knc:where(.pdp2) .ppkoop .in{grid-template-columns:1fr;gap:26px}
  .knc:where(.pdp2) .ppgal .hoofd{aspect-ratio:4/5}
}
@media (max-width:580px){
  .knc:where(.pdp2) .ppthumbs{gap:7px;padding-left:18px}
  .knc:where(.pdp2) .pd-galwrap{padding:0 0 18px 18px}
}
/* acht kleurstalen passen op smalle schermen anders net niet op een rij */
@media (max-width:430px){
  .knc:where(.pdp2) .ppkolom .dots{gap:12px}
  .knc:where(.pdp2) .ppkolom .dot{width:44px;height:44px}
}
/* ===== sticky koopbalk ===== */
.knc:where(.pdp2) .koopbalk{
  position:fixed;left:0;right:0;bottom:0;z-index:65;background:rgba(7,8,9,.97);border-top:2px solid var(--mosterd);color:#F5F3EF;
  display:flex;align-items:center;gap:14px;padding:10px 18px;transform:translateY(110%);transition:transform .3s ease
}
.knc:where(.pdp2) .koopbalk.zichtbaar{transform:none}
.knc:where(.pdp2) .kb-foto{width:44px;height:44px;border-radius:10px;overflow:hidden;flex:none;background:var(--oat);position:relative}
.knc:where(.pdp2) .kb-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.knc:where(.pdp2) .kb-info{flex:1;min-width:0;line-height:1.35}
.knc:where(.pdp2) .kb-info b{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.knc:where(.pdp2) .kb-maat{font-size:12.5px;color:#C9C7C2}
.knc:where(.pdp2) .kb-prijs{font-size:17px;font-weight:700;flex:none}
.knc:where(.pdp2) .koopbalk .btn{padding:12px 24px;font-size:15px;flex:none}
@media (max-width:580px){
  .knc:where(.pdp2) .kb-foto,.knc:where(.pdp2) .kb-maat{display:none}
  .knc:where(.pdp2) .koopbalk{gap:10px;padding:10px 14px}
  .knc:where(.pdp2) .koopbalk .btn{padding:11px 18px;font-size:14px}
}
.knc:where(.pdp2) .footmock{padding-bottom:130px}
/* ===== sfeerbreak (full-bleed) ===== */
.knc:where(.pdp2) .pd-sfeer{position:relative;overflow:hidden;padding:clamp(96px,14vw,170px) 24px}
.knc:where(.pdp2) .pd-sfeer .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% calc(30% / 1.1)}
.knc:where(.pdp2) .pd-sfeer::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,9,.54),rgba(7,8,9,.74))}
.knc:where(.pdp2) .pd-sfeer .in{position:relative;z-index:2;text-align:center;max-width:800px;margin:0 auto}
.knc:where(.pdp2) .pd-sfeer .lbl{color:#E8C075}
.knc:where(.pdp2) .pd-sfeer h2{color:#FBFAF7;font-size:clamp(34px,4.8vw,58px);line-height:1.16;margin:16px 0 0;letter-spacing:normal}
.knc:where(.pdp2) .pd-sfeer h2 .goud{color:#E8C075}
.knc:where(.pdp2) .pd-sfeer .sub{color:#E7E4DE;font-size:clamp(16px,1.8vw,18.5px);margin:20px auto 0;max-width:520px;line-height:1.8}
.knc:where(.pdp2) .pd-sfeer .wave{display:block;margin:30px auto 0}
/* ===== waarom knussie (zigzag) ===== */
.knc:where(.pdp2) .pd-waarom{background:var(--wit);padding:clamp(72px,10vw,120px) 0 clamp(64px,9vw,104px)}
.knc:where(.pdp2) .pd-waarom .whead{text-align:center;padding:0 24px;max-width:660px;margin:0 auto clamp(44px,6vw,76px)}
.knc:where(.pdp2) .pd-waarom h2{font-size:clamp(32px,3.8vw,48px)}
.knc:where(.pdp2) .pd-waarom .wsub{color:var(--muted);font-size:16.5px;margin:14px 0 0}
.knc:where(.pdp2) .pd-zz{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.knc:where(.pdp2) .pd-zz+.pd-zz{margin-top:clamp(44px,6vw,80px)}
.knc:where(.pdp2) .pd-zzfoto{position:relative;height:clamp(320px,40vw,520px);overflow:hidden;border-radius:0 16px 16px 0;box-shadow:var(--sh-md);background:var(--oat)}
.knc:where(.pdp2) .pd-zzfoto img{width:100%;height:100%;object-fit:cover;display:block}
.knc:where(.pdp2) .pd-zz.rechts .pd-zzfoto{order:2;border-radius:16px 0 0 16px}
.knc:where(.pdp2) .pd-zztxt{padding:clamp(32px,4vw,56px) clamp(24px,5vw,72px)}
.knc:where(.pdp2) .pd-zztxt .in{max-width:470px;margin:0 auto}
.knc:where(.pdp2) .pd-zznum{display:block;font-size:clamp(38px,3.6vw,52px);color:#9C7122;line-height:1;margin:0 0 16px}
.knc:where(.pdp2)[data-sitefont="youngserif"] .pd-zznum{font-family:'Young Serif',Georgia,serif}
.knc:where(.pdp2) .pd-zztxt h3{font-size:clamp(24px,2.4vw,30px);margin:0 0 14px}
/* C6 - tekst in de tekstkaders groter */
.knc:where(.pdp2) .pd-zztxt p{margin:0;color:var(--muted);font-size:clamp(17px,1.25vw,18px);line-height:1.8}
.knc:where(.pdp2) .pd-waarom .specwrap{padding:0 24px;margin-top:clamp(56px,8vw,96px)}
@media (max-width:900px){
  .knc:where(.pdp2) .pd-zz{grid-template-columns:1fr}
  .knc:where(.pdp2) .pd-zzfoto{height:clamp(230px,52vw,340px);border-radius:0}
  .knc:where(.pdp2) .pd-zz.rechts .pd-zzfoto{order:0;border-radius:0}
  .knc:where(.pdp2) .pd-zztxt{padding:26px 24px 4px}
  .knc:where(.pdp2) .pd-zz+.pd-zz{margin-top:48px}
}
/* C7 - specificatieblok in plaats van de kale tabel */
.knc:where(.pdp2) .specblok{
  max-width:1080px;margin:0 auto;background:var(--cream);border-radius:22px;box-shadow:var(--sh-md);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,13fr);overflow:hidden
}
.knc:where(.pdp2) .spechead{padding:clamp(28px,3vw,40px) clamp(24px,2.6vw,36px);background:var(--oat);display:flex;flex-direction:column;justify-content:flex-start;gap:10px}
.knc:where(.pdp2) .spechead .wave{display:block;flex:none;height:14px;margin-top:auto}
.knc:where(.pdp2) .spechead h3{font-size:clamp(22px,2.1vw,27px);margin:0}
.knc:where(.pdp2) .spechead p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.7}
.knc:where(.pdp2) .speclijst{margin:0;padding:clamp(10px,1.4vw,18px) clamp(24px,2.6vw,38px)}
.knc:where(.pdp2) .specrij{
  display:grid;grid-template-columns:minmax(0,32%) minmax(0,1fr);gap:18px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid rgba(0,0,0,.09)
}
.knc:where(.pdp2) .specrij:last-child{border-bottom:0}
.knc:where(.pdp2) .specrij dt{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--oker);font-weight:700;line-height:1.5}
.knc:where(.pdp2) .specrij dd{margin:0;font-size:15.5px;color:var(--tekst);line-height:1.65}
.knc:where(.pdp2) .specrij dd .tag{font-size:10.5px;padding:1px 9px;white-space:normal;line-height:1.5;margin-left:2px}
.knc:where(.pdp2) .specrij dd em{font-style:normal;color:var(--muted)}
@media (max-width:820px){
  .knc:where(.pdp2) .specblok{grid-template-columns:1fr;border-radius:18px}
  .knc:where(.pdp2) .specrij{grid-template-columns:1fr;gap:5px;align-items:start;padding:14px 0}
}
/* ===== maten (C8/C9/C10) - eigen tint, kop links, twee fotopanelen ===== */
.knc:where(.pdp2) .ppmaten{background:var(--oat);padding:clamp(76px,10vw,124px) 24px clamp(72px,9.5vw,116px);text-align:left}
.knc:where(.pdp2) .mtwrap{max-width:1080px;margin:0 auto}
.knc:where(.pdp2) .mthead{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end;
  padding-bottom:clamp(26px,3vw,38px);border-bottom:1px solid rgba(0,0,0,.12);margin-bottom:clamp(34px,4.4vw,56px)
}
.knc:where(.pdp2) .mthead h2{margin-top:10px}
.knc:where(.pdp2) .mtintro{margin:0;color:var(--muted);font-size:clamp(16px,1.25vw,17.5px);line-height:1.8;max-width:460px}
.knc:where(.pdp2) .mtgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,32px)}
.knc:where(.pdp2) .mtkaart{background:var(--wit);border-radius:20px;overflow:hidden;box-shadow:var(--sh-md);display:flex;flex-direction:column}
/* Een gevoerde maat is een maatkaart. Zonder deze regel staat die kaart in de linkerhelft van
   een tweekoloms rooster met een leeg gat ernaast (08-09, de collectie naar een maat). Met twee
   kaarten grijpt :only-child niet, dus de bestaande weergave verandert geen pixel. */
.knc:where(.pdp2) .mtkaart:only-child{grid-column:1/-1;max-width:560px;margin-inline:auto}
.knc:where(.pdp2) .mtfoto{position:relative;aspect-ratio:3/2;background:var(--oat);overflow:hidden}
.knc:where(.pdp2) .mtfoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.knc:where(.pdp2) .mtbadge{
  position:absolute;z-index:6;right:12px;top:12px;background:var(--mosterd);color:var(--btntxt);
  font-size:12.5px;font-weight:700;letter-spacing:.02em;padding:6px 14px;border-radius:999px;box-shadow:var(--sh-sm)
}
.knc:where(.pdp2) .mtbody{padding:clamp(22px,2.4vw,30px) clamp(22px,2.4vw,30px) clamp(24px,2.6vw,32px);display:flex;flex-direction:column;flex:1}
.knc:where(.pdp2) .mtschaal{display:flex;align-items:center;gap:16px;margin:0 0 20px}
.knc:where(.pdp2) .mtschaal svg{display:block;color:var(--pruim);flex:none}
.knc:where(.pdp2) .mtschaal .mtwie{margin:0;font-size:13.5px;color:var(--muted);line-height:1.55}
.knc:where(.pdp2) .mtschaal .mtwie b{display:block;font-size:14.5px;color:var(--pruim)}
.knc:where(.pdp2) .mtschaal .mtstip{color:var(--oker);font-size:12px;font-weight:700}
.knc:where(.pdp2) .mtkaart h3{font-size:clamp(21px,2vw,25px);margin:0 0 8px}
.knc:where(.pdp2) .mtkaart p{margin:0 0 20px;font-size:15.5px;color:var(--muted);line-height:1.7}
.knc:where(.pdp2) .mtkaart .btn-sec{margin-top:auto;align-self:flex-start;padding:11px 24px;font-size:14.5px;border-radius:999px}
.knc:where(.pdp2) .mtslot{
  display:flex;gap:14px;align-items:flex-start;margin:clamp(30px,3.6vw,46px) 0 0;
  padding:20px 24px;background:var(--wit);border-radius:16px;font-size:15px;color:var(--muted);line-height:1.7;box-shadow:var(--sh-sm)
}
.knc:where(.pdp2) .mtslot svg{flex:none;margin-top:3px;color:var(--mosterdd)}
@media (max-width:820px){
  .knc:where(.pdp2) .mthead{grid-template-columns:1fr;align-items:start;gap:14px}
  .knc:where(.pdp2) .mtintro{max-width:none}
  .knc:where(.pdp2) .mtgrid{grid-template-columns:1fr}
}
/* ===== reviews (C10) - een breed paneel met drie kolommen, geen losse kaartjes ===== */
.knc.pdp2 .reviews{background:var(--wit);text-align:center;padding:clamp(72px,9.5vw,112px) 24px}
.knc.pdp2 .revwrap{max-width:1080px;margin:0 auto}
.knc.pdp2 .revpaneel{margin:clamp(28px,3.4vw,42px) 0 0;background:var(--cream);border-radius:22px;box-shadow:var(--sh-md);overflow:hidden;text-align:left}
.knc.pdp2 .revscore{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;padding:18px clamp(22px,2.6vw,34px);background:var(--oat);border-bottom:1px solid rgba(0,0,0,.09)}
.knc.pdp2 .revscore .cijfer{font-size:29px;color:var(--pruim);line-height:1;font-family:'Baloo 2',sans-serif;font-weight:700}
.knc.pdp2[data-sitefont="youngserif"] .revscore .cijfer{font-family:'Young Serif',Georgia,serif;font-weight:400}
.knc.pdp2 .revscore .rstars{font-size:17px}
.knc.pdp2 .revscore .revtel{font-size:14px;color:var(--muted);font-weight:600}
.knc.pdp2 .revscore .tag{margin-left:auto}
.knc.pdp2 .revgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.knc.pdp2 .rcard{padding:clamp(24px,2.6vw,34px);background:none;border-radius:0;box-shadow:none;border-right:1px solid rgba(0,0,0,.09);display:flex;flex-direction:column}
.knc.pdp2 .rcard:last-child{border-right:0}
.knc.pdp2 .rcard::before{content:"\201E";display:block;font-size:44px;line-height:.6;color:var(--mosterdd);margin:2px 0 10px;font-family:Georgia,serif}
.knc.pdp2[data-sitefont="youngserif"] .rcard::before{font-family:'Young Serif',Georgia,serif}
.knc.pdp2 .rcard .rstars{display:block;margin-bottom:12px}
.knc.pdp2 .rcard p{margin:0 0 18px;font-size:15.5px;color:var(--tekst)}
.knc.pdp2 .rwho{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--pruim);margin-top:auto}
.knc.pdp2 .rwho .ava{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:17px;font-weight:700;color:var(--pruim);flex:none}
.knc.pdp2 .revknop{margin-top:clamp(28px,3.4vw,40px)}
@media (max-width:900px){
  .knc.pdp2 .revgrid{grid-template-columns:1fr}
  .knc.pdp2 .rcard{border-right:0;border-bottom:1px solid rgba(0,0,0,.09)}
  .knc.pdp2 .rcard:last-child{border-bottom:0}
}
/* ===== bundel-upsell (C10) - beeld links, prijslijst rechts ===== */
.knc:where(.pdp2) .ppbundel{background:var(--cream)}
.knc:where(.pdp2) .bdlin{display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);align-items:stretch}
.knc:where(.pdp2) .bdlfoto{position:relative;overflow:hidden;min-height:clamp(280px,32vw,440px)}
.knc:where(.pdp2) .bdlfoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.knc:where(.pdp2) .bdltxt{padding:clamp(56px,7vw,92px) 24px clamp(56px,7vw,92px) clamp(30px,4vw,60px)}
.knc:where(.pdp2) .bdltxt .in{max-width:520px}
.knc:where(.pdp2) .bdlsub{margin:12px 0 26px;color:var(--muted);font-size:16.5px;line-height:1.75}
.knc:where(.pdp2) .bdllijst{list-style:none;margin:0;padding:0}
.knc:where(.pdp2) .bdlrij{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid rgba(0,0,0,.11)}
.knc:where(.pdp2) .bdlrij:last-child{border-bottom:0}
.knc:where(.pdp2) .bdlaantal{width:46px;height:46px;border-radius:15px;background:var(--wit);display:grid;place-items:center;font-size:19px;font-weight:700;color:var(--pruim);box-shadow:var(--sh-sm);font-family:'Baloo 2',sans-serif}
.knc:where(.pdp2)[data-sitefont="youngserif"] .bdlaantal{font-family:'Young Serif',Georgia,serif;font-weight:400}
.knc:where(.pdp2) .bdlrij b{display:block;font-size:17px;color:var(--pruim);line-height:1.35}
.knc:where(.pdp2) .bdlrij p{margin:2px 0 0;font-size:14.5px;color:var(--muted)}
.knc:where(.pdp2) .bdlbadge{font-size:15px;font-weight:700;color:var(--btntxt);background:var(--mosterd);border-radius:999px;padding:7px 16px;white-space:nowrap}
.knc:where(.pdp2) .bship{margin:24px 0 0;font-size:14px;font-weight:700;color:var(--pruim)}
.knc:where(.pdp2) .ppbundel .pathlink{margin-top:20px}
@media (max-width:820px){
  .knc:where(.pdp2) .bdlin{grid-template-columns:1fr}
  .knc:where(.pdp2) .bdlfoto{min-height:clamp(200px,44vw,300px)}
  .knc:where(.pdp2) .bdltxt{padding:clamp(44px,7vw,60px) 24px clamp(48px,7vw,64px)}
  .knc:where(.pdp2) .bdltxt .in{max-width:none}
}
/* ===== faq (C10) - kop links, vragen rechts ===== */
.knc:where(.pdp2) .ppfaq{background:var(--wit)}
.knc:where(.pdp2) .ppfaq .in{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(22px,4vw,72px);align-items:start;text-align:left}
.knc:where(.pdp2) .ppfaq h2{text-align:left;font-size:clamp(28px,3vw,38px)}
.knc:where(.pdp2) .ppfaq .lbl{display:block;text-align:left;margin-bottom:8px}
.knc:where(.pdp2) .ppfaq .faqzij p{margin:14px 0 0;color:var(--muted);font-size:16px;line-height:1.75}
.knc:where(.pdp2) .ppfaq .ppacc{margin-top:0;border-top:1px solid rgba(0,0,0,.11)}
.knc:where(.pdp2) .ppfaq .ppacc summary{font-size:16.5px;padding:19px 2px}
.knc:where(.pdp2) .ppfaq .ppacc .accin{font-size:15.5px;padding-bottom:19px}
@media (max-width:820px){
  .knc:where(.pdp2) .ppfaq .in{grid-template-columns:1fr;gap:26px}
}
/* ===== cadeau-noot ===== */
.knc:where(.pdp2) .ppcadeau{background:linear-gradient(170deg,#070809,#0B0C0E);color:var(--cream);text-align:center;padding:clamp(64px,8.5vw,104px) 24px}
.knc:where(.pdp2) .ppcadeau h2{color:var(--cream);margin:18px 0 0}
.knc:where(.pdp2) .ppcadeau p{color:#E6E4DF;margin:14px auto 26px;max-width:460px;font-size:16.5px}
.knc:where(.pdp2) .ppcadeau p:not(.cdregel){text-wrap:balance}
.knc:where(.pdp2) .ppcadeau .cdregel{
  display:flex;gap:10px 26px;justify-content:center;flex-wrap:wrap;margin:30px auto 0;max-width:660px;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#A9A7A2;font-weight:700
}
.knc:where(.pdp2) .ppcadeau .cdregel span{display:inline-flex;align-items:center;gap:8px}
.knc:where(.pdp2) .ppcadeau .cdregel svg{color:#E8C075}
/* r21: knusfam-sectie vervallen (popup dekt het aanbod); klein aanmeldblok in de footer */
.knc.pdp2 .fmfam{max-width:600px;margin:52px auto 0;padding-top:36px;border-top:1px solid rgba(0,0,0,.07);text-align:center}
.knc.pdp2 .fmfam :is(h4,.fmkop){margin-bottom:8px}
.knc.pdp2 .fmfam .fmtekst{margin:0 0 16px;font-size:14.5px;color:var(--muted)}
.knc.pdp2 .fmfam .kfform input{padding:11px 16px;font-size:14px;min-width:150px}
.knc.pdp2 .fmfam .kfform .btn{padding:12px 22px;font-size:14px}
.knc.pdp2 .fmfam .kfklein{margin-top:12px;font-size:12px}
.knc.pdp2 .kfform{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.knc.pdp2 .kfform input{flex:1;min-width:170px;border:1.5px solid rgba(0,0,0,.18);border-radius:999px;padding:13px 20px;font-family:inherit;font-size:15px;background:var(--wit);color:var(--tekst)}
.knc.pdp2 .kfform input:focus{outline:2.5px solid var(--kn-goudd);outline-offset:2px}
.knc.pdp2 .kfklein{margin:16px 0 0;font-size:12.5px;color:var(--muted)}
.knc.pdp2 .kfklein a{font-weight:700}
/* ===== footer ===== */
.knc:where(.pdp2) .footmock{background:var(--wit);border-top:1px solid rgba(0,0,0,.07);padding:60px 24px 130px}
.knc:where(.pdp2) .footmock .cols{display:flex;gap:44px 56px;flex-wrap:wrap;justify-content:space-between;max-width:1080px;margin:0 auto}
.knc:where(.pdp2) .footmock .fm-brand{font-family:'Baloo 2',sans-serif;font-size:26px;font-weight:700;color:var(--pruim)}
.knc:where(.pdp2) .footmock :is(h4,.fmkop){font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--oker);margin:0 0 12px;font-weight:700}
.knc:where(.pdp2) .footmock ul{list-style:none;margin:0;padding:0;font-size:15px}
.knc:where(.pdp2) .footmock a{color:var(--muted);text-decoration:none;display:inline-block;padding:11px 0}
@media (hover:hover){.knc:where(.pdp2) .footmock a:hover{color:var(--pruim);text-decoration:underline}}
.knc:where(.pdp2) .legal{text-align:center;margin-top:46px;font-size:12.5px;color:var(--muted);border-top:1px solid rgba(0,0,0,.07);padding-top:22px}
.knc:where(.pdp2) .pbk{display:block;height:32px;width:auto;border-radius:6px}
@media (max-width:700px){.knc:where(.pdp2) .pbk{height:28px}}
.knc:where(.pdp2) .paybadges{display:flex;gap:8px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.knc:where(.pdp2) .molliebadge{display:flex;justify-content:center;margin-top:14px}
.knc:where(.pdp2) .molliebadge img{display:block;height:32px;width:auto;border-radius:6px}
@media (max-width:700px){.knc:where(.pdp2) .molliebadge img{height:28px}}
.knc:where(.pdp2) .pb{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(0,0,0,.14);border-radius:8px;padding:6px 13px;font-size:12px;font-weight:800;letter-spacing:.02em;background:#FFFFFF;min-height:30px}
.knc:where(.pdp2) .pb-ideal{padding:5px 9px}
.knc:where(.pdp2) .pb-ideal img{display:block;width:32px;height:24px}
.knc:where(.pdp2) .pb-visa{color:#1A1F71;font-style:italic;font-weight:800;letter-spacing:.1em;font-size:13px}
.knc:where(.pdp2) .pb-mc{padding:6px 13px}
.knc:where(.pdp2) .pb-mc i{width:15px;height:15px;border-radius:50%;display:inline-block}
.knc:where(.pdp2) .pb-mc .mc1{background:#EB001B}
.knc:where(.pdp2) .pb-mc .mc2{background:#F79E1B;margin-left:-7px;mix-blend-mode:multiply}
@media (prefers-reduced-motion:reduce){
  .knc:where(.pdp2) *,.knc:where(.pdp2) *::before,.knc:where(.pdp2) *::after{animation:none!important;transition:none!important}
}

/* ============================================================
   9. PALETLAGEN (gedeeld)
   ------------------------------------------------------------
   Stond alleen in de homepage-bron; de productpagina had er een
   kleinere kopie van (een deelverzameling - build.py controleert
   dat). Nu een keer, voor allebei: beide paletten (antraciet-goud
   en oker) werken zo op de homepage EN op de productpagina.
   Staat hier omdat de paletlagen in BEIDE bronnen na de componenten
   kwamen; dat moet zo blijven.
   ============================================================ */
/* PALETTEN:START */
/* ===== palet: antraciet-goud (gegenereerd) ===== */
.knc[data-palet="antraciet-goud"]{--pruim:var(--kn-donker);--pruimd:var(--kn-donkerd);--mosterd:var(--kn-knop);--mosterdd:var(--kn-knopd);--poeder:var(--kn-poeder);--beige:var(--kn-vlak);--oat:var(--kn-oat);--cream:var(--kn-cream);--wit:var(--kn-wit);--tekst:var(--kn-tekst);--muted:var(--kn-muted-diep);--oker:var(--kn-oker);--btntxt:var(--kn-donker);--markering:var(--kn-markering);background:var(--cream);color:var(--tekst)}
.knc[data-palet="antraciet-goud"] .revbar{background:#070809;color:#B6B5B2}
.knc[data-palet="antraciet-goud"] .revbar a{color:#E1B563}
.knc[data-palet="antraciet-goud"] .heroimg{filter:sepia(.14) saturate(.95) brightness(.95)}
.knc[data-palet="antraciet-goud"] .herovl{background:linear-gradient(99deg,rgba(7,8,9,0.94) 0%,rgba(11,12,14,0.8) 42%,rgba(11,12,14,0.42) 78%,rgba(7,8,9,0.6) 100%)}
@media (max-width:640px){
  .knc[data-palet="antraciet-goud"] .herovl{background:linear-gradient(180deg,rgba(7,8,9,0.7) 0%,rgba(7,8,9,0.88) 62%,rgba(7,8,9,0.95) 100%)}
}
.knc[data-palet="antraciet-goud"] .rain{background:repeating-linear-gradient(103deg,transparent 0 28px,rgba(215,156,47,0.055) 28px 29px)}
.knc[data-palet="antraciet-goud"] .rain2{background:repeating-linear-gradient(99deg,transparent 0 45px,rgba(239,237,232,0.045) 45px 46px)}
.knc[data-palet="antraciet-goud"] .hero .lbl{color:#B4B1AA}
.knc[data-palet="antraciet-goud"] .hero p.sub{color:#E8E6E0}
.knc[data-palet="antraciet-goud"] .foto{filter:sepia(.18) saturate(.9) brightness(.92) contrast(1.03)}
.knc[data-palet="antraciet-goud"] .fullband::before{filter:sepia(.2) saturate(.85) brightness(.84)}
.knc[data-palet="antraciet-goud"] .gift{background:linear-gradient(170deg,#070809,#0B0C0E)}
.knc[data-palet="antraciet-goud"] .giftimg{filter:sepia(.22) saturate(.78) brightness(.46)}
.knc[data-palet="antraciet-goud"] .giftvl{background:linear-gradient(180deg,rgba(7,8,9,0.82),rgba(11,12,14,0.68) 50%,rgba(7,8,9,0.86))}
.knc[data-palet="antraciet-goud"] .gift p{color:#E6E4DF}
.knc[data-palet="antraciet-goud"] .bundles::before{filter:sepia(.22) saturate(.8) brightness(.46)}
.knc[data-palet="antraciet-goud"] .bundles::after{background:linear-gradient(180deg,rgba(7,8,9,0.72),rgba(7,8,9,0.86))}
.knc[data-palet="antraciet-goud"] .bundles .collsub{color:#E5E3DE}
.knc[data-palet="antraciet-goud"] .stickycta{background:rgba(7,8,9,0.97)}
.knc[data-palet="antraciet-goud"] .tile.mustard .tw,.knc[data-palet="antraciet-goud"] .tile.mustard .tt{color:#0B0C0E}
.knc[data-palet="antraciet-goud"] .ava[style*="#F2DCCA"]{background:var(--oat)!important}
.knc[data-palet="antraciet-goud"] .ava[style*="#AFC0DC"]{background:var(--poeder)!important}
.knc[data-palet="antraciet-goud"] .ava[style*="#DAB59A"]{background:var(--beige)!important}
.knc[data-palet="antraciet-goud"] [stroke="#491A32"]{stroke:#0B0C0E}
.knc[data-palet="antraciet-goud"] [fill="#491A32"]{fill:#0B0C0E}
.knc[data-palet="antraciet-goud"] [stroke="#F0A832"]{stroke:#D79C2F}
.knc[data-palet="antraciet-goud"] [fill="#F0A832"]{fill:#D79C2F}
.knc[data-palet="antraciet-goud"] [stroke="#F0DBC7"]{stroke:#EFEDE8}
.knc[data-palet="antraciet-goud"] [fill="#F0DBC7"]{fill:#EFEDE8}
.knc[data-palet="antraciet-goud"] .swb-antraciet-goud{display:grid}
.knc[data-palet="antraciet-goud"] .bkchip.accent{background:#D79C2F}
.knc[data-palet="antraciet-goud"] .bkchip.diep{background:#35383D}
.knc[data-palet="antraciet-goud"] .bkchip.donker{background:#0B0C0E}
/* 02-09: de knopkleur is gekozen (honing, --kn-knop). De data-btnkleur-varianten van dit palet en de kiezer zijn weg. */
/* ===== palet: oker ===== */
.knc[data-palet="oker"]{
  font-family:'Mulish',system-ui,sans-serif;
  --pruim:#241D14;--pruimd:#170F08;--mosterd:#D9A441;--mosterdd:#BE8B28;--poeder:#E9CE96;--beige:#E8D9B8;--oat:#F0E5CC;--cream:#F6F0E4;--wit:#F7F6F4;--tekst:#2B2317;--muted:#6B5F4A;--oker:#7A5E23;--btntxt:#241D14;--markering:rgba(217,164,65,.46);
  background:var(--cream);color:var(--tekst)
}
.knc[data-palet="oker"] h1,.knc[data-palet="oker"] h2,.knc[data-palet="oker"] h3,.knc[data-palet="oker"] .tile .tw,.knc[data-palet="oker"] .pmprice b,.knc[data-palet="oker"] .bprice,.knc[data-palet="oker"] .typerow .demo-d{font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 100,'WONK' 0;font-weight:560;letter-spacing:normal}
.knc[data-palet="oker"] .pmprice b,.knc[data-palet="oker"] .bprice{font-weight:620}
.knc[data-palet="oker"] .brand .wm,.knc[data-palet="oker"] .fm-brand{font-family:'Bree Serif',Georgia,serif;font-weight:400;letter-spacing:normal}
.knc[data-palet="oker"] text{font-family:'Mulish',sans-serif}
.knc[data-palet="oker"] .revbar{background:#170F08;color:#D6C9AE}
.knc[data-palet="oker"] .revbar a{color:#E4B75B}
.knc[data-palet="oker"] .heroimg{filter:sepia(.3) saturate(1.05) brightness(.86)}
.knc[data-palet="oker"] .herovl{background:linear-gradient(99deg,rgba(23,15,8,.94) 0%,rgba(36,29,20,.8) 42%,rgba(36,29,20,.42) 78%,rgba(23,15,8,.6) 100%)}
@media (max-width:640px){
  .knc[data-palet="oker"] .herovl{background:linear-gradient(180deg,rgba(23,15,8,.7) 0%,rgba(23,15,8,.88) 62%,rgba(23,15,8,.95) 100%)}
}
.knc[data-palet="oker"] .rain{background:repeating-linear-gradient(103deg,transparent 0 28px,rgba(217,164,65,.06) 28px 29px)}
.knc[data-palet="oker"] .rain2{background:repeating-linear-gradient(99deg,transparent 0 45px,rgba(246,240,228,.045) 45px 46px)}
.knc[data-palet="oker"] .hero .lbl{color:#E4C588}
.knc[data-palet="oker"] .hero p.sub{color:#EFE3CB}
.knc[data-palet="oker"] .foto{filter:sepia(.3) saturate(1.02) brightness(.92) contrast(1.03)}
.knc[data-palet="oker"] .story .txt em,.knc[data-palet="oker"] .overons em{box-shadow:inset 0 -9px 0 rgba(217,164,65,.45)}
.knc[data-palet="oker"] .gift{background:linear-gradient(170deg,#170F08,#241D14)}
.knc[data-palet="oker"] .giftimg{filter:sepia(.32) saturate(.9) brightness(.46)}
.knc[data-palet="oker"] .giftvl{background:linear-gradient(180deg,rgba(23,15,8,.82),rgba(36,29,20,.68) 50%,rgba(23,15,8,.86))}
.knc[data-palet="oker"] .gift p{color:#EADDC2}
.knc[data-palet="oker"] .bundles::before{filter:sepia(.32) saturate(.9) brightness(.46)}
.knc[data-palet="oker"] .bundles::after{background:linear-gradient(180deg,rgba(23,15,8,.72),rgba(23,15,8,.86))}
.knc[data-palet="oker"] .bundles .collsub{color:#E2D3B2}
.knc[data-palet="oker"] .stickycta{background:rgba(20,13,7,.97)}
.knc[data-palet="oker"] .tile.mustard .tw,.knc[data-palet="oker"] .tile.mustard .tt{color:#241D14}
.knc[data-palet="oker"] .ava[style*="#F2DCCA"]{background:var(--oat)!important}
.knc[data-palet="oker"] .ava[style*="#AFC0DC"]{background:var(--poeder)!important}
.knc[data-palet="oker"] .ava[style*="#DAB59A"]{background:var(--beige)!important}
.knc[data-palet="oker"] [stroke="#491A32"]{stroke:#241D14}
.knc[data-palet="oker"] [fill="#491A32"]{fill:#241D14}
.knc[data-palet="oker"] [stroke="#F0A832"]{stroke:#D9A441}
.knc[data-palet="oker"] [fill="#F0A832"]{fill:#D9A441}
.knc[data-palet="oker"] [stroke="#F0DBC7"]{stroke:#F6F0E4}
.knc[data-palet="oker"] [fill="#F0DBC7"]{fill:#F6F0E4}
/* PALETTEN:END */

/* ============================================================
   10. LETTEROPTIES (gedeeld) - sitefont en logofont
   ============================================================ */
/* ===== sitefont-opties (klikbaar in de styleguide; winnen van het palet) ===== */
.knc[data-sitefont="figtree"]{font-family:'Figtree',system-ui,sans-serif}
.knc[data-sitefont="figtree"] h1,.knc[data-sitefont="figtree"] h2,.knc[data-sitefont="figtree"] h3,.knc[data-sitefont="figtree"] .tile .tw,.knc[data-sitefont="figtree"] .pmprice b,.knc[data-sitefont="figtree"] .bprice,.knc[data-sitefont="figtree"] .typerow .demo-d{font-family:'Figtree',system-ui,sans-serif;font-weight:600;letter-spacing:-.015em;font-variation-settings:normal}
.knc[data-sitefont="mulish"]{font-family:'Mulish',system-ui,sans-serif}
.knc[data-sitefont="mulish"] h1,.knc[data-sitefont="mulish"] h2,.knc[data-sitefont="mulish"] h3,.knc[data-sitefont="mulish"] .tile .tw,.knc[data-sitefont="mulish"] .pmprice b,.knc[data-sitefont="mulish"] .bprice,.knc[data-sitefont="mulish"] .typerow .demo-d{font-family:'Mulish',system-ui,sans-serif;font-weight:700;letter-spacing:-.01em;font-variation-settings:normal}
.knc[data-sitefont="manrope"]{font-family:'Manrope',system-ui,sans-serif}
.knc[data-sitefont="manrope"] h1,.knc[data-sitefont="manrope"] h2,.knc[data-sitefont="manrope"] h3,.knc[data-sitefont="manrope"] .tile .tw,.knc[data-sitefont="manrope"] .pmprice b,.knc[data-sitefont="manrope"] .bprice,.knc[data-sitefont="manrope"] .typerow .demo-d{font-family:'Manrope',system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;font-variation-settings:normal}
.knc[data-sitefont="plusjakarta"]{font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.knc[data-sitefont="plusjakarta"] h1,.knc[data-sitefont="plusjakarta"] h2,.knc[data-sitefont="plusjakarta"] h3,.knc[data-sitefont="plusjakarta"] .tile .tw,.knc[data-sitefont="plusjakarta"] .pmprice b,.knc[data-sitefont="plusjakarta"] .bprice,.knc[data-sitefont="plusjakarta"] .typerow .demo-d{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:700;letter-spacing:-.015em;font-variation-settings:normal}
.knc[data-sitefont="urbanist"]{font-family:'Urbanist',system-ui,sans-serif}
.knc[data-sitefont="urbanist"] h1,.knc[data-sitefont="urbanist"] h2,.knc[data-sitefont="urbanist"] h3,.knc[data-sitefont="urbanist"] .tile .tw,.knc[data-sitefont="urbanist"] .pmprice b,.knc[data-sitefont="urbanist"] .bprice,.knc[data-sitefont="urbanist"] .typerow .demo-d{font-family:'Urbanist',system-ui,sans-serif;font-weight:700;letter-spacing:-.01em;font-variation-settings:normal}
.knc[data-sitefont="fraunces"] h1,.knc[data-sitefont="fraunces"] h2,.knc[data-sitefont="fraunces"] h3,.knc[data-sitefont="fraunces"] .tile .tw,.knc[data-sitefont="fraunces"] .pmprice b,.knc[data-sitefont="fraunces"] .bprice,.knc[data-sitefont="fraunces"] .typerow .demo-d{font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 100,'WONK' 0;font-weight:560;letter-spacing:normal}
.knc[data-sitefont="fraunces"]{font-family:'Mulish',system-ui,sans-serif}
.knc[data-sitefont="youngserif"] h1,.knc[data-sitefont="youngserif"] h2,.knc[data-sitefont="youngserif"] h3,.knc[data-sitefont="youngserif"] .tile .tw,.knc[data-sitefont="youngserif"] .pmprice b,.knc[data-sitefont="youngserif"] .bprice,.knc[data-sitefont="youngserif"] .typerow .demo-d{font-family:'Young Serif',Georgia,serif;font-weight:400;letter-spacing:normal;font-variation-settings:normal}
.knc[data-sitefont="youngserif"]{font-family:'Karla',system-ui,sans-serif}
.knc[data-sitefont="youngserif"] .hero h1{font-size:clamp(40px,5.4vw,68px)}
.knc[data-sitefont="breeserif"] h1,.knc[data-sitefont="breeserif"] h2,.knc[data-sitefont="breeserif"] h3,.knc[data-sitefont="breeserif"] .tile .tw,.knc[data-sitefont="breeserif"] .pmprice b,.knc[data-sitefont="breeserif"] .bprice,.knc[data-sitefont="breeserif"] .typerow .demo-d{font-family:'Bree Serif',Georgia,serif;font-weight:400;letter-spacing:normal;font-variation-settings:normal}
.knc[data-sitefont="breeserif"]{font-family:'Karla',system-ui,sans-serif}
.knc[data-sitefont="breeserif"] .hero h1{font-size:clamp(40px,5.4vw,68px)}
.knc[data-sitefont="zillaslab"] h1,.knc[data-sitefont="zillaslab"] h2,.knc[data-sitefont="zillaslab"] h3,.knc[data-sitefont="zillaslab"] .tile .tw,.knc[data-sitefont="zillaslab"] .pmprice b,.knc[data-sitefont="zillaslab"] .bprice,.knc[data-sitefont="zillaslab"] .typerow .demo-d{font-family:'Zilla Slab',Georgia,serif;font-weight:600;letter-spacing:normal;font-variation-settings:normal}
.knc[data-sitefont="zillaslab"]{font-family:'Mulish',system-ui,sans-serif}
.knc[data-sitefont="baloo"] h1,.knc[data-sitefont="baloo"] h2,.knc[data-sitefont="baloo"] h3,.knc[data-sitefont="baloo"] .tile .tw,.knc[data-sitefont="baloo"] .pmprice b,.knc[data-sitefont="baloo"] .bprice,.knc[data-sitefont="baloo"] .typerow .demo-d{font-family:'Baloo 2',system-ui,sans-serif;font-weight:700;letter-spacing:normal;font-variation-settings:normal}
.knc[data-sitefont="baloo"]{font-family:'Nunito',system-ui,sans-serif}
.knc[data-sitefont="baloo"] .hero h1{font-size:clamp(42px,5.6vw,72px)}
/* ===== logoletter-opties (winnen van palet en sitefont voor het woordmerk) ===== */
.knc[data-logofont="fraunces"] .brand .wm,.knc[data-logofont="fraunces"] .fm-brand,.knc[data-logofont="fraunces"] .wm-preview{font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 100,'WONK' 0;font-weight:600}
.knc[data-logofont="youngserif"] .brand .wm,.knc[data-logofont="youngserif"] .fm-brand,.knc[data-logofont="youngserif"] .wm-preview{font-family:'Young Serif',Georgia,serif;font-weight:400;font-variation-settings:normal}
.knc[data-logofont="breeserif"] .brand .wm,.knc[data-logofont="breeserif"] .fm-brand,.knc[data-logofont="breeserif"] .wm-preview{font-family:'Bree Serif',Georgia,serif;font-weight:400;font-variation-settings:normal}
.knc[data-logofont="zillaslab"] .brand .wm,.knc[data-logofont="zillaslab"] .fm-brand,.knc[data-logofont="zillaslab"] .wm-preview{font-family:'Zilla Slab',Georgia,serif;font-weight:600;font-variation-settings:normal}
.knc[data-logofont="creteround"] .brand .wm,.knc[data-logofont="creteround"] .fm-brand,.knc[data-logofont="creteround"] .wm-preview{font-family:'Crete Round',Georgia,serif;font-weight:400;font-variation-settings:normal}
.knc[data-logofont="lora"] .brand .wm,.knc[data-logofont="lora"] .fm-brand,.knc[data-logofont="lora"] .wm-preview{font-family:'Lora',Georgia,serif;font-weight:600;font-variation-settings:normal}
.knc[data-logofont="bitter"] .brand .wm,.knc[data-logofont="bitter"] .fm-brand,.knc[data-logofont="bitter"] .wm-preview{font-family:'Bitter',Georgia,serif;font-weight:600;font-variation-settings:normal}
.knc[data-logofont="dmserif"] .brand .wm,.knc[data-logofont="dmserif"] .fm-brand,.knc[data-logofont="dmserif"] .wm-preview{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-variation-settings:normal}
.knc[data-logofont="solway"] .brand .wm,.knc[data-logofont="solway"] .fm-brand,.knc[data-logofont="solway"] .wm-preview{font-family:'Solway',Georgia,serif;font-weight:500;font-variation-settings:normal}
.knc[data-logofont="quicksand"] .brand .wm,.knc[data-logofont="quicksand"] .fm-brand,.knc[data-logofont="quicksand"] .wm-preview{font-family:'Quicksand',system-ui,sans-serif;font-weight:700;font-variation-settings:normal}

/* ============================================================
   11. STYLEGUIDE-KIEZERS EN KNOPKLEUREN
   ------------------------------------------------------------
   De staart van de homepage-bron, in dezelfde volgorde. De
   kiezertegels horen bij de styleguide onderaan de mockup en gaan
   er in stap 3 uit; de knopkleuropties (data-btnkleur) blijven.
   ============================================================ */
/* ===== kiezer-UI ===== */
.knc .kiezer .gekozen{outline:2.5px solid var(--mosterd);outline-offset:2px}
.knc .palkeuze{display:flex;gap:14px;flex-wrap:wrap}
.knc .paltegel{cursor:pointer;background:var(--wit);border-radius:12px;padding:12px;box-shadow:var(--sh-sm);text-align:center}
.knc .paltegel .strip{display:flex;gap:4px}
.knc .paltegel .strip i{width:26px;height:38px;border-radius:6px;display:block;border:1px solid rgba(0,0,0,.08)}
.knc .paltegel small{display:block;margin-top:8px;font-size:12px;font-weight:700;color:var(--muted)}
.knc .merkkeuze{display:flex;gap:12px;flex-wrap:wrap}
.knc .merktegel{cursor:pointer;background:var(--wit);border-radius:12px;padding:10px;box-shadow:var(--sh-sm);text-align:center}
.knc .merktegel small{display:block;margin-top:4px;font-size:11.5px;font-weight:700;color:var(--muted)}
.knc .wm-preview{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:clamp(34px,4vw,46px);color:var(--pruim);line-height:1.2;margin:6px 0 18px}
.knc .fopt{cursor:pointer}
.knc .swb{display:none}
.knc[data-palet="linnen"] .swb-linnen,.knc[data-palet="nachtblauw"] .swb-nachtblauw,.knc[data-palet="oker"] .swb-oker{display:grid}
/* ===== knopkleur-opties (per palet: accent / diep / donker) ===== */
.knc .bkchip{display:block;width:38px;height:38px;border-radius:11px;border:1px solid rgba(0,0,0,.1);margin:0 auto}
.knc[data-palet="linnen"] .bkchip.accent{background:#8F4A3D}
.knc[data-palet="linnen"] .bkchip.diep{background:#A96F78}
.knc[data-palet="linnen"] .bkchip.donker{background:#29231F}
.knc[data-palet="linnen"][data-btnkleur="diep"]{--mosterd:#A96F78;--mosterdd:#8F5A63;--btntxt:#F7F2EA}
.knc[data-palet="linnen"][data-btnkleur="donker"]{--mosterd:#29231F;--mosterdd:#171310;--btntxt:#F7F2EA}
.knc[data-palet="nachtblauw"] .bkchip.accent{background:#A98C64}
.knc[data-palet="nachtblauw"] .bkchip.diep{background:#3A4459}
.knc[data-palet="nachtblauw"] .bkchip.donker{background:#232A36}
.knc[data-palet="nachtblauw"][data-btnkleur="diep"]{--mosterd:#3A4459;--mosterdd:#2B3244;--btntxt:#F4F1EA}
.knc[data-palet="nachtblauw"][data-btnkleur="donker"]{--mosterd:#232A36;--mosterdd:#161B24;--btntxt:#F4F1EA}
.knc[data-palet="oker"] .bkchip.accent{background:#D9A441}
.knc[data-palet="oker"] .bkchip.diep{background:#3E372C}
.knc[data-palet="oker"] .bkchip.donker{background:#241D14}
.knc[data-palet="oker"][data-btnkleur="diep"]{--mosterd:#3E372C;--mosterdd:#2C261D;--btntxt:#F6F0E4}
.knc[data-palet="oker"][data-btnkleur="donker"]{--mosterd:#241D14;--mosterdd:#16110B;--btntxt:#F6F0E4}
/* BTNKLEUR:EXTRA */

/* ============================================================
   12. Componentlaag (.knus-*)
   ------------------------------------------------------------
   Prefix .knus- zodat niets van GeneratePress of WooCommerce kan
   botsen. Twee soorten:

   AANGESLOTEN - de klasse staat hierboven al in de selectorlijst
   van het recept zelf, dus zetten op een element werkt meteen:
     .knus-btn        gouden pil       (sectie 5.10 en 6)
     .knus-btn-sec    outline-pil      (sectie 5.19 en 6)
     .knus-label      klein kapitaal-label in oker (sectie 6)

   KLAAR OM AAN TE SLUITEN - hieronder gedefinieerd, nog nergens in
   de html gezet. Zodra stap 3 de markup aanraakt kan de bestaande
   losse opmaak eruit:
     .knus-card       witte kaart (nu: .knussie-toc, blockquote,
                      details, .knussie-modelformulier, .bcard,
                      .rcard, .ppinfokaart, .mtkaart)
     .knus-proof      bewijsband van vóór N2. De homepage gebruikt sinds
                      blok C stap 5 .proofrij (beeldkolom + feitenladder)
                      en niet meer .proofband; deze component staat er nog
                      als losse bouwsteen voor een pagina die hem wil.
     .knus-vlak       zacht tussenvlak (nu: .knussie-notitie, aside,
                      .mtslot, .spechead)
   ============================================================ */
.knus-card{
  background:var(--kn-wit);
  border:1px solid var(--kn-lijn);
  border-radius:var(--kn-radius);
  box-shadow:var(--kn-sh-sm);
  padding:var(--kn-sp-7) var(--kn-sp-7) calc(var(--kn-sp-7) + var(--kn-sp-1));
}
.knus-vlak{
  background:var(--kn-oat);
  border-radius:var(--kn-radius-s);
  padding:var(--kn-sp-6) var(--kn-sp-7);
  font-size:var(--kn-tekst-l);
}
.knus-proof{
  max-width:var(--kn-breed);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,40fr) minmax(0,60fr);
  column-gap:clamp(30px,4.6vw,64px);
  align-items:center;
}
.knus-proof.knus-proof-om{grid-template-columns:minmax(0,60fr) minmax(0,40fr)}
.knus-proof.knus-proof-om > :first-child{order:2}
@media (max-width:900px){
  .knus-proof,.knus-proof.knus-proof-om{grid-template-columns:minmax(0,1fr);row-gap:clamp(24px,5vw,32px)}
  .knus-proof.knus-proof-om > :first-child{order:0}
}

/* ============================================================
   RONDE 25 - FORMULIERKNOPPEN
   ------------------------------------------------------------
   De bundelknop en de Knus Fam-knoppen waren <a>-elementen die
   niets deden. Het zijn nu echte submit-knoppen in een
   formulier. Twee dingen moesten daarvoor bij:

   - het formulier om de bundelknop mag de opmaak van de kaart
     niet veranderen, vandaar display:contents;
   - een <button> erft geen cursor en heeft op iOS een eigen
     uiterlijk, dus die twee zetten we recht. De maten en
     kleuren komen gewoon uit .btn hierboven.

   Verder is er niets aan de knopstijl veranderd.
   ============================================================ */
.knc .bundelform{display:contents}
.knc button.btn{cursor:pointer;-webkit-appearance:none;appearance:none}
.knc button.btn.uit{cursor:not-allowed}
.knc .kfweb{position:absolute !important;left:-9999px !important;height:0;width:0;overflow:hidden}

/* De bundelknop staat in .bbtn op display:block (volle breedte). Daardoor viel
   de gap van .btn-mand weg en plakte het mandje-icoon tegen de tekst. Deze regel
   zet de flex-uitlijning terug zonder aan de breedte of de padding te komen. */
.knc .bbtn .btn-mand{display:flex;align-items:center;justify-content:center;gap:9px}

/* ============================================================
   30-08 - WINKELMAND EN AFREKENEN PASSEN NIET OP MOBIEL
   ------------------------------------------------------------
   Gevonden bij de eerste echte test met een gevulde mand.
   GeneratePress geeft een alignwide-blok een uitloop van 30 px
   per kant (margin-left:-30px plus max-width:calc(100% + 60px)),
   maar main.site-main heeft op mobiel maar 18 px padding. Het
   winkelmandblok werd daardoor 414 px breed in een venster van
   390: 12 px buiten beeld rechts. En omdat de bedragen rechts
   uitgelijnd staan, vielen JUIST die eraf - je zag wel
   "Subtotaal" maar niet "EUR 396,00".
   Gemeten voor de fix: blok b=414 L=-12 R=402 en scrollWidth
   402 bij een viewport van 390. Hetzelfde beeld op 480 en 600.
   Hieronder blijft het blok binnen de kolom. De uitloop op
   desktop blijft ongemoeid; daar is de marge ruim genoeg.
   ============================================================ */
@media (max-width:768px){
  .entry-content .wp-block-woocommerce-cart,
  .entry-content .wp-block-woocommerce-checkout{
    margin-left:0;
    margin-right:0;
    width:auto;
    max-width:100%;
  }
}

/* ============================================================
   02-09 - PRE-ORDERSTAND (knussie-preorder.php)
   ------------------------------------------------------------
   Banner bovenaan elke pagina zolang knussie_modus op preorder
   staat (antraciet met cream, accent in honing; was honing, Robbin
   02-09 laat), het stempel naast de prijs met de launchprijs ernaast
   (niet doorgestreept), en de losse variant op /pre-order/. In
   launchstand wordt niets hiervan gerenderd.
   ============================================================ */
.kn-preorderbanner{background:var(--kn-donker);color:var(--kn-cream);text-align:center;font-family:'Karla',system-ui,sans-serif;font-size:15.5px;line-height:1.45;letter-spacing:.01em;padding:13px 18px}
.kn-preorderbanner a{color:inherit;text-decoration:none;display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 10px;max-width:1128px}
.kn-preorderbanner b{font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:14px;color:var(--kn-knop)}
.kn-preorderbanner .kn-presep{margin:0 6px;opacity:.55}
.kn-preorderbanner .kn-prelink{font-weight:700;text-decoration:underline;text-decoration-color:rgba(239,237,232,.45);text-underline-offset:3px;white-space:nowrap}
.kn-preorderbanner a:focus-visible .kn-prelink{text-decoration-color:var(--kn-knop)}@media (hover:hover){.kn-preorderbanner a:hover .kn-prelink{text-decoration-color:var(--kn-knop)}}
.kn-preorderbanner a:focus-visible{outline:2.5px solid var(--kn-knop);outline-offset:3px;border-radius:4px}
@media (max-width:700px){.kn-preorderbanner{font-size:14px;padding:11px 14px}.kn-preorderbanner .kn-presep{margin:0 4px}}
.kn-prestempel{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;background:var(--kn-knop);color:var(--kn-donker);border-radius:8px;padding:7px 13px 8px;margin:0 6px 0 4px;transform:rotate(-3deg);box-shadow:0 10px 18px -12px rgba(0,0,0,.55);font-family:'Karla',system-ui,sans-serif;line-height:1.1;text-align:center}
.kn-prestempel .kn-prestempel-kop{font-weight:800;font-size:15px;letter-spacing:.12em;text-transform:uppercase}
.kn-prestempel .kn-prestempel-sub{font-weight:700;font-size:11px;letter-spacing:.04em;margin-top:3px;white-space:nowrap}
.kn-launchprijs{display:inline-block;vertical-align:middle;margin-left:8px;font-family:'Karla',system-ui,sans-serif;font-size:14px;color:var(--kn-muted-diep)}
.kn-launchprijs .kn-launchbedrag{font-weight:700;color:var(--kn-tekst)}
.kn-prestempel-los{margin:0 0 22px}
.kn-prestempel-los .kn-prestempel{margin-left:6px;transform:rotate(-2deg)}
@media (max-width:700px){.kn-prestempel{padding:6px 11px 7px}.kn-prestempel .kn-prestempel-kop{font-size:13.5px}.kn-launchprijs{display:block;margin:8px 0 0}}
/* Hero in pre-orderstand: "Knussie bijna binnen." is langer dan "Knussie binnen."
   en brak op breed en op smal in tweeen. De tweede regel blijft nu een regel en
   de kop gaat in deze stand iets kleiner. Gemeten met Young Serif (02-09): de
   regel is 10,8 keer de lettergrootte breed; de kolom is 620 px op breed, 586 op
   1024, 437 op 768, 431 op 600 en 327 op 390. Daaruit: maximaal 56 px op breed,
   39 px rond 700 en 29 px op 390. Alleen met body.kn-preorder, dus de
   launchstand (68 px, "Knussie binnen.") verandert niet. */
body.kn-preorder .knc .hero h1 .heroregel{white-space:nowrap}
/* V17 (18-09): onder 400 px past "Knussie(tm) bijna binnen." niet op een regel en
   clipt .hero (overflow:hidden) de staart. Daar mag hij afbreken. */
@media (max-width:400px){.knc .heroregel{white-space:normal}}
body.kn-preorder .knc[data-sitefont="youngserif"] .hero h1{font-size:clamp(36px,5.2vw,56px)}
@media (max-width:700px){body.kn-preorder .knc[data-sitefont="youngserif"] .hero h1{font-size:clamp(29px,7.2vw,39px)}}
/* ============================================================
   02-09 laat, RONDE 4 - PRIJSREGEL, LAUNCHPRIJS, LABELS
   ------------------------------------------------------------
   Robbin zag "€" op een eigen regel boven "69,99": de prijs
   werd in de flexrij naast het stempel platgedrukt. De rij mag
   nu omslaan en het bedrag zelf nooit meer. De launchprijs naast
   het stempel is groter. De sectielabels ("In het echt") en de
   subregels eronder ("Vier dingen die ...") waren te klein naast
   de koppen; 12,5 wordt 14 en 16,5 wordt 19.
   ============================================================ */
.knc .pmprice{flex-wrap:wrap}
.knc .pmprice b{white-space:nowrap}
.kn-launchprijs{white-space:nowrap;font-size:16.5px}
.kn-launchprijs .kn-launchbedrag{font-size:19px}
.knc .lbl{font-size:14px;letter-spacing:.16em}
.knc .proofsub,.knc .collsub,.knc .wsub{font-size:19px}
/* ============================================================
   02-09 laat - PLAKKENDE BANNER (verzoek Robbin)
   ------------------------------------------------------------
   De pre-orderbanner is een direct kind van body (wp_body_open)
   en plakt bovenaan bij het scrollen. De plugin zet de hoogte
   als --kn-prebanner-h op html; daarmee blijft de plakkende
   productkolom (46px) eronder en landen ankerlinks niet achter
   de banner. In launchstand bestaat de banner niet en is de
   variabele leeg, dus dan verandert er niets. Onder 700 px
   valt het levervenster weg zodat de banner een regel blijft.
   ============================================================ */
.kn-preorderbanner{position:sticky;top:0;z-index:85;box-shadow:0 6px 16px -12px rgba(0,0,0,.45)}
html{scroll-padding-top:var(--kn-prebanner-h,0px)}
.knc:where(.pdp2) .ppkolom{top:calc(46px + var(--kn-prebanner-h,0px))}
@media (max-width:700px){.kn-preorderbanner{font-size:13.5px;padding:9px 12px}.kn-preorderbanner .kn-predeel-levering,.kn-preorderbanner .kn-presep-levering,.kn-preorderbanner .kn-prelink{display:none}}
/* ============================================================
   02-09 laat - TUSSENSTAND "OPENT BINNENKORT" (knussie-preorder.php)
   ------------------------------------------------------------
   Zolang knussie_preorder_betaling op uit staat (site publiek voor
   de Mollie-beoordeling, betaling nog niet goedgekeurd) staat op
   /pre-order/ het reserveerformulier. Het erft de opmaak van het
   contactformulier (invoervelden, gouden knop) via de klasse
   knussie-contact; hieronder alleen de indeling op een rij.
   ============================================================ */
.knussie-reserveer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:10px;align-items:center;margin:8px 0 6px}
.knussie-reserveer label.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.knussie-reserveer .webveld{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.knussie-reserveer button{white-space:nowrap}
.knussie-reserveer-noot{font-size:14px;color:var(--kn-muted);margin:0 0 26px}
.kn-lijstmelding{border-left:4px solid var(--kn-knop);background:var(--kn-oat);padding:12px 16px;border-radius:0 10px 10px 0;margin:0 0 22px}
@media (max-width:700px){.knussie-reserveer{grid-template-columns:1fr}}
/* 02-09 laat: de Knus Fam-popup blijft uit in de pre-orderstand (Robbin);
   de plugin zet daarnaast sessionStorage kn-popup-gezien in de kop. */
body.kn-preorder #kn-popup{display:none!important}

/* N5 punt 15 - het landveld op de kassa. Zolang er maar EEN verkoop- en verzendland is, biedt
   WooCommerce een keuzeveld met een keuze aan: de klant moet een handeling doen die niets
   oplevert. WooCommerce vult het veld zelf al met NL (woocommerce_default_country) en het is
   niet verplicht, dus het kan weg zonder dat er iets leegs achterblijft - nagemeten in een
   echte browser op 1440 en 390, met een gevulde mand.
   WEG MET DEZE REGEL zodra Belgie of Duitsland aangaat; dan is het weer een echte keuze. */
.wc-block-components-address-form__country{display:none}
/* ===== A1 en A2 (13-09-2026): de Duo-badge in twee regels op mobiel, het label onder de kaartprijs ===== */
@media (max-width:820px){
  .knc:where(.pdp2) .bdlbadge.bdl2r{white-space:normal;max-width:140px;text-align:center;line-height:1.2}
}
.kn-kaartlabel{display:block;margin-top:4px;font-family:'Karla',system-ui,sans-serif;font-size:.78em;letter-spacing:.02em;color:var(--kn-muted-diep)}

/* ===== DE VISUELE RONDE, deploy 1 (14-09-2026, Besluiten_Visueel_20260914.md) ===== */
/* V1: knoppen onder 700 px circa 50 px in plaats van 58. Alleen de token; .bbtn, .stickycta, .kfform hebben eigen maten. */
@media (max-width:700px){.knc .btn{padding:13px 28px;font-size:16px}.knc .btn-ontdek{padding:12px 24px;font-size:14.5px}.knc:where(.pdp2) .ppkolom .btn-mand{padding:13px 28px;font-size:16px}}
/* V5: de maat als stille regel onder de prijs, ook op de homepage (208 had .btwregel al). */
.knc:where(:not(.pdp2)) .btwregel{margin:-6px 0 14px;font-size:12.5px;color:var(--muted)}
/* V8 stap 1: het lege beschrijvingsvak onder de gekozen betaaloptie weg. WooCommerce rendert het altijd; Mollie vult
   het alleen bij Kaart (de kaartvelden). :has() raakt dus alleen het lege vak. Gemeten 14-09: <div class="mollie-payment-method-container"><div></div></div>. */
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-content:has(> .mollie-payment-method-container > div:empty:only-child){display:none}
/* V11: kopiconen iets lichter naast 15 px menutekst; het klikvlak blijft 44. */
@media (min-width:900px){.knc .hicon svg{width:22px;height:22px}}
/* V-b (14-09, teruggedraaid na de nameting): een badge van 110 px wrapt naar drie regels en maakt de Duo-rij op 390 juist hoger (117 tegen 81). De badge blijft 140. */
/* V-c: de pre-orderbalk op tablet zonder het leverdeel; onder 700 valt dat al weg. */
@media (min-width:701px) and (max-width:900px){.kn-preorderbanner .kn-predeel-levering,.kn-preorderbanner .kn-presep-levering{display:none}}
/* V2 (besluit Robbin, volledig a+b+c): vier tegels in een 2 x 2-raster met een groot kleurvlak en de naam eronder;
   de galerij naar een beeld (cf3, wisselt mee met de kleur); onder 700 px geen galerij. Zodra de kleurfoto's er zijn
   komt de foto in .cthumb op de plek van het kleurvlak - geen tweede verbouwing. */
.knc:where(:not(.pdp2))[data-collectie="magazine"] .collkleuren{display:grid;grid-template-columns:1fr 1fr;gap:14px;grid-area:kleuren}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .collkaarten,.knc:where(:not(.pdp2))[data-collectie="magazine"] .collchips{display:contents;border-top:0}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .k1{grid-column:auto;grid-row:auto}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .ckaartje{flex-direction:column;align-items:stretch;gap:0;padding:0;border:1px solid rgba(0,0,0,.08);border-radius:14px;background:var(--wit);overflow:hidden;box-shadow:var(--sh-sm)}
@media (hover:hover){.knc:where(:not(.pdp2))[data-collectie="magazine"] .ckaartje:hover{transform:translateY(-3px);box-shadow:var(--sh-md);background:var(--wit)}}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .cthumb,.knc:where(:not(.pdp2))[data-collectie="magazine"] .k1 .cthumb{display:block;width:100%;height:auto;aspect-ratio:3/2;min-height:0;border-radius:0;flex:none;background:var(--c,var(--oat))}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .cinfo{padding:12px 14px 14px}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .cf1,.knc:where(:not(.pdp2))[data-collectie="magazine"] .cf2{display:none}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .cgalerij{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
.knc:where(:not(.pdp2))[data-collectie="magazine"] .cf3{grid-column:1;grid-row:1;height:auto;aspect-ratio:4/5;max-height:560px;position:relative}
@media (max-width:900px){.knc:where(:not(.pdp2))[data-collectie="magazine"] .cf3{aspect-ratio:16/10;max-height:420px}}
@media (max-width:700px){.knc:where(:not(.pdp2))[data-collectie="magazine"] .cgalerij{display:none}}
@media (min-width:1128px){.knc:where(:not(.pdp2))[data-collectie="magazine"] .cf3{border-radius:16px 0 0 16px}}

/* ===== BLOK 2 (14-09-2026): kop en voet uit knussie-kader.php, in een .knc-wrapper. 208 had in de pdp2-variant een voet
   met 130 px onderrand voor de plakkende koopbalk; de wrapper draagt daar .kn-koopbalk. ===== */
.kn-kader-voet.kn-koopbalk .footmock{padding-bottom:130px}
/* 208 op mobiel (reviewer 4): de kop hield in de pdp2-variant gap 8 (regel 3001, onder 680), en de toplink zou op de
   plakkende koopbalk staan - daar dus geen toplink. */
@media (max-width:680px){.kn-kader.kn-koopbalk .sitehead .in{gap:8px}.kn-kader.kn-koopbalk .toplink{display:none}}
/* K6 (16-09): de menuknop onder 680 px (sinds 26-09 tot en met 740 px, Slaapregister 8.24). Daarboven verborgen; eronder een tikdoel van 44 px links van de iconen, en het
   menu klapt onder de kop open als lijst. Het menu zelf (.nav) staat onder 680 al op display:none (regel 2298). */
.kn-kader .menuknop{display:none}
@media (max-width:740px){
  .kn-kader .sitehead{position:relative}
  .kn-kader .menuknop{display:inline-grid;place-items:center;width:44px;height:44px;border:0;background:none;border-radius:999px;color:var(--pruim);cursor:pointer;margin-left:auto}
  @media (hover:hover){.kn-kader .menuknop:hover{background:var(--oat)}}
  .kn-kader .menuknop:focus-visible{outline:2.5px solid var(--kn-goudd);outline-offset:2px}
  .kn-kader .nav.open{display:flex;flex-direction:column;gap:2px;position:absolute;left:0;right:0;top:100%;background:var(--wit);border-bottom:1px solid rgba(0,0,0,.07);padding:8px 14px 14px;z-index:70;box-shadow:var(--sh-md)}
  .kn-kader .nav.open a{padding:12px 14px;font-size:16px}
}

/* ===== De stille paden ===== */
/* De meldingen van WooCommerce en de eigen plugins, direct onder de kop */
.knc.kn-meldingen{padding:16px 24px 0}
.knc.kn-meldingen .in{max-width:1100px;margin:0 auto}
.knc.kn-meldingen .kn-melding{margin:0 0 10px;padding:14px 18px;border-radius:var(--kn-radius-s,12px);background:#F7EEDC;border-left:4px solid var(--kn-goud,#D79C2F);color:var(--kn-tekst,#161719);font-size:var(--kn-tekst-m,15.5px);line-height:1.5}
.knc.kn-meldingen .kn-melding-error{background:#F8E7E2;border-left-color:#A5472F}
.knc.kn-meldingen .kn-melding a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.knc.kn-meldingen .kn-melding a.button{float:none;display:inline;margin:0 0 0 8px;padding:0;background:none;border:0}
/* Een kleur die op is: de stip doorgestreept, de tegel met "uitverkocht", de zin onder de koopknop */
.knc .dots .dot.op{position:relative;opacity:.5}
.knc .dots .dot.op::after{content:"";position:absolute;left:18%;right:18%;top:50%;height:2px;margin-top:-1px;background:var(--kn-donker,#0B0C0E);transform:rotate(-45deg);border-radius:2px;pointer-events:none}
.knc .ckaartje.op .cop{margin-left:6px;font-size:var(--kn-tekst-xs,12.5px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--kn-muted,#6B6A6A)}
.knc .kn-opregel{font-weight:700;color:var(--kn-tekst,#161719)}
.knc .kn-opregel:empty{display:none}
.knc .btn.btn-mand[aria-disabled="true"]{background:#E4E0D8;color:var(--kn-muted,#6B6A6A);box-shadow:none;transform:none;cursor:not-allowed}@media (hover:hover){.knc .btn.btn-mand[aria-disabled="true"]:hover{background:#E4E0D8;color:var(--kn-muted,#6B6A6A);box-shadow:none;transform:none;cursor:not-allowed}}
/* De eigen 404: drie routes op de plek van het zoekveld */
body.error404 .kn-404-routes{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
body.error404 .kn-404-routes a{display:inline-flex;align-items:center;min-height:44px;padding:0 26px;border:1.5px solid var(--kn-donker,#0B0C0E);border-radius:999px;color:var(--kn-donker,#0B0C0E);font-weight:700;text-decoration:none}
body.error404 .kn-404-routes a:focus-visible{background:var(--kn-donker,#0B0C0E);color:var(--kn-cream,#EFEDE8)}@media (hover:hover){body.error404 .kn-404-routes a:hover{background:var(--kn-donker,#0B0C0E);color:var(--kn-cream,#EFEDE8)}}

/* Knus Fam: een zichtbaar label boven elk veld, in de voet en in de pop-up */
.knc .kfform{align-items:flex-end}
.knc .kfform .kfveld{flex:1;min-width:170px;display:flex;flex-direction:column;gap:4px;text-align:left}
.knc .fmfam .kfform .kfveld{min-width:150px}
.knc .kfveld input{flex:none;width:100%;min-width:0}
.knc .kfp-tekst .kfveld{display:flex;flex-direction:column;gap:4px;text-align:left}
.knc .kflabel{font-size:12.5px;line-height:1.3;font-weight:600;color:var(--muted);padding-left:17px}
.knc .kfp-tekst .kflabel{padding-left:19px}
.knc .kfp-tekst form{gap:16px}
/* een uitverkochte bundelstip: de doorhaalstreep staat op hetzelfde ::after als het vergrote tikvlak; de breedte van het tikvlak eruit */
.knc .bkleur .dot.op::after{width:auto}
@media (max-width:600px){
  .knc .fmfam .kfform .kfveld{flex:1 1 100%}
}

/* De collectie op de homepage: per kleur een fototegel (de stoel in die kleur), vier naast elkaar, op mobiel twee bij twee */
.knc:where(:not(.pdp2)) .kcoll{background:var(--wit)}
.knc:where(:not(.pdp2)) .kcoll-in{max-width:1080px;margin:0 auto}
.knc:where(:not(.pdp2)) .kcoll-kop{max-width:640px;margin:0 auto clamp(28px,4vw,44px);text-align:center}
.knc:where(:not(.pdp2)) .kcoll-kop h2{text-align:center}
.knc:where(:not(.pdp2)) .kcoll-sub{margin:12px 0 0;font-size:16.5px;color:var(--muted)}
.knc:where(:not(.pdp2)) .kcoll-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);margin:0;padding:0;list-style:none}
.knc:where(:not(.pdp2)) .kcoll-grid li{margin:0;padding:0}
.knc:where(:not(.pdp2)) .kcoll-kaart{display:block;color:var(--pruim);text-decoration:none}
.knc:where(:not(.pdp2)) .kcoll-foto{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--kn-radius);background:var(--c,var(--oat));box-shadow:var(--kn-sh-md)}
.knc:where(:not(.pdp2)) .kcoll-foto picture{display:contents}
/* strakker ingesneden (schaal 1.15, ankerpunt op 85 procent: links gaat er bijna 13 procent af, rechts 2) - anders steekt er een takje de linkerrand in */
.knc:where(:not(.pdp2)) .kcoll-foto img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.15);transform-origin:85% calc(50% / 1.1);transition:transform .6s ease}
@media (hover:hover){.knc:where(:not(.pdp2)) .kcoll-kaart:hover .kcoll-foto img{transform:scale(1.18)}}
.knc:where(:not(.pdp2)) .kcoll-naam{display:block;margin-top:12px;font-size:16.5px;font-weight:700;line-height:1.3}
.knc:where(:not(.pdp2)) .kcoll-op{position:absolute;left:10px;top:10px;padding:3px 10px;border-radius:999px;background:rgba(11,12,14,.74);color:var(--kn-wit);font-size:12px;font-weight:700}
.knc:where(:not(.pdp2)) .kcoll-kaart.op .kcoll-foto img{filter:grayscale(.4);opacity:.82}
.knc:where(:not(.pdp2)) .kcoll .kcoll-noot{max-width:560px;margin:18px auto 0;text-align:center;text-wrap:balance}
.knc:where(:not(.pdp2)) .kcoll-voet{margin-top:clamp(24px,3.2vw,34px);text-align:center}
@media (max-width:700px){
  .knc:where(:not(.pdp2)) .kcoll-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:26px}
  .knc:where(:not(.pdp2)) .kcoll-naam{margin-top:9px;font-size:15px}
}
/* Onder de vier feiten: een knop naar de productpagina (de omlijnde tweede knop; de keuzeroute in de collectie is de honingknop) */
.knc:where(:not(.pdp2)) .proofcta{margin:clamp(22px,3vw,30px) 0 0}
/* 208: in de koopkolom, na de trustregels, een link naar de bundels op dezelfde pagina */
.knc:where(.pdp2) .ppkolom .ppbundellink{margin-top:6px}
.knc:where(.pdp2) .ppgal .beeldnoot{text-wrap:balance}
/* 208, alleen in de launchstand: de tweede knop onder de mandknop, meteen naar de kassa; omlijnd (.btn-sec), even hoog */
.knc:where(.pdp2) .ppkolom .btn-direct{display:flex;align-items:center;justify-content:center;width:100%;margin-top:14px;padding:14.5px 30px;font-size:17px;line-height:normal}
.knc:where(.pdp2) .ppkolom .btn-direct[aria-disabled="true"]{color:var(--kn-muted);border-color:var(--kn-lijn);pointer-events:none}
@media (max-width:700px){
  .knc:where(.pdp2) .ppkolom .btn-direct{padding:11.5px 28px;font-size:16px}
}

/* De vaste koopbalk op de productpagina: smal alleen de kleur (anders "Knussie - Donke...") */
@media (max-width:519px){
  .knc:where(.pdp2) .kb-info .kb-pre{display:none}
}

/* ===== Het AI-label (visuele ronde 2, blok A; besluit Robbin 26-09, TH_Output/Besluiten_Robbin.md 26-09) =====
   1. OP HET SCHERM: een css-label per vak, overal hetzelfde (variant ii-b): een pil van 18 px, "AI" in Karla 700 op 12 px,
      50% donker, 8 px uit de rechter- en onderrand van het VAK. Het staat op het vak en niet op het beeld, dus het blijft staan
      als een tegel inzoomt of als je bladert. Het vervangt het schermlabel van D7 (drie donkere banden) en van nakomer 5 (de hero
      op de telefoon). Op de hero hangt het 8 px boven de USP-band. Miniaturen (galerij, koopbalk) krijgen geen pil: het grote
      beeld ernaast draagt hem.
   2. IN HET BESTAND: elk paginabeeld in /sfeer-2026-09b/ heeft onderaan een band van floor(H/10) px met het ingebrande label
      (voor wie het bestand opslaat). Op het scherm is die band nooit te zien: het beeld staat in een element dat 110% van het vak
      hoog is, en de onderste 1/11 wordt weggeknipt. Waarom dat klopt, voor elke breedte:
      - het bestand is W x 1,1H en het element w x 1,1h, dus object-fit:cover schaalt met dezelfde factor als vroeger
        (max(w/W, h/H)) en het oude beeld (de bovenste H px) valt precies op het oude vak;
      - object-position y wordt y/1,1 (daarom staat overal calc(... / 1.1)): dan ligt het beeld op dezelfde plek als voorheen;
      - de band begint altijd op of onder de onderrand van het vak zolang object-position y <= 90,9%, ook als de positie niet is
        aangepast (een inline stijl uit javascript); clip-path knipt hem dan weg, ook in een vak dat zelf niet afknipt;
      - de band is floor(H/10) en niet round: afgerond naar beneden blijft het beeld op zijn minst het hele vak vullen.
      Een css-achtergrond krijgt dezelfde behandeling op het element dat de achtergrond draagt (bundels en cadeau).
      Wie hier een beeld toevoegt uit een andere map: het krijgt deze regel niet (de selector kijkt naar de map), en een beeld
      zonder band in een element van 110% laat onderaan 1/11 van de foto weg. Slaapregister 8.26. */
img[src*="/sfeer-2026-09b/"]{height:110% !important;clip-path:inset(0 0 calc(100% / 11) 0);object-position:50% calc(50% / 1.1)}
/* (de vakken met een eigen object-position, de zoom van de collectietegels en de twee achtergronden van bundels en cadeau zijn
   op hun eigen regel aangepast: overal staat daar nu calc(... / 1.1)) */
/* de pil; content twee keer: een browser zonder de alt-syntax ("AI" / "") houdt dan de eerste en toont het label toch */
.knc:where(:not(.pdp2)) .hero .uspband::before,
.knc:where(:not(.pdp2)) .kcoll-foto::after,
.knc:where(:not(.pdp2)) .pbfoto::after,
.knc:where(:not(.pdp2)) .kfp-foto::after,
.knc:where(:not(.pdp2)) .gift::after,
.knc:where(:not(.pdp2)) .bundles > .kn-ai::after,
.knc .kn-gal-venster::after,
.knc:where(.pdp2) .pd-sfeer::before,
.knc:where(.pdp2) .pd-zzfoto::after,
.knc:where(.pdp2) .bdlfoto::after,
.knbu-foto::after,
.knbv-team::after,
.knbv-foto::after,
.bp2 .kn-aivak::after,
.bp-slot2 .bp-slot-foto::after{content:"AI";content:"AI" / "";position:absolute;right:8px;bottom:8px;z-index:6;height:18px;width:auto;padding:0 6px;box-sizing:border-box;display:flex;align-items:center;font:700 12px/1 Karla,Arial,sans-serif;letter-spacing:.6px;color:#fff;background:rgba(11,12,14,.6);border-radius:2px;pointer-events:none;text-transform:none;white-space:nowrap}
.knc:where(:not(.pdp2)) .hero .uspband::before{bottom:calc(100% + 8px)}
.knc:where(:not(.pdp2)) .bundles > .kn-ai{position:absolute;inset:0;z-index:6;pointer-events:none}
.knbv-team{position:relative}
/* Slaapregister 8.24: tussen 681 en 740 px paste het menu niet naast het merk en de iconen (menu 423 px, samen circa 760), en
   stak het mandicoon tot 35 px buiten het venster. De menuknop staat daarom nu tot en met 740 px (de twee media queries van
   de knop en het menu hierboven, en de matchMedia in knussie-kader.php); dit is het menu op de productpagina, dat zijn eigen
   680-blok houdt voor de rest van de kop. */
@media (max-width:740px){.knc:where(.pdp2) .nav{display:none}}

/* ===== De productsectie: galerij + koopkolom, voor de homepage (#product, post 206) en de productpagina (#koopblok, 208).
   Visuele ronde 2, blok B (besluit Robbin 26-09: "zoals de voorproef"). Twee kolommen op desktop (galerij 58%), op mobiel de
   galerij boven het koopblok op volle breedte. Onder de kolommen geen stapel meer: drie infokaarten in een rij en de
   fabrikantregel als een gedempte regel. Markup en script: knussie-galerij.php ([knussie_galerij], [knussie_infokaarten]).
   Het AI-label op het venster staat bij de andere labels ("Het AI-label", .kn-gal-venster::after). ===== */
.knc .kn-koop{max-width:1200px;margin:0 auto;padding:0 clamp(16px,3vw,32px);display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:clamp(32px,4.5vw,64px);align-items:start}
.knc .kn-gal{position:relative;min-width:0}
.knc .kn-gal-venster{position:relative;border-radius:16px;overflow:hidden;background:var(--oat,#EFEDE8);box-shadow:var(--sh-md);aspect-ratio:5/6}
.knc .kn-gal-strook{display:flex;height:100%;margin:0;padding:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.knc .kn-gal-strook::-webkit-scrollbar{display:none}
.knc .kn-gal-strook:focus-visible{outline:none}
.knc .kn-gal-venster:has(.kn-gal-strook:focus-visible)::before{content:"";position:absolute;inset:0;z-index:5;border:3px solid var(--kn-goud,#D79C2F);border-radius:inherit;pointer-events:none} /* een eigen laag boven de dia's: een omlijning van de strook of het venster viel onder het scrollvak (tester 26-09) */
.knc .kn-gal-dia{flex:0 0 100%;height:100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.knc .kn-gal-dia img{display:block;width:100%;height:100%;object-fit:cover}
.knc .kn-gal-pijl{position:absolute;top:50%;z-index:2;width:44px;height:44px;margin-top:-22px;border:0;border-radius:50%;background:rgba(247,246,244,.92);color:var(--donker,#0B0C0E);box-shadow:0 4px 14px -6px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:opacity .2s ease,transform .2s ease}
.knc .kn-gal-pijl svg{flex:none} /* GeneratePress geeft elke button 20 px binnenmarge; dan bleef er 4 px over voor het pijltje */
@media (hover:hover){.knc .kn-gal-pijl:hover{transform:scale(1.06)}}
.knc .kn-gal-pijl:focus-visible{outline:2px solid var(--kn-goud,#D79C2F);outline-offset:2px}
.knc .kn-gal-pijl:focus,.knc .kn-gal-pijl:focus-visible{border-radius:50%}@media (hover:hover){.knc .kn-gal-pijl:hover{border-radius:50%}} /* GeneratePress maakte er bij focus een afgeronde rechthoek van */
.knc .kn-gal-pijl.vorige{left:12px}
.knc .kn-gal-pijl.volgende{right:12px}
.knc .kn-gal-pijl[disabled]{opacity:0;pointer-events:none}
.knc .kn-gal-duimen{display:flex;gap:10px;margin:8px 0 0;padding:6px;overflow-x:auto;scrollbar-width:none} /* 6 px ruimte: anders knipt de strook de focusring af */
.knc .kn-gal-duimen::-webkit-scrollbar{display:none}
.knc .kn-gal-duim{flex:0 0 76px;width:76px;height:76px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:var(--oat,#EFEDE8);cursor:pointer;opacity:.78;transition:opacity .2s ease,border-color .2s ease}
@media (hover:hover){.knc .kn-gal-duim:hover{opacity:1}}
.knc .kn-gal-duim[aria-current="true"]{border-color:var(--kn-goud,#D79C2F);opacity:1}
.knc .kn-gal-duim:focus-visible{outline:2px solid var(--kn-goud,#D79C2F);outline-offset:2px}
.knc .kn-gal-duim img{display:block;width:100%;height:100%;object-fit:cover}
/* de koopkolom: geen kaart meer op de homepage, alles links uitgelijnd */
.knc .kn-koop .pminfo{background:none;box-shadow:none;padding:0;max-width:none;flex:none;min-width:0}
.knc .kn-koop .ppkolom{min-width:0}
.knc .kn-koop .persoregel{text-align:left;margin:12px 0 0;line-height:1.6}
.knc .kn-koop .persoregel a{display:inline-block;min-height:0;padding:12px 0;margin:-12px 0} /* het tikvlak blijft 44 px hoog, maar valt buiten de regel: anders werd de hele regel 44 px (het gat onder "Mail ons") */
.knc .kn-koop .trustlijst{margin-bottom:4px}
.knc .kn-koop .trustlijst li.kn-lever{font-weight:400;align-items:flex-start} /* de leverzin: vijf regels */
/* 5d (besluit 27-09): de lijst op de homepage zoals op 208 - de regels niet vet, alleen het kernwoord (<b>) in pruim, de iconen
   in --mosterdd zonder doorzichtigheid (beide pagina's hebben data-palet antraciet-goud, dus dezelfde kleur) */
.knc:where(:not(.pdp2)) .kn-koop .trustlijst li{font-weight:400}
.knc:where(:not(.pdp2)) .kn-koop .trustlijst b{color:var(--pruim);font-weight:700}
.knc:where(:not(.pdp2)) .kn-koop .trustlijst svg{color:var(--mosterdd);opacity:1}
/* 5e (besluit 27-09): "vanaf de lancering" niet 8 px ingesprongen onder de prijs */
.knc .kn-koop .pmprice .kn-launchprijs{margin-left:0}
.knc .kn-koop .kn-kleurzin{margin:-6px 0 18px;font-size:13px;color:var(--muted)}
/* onder de kolommen: drie infokaarten in een rij en de fabrikantregel */
.knc .kn-koop-onder{max-width:1200px;margin:clamp(36px,4vw,56px) auto 0;padding:0 clamp(16px,3vw,32px)}
.knc .kn-koop-onder .ppinfo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;max-width:none}
.knc .kn-koop-onder .ppinfokaart{background:var(--wit,#F7F6F4);border-radius:16px;padding:22px 24px 24px;box-shadow:var(--sh-sm);border-top:3px solid var(--mosterd,#D79C2F)}
.knc .kn-koop-onder .ppinfoicoon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--oat);color:var(--pruim);margin:0 0 13px} /* ook op de homepage, zoals op 208 */
.knc .kn-koop-onder .ppinfokaart h2,.knc .kn-koop-onder .ppinfokaart h3{font-size:17.5px;letter-spacing:normal;margin:0 0 7px}
.knc .kn-koop-onder .ppinfokaart p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.75}
.knc .kn-koop-onder .ppinfokaart p.kn-infolink{margin-top:8px}
.knc .kn-koop-onder .kn-fabrikant{margin:16px 0 0;font-size:12.5px;color:var(--kn-muted-diep,#5E5D5B);text-align:center}
@media (max-width:899px){
  .knc .kn-koop{grid-template-columns:minmax(0,1fr);gap:26px;padding:0}
  .knc .kn-gal{margin:0 -24px} /* van rand tot rand: de sectie heeft 24 px zijmarge (.sec en .ppkoop) */
  .knc .kn-gal-venster{border-radius:0;box-shadow:none;aspect-ratio:4/5}
  .knc .kn-gal-pijl{width:40px;height:40px;margin-top:-20px}
  .knc .kn-gal-duimen{padding:6px 24px}
  .knc .kn-gal-duim{flex-basis:64px;width:64px;height:64px}
  .knc .kn-koop-onder{padding:0}
  .knc .kn-koop-onder .ppinfo{grid-template-columns:minmax(0,1fr);gap:14px}
}
@media (max-width:419px){.knc .kn-gal-duimen{gap:8px}.knc .kn-gal-duim{flex-basis:56px;width:56px;height:56px}} /* vijf miniaturen passen dan tot 360 px */
@media (min-width:600px) and (max-width:899px){.knc .kn-gal-venster{aspect-ratio:1/1}} /* tablet: niet hoger dan breed, anders verdwijnen prijs en knop onder de vouw */
/* B3 (besluit Robbin 26-09): de kleur op een eigen regel alleen waar "Knussie - <langste kleur>" niet op een regel past;
   knussie-galerij.php meet dat per breedte en zet dan .kn-titel-twee. Zo springt de titel nooit bij een kleurwissel. */
.knc .kn-titel-twee .kn-titelkleur,.knc .kn-titel-twee #pp-kleur{display:block}
.knc .kn-titel-twee .kn-titelstreep{display:none} /* 5a (besluit 27-09): op twee regels "Knussie" / "Beige", zonder streepje */
/* B6: de knop onder de vier feiten in het midden van de kolom */
.knc:where(:not(.pdp2)) .proofcta{text-align:center}
.knc .kn-nw{white-space:nowrap} /* "1-5 werkdagen" niet over twee regels */
.knc .kn-gal-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== De bouwpakketpagina (/bouwpakket/, post 150), nieuw ontwerp - visuele ronde 2, blok D (besluit Robbin 26-09: "zoals de
   voorproef"; de iconenrij in het slot en "Terug naar home" weg). Ritme in plaats van gecentreerde secties met iconen: beeld en
   tekst wisselen links en rechts, een volle-breedte beeldband als adempauze, de avond als genummerde rij, het pakket als een
   bestelkaart, de veiligheidstekst als rustige regel. Geen nieuwe claims; "voorlopig" blijft waar het waar is. Het AI-label op
   de fotovakken staat bij de andere labels ("Het AI-label"); de oude stijlblokken in de paginabron blijven staan voor de
   vragenkop en het slot. ===== */
.knbp.bp2{width:min(1120px,calc(100vw - 48px));max-width:none;margin:0;padding:0;position:relative;left:50%;transform:translateX(-50%);box-sizing:border-box;color:var(--kn-tekst,#161719)} /* de inhoudskolom van deze pagina is smal; zo breekt het ontwerp eruit, net als het slotblok */
.bp2 *,.bp2 *::before,.bp2 *::after{box-sizing:border-box}
.bp2 .lbl{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--kn-oker,#9A6A12);margin:0 0 10px}
.bp2 .kop{font-family:'Young Serif',Georgia,serif;font-weight:400;font-size:clamp(28px,3.2vw,38px);line-height:1.15;margin:0 0 14px;color:var(--kn-donker,#0B0C0E)}
.bp2 p{font-size:16px;line-height:1.7;margin:0 0 14px;color:var(--kn-tekst,#161719)}
.bp2 section{margin:0 0 clamp(72px,9vw,120px)}
.bp2 .kn-aivak{position:relative;overflow:hidden}
.bp2 img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0} /* de vakken ronden af; een eigen hoekstraal op het beeld gaf de beeldband afgeronde hoeken tegen de schermrand */
/* 1. hero: tekst links, beeld rechts, feiten als rij */
.bp2 .bp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;margin-top:clamp(8px,2vw,24px)}
.bp2 .bp-kop-xl{font-family:'Young Serif',Georgia,serif;font-weight:400;font-size:clamp(36px,4.6vw,58px);line-height:1.06;margin:0 0 18px;color:var(--kn-donker,#0B0C0E)}
.bp2 .bp-lead{font-size:17.5px;max-width:520px}
.bp2 .bp-feiten{list-style:none;margin:22px 0 26px;padding:18px 0 0;border-top:1px solid rgba(11,12,14,.12);display:grid;grid-template-columns:repeat(3,auto);gap:10px 28px;justify-content:start}
.bp2 .bp-feiten b{display:block;font-size:15.5px;color:var(--kn-donker,#0B0C0E)}
.bp2 .bp-feiten span{display:block;font-size:13.5px;color:var(--kn-muted-diep,#5E5D5B)}
.bp2 .bp-knoppen{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.bp2 .bp-knoppen .btn1{display:inline-block;background:var(--kn-goud,#D79C2F);color:var(--kn-donker,#0B0C0E);padding:14px 30px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;box-shadow:0 10px 22px -12px rgba(0,0,0,.4)}
.bp2 .bp-knoppen .link{font-weight:700;color:var(--kn-donker,#0B0C0E);text-decoration:underline;text-decoration-color:var(--kn-goud,#D79C2F);text-decoration-thickness:2px;text-underline-offset:4px}
.bp2 .bp-chip{display:inline-block;margin-top:16px;font-size:13px;color:var(--kn-muted-diep,#5E5D5B);border:1px dashed rgba(11,12,14,.3);border-radius:999px;padding:5px 12px}
.bp2 .bp-hero-foto{margin:0;border-radius:var(--kn-radius,20px);aspect-ratio:4/5;box-shadow:var(--kn-sh-md)}
/* 2. de avond: kop links, stappen als genummerde rij */
.bp2 .bp-avond{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.bp2 .bp-stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 36px;counter-reset:bp}
.bp2 .bp-stappen li{display:grid;grid-template-columns:44px 1fr;gap:4px 16px;align-items:start}
.bp2 .bp-nr{grid-row:1 / span 3;width:44px;height:44px;border-radius:50%;border:2px solid var(--kn-goud,#D79C2F);display:flex;align-items:center;justify-content:center;font-family:'Young Serif',Georgia,serif;font-size:19px;color:var(--kn-donker,#0B0C0E)}
.bp2 .bp-tijd{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--kn-oker,#9A6A12)}
.bp2 .bp-stappen h3{font-family:'Young Serif',Georgia,serif;font-weight:400;font-size:20px;margin:0}
.bp2 .bp-stappen p{font-size:15px;margin:2px 0 0;color:var(--kn-muted-diep,#5E5D5B)}
/* 3. de beeldband: volle breedte, tekst rechts op een verloop */
.bp2 .bp-band{position:relative;left:50%;width:100vw;margin-left:-50vw;height:clamp(380px,40vw,560px);overflow:hidden}
.bp2 .bp-band-foto{position:absolute;inset:0} /* het AI-label hangt aan de foto, niet aan de hele band (op mobiel staat de tekst onder de foto) */
.bp2 .bp-band::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(11,12,14,0) 30%,rgba(11,12,14,.72) 72%)}
.bp2 .bp-band-tekst{position:absolute;z-index:2;right:max(24px,calc((100vw - 1120px) / 2 + 24px));top:50%;transform:translateY(-50%);width:min(420px,42vw);color:#F3F1EC}
.bp2 .bp-band-tekst .lbl{color:#E8C075}
.bp2 .bp-band-tekst .kop{color:#F3F1EC}
.bp2 .bp-band-tekst p{color:#E4E1DA}
/* 4 en 5. beeld en tekst naast elkaar, afwisselend */
.bp2 .bp-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.bp2 .bp-duo.bp-omgekeerd .bp-duo-beeld{order:-1}
.bp2 .bp-plaat{background:var(--kn-oat,#EFEDE8);border-radius:var(--kn-radius,20px);aspect-ratio:5/4;display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,48px);color:var(--kn-donker,#0B0C0E)}
.bp2 .bp-plaat svg{width:100%;height:auto;max-width:360px}
.bp2 .bp-plaat.bp-twee{gap:24px}
.bp2 .bp-plaat.bp-twee svg{max-width:48%}
.bp2 .bp-lijst{list-style:none;margin:0 0 18px;padding:0}
.bp2 .bp-lijst li{position:relative;padding:12px 0 12px 30px;border-bottom:1px solid rgba(11,12,14,.1);font-size:16px}
.bp2 .bp-lijst li::before{content:"";position:absolute;left:4px;top:19px;width:12px;height:7px;border-left:2px solid var(--kn-goud,#D79C2F);border-bottom:2px solid var(--kn-goud,#D79C2F);transform:rotate(-45deg)}
.bp2 .bp-rustig{font-size:14.5px;color:var(--kn-muted-diep,#5E5D5B)}
.bp2 .bp-veilig{font-size:13.5px;line-height:1.6;color:var(--kn-muted-diep,#5E5D5B);border-left:2px solid rgba(11,12,14,.18);padding-left:14px;margin-top:6px}
.bp2 .bp-manieren{margin:18px 0 16px}
.bp2 .bp-manieren > div{padding:14px 0;border-top:1px solid rgba(11,12,14,.1)}
.bp2 .bp-manieren dt{font-family:'Young Serif',Georgia,serif;font-size:20px;margin:0 0 4px;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.bp2 .bp-manieren dt em{font-family:Karla,Arial,sans-serif;font-style:normal;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--kn-oker,#9A6A12);white-space:nowrap}
.bp2 .bp-manieren dd{margin:0;font-size:15px;line-height:1.65;color:var(--kn-muted-diep,#5E5D5B)}
/* 6. het pakket als bestelkaart */
.bp2 .bp-pakket .bp-kop-links{max-width:640px}
.bp2 .bp-kaart{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--kn-wit,#F7F6F4);border-radius:var(--kn-radius,20px);box-shadow:var(--kn-sh-md);overflow:hidden}
.bp2 .bp-kaart-foto{min-height:100%;aspect-ratio:auto}
.bp2 .bp-kaart-body{padding:clamp(24px,3.5vw,44px)}
.bp2 .bp-regel{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;padding:0 0 20px;margin:0 0 20px;border-bottom:1px solid rgba(11,12,14,.1)}
.bp2 .bp-regel .lbl{margin-bottom:4px}
.bp2 .bp-naam{display:block;font-family:'Young Serif',Georgia,serif;font-weight:400;font-size:24px;margin:0 0 6px;color:var(--kn-donker,#0B0C0E)}
.bp2 .bp-regel p{font-size:15px;margin:0;color:var(--kn-muted-diep,#5E5D5B)}
.bp2 .bp-prijs{text-align:right;flex:none}
.bp2 .bp-prijs b{display:block;font-family:'Young Serif',Georgia,serif;font-weight:400;font-size:28px;color:var(--kn-donker,#0B0C0E)}
.bp2 .bp-prijs span{display:inline-block;margin-top:4px;font-size:12px;font-weight:700;border:1.5px solid var(--kn-goud,#D79C2F);border-radius:999px;padding:2px 10px;color:var(--kn-oker,#9A6A12)}
.bp2 .bp-status{background:var(--kn-oat,#EFEDE8);border-radius:12px;padding:14px 16px;font-size:14.5px;line-height:1.6}
.bp2 .bp-status a{font-weight:700;color:var(--kn-donker,#0B0C0E);text-decoration:underline;text-decoration-color:var(--kn-goud,#D79C2F);text-decoration-thickness:2px;text-underline-offset:3px}
.bp2 .kn-fabrikant{margin:14px 0 0;font-size:12.5px;color:var(--kn-muted-diep,#5E5D5B)}
/* 7. vragen: kop links, vragen rechts */
.bp-faq{width:min(1120px,calc(100vw - 48px));position:relative;left:50%;transform:translateX(-50%);margin:0 0 clamp(72px,9vw,120px);padding:0;display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start;box-sizing:border-box}
.bp-faq .knbp-faqkop{text-align:left;margin:0;max-width:none}
.bp-faq .bp-faq-vragen{min-width:0}
.bp-faq .knbp-faqkop h2{text-align:left}
.bp-faq details{margin:0 0 12px}
/* de paginakop (GeneratePress .entry-header) op dezelfde breedte als het ontwerp eronder */
#post-150 .entry-header{width:min(1120px,calc(100vw - 48px));position:relative;left:50%;transform:translateX(-50%);box-sizing:border-box}
/* 8. slot: tekst links, de kant-en-klare Knussie rechts, geen iconenrij */
.knbp-slot.bp-slot2{width:min(1120px,calc(100vw - 48px))} /* even breed als het ontwerp erboven */
.bp-slot2 .kaart{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0;padding:0 !important;text-align:left !important;overflow:hidden}
.bp-slot2 .bp-slot-tekst{padding:clamp(36px,5vw,60px)}
.bp-slot2 .golf{margin:0 0 18px !important}
.bp-slot2 .slottekst{margin:0 0 26px !important}
.bp-slot2 .knoppen{justify-content:flex-start !important}
.bp-slot2 .bp-slot-foto{position:relative;overflow:hidden;min-height:320px}
.bp-slot2 .bp-slot-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;display:block}
@media (max-width:899px){
  .bp2 .bp-hero,.bp2 .bp-avond,.bp2 .bp-duo,.bp-faq{grid-template-columns:minmax(0,1fr)}
  .bp2 .bp-duo.bp-omgekeerd .bp-duo-beeld{order:0}
  .bp2 .bp-hero-foto{aspect-ratio:4/3;order:-1}
  .bp2 .bp-feiten{grid-template-columns:1fr 1fr}
  .bp2 .bp-stappen{grid-template-columns:minmax(0,1fr)}
  .bp2 .bp-band{height:auto}
  .bp2 .bp-band-foto{position:relative;height:280px}
  .bp2 .bp-band::before{display:none}
  .bp2 .bp-band-tekst{position:static;transform:none;width:auto;background:#101214;padding:28px 24px 32px}
  .bp2 .bp-kaart{grid-template-columns:minmax(0,1fr)}
  .bp2 .bp-kaart-foto{aspect-ratio:4/3}
  .bp2 .bp-regel{flex-direction:column;gap:10px}
  .bp2 .bp-prijs{text-align:left}
  .bp-slot2 .kaart{grid-template-columns:minmax(0,1fr)}
  .bp-slot2 .bp-slot-foto{min-height:0;aspect-ratio:4/3;order:-1}
}
@media (min-width:600px) and (max-width:899px){.bp2 .bp-feiten{grid-template-columns:repeat(3,auto)}} /* tablet: de drie feiten op een rij, niet "€ 69,00" alleen op de tweede */

/* De vaste koopbalk op de productpagina, smal: de knop alleen "Pre-order", zodat de kleur ernaast leesbaar blijft */
@media (max-width:519px){
  .knc:where(.pdp2) #kb-mand .kb-lang{display:none}
}

/* ===== MOBIEL (Opdracht_Mobiel_20260927.md): detailwerk tot en met 767 px. Alles hieronder staat binnen een mobiele query
   ((max-width:767px), (hover:none) of een smallere); vanaf 768 px verandert er niets. De hoverregels elders in dit blad staan sinds
   dezelfde ronde op hun eigen plek binnen (hover:hover): met een muis precies als voorheen, op een touchscherm blijft na een tik
   niets meer hangen. ===== */
@media (max-width:767px){
  /* Besluit Robbin 27-09: de USP-band onder de hero is op mobiel weg (hij was op 390 px 163 px hoog). NIET display:none: het AI-label
     van de hero is .hero .uspband::before en hangt aan de band. De band klapt in tot 0 hoog en alleen de items verdwijnen; het label
     staat dan 8 px boven de onderrand van de hero (AI-verordening art. 50, Slaapregister 8.26). */
  .knc:where(:not(.pdp2)) .hero .uspband{height:0;min-height:0;padding:0;gap:0;background:none;overflow:visible}
  .knc:where(:not(.pdp2)) .hero .uspband>span{display:none}
  /* ...en de hero krijgt de hoogte die hij zonder de band had (op 844 hoog 464 px, was 625 - 163), zodat het label, de tekst en de
     knop op dezelfde plek blijven: het label staat in het eerste scherm, boven de vaste koopbalk (juridische lens 27-09, nakomer 5
     van 24-09). Wat onder de hero staat, schuift op. */
  .knc:where(:not(.pdp2)) .hero{min-height:clamp(340px,55vh,520px)}
  /* tikvlakken naar 44 px zonder dat het er anders uitziet */
  .knc .kn-gal-pijl::after{content:"";position:absolute;inset:-2px;border-radius:50%}
  .kn-preorderbanner a{position:relative}
  .kn-preorderbanner a::after{content:"";position:absolute;inset:-2px 0}
  .knc .kn-infolink a{display:inline-block;position:relative;padding:13.5px 0;margin:-13.5px 0}
  .knc:where(.pdp2) .kruimel a{padding-inline:6px;margin-inline:-6px}
  .bp2 .bp-knoppen a.link{position:relative;padding-block:7.5px;margin-block:-7.5px}
  .knc:where(:not(.pdp2)) .bslider input[type=range]{height:44px;margin-block:-8px}
  .entry-content .wp-block-woocommerce-cart .wc-block-components-product-name{display:inline-block;position:relative;padding-block:13px;margin-block:-13px}
  .entry-content .wp-block-woocommerce-checkout .wc-block-components-address-form__address_2-toggle{display:inline-block;position:relative;padding-block:12px 14px;margin-block:0 -14px}
  /* koppen netjes afbreken (geen wees-woord op de laatste regel) */
  .knc h1,.knc h2,.knc h3,.entry-content h1,.entry-content h2,.entry-content h3{text-wrap:balance}
  /* de cookiebalk compacter; Accepteren en Weigeren blijven even groot en even zichtbaar (hun regels in de Complianz-instellingen
     worden niet geraakt). De id wint van de regels van Complianz. */
  #cmplz-cookiebanner-container .cmplz-cookiebanner{padding:10px 14px!important;gap:6px!important;grid-gap:6px!important}
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons{margin-top:0!important}
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close{position:relative}
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close::after{content:"";position:absolute;inset:-12px}  /* tikvlak 44 x 44 op elke mobiele breedte (tester 27-09); het kruisje is 20 px */
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links{margin-top:0!important}
}
@media (max-width:425px){
  /* de kop van de cookiebalk (alleen het sluitkruis: Complianz verbergt de titel tot en met 425 px) in de hoek in plaats van op een eigen
     rij; boven 425 blijft de kop zoals hij was, anders ligt de titel over de tekst (reviewer 27-09). display:block: anders is de kop een
     grid van 200 px breed over de eerste regel. */
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header{position:absolute;top:12px;right:12px;z-index:2;display:block}
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body{padding-right:22px}
}
@media (max-width:429px){
  /* de mand: de kolommen van WooCommerce (80 + 132 px plus een prijs) passen niet onder 390 px; de prijs viel eraf (23 px op 360), en
     op 390 stond hij 11 px buiten de kaart (visuele lens 27-09) */
  .entry-content .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row{grid-template-columns:64px minmax(0,1fr) auto;column-gap:10px}
  .entry-content .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image{padding-right:0}
  .entry-content .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product{grid-column:2/3}
  .entry-content .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total{grid-column:3/4}
  .entry-content .wp-block-woocommerce-cart .wc-block-cart-item__quantity{flex-wrap:wrap}
}
@media (max-width:389px){
  /* de knop in de vaste balk op home niet over twee regels (was 75 px hoog op 320 en 360) */
  .knc .stickycta .btn{white-space:nowrap;padding-inline:18px}
}
@media (max-width:359px){
  /* bestaand (visuele lens 27-09): "Knussie bijna binnen." (322 px bij 29 px) werd onder 370 px rechts afgeknipt; de kop heeft op mobiel
     een minimum van 29 px. Hier schaalt hij mee met de breedte (24 px op 320) en blijft op een regel: laten afbreken maakte de hero
     een regel hoger, en dan zakte het AI-label op 320 x 568 onder de koopbalk (pilmeting 27-09) */
  body.kn-preorder .knc[data-sitefont="youngserif"] .hero h1{font-size:min(29px,calc((100vw - 48px) / 11.2))}
  /* Slaapregister 8.33: de kop past op 320 px (merk 126 + menu 44 + iconen 107 + 2 x 20 px tussenruimte was 25 px te veel) */
  .kn-kader .sitehead .in{gap:10px}
  .kn-kader .sitehead .cart{padding-inline:6px}
  /* vijf miniaturen van de galerij passen ook op 320 px (48 px, nog steeds boven 44) */
  .knc .kn-gal-duimen{gap:6px}
  .knc .kn-gal-duim{flex-basis:48px;width:48px;height:48px}
}
@media (hover:none){
  /* een rustige tikfeedback in de merkkleur (de focusring van de galerijpijl staat al alleen op :focus-visible) */
  html{-webkit-tap-highlight-color:rgba(215,156,47,.18)}
}
/* ===== BUNDELSTIPPEN (Opdracht_Bundelstippen_20260927.md): op mobiel staan de kleurstippen op de bundelkaarten 44 px hart-op-hart,
   zodat elke stip een tikvlak van 44 x 44 heeft dat de buurstip niet raakt. De stip zelf blijft 23 px; de ruimte ertussen groeit (2 -> 21).
   De kleurnaam krijgt dezelfde afstand (21 px), zodat hij niet leest als label van de laatste stip. Onder 360 px is de binnenrand van
   de kaart 16 in plaats van 26 px en de afstand tot de naam 9 px: anders past een rij met de langste kleurnaam niet op 320. ===== */
@media (max-width:767px){
  .knc:where(:not(.pdp2)) .bkleur{column-gap:21px}
  .knc:where(:not(.pdp2)) .bkleur .dots{gap:21px}
  .knc:where(:not(.pdp2)) .bkleur .dot::after{width:44px}
}
@media (max-width:359px){
  .knc:where(:not(.pdp2)) .bcard{padding-left:16px;padding-right:16px}
  .knc:where(:not(.pdp2)) .bkleur{column-gap:9px}
}