/* =========================
   UMI — Webshop design system
   Geïnspireerd op by-umi.eu kleurpalet
========================= */

:root{
  /* Background tones — EXACT match met de mockup (index.html :root) */
  --bg:#F5F1EA;
  --bg-soft:#ECE4D6;
  --bg-warm:#F0E8DA;
  /* --card blijft wit: het thema gebruikt --card voor witte panels/summary/
     filters (shop/cart/pdp). De mockup gebruikt --card-beige voor productkaarten
     en --white voor witte vlakken; daarom is de beige kaart-kleur als aparte
     token gemapt (--card-beige) zodat we de mockup volgen zonder de witte
     surfaces van de andere agents te breken. */
  --card:#FFFFFF;
  --card-beige:#EAE0CF; /* mockup --card (productkaart-beige) */
  --card-soft:#F0E8DA;  /* mockup --card-soft */

  /* Beige & taupe scale — EXACT match met de mockup */
  --beige:#D9C8B0;      /* mockup --beige */
  --beige-mid:#D9C8B0;
  --beige-dark:#C9B59A;
  --taupe:#A89481;      /* mockup --taupe */
  --taupe-dark:#8A7866;

  /* Mint accent (mockup primaire accent) */
  --mint:#C6DED5;
  --mint-dark:#A8C6BA;

  /* Sage accent (subtle) — EXACT match met de mockup */
  --sage:#B8C7B4;       /* mockup --sage */
  --sage-dark:#9CAE96;
  --sage-soft:#D6E0CE;

  /* Text — EXACT match met de mockup */
  --ink:#1A1814;
  --ink-soft:#6B6259;   /* mockup --ink-soft */
  --ink-mute:#736B60;   /* a11y-audit: was #A39A8F (~2.3:1, faalt WCAG) → #736B60 = 5.25:1 op wit / 4.6:1 op crème */
  --white:#FFFFFF;      /* mockup --white */

  /* Utility — line exact match met de mockup */
  --line:#DDD3C2;       /* mockup --line */
  --line-soft:#EBE2D0;
  --line-dot:#C5B89F;
  --error:#B8482A;
  --error-soft:#F1D9CF;
  --success:#4A6B47;
  --success-soft:#D9E2D5;

  /* Radius — EXACT match met de mockup */
  --r-sm:12px;          /* mockup --r-sm */
  --r:20px;             /* mockup --r */
  --r-lg:30px;          /* mockup --r-lg */
  --r-xl:44px;          /* mockup --r-xl */

  /* Shadow */
  --shadow-sm:0 4px 14px rgba(31,27,24,.04);
  --shadow:0 8px 30px rgba(31,27,24,.06);
  --shadow-lg:0 20px 50px rgba(31,27,24,.10);
}

/* ===== ACCESSIBILITY ===== */
/* Skip-to-content link (verborgen tot focus) */
.skip-link,.screen-reader-text{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  position:absolute;left:18px;top:18px;width:auto;height:auto;z-index:1000;
  padding:14px 22px;background:var(--ink);color:#fff;
  font-size:.86rem;font-weight:500;letter-spacing:.04em;border-radius:8px;
  outline:none;
}

/* WCAG 2.1 AA — duidelijke focus indicators op alle interactive elementen */
*:focus-visible{
  outline:2px solid var(--ink);outline-offset:2px;border-radius:4px;
}
button:focus-visible,
.btn:focus-visible,
.icon-btn:focus-visible{outline-offset:3px}
a:focus-visible{outline-offset:3px;text-decoration:underline}

/* Reduced motion (gebruikers die animations willen vermijden) */
@media(prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* High contrast support */
@media(prefers-contrast: more){
  :root{
    --line:#000000;
    --ink-soft:#000000;
  }
  .btn-light{border-width:2px}
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;scroll-padding-top:120px}
body{
  font-family:'Montserrat',sans-serif;
  font-weight:400;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
  width:100%;
  max-width:100%;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}

/* Typography — title-case headings (referentie "Blissful": rustig, geen all-caps).
   .caps blijft een opt-in utility voor de plekken waar we bewust kapitalen willen. */
h1,h2,h3,h4{
  font-weight:500;
  letter-spacing:-.01em;
  text-transform:none;
  line-height:1.1;
}
.caps{
  font-weight:400;
  letter-spacing:.005em;
  text-transform:uppercase;
  line-height:1.06;
}
h1{font-size:clamp(2rem,4.4vw,4rem);letter-spacing:-.02em}
h2{font-size:clamp(1.7rem,2.8vw,2.6rem);letter-spacing:-.015em}
h3{font-size:clamp(1.1rem,1.4vw,1.3rem);letter-spacing:-.005em}
.lower{text-transform:none;letter-spacing:0;font-weight:400}
.eyebrow{
  font-size:.7rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--success); /* strak sage-label i.p.v. het oude streepje/'//'-motief */
  font-weight:600;
}
.sup{font-size:.46em;letter-spacing:0;vertical-align:super;font-weight:400;margin-left:2px;opacity:.7}

/* Layout */
.wrap{max-width:1440px;margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:980px;margin:0 auto;padding:0 28px}
.wrap-tight{max-width:760px;margin:0 auto;padding:0 28px}
section{padding:80px 0}
@media(max-width:768px){section{padding:54px 0}}

/* ===== TOP BAR (B2B utility) ===== */
.topbar{
  background:var(--ink);color:rgba(239,230,215,.72);
  font-size:.68rem;letter-spacing:.06em;text-transform:none;
  font-weight:400;
}
.topbar-inner{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 28px;max-width:1440px;margin:0 auto;gap:14px;
}
.topbar-left,.topbar-right{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.topbar a{color:#fff;display:inline-flex;align-items:center;gap:6px}
.topbar a:hover{opacity:.8}
.topbar .sep{opacity:.4}
.topbar svg{opacity:.7}
/* Taalswitcher (topbar) */
.lang-switch{display:inline-flex;align-items:center;gap:2px}
.lang-switch__item{
  /* Tap-zone >=40px hoog (toegankelijk op mobiel) zonder de topbar te laten
     groeien: de extra hoogte wordt via negatieve verticale marge in de
     bestaande topbar-padding (6px boven/onder) opgevangen. */
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;min-width:40px;margin-block:-10px;
  padding:2px 8px;border-radius:6px;font-size:.66rem;letter-spacing:.08em;
  font-weight:500;opacity:.7;transition:opacity .2s,background .2s;
}
.lang-switch__item:hover{opacity:1;background:rgba(31,27,24,.06)}
.lang-switch__item.is-active{opacity:1;background:var(--ink);color:#fff}
@media(max-width:760px){
  .topbar-left{display:none}
  .topbar-inner{justify-content:center;padding:8px 16px}
  .topbar-right{font-size:.66rem;gap:10px}
}

/* ===== ANNOUNCEMENT (announcement strip below topbar) ===== */
.announce{
  background:var(--beige);color:var(--ink);
  font-size:.76rem;letter-spacing:.02em;text-transform:none;
  text-align:center;padding:8px 20px;font-weight:400;
}
.announce span{margin:0 12px;opacity:.5}
.announce strong{font-weight:600}

/* ===== HEADER ===== */
header.site{
  position:sticky;top:0;z-index:60;
  background:rgba(245,240,230,.96);
  backdrop-filter:blur(14px);
  /* Geen vaste lijn onder de header — die las storend ("zwarte lijn"). De
     subtiele scheiding ontstaat door de blur + lichte schaduw bij scrollen. */
  border-bottom:1px solid transparent;
}
header.site .head-wrap{position:relative}
.head-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px;max-width:1440px;margin:0 auto;gap:24px;
}
.logo{
  font-weight:400;font-size:1.55rem;letter-spacing:.08em;
  text-transform:uppercase;display:flex;align-items:flex-end;gap:4px;
  flex:0 0 auto;
}
.logo small{
  font-size:.44rem;letter-spacing:.22em;
  color:var(--ink-soft);margin-bottom:7px;font-weight:500;
  max-width:100px;line-height:1.2;
}
/* Geüpload logo (umi-header) — hoogte-begrensd zodat het de header niet oprekt. */
.logo .site-logo-img{
  display:block;height:34px;width:auto;max-width:200px;object-fit:contain;
}
@media(max-width:1240px){.logo .site-logo-img{height:30px;max-width:170px}}
nav.main{
  display:flex;gap:2px;align-items:center;
}
nav.main > .nav-item,
nav.main > a{
  font-size:.92rem;letter-spacing:0;text-transform:none;
  color:var(--ink);font-weight:500;
  padding:12px 16px;border-radius:12px;transition:all .2s;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
}
/* Mega-item: de binnenste link óók inline-flex zodat label + chevron altijd
   op één regel staan (chevron netjes naast de tekst, nooit eronder). */
nav.main > .nav-item > a{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  color:inherit;text-decoration:none;
}
/* .nav-item mag NIET positioned zijn — anders ankert het mega-paneel eraan
   (zo smal als de knop) i.p.v. aan de volle headerbreedte. Alleen losse
   top-links krijgen position:relative voor hun actieve underline. */
nav.main > a{position:relative}
nav.main > .nav-item{position:static}
nav.main > a:hover,nav.main > .nav-item:hover{background:var(--card-soft)}
/* Open mega-item duidelijk markeren + chevron meedraaien */
nav.main > .nav-item > a svg{transition:transform .25s ease;opacity:.6;flex:0 0 auto;position:relative;top:1px}
nav.main > .nav-item:hover > a svg,
nav.main > .nav-item:focus-within > a svg,
nav.main > .nav-item.open > a svg{transform:rotate(180deg);opacity:1}
nav.main > .nav-item:hover,
nav.main > .nav-item:focus-within,
nav.main > .nav-item.open{background:var(--card-soft)}
nav.main > a.active,nav.main > .nav-item.active{color:var(--ink)}
nav.main > a.active::after,nav.main > .nav-item.active::after{
  content:'';position:absolute;bottom:6px;left:18px;right:18px;
  height:1.5px;background:var(--ink);border-radius:2px;
}

/* Mega-menu dropdown — full-width below header, never overlapping itself */
nav.main{position:static} /* NIET het ankerpunt — anders is het paneel zo smal als de nav */
.nav-item{position:static}  /* dropdown moet de volledige headerbreedte spannen (.head-wrap) */

.dropdown-panel{
  /* Positioneer t.o.v. de header (volledige breedte van viewport) */
  position:absolute;top:100%;left:0;right:0;width:100%;
  background:var(--card);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  box-shadow:0 10px 24px rgba(26,24,20,.05);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s ease;
  z-index:79;
  padding:36px 0 30px;
  /* visibility:hidden blokkeert interactie als gesloten; pointer-events:none
     niet nodig (brak het bereiken van het paneel via de hover-bridge). */
}
/* Hover-bridge: onzichtbare strook tussen knop en paneel, zodat het paneel
   niet sluit terwijl de muis de dode zone oversteekt. Is alleen "live" als het
   paneel zichtbaar is (erft visibility van het verborgen paneel). */
.nav-item .dropdown-panel::before{
  content:'';position:absolute;left:0;right:0;bottom:100%;height:34px;
}
.nav-item:hover .dropdown-panel,
.nav-item:focus-within .dropdown-panel,
.nav-item.open .dropdown-panel{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
}

/* CRITICAL: anchor the dropdown to the HEADER, not to the small nav-item button.
   Het walker-template moet dit kunnen via position:absolute van .nav-item naar het header element.
   We voorkomen overlap door .dropdown-panel altijd over de hele header breed te laten zijn. */
header.site .head-wrap{position:relative}
header.site .nav-item .dropdown-panel{
  left:0;right:0;width:100%;max-width:100%;
  transform:translateY(-8px);
}
header.site .nav-item:hover .dropdown-panel,
header.site .nav-item:focus-within .dropdown-panel,
header.site .nav-item.open .dropdown-panel{
  transform:translateY(0);
}

/* Flex i.p.v. een vaste 4-koloms grid: de kolommen (meestal 2: Categorieën +
   Snel naar) staan nu netjes links naast elkaar i.p.v. uitgesmeerd over lege
   cellen. De promo (indien aanwezig) wordt rechts uitgelijnd. Veel rustiger. */
.dropdown-grid{
  max-width:1440px;margin:0 auto;padding:0 28px;
  display:flex;flex-wrap:wrap;gap:24px 0;
  align-items:stretch;
}
.dropdown-col{
  flex:0 1 250px;min-width:200px;
  background:transparent !important; /* GEEN witte achtergrond op losse kolom */
}
/* Visuele "Categorieën"-kolom: groeit en vult de volledige breedte met tegels. */
.dropdown-col--visual{flex:1 1 560px;min-width:0}
/* Tekstkolommen (bv. "Snel naar") → nette rechter-rail met scheidingslijn. */
.dropdown-grid .dropdown-col:not(.dropdown-col--visual){
  flex:0 0 240px;margin-left:48px;padding-left:48px;border-left:1px solid var(--line-soft);
}
.dropdown-grid .dropdown-col:not(.dropdown-col--visual) a::after{
  content:"→";margin-left:8px;opacity:.35;transition:opacity .15s ease,transform .15s ease;
}
.dropdown-grid .dropdown-col:not(.dropdown-col--visual) a:hover::after{opacity:.8;transform:translateX(2px)}
.dropdown-col-links.dd-tiles{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:18px 16px;margin-top:2px;
}
.dd-tile{
  display:flex;flex-direction:column;gap:9px;padding:0;margin:0;border:none;border-radius:14px;
  text-transform:none;letter-spacing:0;color:var(--ink);background:none;justify-content:flex-start;
}
.dd-tile:hover{background:none}
.dd-tile__img{
  display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;
  background:var(--bg-soft);border:1px solid var(--line-soft);transition:border-color .2s ease;
}
.dd-tile__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.dd-tile__label{
  display:flex;align-items:center;gap:6px;padding:0 2px;
  font-size:.86rem;font-weight:500;color:var(--ink);line-height:1.3;
}
.dd-tile__label .cnt{font-size:.68rem;color:var(--ink-mute);font-weight:400}
.dd-tile:hover .dd-tile__img{border-color:var(--taupe)}
.dd-tile:hover .dd-tile__img img{transform:scale(1.05)}
.dd-tile:hover .dd-tile__label{color:var(--taupe-dark)}
.dd-tile:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:16px}
.dd-tile:focus-visible .dd-tile__img{border-color:var(--ink)}
@media(max-width:1100px){
  .dropdown-col-links.dd-tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .dropdown-grid .dropdown-col:not(.dropdown-col--visual){
    flex-basis:100%;margin-left:0;padding-left:0;border-left:none;
    margin-top:8px;padding-top:18px;border-top:1px solid var(--line-soft);
  }
}
.dropdown-col h4{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:14px;font-weight:500;
  padding-bottom:8px;border-bottom:1px solid var(--line-soft);
}
.dropdown-col a{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 12px;margin:1px -12px;border-radius:12px;
  font-size:.88rem;color:var(--ink);
  text-transform:none;letter-spacing:0;font-weight:400;
  transition:background .18s ease,color .18s ease;line-height:1.35;
  word-break:break-word;
}
/* Duidelijke hover: hele rij licht het rustig op (geen vaag kleurtje meer) */
.dropdown-col a:hover,.dropdown-col a:focus-visible{
  background:var(--card-soft);color:var(--ink);outline:none;
}
.dropdown-col a .cnt{
  font-size:.7rem;color:var(--ink-mute);
  margin-left:8px;flex-shrink:0;
}
.dropdown-col a:hover .cnt{color:var(--taupe-dark)}

.dropdown-promo{
  margin-left:auto;flex:0 0 280px;max-width:300px;
  background:var(--bg-soft);border-radius:var(--r-lg);padding:24px;
  display:flex;flex-direction:column;justify-content:space-between;
  min-width:0;
}
.dropdown-promo .eyebrow{font-size:.66rem;color:var(--ink);margin-bottom:8px}
.dropdown-promo h5{font-size:1.05rem;letter-spacing:.02em;text-transform:uppercase;margin-bottom:8px;font-weight:400}
.dropdown-promo p{font-size:.82rem;color:var(--ink-soft);line-height:1.5;margin-bottom:14px;text-transform:none;letter-spacing:0}
.dropdown-promo img{width:100%;border-radius:14px;margin-top:12px}

@media(max-width:1200px){
  .dropdown-grid{gap:18px 48px}
  .dropdown-promo{display:none}
}
@media(max-width:1000px){
  /* Mobile menu neemt het over — verberg desktop mega-menu */
  .dropdown-panel{display:none}
}
.head-actions{display:flex;gap:4px;align-items:center}
.icon-btn{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--ink);
  transition:background .2s,transform .15s;position:relative;
}
.icon-btn:hover{background:var(--card-soft)}
.cart-count{
  position:absolute;top:4px;right:4px;
  width:17px;height:17px;border-radius:50%;
  background:var(--ink);color:#fff;
  font-size:.6rem;display:flex;align-items:center;justify-content:center;
  font-weight:500;
}
.burger{display:none}
/* MOBIEL/TABLET: hamburger + slide-in menu (met submenu's). De horizontale
   scroll-balk was onhandig (items vielen weg, submenu's onbereikbaar). */
@media(max-width:1000px){
  .burger{display:flex !important}
  nav.main{display:none !important}
  .head-inner{align-items:center}
  .head-actions{margin-left:auto}
}

/* Mobile menu — uit beeld via visibility (NIET via off-screen positie) zodat
   het nooit document-/scrollbreedte toevoegt. width geклemd op viewport. */
.mobile-menu{
  position:fixed;top:0;bottom:0;right:0;left:auto;
  width:min(360px,100%);max-width:100%;
  background:var(--bg);z-index:90;
  visibility:hidden;opacity:0;
  transform:translateX(100%);
  transition:transform .35s ease,opacity .35s ease,visibility .35s ease;
  will-change:transform;
  padding:80px 0 40px;display:flex;flex-direction:column;gap:0;
  overflow-y:auto;overflow-x:hidden;
  border-left:1px solid var(--line-soft);
  box-shadow:-12px 0 30px rgba(26,24,20,.06);
}
.mobile-menu.open{visibility:visible;opacity:1;transform:translateX(0)}

/* Inhoud scrollt; padding zit op de wrapper zodat de sluit-knop vast blijft. */
.mobile-menu .mm-scroll{display:flex;flex-direction:column;gap:0}

/* ── Hoofdcategorie-rij: klikbare link + aparte chevron-toggle ───────────── */
.mobile-menu .mm-cat{border-bottom:1px solid var(--line-soft)}
.mobile-menu .mm-cat-row{display:flex;align-items:stretch}
.mobile-menu .mm-cat-link{
  flex:1 1 auto;display:flex;align-items:center;gap:10px;
  padding:15px 6px 15px 28px;min-height:54px;
  font-size:1.04rem;font-weight:500;letter-spacing:.01em;color:var(--ink);
  text-transform:none;text-decoration:none;
}
.mobile-menu .mm-count{
  font-size:.7rem;font-weight:500;color:var(--ink-mute);
  background:var(--bg-soft);border-radius:999px;padding:2px 8px;line-height:1.4;
}
.mobile-menu .mm-toggle{
  flex:0 0 auto;width:54px;min-height:54px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-left:1px solid var(--line-soft);
  color:var(--ink-soft);cursor:pointer;
}
.mobile-menu .mm-chevron{transition:transform .25s ease}
.mobile-menu .mm-toggle[aria-expanded="true"] .mm-chevron{transform:rotate(180deg)}

/* ── Subcategorieën (accordion-paneel) ──────────────────────────────────── */
.mobile-menu .mm-sub{display:flex;flex-direction:column;background:var(--bg-soft)}
.mobile-menu .mm-sub[hidden]{display:none}
.mobile-menu .mm-sub-link{
  display:flex;align-items:center;min-height:48px;
  padding:11px 28px 11px 28px;
  font-size:.92rem;font-weight:400;color:var(--ink-soft);
  text-decoration:none;border-top:1px solid var(--line-soft);
}
.mobile-menu .mm-sub-link:first-child{border-top:none}
.mobile-menu .mm-sub-all{font-weight:500;color:var(--ink)}

/* ── Losse, expliciete links ────────────────────────────────────────────── */
.mobile-menu .mm-link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:54px;padding:15px 28px;
  font-size:1.04rem;font-weight:500;letter-spacing:.01em;color:var(--ink);
  text-transform:none;text-decoration:none;border-bottom:1px solid var(--line-soft);
}
.mobile-menu .mm-link--shop{color:var(--success);font-weight:500}
.mobile-menu .mm-link--shop svg{color:var(--success)}
.mobile-menu .mm-links{margin-top:6px}

/* ── Footer: telefoon + e-mail ──────────────────────────────────────────── */
.mobile-menu .mm-foot{
  margin-top:10px;padding:18px 28px 4px;
  display:flex;flex-direction:column;gap:4px;
}
.mobile-menu .mm-foot-item{
  display:flex;align-items:center;gap:10px;min-height:44px;
  font-size:.9rem;font-weight:400;color:var(--ink-soft);text-decoration:none;
}
.mobile-menu .mm-foot-item svg{color:var(--success);flex:0 0 auto}

.mobile-menu .m-close{
  position:absolute;top:18px;right:18px;z-index:1;
  width:44px;height:44px;border-radius:50%;
  background:var(--card);display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-soft);color:var(--ink);cursor:pointer;
}

/* ===== BUTTONS ===== */
/* Alle knoppen delen exact dezelfde verticale maatvoering (line-height + padding)
   zodat varianten naast elkaar altijd even hoog uitlijnen. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:999px;
  min-height:50px;line-height:1.1;
  font-size:.92rem;letter-spacing:.01em;text-transform:none;
  font-weight:500;transition:background-color .25s,color .25s,border-color .25s;cursor:pointer;
  border:1px solid transparent;white-space:nowrap;
  text-align:center;vertical-align:middle;
}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#3C342D}
.btn-light{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-light:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-sage{background:var(--sage);color:var(--ink)}
.btn-sage:hover{background:var(--sage-dark)}
.btn-error{background:var(--error);color:#fff}
.btn-error:hover{background:#9C3D24}
.btn-large{padding:18px 36px;font-size:1rem;min-height:58px}
.btn-small{padding:12px 18px;font-size:.84rem;min-height:44px}
.btn-block{display:flex;width:100%}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(4px)}

/* ===== BUTTON GROUPS (consistente verdeling & uitlijning) =====
   Hero-CTA's, B2B-CTA's, buy-rows: gelijke gap, top-uitgelijnd op één rij,
   knoppen even hoog. Op mobiel netjes full-width gestackt. */
.btn-group,
.b2b-ctas,
.hero-ctas,
.buy-row{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;
}
.btn-group > .btn,
.b2b-ctas > .btn,
.hero-ctas > .btn,
.buy-row > .btn{margin:0}
/* Stretch-uitlijning zorgt dat knoppen op één rij even hoog zijn ongeacht inhoud. */
.btn-group.center,
.b2b-ctas.center,
.hero-ctas.center{justify-content:center}
@media(max-width:520px){
  .btn-group,
  .b2b-ctas,
  .hero-ctas,
  .buy-row{flex-direction:column;align-items:stretch;gap:10px}
  .btn-group > .btn,
  .b2b-ctas > .btn,
  .hero-ctas > .btn,
  .buy-row > .btn{width:100%}
}

/* ===== BREADCRUMBS ===== */
.crumbs{
  padding:24px 0 0;font-size:.8rem;letter-spacing:.01em;
  text-transform:none;color:var(--ink-soft);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.crumbs a{transition:color .2s}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.4}
.crumbs .now{color:var(--ink)}

/* ===== SECTION HEAD ===== */
.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:34px;gap:24px;flex-wrap:wrap;
}
.sec-head h2{font-size:clamp(1.3rem,2.6vw,2.1rem);font-weight:400;letter-spacing:-.005em;text-transform:none;line-height:1.08;margin-bottom:0}
.sec-head .eyebrow{margin-bottom:10px}
.sec-head .link{
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--ink);padding-bottom:3px;
  transition:gap .2s;
}
.sec-head .link:hover{gap:14px}
.sec-head.center{flex-direction:column;align-items:center;text-align:center}

/* ===== PAGE HERO =====
   Geen aparte beige "balk" meer (gaf een rommelig wit/beige-vlak-gevoel) —
   de hero deelt nu de paginakleur en wordt subtiel afgesloten met een hairline.
   Links uitgelijnd: oogt professioneler dan gecentreerde losse tekst. */
.page-hero{
  background:transparent;
  padding:52px 0 30px;
  margin-bottom:34px;
  border-bottom:1px solid var(--line-soft);
}
.page-hero .wrap{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.page-hero h1{max-width:840px;letter-spacing:-.01em;margin:0}
.page-hero .lead{
  max-width:600px;font-size:1.02rem;color:var(--ink-soft);
  line-height:1.6;text-transform:none;letter-spacing:0;font-weight:400;margin:0;
}
/* Centreren blijft mogelijk waar een template dat expliciet vraagt. */
.page-hero .wrap.text-center{align-items:center;text-align:center}
@media(max-width:760px){.page-hero{padding:36px 0 22px;margin-bottom:24px}}

/* ===== USP BAR ===== */
.usp-bar{
  background:var(--card);border-radius:var(--r-xl);
  padding:22px 24px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  border:1px solid var(--line-soft);
}
@media(max-width:900px){.usp-bar{grid-template-columns:repeat(2,minmax(0,1fr))}}
.usp{display:flex;align-items:center;gap:14px;padding:8px 10px}
.usp-ic{
  width:42px;height:42px;border-radius:50%;
  background:var(--bg-soft);display:flex;align-items:center;justify-content:center;
  color:var(--ink);flex-shrink:0;
}
.usp-t{font-size:.82rem;font-weight:500;letter-spacing:.01em}
.usp-s{font-size:.7rem;color:var(--ink-soft);margin-top:2px;letter-spacing:0}

/* ===== PRODUCT CARDS ===== */
.prod-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.prod-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.prod-grid,.prod-grid.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.prod-grid{gap:10px}}

.product{
  background:var(--card-beige);border-radius:var(--r-lg);
  padding:22px;display:flex;flex-direction:column;gap:14px;
  transition:background .25s,border-color .25s;
  cursor:pointer;border:1px solid transparent;position:relative;
}
/* Rustige hover: geen lift + zware schaduw meer (was te druk), alleen subtiele
   achtergrond + randaccent. */
.product:hover{background:var(--card-soft);border-color:var(--line)}
.product-img{
  aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;
  background:var(--card-soft);position:relative;
}
.product:hover .product-img{background:var(--card-beige)}
.product-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;
}
.product:hover .product-img img{transform:scale(1.05)}
.product-tag{
  position:absolute;top:12px;left:12px;
  background:var(--card);color:var(--ink);
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;font-weight:500;
}
.product-tag.sale{background:var(--ink);color:#fff}
.product-tag.new{background:var(--sage);color:var(--ink)}
.fav{
  position:absolute;top:12px;right:12px;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;color:var(--ink);
}
.fav:hover{background:#fff;transform:scale(1.1)}
.fav.on svg{fill:var(--ink)}
.product-brand{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);
}
.product-name{font-size:.88rem;color:var(--ink);line-height:1.4;font-weight:400}
.product-meta{font-size:.74rem;color:var(--ink-mute);text-transform:none;letter-spacing:0}
.product-foot{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:auto;padding-top:8px;
}
.price{font-size:1rem;letter-spacing:.02em;font-weight:400;color:var(--ink)}
.price .old{font-size:.78rem;color:var(--ink-mute);text-decoration:line-through;margin-right:6px}
.add-btn{
  width:44px;height:44px;border-radius:50%;
  background:var(--card);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:all .25s;
}
.add-btn:hover{background:var(--ink);color:#fff;transform:rotate(90deg)}
.add-btn.added{background:var(--sage);color:var(--ink);transform:none}

/* ===== INPUT & FORMS ===== */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field-label{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;display:flex;justify-content:space-between;
}
.field-label .opt{color:var(--ink-mute);font-weight:400;letter-spacing:.04em;text-transform:none}
.input{
  background:var(--card);border:1px solid var(--line);
  padding:14px 18px;border-radius:14px;
  font-size:.94rem;letter-spacing:0;color:var(--ink);
  transition:border-color .2s,box-shadow .2s;outline:none;
  width:100%;
}
.input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(31,27,24,.06)}
.input::placeholder{color:var(--ink-mute)}
textarea.input{resize:vertical;min-height:120px;line-height:1.5}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.field-row{grid-template-columns:1fr}}

.check{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.86rem;letter-spacing:0;text-transform:none}
.check input{accent-color:var(--ink);width:17px;height:17px;cursor:pointer}

/* ===== BADGES & PILLS ===== */
/* ---------- BADGES — verfijnd, modern, "frosted" over foto's ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.82);color:var(--ink);
  -webkit-backdrop-filter:blur(10px) saturate(1.25);backdrop-filter:blur(10px) saturate(1.25);
  border:1px solid rgba(255,255,255,.55);
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  padding:6px 12px;border-radius:999px;line-height:1;white-space:nowrap;
}
/* Solide varianten (geen blur nodig). */
.badge.sage{background:var(--sage);color:var(--ink);border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.badge.dark{background:var(--ink);color:#fff;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.badge.sale{background:#B4654A;color:#fff;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.badge.success{background:var(--success-soft);color:var(--success);border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.badge.error{background:var(--error-soft);color:var(--error);border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
/* Status-stip op "nieuw" (sage) en verkoop-accenten — geeft een levendig signaal. */
.badge.sage::before,
.badge.sale::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;display:block;flex:0 0 auto}

/* ===== TABLES (for cart, order, etc.) ===== */
.row-table{display:flex;flex-direction:column;gap:0}
.row-item{
  display:grid;grid-template-columns:80px 1fr auto;gap:18px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--line-soft);
}
@media(max-width:600px){
  .row-item{grid-template-columns:60px 1fr;gap:12px}
  .row-item .row-actions{grid-column:1/-1;justify-content:flex-end;padding-top:6px}
}
.row-item:last-child{border-bottom:none}
.row-thumb{
  width:80px;height:80px;border-radius:14px;overflow:hidden;
  background:var(--bg-soft);flex-shrink:0;
}
@media(max-width:600px){.row-thumb{width:60px;height:60px}}
.row-thumb img{width:100%;height:100%;object-fit:cover}
.row-info{min-width:0}
.row-info .name{font-size:.96rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink);overflow-wrap:break-word}
.row-info .meta{font-size:.78rem;color:var(--ink-soft);margin-top:4px}
.row-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.row-actions .price-large{font-size:1.05rem;letter-spacing:.02em}

/* ===== QTY SELECTOR ===== */
.qty{
  display:inline-flex;align-items:center;background:var(--bg-soft);
  border-radius:999px;padding:3px;
}
.qty button{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;color:var(--ink);
}
.qty button:hover{background:var(--card)}
.qty input{
  width:36px;text-align:center;background:transparent;border:none;
  font-size:.92rem;outline:none;
}

/* ===== STAR RATING ===== */
.stars{color:var(--ink);letter-spacing:2px;font-size:.9rem}
.rating-row{display:flex;align-items:center;gap:10px;font-size:.84rem;color:var(--ink-soft)}
.rating-row .stars{font-size:.92rem}

/* ===== FILTERS SIDEBAR ===== */
.filters{
  background:var(--card);border-radius:var(--r-lg);padding:24px;
  border:1px solid var(--line-soft);position:sticky;top:96px;
}
.filter-group{padding:14px 0;border-bottom:1px solid var(--line-soft)}
.filter-group:last-child{border-bottom:none}
.filter-group h4{
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:12px;font-weight:500;
}
.filter-options{display:flex;flex-direction:column;gap:8px;font-size:.84rem}
.filter-options label{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 0;cursor:pointer;color:var(--ink-soft);
  transition:color .2s;text-transform:none;letter-spacing:0;
}
.filter-options label:hover{color:var(--ink)}
.filter-options label input{margin-right:10px;accent-color:var(--ink)}
.filter-options .cnt{font-size:.72rem;color:var(--ink-mute)}

/* ===== SHOP LAYOUT (admin-configurable via Customizer) ===== */
.shop-layout{display:grid;grid-template-columns:240px minmax(0,1fr) 320px;gap:30px;align-items:flex-start}
.shop-layout[data-layout="filters-right"]{grid-template-columns:1fr 240px}
.shop-layout[data-layout="filters-right"] .filters{order:2}
.shop-layout[data-layout="filters-top"]{grid-template-columns:1fr}
.shop-layout[data-layout="filters-top"] .filters{display:flex;flex-wrap:wrap;gap:14px;background:transparent;padding:0;border:none;position:static}
.shop-layout[data-layout="no-filters"]{grid-template-columns:1fr 320px}
.shop-layout[data-layout="no-sidebar"],
.shop-layout[data-layout="filters-only"]{grid-template-columns:240px 1fr}
@media(max-width:1100px){.shop-layout{grid-template-columns:200px 1fr 280px;gap:24px}}
@media(max-width:900px){.shop-layout,.shop-layout[data-layout]{grid-template-columns:1fr}}

.filter-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line-soft)}
.filter-head h3{font-size:.86rem;letter-spacing:.18em;font-weight:500;margin:0}
.filter-reset{font-size:.72rem;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;letter-spacing:.04em}
.filter-reset:hover{color:var(--ink)}

.filter-color-swatches{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.filter-swatch{
  width:28px;height:28px;border-radius:50%;cursor:pointer;display:inline-block;
  border:2px solid var(--card);box-shadow:0 0 0 1px var(--line);
  transition:transform .15s,box-shadow .2s;
}
.filter-swatch:hover{transform:scale(1.1);box-shadow:0 0 0 1px var(--ink)}
.filter-swatch.active{box-shadow:0 0 0 2px var(--ink)}

.filter-price-form{display:flex;flex-direction:column;gap:8px}
.filter-price-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Shop toolbar */
.shop-toolbar{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:14px;margin-bottom:18px;
  padding-bottom:18px;border-bottom:1px solid var(--line-soft);
}

/* Product cards (admin-switchable via Customizer) */
body.umi-card-white .product{background:var(--card);box-shadow:var(--shadow-sm)}
body.umi-card-white .product-img img{mix-blend-mode:normal}
body.umi-card-minimal .product{background:transparent;padding:0;border-radius:0}
body.umi-card-minimal .product-img{background:var(--bg-soft);border-radius:18px}

/* ===== EMPTY STATE ===== */
.empty{
  background:var(--card);border-radius:var(--r-lg);padding:60px 40px;
  text-align:center;border:1px solid var(--line-soft);
}
.empty .ic{
  width:64px;height:64px;border-radius:50%;
  background:var(--bg-soft);display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;color:var(--ink-soft);
}
.empty h3{font-size:1.4rem;margin-bottom:8px;text-transform:none;letter-spacing:-.005em}
.empty p{font-size:.92rem;color:var(--ink-soft);margin-bottom:24px;text-transform:none;letter-spacing:0;font-weight:400;max-width:380px;margin-left:auto;margin-right:auto}

/* ===== TOAST ===== */
.toast{
  position:fixed;bottom:30px;right:30px;
  background:var(--ink);color:#fff;
  padding:16px 22px;border-radius:14px;font-size:.82rem;
  box-shadow:var(--shadow-lg);
  transform:translateY(140%);opacity:0;
  transition:all .35s cubic-bezier(.2,.8,.2,1);z-index:200;
  display:flex;align-items:center;gap:12px;letter-spacing:.02em;
}
.toast.show{transform:translateY(0);opacity:1}
.toast svg{color:var(--sage)}
@media(max-width:560px){.toast{bottom:18px;left:18px;right:18px}}

/* ===== FOOTER ===== */
footer{padding:60px 0 28px;background:var(--bg-soft);margin-top:60px}
.foot-grid{display:grid;grid-template-columns:1.7fr repeat(auto-fit,minmax(150px,1fr));gap:40px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-col h4{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px;font-weight:500}
.foot-col a{display:block;font-size:.84rem;color:var(--ink-soft);padding:6px 0;transition:color .2s}
.foot-col a:hover{color:var(--ink)}
.foot-brand h3{font-size:1.4rem;letter-spacing:.12em;margin-bottom:14px;text-transform:uppercase;font-weight:400}
.foot-brand p{font-size:.86rem;color:var(--ink-soft);max-width:280px;line-height:1.6}
.foot-social{display:flex;gap:8px;margin-top:18px}
.foot-social a{
  width:38px;height:38px;border-radius:50%;background:var(--card);
  display:flex;align-items:center;justify-content:center;transition:all .2s;padding:0;
}
.foot-social a:hover{background:var(--ink);color:#fff}
.foot-bottom{
  margin-top:50px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-size:.74rem;color:var(--ink-soft);letter-spacing:.06em;
}
.foot-bottom div{display:flex;gap:20px;flex-wrap:wrap}

/* ===== TWO-COL LAYOUTS (cart, checkout, account) ===== */
.split-2{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:flex-start}
@media(max-width:980px){.split-2{grid-template-columns:1fr;gap:30px}}
.split-3{display:grid;grid-template-columns:240px minmax(0,1fr) 380px;gap:30px;align-items:flex-start}
@media(max-width:1200px){.split-3{grid-template-columns:200px 1fr 320px;gap:24px}}
@media(max-width:900px){.split-3{grid-template-columns:1fr}}

.panel{
  background:var(--card);border-radius:var(--r-lg);padding:28px;
  border:1px solid var(--line-soft);
}
.panel + .panel{margin-top:16px}
.panel-h{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:18px;flex-wrap:wrap;gap:14px;
}
.panel-h h3{font-size:1.05rem;letter-spacing:.04em}

.summary{
  background:var(--card);border-radius:var(--r-lg);padding:28px;
  border:1px solid var(--line-soft);position:sticky;top:96px;
}
.summary h3{font-size:1.05rem;letter-spacing:.04em;margin-bottom:18px}
.summary-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;font-size:.88rem;letter-spacing:0;text-transform:none;color:var(--ink-soft);
}
.summary-row.total{
  padding-top:18px;margin-top:8px;border-top:1px solid var(--line);
  font-size:1.05rem;color:var(--ink);letter-spacing:.02em;font-weight:500;
}
.summary-row.total b{font-weight:500}

/* Progress bar (free shipping) */
.progress{
  background:var(--bg-soft);border-radius:999px;height:6px;
  overflow:hidden;margin:8px 0;
}
.progress-fill{background:var(--sage-dark);height:100%;border-radius:999px;transition:width .4s}
.shipping-bar{
  background:var(--sage-soft);border-radius:var(--r);padding:14px 18px;
  margin-bottom:18px;
}
.shipping-bar .lbl{font-size:.78rem;color:var(--ink);font-weight:500;display:flex;justify-content:space-between;letter-spacing:0;text-transform:none;flex-wrap:wrap;gap:6px}
.shipping-bar .lbl > span{min-width:0}
@media(max-width:600px){.shipping-bar .lbl{flex-direction:column;align-items:flex-start}}
.shipping-bar.done{background:var(--success-soft)}

/* ===== TABS ===== */
.tabs{
  display:flex;gap:28px;border-bottom:1px solid var(--line);
  margin-bottom:24px;overflow-x:auto;
}
.tabs button,.tabs a{
  padding:14px 0;font-size:.86rem;letter-spacing:.06em;
  color:var(--ink-soft);font-weight:500;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  white-space:nowrap;transition:all .2s;text-transform:none;
}
.tabs button:hover,.tabs a:hover{color:var(--ink)}
.tabs button.on,.tabs a.on{color:var(--ink);border-color:var(--ink)}

/* ===== TIMELINE (order tracking) ===== */
.timeline{display:flex;align-items:flex-start;justify-content:space-between;gap:0;position:relative;margin:30px 0}
.timeline::before{
  content:'';position:absolute;top:14px;left:14px;right:14px;
  height:2px;background:var(--line);border-radius:2px;z-index:0;
}
.tl-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}
.tl-dot{
  width:30px;height:30px;border-radius:50%;background:var(--card);
  border:2px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:.72rem;color:var(--ink-mute);font-weight:500;
}
.tl-step.done .tl-dot{background:var(--ink);border-color:var(--ink);color:#fff}
.tl-step.active .tl-dot{background:var(--sage);border-color:var(--sage-dark);color:var(--ink)}
.tl-step .lbl{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.tl-step.done .lbl,.tl-step.active .lbl{color:var(--ink)}
/* Rustiger winkelwagen-kop: kleinere titel, één nette rij, geen dubbele stap-tekst */
.cart-page-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 24px;flex-wrap:wrap;margin:8px 0 18px}
.cart-page-top h1{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.05;margin:0}
.cart-top-sub{color:var(--ink-soft);font-size:.95rem;line-height:1.5;margin:8px 0 0;max-width:46ch}
.cart-page-top .btn{flex:0 0 auto}
.timeline-cart{margin-top:4px}
.timeline-cart .tl-dot{width:26px;height:26px;font-size:.68rem}
.timeline-cart::before{top:12px}
.timeline-cart .lbl{font-size:.66rem;letter-spacing:.14em}

/* ===== FAQ ACCORDION ===== */
.faq-item{
  background:var(--card);border:1px solid var(--line-soft);
  border-radius:var(--r);overflow:hidden;margin-bottom:8px;
}
.faq-q{
  width:100%;padding:18px 22px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:.92rem;font-weight:500;letter-spacing:.01em;
  text-align:left;text-transform:none;
}
.faq-q .ic{
  width:30px;height:30px;border-radius:50%;background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;
  transition:all .25s;font-size:1rem;flex-shrink:0;
}
.faq-item.open .ic{transform:rotate(45deg);background:var(--ink);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 22px}
.faq-item.open .faq-a{max-height:600px;padding:0 22px 20px}
.faq-a p{font-size:.88rem;color:var(--ink-soft);line-height:1.65}
.faq-a p + p{margin-top:10px}

/* ===== STAT CARDS ===== */
.stat{
  background:var(--card);border-radius:var(--r-lg);padding:30px 26px;
  border:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:6px;
}
.stat .num{font-size:2.4rem;letter-spacing:-.01em;line-height:1;font-weight:400}
.stat .lbl{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-top:8px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:760px){.stat-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== PROMO STRIP ===== */
.promo-strip{
  background:var(--sage);color:var(--ink);
  border-radius:var(--r-xl);padding:30px 40px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.promo-strip .lft{display:flex;align-items:center;gap:18px}
.promo-strip .ic{
  width:48px;height:48px;border-radius:50%;background:var(--card);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.promo-strip h3{font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase;font-weight:500}
.promo-strip p{font-size:.86rem;color:var(--ink-soft);margin-top:2px;letter-spacing:0;text-transform:none}

/* ===== HOMEPAGE SECTIONS (1-op-1 met de mockup index.html) =====
   Globale homepage-layout uit de bindende mockup. Classes komen overeen met
   index.html zodat de live homepage identiek oogt. */

/* HERO */
.hero{padding:16px 0 44px}
.hero-stage{
  border-radius:var(--r-xl);overflow:hidden;position:relative;min-height:58vh;min-height:58dvh;
  background:linear-gradient(135deg,var(--beige) 0%,var(--beige-dark) 100%);
  background-size:cover;background-position:center 25%;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:44px;color:var(--white);
}
@media(max-width:760px){.hero-stage{padding:28px 22px;min-height:52vh;min-height:52dvh}}
@media(max-width:520px){.hero-stage{min-height:46vh;min-height:46dvh}.hero{padding:12px 0 32px}}
.hero-top{
  display:flex;justify-content:space-between;align-items:flex-start;width:100%;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;gap:24px;
}
.hero-top .left{display:flex;gap:24px;opacity:.85}
.hero-top .right{opacity:.85;text-align:right}
.hero-title-wrap{margin-top:auto}
.hero-title-wrap h1{max-width:880px;line-height:.98}
.hero-bottom{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-top:30px;gap:24px;flex-wrap:wrap;
}
.hero-cta-pill{
  display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:5px;
}
.hero-cta-pill .b{
  padding:13px 24px;border-radius:999px;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:400;color:var(--white);transition:all .2s;white-space:nowrap;
}
.hero-cta-pill .b.dark{background:var(--white);color:var(--ink)}
.hero-cta-pill .b.dark:hover{background:var(--mint)}
.hero-cta-pill .b:not(.dark):hover{background:rgba(255,255,255,.18)}
.hero-meta{
  display:flex;gap:34px;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;opacity:.85;flex-wrap:wrap;
}
.hero-meta .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--white);margin-right:8px;vertical-align:middle}

/* USP STRIP onder de hero (mockup: witte balk, 4 koloms) */
.usp-strip{
  background:var(--white);border-radius:var(--r-xl);
  padding:22px 24px;margin-top:18px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
@media(max-width:900px){.usp-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* CATEGORY TABS (typografische tabs met superscript-counts) —
   één horizontale rij, horizontaal scrollbaar (geen meerdere regels). */
.cat-strip{padding:30px 0 50px}
.cat-tabs{
  display:flex;gap:48px;align-items:flex-end;
  flex-wrap:nowrap;margin-bottom:34px;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;scroll-padding-left:4px;
  padding:4px 4px 14px;scrollbar-width:none;
}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tab{
  font-size:clamp(1.3rem,2.6vw,2.1rem);letter-spacing:-.005em;text-transform:capitalize;
  color:var(--ink-mute);font-weight:400;transition:color .2s,opacity .2s;
  display:inline-flex;align-items:flex-start;white-space:nowrap;
  flex:0 0 auto;scroll-snap-align:start;opacity:.6;
}
.cat-tab.active{opacity:1}
.cat-tab:hover,.cat-tab.active{color:var(--ink)}
.cat-tab .cnt{font-size:.4em;color:var(--ink-mute);margin-left:3px;font-weight:400;opacity:.8;vertical-align:super;letter-spacing:0}
.cat-tab.active .cnt{color:var(--ink-soft)}
/* Desktop: categorie-tabs passen netjes binnen beeld (wrap + gecentreerd) i.p.v.
   horizontaal scrollen — op mobiel blijft de swipe-scroll behouden. */
@media(min-width:901px){
  .cat-tabs{
    flex-wrap:wrap;justify-content:center;align-items:center;
    gap:14px 40px;overflow:visible;scroll-snap-type:none;padding-bottom:8px;
  }
  .cat-tab{font-size:clamp(1.25rem,1.9vw,1.85rem);scroll-snap-align:none}
}

/* CONSCIOUS TWO-COL BANNER */
.conscious{
  background:var(--white);border-radius:var(--r-xl);
  padding:64px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
}
@media(max-width:900px){.conscious{grid-template-columns:1fr;padding:40px 28px;gap:36px}}
.conscious h2{line-height:1.02;margin-bottom:18px}
.conscious .lead{
  font-size:.95rem;color:var(--ink-soft);max-width:480px;
  text-transform:none;letter-spacing:0;font-weight:400;line-height:1.65;
}
.conscious .lead + .lead{margin-top:16px}
.conscious-img{
  border-radius:50%;aspect-ratio:1/1;overflow:hidden;background:var(--card-soft);
  max-width:520px;justify-self:center;width:100%;
}
.conscious-img img{width:100%;height:100%;object-fit:cover}

/* PILLARS — herontwerp 'open editorial': geen kaders maar drie kolommen met
   hairline-scheiding, groot volgnummer (CSS-counter, geen HTML-wijziging) en een
   kort sage-streepje onder de titel. Rustig, magazine-achtig. */
.pillars{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:60px;
  border-top:1px solid var(--line);counter-reset:pillar;
}
.pillar{
  counter-increment:pillar;
  background:transparent;border:none;border-left:1px solid var(--line);border-radius:0;
  padding:32px 36px 16px;display:flex;flex-direction:column;gap:10px;
}
.pillar:first-child{border-left:none;padding-left:0}
/* Groot volgnummer bovenaan (01–03). */
.pillar::before{
  content:counter(pillar,decimal-leading-zero);
  font-size:2.1rem;line-height:1;font-weight:600;letter-spacing:-.02em;color:var(--beige-dark);
}
.pillar h3{
  margin-top:4px;font-size:1.5rem;font-weight:400;letter-spacing:-.01em;
  text-transform:lowercase;color:var(--ink);
}
/* Kort sage-streepje onder de titel. */
.pillar h3::after{content:"";display:block;width:30px;height:2px;background:var(--sage);margin-top:12px}
.pillar p{font-size:.92rem;color:var(--ink-soft);line-height:1.65;text-transform:none;letter-spacing:0;font-weight:400}
@media(max-width:760px){
  .pillars{grid-template-columns:1fr;border-top:none}
  .pillar{border-left:none;border-top:1px solid var(--line);padding:28px 0 16px}
  .pillar:first-child{border-top:none;padding-top:20px}
}

/* TESTIMONIALS */
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.test-grid{grid-template-columns:1fr}}
.test-card{
  background:var(--card-soft);border-radius:var(--r-lg);
  padding:30px 28px;display:flex;flex-direction:column;gap:16px;transition:background .25s;
}
.test-card:hover{background:var(--card-beige)}
.test-body{font-size:.94rem;color:var(--ink);line-height:1.6;text-transform:none;letter-spacing:0;font-weight:400}
.test-author{display:flex;align-items:center;gap:12px;padding-top:8px;margin-top:auto;border-top:1px solid var(--line)}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--beige);display:flex;align-items:center;justify-content:center;font-weight:400;font-size:.84rem;letter-spacing:.04em}
.test-author .name{font-size:.84rem;font-weight:400}
.test-author .role{font-size:.72rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.14em;margin-top:2px}

/* PROMO BAND (urgency) */
.promo-band{
  background:var(--mint);border-radius:var(--r-xl);padding:34px 40px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.promo-band .promo-l{display:flex;align-items:center;gap:18px}
.promo-band .ic{width:48px;height:48px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.promo-band h3{font-size:1.1rem;letter-spacing:.02em;text-transform:uppercase;font-weight:400;line-height:1.2}
.promo-band p{font-size:.84rem;color:var(--ink-soft);margin-top:2px;letter-spacing:0;text-transform:none;font-weight:400}

/* EDITORIAL BANNER */
.editorial{
  border-radius:var(--r-xl);overflow:hidden;position:relative;
  min-height:480px;color:var(--white);
  background-color:#6B6259; /* warme fallback zodat witte tekst leesbaar blijft zonder foto */
  background-size:cover;background-position:center;
  padding:clamp(40px,5vw,60px);display:flex;flex-direction:column;justify-content:space-between;gap:24px;
}
@media(max-width:760px){.editorial{padding:36px 28px;min-height:420px}}
.editorial-top{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:.72rem;letter-spacing:.12em;opacity:.85}
.editorial h2{margin-bottom:14px;max-width:540px}
.editorial .lead{font-size:.95rem;max-width:440px;text-transform:none;letter-spacing:0;line-height:1.6;font-weight:400;opacity:.92;margin-bottom:24px}

/* BRAND STRIP */
.brand-strip{
  background:var(--white);border-radius:var(--r-xl);
  padding:36px 40px;display:flex;justify-content:space-around;
  align-items:center;flex-wrap:wrap;gap:36px;
}
.brand-strip span{
  font-size:1rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:400;transition:color .2s;
}
.brand-strip span:hover{color:var(--ink)}

/* NEWSLETTER */
.news{
  background:var(--ink);color:var(--white);border-radius:var(--r-xl);padding:74px 60px;
  display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:center;
}
@media(max-width:900px){.news{grid-template-columns:1fr;padding:50px 30px;text-align:center}}
.news h2{line-height:1.04}
.news .lead{
  color:rgba(255,255,255,.72);margin-top:16px;font-size:.96rem;line-height:1.6;
  text-transform:none;letter-spacing:0;font-weight:400;max-width:500px;
}
@media(max-width:900px){.news .lead{margin:14px auto 0}}
.news-form{
  display:flex;background:rgba(255,255,255,.08);border-radius:999px;
  padding:6px;gap:6px;flex-wrap:wrap;
}
.news-form input{
  flex:1;background:transparent;border:none;color:var(--white);padding:14px 22px;
  font-family:inherit;font-size:1rem;outline:none;min-width:180px;min-height:44px;
}
.news-form input::placeholder{color:rgba(255,255,255,.5)}
.news-form button{
  background:var(--white);color:var(--ink);padding:12px 26px;border-radius:999px;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  transition:background .2s;cursor:pointer;border:none;min-height:44px;
}
.news-form button:hover{background:var(--mint)}

/* ===== MOBILE GRID OVERRIDES ===== */
@media(max-width:900px){
  /* Catch all inline grids on mobile so nothing overflows */
  section [style*="grid-template-columns:repeat(3"],
  section [style*="grid-template-columns:repeat(4"],
  section [style*="grid-template-columns:1fr 1.4fr"],
  section [style*="grid-template-columns:1.4fr 1fr"],
  section [style*="grid-template-columns:1fr 1.2fr"],
  section [style*="grid-template-columns:1.6fr 1fr"]{
    grid-template-columns:1fr !important;gap:20px !important;
  }
}
@media(max-width:600px){
  section [style*="grid-template-columns:repeat(2"]{
    grid-template-columns:1fr !important;
  }
  .stat-grid{grid-template-columns:1fr 1fr}
  .stat{padding:20px 18px}
  .stat .num{font-size:1.8rem}
  /* Inline buy-row CTAs full width on mobile */
  .buy-row > *{flex:1}
}

/* Misc utilities */
.divider{height:1px;background:var(--line);margin:24px 0}
.spacer-lg{height:60px}
.spacer-md{height:30px}
.flex-end{display:flex;justify-content:flex-end}
.text-center{text-align:center}
.text-soft{color:var(--ink-soft)}
.text-mute{color:var(--ink-mute)}
.fs-small{font-size:.78rem;color:var(--ink-soft);text-transform:none;letter-spacing:0}

/* ============================================================
   CONTACTPAGINA — rijker ontwerp (minder plat)
============================================================ */
.page-contact .contact-methods{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:36px;
}
@media(max-width:900px){.page-contact .contact-methods{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.page-contact .contact-methods{grid-template-columns:1fr}}
.contact-method{
  display:flex;align-items:center;gap:14px;padding:18px 20px;
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg,22px);
  text-decoration:none;color:var(--ink);transition:background .2s,border-color .2s;
}
.contact-method:hover{background:var(--card-soft);border-color:var(--line)}
.contact-method__ic{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-soft);color:var(--ink);
}
.contact-method__txt{display:flex;flex-direction:column;line-height:1.3;min-width:0;font-size:.86rem;color:var(--ink-soft)}
.contact-method__txt strong{font-size:.95rem;color:var(--ink);font-weight:600;margin-bottom:1px}

.page-contact .contact-grid{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:34px;align-items:start;
}
@media(max-width:900px){.page-contact .contact-grid{grid-template-columns:1fr;gap:24px}}
.page-contact .contact-aside{display:flex;flex-direction:column;gap:20px}
.contact-visual{
  position:relative;border-radius:var(--r-lg,26px);overflow:hidden;min-height:230px;
  background-size:cover;background-position:center;
}
.contact-visual__overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  gap:4px;padding:22px;color:#fff;
  background:linear-gradient(to top,rgba(30,25,18,.6),rgba(30,25,18,0) 60%);
}
.contact-visual__overlay .eyebrow{color:rgba(255,255,255,.85)}
.contact-visual__overlay strong{font-size:1.15rem;font-weight:500}

.contact-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.contact-list li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.contact-list li:last-child{border-bottom:none}
.contact-list__ic{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--bg-soft);display:grid;place-items:center;color:var(--ink)}
.contact-list__lbl{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:3px}
.contact-list a{color:var(--ink);text-decoration:none}
.contact-list a:hover{text-decoration:underline}

/* Academy — donker CTA-paneel (archive-umi_course.php) */
.academy-cta{
  background:var(--ink);color:#fff;border-radius:var(--r-xl,30px);
  padding:clamp(36px,5vw,60px);display:grid;grid-template-columns:1.4fr 1fr;
  gap:40px;align-items:center;
}
@media(max-width:760px){
  .academy-cta{grid-template-columns:1fr;gap:24px}
  .academy-cta .btn{justify-self:start}
}

/* Single cursus (single-umi_course.php) */
.course-hero{
  border-radius:var(--r-xl,30px);overflow:hidden;color:#fff;
  background:linear-gradient(135deg,#d8c5ad 0%,#b8a48a 100%);
  background-size:cover;background-position:center;
  min-height:340px;display:flex;align-items:flex-end;
  padding:clamp(28px,4vw,48px);
}
.course-hero__inner{max-width:760px}
.course-hero__title{color:#fff;margin:10px 0 0;line-height:1.05;font-size:clamp(1.8rem,3.4vw,3rem);letter-spacing:-.01em}
.course-hero__meta{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.course-hero__price{font-size:1.15rem;font-weight:500}
.course-single .desc-block{min-width:0}
.course-aside .course-buy{padding:26px;position:sticky;top:100px}
.course-buy .course-price{font-size:1.7rem;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.course-buy .course-price.is-free{color:var(--success)}
.course-price-note{color:var(--ink-soft);margin-top:4px}
.course-meta-list{list-style:none;margin:18px 0 0;padding:18px 0 0;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:10px}
.course-meta-list li{display:flex;justify-content:space-between;gap:14px;font-size:.9rem}
.course-meta-list li span{color:var(--ink-soft)}
.course-meta-list li strong{font-weight:500;text-align:right}
.course-buy__cta{margin-top:22px}
.course-buy__note{text-align:center;color:var(--ink-soft);margin-top:12px}
.course-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
@media(max-width:900px){.course-aside .course-buy{position:static}}

/* ============================================================
   A11Y-AUDIT FIXES (UX/toegankelijkheid sweep) — CSS-only
   Leesmaat, mobiele leesbaarheid, tabulaire cijfers en focus-vorm.
   (Contrast-token + 44px tap-targets zijn in-place hierboven gefixt.)
============================================================ */
/* Leesmaat: lange lopende tekst niet breder dan ~68ch */
.entry-content p,
.page-content p,
.course-single .desc-block p{max-width:68ch}

/* Mobiele leesbaarheid: kerntekst >=15px op kleine schermen */
@media(max-width:600px){
  .faq-a p,
  .pillar p,
  .product-meta,
  .fs-small{font-size:.95rem}
}

/* Tabulaire cijfers tegen prijs-/cijferjitter */
.price,
.price .old,
.course-price,
.course-hero__price,
.course-meta-list li strong{font-variant-numeric:tabular-nums}

/* Ronde controls: herstel cirkelvorm bij focus (globale *:focus-visible zet 4px) */
.icon-btn:focus-visible,
.m-close:focus-visible,
.add-btn:focus-visible,
.fav:focus-visible,
.qty button:focus-visible{
  outline:2px solid var(--ink);outline-offset:2px;border-radius:50%;
}

/* Contactformulier: zichtbare labels + status-notices (waren ongestyled) */
.contact-form label{display:block;margin-bottom:6px;font-size:.8rem;font-weight:500;color:var(--ink)}
.contact-form p{margin-bottom:18px}
.form-required-note{font-size:.8rem;color:var(--ink-soft);margin:0 0 14px}
.form-required-note span{color:var(--error)}
/* Contact-bevestiging — nette kaart met icoon (niet meer de kale banner) */
.contact-notice{
  display:flex;align-items:flex-start;gap:13px;
  background:var(--success-soft);border:1px solid var(--success);
  border-radius:16px;padding:16px 18px;margin:0 0 18px;
}
.contact-notice__ic{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--success);color:#fff;
}
.contact-notice__body{font-size:.92rem;line-height:1.5;color:var(--ink-soft)}
.contact-notice__body strong{display:block;font-size:1rem;color:var(--ink);margin-bottom:2px;font-weight:600}
.contact-notice--err{background:var(--error-soft);border-color:var(--error)}
.contact-notice--err .contact-notice__ic{background:var(--error)}
/* Na succesvolle verzending: verberg formulier + verplicht-noot, toon alleen de bevestiging */
.contact-form-panel--done .form-required-note,
.contact-form-panel--done .contact-form{display:none}

/* Nieuwsbrief-bevestiging (donkere band → lichte tekst) */
.news-msg{
  margin-top:14px;border-radius:12px;padding:12px 16px;font-size:.9rem;line-height:1.45;width:100%;
}
.news-msg--ok{background:rgba(184,199,180,.20);color:#fff;border:1px solid rgba(184,199,180,.55)}
.news-msg--err{background:rgba(184,72,42,.18);color:#fff;border:1px solid rgba(184,72,42,.55)}
.news-form.is-done{opacity:.5;pointer-events:none}
@media(max-width:560px){
  .news-form{flex-direction:column;align-items:stretch}
  .news-form input{text-align:center}
  .news-form button{width:100%}
}

/* Honeypot — onzichtbaar voor mensen, ingevuld door bots */
.umi-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.contact-form .btn.is-loading{opacity:.7;pointer-events:none}

/* Scroll-reveal (GSAP) mag op FUNCTIONELE pagina's geen formulier-panels verbergen:
   checkout/account/cart moeten direct zichtbaar zijn, ook vóór scroll. CSS !important
   overrulet GSAP's inline opacity:0 / transform. (Marketingpagina's behouden de reveal.) */
body.woocommerce-checkout .panel,
body.woocommerce-account .panel,
body.woocommerce-cart .panel,
body.woocommerce-checkout .summary,
body.woocommerce-account .login-split{opacity:1 !important;transform:none !important}

/* Cursuskaart: nette beeldloze variant (format-icoon op rustig sage/beige paneel) */
.course-card__media--noimg{background:linear-gradient(135deg,var(--sage-soft) 0%,var(--beige) 100%)}
.course-card__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--ink-soft)}
.course-card__ph svg{width:46px;height:46px;opacity:.8}
.course-card__ph .ph-label{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--taupe-dark)}

/* ============================================================
   MOBIELE RESPONSIVENESS-FIXES (audit @360) — geen clipping
============================================================ */
/* Header: logo + alle iconen (incl. hamburger) passen op kleine schermen */
@media(max-width:600px){
  .head-inner{padding:14px 14px;gap:8px}
  .logo .site-logo-img{height:24px;max-width:120px}
  .head-actions{gap:2px}
}
/* PDP detail-grid/tabs/beschrijving mogen nooit breder zijn dan het scherm
   (nowrap-tabs duwden de grid breder dan de viewport zonder min-width:0). */
.detail-grid,
.detail-grid > *,
.detail-grid .desc-block,
.detail-grid .pdp-tabs-wrap,
.detail-grid .woocommerce-tabs,
.detail-grid .woocommerce-tabs .panel{min-width:0;max-width:100%}
.detail-grid .woocommerce-tabs .panel{overflow-wrap:anywhere}
.pdp-card{overflow:hidden}
/* Home hero-CTA's: passen op mobiel (geen clipping van 'Demo plannen') */
.usp{min-width:0}
/* Mobiel (<=560px): de glazen pill wordt een nette verticale stack van twee
   volledige-breedte knoppen — primair (wit) boven, secundair (ghost) eronder.
   Geen overlap, duidelijke hiërarchie. Desktop blijft de horizontale pill. */
@media(max-width:560px){
  .hero-bottom{flex-direction:column;align-items:stretch;gap:14px}
  .hero-cta-pill{
    display:flex;flex-direction:column;align-items:stretch;width:100%;gap:10px;
    background:transparent;border:none;border-radius:0;padding:0;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .hero-cta-pill .b{
    display:flex;width:100%;justify-content:center;text-align:center;
    padding:16px 20px;border-radius:999px;white-space:normal;font-size:.74rem;
  }
  .hero-cta-pill .b.dark{background:var(--white);color:var(--ink)}
  .hero-cta-pill .b:not(.dark){
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.55);color:var(--white);
  }
}
@media(max-width:480px){.usp-strip,.usp-bar{grid-template-columns:1fr}}
/* Iets ruimere, consistente gutters op kleine schermen */
@media(max-width:600px){.wrap,.wrap-narrow,.wrap-tight{padding-left:18px;padding-right:18px}}

/* Partner-strip: echte merklogo's (grijswaarden → kleur bij hover); tekst blijft fallback */
.partners-list .partner.has-logo{display:inline-flex;align-items:center}
.partner-logo{height:30px;width:auto;max-width:130px;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .25s ease,opacity .25s ease}
.partners-list .partner.has-logo:hover .partner-logo{filter:none;opacity:1}
@media(max-width:560px){.partner-logo{height:24px;max-width:96px}}

/* ===== HEADER-ZOEKOVERLAY — neemt de headerbalk over bij klik op het zoekicoon ===== */
.head-search{
  position:absolute; inset:0; z-index:8;
  background:var(--bg); display:flex; align-items:center; padding:0 28px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.head-search.open{ opacity:1; visibility:visible; transform:none; }
.head-search__form{ display:flex; align-items:center; gap:14px; width:100%; max-width:1440px; margin:0 auto; }
.head-search__ic{ color:var(--ink-soft); flex:0 0 auto; }
.head-search__input{
  flex:1; min-width:0; border:none; background:transparent;
  font-family:inherit; font-size:1.25rem; color:var(--ink); padding:16px 0;
}
.head-search__input:focus{ outline:none; }
.head-search__input::placeholder{ color:var(--ink-mute); }
.head-search__go{
  flex:0 0 auto; background:var(--ink); color:#fff; border:none; border-radius:999px;
  padding:12px 26px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:500; cursor:pointer; transition:background .2s ease;
}
.head-search__go:hover{ background:#3C342D; }
.head-search__close{
  flex:0 0 auto; width:44px; height:44px; border:none; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--ink); border-radius:50%;
  transition:background .2s ease;
}
.head-search__close:hover{ background:var(--card-soft); }
@media(max-width:560px){
  .head-search{ padding:0 14px; }
  .head-search__input{ font-size:1.05rem; }
  .head-search__go{ display:none; }
}

/* ===== Zwevende WhatsApp-knop ===== */
.umi-wa{
  position:fixed;right:22px;bottom:22px;z-index:9980;
  width:58px;height:58px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#25D366;color:#fff;text-decoration:none;
  box-shadow:0 10px 26px rgba(37,211,102,.42),0 2px 8px rgba(26,24,20,.18);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.umi-wa:hover{background:#1ebe5b;transform:translateY(-2px) scale(1.04);box-shadow:0 14px 32px rgba(37,211,102,.5),0 3px 10px rgba(26,24,20,.2)}
.umi-wa:focus-visible{outline:3px solid rgba(37,211,102,.5);outline-offset:3px}
.umi-wa__icon{display:block}
@media(max-width:760px){
  .umi-wa{right:16px;bottom:16px;width:54px;height:54px}
}
@media(prefers-reduced-motion:reduce){
  .umi-wa{transition:none}
  .umi-wa:hover{transform:none}
}

/* ============================================================
   CURSUS — integraal ontwerp (single-umi_course.php)
   ============================================================ */
.course-hero-sec{padding:14px 0 0}
.course-hero__eyebrow{color:rgba(255,255,255,.85)}
.course-hero__lead{color:rgba(255,255,255,.92);max-width:58ch;margin:14px 0 0;font-size:1.06rem;line-height:1.55}
.course-hero__cta{margin-left:4px}

/* Snelle feiten-strip onder de hero */
.course-quickfacts{
  list-style:none;margin:18px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:16px;overflow:hidden;
}
.course-quickfacts li{display:flex;align-items:center;gap:11px;padding:14px 16px;background:var(--card)}
.course-quickfacts__ic{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--bg-soft);color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center}
.course-quickfacts__ic svg{width:17px;height:17px}
.course-quickfacts__txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.course-quickfacts__txt .k{font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.course-quickfacts__txt strong{font-weight:600;font-size:.92rem}

/* Twee-koloms body */
.course-body-sec{padding:34px 0 80px}
.course-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:48px;align-items:start}
.course-main{min-width:0}
.course-section{margin-bottom:42px}
.course-section:last-child{margin-bottom:0}
.course-h2{font-size:1.42rem;letter-spacing:-.01em;margin:0 0 18px}

/* Bullets: wat je leert / inbegrepen */
.course-checklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:13px 30px}
.course-checklist li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.course-check{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--sage-soft);color:#2f5d3a;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.course-check svg{width:14px;height:14px}
.course-checklist--includes .course-check{background:var(--bg-soft);color:var(--ink)}

/* Voor wie */
.course-audience{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.course-audience li{display:flex;gap:13px;align-items:center;line-height:1.5}
.course-audience__ic{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--bg-soft);color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center}
.course-audience__ic svg{width:19px;height:19px}

/* Programma */
.course-program{list-style:none;margin:0;padding:0}
.course-program__item{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.course-program__item:first-child{padding-top:0}
.course-program__item:last-child{border-bottom:none;padding-bottom:0}
.course-program__num{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:.92rem}
.course-program__body{min-width:0}
.course-program__title{display:block;font-weight:600;line-height:1.35}
.course-program__desc{display:block;color:var(--ink-soft);margin-top:3px;font-size:.92rem;line-height:1.5}

/* Blijvende inschrijfkaart */
.course-enroll{min-width:0}
.course-enroll__card{
  background:var(--card);border:1px solid var(--line-soft);border-radius:20px;
  padding:26px;position:sticky;top:96px;box-shadow:0 12px 34px rgba(26,24,20,.07);
}
.course-enroll__price{font-size:1.95rem;font-weight:500;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.course-enroll__price.is-free{color:var(--success)}
.course-enroll__pricenote{color:var(--ink-soft);font-size:.82rem;margin:6px 0 0;line-height:1.4}
.course-enroll__facts{list-style:none;margin:18px 0;padding:18px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:12px}
.course-enroll__facts li{display:flex;align-items:center;gap:11px;font-size:.88rem}
.course-enroll__ic{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--bg-soft);color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center}
.course-enroll__ic svg{width:16px;height:16px}
.course-enroll__facts .k{color:var(--ink-soft);flex:1 1 auto}
.course-enroll__facts strong{font-weight:600;text-align:right}
.course-enroll__formhead{margin-bottom:16px}
.course-enroll__h{font-size:1.18rem;margin:0;letter-spacing:-.005em}
.course-enroll__sub{color:var(--ink-soft);font-size:.86rem;margin:7px 0 0;line-height:1.5}
.course-enroll__form .field{margin:0 0 12px}
.course-enroll__form .course-form-grid{margin-bottom:0}
.course-enroll__trust{text-align:center;color:var(--ink-soft);font-size:.8rem;margin:13px 0 0}

@media(max-width:980px){
  .course-layout{grid-template-columns:1fr;gap:32px}
  .course-enroll__card{position:static}
}
@media(max-width:560px){
  .course-enroll__card{padding:20px}
  .course-h2{font-size:1.25rem}
}

/* ===== Google-reviews badge (homepage testimonials) ===== */
.g-reviews-badge{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;text-decoration:none;
  background:var(--card);border:1px solid var(--line-soft);border-radius:999px;padding:8px 16px;
  box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,transform .2s ease;
}
.g-reviews-badge:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.g-reviews-badge svg{display:block;flex:0 0 auto}
.g-reviews-badge__stars{color:var(--ink);letter-spacing:1px;font-size:.92rem}
.g-reviews-badge__txt{font-size:.8rem;color:var(--ink-soft);font-weight:500;letter-spacing:.01em}
.test-card .stars .stars-empty{color:var(--line)}

.center{text-align:center}

/* ===== WhatsApp chat-widget (paneel i.p.v. directe sprong) ===== */
.umi-wa{border:none;padding:0}
.umi-wa__open,.umi-wa__close{display:flex;align-items:center;justify-content:center}
.umi-wa .umi-wa__close{display:none}
.umi-wa-widget.is-open .umi-wa .umi-wa__open{display:none}
.umi-wa-widget.is-open .umi-wa .umi-wa__close{display:flex}

.umi-wa-panel{
  position:fixed;right:22px;bottom:92px;z-index:9981;
  width:342px;max-width:calc(100vw - 32px);
  background:var(--card);border:1px solid var(--line-soft);border-radius:20px;
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.umi-wa-panel[hidden]{display:none}
.umi-wa-widget.is-open .umi-wa-panel{animation:umiWaIn .22s ease}
@keyframes umiWaIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.umi-wa-panel__head{display:flex;align-items:center;gap:12px;padding:15px 16px;background:var(--bg-soft);border-bottom:1px solid var(--line-soft)}
.umi-wa-panel__avatar{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center}
.umi-wa-panel__id{flex:1 1 auto;min-width:0;line-height:1.25}
.umi-wa-panel__id strong{display:block;font-size:.95rem;color:var(--ink)}
.umi-wa-panel__status{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--ink-soft)}
.umi-wa-panel__status i{width:7px;height:7px;border-radius:50%;background:#25D366;display:inline-block;flex:0 0 auto}
.umi-wa-panel__close{flex:0 0 auto;background:none;border:none;cursor:pointer;color:var(--ink-soft);padding:6px;border-radius:8px;display:flex}
.umi-wa-panel__close:hover{color:var(--ink);background:rgba(26,24,20,.05)}
.umi-wa-panel__body{padding:18px 16px}
.umi-wa-bubble{
  background:var(--bg-soft);color:var(--ink);border-radius:4px 16px 16px 16px;
  padding:12px 14px;font-size:.9rem;line-height:1.5;margin:0 0 14px;
}
.umi-wa-chips{display:flex;flex-wrap:wrap;gap:8px}
.umi-wa-chip{
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-family:inherit;font-size:.8rem;color:var(--ink);cursor:pointer;transition:all .15s ease;
}
.umi-wa-chip:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.umi-wa-panel__foot{display:flex;align-items:center;gap:8px;padding:12px;border-top:1px solid var(--line-soft)}
.umi-wa-input{
  flex:1 1 auto;min-width:0;border:1px solid var(--line);border-radius:999px;
  padding:11px 16px;font-family:inherit;font-size:.9rem;color:var(--ink);background:#fff;outline:none;
}
.umi-wa-input:focus{border-color:#25D366;box-shadow:0 0 0 3px rgba(37,211,102,.14)}
.umi-wa-send{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s ease;
}
.umi-wa-send:hover{background:#1ebe5b}
@media(max-width:760px){
  .umi-wa-panel{right:16px;left:16px;width:auto;max-width:none;bottom:84px}
}
@media(prefers-reduced-motion:reduce){.umi-wa-widget.is-open .umi-wa-panel{animation:none}}


/* ===== Cart-lade (globaal — moet op ELKE pagina werken, niet alleen shop) ===== */
.umi-drawer-overlay{
  position:fixed;inset:0;background:rgba(30,25,18,.42);z-index:1200;
  opacity:0;transition:opacity .28s ease;backdrop-filter:blur(2px);
}
.umi-drawer-overlay.show{opacity:1}
.umi-drawer{
  position:fixed;top:0;right:0;height:100dvh;width:min(420px,92vw);z-index:1210;
  background:var(--card,#fff);box-shadow:-18px 0 50px rgba(30,25,18,.16);
  display:flex;flex-direction:column;transform:translateX(105%);
  transition:transform .34s cubic-bezier(.4,0,.1,1);will-change:transform;
}
.umi-drawer.open{transform:translateX(0)}
.umi-drawer__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 22px;border-bottom:1px solid var(--line-soft);flex:0 0 auto;
}
.umi-drawer__title{
  display:flex;align-items:center;gap:9px;font-weight:600;font-size:.98rem;color:var(--ink);
}
.umi-drawer__title svg{color:var(--success,#5a7d63)}
.umi-drawer__close{
  background:var(--bg-soft);border:none;border-radius:50%;width:44px;height:44px;
  display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:background .2s;
}
.umi-drawer__close:hover{background:var(--card-beige)}
.umi-drawer__body{flex:1 1 auto;overflow-y:auto;padding:8px 22px 18px}
.umi-drawer__foot{
  flex:0 0 auto;padding:18px 22px;border-top:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:10px;background:var(--card);
}
.umi-drawer__continue{
  background:none;border:none;color:var(--ink-soft);font-size:.8rem;cursor:pointer;
  text-decoration:underline;padding:4px;letter-spacing:.02em;
}
.umi-drawer__continue:hover{color:var(--ink)}
html.umi-drawer-open{overflow:hidden}

/* Mini-cart binnen de lade */
.umi-drawer .woocommerce-mini-cart{list-style:none;margin:0;padding:0}
.umi-drawer .mini_cart_item{
  display:grid;grid-template-columns:54px 1fr;gap:3px 12px;align-items:center;
  padding:14px 36px 14px 0;border-bottom:1px solid var(--line-soft);position:relative;
}
.umi-drawer .mini_cart_item img{
  grid-column:1;grid-row:1 / -1;align-self:center;
  width:54px;height:54px;object-fit:cover;border-radius:10px;background:var(--bg-soft);
}
.umi-drawer .mini-cart-item-link{display:contents;color:var(--ink);text-decoration:none}
.umi-drawer .mini-cart-item-name{grid-column:2;font-size:.86rem;line-height:1.3;font-weight:500;align-self:end}
.umi-drawer .mini_cart_item .variation{grid-column:2;margin:0;font-size:.74rem;color:var(--ink-soft)}
/* Reset de algemene .woocommerce .quantity-pil (body.woocommerce lekt 'm hierheen):
   in de lade is dit gewoon platte "1 × € 45,00"-tekst, geen beige blok. */
.umi-drawer .mini_cart_item .quantity{
  background:none;border:none;border-radius:0;padding:0;min-height:0;
  font-size:.82rem;color:var(--ink-soft);letter-spacing:0;line-height:1.3;font-weight:400;
}
.umi-drawer .mini_cart_item > .quantity{grid-column:2;display:block;align-self:start}
.umi-drawer .mini_cart_item .remove{
  position:absolute;top:14px;right:0;width:32px;height:32px;border-radius:50%;
  background:var(--bg-soft);color:var(--ink-soft);display:grid;place-items:center;
  font-size:14px;line-height:1;text-decoration:none;
}
.umi-drawer .mini_cart_item .remove:hover{background:var(--error-soft);color:var(--error)}
.umi-drawer .woocommerce-mini-cart__total{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 0 6px;font-size:1rem;border:none;
}
.umi-drawer .woocommerce-mini-cart__empty-message{padding:30px 0;text-align:center;color:var(--ink-soft)}

/* Aanbevelingen */
.umi-drawer-recos__inner{margin-top:18px;border-top:1px solid var(--line-soft);padding-top:16px}
.umi-drawer-recos__title{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:12px}
.umi-drawer-recos__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.umi-reco{display:grid;grid-template-columns:46px 1fr auto;gap:11px;align-items:center}
.umi-reco__img img{width:46px;height:46px;object-fit:cover;border-radius:9px;background:var(--bg-soft)}
.umi-reco__info{min-width:0}
.umi-reco__name{display:block;font-size:.82rem;line-height:1.3;color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.umi-reco__name:hover{text-decoration:underline}
.umi-reco__price{font-size:.78rem;color:var(--ink-soft)}
.umi-reco__add{
  width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;text-decoration:none;flex:0 0 auto;transition:transform .2s,background .2s;
}
.umi-reco__add:hover{background:var(--sage,#5a7d63);transform:scale(1.06)}
.umi-reco__add.loading{opacity:.6;pointer-events:none}

/* ===== Marketing-badges (product + categorie) ===== */
.umi-mkt-badge{display:inline-flex;align-items:center;gap:5px;font-size:.66rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:6px 11px;border-radius:999px;line-height:1;white-space:nowrap}
.umi-mkt--dark{background:var(--ink);color:#fff}
.umi-mkt--sage{background:var(--sage-soft);color:#2f5d3a}
.umi-mkt--accent{background:var(--error-soft);color:var(--error)}
.umi-mkt--gold{background:#e7d5a8;color:#6b5526}
.umi-mkt-card-wrap{position:absolute;top:11px;right:11px;z-index:2;max-width:calc(100% - 22px);text-align:right}
.umi-mkt-badge--card{font-size:.56rem;letter-spacing:.03em;padding:4px 9px;gap:4px;box-shadow:0 3px 10px rgba(26,24,20,.16)}
.umi-pdp-badge{margin:0 0 12px}
.umi-mkt-badge--pdp{font-size:.7rem;padding:7px 13px}