/*!
 * Köster Afdichtingssystemen – CSS Framework
 * v1.0.0
 *
 * Token-gebaseerd framework voor de Köster-huisstijl, bedoeld voor
 * WordPress-themadevelopment. Alle maten zijn fluid (clamp) zodat
 * componenten zonder extra media queries meeschalen van mobiel tot desktop.
 *
 * Lagen:
 *   1. Tokens        – design tokens als CSS custom properties (:root)
 *   2. Base          – reset, typografie, focus, selection
 *   3. Layout        – container, section-banden, grids
 *   4. Componenten   – k-kicker, k-slashes, k-btn, k-card, k-hero, forms, ...
 *   5. Utilities     – kleine hulpklassen
 *
 * Fonts (laad in je theme, bijv. via wp_enqueue_style):
 *   https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Semi+Condensed:wght@500;600;700&display=swap
 *
 * Huisstijlregels: scherpe hoeken (max 2px radius), groen //-motief,
 * schuine (skew/chamfer) vormen, charcoal en navy banden voor cohesie.
 */

/* ---- Fallback-fonts, metrisch gelijk aan Barlow ----
   Tot de woff2-bestanden er zijn, toont de browser Arial met dezelfde
   letterbreedte en regelhoogte als Barlow. De wissel geeft dan geen sprong
   (CLS). Waarden gemeten op de fontbestanden zelf. */
@font-face {
  font-family: "Barlow Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 98.4%;
  ascent-override: 101.6%;
  descent-override: 20.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Barlow Semi Condensed Fallback";
  src: local("Arial Narrow"), local("Arial"), local("Helvetica");
  size-adjust: 90.8%;
  ascent-override: 110.2%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root {
  /* ---- Merk-kleuren ---- */
  --k-blue:         #0088b8;  /* primair merk-blauw: links, accenten, kaders */
  --k-blue-dark:    #0a5a78;  /* hover/active op blauw */
  --k-blue-text:    #0077a2;  /* merkblauw voor kleine tekst: haalt 4,5:1 op wit en lichtgrijs */
  --k-blue-light:   #9fdcff;  /* links op donkere ondergrond */
  --k-blue-tint:    #eef6f9;  /* lichte blauwe vlakken */

  --k-green:        #4aae30;  /* primair groen: CTA-knoppen, //-motief op licht */
  --k-green-hover:  #3f9a29;  /* hover op groene knoppen */
  --k-green-bright: #5fc23f;  /* //-motief en accenten op donkere ondergrond */
  --k-green-tint:   #eef6e9;  /* lichte groene vlakken */
  --k-green-cta:    #34851f;  /* knopgroen achter witte tekst: haalt 4,5:1 (het //-motief houdt --k-green) */
  --k-green-cta-hover: #2a6f19;  /* hover op de knoppen */
  --k-green-text:   #2f7d1c;  /* groen voor kleine tekst, en achter witte kleine tekst: haalt 4,5:1 */

  /* Het groen van WhatsApp zelf. Geen huisstijlkleur, maar het merkteken van een
     ander: mensen herkennen die knop aan die kleur. Staat hier als token zodat
     hij toch via de frameworkeditor bij te stellen is. */
  --k-whatsapp:       #25d366;
  --k-whatsapp-hover: #1da851;

  /* ---- Charcoal (schuine balken, badges, utility-laag) ---- */
  --k-charcoal:     #1b1e22;
  --k-charcoal-2:   #45464a;
  --k-charcoal-3:   #26272b;
  --k-charcoal-grad: linear-gradient(160deg, #2c2f34, #1d2024);

  /* ---- Navy (hero's, CTA-banden, footer) ---- */
  --k-navy:         #0a2330;
  --k-navy-2:       #0d2b38;
  --k-navy-grad:    linear-gradient(100deg, #0a2330, #0a3a4d);

  /* ---- Tekst ---- */
  --k-ink:          #16323f;  /* koppen en body op licht */
  --k-text-2:       #56646f;  /* secundaire tekst */
  --k-text-muted:   #5f6d76;  /* muted: breadcrumbs, bijschriften; haalt 4,5:1 op wit en lichtgrijs */
  --k-nav:          #27414d;  /* navigatielinks */

  /* ---- Tekst op donker ---- */
  --k-on-dark:      #cddbe2;  /* leestekst op navy */
  --k-on-dark-2:    #aab1b8;  /* secundair op charcoal */
  --k-on-dark-muted:#90a4af;  /* footertekst */

  /* ---- Vlakken en randen ---- */
  --k-surface:      #ffffff;
  --k-surface-alt:  #f3f6f8;  /* afwisselende sectie-band */
  --k-surface-soft: #f7fafb;
  --k-surface-input:#f1f5f8;
  --k-border:       #e3eaef;
  --k-border-2:     #e0e8ed;
  --k-border-soft:  #eef2f5;
  --k-border-form:  #cdd8de;

  /* ---- Signaal ---- */
  --k-red:          #c4322b;

  /* ---- Typografie ---- */
  --k-font-body:   'Barlow', 'Barlow Fallback', Arial, Helvetica, sans-serif;
  --k-font-head:   'Barlow Semi Condensed', 'Barlow Semi Condensed Fallback', 'Barlow', Arial, sans-serif;
  --k-font-kicker: var(--k-font-head); /* taglines/kickers: los themebaar van de koppen */

  /* Fluid type-schaal (380px → 1240px viewport) */
  --k-fs-display: clamp(2.125rem, 1.49rem + 2.7vw, 3.5625rem); /* 34 → 57px, hero h1 */
  --k-fs-h1:      clamp(2.0625rem, 1.48rem + 2.45vw, 3.375rem); /* 33 → 54px, paginatitel */
  --k-fs-h2:      clamp(1.6875rem, 1.38rem + 1.3vw, 2.375rem);  /* 27 → 38px, sectiekop */
  --k-fs-h3:      clamp(1.25rem, 1.14rem + 0.47vw, 1.5rem);     /* 20 → 24px, kaarttitel */
  --k-fs-h4:      clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);    /* 17 → 19px */
  --k-fs-lead:    clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);  /* 17 → 20px, intro's */
  --k-fs-body:    1rem;        /* 16px */
  --k-fs-sm:      0.9375rem;   /* 15px */
  --k-fs-xs:      0.875rem;    /* 14px */
  --k-fs-kicker:  0.875rem;    /* 14px, uppercase badge */
  --k-fs-overline:0.8125rem;   /* 13px, uppercase tussenlabel */

  --k-lh-tight:   1.05;   /* display/h1 */
  --k-lh-head:    1.12;   /* h2/h3 */
  --k-lh-body:    1.55;
  --k-lh-lead:    1.55;   /* intro's: hero-lead en sectie-lead gelijk */

  --k-fw-kicker:  600;    /* gewicht van kickers/overlines */
  --k-ls-kicker:  0.1em;
  --k-ls-overline:0.14em;

  /* ---- Ruimte (fluid) ---- */
  --k-space-section:      clamp(3.25rem, 2.42rem + 3.5vw, 5.125rem);  /* 52 → 82px */
  --k-space-section-hero: clamp(4rem, 2.9rem + 4.6vw, 6.125rem);      /* 64 → 98px */
  --k-space-block:        clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);     /* 28 → 40px */
  --k-gap:                1.375rem;  /* 22px, standaard kaart-gap */
  --k-gap-sm:             0.875rem;

  /* ---- Ruimte (vaste schaal) ----
     Voor marges en gaps binnen componenten; gebruik deze in plaats van
     losse pixelwaarden zodat de ritmiek overal gelijk blijft. */
  --k-space-3xs: 0.25rem;   /*  4px */
  --k-space-2xs: 0.5rem;    /*  8px */
  --k-space-xs:  0.75rem;   /* 12px */
  --k-space-s:   1rem;      /* 16px */
  --k-space-m:   1.5rem;    /* 24px */
  --k-space-l:   2rem;      /* 32px */
  --k-space-xl:  3rem;      /* 48px */

  /* ---- Beweging ----
     Eén duur en curve voor alle hovers en overgangen. */
  --k-dur:      0.18s;
  --k-dur-slow: 0.28s;
  --k-ease:     cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Container ---- */
  --k-container:      1240px;
  --k-container-wide: 1600px;
  --k-container-pad:  clamp(1.25rem, 0.9rem + 1.5vw, 2rem); /* 20 → 32px */
  --k-article-w:      50rem; /* leesbare kolom in artikelen (titel, lead, body) */

  /* ---- Vorm ---- */
  --k-radius: 2px;                       /* huisstijl: scherpe hoeken, max 2px */
  --k-chamfer: 12px;                     /* schuine afsnede rechts op badges */
  --k-skew: -15deg;                      /* schuinte van het //-motief */
  --k-clip-chamfer: polygon(0 0, 100% 0, calc(100% - var(--k-chamfer)) 100%, 0 100%);

  /* ---- Schaduwen ---- */
  --k-shadow-card:   0 12px 26px rgba(13, 43, 56, 0.09);
  --k-shadow-hover:  0 16px 36px rgba(13, 43, 56, 0.13);
  --k-shadow-panel:  -12px 0 40px rgba(13, 43, 56, 0.2);
  --k-focus-ring:    0 0 0 3px rgba(0, 136, 184, 0.15);
  --k-focus-ring-error: 0 0 0 3px rgba(196, 50, 43, 0.12);

  /* ---- Hero-overlay (de foto zelf is een <img class="k-hero__img">) ---- */
  --k-hero-overlay: linear-gradient(96deg,
      rgba(18, 26, 34, 0.95) 0%,
      rgba(18, 26, 34, 0.85) 36%,
      rgba(18, 26, 34, 0.45) 66%,
      rgba(18, 26, 34, 0.1) 100%);
  /* Tekst op de hero-foto: feller dan --k-on-dark, omdat de foto onder de tekst
     door kan lopen. Op navy vlakken zonder foto blijft --k-on-dark staan. */
  --k-hero-text:    #e6eef2;
  --k-hero-text-2:  #c3d2da;

  /* ---- Diagonale textuur op donkere banden ---- */
  --k-texture: repeating-linear-gradient(108deg,
      transparent 0 34px,
      rgba(95, 194, 63, 0.05) 34px 42px);

  /* ---- Breakpoint (ter referentie; gebruik 980px in media queries) ---- */
  --k-bp-nav: 980px;
}

/* =====================================================================
   2. BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--k-surface);
  color: var(--k-ink);
  font-family: var(--k-font-body);
  font-size: var(--k-fs-body);
  line-height: var(--k-lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

::selection { background: var(--k-blue); color: #fff; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--k-font-head);
  font-weight: 700;
  color: var(--k-ink);
  margin: 0 0 0.5em;
}

h1 { font-size: var(--k-fs-h1); line-height: var(--k-lh-tight); letter-spacing: -0.005em; }
h2 { font-size: var(--k-fs-h2); line-height: 1.06; }
h3 { font-size: var(--k-fs-h3); line-height: var(--k-lh-head); }
h4 { font-size: var(--k-fs-h4); line-height: var(--k-lh-head); }

/* Duitse samenstellingen zijn lang: Mauerwerksinstandsetzung past niet in een
   kaartkop en liep buiten de kaart. Op Duitse pagina's mogen koppen en korte
   labels daarom afbreken, met een koppelteken waar de browser dat kan.
   Bewust op :lang(de) gezet, zodat het Nederlands en Frans niet raakt. */
:lang(de) h1,
:lang(de) h2,
:lang(de) h3,
:lang(de) h4,
:lang(de) .k-card__title,
:lang(de) .k-card__subtitle,
:lang(de) .k-arrow-link,
:lang(de) .k-btn,
:lang(de) .k-kicker {
  hyphens: auto;
  overflow-wrap: break-word;
}

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

input, select, textarea, button { font-family: inherit; font-size: inherit; }

:focus-visible {
  outline: 2px solid var(--k-blue);
  outline-offset: 2px;
}

/* =====================================================================
   3. LAYOUT
   ===================================================================== */
.k-container {
  max-width: var(--k-container);
  margin-inline: auto;
  padding-inline: var(--k-container-pad);
}

.k-container--wide { max-width: var(--k-container-wide); }

/* Sectie-banden. Wissel wit en grijs af; gebruik charcoal of navy
   spaarzaam als rustpunt of afsluitende CTA. */
.k-section { padding-block: var(--k-space-section); background: var(--k-surface); }

.k-section--alt {
  background: var(--k-surface-alt);
  border-block: 1px solid #e6ecf0;
}
/* Blauwe band: voor kennisbank-secties tussen de oplossingen, zodat meteen te
   zien is dat dat een ander soort blok is. */
.k-section--tint {
  background: var(--k-blue-tint);
  border-block: 1px solid #d8e8f0;
}
.k-section--tint .k-card { border-color: #d8e8f0; }

.k-section--charcoal {
  position: relative;
  background: var(--k-charcoal-grad);
  color: var(--k-on-dark-2);
  overflow: hidden;
}

.k-section--navy {
  position: relative;
  background: var(--k-navy-grad);
  color: var(--k-on-dark);
  overflow: hidden;
}

.k-section--charcoal h1, .k-section--charcoal h2, .k-section--charcoal h3, .k-section--charcoal h4,
.k-section--navy h1, .k-section--navy h2, .k-section--navy h3, .k-section--navy h4 {
  color: #fff;
}

/* Subtiele diagonale groene textuur over een donkere band */
.k-section--texture::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--k-texture);
  pointer-events: none;
}
.k-section--texture > * { position: relative; }
/* Textuur alleen op het rechterdeel van de band (bijv. CTA-band, conform design) */
.k-section--texture-end::before {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 46%, #000 92%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 46%, #000 92%);
}

/* Kaart-grids: auto-fit zodat kolommen vanzelf stapelen */
/* auto-fill (niet auto-fit): lege kolommen blijven staan, zodat één of twee
   kaarten dezelfde breedte houden als in een volle rij. Met auto-fit rekte
   een enkel zoekresultaat over de hele breedte uit. */
.k-grid {
  display: grid;
  gap: var(--k-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
/* --2 blijft auto-fit: die variant is bedoeld om met twee kaarten de volle
   breedte te vullen. */
.k-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.k-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
/* Tegelraster: hoge minimumbreedte cap't het op 3 kolommen, zodat tegels
   in elke groep even breed zijn (geen wisselende maten per groepsgrootte). */
.k-grid--tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

/* Twee-koloms media/tekst-band (bijv. referentieproject).
   De band zelf is full-bleed, de inhoud stopt bij een maximumbreedte. */
.k-split {
  --k-split-max: 1600px;
  display: flex;
  flex-wrap: wrap;
  max-width: var(--k-split-max);
  margin-inline: auto;
}
/* Voorbij die maximumbreedte staat de foto niet meer tegen de rand en blijft er
   een wit vlak over. De tekstkolom heeft dat probleem niet, want daar loopt wit
   in wit over; de foto loopt daarom als enige door tot de rand van het scherm.
   Het beetje dat de schuifbalk in 100vw meetelt valt weg tegen de overflow van
   de sectie eromheen. */
.k-split__media {
  flex: 1 1 440px;
  min-height: clamp(300px, 42vw, 520px);
  position: relative;
  background-size: cover;
  background-position: center;
  margin-left: min(0px, calc((var(--k-split-max) - 100vw) / 2));
}
.k-split__body {
  flex: 1 1 520px;
  padding: clamp(2.875rem, 6vw, 4.625rem) clamp(2rem, 5vw, 3.75rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Media + tekst: tweekoloms tekst naast een afbeelding (media-tekst blok).
   In tegenstelling tot k-split zitten beide kolommen binnen de container. */
.k-media-text {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 1.4rem + 3vw, 3.75rem);
  align-items: center;
}
.k-media-text__body { flex: 1 1 380px; min-width: min(100%, 18.75rem); }
.k-media-text__media { flex: 1 1 380px; min-width: min(100%, 18.75rem); }
/* Beeld naast tekst krijgt een plafond in plaats van een uitsnede.
 *
 * Een staande foto maakte de sectie fors hoger dan de tekst ernaast: 814 tegen
 * 661 pixels. Bijsnijden loste dat op ten koste van de inhoud, en de kolom laten
 * vullen met cover zou juist de liggende en panoramische fotos aansnijden, en
 * die zijn hier in de meerderheid.
 *
 * Vandaar een maximum: te hoge fotos worden verkleind tot ze naast de tekst
 * passen, in hun geheel, met wat lucht links en rechts. Fotos die al lager zijn
 * merken er niets van. */
.k-media-text__media img {
  width: auto;
  max-width: 100%;
  max-height: 41rem;
  margin-inline: auto;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
}
.k-media-text--flip .k-media-text__media { order: -1; }
.k-media-text__rich > :last-child { margin-bottom: 0; }

/* Kenmerken-paneel: alternatief voor een afbeelding in de tweede kolom */
.k-media-text__panel {
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}
.k-section--charcoal .k-media-text__panel,
.k-section--navy .k-media-text__panel {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.k-media-text__panel-title {
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.78125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k-text-muted);
  margin-bottom: 1rem;
}
.k-media-text__panel .k-checklist { display: grid; gap: 0.625rem; }
.k-media-text__media--empty {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  border: 1px dashed var(--k-border-form);
  border-radius: var(--k-radius);
  color: var(--k-text-muted);
  font-size: var(--k-fs-sm);
}

/* =====================================================================
   4. COMPONENTEN
   ===================================================================== */

/* ---- //-motief (dubbele schuine streepjes) --------------------------
   Het kernmotief van de huisstijl. Groen op licht, felgroen op donker.
   Gebruik in kickers, badges en als opsommingsaccent. */
.k-slashes {
  display: inline-flex;
  gap: 2px;
  flex: none;
}
.k-slashes::before,
.k-slashes::after {
  content: "";
  display: block;
  width: 4px;
  height: 13px;
  background: var(--k-green);
  transform: skewX(var(--k-skew));
}
.k-slashes--sm::before, .k-slashes--sm::after { width: 3px; height: 10px; }
.k-slashes--lg { gap: 4px; }
.k-slashes--lg::before, .k-slashes--lg::after { width: 7px; height: 21px; }
.k-section--charcoal .k-slashes::before, .k-section--charcoal .k-slashes::after,
.k-section--navy .k-slashes::before, .k-section--navy .k-slashes::after {
  background: var(--k-green-bright);
}
.k-slashes.k-slashes--bright::before, .k-slashes.k-slashes--bright::after { background: var(--k-green-bright); }
.k-slashes.k-slashes--white::before, .k-slashes.k-slashes--white::after { background: #fff; }

/* ---- Kicker (chamfered badge boven een kop) -------------------------
   Uppercase label met schuine afsnede rechts. Kleurvarianten:
   standaard charcoal; --blue en --green voor sectielabels. */
.k-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--k-charcoal);
  color: #fff;
  font-family: var(--k-font-kicker);
  font-weight: var(--k-fw-kicker);
  font-size: var(--k-fs-kicker);
  letter-spacing: var(--k-ls-kicker);
  text-transform: uppercase;
  line-height: 1;
  padding: 8px 24px 8px 13px;
  margin-bottom: 1.125rem;
  clip-path: var(--k-clip-chamfer);
}
.k-kicker--blue  { background: var(--k-blue-text); }
.k-kicker--green { background: var(--k-green-cta); }
.k-kicker .k-slashes::before, .k-kicker .k-slashes::after { background: var(--k-green-bright); }
.k-kicker--blue .k-slashes::before, .k-kicker--blue .k-slashes::after,
.k-kicker--green .k-slashes::before, .k-kicker--green .k-slashes::after { background: #fff; }

/* ---- Overline (klein tussenlabel met //) ---- */
.k-overline {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 1rem;
  font-family: var(--k-font-kicker);
  font-weight: var(--k-fw-kicker);
  font-size: var(--k-fs-overline);
  letter-spacing: var(--k-ls-overline);
  text-transform: uppercase;
  color: var(--k-charcoal-2);
}
.k-section--charcoal .k-overline, .k-section--navy .k-overline { color: var(--k-on-dark-2); }

/* ---- Lead (introtekst) ---- */
.k-lead {
  font-size: var(--k-fs-lead);
  line-height: var(--k-lh-lead);
  color: var(--k-text-2);
  max-width: 40em;
}
.k-section--charcoal .k-lead { color: #b9c0c7; }
.k-section--navy .k-lead { color: var(--k-on-dark); }

/* ---- Knoppen ---------------------------------------------------------
   Primair = groen. Ghost = witte outline op donkere ondergrond.
   Outline = neutrale rand op lichte ondergrond. */
.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding: 0.9375rem 1.75rem;
  border: 1.5px solid transparent;
  border-radius: var(--k-radius);
  cursor: pointer;
  text-align: center;
  transition: background-color var(--k-dur) var(--k-ease), border-color var(--k-dur) var(--k-ease), color var(--k-dur) var(--k-ease);
}
.k-btn--primary { background: var(--k-green-cta); color: #fff; }
.k-btn--primary:hover { background: var(--k-green-cta-hover); }
.k-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.k-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.8); }
.k-btn--outline {
  background: var(--k-surface);
  color: var(--k-ink);
  border-color: var(--k-border-form);
}
.k-btn--outline:hover { border-color: var(--k-blue); color: var(--k-blue-text); }
.k-btn--sm { padding: 0.6875rem 1.375rem; font-size: 0.96875rem; }

/* ---- Pijl-link (tekstlink met →) ---- */
.k-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.03125rem);
  color: var(--k-blue-text);
  transition: gap var(--k-dur) var(--k-ease);
}
.k-arrow-link::after { content: "\2192"; font-size: 1.125em; }
/* "Bekijk alles"-link onder een grid: die plakte tegen de onderrand van de
   kaarten aan. Zelfde ruimte als het verticale ritme binnen een sectie. */
:is([class*="wp-block-koster-"], .k-grid, .k-doc-list, .k-video-grid, .k-gallery, .k-ka-zoeker) + p.k-arrow-link {
  margin-top: 1.375rem;
}
.k-arrow-link:hover { gap: 13px; }
.k-section--navy .k-arrow-link, .k-section--charcoal .k-arrow-link { color: var(--k-blue-light); }

/* ---- Kaarten ---------------------------------------------------------
   Basis: wit vlak, 1px rand, 2px radius, lift op hover.
   --route: blauwe accentlijn boven (keuzekaarten).
   --image: kaart met afbeelding en badge-overlay. */
.k-card {
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow var(--k-dur) var(--k-ease), transform var(--k-dur) var(--k-ease);
}
a.k-card:hover, .k-card--hover:hover {
  box-shadow: var(--k-shadow-hover);
  transform: translateY(-2px);
}
.k-card--route { border-top: 3px solid var(--k-blue); }

.k-card__media {
  position: relative;
  height: clamp(9.5rem, 8rem + 8vw, 16.25rem);
  overflow: hidden;
}
.k-card__media--sm { height: 9.5rem; }
.k-card__media img { width: 100%; height: 100%; object-fit: cover; }

.k-card__body {
  padding: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
}
.k-card__title { margin: 0; font-size: var(--k-fs-h3); }
.k-card__text { font-size: var(--k-fs-sm); color: var(--k-text-2); margin: 0; flex: 1; }
.k-card__body .k-arrow-link { margin-top: 0.75rem; }
/* Productkaart-onderdelen (koster/productkaarten) */
.k-card__subtitle { font-size: 0.9375rem; color: var(--k-blue-text); font-weight: 600; margin: 0; }
.k-card__checklist { flex: 1; margin-block: 0.25rem 0.75rem; }
.k-card__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: auto; }
.k-card__actions .k-arrow-link { margin-top: 0; }

/* ---- Badge-overlay (chamfered label op een afbeelding) ---- */
.k-badge-overlay {
  position: absolute;
  left: 0;
  top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--k-charcoal);
  color: #fff;
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  padding: 8px 26px 8px 16px;
  clip-path: var(--k-clip-chamfer);
}
.k-badge-overlay--bottom { top: auto; bottom: 14px; }
/* De groene variant bestaat niet meer: witte tekst op merkgroen haalt 2,8:1.
   De klasse blijft geldig en valt terug op charcoal met groene //. */
.k-badge-overlay .k-slashes::before, .k-badge-overlay .k-slashes::after { background: var(--k-green-bright); }

/* ---- Hero -------------------------------------------------------------
   Donkere fotohero met gradient-overlay van links.
   Zet de afbeelding per pagina: style="--k-hero-image:url(...)" */
.k-hero {
  position: relative;
  background: var(--k-navy-2);
  overflow: hidden;
  color: #fff;
}
.k-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--k-hero-overlay), var(--k-hero-image, none);
  background-size: cover;
  background-position: center 40%;
}
.k-hero::before { z-index: 1; }
.k-hero__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.k-hero > .k-container { position: relative; z-index: 2; }
.k-hero__inner {
  max-width: 680px;
  padding-block: var(--k-space-section-hero) clamp(4.375rem, 3.2rem + 5vw, 6.5rem);
}
.k-hero__title {
  font-size: var(--k-fs-display);
  line-height: 1.03;
  letter-spacing: -0.005em;
  color: #fff;
  margin: 0 0 1.25rem;
}
.k-hero__lead {
  font-size: 1.0625rem; /* gelijk aan de sectietekst eronder; geeft rust */
  line-height: var(--k-lh-lead);
  color: var(--k-hero-text);
  max-width: 560px;
  margin: 0 0 2rem;
}
/* Optionele tweede introregel; zelfde leesmaat als de lead, alleen gedempt */
.k-hero__sub {
  font-size: 1.0625rem;
  line-height: var(--k-lh-lead);
  color: var(--k-hero-text-2);
  max-width: 560px;
  margin: 0 0 1.875rem;
}
.k-hero__lead:has(+ .k-hero__sub),
.k-lead:has(+ .k-hero__sub) { margin-bottom: 0.875rem; }
.k-hero .k-lead { color: var(--k-hero-text); }
.k-hero .k-check { color: var(--k-hero-text); }

/* Op een smal scherm staat de tekst over de volle breedte van de foto, dus het
   verloop van links naar rechts werkt daar niet. Het egale donkere vlak dat er
   eerst stond (94 naar 80 procent) liet van de foto niets meer over (Dennis,
   12 september 2026). Nu loopt het verloop van boven naar beneden: donker achter
   kop en lead, lichter onderin zodat de foto onder de tekst doorkomt. De foto
   zelf iets hoger uitgelijnd, dan valt het onderwerp in het lichte deel. */
@media (max-width: 760px) {
  .k-hero {
    --k-hero-overlay: linear-gradient(180deg,
        rgba(18, 26, 34, 0.92) 0%,
        rgba(18, 26, 34, 0.86) 45%,
        rgba(18, 26, 34, 0.62) 75%,
        rgba(18, 26, 34, 0.42) 100%);
  }
  .k-hero__img { object-position: center 30%; }
}

.k-hero__actions { display: flex; flex-wrap: wrap; gap: 0.875rem; }

/* USP-regel onderin de hero */
.k-hero__usps {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 1.25rem;
  margin-top: 1.75rem;
  max-width: 560px;
}

/* ---- Checkitem (groen vinkje + tekst) ---- */
.k-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.90625rem;
  color: #d3e0e6;
}
.k-check::before {
  content: "";
  flex: none;
  width: 17px;
  height: 17px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fc23f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.k-section .k-check { color: var(--k-text-2); }
.k-section--navy .k-check, .k-section--charcoal .k-check { color: #d3e0e6; }

.k-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.k-checklist .k-check { display: flex; align-items: flex-start; }
.k-checklist .k-check::before { margin-top: 0.2em; }

/* ---- Feature (kolom op donkere band, met topline en //) ---- */
.k-feature {
  border-top: 2px solid rgba(255, 255, 255, 0.16);
  padding-top: 1.5rem;
}
.k-feature .k-slashes { margin-bottom: 1rem; }
.k-feature h3 { color: #fff; font-size: 1.375rem; margin: 0 0 0.5625rem; }
.k-feature p { font-size: 1rem; color: var(--k-on-dark-2); margin: 0; }

/* ---- Spec-tabel (label/waarde-rijen, referentieprojecten) ---- */
.k-spec { border-top: 1px solid var(--k-border); }
.k-spec__row {
  display: flex;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--k-border);
}
.k-spec__label {
  flex: 0 0 130px;
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-blue-text);
}
.k-spec__value { font-size: 1rem; color: #2b3742; }

/* ---- Breadcrumbs ---- */
.k-breadcrumbs {
  background: var(--k-surface-alt);
  border-bottom: 1px solid #e6ecf0;
}
.k-breadcrumbs__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 11px;
  font-size: 0.875rem;
  color: var(--k-text-2);
}
.k-breadcrumbs a { color: var(--k-blue-dark); font-weight: 500; }
.k-breadcrumbs a:hover { color: var(--k-blue-text); text-decoration: underline; }
.k-breadcrumbs__sep { color: #9aa8b0; }
.k-breadcrumbs__current { color: var(--k-ink); font-weight: 600; }

/* ---- Callout (lichte attentiebalk, bijv. doelgroep-verwijzing) ---- */
.k-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
  background: var(--k-surface-alt);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  padding: clamp(1.125rem, 1rem + 0.6vw, 1.375rem) clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  transition: background-color var(--k-dur) var(--k-ease), box-shadow var(--k-dur) var(--k-ease);
}
a.k-callout:hover { background: var(--k-surface); box-shadow: var(--k-shadow-card); }
.k-callout__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
  font-family: var(--k-font-head);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--k-ink);
}
.k-callout__text { font-size: 0.90625rem; color: var(--k-text-2); }
.k-callout__body { flex: 1 1 320px; min-width: 240px; }

/* ---- Formulieren ---- */
.k-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--k-space-s); }

.k-label {
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--k-ink);
}
.k-label__required { color: var(--k-red); }

.k-input, .k-select, .k-textarea {
  width: 100%;
  border: 1px solid var(--k-border-form);
  border-radius: var(--k-radius);
  padding: 12px 14px;
  font-size: 0.96875rem;
  color: var(--k-ink);
  background: var(--k-surface);
  outline: none;
  transition: border-color var(--k-dur) var(--k-ease), box-shadow var(--k-dur) var(--k-ease);
}
.k-textarea { min-height: 130px; resize: vertical; }
.k-input:focus, .k-select:focus, .k-textarea:focus {
  border-color: var(--k-blue);
  box-shadow: var(--k-focus-ring);
}
.k-input[aria-invalid="true"], .k-input.is-error,
.k-select.is-error, .k-textarea.is-error {
  border-color: var(--k-red);
}
.k-input.is-error:focus, .k-select.is-error:focus, .k-textarea.is-error:focus {
  box-shadow: var(--k-focus-ring-error);
}
.k-field__error { font-size: 0.875rem; color: var(--k-red); }
.k-field__hint { font-size: 0.875rem; color: var(--k-text-muted); }

.k-form-grid {
  display: grid;
  gap: 0 var(--k-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

/* ---- Formulierbox (contact en technisch advies) ----
   Witte box die de breedte van het formulier bewaakt, zoals in het ontwerp.
   Bevat de regel "Type vraag" en het WS Form-formulier. De WS Form-variabelen
   worden hier op de huisstijl gezet, zodat elke site het vanzelf meekrijgt. */
.k-form-box {
  max-width: 820px;
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  padding: clamp(24px, 3.2vw, 38px);
}
.k-form-box__route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: var(--k-space-m);
}
.k-form-box__route .k-arrow-link { margin-left: auto; }
/* Privacyregel onder elk formulier (komt uit koster-core, onder de WS Form-shortcode). */
.k-form-box__privacy {
  margin: var(--k-space-s) 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--k-text-muted);
}
/* Specifieker dan de algemene regel voor links in lopende tekst, zodat het
   kleine lettertype op de grijze band het donkerdere merkblauw krijgt. */
.k-form-box__privacy a,
.wp-block-post-content p.k-form-box__privacy > a { color: var(--k-blue-text); text-decoration: underline; text-underline-offset: 2px; }
.k-form-box__privacy a:hover,
.wp-block-post-content p.k-form-box__privacy > a:hover { color: var(--k-blue-dark); }
.k-form-box > p:last-child { margin-bottom: 0; }

.k-form-box .wsf-form {
  --wsf-form-font-family: var(--k-font-body);
  --wsf-form-font-size: 0.96875rem;
  --wsf-form-font-size-small: 0.875rem;
  --wsf-form-line-height: 1.45;
  --wsf-form-color-base: var(--k-ink);
  --wsf-form-color-primary: var(--k-blue);
  --wsf-form-color-accent: var(--k-green);
  --wsf-form-color-neutral: var(--k-text-muted);
  --wsf-form-color-danger: var(--k-red);
  --wsf-form-grid-gap: var(--k-gap);
  --wsf-form-border-radius: var(--k-radius);

  --wsf-field-border-radius: var(--k-radius);
  --wsf-field-border-color: var(--k-border-form);
  --wsf-field-border-color-hover: var(--k-border-form);
  --wsf-field-border-color-focus: var(--k-blue);
  --wsf-field-box-shadow-color-focus: rgba(0, 136, 184, 0.15);
  --wsf-field-box-shadow-width-focus: 3px;
  --wsf-field-padding-horizontal: 14px;
  --wsf-field-padding-vertical: 12px;
  --wsf-field-color-placeholder: var(--k-text-muted);

  --wsf-field-label-font-family: var(--k-font-head);
  --wsf-field-label-font-weight: 600;
  --wsf-field-label-font-size: 0.9375rem;
  --wsf-field-label-color: var(--k-ink);
  --wsf-field-label-gap: 6px;
  --wsf-field-help-color: var(--k-text-muted);

  --wsf-field-button-font-family: var(--k-font-head);
  --wsf-field-button-font-weight: 600;
  --wsf-field-button-font-size: 1rem;
  --wsf-field-button-padding-vertical: 14px;
  --wsf-field-button-padding-horizontal: 26px;
  --wsf-field-button-primary-color-background: var(--k-green-cta);
  --wsf-field-button-primary-border-color: var(--k-green-cta);
  --wsf-field-button-primary-color-background-hover: var(--k-green-cta-hover);
  --wsf-field-button-primary-border-color-hover: var(--k-green-cta-hover);
  --wsf-field-button-primary-color-background-focus: var(--k-green-cta-hover);
  --wsf-field-button-primary-border-color-focus: var(--k-green-cta-hover);

  --wsf-field-checkbox-checked-color-background: var(--k-green);
  --wsf-field-checkbox-gap-horizontal: 10px;

  --wsf-field-file-dropzonejs-color-background: var(--k-surface-soft);
  --wsf-field-file-dropzonejs-border-color: #b9c8d0;
  --wsf-field-file-dropzonejs-border-width: 1.5px;
  --wsf-field-file-dropzonejs-padding-vertical: 24px;
  --wsf-field-file-dropzonejs-padding-horizontal: 24px;
  --wsf-field-file-dropzonejs-progress-color-background-bar: var(--k-blue);
}
.k-form-box .wsf-form .wsf-required { color: var(--k-red); }
.k-form-box .wsf-form .dropzone { color: var(--k-text-2); transition: border-color var(--k-dur) var(--k-ease); }
.k-form-box .wsf-form .dropzone:hover,
.k-form-box .wsf-form .dropzone.dz-drag-hover { border-color: var(--k-blue); }
.k-form-box .wsf-form .wsf-button-primary { letter-spacing: 0.02em; }
/* Een HTML-veld is in WS Form een hint zonder ondermarge; hier wel ruimte en hint-stijl. */
.k-form-box .wsf-form .wsf-field-wrapper[data-type="html"] {
  margin-bottom: var(--k-gap);
  font-size: 0.875rem;
  color: var(--k-text-muted);
}
/* Het label bij een checkbox is lopende tekst, geen veldlabel. */
.k-form-box .wsf-form input[type="checkbox"] + label {
  font-family: var(--k-font-body);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.k-form-box .wsf-form .wsf-fields > .wsf-field-wrapper:last-child { margin-bottom: 0; }

/* Zoekformulier (pagina /zoeken/ en losse zoekvelden) */
.k-search-form {
  display: flex;
  gap: 12px;
  align-items: stretch;
  max-width: 640px;
}
.k-search-form .k-input { flex: 1 1 auto; }
.k-search-form .k-btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 480px) {
  .k-search-form { flex-direction: column; }
}

/* ---- Video-grid (kennisbank/videos) ---- */
.k-video-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.k-video-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  overflow: hidden;
  background: var(--k-surface);
  transition: box-shadow var(--k-dur) var(--k-ease), transform var(--k-dur) var(--k-ease);
}
.k-video-card:hover { box-shadow: 0 12px 28px rgba(16, 50, 63, .14); transform: translateY(-2px); }
.k-video-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0b0f13 center / cover no-repeat;
}
.k-video-card__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(11, 15, 19, .62);
  border: 2px solid rgba(255, 255, 255, .85);
  transition: background var(--k-dur) var(--k-ease), border-color var(--k-dur) var(--k-ease);
}
.k-video-card__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.k-video-card:hover .k-video-card__play { background: var(--k-green); border-color: var(--k-green); }
.k-video-card__title {
  padding: 14px 16px;
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.32;
  color: var(--k-ink);
}

/* ---- Video-lightbox (pop-up op de pagina) ---- */
.k-video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 18, .85);
  padding: clamp(16px, 4vw, 40px);
}
.k-video-modal.is-open { display: flex; }
.k-video-modal__dialog { position: relative; width: min(100%, 1040px); }
.k-video-modal__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--k-radius);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.k-video-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.k-video-modal__close {
  position: absolute;
  top: -42px;
  right: -4px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  opacity: .85;
  transition: opacity var(--k-dur) var(--k-ease);
}
.k-video-modal__close:hover { opacity: 1; }
@media (max-width: 520px) { .k-video-modal__close { top: -38px; } }

/* Het hidden-attribuut moet altijd winnen van display:flex/grid op filteritems. */
[hidden] { display: none !important; }

/* ---- Referenties-archief (filterbare items in het grid) ---- */
.k-ref-item { display: flex; }
.k-ref-item > .k-card { width: 100%; }
.k-more { text-align: center; margin-top: 28px; }

/* ---- Kennisbank-archief ---- */
.k-ka-themes { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.k-ka-theme {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--k-border); border-radius: var(--k-radius);
  background: var(--k-surface); padding: 11px 18px;
  font-family: var(--k-font-head); font-weight: 600; font-size: 0.96875rem;
  color: var(--k-ink); cursor: pointer;
  transition: border-color var(--k-dur) var(--k-ease), background var(--k-dur) var(--k-ease), color var(--k-dur) var(--k-ease);
}
.k-ka-theme span { color: var(--k-text-muted); font-weight: 500; }
.k-ka-theme:hover { border-color: var(--k-blue); }
.k-ka-theme.is-active { background: var(--k-blue-text); border-color: var(--k-blue-text); color: #fff; }
.k-ka-theme.is-active span { color: rgba(255, 255, 255, .72); }
.k-ka-item { display: flex; }
.k-ka-item > .k-card { width: 100%; }
.k-ka-search { max-width: 560px; margin-top: 1.75rem; }
.k-ka-search .k-input { font-size: 1.0625rem; padding: 15px 18px; }

/* Placeholder-beeld voor kaarten zonder eigen afbeelding (uniform in het grid) */
.k-card__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--k-surface-alt);
}
.k-card__media--placeholder .k-slashes { transform: scale(1.7); opacity: .4; }

/* Kennis-kaartgrid: vaste kaartbreedte + links uitlijnen, zodat een enkele kaart
   niet over de volle breedte uitrekt. Op mobiel één kolom. */
.k-grid--kennis {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 360px));
  justify-content: start;
}

/* Populaire-vragen chips onder de kennisbank-hero */
.k-question-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.k-question-chips a {
  display: inline-block;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  background: var(--k-surface);
  padding: 8px 14px;
  font-size: 0.9375rem;
  color: var(--k-text-2);
  text-decoration: none;
  transition: border-color var(--k-dur) var(--k-ease), color var(--k-dur) var(--k-ease);
}
.k-question-chips a:hover { border-color: var(--k-blue); color: var(--k-blue-text); }

/* ---- Utility-balk (donkere laag boven de header) ---- */
/* De smalle balk blijft bij het scrollen staan, met de hoofdbalk eronder. De
   taalkeuze staat hierin, en die moet je ook halverwege een lange pagina nog
   kunnen bereiken. De hoogte staat vast op 44px, dus de hoofdbalk kan daar
   precies onder plakken. */
.k-utility {
  position: sticky;
  top: 0;
  z-index: 61;
  background: var(--k-charcoal);
  color: #b9c2c9;
  font-size: 0.9375rem;
}
.k-utility__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 44px;
}
.k-utility__links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  font-weight: 600;
}
/* De utility-balk draagt echte navigatie (downloads, video's, doelgroepen), dus
   de links moeten leesbaar zijn en niet wegvallen tegen de charcoal band. */
.k-utility__links a {
  color: var(--k-on-dark);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.k-utility__links a:hover { color: #fff; border-bottom-color: var(--k-green-bright); }
/* Scheiding voor de webshop: dat is een andere bestemming dan de rest. */
.k-utility__divider { width: 1px; height: 16px; background: #3a4046; }
/* De webshop is de enige verkooproute in de balk; die mag opvallen. */
.k-utility__shop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff !important;
}
.k-utility__shop svg { color: var(--k-green-bright); }
.k-utility__phone { color: #fff !important; font-weight: 700; }

/* Talen in de utility-balk. Alleen zichtbaar op een site met meer dan één
   taal, dus in de praktijk Luxemburg. De huidige taal blijft leesbaar maar
   niet aanklikbaar, zodat duidelijk is waar je staat. */
.k-talen { display: inline-flex; align-items: center; gap: 8px; }
.k-talen > * + *::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-right: 8px;
  background: #3a4046;
  vertical-align: -2px;
}
.k-talen__huidig,
.k-talen__link {
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.78125rem;
  letter-spacing: 0.04em;
  line-height: 1;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.k-talen__huidig { color: #fff; border-bottom-color: var(--k-green-bright); }
.k-talen__link { color: #9aa6ae; text-decoration: none; }
.k-talen__link:hover { color: #fff; border-bottom-color: var(--k-green-bright); }

/* ---- Taalkeuze met vlag -------------------------------------------------
   Deze staat in de hoofdbalk en niet in de smalle balk erboven, zodat hij bij
   het scrollen in beeld blijft. Uitklapper op een details-element: dat opent
   ook zonder JavaScript; het script sluit hem alleen bij een klik ernaast. */
.k-talen--vlag { position: relative; }
.k-talen--vlag > * + *::before { content: none; }
.k-vlag {
  flex: none;
  width: 21px;
  height: 15px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(10, 35, 48, 0.18);
}
.k-vlag--code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 21px;
  padding: 0 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--k-surface-alt);
  color: var(--k-ink);
}

.k-talen__uitklap { position: relative; }
.k-talen__knop {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 38px;
  padding: 0 9px;
  border: 1px solid var(--k-border-2);
  border-radius: var(--k-radius);
  background: var(--k-surface);
  color: var(--k-ink);
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  transition: border-color var(--k-dur) var(--k-ease), color var(--k-dur) var(--k-ease);
}
/* Het driehoekje dat Safari en Chrome zelf voor een summary zetten weghalen. */
.k-talen__knop::-webkit-details-marker { display: none; }
.k-talen__knop::marker { content: ""; }
.k-talen__knop:hover { border-color: var(--k-blue); color: var(--k-blue-text); }
.k-talen__uitklap[open] > .k-talen__knop { border-color: var(--k-blue); color: var(--k-blue-text); }
.k-talen__pijl { transition: transform var(--k-dur) var(--k-ease); }
.k-talen__uitklap[open] .k-talen__pijl { transform: rotate(180deg); }

.k-talen__lijst {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 70;
  min-width: 100%;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: var(--k-surface);
  border: 1px solid var(--k-border-2);
  border-radius: var(--k-radius);
  box-shadow: var(--k-shadow-panel);
}
.k-talen__optie {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: calc(var(--k-radius) - 2px);
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--k-ink);
  text-decoration: none;
}
a.k-talen__optie:hover { background: var(--k-surface-alt); color: var(--k-blue-text); }
.k-talen__optie--huidig { color: var(--k-blue-text); cursor: default; }

/* De lijst is breder dan de knop, want daar staat de naam van de taal wel bij. */
.k-talen__lijst { min-width: max-content; }

/* In de smalle balk is de achtergrond donker. De knop krijgt daar dezelfde
   behandeling als het zoekveld ernaast: doorzichtig met een lichte rand. De
   lijst blijft wit, want die klapt over de pagina open. */
.k-utility .k-talen__knop {
  height: 30px;
  padding: 0 8px;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.18);
  color: #e7ecef;
}
.k-utility .k-talen__knop:hover,
.k-utility .k-talen__uitklap[open] > .k-talen__knop {
  border-color: var(--k-green-bright);
  color: #fff;
}
.k-utility .k-vlag { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
/* De balk legt zijn lijsten naast elkaar en kleurt zijn links licht, want daar
   staan ze op donker. De uitklapper is een wit paneel en moet daar buiten
   vallen: de talen onder elkaar en in donkere letters. */
.k-utility .k-utility__links ul.k-talen__lijst {
  display: block;
  padding: 5px;
  gap: 0;
}
.k-utility .k-talen__lijst li { display: block; }
.k-utility .k-utility__links .k-talen__optie {
  display: flex;
  color: var(--k-ink);
  border-bottom: none;
  padding: 8px 10px;
}
.k-utility .k-utility__links a.k-talen__optie:hover {
  background: var(--k-surface-alt);
  color: var(--k-blue-text);
  border-bottom: none;
}
.k-utility .k-utility__links .k-talen__optie--huidig { color: var(--k-blue-text); }
.k-utility .k-talen__optie .k-vlag { box-shadow: inset 0 0 0 1px rgba(10, 35, 48, 0.18); }

/* In het mobiele paneel staat de keuze onder het menu, links uitgelijnd en even
   compact als in de balk. De lijst klapt daar naar rechts open. */
.k-mobile-panel .k-talen--vlag { margin: var(--k-space-s) 0; }
.k-mobile-panel .k-talen__uitklap { display: inline-block; }
.k-mobile-panel .k-talen__lijst { right: auto; left: 0; }

.k-utility__search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--k-radius);
  padding: 0 11px;
  height: 30px;
  width: min(300px, 100%);
  background: rgba(255, 255, 255, 0.18);
}
/* Vergrootglas vóór het invoerveld; eerste flex-child, gap regelt de ruimte */
.k-utility__search::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23cfd6db' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E");
}
.k-utility__search:focus-within { border-color: var(--k-green-bright); }
.k-utility__search input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.8125rem;
  color: #fff;
  width: 100%;
}
.k-utility__search input::placeholder { color: #e2e8ec; opacity: 1; }

/* ---- Header + navigatie ---- */
.k-header {
  position: sticky;
  top: 44px; /* onder de smalle balk, die daar blijft plakken */
  z-index: 60;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--k-border);
}
.k-header__inner {
  display: flex;
  align-items: center;
  gap: var(--k-space-m);
  height: clamp(4.5rem, 4rem + 2vw, 5.75rem); /* 72 → 92px */
}
.k-header__logo img { height: clamp(3rem, 2.6rem + 1.8vw, 4.375rem); width: auto; }

.k-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--k-space-m);
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 1.03125rem;
  color: var(--k-nav);
}
.k-nav a {
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--k-dur) var(--k-ease), border-color var(--k-dur) var(--k-ease);
}
.k-nav a:hover, .k-nav a[aria-current="page"] {
  color: var(--k-blue-text);
  border-bottom-color: var(--k-blue);
}

.k-burger {
  display: none;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--k-border-2);
  background: var(--k-surface);
  border-radius: var(--k-radius);
  cursor: pointer;
  color: var(--k-ink);
}

@media (max-width: 980px) {
  .k-utility, .k-nav, .k-header .k-btn { display: none; }
  .k-header { top: 0; } /* zonder smalle balk plakt de hoofdbalk zelf bovenaan */
  .k-burger { display: inline-flex; margin-left: auto; }
}

/* ---- Mobiel menupaneel --------------------------------------------------
   Schuift van rechts in (design: min(360px, 86vw)) met backdrop.
   Open/dicht via .is-open, gestuurd door het theme-script. */
.k-mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(10, 35, 48, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--k-dur-slow) var(--k-ease), visibility 0s linear var(--k-dur-slow);
}
.k-mobile-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--k-dur-slow) var(--k-ease);
}

.k-mobile-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 66;
  width: min(360px, 86vw);
  background: var(--k-surface);
  box-shadow: var(--k-shadow-panel);
  display: flex;
  flex-direction: column;
  padding: var(--k-space-m) var(--k-space-m) var(--k-space-l);
  overflow-y: auto;
  transform: translateX(105%);
  /* Dicht ook echt onbereikbaar: alleen wegschuiven liet de links en knoppen
     in de tabvolgorde en voor de schermlezer staan. Visibility springt pas na
     de schuifanimatie om, zodat het paneel nog zichtbaar wegglijdt. */
  visibility: hidden;
  transition: transform var(--k-dur-slow) var(--k-ease), visibility 0s linear var(--k-dur-slow);
}
.k-mobile-panel.is-open {
  transform: none;
  visibility: visible;
  transition: transform var(--k-dur-slow) var(--k-ease);
}
body.k-menu-open { overflow: hidden; }

.k-mobile-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--k-space-m);
}
.k-mobile-panel__head img { height: 34px; width: auto; }

.k-mobile-close {
  width: 42px;
  height: 42px;
  border: 1px solid var(--k-border-2);
  background: var(--k-surface);
  border-radius: var(--k-radius);
  cursor: pointer;
  color: var(--k-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.k-mobile-search {
  display: flex;
  align-items: center;
  gap: var(--k-space-2xs);
  background: var(--k-surface-input);
  border: 1px solid var(--k-border-2);
  border-radius: var(--k-radius);
  padding: 0 var(--k-space-xs);
  height: 46px;
  margin-bottom: var(--k-space-m);
  flex: none;
}
.k-mobile-search input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.96875rem;
  color: var(--k-ink);
  width: 100%;
}

.k-mobile-panel__label {
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.78125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k-text-muted);
  margin: var(--k-space-m) 0 var(--k-space-2xs);
}
.k-mobile-quick { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.k-mobile-quick a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--k-surface-input);
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 1.03125rem;
  color: var(--k-nav);
}
.k-mobile-quick > :last-child a,
.k-mobile-quick a:last-child { border-bottom: none; }

.k-mobile-panel .k-btn { width: 100%; margin-top: var(--k-space-m); }
.k-mobile-phone {
  margin-top: var(--k-space-xs);
  text-align: center;
  font-family: var(--k-font-head);
  font-weight: 600;
  color: var(--k-blue-text);
}

@media (min-width: 981px) {
  .k-mobile-backdrop, .k-mobile-panel { display: none; }
}

/* ---- CTA-band (afsluitend adviesblok) ---- */
.k-cta-band {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);
  align-items: center;
  justify-content: space-between;
}
.k-cta-band__body { flex: 1 1 500px; max-width: 660px; }
.k-cta-band__note { font-size: 0.90625rem; color: #8fb0bd; margin: 0; }
.k-cta-band__actions {
  flex: 0 1 320px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
/* Alle acties in de kolom even breed, ook knoppen in een wp-block-buttons wrapper */
.k-cta-band__actions .wp-block-buttons,
.k-cta-band__actions .wp-block-button,
.k-cta-band__actions .wp-block-button__link,
.k-cta-band__actions .k-btn {
  width: 100%;
}

/* ---- Footer ---- */
.k-footer {
  background: var(--k-navy);
  color: var(--k-on-dark-muted);
  padding-top: clamp(3rem, 2.5rem + 2vw, 3.875rem);
}
.k-footer__grid { display: flex; flex-wrap: wrap; gap: 38px; }
.k-footer__col { flex: 1 1 150px; }
.k-footer__col--brand { flex: 1 1 260px; max-width: 330px; }
.k-footer__logo { height: 34px; width: auto; filter: brightness(0) invert(1); opacity: 0.92; margin-bottom: var(--k-space-m); }
.k-footer h3 {
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 var(--k-space-s);
}
/* Elke link minstens 24px hoog (WCAG 2.5.8): de ruimte zit in de link zelf
   in plaats van ertussen, dus de regelafstand blijft gelijk. */
.k-footer__links { display: flex; flex-direction: column; gap: 5px; font-size: 0.9375rem; }
.k-footer__links a { display: inline-block; min-height: 24px; }
.k-footer__links a:hover { color: var(--k-green-bright); }
/* Oplossingenkolom: alle systemen in twee kolommen naast elkaar. Multicol
   in plaats van grid, zodat de lijst vanzelf naar één kolom terugvalt als
   er te weinig ruimte is en het aantal items mag wisselen. */
.k-footer__col--breed { flex: 3 1 320px; }
.k-footer__links--twee {
  display: block;
  columns: 2 170px;
  column-gap: 30px;
}
.k-footer__links--twee > li { break-inside: avoid; margin-bottom: 5px; }
.k-footer__bottom {
  margin-top: clamp(2.25rem, 2rem + 1.4vw, 3rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 20px;
  font-size: 0.8125rem;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
}

/* Colofon: de wettelijke bedrijfsgegevens, stil onderaan de voet. */
.k-footer__colofon {
  margin: 18px 0 0;
  max-width: 34ch;
  color: var(--k-on-dark-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* ---- Mobiele sticky CTA (onderin beeld op telefoons) ---- */
.k-sticky-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 55;
  display: none;
  gap: 10px;
  padding: 10px var(--k-container-pad) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 -6px 20px rgba(13, 43, 56, 0.1);
}
.k-sticky-cta .k-btn { flex: 1; }
@media (max-width: 980px) {
  .k-sticky-cta { display: flex; }
  body.has-sticky-cta { padding-bottom: 76px; }
}

/* =====================================================================
   5. UTILITIES
   ===================================================================== */
.k-text-2      { color: var(--k-text-2); }
.k-text-muted  { color: var(--k-text-muted); }
.k-text-blue   { color: var(--k-blue-text); }
.k-text-green  { color: var(--k-green); }
.k-mt-0 { margin-top: 0; }
.k-mb-0 { margin-bottom: 0; }
.k-mb-1 { margin-bottom: 0.5rem; }
.k-mb-2 { margin-bottom: 1rem; }
.k-mb-3 { margin-bottom: 1.375rem; }
.k-mb-4 { margin-bottom: 2rem; }
.k-mb-5 { margin-bottom: var(--k-space-block); }
.k-flow > * + * { margin-top: 1em; }
.k-measure { max-width: 40em; }

/* Losse kern-koppen binnen een sectie (vraag/antwoord-secties, lopende uitleg)
   krijgen ritme boven zich; de eerste kop sluit aan op de sectiekop. */
.acf-innerblocks-container > h2:not(:first-child),
.acf-innerblocks-container > h3:not(:first-child) { margin-top: 2.5rem; }

/* ---- Artikelkolom (kennisartikel / bericht) ----
   Tekst (koppen, alinea's, lijsten) staat op een leesbare, gecentreerde maat.
   Afbeeldingen en Köster-blokken vullen de volle kolombreedte en zijn zo breder
   dan de tekst, zodat een artikel visueel kan ademen. */
.k-article > :not(.wp-block-post-content),
.k-article .wp-block-post-content > :is(p, h2, h3, h4, h5, ul, ol, blockquote, dl, pre) {
  max-width: var(--k-article-w);
  margin-inline: auto;
  /* theme.css geeft post-content-kinderen 32px zijruimte (voor gewone pagina's);
     in de artikelkolom weghalen zodat de body links uitlijnt met de titel. */
  padding-inline: 0;
}
.k-article .k-lead { margin-bottom: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.k-article .wp-block-post-content :is(h2, h3) { margin-top: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
/* Uitgelichte afbeelding bovenaan een artikel (single Actueel) */
.k-article__media { margin-block: clamp(1.25rem, 1rem + 1.4vw, 2rem); }
.k-article__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--k-border); border-radius: var(--k-radius); }
/* Köster-blokken in een artikel volgen de leesbare contentbreedte (uitlijnen met
   de tekst) en krijgen wat meer verticale ruimte, zodat ze niet uit de kolom breken. */
.k-article .wp-block-post-content > [class*="wp-block-koster-"] {
  max-width: var(--k-article-w);
  margin-inline: auto;
  margin-block: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-inline: 0;
}
/* De regel hierboven zet de horizontale padding van Köster-blokken op nul, zodat
   ze links met de tekst uitlijnen. Een callout is echter een kader met eigen
   binnenruimte: die plakte daardoor tegen de rand. Padding hier terugzetten. */
.k-article .wp-block-post-content > .wp-block-koster-callout {
  padding-inline: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
}
/* Pijl-links en knoppen in de artikelkolom uitlijnen met de tekst.
   k-arrow-link is inline-flex en brak anders links uit de kolom; knoppen
   werden helemaal niet ingeperkt. */
.k-article .wp-block-post-content > p.k-arrow-link { display: flex; }
.k-article .wp-block-post-content > .wp-block-buttons {
  max-width: var(--k-article-w);
  margin-inline: auto;
  padding-inline: 0;
}

.k-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   WORDPRESS-KOPPELING (optioneel)
   Maak Gutenberg-kernblokken huisstijl-conform zonder extra klassen.
   ===================================================================== */
.wp-block-button__link,
.wp-element-button {
  background: var(--k-green-cta);
  color: #fff;
  font-family: var(--k-font-head);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--k-radius);
  padding: 0.9375rem 1.75rem;
}
.wp-block-button__link:hover,
.wp-element-button:hover { background: var(--k-green-cta-hover); }

.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--k-ink);
  border: 1.5px solid var(--k-border-form);
}

/* Blauwe knop: een verwijzing die op moet vallen, zoals "bekijk alle producten
   en oplossingen" onderaan een sectie. Groen blijft voorbehouden aan de actie
   (advies vragen, bestellen, downloaden), blauw is op deze site de kleur van
   navigatie. Een pijl-link is de stillere variant van hetzelfde. */
.is-style-blauw .wp-block-button__link,
.k-btn--blauw {
  background: var(--k-blue-text);
  color: #fff;
}
.is-style-blauw .wp-block-button__link:hover,
.k-btn--blauw:hover { background: var(--k-blue-dark); }

.wp-block-quote {
  border-left: 3px solid var(--k-blue);
  margin: 1.5em 0;
  padding: 0.25em 0 0.25em 1.25em;
  color: var(--k-text-2);
}

.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th {
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-blue-text);
  text-align: left;
}
.wp-block-table th, .wp-block-table td {
  border-bottom: 1px solid var(--k-border);
  padding: 13px 12px 13px 0;
}

/* =====================================================================
   6. CONTENT- EN OVERZICHTSCOMPONENTEN
   Terugkerende componenten uit de detail- en overzichtspagina's:
   filters, documenten, stappen, artikelen, zoeken en formulieren.
   ===================================================================== */

/* ---- Filterchips -----------------------------------------------------
   Toggle-knoppen voor overzichten (kennisbank, referenties, downloads).
   Actieve chip is navy gevuld. */
.k-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.k-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  padding: 9px 15px;
  border-radius: var(--k-radius);
  border: 1px solid #d9e2e8;
  background: var(--k-surface);
  color: #3c4a54;
  cursor: pointer;
  transition: border-color var(--k-dur) var(--k-ease), color var(--k-dur) var(--k-ease), background-color var(--k-dur) var(--k-ease);
}
.k-chip:hover { border-color: var(--k-blue); color: var(--k-blue-text); }
.k-chip.is-active {
  background: var(--k-navy);
  border-color: var(--k-navy);
  color: #fff;
}
.k-chip--removable {
  background: var(--k-blue-tint);
  border-color: #b9dced;
  color: #0a5a78;
}

.k-filterbar {
  background: var(--k-surface-soft);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  padding: 6px 20px;
}
.k-chip-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #e6ecf0;
}
.k-chip-row:last-child { border-bottom: none; }
.k-chip-row__label {
  flex: 0 0 92px;
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.78125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-text-muted);
}
/* Filterknop + bodempaneel: op mobiel staan de filters achter één knop, zodat
   een overzicht niet begint met een scherm vol chips. De knop en het paneel
   worden door de JS toegevoegd (klasse k-filterbar--sheet); zonder JavaScript
   blijft de filterbar een gewone gestapelde balk. */
.k-filter-toggle,
.k-filterbar__head,
.k-filterbar__done { display: none; }

@media (max-width: 640px) {
  /* In kolomrichting is flex-basis de hoogte: 92px gaf een gat onder het label. */
  .k-chip-row { align-items: flex-start; flex-direction: column; gap: 8px; padding: 10px 0; }
  .k-chip-row__label { flex: 0 0 auto; }
  .k-chip-row .k-input { max-width: none !important; width: 100%; }
  /* Hero-knoppen vullen de breedte, zodat ze op mobiel overal even groot zijn ongeacht de labellengte. */
  .k-hero__actions { flex-direction: column; align-items: stretch; }
  .k-hero__actions .k-btn { width: 100%; }

  .k-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin-bottom: 18px;
    padding: 11px 16px;
    font-family: var(--k-font-head);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--k-navy);
    background: var(--k-surface);
    border: 1px solid #d9e2e8;
    border-radius: var(--k-radius);
    cursor: pointer;
  }
  .k-filter-toggle__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--k-blue-text);
    color: #fff;
    font-size: 0.75rem;
  }
  .k-filter-toggle__count:empty { display: none; }

  .k-filterbar--sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 90;
    max-height: 86vh;
    overflow-y: auto;
    margin: 0 !important;
    padding: 0 18px 18px;
    border-width: 1px 0 0;
    border-radius: 16px 16px 0 0;
    background: var(--k-surface);
    box-shadow: 0 -14px 40px rgba(10, 35, 48, .22);
    transform: translateY(101%);
    visibility: hidden;
    transition: transform var(--k-dur) var(--k-ease), visibility var(--k-dur);
  }
  .k-filterbar--sheet.is-open { transform: none; visibility: visible; }
  .k-filterbar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 14px 0 10px;
    background: var(--k-surface);
    font-family: var(--k-font-head);
    font-weight: 700;
    color: var(--k-navy);
  }
  .k-filterbar__close {
    border: none;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--k-text-muted);
    cursor: pointer;
    padding: 0 4px;
  }
  .k-filterbar__done { display: flex; width: 100%; justify-content: center; margin-top: 16px; }

  .k-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 89;
    background: rgba(10, 35, 48, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--k-dur) var(--k-ease);
  }
  .k-filter-backdrop.is-open { opacity: 1; pointer-events: auto; }
}

/* ---- Meta-pill (tags bij artikelen en documenten) ---- */
.k-meta-pill {
  display: inline-block;
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.71875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 3px 8px;
  border-radius: var(--k-radius);
  background: var(--k-surface-input);
  border: 1px solid #e6ecf0;
  color: var(--k-text-2);
}
.k-meta-pill--blue {
  background: var(--k-blue-tint);
  border-color: #cfe6f0;
  color: #0a5a78;
}

/* ---- Genummerde stappen ----------------------------------------------
   Drie varianten: kaarten met groot nummer (licht), platte rijen op een
   donkere band (--flat) en ronde nummerbadge (--round). */
.k-steps {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.k-step {
  background: var(--k-surface-soft);
  border: 1px solid #e6ecf0;
  border-top: 3px solid var(--k-blue);
  border-radius: var(--k-radius);
  padding: 24px;
}
.k-step__num {
  display: block;
  font-family: var(--k-font-head);
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1;
  color: var(--k-blue-text);
  margin-bottom: 0.625rem;
}
.k-step h3 { font-size: 1.25rem; margin: 0 0 0.4em; }
.k-step p { font-size: 0.9375rem; color: var(--k-text-2); margin: 0; }

.k-steps--flat { gap: 0 40px; }
.k-steps--flat .k-step {
  display: flex;
  gap: 16px;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  padding: 22px 0;
}
.k-steps--flat .k-step__num {
  flex: none;
  width: 38px;
  font-size: 1.375rem;
  color: var(--k-green-bright);
  margin: 0;
}
.k-steps--flat .k-step p { color: var(--k-on-dark-2); }

.k-step__num--round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(95, 194, 63, 0.18);
  color: var(--k-green-bright);
  font-size: 1rem;
}

/* ---- Documentrij (downloads) ---- */
.k-doc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.k-doc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--k-surface);
  border: 1px solid var(--k-border-2);
  border-left: 3px solid var(--k-blue);
  border-radius: var(--k-radius);
  padding: 14px 16px;
  transition: box-shadow var(--k-dur) var(--k-ease), transform var(--k-dur) var(--k-ease);
}
.k-doc:hover { box-shadow: var(--k-shadow-card); transform: translateY(-1px); }
.k-doc__file {
  position: relative;
  flex: none;
  width: 44px;
  height: 52px;
  background: var(--k-blue-tint);
  border: 1px solid #cfe6f0;
  border-radius: var(--k-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--k-blue-text);
}
.k-doc__ext {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--k-charcoal-2);
  color: #fff;
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.59375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  padding: 3px 6px;
  border-radius: var(--k-radius);
}
.k-doc__ext--pdf { background: #c0392b; }
.k-doc__ext--docx { background: var(--k-blue-text); }
.k-doc__ext--dwg { background: var(--k-green-text); }
.k-doc__body { flex: 1 1 260px; min-width: 0; }
.k-doc__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 5px; }
.k-doc__title {
  font-family: var(--k-font-head);
  font-weight: 700;
  font-size: 1.09375rem;
  color: var(--k-ink);
  margin: 0 0 4px;
}
.k-doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 0.78125rem;
  color: #8593a0;
}
.k-doc__actions {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Documenttegels-grid (koster/doc-tegels) */
.k-doc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 12px; }

/* Documenttegel op een donkere band */
.k-doc-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--k-radius);
  padding: 14px 16px;
  color: #fff;
  transition: background-color var(--k-dur) var(--k-ease), border-color var(--k-dur) var(--k-ease);
}
.k-doc-tile:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--k-green-bright); }
.k-doc-tile__title { display: block; font-family: var(--k-font-head); font-weight: 600; font-size: 1rem; }
.k-doc-tile__sub { font-size: 0.84375rem; color: var(--k-on-dark-muted); }

/* ---- Icoon-actiekaart ---- */
.k-icon-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--k-surface);
  border: 1px solid var(--k-border-2);
  border-top: 3px solid var(--k-blue);
  border-radius: var(--k-radius);
  padding: 24px 22px;
  transition: box-shadow var(--k-dur) var(--k-ease), transform var(--k-dur) var(--k-ease);
}
a.k-icon-card:hover { box-shadow: var(--k-shadow-hover); transform: translateY(-2px); }
.k-icon-card__icon {
  width: 46px;
  height: 46px;
  background: var(--k-blue-tint);
  border: 1px solid #cfe6f0;
  border-radius: var(--k-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--k-blue-text);
}
.k-icon-card h3 { font-size: 1.1875rem; margin: 0; }
.k-icon-card p { font-size: 0.90625rem; color: var(--k-text-2); margin: 0; flex: 1; }

/* ---- Compacte link-tegel ---- */
.k-tile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  padding: 18px 20px;
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--k-ink);
  transition: border-color var(--k-dur) var(--k-ease), color var(--k-dur) var(--k-ease), box-shadow var(--k-dur) var(--k-ease);
}
.k-tile-link::after { content: "\2192"; color: var(--k-blue-text); }
.k-tile-link:hover { border-color: var(--k-blue); color: var(--k-blue-text); box-shadow: var(--k-shadow-card); }
/* Hub-tegel "Alle producten en oplossingen" (altijd de laatste tegel in een
   gerelateerde-rij) onderscheidt zich subtiel. De :last-child voorkomt dat
   andere tegels die naar de hub linken, per ongeluk deze stijl krijgen. */
.k-tile-link[href="/producten-en-oplossingen/"]:last-child {
  background: var(--k-blue-tint);
  border-color: var(--k-blue);
}
.k-tile-link[href="/producten-en-oplossingen/"]:last-child:hover {
  background: var(--k-blue-tint);
  border-color: var(--k-blue);
  color: var(--k-blue-text);
  box-shadow: var(--k-shadow-card);
}

/* ---- Toepassingen: uitklapbare tegels (native details/summary) ---- */
.k-toepassingen {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: start;
}
.k-toepassing {
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  transition: border-color var(--k-dur) var(--k-ease), box-shadow var(--k-dur) var(--k-ease);
}
.k-toepassing:hover,
.k-toepassing[open] { border-color: var(--k-blue); box-shadow: var(--k-shadow-card); }
.k-toepassing > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--k-ink);
}
.k-toepassing > summary::-webkit-details-marker { display: none; }
.k-toepassing > summary::after {
  content: "+";
  flex: none;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--k-blue-text);
  transition: transform var(--k-dur) var(--k-ease);
}
.k-toepassing[open] > summary::after { transform: rotate(45deg); }
.k-toepassing__panel { padding: 0 20px 18px; color: var(--k-text-2); }
.k-toepassing__panel > :first-child { margin-top: 0; }
.k-toepassing__panel > :last-child { margin-bottom: 0; }
.k-toepassing__panel p { max-width: 60ch; }
.k-toepassing__panel .k-arrow-link { margin-top: 12px; }
/* JS-verrijkt: paneel opent volle-breedte onder de rij i.p.v. in de tegel. */
.k-toepassingen--js .k-toepassing { cursor: pointer; }
.k-toepassingen--js .k-toepassing__panel { display: none; }
.k-toepassing.is-active { border-color: var(--k-blue); box-shadow: var(--k-shadow-card); }
.k-toepassing.is-active > summary::after { transform: rotate(45deg); }
.k-toepassingen__drawer {
  grid-column: 1 / -1;
  background: var(--k-surface);
  border: 1px solid var(--k-blue);
  border-radius: var(--k-radius);
  padding: clamp(1.125rem, 1rem + 0.6vw, 1.5rem) clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  color: var(--k-text-2);
}
.k-toepassingen__drawer > :first-child { margin-top: 0; }
.k-toepassingen__drawer > :last-child { margin-bottom: 0; }
.k-toepassingen__drawer p { max-width: 70ch; }
.k-toepassingen__drawer .k-arrow-link { margin-top: 12px; }

/* ---- Tegelgroepen (link-tegels per categorie met duidelijke kop) ----
   Elke groep krijgt een dunne accentstreep links; de kleur wisselt subtiel
   per groep binnen het merkpalet (blauw, groen, navy, charcoal). */
.k-tilegroup {
  border-left: 3px solid var(--k-tilegroup-accent, var(--k-blue));
  padding-left: clamp(1rem, 0.8rem + 1vw, 1.5rem);
}
.k-tilegroup + .k-tilegroup { margin-top: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.k-tilegroup:nth-child(odd)  { --k-tilegroup-accent: var(--k-blue); }
.k-tilegroup:nth-child(even) { --k-tilegroup-accent: var(--k-green); }
.k-tilegroup__title {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: var(--k-fs-h3);
  line-height: var(--k-lh-head);
  color: var(--k-ink);
  margin: 0 0 1.125rem;
}
.k-tilegroup__title .k-slashes { flex: none; }

/* ---- Sticky paginanavigatie (ankerlinks op lange pagina's) ---- */
.k-pagenav {
  position: sticky;
  top: clamp(4.5rem, 4rem + 2vw, 5.75rem); /* onder de sticky header */
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--k-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.k-pagenav::-webkit-scrollbar { display: none; }
.k-pagenav__inner {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 54px;
  white-space: nowrap;
}
.k-pagenav a {
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--k-charcoal-2);
  padding: 8px 14px;
  border-bottom: 2px solid transparent;
}
.k-pagenav a:hover, .k-pagenav a.is-active {
  color: var(--k-blue-text);
  border-bottom-color: var(--k-blue);
}
.k-pagenav__cta {
  margin-left: auto;
  background: var(--k-green-tint);
  color: var(--k-green-text) !important;
  border-radius: var(--k-radius);
  border-bottom: none !important;
}
.k-pagenav__cta:hover { background: var(--k-green-cta); color: #fff !important; }
[id] { scroll-margin-top: 150px; }

/* ---- Bijbehorende systemen (kennisbank-hub → oplossingspagina's) ---- */
.k-syslinks { font-size: 0.9rem; color: var(--k-text-2); margin: 0.85rem 0 0; }
.k-syslinks__label { font-weight: 600; color: var(--k-ink); }
.k-syslinks a { color: var(--k-blue-text); }
.k-syslinks a:hover { text-decoration: underline; }

/* ---- Twee routes op donker (bijv. webshop vs technisch advies) ---- */
.k-routes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.k-route {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--k-radius);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.k-route h3 { color: #fff; margin: 0 0 0.5rem; }
.k-route p { color: #aab1b8; font-size: 0.95rem; margin: 0 0 1.15rem; }
@media (max-width: 680px) { .k-routes { grid-template-columns: 1fr; } }

/* ---- Paginering (archief-grids: Actueel, referenties, kennisbank) ---- */
.k-pagination {
  gap: 8px;
  margin-top: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.96875rem;
}
.k-pagination .wp-block-query-pagination-numbers {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.k-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  background: var(--k-surface);
  color: var(--k-ink);
  transition: border-color var(--k-dur) var(--k-ease), color var(--k-dur) var(--k-ease), background-color var(--k-dur) var(--k-ease), box-shadow var(--k-dur) var(--k-ease);
}
.k-pagination a.page-numbers:hover { border-color: var(--k-blue); color: var(--k-blue-text); box-shadow: var(--k-shadow-card); }
.k-pagination .page-numbers.current { background: var(--k-blue-text); border-color: var(--k-blue-text); color: #fff; }
.k-pagination .page-numbers.dots { min-width: 1.5rem; border-color: transparent; background: transparent; color: var(--k-text-muted); }
.k-pagination .wp-block-query-pagination-previous,
.k-pagination .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  background: var(--k-surface);
  color: var(--k-ink);
  transition: border-color var(--k-dur) var(--k-ease), color var(--k-dur) var(--k-ease), box-shadow var(--k-dur) var(--k-ease);
}
.k-pagination .wp-block-query-pagination-previous:hover,
.k-pagination .wp-block-query-pagination-next:hover { border-color: var(--k-blue); color: var(--k-blue-text); box-shadow: var(--k-shadow-card); }
.k-pagination .wp-block-query-pagination-previous::before { content: "\2190"; color: var(--k-blue-text); }
.k-pagination .wp-block-query-pagination-next::after { content: "\2192"; color: var(--k-blue-text); }

/* ---- FAQ-accordion (native details/summary) ---- */
.k-faq { border-top: 1px solid var(--k-border); }
.k-faq details { border-bottom: 1px solid var(--k-border); }
.k-faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--k-ink);
}
.k-faq summary::-webkit-details-marker { display: none; }
.k-faq summary::after {
  content: "+";
  flex: none;
  color: var(--k-blue-text);
  font-size: 1.5rem;
  line-height: 1;
  transition: transform var(--k-dur-slow) var(--k-ease);
}
/* Zonder JS: plus roteert naar een kruis bij openen */
.k-faq details[open] summary::after { transform: rotate(45deg); }
/* Met JS (hoogte-animatie): de is-open klasse stuurt het icoon,
   zodat het al draait terwijl het paneel nog dichtklapt */
.k-faq--js details[open] summary::after { transform: none; }
.k-faq--js details.is-open summary::after { transform: rotate(45deg); }
.k-faq details > p { margin: 0 0 18px; color: var(--k-text-2); max-width: 680px; }

/* Praktijkcase: antwoord met een afbeelding ernaast. */
.k-faq__case { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 32px); align-items: flex-start; margin: 0 0 18px; }
.k-faq__text { flex: 1 1 320px; min-width: 0; }
.k-faq__text > :last-child { margin-bottom: 0; }
.k-faq__text p { margin: 0 0 14px; color: var(--k-text-2); }
.k-faq__text ul { margin: 0 0 14px; }
.k-faq__media { flex: 0 1 300px; }
.k-faq__media img { width: 100%; height: auto; display: block; border: 1px solid var(--k-border); border-radius: var(--k-radius); }

/* ---- Video met poster en play-knop ---- */
.k-video {
  position: relative;
  display: block;
  border-radius: var(--k-radius);
  overflow: hidden;
}
.k-video img { width: 100%; height: clamp(15rem, 28vw, 20.625rem); object-fit: cover; }
.k-video::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 30, 40, 0.28);
}
.k-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(74, 174, 48, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 14px 30px rgba(13, 43, 56, 0.3);
  transition: transform var(--k-dur) var(--k-ease);
}
.k-video:hover .k-video__play { transform: scale(1.06); }

/* ---- Samenvatting-callout ("In het kort") ---- */
.k-summary {
  background: var(--k-surface-alt);
  border-left: 3px solid var(--k-green);
  border-radius: var(--k-radius);
  padding: 20px 24px;
}

/* ---- Vergelijkingstabel ---- */
.k-table-wrap { overflow-x: auto; }
.k-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.k-table th {
  background: var(--k-ink);
  color: #fff;
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.84375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 14px;
}
.k-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--k-border);
  vertical-align: top;
  color: var(--k-text-2);
}
.k-table td:first-child { font-weight: 600; color: var(--k-ink); }
.k-table tbody tr:nth-child(even) { background: var(--k-surface-soft); }

/* ---- Lijst met schuine ruitjes (//-bullets) ---- */
.k-list-diamond {
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.k-list-diamond li { position: relative; padding-left: 20px; }
.k-list-diamond li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  background: var(--k-green);
  transform: skewX(var(--k-skew));
}

/* ---- Zoekresultaat-rij (typekleur via modifier) ---- */
.k-result {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 18px;
  background: var(--k-surface);
  border: 1px solid var(--k-border-2);
  border-left: 3px solid var(--k-type-color, var(--k-blue));
  border-radius: var(--k-radius);
  padding: 16px 18px;
}
.k-result__body { flex: 1 1 320px; min-width: 0; }
.k-result__type {
  display: inline-block;
  background: var(--k-type-color, var(--k-blue-text));
  color: #fff;
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.71875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--k-radius);
  margin-bottom: 6px;
}
.k-result__title { font-size: 1.1875rem; margin: 0 0 4px; }
.k-result__crumb {
  display: block;
  margin-top: 6px;
  font-size: 0.78125rem;
  color: #8593a0;
}
.k-type-oplossing   { --k-type-color: var(--k-blue-text); }
.k-type-kennisbank  { --k-type-color: var(--k-green-text); }
.k-type-download    { --k-type-color: #45464a; }
.k-type-referentie  { --k-type-color: #0a5a78; }
.k-type-actueel     { --k-type-color: #2a6f19; }

/* ---- Contenttype-tabs met tellers ---- */
.k-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #e6ecf0;
  overflow-x: auto;
  scrollbar-width: none;
}
.k-tabs::-webkit-scrollbar { display: none; }
.k-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--k-text-2);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 14px 16px;
  white-space: nowrap;
  cursor: pointer;
}
.k-tab.is-active { color: var(--k-blue-text); border-bottom-color: var(--k-blue); }
.k-tab__count {
  background: var(--k-border-soft);
  color: #8593a0;
  border-radius: 999px;
  font-size: 0.71875rem;
  padding: 2px 8px;
}
.k-tab.is-active .k-tab__count { background: var(--k-blue-text); color: #fff; }

/* ---- Fotogalerij met bijschriften ---- */
.k-gallery {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
/* Eén foto rekte over de volle breedte uit, want auto-fit blaast de enige
   kolom op. Dan is het geen galerijfoto meer maar een banner. Met auto-fill
   blijven de lege kolommen staan en houdt de foto de breedte van een gewone
   kaart. Bij twee of meer foto's verandert er niets. */
.k-gallery:has(> figure:only-child) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.k-gallery figure { margin: 0; }
.k-gallery img {
  width: 100%;
  height: clamp(11.875rem, 22vw, 15rem);
  object-fit: cover;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
}
.k-gallery figcaption { padding-top: 8px; font-size: 0.84375rem; color: var(--k-text-muted); }

/* ---- Fotogalerij als slider (bij meer dan vier foto's) ---- */
.k-gallery--slider { position: relative; display: block; }
.k-gallery--slider .k-gallery__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.k-gallery--slider .k-gallery__track::-webkit-scrollbar { display: none; }
.k-gallery--slider figure {
  flex: 0 0 calc((100% - 3 * 16px) / 4);
  scroll-snap-align: start;
}
.k-gallery--slider .k-gallery__nav {
  position: absolute;
  top: clamp(5.9375rem, 11vw, 7.5rem);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--k-blue);
  color: #fff;
  border: none;
  border-radius: var(--k-radius);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(10, 35, 48, 0.25);
  transition: background var(--k-dur) var(--k-ease), opacity var(--k-dur) var(--k-ease);
  z-index: 2;
}
.k-gallery--slider .k-gallery__nav:hover { background: var(--k-ink); }
.k-gallery--slider .k-gallery__nav:disabled { opacity: 0; pointer-events: none; }
.k-gallery--slider .k-gallery__nav--prev { left: -8px; }
.k-gallery--slider .k-gallery__nav--next { right: -8px; }
.k-gallery--slider .k-gallery__nav::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.k-gallery--slider .k-gallery__nav--prev::before { transform: rotate(-135deg); margin-left: 3px; }
.k-gallery--slider .k-gallery__nav--next::before { transform: rotate(45deg); margin-right: 3px; }
@media (max-width: 860px) {
  .k-gallery--slider figure { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 560px) {
  .k-gallery--slider figure { flex-basis: 78%; }
}

/* ---- Uitgelicht-kaart (2 kolommen, foto + tekst) ---- */
.k-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--k-surface);
  border: 1px solid var(--k-border-2);
  border-radius: var(--k-radius);
  overflow: hidden;
}
.k-featured__media { position: relative; min-height: 320px; }
.k-featured__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k-featured__body {
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.375rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
}
@media (max-width: 860px) {
  .k-featured { grid-template-columns: 1fr; }
  .k-featured__media { min-height: 220px; }
}

/* ---- Upload-dropzone ---- */
.k-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 1.5px dashed #b9c8d0;
  background: var(--k-surface-soft);
  border-radius: var(--k-radius);
  padding: 24px;
  text-align: center;
  color: var(--k-text-2);
  cursor: pointer;
  transition: border-color var(--k-dur) var(--k-ease);
}
.k-dropzone:hover, .k-dropzone.is-dragover { border-color: var(--k-blue); }

/* ---- Vorige/volgende-navigatie ---- */
.k-prevnext {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.k-prevnext a {
  display: block;
  border: 1px solid var(--k-border-2);
  border-radius: var(--k-radius);
  padding: 16px 18px;
  transition: border-color var(--k-dur) var(--k-ease), box-shadow var(--k-dur) var(--k-ease);
}
.k-prevnext a:hover { border-color: var(--k-blue); box-shadow: var(--k-shadow-card); }
.k-prevnext__label {
  display: block;
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.78125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-text-muted);
  margin-bottom: 4px;
}
.k-prevnext__title { font-family: var(--k-font-head); font-weight: 600; color: var(--k-ink); }

/* ---- Lege staat (geen resultaten) ---- */
.k-empty {
  text-align: center;
  background: var(--k-surface-soft);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  padding: 40px 24px;
}
.k-empty__icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--k-border-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--k-text-muted);
  margin-bottom: 12px;
}

/* ---- Donkere spec-kaart (aside "Project in het kort") ---- */
.k-spec--dark {
  background: var(--k-ink);
  border-top: none;
  border-radius: var(--k-radius);
  padding: 24px;
}
.k-spec--dark .k-spec__row { border-color: rgba(255, 255, 255, 0.12); }
.k-spec--dark .k-spec__label { color: #8ea6b1; }
.k-spec--dark .k-spec__value { color: #eef3f5; }

/* ---- Links in lopende tekst ----
   Het framework zet links standaard neutraal (a { color: inherit }), zodat
   kaarten en knoppen hun eigen kleur houden. In bodytekst moet een link juist
   wél te zien zijn; knoppen en pijl-links houden hun eigen stijl. */
.wp-block-post-content :is(p, li):not(.k-arrow-link) > a:not(.k-btn):not(.wp-element-button) {
  color: var(--k-blue-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.wp-block-post-content :is(p, li):not(.k-arrow-link) > a:not(.k-btn):not(.wp-element-button):hover {
  color: var(--k-navy);
}

/* ---- Fotolightbox (projectfoto's groot bekijken) ---- */
.k-gallery__zoom { cursor: zoom-in; }
/* Vergrootglas bij hover, zodat te zien is dat een foto open kan. Op
   aanraakschermen staat hij zwak aan, want daar bestaat hover niet. */
.k-gallery figure { position: relative; }
.k-gallery figure::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: var(--k-radius);
  background: rgba(11, 15, 19, .72) center / 18px 18px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--k-dur) var(--k-ease), transform var(--k-dur) var(--k-ease);
  pointer-events: none;
}
.k-gallery figure:hover::after,
.k-gallery figure:focus-within::after { opacity: 1; transform: none; }
@media (hover: none) {
  .k-gallery figure::after { opacity: .8; transform: none; }
}
.k-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: clamp(1rem, 0.5rem + 3vw, 3rem);
  background: rgba(8, 20, 27, .92);
}
.k-lightbox.is-open { display: flex; }
.k-lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: min(100%, 1200px);
}
.k-lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  border-radius: var(--k-radius);
  background: #0b0f13;
}
.k-lightbox__caption {
  color: var(--k-on-dark);
  font-size: 0.9375rem;
  text-align: center;
  max-width: 60ch;
}
.k-lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  right: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--k-radius);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.k-lightbox__close:hover { background: rgba(255, 255, 255, .2); }
.k-lightbox__nav {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--k-radius);
  background: rgba(255, 255, 255, .12);
  cursor: pointer;
  position: relative;
}
.k-lightbox__nav:hover { background: rgba(255, 255, 255, .2); }
.k-lightbox__nav::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 11px;
  height: 11px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.k-lightbox__nav--prev::before { transform: rotate(-135deg) translate(-2px, -2px); }
.k-lightbox__nav--next::before { transform: rotate(45deg) translate(-2px, -2px); }
.k-lightbox__teller {
  position: absolute;
  bottom: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  left: 50%;
  transform: translateX(-50%);
  color: var(--k-on-dark-2);
  font-family: var(--k-font-head);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}
@media (max-width: 640px) {
  .k-lightbox__nav { position: absolute; bottom: clamp(0.75rem, 0.5rem + 1vw, 1.5rem); }
  .k-lightbox__nav--prev { left: 1rem; }
  .k-lightbox__nav--next { right: 1rem; }
}

/* ---- Verwante oplossingen (zijbalk referentie/kennisartikel) ---- */
.k-verwant { margin-top: 20px; }
.k-verwant__label {
  display: block;
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.78125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-text-muted);
  margin-bottom: 8px;
}
.k-verwant__lijst { list-style: none; margin: 0; padding: 0; }
.k-verwant__lijst li { border-bottom: 1px solid var(--k-border); }
.k-verwant__lijst li:last-child { border-bottom: none; }
.k-verwant__lijst a {
  display: block;
  padding: 10px 0;
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--k-ink);
  text-decoration: none;
}
.k-verwant__lijst a::after { content: " \2192"; color: var(--k-blue-text); }
.k-verwant__lijst a:hover { color: var(--k-blue-text); }
.k-verwant--dark .k-verwant__label { color: #8ea6b1; }
.k-verwant--dark .k-verwant__lijst li { border-color: rgba(255, 255, 255, 0.12); }
.k-verwant--dark .k-verwant__lijst a { color: #eef3f5; }
.k-verwant--dark .k-verwant__lijst a:hover { color: #fff; }

/* ---- Sticky zijbalk en inhoudsopgave ---- */
.k-aside-sticky { position: sticky; top: 150px; }
.k-toc { display: flex; flex-direction: column; }
.k-toc a {
  display: block;
  padding: 8px 12px;
  border-left: 2px solid transparent;
  font-size: 0.9375rem;
  color: var(--k-text-2);
}
.k-toc a:hover { color: var(--k-blue-text); }
.k-toc a.is-active {
  border-left-color: var(--k-blue);
  background: var(--k-blue-tint);
  color: var(--k-blue-text);
  font-weight: 600;
}

/* ---- Kaart-meta (datum boven kaarttitel) ---- */
.k-card__meta { display: block; font-size: 0.84375rem; color: #8593a0; }

/* ---- Shopify-producten -------------------------------------------------
   De componenten van de Shopify-plugin zijn overschreven in
   koster-theme/shopify/, zodat een product dezelfde kaart krijgt als
   koster/productkaarten. Alleen de aanvullingen staan hier: de prijs, de
   uitverkocht-staat en het gedrag van de webcomponents zelf.

   De webcomponents (<shopify-media>, <shopify-data>, <shopify-money>) zijn
   inline elementen tot de browser ze invult. Ze krijgen daarom een expliciete
   display, anders springt de kaart bij het laden. */
.k-shop-card shopify-media,
.k-shop-card shopify-data,
.k-shop-card shopify-money { display: block; }

/* De foto's in de catalogus lopen van vierkant tot 2,1:1 breed, dus ze worden
   ingepast en niet bijgesneden. Dat kan alleen met !important, en wel hierom:
   <shopify-media> is display:contents en zet per afbeelding een eigen <style>
   in de pagina waarin álles !important is, inclusief een background-image van
   dezelfde foto op cover. Die achtergrond is bedoeld om de bijgesneden foto
   naadloos te laten ogen, maar zodra wij de voorgrond inpassen komt hij eromheen
   tevoorschijn als een vage spookfoto. Vandaar dat hij hier uit moet. */
.k-shop-card__media img,
.k-shop-modal__media img {
  background-image: none !important;
  object-fit: contain !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
}

.k-shop-card__media { background: var(--k-surface-alt); }
.k-shop-card__media-link {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.k-shop-card__media img { padding: 1rem; }

.k-shop-card__title a { color: inherit; text-decoration: none; }
.k-shop-card__title a:hover { color: var(--k-blue-text); }

/* Prijs: kopletter, want het is een waarde en geen lopende tekst. */
.k-shop-card__prijs {
  margin: 0;
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--k-ink);
}

/* Niet leverbaar. De plugin zet `disabled` op de kaart zodra
   product.availableForSale onwaar is; de melding hangt daaraan, want de
   webcomponents kennen geen voorwaarde in de markup. */
.k-shop-card__uitverkocht { display: none; }
.k-shop-card[disabled] .k-shop-card__uitverkocht { display: inline-flex; }
.k-shop-card[disabled] .k-shop-card__media { opacity: 0.55; }
.k-shop-card[disabled] .k-btn { pointer-events: none; opacity: 0.45; }

/* Het tegelraster vult met auto-fit de rij op, en dan wordt één product een
   band over de volle breedte. Hier dus auto-fill: de lege kolommen blijven
   staan, zodat één of twee kaarten even breed zijn als in een volle rij. */
.k-shop-grid {
  margin-block: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}

/* Weergave van het productenblok in de editor. De echte kaarten worden door de
   webcomponents van Shopify gevuld en die draaien alleen op de voorkant, dus
   toont het blok daar een lijst met de gekozen producten. */
.k-shop-preview {
  border: 1px dashed var(--k-border-form);
  border-radius: var(--k-radius);
  padding: clamp(1rem, 0.9rem + 0.6vw, 1.5rem);
  background: var(--k-surface);
}
.k-shop-preview__kop { margin: 0 0 0.75rem; font-family: var(--k-font-head); }
.k-shop-preview__voet { margin: 0.75rem 0 0; font-size: var(--k-fs-sm); color: var(--k-text-muted); }

/* Variantkiezer. Dit is een webcomponent met shadow DOM, dus stylen kan
   alleen via de onderdelen die Shopify zelf benoemt. Scherpe hoeken en de
   merkkleuren; de plugin geeft ze standaard 4px radius en een bruine tint. */
shopify-variant-selector::part(form) {
  border-top: 1px solid var(--k-border);
  border-bottom: 1px solid var(--k-border);
  padding: 1rem 0 1.25rem;
}
shopify-variant-selector::part(radio) {
  border: 1px solid var(--k-border-form);
  border-radius: var(--k-radius);
  color: var(--k-text-2);
  font-family: var(--k-font-head);
  font-weight: 600;
  padding: 0.5rem 1rem;
}
shopify-variant-selector::part(radio):hover {
  border-color: var(--k-blue);
  color: var(--k-blue-text);
  background: none;
}
shopify-variant-selector::part(radio-selected),
shopify-variant-selector::part(radio-selected):hover {
  background: var(--k-ink);
  border-color: var(--k-ink);
  color: #fff;
}
shopify-variant-selector::part(color-swatch),
shopify-variant-selector::part(color-swatch-selected) { border-radius: var(--k-radius); }

/* ---- Snelkoop-modal ---- */
.k-shop-modal {
  border: 0;
  border-radius: var(--k-radius);
  padding: 0;
  max-width: min(60rem, 92vw);
  width: 100%;
}
.k-shop-modal::backdrop { background: rgba(10, 35, 48, 0.6); }
.k-shop-modal__venster {
  position: relative;
  background: var(--k-surface);
  max-height: 90vh;
  overflow: hidden;
}
.k-shop-modal__sluit {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  border: 0;
  background: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--k-text-2);
  cursor: pointer;
  padding: 8px;
}
.k-shop-modal__sluit:hover { color: var(--k-ink); }
/* Gestapeld op een smal scherm scrollt de hele inhoud: foto en tekst staan dan
   onder elkaar en passen samen nooit in het venster. Zonder deze overflow loopt
   de inhoud dood tegen de max-height van het venster en scrollt de pagina
   eronder mee. */
.k-shop-modal__layout {
  display: grid;
  gap: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Een kolom die meegroeit met de omschrijving zou de ene foto tot een postzegel
   maken en de andere zwaar bijsnijden, dus de media krijgt een vaste verhouding
   en gaat bovenaan staan. */
.k-shop-modal__media {
  background: var(--k-surface-alt);
  overflow: hidden;
  align-self: start;
  aspect-ratio: 4 / 3;
  max-height: 60vh;
}
.k-shop-modal__media img { display: block; padding: 1.25rem; }
.k-shop-modal__details {
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
/* Naast elkaar scrollt alleen de tekstkolom, zodat de foto en de sluitknop
   blijven staan. De max-height moet op de kolom zelf: een rij in een raster
   groeit met zijn inhoud mee, dus een max-height op het venster eromheen zou de
   knoppen alleen maar afknippen. Productomschrijvingen uit Shopify zijn soms
   lang en bevatten video's; dan mag de modal niet meegroeien met de pagina. */
@media (min-width: 48rem) {
  .k-shop-modal__layout {
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
  }
  .k-shop-modal__details {
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
.k-shop-modal__titel { margin: 0; font-size: var(--k-fs-h2); }
.k-shop-modal__omschrijving { color: var(--k-text-2); font-size: var(--k-fs-sm); min-width: 0; }
.k-shop-modal__omschrijving > :last-child { margin-bottom: 0; }
/* De omschrijving is HTML uit Shopify: daar zitten embeds, afbeeldingen en
   lange links in die anders buiten de kolom vallen. */
.k-shop-modal__omschrijving :is(img, iframe, video, embed, object) {
  max-width: 100%;
  height: auto;
}
.k-shop-modal__omschrijving iframe { aspect-ratio: 16 / 9; }
/* De betaallogo's komen in twee vormen uit Shopify: bij de meeste producten
   staat elk logo in een eigen alinea, bij Kelderafdichting Binnenzijde staan ze
   samen in één div. Sitebreed geldt img { display: block } en dat zet die
   tweede vorm alsnog onder elkaar. Inline-block houdt logo's op één regel waar
   de opmaak dat ook doet; een enkele grote afbeelding vult nog steeds de
   kolom, want max-width blijft 100%. */
.k-shop-modal__omschrijving img { display: inline-block; vertical-align: middle; }
/* De eerste vorm: een alinea met een afbeelding erin wordt een inline rij,
   zodat opeenvolgende logo's naast elkaar uitlijnen. Staan ze wel in dezelfde
   alinea, dan zou een <br> ertussen ze alsnog uit elkaar duwen. */
.k-shop-modal__omschrijving p:has(img) {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  vertical-align: middle;
  margin-block: 0.5rem;
  margin-right: 0.75rem;
}
.k-shop-modal__omschrijving p:has(img) br { display: none; }
.k-shop-modal__omschrijving :is(table, pre) { max-width: 100%; overflow-x: auto; display: block; }
.k-shop-modal__omschrijving a { overflow-wrap: anywhere; }
.k-shop-modal__acties { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 0.5rem; }
.k-shop-modal__acties .k-arrow-link { flex-basis: 100%; }

/* Prijs en doorgestreepte vanprijs, in de kaart en in de snelkoop. */
.k-shop-modal__prijs {
  margin: 0;
  font-family: var(--k-font-head);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--k-ink);
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}
.k-shop-modal__vanprijs {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--k-text-muted);
  text-decoration: line-through;
}
/* Zonder vanprijs blijft het element leeg; dan hoort er ook geen streepje. */
.k-shop-modal__vanprijs:empty { display: none; }

/* ---- Zwevende WhatsApp-knop ----
   Rechtsonder, tegenover de winkelwagenknop die rechtsboven staat.

   Bewust rond en zonder opschrift, terwijl de huisstijl verder scherpe hoeken
   aanhoudt. Dit is het beeld dat mensen van elke site kennen, en die herkenning
   weegt hier zwaarder dan de eigen vormtaal. Een uitzondering dus, geen nieuwe
   lijn: ronde vlakken blijven elders uit den boze.

   Verschijnt alleen als het nummer bij Sitegegevens is ingevuld; het theme
   drukt anders niets af. */
.k-whatsapp {
  position: fixed;
  right: 1.25rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  z-index: 65;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--k-whatsapp);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(13, 43, 56, 0.28);
  transition: background var(--k-dur) var(--k-ease), transform var(--k-dur) var(--k-ease);
}
.k-whatsapp:hover,
.k-whatsapp:focus-visible { background: var(--k-whatsapp-hover); color: #fff; transform: scale(1.06); }
.k-whatsapp__icoon { flex: none; }

@media (max-width: 980px) {
  .k-whatsapp { right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .k-whatsapp { transition: background var(--k-dur) var(--k-ease); }
  .k-whatsapp:hover,
  .k-whatsapp:focus-visible { transform: none; }
}

/* ---- Zwevende winkelwagenknop ----
   Verschijnt rechtsboven zodra er iets in de winkelwagen zit. Zit onder de
   sticky header (z-index 60) vandaan met een eigen laag erboven, want hij mag
   niet achter de header verdwijnen bij het scrollen. */
.k-cart-knop {
  position: fixed;
  /* De hoogte volgt de header. Die is sticky en staat bovenaan de pagina lager
     dan in gescrolde staat (utility-balk, en voor ingelogde beheerders ook de
     admin-balk). Een vaste waarde legt de knop dus bovenaan over de adviesknop
     heen. main.js zet deze variabele op de echte onderkant van de header. */
  top: var(--k-cart-top, 6.5rem);
  right: 1.25rem;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.75rem 1.125rem;
  border: 0;
  border-radius: var(--k-radius);
  background: var(--k-green-cta);
  color: #fff;
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 0.96875rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--k-shadow-hover);
  transform: translateY(-8px);
  opacity: 0;
  transition: opacity var(--k-dur) var(--k-ease), transform var(--k-dur) var(--k-ease), background var(--k-dur) var(--k-ease);
}
.k-cart-knop.is-zichtbaar { opacity: 1; transform: none; }
.k-cart-knop:hover { background: var(--k-green-cta-hover); }

.k-cart-knop__icoon { flex: none; }
.k-cart-knop__aantal {
  min-width: 1.375rem;
  padding: 0 0.25rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.25);
  border-radius: var(--k-radius);
  font-size: 0.875rem;
}

@media (max-width: 980px) {
  /* Onder de nav-breakpoint is de header lager en staat er onderin een sticky
     CTA-balk; de knop schuift mee omhoog zodat hij die niet raakt. */
  .k-cart-knop { top: 4.5rem; right: 0.75rem; }
  .k-cart-knop__label { display: none; }
}

/* ---- De winkelwagen zelf ----
   <shopify-cart> is een webcomponent met een gesloten vormtaal: stylen kan
   alleen via de onderdelen die Shopify benoemt. Beschikbaar zijn dialog,
   primary-button, secondary-button, line-image, line-heading, line-price en
   line-options. Meer haken zijn er niet, dus dit brengt de winkelwagen zo dicht
   mogelijk bij de huisstijl zonder in de shadow DOM te grijpen. */
shopify-cart::part(dialog) {
  border: 0;
  border-radius: var(--k-radius);
  font-family: var(--k-font-body);
  color: var(--k-ink);
}
shopify-cart::part(primary-button) {
  background: var(--k-green-cta);
  color: #fff;
  border: 0;
  border-radius: var(--k-radius);
  font-family: var(--k-font-head);
  font-weight: 600;
}
shopify-cart::part(primary-button):hover { background: var(--k-green-cta-hover); }
shopify-cart::part(secondary-button) {
  background: none;
  color: var(--k-ink);
  border: 1px solid var(--k-border-form);
  border-radius: var(--k-radius);
  font-family: var(--k-font-head);
  font-weight: 600;
}
shopify-cart::part(secondary-button):hover { border-color: var(--k-blue); color: var(--k-blue-text); }
shopify-cart::part(line-heading) {
  font-family: var(--k-font-head);
  font-weight: 600;
  color: var(--k-ink);
}
shopify-cart::part(line-price) { font-family: var(--k-font-head); font-weight: 600; color: var(--k-ink); }
shopify-cart::part(line-options) { color: var(--k-text-2); }
shopify-cart::part(line-image) { border: 1px solid var(--k-border); border-radius: var(--k-radius); }