/*
Theme Name:   KEANOVA
Theme URI:    https://keanova.nl/
Description:  Child theme van GeneratePress voor het merk KEANOVA. Diep zwart, warm ivoor, champagnegoud. Lokale lettertypen (Cormorant Garamond + Manrope, SIL OFL). Geen externe verzoeken, geen pagebuilder.
Author:       KEANOVA
Template:     generatepress
Version:      2.0.0
Requires PHP: 8.0
Text Domain:  keanova
*/

/* ==========================================================================
   0. LETTERTYPEN — lokaal gehost, SIL Open Font License 1.1
      Licentieteksten: assets/fonts/OFL-CormorantGaramond.txt en OFL-Manrope.txt
   ========================================================================== */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;
  src:url('assets/fonts/cormorant-garamond-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/cormorant-garamond-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/cormorant-garamond-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/cormorant-garamond-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/manrope-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/manrope-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/manrope-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/manrope-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ==========================================================================
   1. TOKENS — alle contrastwaarden berekend, zie 01_Brand/DESIGN_SYSTEM.md
   ========================================================================== */

:root{
  --zwart:#080808;
  --charcoal:#121212;
  --charcoal-2:#1A1A1A;
  --ivoor:#F4F0E8;
  --steen:#E8E0D3;
  --steen-diep:#DBD1C0;

  --goud:#C8A96B;            /* 8,91:1 op zwart — AAA */
  --messing:#9A7635;         /* 4,78:1 op zwart — AA, alleen op donker */
  --messing-tekst:#745719;   /* 5,92:1 op ivoor · 5,14:1 op steen — AA */
  --goud-zacht:rgba(200,169,107,.28);
  --goud-flauw:rgba(200,169,107,.12);

  --grijs-op-zwart:#A8A29A;  /* 7,92:1 op zwart — AAA */
  --grijs-op-licht:#5C5A55;  /* 6,06:1 op ivoor · 5,26:1 op steen — AA */

  --lijn-donker:#2A2A2A;
  --lijn-licht:#DCD5C7;

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:96px; --s8:128px; --s9:168px;

  --breed:1320px;
  --kolom:720px;
  --radius:0px;
  --trans:260ms cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   2. BASIS
   ========================================================================== */

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

body{
  font-family:var(--sans);
  font-size:18px;
  line-height:1.72;
  color:var(--zwart);
  background:var(--ivoor);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:var(--serif);font-weight:300;line-height:1.08;margin:0 0 var(--s3);letter-spacing:-.015em;}
h1{font-size:clamp(40px,5.6vw,76px);}
h2{font-size:clamp(30px,3.6vw,48px);}
h3{font-size:clamp(21px,1.9vw,26px);font-weight:400;letter-spacing:-.005em;}
h4{font-size:19px;font-weight:500;font-family:var(--sans);letter-spacing:-.005em;}

p{margin:0 0 var(--s3);max-width:var(--kolom);}
p:last-child{margin-bottom:0;}

a{color:var(--messing-tekst);text-decoration:none;transition:color var(--trans);}
a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;}

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

:focus-visible{outline:2px solid var(--goud);outline-offset:3px;}

.kna-skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--zwart);color:var(--ivoor);padding:var(--s2) var(--s3);font-size:15px;}
.kna-skip:focus{left:0;}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.kna-wrap{max-width:var(--breed);margin:0 auto;padding:0 var(--s6);}
.kna-wrap--smal{max-width:920px;}

.sec{padding:var(--s9) 0;}
.sec--kort{padding:var(--s7) 0;}

.op-zwart{background:var(--zwart);color:var(--ivoor);}
.op-zwart h1,.op-zwart h2,.op-zwart h3,.op-zwart h4{color:var(--ivoor);}
.op-zwart p{color:var(--grijs-op-zwart);}
.op-zwart a{color:var(--goud);}

.op-charcoal{background:var(--charcoal);color:var(--ivoor);}
.op-charcoal h1,.op-charcoal h2,.op-charcoal h3{color:var(--ivoor);}
.op-charcoal p{color:var(--grijs-op-zwart);}

.op-steen{background:var(--steen);}

/* Eyebrow-label — gouden kapitalen met brede spatiëring */
.eyebrow{
  display:block;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--messing-tekst);margin-bottom:var(--s3);
}
.op-zwart .eyebrow,.op-charcoal .eyebrow{color:var(--goud);}

.eyebrow--lijn{display:flex;align-items:center;gap:var(--s2);}
.eyebrow--lijn::after{content:'';flex:0 0 56px;height:1px;background:currentColor;opacity:.5;}

.lood{font-size:clamp(18px,1.5vw,21px);line-height:1.65;color:var(--grijs-op-licht);}
.op-zwart .lood,.op-charcoal .lood{color:var(--grijs-op-zwart);}

.goudlijn{width:72px;height:1px;background:var(--goud);border:0;margin:0 0 var(--s4);}

/* ==========================================================================
   4. PREVIEWBALK — smal, messing, past bij het merk
   ========================================================================== */

.kna-preview{
  background:var(--charcoal);
  border-bottom:1px solid var(--messing);
  color:var(--grijs-op-zwart);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  text-align:center;padding:9px var(--s3);
}
.kna-preview strong{color:var(--goud);font-weight:600;}

/* ==========================================================================
   5. HEADER EN GOUDEN MENU
   ========================================================================== */

.kna-header{
  background:var(--zwart);
  border-bottom:1px solid var(--lijn-donker);
  position:sticky;top:0;z-index:200;
}
.kna-header::after{
  content:'';display:block;height:1px;
  background:linear-gradient(90deg,transparent,var(--goud) 18%,var(--goud) 82%,transparent);
  opacity:.55;
}
.kna-header__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:86px;}

.kna-logo img{width:230px;height:auto;}

.kna-nav ul{display:flex;gap:var(--s5);list-style:none;margin:0;padding:0;}
.kna-nav li{position:relative;}
.kna-nav a{
  display:block;position:relative;
  font-family:var(--sans);font-size:14px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--goud);
  padding:var(--s2) 0;
  text-decoration:none;
}
.kna-nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:8px;height:1px;
  background:var(--goud);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--trans);
}
.kna-nav a:hover::after,.kna-nav a:focus-visible::after{transform:scaleX(1);}
.kna-nav a:hover{color:#DCC08A;text-decoration:none;}

.kna-nav .current-menu-item > a{color:#E4CB9A;}
.kna-nav .current-menu-item > a::after{transform:scaleX(1);opacity:.75;}

.kna-header__acties{display:flex;align-items:center;gap:var(--s3);}
.kna-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--goud);border:1px solid transparent;transition:border-color var(--trans);}
.kna-ico:hover{border-color:var(--goud-zacht);text-decoration:none;}
.kna-ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.4;}

.kna-menuknop{
  display:none;background:none;border:1px solid var(--goud-zacht);
  color:var(--goud);min-width:44px;min-height:44px;padding:10px 16px;
  font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  transition:border-color var(--trans);
}
.kna-menuknop:hover{border-color:var(--goud);}

/* Achtergrondscroll blokkeren zolang het mobiele menu open staat.
   Herstelt vanzelf bij sluiten (geen scrollpositie-manipulatie nodig). */
html.kna-menu-open,
html.kna-menu-open body{overflow:hidden;}

/* ==========================================================================
   6. HERO
   ========================================================================== */

.hero{background:var(--zwart);color:var(--ivoor);padding:var(--s9) 0;position:relative;overflow:hidden;}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:center;}
.hero h1{color:var(--ivoor);margin-bottom:var(--s4);}
.hero__lood{font-size:clamp(18px,1.5vw,21px);color:var(--grijs-op-zwart);max-width:34em;margin-bottom:var(--s6);}

.hero__beeld{position:relative;}
.hero__beeld img{width:100%;background:var(--ivoor);}
.hero__beeld::before{
  content:'';position:absolute;inset:-14px;border:1px solid var(--goud-zacht);pointer-events:none;
}
.hero__bijschrift{
  margin-top:var(--s3);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--messing);
}

/* ==========================================================================
   7. KNOPPEN
   ========================================================================== */

.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:16px 38px;
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid transparent;border-radius:var(--radius);cursor:pointer;
  transition:background-color var(--trans),color var(--trans),border-color var(--trans);
  text-decoration:none;
}
.knop:hover{text-decoration:none;}

.knop--goud{background:var(--goud);color:var(--zwart);}
.knop--goud:hover{background:#D9BC82;color:var(--zwart);}

.knop--rand{background:transparent;color:var(--goud);border-color:var(--goud-zacht);}
.knop--rand:hover{border-color:var(--goud);color:#DCC08A;}

.knop--donker{background:var(--zwart);color:var(--ivoor);}
.knop--donker:hover{background:var(--charcoal-2);color:var(--ivoor);}

.knop--randdonker{background:transparent;color:var(--zwart);border-color:rgba(8,8,8,.28);}
.knop--randdonker:hover{border-color:var(--zwart);}

.knoppen{display:flex;flex-wrap:wrap;gap:var(--s2);}

/* ==========================================================================
   8. MERKPRINCIPES — genummerd, met gouden lijnen
   ========================================================================== */

.principes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);}
.principe{position:relative;padding-top:var(--s4);border-top:1px solid var(--lijn-donker);}
.op-steen .principe,.op-licht .principe{border-top-color:var(--lijn-licht);}
.principe__nr{
  font-family:var(--serif);font-size:44px;line-height:1;color:var(--goud);
  display:block;margin-bottom:var(--s3);font-weight:300;
}
.op-steen .principe__nr{color:var(--messing-tekst);}
.principe h3{margin-bottom:var(--s2);}
.principe p{font-size:16px;line-height:1.7;}

/* ==========================================================================
   9. COLLECTIE EN PRODUCTKAARTEN
   ========================================================================== */

.kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);}
.kaarten--2{grid-template-columns:repeat(2,1fr);}

.kaart{display:block;color:inherit;text-decoration:none;}
.kaart__beeld{
  position:relative;overflow:hidden;background:var(--ivoor);
  aspect-ratio:1/1;margin-bottom:var(--s3);
}
.kaart__beeld img{width:100%;height:100%;object-fit:cover;transition:transform 700ms cubic-bezier(.22,.61,.36,1);}
.kaart:hover .kaart__beeld img{transform:scale(1.035);}
.kaart__beeld::after{
  content:'';position:absolute;inset:0;border:1px solid transparent;transition:border-color var(--trans);pointer-events:none;
}
.kaart:hover .kaart__beeld::after{border-color:var(--goud-zacht);}

.kaart__cat{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--grijs-op-licht);}
.op-zwart .kaart__cat{color:var(--messing);}
.kaart__naam{font-family:var(--serif);font-size:26px;font-weight:400;margin:10px 0 6px;line-height:1.2;}
.kaart__meta{font-size:15px;color:var(--grijs-op-licht);}
.op-zwart .kaart__meta{color:var(--grijs-op-zwart);}
.kaart:hover .kaart__naam{text-decoration:none;}

/* Merkkaart "Binnenkort" — géén nep-product, geen diagonale arcering */
.kaart--binnenkort .kaart__beeld{
  background:var(--charcoal);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--lijn-donker);
}
.kaart--binnenkort .kaart__monogram{
  font-family:var(--serif);font-size:54px;letter-spacing:.16em;color:var(--goud);opacity:.4;font-weight:300;
}
.badge{
  display:inline-block;margin-top:var(--s2);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--messing-tekst);border:1px solid var(--goud-zacht);padding:7px 14px;
}
.op-zwart .badge{color:var(--goud);}

/* ==========================================================================
   10. EDITORIAL — split, citaat, specificatielijst
   ========================================================================== */

.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center;}
.split--beeldlinks .split__beeld{order:-1;}
.split__beeld{position:relative;}
.split__beeld img{width:100%;}
.split__beeld::before{content:'';position:absolute;inset:-14px;border:1px solid var(--goud-zacht);pointer-events:none;}

.citaat{
  font-family:var(--serif);font-size:clamp(26px,3vw,40px);line-height:1.28;font-weight:300;
  border-left:1px solid var(--goud);padding-left:var(--s5);margin:var(--s7) 0;max-width:22em;
}
.op-zwart .citaat{color:var(--ivoor);}

.speclijst{list-style:none;margin:0;padding:0;}
.speclijst li{
  display:flex;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) 0;border-bottom:1px solid var(--lijn-licht);font-size:16px;
}
.op-zwart .speclijst li{border-bottom-color:var(--lijn-donker);}
.speclijst dt,.speclijst .k{color:var(--grijs-op-licht);letter-spacing:.04em;}
.op-zwart .speclijst .k{color:var(--grijs-op-zwart);}
.speclijst .v{font-weight:500;text-align:right;}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.kna-footer{background:var(--zwart);color:var(--grijs-op-zwart);padding:var(--s8) 0 var(--s5);}
.kna-footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s6);}
.kna-footer h4{font-family:var(--sans);color:var(--goud);font-size:11px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:var(--s3);font-weight:600;}
.kna-footer ul{list-style:none;margin:0;padding:0;}
.kna-footer li{margin-bottom:12px;}
.kna-footer a{color:var(--grijs-op-zwart);font-size:15px;}
.kna-footer a:hover{color:var(--goud);}
.kna-footer__logo img{width:190px;margin-bottom:var(--s3);}
.kna-footer__intro{font-size:15px;line-height:1.7;max-width:34ch;color:var(--grijs-op-zwart);}
.kna-footer__onder{
  border-top:1px solid var(--lijn-donker);margin-top:var(--s7);padding-top:var(--s4);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);justify-content:space-between;font-size:13px;line-height:1.7;
}
.kna-footer__merk{color:var(--grijs-op-zwart);max-width:62ch;}

/* ==========================================================================
   12. WOOCOMMERCE
   ========================================================================== */

.woocommerce ul.products{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);margin:0;}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none;}
.woocommerce ul.products li.product{width:100%;margin:0;float:none;text-align:left;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--serif);font-size:26px;font-weight:400;padding:10px 0 4px;
}
.woocommerce ul.products li.product .price{color:var(--zwart);font-size:17px;font-weight:500;font-family:var(--sans);}
.woocommerce span.onsale,.woocommerce .star-rating,.woocommerce .woocommerce-product-rating{display:none;}

.woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error{
  background:var(--steen);border-top:2px solid var(--goud);color:var(--zwart);font-size:16px;
}
.woocommerce .woocommerce-message::before,.woocommerce .woocommerce-info::before{color:var(--messing-tekst);}

.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt{
  background:var(--zwart);color:var(--ivoor);border-radius:0;
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:16px 32px;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce a.button.alt:hover{background:var(--charcoal-2);color:var(--ivoor);}

.woocommerce table.shop_table{border:0;border-radius:0;}
.woocommerce table.shop_table th{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--grijs-op-licht);}
.woocommerce-cart .cart-empty{font-family:var(--serif);font-size:32px;font-weight:300;}
.woocommerce .return-to-shop{margin-top:var(--s4);}

.woocommerce form .form-row input.input-text,.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text{
  border:1px solid var(--lijn-licht);border-radius:0;padding:14px var(--s2);font-family:var(--sans);font-size:16px;background:#fff;
}
.woocommerce form .form-row label{font-size:13px;letter-spacing:.06em;color:var(--grijs-op-licht);}

/* Lege staat — rustig en merkeigen */
.kna-leeg{text-align:center;padding:var(--s8) 0;}
.kna-leeg__mono{font-family:var(--serif);font-size:56px;letter-spacing:.16em;color:var(--goud);opacity:.35;margin-bottom:var(--s4);}

/* ==========================================================================
   13. TABELLEN EN BREDE INHOUD
   ========================================================================== */

.schuif{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;}
th,td{text-align:left;padding:14px var(--s2);border-bottom:1px solid var(--lijn-licht);font-size:16px;}
th{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--grijs-op-licht);}
.op-zwart th,.op-zwart td{border-bottom-color:var(--lijn-donker);}
.op-zwart th{color:var(--messing);}

/* ==========================================================================
   14. PAGINAKOP VOOR BINNENPAGINA'S
   ========================================================================== */

.paginakop{background:var(--zwart);color:var(--ivoor);padding:var(--s8) 0 var(--s7);}
.paginakop h1{color:var(--ivoor);margin-bottom:var(--s3);}
.paginakop .lood{max-width:38em;}

.artikel{padding:var(--s8) 0;}
.artikel h2{margin-top:var(--s7);}
.artikel h2:first-child{margin-top:0;}
.artikel h3{margin-top:var(--s5);}
.artikel ul,.artikel ol{max-width:var(--kolom);padding-left:1.3em;margin-bottom:var(--s3);}
.artikel li{margin-bottom:10px;}
.artikel blockquote{
  font-family:var(--serif);font-size:24px;line-height:1.4;font-weight:300;
  border-left:1px solid var(--goud);padding-left:var(--s4);margin:var(--s5) 0;color:var(--zwart);
}

/* Concept-markering op juridische pagina's */
.concept{
  display:inline-block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--messing-tekst);border:1px solid var(--goud-zacht);padding:8px 16px;margin-bottom:var(--s4);
}

/* ==========================================================================
   15. NIEUWSBRIEF
   ========================================================================== */

.nieuwsbrief{max-width:640px;}
.nieuwsbrief__rij{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4);}
.nieuwsbrief input[type=email]{
  flex:1 1 280px;padding:16px var(--s3);background:var(--charcoal-2);
  border:1px solid var(--lijn-donker);color:var(--ivoor);font-family:var(--sans);font-size:16px;border-radius:0;
}
.nieuwsbrief input[type=email]::placeholder{color:#6E6A64;}
.nieuwsbrief input[type=email]:focus{border-color:var(--goud);}
.nieuwsbrief__uitleg{font-size:13px;line-height:1.7;color:var(--grijs-op-zwart);margin-top:var(--s3);max-width:52ch;}

/* ==========================================================================
   16. GENERATEPRESS NEUTRALISEREN — geen witte contentdozen, geen zijbalk
   ========================================================================== */

.site-content,.content-area,.site-main,#page,#content{background:transparent;padding:0;margin:0;max-width:none;}
.inside-article{background:transparent;padding:0;border:0;box-shadow:none;}
.entry-content{margin-top:0;}
.separate-containers .inside-article,.separate-containers .comments-area{padding:0;}
.widget-area,.sidebar,#right-sidebar,#left-sidebar{display:none !important;}
.entry-header,.entry-meta,.entry-footer,.post-navigation,.comments-area{display:none;}
.page .entry-header{display:none;}

/* ==========================================================================
   17. ANIMATIE — rustige fade-in
   ========================================================================== */

.reveal{opacity:0;transform:translateY(18px);transition:opacity 800ms ease-out,transform 800ms cubic-bezier(.22,.61,.36,1);}
.reveal.zichtbaar{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .reveal{opacity:1 !important;transform:none !important;}
}

/* ==========================================================================
   18. RESPONSIEF
   ========================================================================== */

@media (max-width:1200px){
  .kna-wrap{padding:0 var(--s5);}
  .kna-nav ul{gap:var(--s4);}
  .hero__grid{gap:var(--s6);}
}

@media (max-width:1024px){
  :root{--s9:104px;--s8:88px;--s7:72px;}
  .principes,.kaarten,.woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:var(--s5);}
  .kna-footer__top{grid-template-columns:1fr 1fr;gap:var(--s5);}
  .hero__grid,.split{grid-template-columns:1fr;gap:var(--s5);}
  .split--beeldlinks .split__beeld{order:0;}
  .citaat{margin:var(--s5) 0;}
}

@media (max-width:768px){
  :root{--s9:72px;--s8:56px;--s7:48px;}
  body{font-size:17px;}
  .kna-wrap{padding:0 20px;}
  .kna-header__in{min-height:66px;}
  .kna-logo img{width:158px;}
  .kna-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--zwart);border-bottom:1px solid var(--goud-zacht);}
  .kna-nav.open{display:block;}
  .kna-nav ul{flex-direction:column;gap:0;padding:var(--s2) 20px var(--s4);}
  .kna-nav a{padding:15px 0;font-size:15px;border-bottom:1px solid var(--lijn-donker);}
  .kna-nav a::after{display:none;}
  .kna-nav li:last-child a{border-bottom:0;}
  .kna-menuknop{display:inline-flex;align-items:center;justify-content:center;}
  .kna-header__acties .kna-ico{display:none;}
  .principes,.kaarten,.kaarten--2,.woocommerce ul.products{grid-template-columns:1fr;gap:var(--s5);}
  .kna-footer__top{grid-template-columns:1fr;gap:var(--s5);}
  .knoppen{flex-direction:column;align-items:stretch;}
  .knop{width:100%;}
  .principe__nr{font-size:36px;}
  .citaat{padding-left:var(--s3);font-size:22px;}
  .speclijst li{flex-direction:column;gap:4px;}
  .speclijst .v{text-align:left;}
  .kna-footer__onder{flex-direction:column;gap:var(--s2);}
}

@media (max-width:400px){
  .kna-logo img{width:140px;}
}

/* ==========================================================================
   19. GENERATEPRESS-CONTAINER VOLLEDIG BREED
   GeneratePress plaatst de inhoud standaard in een container van 1200px.
   De merksecties moeten van rand tot rand lopen; de binnenmarge wordt
   geregeld door .kna-wrap.
   ========================================================================== */

#page.container,
#page.grid-container,
.site.grid-container,
.site-content.grid-container,
.container.grid-container{
  max-width:100% !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  background:transparent !important;
}
.site-content{display:block !important;}
.content-area{width:100% !important;max-width:100% !important;float:none !important;}

/* WooCommerce-pagina's hebben wél een leesbare kolom nodig */
.woocommerce-page .site-main,
.woocommerce .site-main{
  max-width:var(--breed);margin:0 auto;padding:var(--s7) var(--s6);
}
@media (max-width:768px){
  .woocommerce-page .site-main,.woocommerce .site-main{padding:var(--s6) 20px;}
}

/* Hero iets compacter zodat de knoppen boven de vouw blijven op 1440x900 */
.hero{padding:var(--s8) 0;}
@media (max-width:768px){ .hero{padding:var(--s7) 0;} }

/* ==========================================================================
   20. GEEN HORIZONTALE OVERLOOP
   ========================================================================== */

html{overflow-x:hidden;max-width:100%;}
body{max-width:100%;}
img,picture,svg,video,iframe{max-width:100%;}
*{min-width:0;}
.speclijst li{flex-wrap:wrap;}
.kna-preview{overflow-wrap:anywhere;}
.hero__grid,.split,.principes,.kaarten{min-width:0;}
.hero__grid > *,.split > *,.principe,.kaart{min-width:0;}
h1,h2,h3,h4,p,li{overflow-wrap:break-word;}

/* GeneratePress zet op sommige wrappers een vaste breedte; die mag hier niet. */
.site,.site-content,.content-area,.site-main,#page{max-width:100% !important;overflow-x:clip;}

/* Footerkoppen zijn navigatielabels, geen documentkoppen — zelfde uiterlijk als voorheen */
.kna-footer__kop{
  font-family:var(--sans);color:var(--goud);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;margin:0 0 var(--s3);font-weight:600;
}

/* ==========================================================================
   21. WOOCOMMERCE-PAGINA'S IN MERKSTIJL
   ========================================================================== */

.kna-woo{padding:var(--s8) 0;background:var(--ivoor);}
.kna-woo .woocommerce{max-width:none;}
.kna-woo .woocommerce-products-header{display:none;}

/* Geen witte contentdoos, waar GeneratePress die ook vandaan haalt */
.woocommerce .inside-article,.woocommerce-page .inside-article,
.woocommerce .entry-content,.woocommerce-page .entry-content,
.woocommerce article,.woocommerce-page article{background:transparent !important;box-shadow:none !important;border:0 !important;padding:0 !important;}

/* Breadcrumb als ingetogen label */
.woocommerce .woocommerce-breadcrumb{
  font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grijs-op-licht);margin:0 0 var(--s5);
}
.woocommerce .woocommerce-breadcrumb a{color:var(--messing-tekst);}

/* Zolang er nul producten zijn is de standaardmelding overbodig:
   de collectiepagina legt zelf al uit waarom er nog niets te koop staat. */
.woocommerce .woocommerce-info.woocommerce-no-products-found,
.woocommerce-shop .woocommerce-info:last-of-type{display:none;}

/* WooCommerce-formulieren en meldingen in merkstijl */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register{
  border:1px solid var(--lijn-licht);border-radius:0;padding:var(--s5);max-width:560px;background:#fff;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;padding:0;}

@media (max-width:768px){ .kna-woo{padding:var(--s6) 0;} }