/*
Theme Name: Verfspullen
Theme URI: https://www.verfspullen.nl/
Description: Child theme van Twenty Twenty-Five voor Verfspullen.nl, onafhankelijke kennisbank over verf, schilderen en verfspullen. Ontwerp N.
Author: Verfspullen.nl
Template: twentytwentyfive
Version: 3.0.1
Requires at least: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: verfspullen
*/

/* =========================================================================
   Tokens (bron: theme.json). Korte namen voor leesbaarheid.
   ====================================================================== */
:root {
	--vs-inkt: var(--wp--preset--color--inkt, #0B1B33);
	--vs-tekst: var(--wp--preset--color--tekst, #3B4757);
	--vs-basis: var(--wp--preset--color--tekst-basis, #4A5565);
	--vs-grijs: var(--wp--preset--color--grijs, #5F6B7A);
	--vs-oranje: var(--wp--preset--color--oranje, #F7741B);
	--vs-oranje-diep: var(--wp--preset--color--oranje-diep, #B23F0A);
	--vs-oranje-licht: var(--wp--preset--color--oranje-licht, #FFF5EE);
	--vs-marine: var(--wp--preset--color--marine, #0B2236);
	--vs-link: var(--wp--preset--color--link, #1F4E8C);
	--vs-groen: var(--wp--preset--color--groen, #2E7F50);
	--vs-groen-licht: var(--wp--preset--color--groen-licht, #E7F3EB);
	--vs-zand: var(--wp--preset--color--zand, #F7F7F5);
	--vs-mist: var(--wp--preset--color--mist, #F3F5F8);
	--vs-topbalk: var(--wp--custom--kleur--topbalk, #061B2D);
	--vs-footer: var(--wp--custom--kleur--footer, #04172A);
	--vs-footer-tekst: var(--wp--custom--kleur--footer-tekst, #C3CDD9);
	--vs-footer-lijn: var(--wp--custom--kleur--footer-lijn, #1B2D44);
	--vs-band-tekst: var(--wp--custom--kleur--band-tekst, #C9D3DF);
	--vs-top-tekst: var(--wp--custom--kleur--top-tekst, #E6EBF1);
	--vs-nav: var(--wp--custom--kleur--nav, #1B2B44);
	--vs-lead: var(--wp--custom--kleur--lead, #26313F);
	--vs-intro: var(--wp--custom--kleur--intro, #3E4A5A);
	--vs-label: var(--wp--custom--kleur--label, #4E5A6C);
	--vs-link-hover: var(--wp--custom--kleur--link-hover, #163B6B);
	--vs-logo-accent: var(--wp--custom--kleur--logo-accent, #F26A0D);
	--vs-oranje-hover: var(--wp--custom--kleur--oranje-hover, #FF8838);
	--vs-oranje-rand: var(--wp--custom--kleur--oranje-rand, #F6C9A8);
	--vs-oranje-chip: var(--wp--custom--kleur--oranje-chip, #FFF1E7);
	--vs-perzik: var(--wp--custom--kleur--perzik, #FBD1B3);
	--vs-perzik-mid: var(--wp--custom--kleur--perzik-mid, #F9A266);
	--vs-streep-1: var(--wp--custom--kleur--streep-1, #FDE3D1);
	--vs-streep-2: var(--wp--custom--kleur--streep-2, #F5B48A);
	--vs-zand-warm: var(--wp--custom--kleur--zand-warm, #F6F5F2);
	--vs-mist-toc: var(--wp--custom--kleur--mist-toc, #F1F4F8);
	--vs-mist-licht: var(--wp--custom--kleur--mist-licht, #F8F9FB);
	--vs-mist-voet: var(--wp--custom--kleur--mist-voet, #FBFBFC);
	--vs-tabelkop: var(--wp--custom--kleur--tabelkop, #EEF2F7);
	--vs-kaartvlak: var(--wp--custom--kleur--kaartvlak, #F7F8FA);
	--vs-vlak: var(--wp--custom--kleur--vlak, #F2F3F5);
	--vs-balk: var(--wp--custom--kleur--balk, #F1F2F4);
	--vs-rand: var(--wp--custom--kleur--rand, #ECEDF0);
	--vs-rand-2: var(--wp--custom--kleur--rand-2, #E6E8EC);
	--vs-lijn: var(--wp--custom--kleur--lijn, #EEF0F3);
	--vs-rand-veld: var(--wp--custom--kleur--rand-veld, #D5D9E0);
	--vs-rand-sep: var(--wp--custom--kleur--rand-sep, #DDE1E6);
	--vs-chip: var(--wp--custom--kleur--chip, #E8EEF6);
	--vs-chip-tekst: var(--wp--custom--kleur--chip-tekst, #24507F);
	--vs-groen-banner: var(--wp--custom--kleur--groen-banner, #1E3A2F);
	--vs-groen-banner-tekst: var(--wp--custom--kleur--groen-banner-tekst, #DCE7E0);
	--vs-steen: var(--wp--custom--kleur--steen, #6B7785);
	--vs-beige: var(--wp--custom--kleur--beige, #E8C9A8);
	--vs-schaduw-kaart: var(--wp--preset--shadow--kaart, 0 1px 2px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.05));
	--vs-schaduw-hover: var(--wp--preset--shadow--kaart-hover, 0 2px 4px rgba(16,24,40,.06), 0 14px 30px rgba(16,24,40,.10));
	--vs-schaduw-paneel: var(--wp--preset--shadow--paneel, 0 6px 18px rgba(16,24,40,.05));
	--vs-site: var(--wp--custom--maat--site, 1320px);
	--vs-goot: var(--wp--custom--maat--goot, 24px);
	--vs-focus: #D85F0C;
	--vs-font: var(--wp--preset--font-family--jakarta, "Plus Jakarta Sans", system-ui, sans-serif);
}

/* =========================================================================
   Basis
   ====================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--vs-basis); font-family: var(--vs-font); font-size: 16px; font-weight: 400; line-height: 1.55; }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > *, .vs-kopblok > *, .vs-main > *, .vs-art > *, .vs-artikel > *, .vs-zij > *, .vs-kop > *, .vs-kop-in > *, .vs-kopdeel > *, .vs-voetdeel > *, .vs-merk-tekst > *, .vs-hubkop-tekst > * { margin-block: 0; }
img { max-width: 100%; height: auto; }
a { color: var(--vs-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--vs-link-hover); }
:focus-visible { outline: 3px solid var(--vs-focus); outline-offset: 2px; border-radius: 6px; }
.vs-wrap { width: 100%; max-width: var(--vs-site); margin-inline: auto; padding-inline: var(--vs-goot); }
.vs-ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.vs-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.vs-leeg { color: var(--vs-grijs); }
.vs-beeld-leeg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: inherit; background: var(--vs-vlak); color: #8A94A3; }

/* Koppen en labels */
.vs-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 12.5px; font-weight: 700; line-height: 1.4; letter-spacing: .09em; text-transform: uppercase; color: var(--vs-label); }
.vs-eyebrow::before { content: ""; flex: 0 0 30px; width: 30px; height: 2px; background: var(--vs-oranje); border-radius: 2px; }
.vs-dash { display: block; width: 34px; height: 3px; margin-bottom: 18px; background: var(--vs-oranje); border-radius: 2px; }
.vs-h2 { margin: 0; font-size: clamp(28px, 2.7vw, 38px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--vs-inkt); text-wrap: balance; }
.vs-hub .vs-h2, .vs-pagina .vs-h2 { font-size: clamp(26px, 2.5vw, 34px); }
.vs-h3 { margin: 0 0 16px; font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; color: var(--vs-inkt); }
.vs-sectiekop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; }
.vs-sectiekop .vs-dash { margin-bottom: 16px; }
.vs-sectie-meta { margin: 0; font-size: 14.5px; color: var(--vs-grijs); }
.vs-sectie-p { margin: 18px 0 0; max-width: 30em; font-size: 17px; line-height: 1.65; }
.vs-meer { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: 15px; color: var(--vs-link); text-decoration: none; white-space: nowrap; }
.vs-meer:hover { color: var(--vs-link); text-decoration: underline; }

/* Knop: oranje met donkerblauwe tekst (contrast 6:1) */
.vs-knop, .wp-element-button, .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 24px; border: 0; border-radius: 8px; background: var(--vs-oranje); color: var(--vs-inkt); font-family: inherit; font-weight: 700; font-size: 15.5px; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; }
.vs-knop:hover, .vs-knop:focus-visible, .wp-element-button:hover, .wp-block-button__link:hover { background: var(--vs-oranje-hover); color: var(--vs-inkt); }

/* Kaarten */
.vs-kaart { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--vs-rand); border-radius: 12px; overflow: hidden; box-shadow: var(--vs-schaduw-kaart); color: inherit; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
.vs-kaart:hover { color: inherit; box-shadow: var(--vs-schaduw-hover); transform: translateY(-2px); }
.vs-kaart img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vs-chip { align-self: flex-start; padding: 4px 9px; border-radius: 6px; background: var(--vs-chip); color: var(--vs-chip-tekst); font-size: 11.5px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; }
.vs-kaart-beeld, .vs-tegel-beeld { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--vs-vlak); }
.vs-kaart-beeld img, .vs-tegel-beeld img { position: absolute; inset: 0; }
.vs-kaart-tekst { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 20px 20px; }
.vs-kaart-titel { font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--vs-inkt); }
.vs-grid3 .vs-kaart-titel { font-size: 19px; }
.vs-kaart-p { flex: 1; font-size: 14.5px; line-height: 1.55; color: var(--vs-basis); }
.vs-kaart-meta { font-size: 13px; color: var(--vs-grijs); }
.vs-ga { display: inline-flex; align-items: center; gap: 8px; color: var(--vs-link); font-weight: 700; font-size: 14.5px; }
.vs-kaart:hover .vs-ga { text-decoration: underline; }
.vs-grid4, .vs-grid3, .vs-grid6, .vs-rijen4, .vs-tegels-grid, .vs-merkgrid { list-style: none; margin: 0; padding: 0; display: grid; }
.vs-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.vs-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.vs-grid6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.vs-rijen4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

/* Rijkaart: foto links, titel rechts */
.vs-rij { display: flex; height: 100%; background: #fff; border: 1px solid var(--vs-rand); border-radius: 12px; overflow: hidden; box-shadow: var(--vs-schaduw-kaart); color: inherit; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.vs-rij:hover { color: inherit; box-shadow: var(--vs-schaduw-hover); transform: translateY(-2px); }
.vs-rij-beeld { position: relative; flex: 0 0 110px; min-height: 92px; background: var(--vs-vlak); }
.vs-rij-beeld img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.vs-rij-tekst { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 12px 16px; }
.vs-rij-tekst strong { font-size: 15px; line-height: 1.3; color: var(--vs-inkt); }
.vs-rij-onder { font-size: 13px; line-height: 1.45; color: var(--vs-grijs); }
.vs-rij-boven { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vs-label); }
.vs-rij:hover strong { text-decoration: underline; }

/* Lijst met rijen (hub, zoeken, merk) */
.vs-alist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vs-alist--twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.vs-alist .vs-rij { align-items: center; gap: 16px; padding: 10px; box-shadow: none; }
.vs-alist .vs-rij:hover { border-color: #D5DAE1; box-shadow: 0 8px 20px rgba(16,24,40,.07); transform: none; }
.vs-alist .vs-rij-beeld { flex: 0 0 96px; height: 68px; min-height: 0; border-radius: 8px; overflow: hidden; }
.vs-alist .vs-rij-tekst { gap: 3px; padding: 0; }
.vs-alist .vs-rij-tekst strong { font-size: 16px; }
.vs-alist .vs-rij-onder { font-size: 13.5px; }

/* Merken */
.vs-merkgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vs-merk { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 100%; min-height: 58px; padding: 0 18px; background: #fff; border: 1px solid var(--vs-rand-2); border-radius: 10px; color: var(--vs-inkt); font-weight: 700; font-size: 16px; text-decoration: none; transition: border-color .2s ease; }
.vs-merk:hover { border-color: var(--vs-oranje); color: var(--vs-inkt); }
.vs-merk--groot { padding: 14px 18px; }
.vs-merk--groot > span { display: flex; flex-direction: column; gap: 2px; }
.vs-merk--groot > span span { font-size: 13.5px; font-weight: 500; color: var(--vs-grijs); }

/* =========================================================================
   Topbalk en kop
   ====================================================================== */
.vs-top { background: var(--vs-topbalk); color: var(--vs-top-tekst); font-size: 13px; }
.vs-top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.vs-beloftes { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.vs-beloftes li { display: flex; align-items: center; gap: 8px; }
.vs-beloftes .vs-ic { color: var(--vs-oranje); }
.vs-top a { color: var(--vs-top-tekst); text-decoration: none; }
.vs-top a:hover { color: #fff; text-decoration: underline; }
.vs-top-nav { display: flex; gap: 22px; margin-left: auto; }
.vs-zoek-top { display: flex; align-items: center; gap: 4px; width: 300px; max-width: 100%; height: 32px; margin-left: auto; padding: 0 2px 0 12px; background: #fff; border-radius: 8px; color: var(--vs-grijs); }
.vs-zoek-top input { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0; border: 0; background: transparent; color: var(--vs-inkt); font: inherit; font-size: 13.5px; }
.vs-zoek-top input::placeholder, .vs-zoek input::placeholder { color: var(--vs-grijs); opacity: 1; }
.vs-zoek-top input:focus, .vs-zoek input:focus { outline: none; }
.vs-zoek-top:focus-within { outline: 3px solid var(--vs-oranje); outline-offset: 2px; }
.vs-zoek-top button { display: flex; align-items: center; justify-content: center; width: 30px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--vs-inkt); cursor: pointer; }

.vs-kop { background: #fff; border-bottom: 1px solid var(--vs-rand); }
.vs-kop-in { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.vs-logo { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; text-decoration: none; }
.vs-logo-naam { font-weight: 800; font-size: 31px; line-height: 1; letter-spacing: -.025em; color: var(--vs-inkt); }
.vs-logo-naam span { color: var(--vs-logo-accent); }
.vs-logo-sub { font-size: 12px; font-weight: 500; color: var(--vs-grijs); }
.vs-nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.vs-nav a { display: block; padding: 32px 0 30px; color: var(--vs-nav); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.vs-nav a:hover { color: var(--vs-oranje-diep); }
.vs-nav a.is-actief { color: var(--vs-inkt); box-shadow: inset 0 -3px 0 var(--vs-oranje); }
.vs-menuknop { display: none; }

@media (max-width: 1200px) {
	.vs-kop-in { gap: 24px; }
	.vs-nav ul { gap: 22px; }
}

/* Smal: menu achter een knop (met JS); zonder JS horizontaal scrollend zoals in het canvas */
@media (max-width: 1060px) {
	.vs-kop-in { flex-wrap: wrap; gap: 0 16px; }
	.vs-logo { padding: 12px 0; }
	.vs-js .vs-menuknop { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: auto; padding: 0 14px; border: 1px solid var(--vs-rand-veld); border-radius: 8px; background: #fff; color: var(--vs-inkt); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
	.vs-menuknop .vs-ic-dicht, .vs-menu-open .vs-menuknop .vs-ic-open { display: none; }
	.vs-menu-open .vs-menuknop .vs-ic-dicht { display: block; }
	.vs-js .vs-nav { display: none; width: 100%; }
	.vs-js.vs-menu-open .vs-nav { display: block; }
	.vs-js .vs-nav ul { flex-direction: column; gap: 0; padding: 0 0 12px; }
	.vs-js .vs-nav a { display: flex; align-items: center; min-height: 48px; padding: 10px 4px; border-top: 1px solid var(--vs-lijn); }
	.vs-js .vs-nav a.is-actief { padding-left: 14px; box-shadow: inset 3px 0 0 var(--vs-oranje); }
	html:not(.vs-js) .vs-nav { width: 100%; overflow-x: auto; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
	html:not(.vs-js) .vs-nav ul { flex-wrap: nowrap; gap: 24px; }
	html:not(.vs-js) .vs-nav a { padding: 12px 0 14px; }
}
@media (max-width: 900px) {
	.vs-beloftes { display: none; }
	.vs-top-in { min-height: 60px; }
	.vs-zoek-top { width: 100%; height: 44px; }
	.vs-zoek-top input { height: 42px; font-size: 16px; }
	.vs-zoek-top button { width: 44px; height: 40px; }
	.vs-top-nav a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* =========================================================================
   Zoekveld (groot)
   ====================================================================== */
.vs-zoek { display: flex; gap: 8px; max-width: 560px; margin-top: 30px; padding: 6px; background: #fff; border: 1px solid var(--vs-rand-veld); border-radius: 12px; box-shadow: 0 6px 18px rgba(16,24,40,.06); }
.vs-zoek:focus-within { outline: 3px solid var(--vs-oranje); outline-offset: 2px; }
.vs-zoek-veld { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; padding-left: 12px; color: var(--vs-grijs); }
.vs-zoek input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0; border: 0; background: transparent; color: var(--vs-inkt); font: inherit; font-size: 16px; }
.vs-zoek .vs-knop { min-height: 48px; height: 48px; }
@media (max-width: 600px) {
	.vs-zoek { flex-wrap: wrap; }
	.vs-zoek .vs-knop { width: 100%; justify-content: center; }
}

/* =========================================================================
   Homepage
   ====================================================================== */
.vs-hero { position: relative; overflow: hidden; background: var(--vs-zand); }
.vs-hero-tekst { position: relative; z-index: 1; max-width: 610px; padding: 76px 0 84px; }
.vs-hero h1 { margin: 0; max-width: 11.5em; font-size: clamp(38px, 4.5vw, 62px); line-height: 1.05; font-weight: 800; letter-spacing: -.028em; color: var(--vs-inkt); text-wrap: balance; }
.vs-hero-intro { margin: 22px 0 0; max-width: 33em; font-size: 18px; line-height: 1.6; color: var(--vs-intro); }
.vs-vaak { margin: 16px 0 0; font-size: 14px; line-height: 1.7; color: var(--vs-grijs); }
.vs-hero-foto { position: absolute; top: 0; right: 0; bottom: 0; width: 55%; }
.vs-hero-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.vs-hero-fade { position: absolute; inset: 0; background: linear-gradient(90deg, #F7F7F5 0%, rgba(247,247,245,.88) 14%, rgba(247,247,245,0) 46%); }
.vs-notitie { position: absolute; top: 9%; right: 6%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; transform: rotate(-5deg); color: #2B3A50; }
.vs-notitie span { font-family: var(--wp--preset--font-family--notitie, Caveat, cursive); font-weight: 600; font-size: 27px; line-height: 1.05; text-align: center; }
.vs-notitie .vs-ic { stroke-width: 1.8; }

.vs-tegels { padding: 32px 0 44px; }
.vs-tegels-grid { grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 16px; }
.vs-tegel-beeld { aspect-ratio: 16 / 10; }
.vs-tegel-tekst { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 14px 14px 12px; }
.vs-tegel-titel { font-weight: 700; font-size: 16px; color: var(--vs-inkt); }
.vs-tegel-sub { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; flex: 1; font-size: 13.5px; line-height: 1.45; color: var(--vs-grijs); }
.vs-tegel-sub .vs-ic, .vs-mini-tekst .vs-ic { color: var(--vs-inkt); }

.vs-sectie { padding: 72px 0; }
.vs-sectie--warm { padding: 64px 0 72px; background: var(--vs-zand-warm); }
.vs-sectie--mist { background: var(--vs-mist); }
.vs-sectie--kort { padding: 56px 0 64px; }

.vs-werk { padding: 80px 0; }
.vs-werk-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.vs-werk .vs-knop, .vs-sectie .vs-split .vs-knop { margin-top: 28px; }
.vs-punten { display: flex; flex-direction: column; gap: 24px; list-style: none; margin: 0; padding: 0; }
.vs-punten li { display: flex; gap: 16px; align-items: flex-start; }
.vs-rond { display: flex; align-items: center; justify-content: center; flex: 0 0 48px; height: 48px; border-radius: 50%; background: var(--vs-groen-licht); color: var(--vs-groen); }
.vs-punt-t { margin: 0; font-weight: 700; font-size: 16px; color: var(--vs-inkt); }
.vs-punt-p { margin: 2px 0 0; font-size: 14.5px; color: var(--vs-grijs); }
.vs-werk-foto { overflow: hidden; aspect-ratio: 7 / 6; border-radius: 14px; box-shadow: 0 10px 30px rgba(16,24,40,.08); }
.vs-werk-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

.vs-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.vs-split .vs-meer { margin-top: 18px; }
.vs-split > .vs-dm { margin: 0; }

.vs-banner { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); background: var(--vs-groen-banner); }
.vs-banner-tekst { display: flex; flex-direction: column; justify-content: center; padding: 64px 48px 64px max(24px, calc(50vw - 636px)); }
.vs-banner-tekst > div { max-width: 440px; }
.vs-banner .vs-h2 { color: #fff; }
.vs-banner p { margin: 16px 0 0; font-size: 17px; line-height: 1.65; color: var(--vs-groen-banner-tekst); }
.vs-banner .vs-knop { margin-top: 28px; }
.vs-banner-beeld { position: relative; min-height: 400px; }
.vs-banner-beeld img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

.vs-mini { flex-direction: row; align-items: stretch; }
.vs-mini-beeld { position: relative; flex: 0 0 76px; min-height: 80px; background: var(--vs-vlak); }
.vs-mini-beeld img { position: absolute; inset: 0; }
.vs-mini-tekst { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; flex: 1; padding: 12px 12px 10px 14px; font-weight: 700; font-size: 14.5px; line-height: 1.3; color: var(--vs-inkt); }
.vs-mini-tekst .vs-ic { align-self: flex-end; }

/* =========================================================================
   Balk "Fout gezien?" en footer
   ====================================================================== */
.vs-foutbalk { position: relative; overflow: hidden; background: var(--vs-marine); color: var(--vs-band-tekst); }
.vs-foutbalk-beeld { position: absolute; top: 0; right: 0; bottom: 0; width: 34%; }
.vs-foutbalk-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vs-foutbalk-beeld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0B2236 0%, rgba(11,34,54,.6) 30%, rgba(11,34,54,0) 70%); }
.vs-foutbalk-in { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; padding-top: 44px; padding-bottom: 44px; }
.vs-foutbalk-tekst { flex: 0 1 560px; }
.vs-foutbalk h2 { margin: 0; font-size: 26px; line-height: 1.25; font-weight: 800; letter-spacing: -.015em; color: #fff; }
.vs-foutbalk p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; }

.vs-voet { background: var(--vs-footer); color: var(--vs-footer-tekst); font-size: 14.5px; }
.vs-voet-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(var(--kol, 4), minmax(0, 1fr)); gap: 36px 40px; padding-top: 60px; padding-bottom: 44px; }
.vs-voet-intro { max-width: 360px; }
.vs-voet-intro p { margin: 12px 0 0; line-height: 1.6; }
.vs-voet-intro p + p + p { margin-top: 16px; }
.vs-voet .vs-voet-logo { margin: 0; font-weight: 800; font-size: 27px; line-height: 1; letter-spacing: -.025em; color: #fff; }
.vs-voet-logo span { color: var(--vs-oranje); }
.vs-voet h2 { margin: 0 0 14px; font-size: 15px; line-height: 1.4; font-weight: 700; letter-spacing: 0; color: #fff; }
.vs-voet ul { display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; }
.vs-voet a { color: var(--vs-footer-tekst); text-decoration: none; }
.vs-voet a:hover { color: #fff; text-decoration: underline; }
.vs-voet-intro a { text-decoration: underline; }
.vs-voet-onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 22px 0 30px; border-top: 1px solid var(--vs-footer-lijn); font-size: 13.5px; }
.vs-voet-onder p { margin: 0; }

/* =========================================================================
   Kruimelpad (eigen en RankMath)
   ====================================================================== */
.vs-kruimel { margin-bottom: 30px; font-size: 13.5px; line-height: 1.5; color: var(--vs-grijs); }
.vs-kruimel ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; list-style: none; margin: 0; padding: 0; }
.vs-kruimel a, .vs-kruimel--rm a { color: var(--vs-grijs); text-decoration: none; }
.vs-kruimel a:hover { color: var(--vs-link); text-decoration: underline; }
.vs-kruimel-sep .vs-ic { display: block; }
.vs-kruimel--rm nav, .vs-kruimel--rm p { margin: 0; }
.vs-kruimel--rm .separator { margin: 0 6px; color: var(--vs-grijs); }
.vs-hubkop .vs-kruimel { margin-bottom: 34px; }

/* =========================================================================
   Artikel, product en pagina: raster en zijbalk
   ====================================================================== */
.vs-pagina { padding-top: 22px; padding-bottom: 80px; }
.vs-art { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: stretch; }
.vs-art--pagina:not(:has(.vs-toc)) { grid-template-columns: minmax(0, 1fr); }
.vs-art--pagina:not(:has(.vs-toc)) .vs-zij { display: none; }
.vs-art--pagina:not(:has(.vs-toc)) .vs-artikel { max-width: 876px; }
.vs-artikel { min-width: 0; }
.vs-zij { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.vs-zij:empty { display: none; }
.vs-artikel > .vs-eyebrow { margin-bottom: 14px; }
.vs-titel, .vs-artikel h1.wp-block-post-title { margin: 0; max-width: 20em; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.1; font-weight: 800; letter-spacing: -.025em; color: var(--vs-inkt); text-wrap: balance; }

.vs-toc-spoor { flex: 1 1 auto; }
.vs-toc { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; padding: 20px 16px 16px; border-radius: 14px; background: var(--vs-mist-toc); }
.vs-toc-titel { margin: 0 0 10px 10px; font-weight: 800; font-size: 17px; color: var(--vs-inkt); }
.vs-toc ol { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.vs-toc a { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px; padding: 7px 10px; border-radius: 8px; color: #2B3A50; text-decoration: none; line-height: 1.4; }
.vs-toc a:hover { background: #fff; color: var(--vs-link); }
.vs-toc a.is-actief { background: #fff; color: var(--vs-inkt); font-weight: 700; box-shadow: inset 3px 0 0 var(--vs-oranje); }
.vs-toc a span { color: var(--vs-grijs); font-weight: 600; }

.vs-zijlijst { display: flex; flex-direction: column; }
.vs-zij-titel { margin: 0 0 6px; font-weight: 800; font-size: 17px; color: var(--vs-inkt); }
.vs-zijlijst a { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--vs-lijn); color: var(--vs-inkt); text-decoration: none; font-size: 14.5px; line-height: 1.35; }
.vs-zijlijst a:hover strong { text-decoration: underline; }
.vs-zijlijst a > span:last-child span { display: block; margin-top: 2px; font-size: 13px; color: var(--vs-grijs); }
.vs-zij-beeld { position: relative; flex: 0 0 64px; height: 52px; border-radius: 8px; overflow: hidden; }
.vs-zij-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }

.vs-zijkaart { padding: 20px 20px 8px; border: 1px solid var(--vs-rand); border-radius: 14px; background: #fff; box-shadow: var(--vs-schaduw-kaart); }
.vs-zij-label { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vs-label); }
.vs-prodlijst { display: flex; flex-direction: column; margin-top: 8px; }
.vs-prodlijst--los { margin-top: 0; }
.vs-prodlijst a { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--vs-lijn); text-decoration: none; }
.vs-prodlijst a strong { font-size: 15px; color: var(--vs-inkt); }
.vs-prodlijst a span { font-size: 13px; color: var(--vs-grijs); }
.vs-prodlijst a:hover strong { text-decoration: underline; }
.vs-prodlijst a.vs-prodlijst-alle { flex-direction: row; align-items: center; gap: 8px; color: var(--vs-link); font-weight: 700; font-size: 14.5px; }

.vs-verder { margin-top: 64px; }
.vs-verder .vs-sectiekop { margin-bottom: 20px; }
.vs-verder .vs-h2 { font-size: 26px; line-height: 1.2; letter-spacing: -.015em; }

@media (min-width: 980px) {
	.vs-mtoc { display: none; }
}
@media (min-width: 980px) and (max-width: 1180px) {
	.vs-art { grid-template-columns: minmax(0, 1fr) 290px; gap: 40px; }
}
@media (max-width: 979px) {
	.vs-art { grid-template-columns: minmax(0, 1fr); }
	.vs-toc-spoor { display: none; }
	.vs-zij { margin-top: 48px; }
}

/* =========================================================================
   Lopende tekst (artikelen, pagina's, hubintro). Basis met :where, zodat componenten winnen.
   ====================================================================== */
.vs-tekst { color: var(--vs-tekst); font-size: 17.5px; line-height: 1.7; }
.vs-tekst > * { margin-block: 0; }
.vs-tekst :where(p) { margin: 0 0 18px; }
.vs-tekst > p, .vs-tekst > ul, .vs-tekst > ol { max-width: 38em; }
.vs-artikel .vs-inhoud > p:first-child { margin: 20px 0 0; font-size: 19px; line-height: 1.65; color: var(--vs-lead); }
.vs-tekst :where(h2) { margin: 60px 0 16px; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; font-weight: 800; letter-spacing: -.015em; color: var(--vs-inkt); text-wrap: balance; }
.vs-tekst :where(h3) { margin: 30px 0 8px; font-size: 19.5px; line-height: 1.3; font-weight: 700; letter-spacing: 0; color: var(--vs-inkt); }
.vs-tekst :where(h4) { margin: 24px 0 6px; font-size: 17.5px; line-height: 1.35; font-weight: 700; letter-spacing: 0; color: var(--vs-inkt); }
.vs-tekst :where(h2, h3, h4) { scroll-margin-top: 24px; }
.vs-tekst > h2:first-child, .vs-tekst > h3:first-child { margin-top: 0; }
.vs-tekst :where(ul, ol) { margin: 0 0 18px; padding-left: 1.4em; }
.vs-tekst :where(li) { margin: 0 0 6px; }
.vs-tekst :where(ul) > li::marker { color: var(--vs-oranje-diep); }
.vs-tekst :where(strong) { color: var(--vs-inkt); }
.vs-tekst :where(figure) { margin: 22px 0; }
.vs-tekst :where(blockquote) { margin: 26px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--vs-oranje); color: var(--vs-lead); }
.vs-tekst :where(hr) { margin: 40px 0; border: 0; border-top: 1px solid var(--vs-rand-2); }
.vs-tekst .wp-block-image img { border-radius: 14px; }
.vs-tekst :where(figcaption) { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--vs-grijs); }
.vs-tekst > .vs-byline + p, .vs-tekst > .vs-dm + p, .vs-tekst > .vs-byline + .vs-dm + p { margin-top: 26px; }

/* Byline */
.vs-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--vs-rand); font-size: 14px; line-height: 1.4; color: var(--vs-grijs); }
.vs-byline-wie { display: flex; align-items: center; gap: 12px; }
.vs-byline-logo { flex: 0 0 46px; }
.vs-byline-logo img { display: block; width: 46px; height: 46px; max-width: none; border-radius: 50%; }
.vs-byline strong { color: var(--vs-inkt); }
.vs-byline-rol { display: block; font-size: 13px; }
.vs-byline-item { display: flex; align-items: center; gap: 7px; padding-left: 22px; border-left: 1px solid #E3E6EA; min-height: 28px; }

/* Uitgelichte afbeelding (na het antwoord) */
.vs-uitgelicht { margin: 8px 0 0; }
.vs-uitgelicht img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 14px; background: var(--vs-lijn); }
.vs-uitgelicht figcaption { margin-top: 10px; font-size: 13.5px; color: var(--vs-grijs); }

/* Inklapbare inhoudsopgave (mobiel) */
.vs-mtoc { margin: 26px 0; border: 1px solid var(--vs-rand-2); border-radius: 12px; background: var(--vs-mist-toc); }
.vs-mtoc summary { display: flex; align-items: center; min-height: 48px; padding: 12px 18px; font-weight: 800; font-size: 16px; color: var(--vs-inkt); cursor: pointer; }
.vs-mtoc ol { margin: 0; padding: 0 18px 12px 40px; font-size: 15px; line-height: 1.5; }
.vs-mtoc li { margin: 0; }
.vs-mtoc a { display: block; padding: 10px 0; }
.vs-mtoc a.is-actief { font-weight: 700; color: var(--vs-inkt); }

/* Tabellen: eigen scrollkader, de pagina scrolt nooit */
.vs-tekst .wp-block-table { margin: 22px 0 14px; border: 1px solid var(--vs-rand-2); border-radius: 12px; overflow-x: auto; background: #fff; max-width: 100%; }
.vs-tekst .wp-block-table table { width: 100%; margin: 0; border-collapse: collapse; table-layout: auto; font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.vs-tekst .wp-block-table table:has(tr > :nth-child(3)) { min-width: 520px; }
.vs-tekst .wp-block-table table:has(tr > :nth-child(4)) { min-width: 640px; }
.vs-tekst .wp-block-table table:has(tr > :nth-child(5)) { min-width: 740px; }
.vs-tekst .wp-block-table th, .vs-tekst .wp-block-table td { padding: 12px 16px; border: 0; border-top: 1px solid var(--vs-lijn); text-align: left; vertical-align: top; }
.vs-tekst .wp-block-table thead { border: 0; }
.vs-tekst .wp-block-table thead th { border-top: 0; background: var(--vs-tabelkop); color: var(--vs-inkt); font-weight: 700; font-size: 14px; }
.vs-tekst .wp-block-table tbody th, .vs-tekst .wp-block-table tbody td:first-child { font-weight: 700; color: var(--vs-inkt); }
.vs-tekst .wp-block-table tfoot td { border-top: 1px solid var(--vs-rand-2); font-size: 14px; color: var(--vs-grijs); }
.vs-tekst .wp-block-table figcaption { margin: 0; padding: 10px 16px; border-top: 1px solid var(--vs-lijn); background: var(--vs-mist-voet); text-align: left; }

/* FAQ: H3 plus alinea, open */
.vs-faq { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 18px; }
.vs-faq-item { margin: 0; padding: 20px 22px 4px; border: 1px solid var(--vs-rand-2); border-radius: 12px; background: #fff; }
.vs-tekst .vs-faq-item > * { margin-block: 0; }
.vs-tekst .vs-faq-item h3 { margin: 0 0 8px; font-size: 18px; }
.vs-tekst .vs-faq-item p, .vs-tekst .vs-faq-item ul { margin: 0 0 16px; max-width: none; }

/* Afzenderblok */
.vs-afzender { display: flex; flex-wrap: wrap; gap: 24px 32px; margin-top: 56px; padding: 26px 28px; border-radius: 14px; background: var(--vs-mist); }
.vs-afzender p { margin: 0; }
.vs-afzender-wie { display: flex; gap: 20px; flex: 1 1 380px; }
.vs-afzender-logo { flex: 0 0 auto; }
.vs-afzender-logo img { display: block; width: 80px; height: 80px; max-width: none; border-radius: 50%; }
.vs-afzender-klein { font-size: 13.5px; color: var(--vs-grijs); }
.vs-afzender .vs-afzender-naam { margin-top: 2px; font-size: 19px; font-weight: 800; color: var(--vs-inkt); }
.vs-afzender .vs-afzender-rol { margin: 2px 0 10px; font-size: 14px; color: var(--vs-grijs); }
.vs-afzender-p { font-size: 15px; line-height: 1.6; color: var(--vs-tekst); }
.vs-afzender-check { display: flex; gap: 14px; align-items: flex-start; flex: 0 1 280px; padding-left: 28px; border-left: 1px solid var(--vs-rand-sep); font-size: 14.5px; line-height: 1.5; }
.vs-check-rond { display: flex; align-items: center; justify-content: center; flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--vs-groen); color: #fff; }
.vs-check-rond .vs-ic { stroke-width: 2.6; }
.vs-afzender .vs-afzender-datum { margin: 0 0 8px; font-weight: 800; color: var(--vs-inkt); }
.vs-afzender-check a { display: inline-block; padding: 4px 0; }

/* Productkenmerken */
.vs-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 18px 0 0; padding: 0; }
.vs-chips .vs-chip { padding: 5px 10px; font-size: 12px; }

/* =========================================================================
   Componenten (blokstijlen en klassen). Werken ook in de editor.
   ====================================================================== */

/* Let op (oranje kader) */
.is-style-vs-letop { position: relative; margin: 26px 0 18px; padding: 20px 22px 20px 72px; border: 1px solid var(--vs-oranje-rand); border-radius: 12px; background: var(--vs-oranje-licht); }
.is-style-vs-letop::before { content: ""; position: absolute; top: 20px; left: 22px; width: 34px; height: 34px; border-radius: 50%; background: var(--vs-oranje) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1B33' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v7'/%3E%3Cpath d='M12 17.5v.5'/%3E%3C/svg%3E") center / 18px no-repeat; }
.is-style-vs-letop > * { margin-block: 0; }
.is-style-vs-letop > :is(h2, h3, h4) { margin: 2px 0 6px; font-size: 17.5px; line-height: 1.35; font-weight: 700; letter-spacing: 0; color: var(--vs-oranje-diep); }
.is-style-vs-letop > p { margin: 0 0 10px; max-width: none; font-size: 16px; line-height: 1.65; color: var(--vs-tekst); }
.is-style-vs-letop > :last-child { margin-bottom: 0; }

/* Grijs kader */
.is-style-vs-kader { margin: 26px 0 18px; padding: 20px 22px; border: 1px solid var(--vs-rand); border-radius: 12px; background: var(--vs-kaartvlak); }
.is-style-vs-kader > * { margin-block: 0 10px; }
.is-style-vs-kader > :last-child { margin-bottom: 0; }

/* Genummerde controle: H3's krijgen een oranje nummer */
.is-style-vs-controle { counter-reset: vs-controle; margin: 0 0 18px; }
.is-style-vs-controle > * { margin-block: 0; }
.is-style-vs-controle > h3, .is-style-vs-controle > h4 { counter-increment: vs-controle; display: flex; align-items: center; margin: 30px 0 8px; font-size: 19.5px; line-height: 1.3; font-weight: 700; color: var(--vs-inkt); }
.is-style-vs-controle > :is(h3, h4)::before { content: counter(vs-controle); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; margin-right: 10px; border-radius: 50%; background: var(--vs-oranje); color: var(--vs-inkt); font-size: 14px; font-weight: 800; }
.is-style-vs-controle > :first-child { margin-top: 0; }
.is-style-vs-controle > p { margin: 0 0 18px; max-width: 38em; }

/* Stappenrij (horizontaal, korte keuzes) */
ol.is-style-vs-stappenrij, ul.is-style-vs-stappenrij { counter-reset: vs-stap; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 20px; max-width: none; margin: 24px 0 18px; padding: 24px; list-style: none; border: 1px solid var(--vs-rand); border-radius: 14px; background: var(--vs-kaartvlak); }
.is-style-vs-stappenrij > li { counter-increment: vs-stap; position: relative; margin: 0; padding: 48px 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--vs-basis); }
.is-style-vs-stappenrij > li::before { content: counter(vs-stap); position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--vs-oranje); color: var(--vs-inkt); font-weight: 800; font-size: 16px; }
.is-style-vs-stappenrij > li:not(:last-child)::after { content: ""; position: absolute; top: 8px; right: -4px; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A0A8B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px no-repeat; }
.is-style-vs-stappenrij > li > strong:first-child { display: block; margin-bottom: 6px; font-size: 16.5px; line-height: 1.35; color: var(--vs-inkt); }

/* Stappenplan (verticaal) */
ol.is-style-vs-stappenplan, ul.is-style-vs-stappenplan { counter-reset: vs-plan; max-width: 40em; margin: 24px 0 18px; padding: 0; list-style: none; }
.is-style-vs-stappenplan > li { counter-increment: vs-plan; position: relative; margin: 0; padding: 4px 0 22px 52px; }
.is-style-vs-stappenplan > li::before { content: counter(vs-plan); position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--vs-marine); color: #fff; font-weight: 800; font-size: 15px; }
.is-style-vs-stappenplan > li::after { content: ""; position: absolute; top: 40px; bottom: 6px; left: 16px; width: 2px; background: var(--vs-rand-2); }
.is-style-vs-stappenplan > li:last-child { padding-bottom: 4px; }
.is-style-vs-stappenplan > li:last-child::after { display: none; }
.is-style-vs-stappenplan > li > strong:first-child { display: block; margin-bottom: 2px; font-size: 17.5px; color: var(--vs-inkt); }

/* Vinkjes */
ul.is-style-vs-check, ol.is-style-vs-check { display: flex; flex-direction: column; gap: 12px; max-width: 40em; margin: 16px 0 20px; padding: 0; list-style: none; }
.is-style-vs-check > li { position: relative; margin: 0; padding-left: 32px; }
.is-style-vs-check > li::before { content: ""; position: absolute; top: .25em; left: 0; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7F50' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 20px no-repeat; }

/* Laagopbouw (bovenste laag eerst; gebruik een omgekeerde genummerde lijst) */
ol.is-style-vs-laagopbouw, ul.is-style-vs-laagopbouw { max-width: none; margin: 24px 0 10px; padding: 0; list-style: none; border: 1px solid var(--vs-rand-2); border-radius: 14px; overflow: hidden; background: #fff; }
.is-style-vs-laagopbouw > li { position: relative; min-height: 74px; margin: 0; padding: 14px 20px 14px 196px; border-top: 1px solid var(--vs-lijn); font-size: 14.5px; line-height: 1.55; color: var(--vs-grijs); }
.is-style-vs-laagopbouw > li:first-child { border-top: 0; }
.is-style-vs-laagopbouw > li::before { content: ""; position: absolute; top: -1px; bottom: 0; left: 0; width: 132px; border-top: 1px solid rgba(11,27,51,.08); background: #F2E6D8; }
.is-style-vs-laagopbouw > li:first-child::before { top: 0; border-top: 0; background: linear-gradient(180deg, #FFA15C 0%, #F7741B 55%, #E5640F 100%); }
.is-style-vs-laagopbouw > li:nth-child(odd):not(:first-child)::before { background: #E8D9C6; }
.is-style-vs-laagopbouw > li:last-child:not(:first-child)::before { background: repeating-linear-gradient(172deg, #B98A5E 0 7px, #A9784C 7px 9px, #C29466 9px 15px); }
.is-style-vs-laagopbouw > li::after { content: counter(list-item); position: absolute; top: 14px; left: 152px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--vs-marine); color: #fff; font-size: 14px; font-weight: 800; }
.is-style-vs-laagopbouw > li > strong:first-child { display: block; color: var(--vs-inkt); font-size: 16px; }

/* Kaarten (core/columns) */
.wp-block-columns.is-style-vs-kaarten { gap: 16px; margin: 22px 0; }
.is-style-vs-kaarten > .wp-block-column { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--vs-rand); border-radius: 12px; background: var(--vs-kaartvlak); }
.is-style-vs-kaarten > .wp-block-column::before { content: ""; flex: 0 0 auto; width: 38px; height: 6px; border-radius: 3px; background: var(--vs-oranje); }
.is-style-vs-kaarten > .wp-block-column:nth-child(2)::before { background: var(--vs-steen); }
.is-style-vs-kaarten > .wp-block-column:nth-child(3)::before { background: var(--vs-beige); }
.is-style-vs-kaarten > .wp-block-column > * { margin: 0; max-width: none; }
.is-style-vs-kaarten > .wp-block-column > :is(h3, h4) { font-size: 17.5px; line-height: 1.3; font-weight: 700; color: var(--vs-inkt); }
.is-style-vs-kaarten > .wp-block-column > p { font-size: 15px; line-height: 1.5; }
.is-style-vs-kaarten > .wp-block-column > p.is-style-vs-noot { font-size: 13.5px; }
.is-style-vs-kaarten .is-style-vs-check { gap: 10px; margin: 0; font-size: 15px; line-height: 1.5; }
.is-style-vs-kaarten .is-style-vs-check > li { padding-left: 27px; }
.is-style-vs-kaarten .is-style-vs-check > li::before { width: 18px; height: 18px; background-size: 18px; }

/* Noot (eigen berekening, toelichting) */
p.is-style-vs-noot, .vs-tekst p.is-style-vs-noot { font-size: 14.5px; line-height: 1.6; color: var(--vs-grijs); }

/* Praktijkfouten en keuzehulp (core/table) */
.wp-block-table.is-style-vs-fouten thead th { background: var(--vs-oranje-chip); }
.wp-block-table.is-style-vs-fouten tbody td:first-child, .wp-block-table.is-style-vs-fouten tbody th:first-child { position: relative; width: 30%; padding-left: 32px; }
.wp-block-table.is-style-vs-fouten tbody :is(td, th):first-child::before { content: ""; position: absolute; top: 20px; left: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--vs-oranje); }
.wp-block-table.is-style-vs-fouten tbody td:last-child { width: 34%; }
.wp-block-table.is-style-vs-keuzehulp thead th { background: var(--vs-marine); color: #fff; }
.wp-block-table.is-style-vs-keuzehulp tbody td:last-child { background: #FFF8F2; color: var(--vs-inkt); font-weight: 600; }

/* =========================================================================
   Droogtijden ([vs_droogtijden])
   ====================================================================== */
.vs-dm { margin: 30px 0 0; overflow: hidden; background: #fff; border: 1px solid var(--vs-rand-2); border-radius: 14px; box-shadow: var(--vs-schaduw-paneel); color: var(--vs-tekst); font-size: 15px; line-height: 1.5; }
.vs-dm p, .vs-dm dl, .vs-dm dd, .vs-dm ul, .vs-dm ol { margin: 0; max-width: none; }
.vs-dm-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 16px 22px; border-bottom: 1px solid var(--vs-lijn); background: var(--vs-mist-licht); }
.vs-dm .vs-dm-kop :is(h2, h3, h4) { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 800; letter-spacing: 0; color: var(--vs-inkt); }
.vs-dm .vs-dm-kop p { font-size: 13.5px; color: var(--vs-grijs); }
.vs-dm-in { padding: 18px 22px 16px; }
.vs-dm .vs-dm-bron { padding: 12px 22px; border-top: 1px solid var(--vs-lijn); background: var(--vs-mist-voet); font-size: 13px; line-height: 1.55; color: var(--vs-grijs); }
.vs-dm-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; font-size: 13px; color: var(--vs-grijs); }
.vs-dm-in .vs-dm-legenda { margin-top: 12px; }
.vs-dm-legenda li { display: flex; align-items: center; gap: 7px; margin: 0; }
.vs-dm-sw { display: inline-block; flex: 0 0 16px; width: 16px; height: 9px; border-radius: 4px; }
.vs-dm-balk { position: relative; height: 22px; overflow: hidden; border-radius: 99px; background: var(--vs-balk); }
.vs-dm-balk--dun { height: 10px; background: var(--vs-lijn); }
.vs-dm-f { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w); }
.vs-dm-f--overschilderbaar { background: var(--vs-perzik); }
.vs-dm-f--kleefvrij { background: var(--vs-perzik-mid); }
.vs-dm-f--stofdroog { background: var(--vs-oranje); }
.vs-dm-mark { position: absolute; top: 0; bottom: 0; left: var(--l); width: 3px; margin-left: -2px; background: var(--vs-inkt); }
/* fasen per conditie */
.vs-dm-rij { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 8px 24px; align-items: center; padding: 16px 0; border-top: 1px solid var(--vs-lijn); }
.vs-dm-rij:first-child { padding-top: 4px; border-top: 0; }
.vs-dm-rij dt { font-size: 14px; line-height: 1.4; color: var(--vs-grijs); }
.vs-dm-rij dt > strong { font-size: 16px; color: var(--vs-inkt); }
.vs-dm-hoofd, .vs-dm-cond { display: block; }
.vs-dm-hoofd strong { white-space: nowrap; color: var(--vs-inkt); }
.vs-dm .vs-dm-sub { margin-top: 7px; font-size: 13px; color: var(--vs-grijs); }
.vs-dm-as { position: relative; height: 20px; margin-left: 254px; font-size: 12.5px; color: var(--vs-grijs); white-space: nowrap; }
.vs-dm-as span { position: absolute; left: var(--l); transform: translateX(-50%); }
.vs-dm-as span:first-child { transform: none; }
.vs-dm-as span:last-child { transform: translateX(-100%); }
/* tabel (meerdere producten) */
.vs-dm-tabel th .vs-dm-cond { margin-top: 2px; font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--vs-grijs); }
.vs-dm-scroll { overflow-x: auto; }
.vs-dm-tabel { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.vs-dm-tabel thead tr { background: var(--vs-mist-licht); }
.vs-dm-tabel thead th { padding: 14px 12px; text-align: left; font-size: 13px; font-weight: 700; color: var(--vs-label); white-space: nowrap; }
.vs-dm-tabel thead th:first-child, .vs-dm-tabel tbody th { padding-left: 20px; }
.vs-dm-tabel tbody tr { border-top: 1px solid var(--vs-lijn); }
.vs-dm-tabel tbody th { padding: 14px 12px 14px 20px; text-align: left; font-weight: 600; color: var(--vs-inkt); }
.vs-dm-tabel tbody th a { color: var(--vs-inkt); text-decoration: none; }
.vs-dm-tabel tbody th a:hover { text-decoration: underline; }
.vs-dm-tabel td { padding: 14px 12px; white-space: nowrap; }
.vs-dm-tabel td.vs-dm-hoofdcel { font-weight: 700; color: var(--vs-inkt); }
.vs-dm-tabel td.vs-dm-nv { font-weight: 400; color: var(--vs-grijs); }
.vs-dm-tabel .vs-dm-balkkol { width: 34%; padding-right: 20px; }
.vs-dm-schaal { display: flex; justify-content: space-between; }
.vs-dm-voet { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 14px 20px; border-top: 1px solid var(--vs-lijn); background: var(--vs-mist-voet); font-size: 13px; color: var(--vs-grijs); }
.vs-dm .vs-dm-voet .vs-dm-bron { padding: 0; border: 0; background: none; }
/* proces (tijdlijn) */
.vs-dm-labels { position: relative; height: 56px; }
.vs-dm-lbl { position: absolute; top: 0; bottom: 0; left: var(--l); padding: 0 0 0 9px; border-left: 2px solid var(--vs-inkt); font-size: 13px; line-height: 1.35; color: var(--vs-grijs); white-space: nowrap; }
.vs-dm-lbl--vuistregel { border-left-style: dashed; }
.vs-dm-lbl--rechts { left: auto; right: var(--r); padding: 0 9px 0 0; border-left: 0; border-right: 2px solid var(--vs-inkt); text-align: right; }
.vs-dm-lbl--rechts.vs-dm-lbl--vuistregel { border-right-style: dashed; }
.vs-dm-lbl dt { margin: 0; }
.vs-dm .vs-dm-lbl dd { font-size: 15px; font-weight: 700; color: var(--vs-inkt); }
.vs-dm-tijdlijn { position: relative; height: 18px; overflow: hidden; border-radius: 99px; background: var(--vs-balk); }
.vs-dm-seg { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); }
.vs-dm-seg--vol { background: var(--vs-oranje); }
.vs-dm-seg--gestreept { background: repeating-linear-gradient(135deg, var(--vs-streep-1) 0 6px, var(--vs-streep-2) 6px 8px); }
.vs-dm-sw.vs-dm-seg--gestreept { background: repeating-linear-gradient(135deg, var(--vs-streep-1) 0 3px, var(--vs-streep-2) 3px 5px); }
.vs-dm-lijn { position: absolute; top: 0; bottom: 0; left: var(--l); border-left: 2px solid rgba(255,255,255,.95); }
.vs-dm-lijn--vuistregel { border-left-style: dashed; }
.vs-dm-ticks { position: relative; height: 24px; margin-top: 6px; font-size: 12.5px; color: var(--vs-grijs); white-space: nowrap; }
.vs-dm-tick { position: absolute; left: var(--l); transform: translateX(-50%); }
.vs-dm-tick--start { transform: none; }
.vs-dm-tick--eind { transform: translateX(-100%); }
.vs-dm-daarna { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--vs-lijn); font-size: 14px; color: var(--vs-tekst); }
.vs-dm .vs-dm-daarna-label { font-weight: 700; color: var(--vs-inkt); }
.vs-dm-daarna ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 0; list-style: none; }
.vs-dm-daarna li { display: flex; align-items: center; gap: 10px; margin: 0; }
.vs-dm-stap { padding: 5px 11px; border-radius: 99px; background: var(--vs-oranje-chip); color: var(--vs-inkt); font-weight: 600; }
.vs-dm-wacht { display: flex; align-items: center; gap: 6px; color: var(--vs-grijs); }

/* Kenniskaart */
.vs-kk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 22px 0 14px; }
.vs-kk-g { padding: 18px 20px 8px; border: 1px solid var(--vs-rand-2); border-radius: 12px; background: #fff; }
.vs-tekst .vs-kk-g h3, .vs-kk-g h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 16.5px; line-height: 1.3; font-weight: 700; color: var(--vs-inkt); }
.vs-kk-ic { display: flex; align-items: center; justify-content: center; flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--vs-groen-licht); color: var(--vs-groen); }
.vs-kk-g dl { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); margin: 0; font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.vs-kk-g dt, .vs-kk-g dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--vs-lijn); }
.vs-kk-g dt { padding-right: 12px; color: var(--vs-grijs); }
.vs-kk-g dd { color: var(--vs-inkt); font-weight: 600; }
.vs-kk-bron { display: block; font-size: 12.5px; font-weight: 500; }
.vs-tekst .vs-kk-voet, .vs-kk-voet { font-size: 14.5px; line-height: 1.6; color: var(--vs-grijs); }

/* =========================================================================
   Hub, merk, zoeken, 404
   ====================================================================== */
.vs-hubkop { position: relative; overflow: hidden; background: var(--vs-zand); }
.vs-hubkop-tekst { position: relative; z-index: 1; max-width: 600px; padding: 44px 0 64px; }
.vs-hubkop:not(.vs-hubkop--foto) .vs-hubkop-tekst { max-width: 760px; }
.vs-hubkop h1 { margin: 0; font-size: clamp(38px, 4.5vw, 60px); line-height: 1.05; font-weight: 800; letter-spacing: -.028em; color: var(--vs-inkt); }
.vs-hub-intro, .vs-hub-intro p { margin: 20px 0 0; max-width: 31em; font-size: 18px; line-height: 1.6; color: var(--vs-intro); }
.vs-hub-intro p { margin: 0; }
.vs-hubkop-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 26px; font-size: 14px; color: var(--vs-grijs); }
.vs-hubkop-meta span { display: flex; align-items: center; gap: 8px; }
.vs-hubkop-meta strong { color: var(--vs-inkt); }
.vs-hubkop-foto { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; }
.vs-hubkop-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 35%; }
.vs-hubkop .vs-hero-fade { background: linear-gradient(90deg, #F7F7F5 0%, rgba(247,247,245,.85) 16%, rgba(247,247,245,0) 50%); }
.vs-hub-meer { padding: 64px 0 68px; }
.vs-hub-meer .vs-tekst > :first-child { margin-top: 0; }
.vs-grp { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 28px 56px; padding: 36px 0; border-top: 1px solid var(--vs-rand-2); }
.vs-grp:first-of-type { padding-top: 8px; border-top: 0; }
.vs-grp h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.25; font-weight: 800; color: var(--vs-inkt); }
.vs-grp p { margin: 0 0 12px; max-width: 34em; font-size: 16.5px; line-height: 1.7; }
.vs-merk-tekst { padding-top: 48px; }
.vs-merk-tekst .vs-tekst { max-width: 760px; }
.vs-merk-tekst .vs-tekst:empty { display: none; }
.vs-merkgrid--archief { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.vs-zoekkop { max-width: 760px; margin-bottom: 36px; }
.vs-zoekkop h1 { margin: 0 0 10px; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; font-weight: 800; letter-spacing: -.025em; color: var(--vs-inkt); text-wrap: balance; }
.vs-zoek-sub, .vs-zoekkop > p { margin: 0 0 10px; max-width: 38em; font-size: 17px; line-height: 1.6; color: var(--vs-intro); }
.vs-zoekkop .vs-zoek { margin-top: 22px; }
.vs-alist--zoek, .vs-zoekblok, .vs-zoektips { max-width: 880px; }
.vs-zoektips, .vs-zoekblok { margin-top: 44px; }
.vs-zoektips .is-style-vs-check { font-size: 16.5px; }
.vs-paginering ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 32px 0 0; padding: 0; }
.vs-paginering .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--vs-rand-2); border-radius: 8px; text-decoration: none; }
.vs-paginering .current { background: var(--vs-inkt); border-color: var(--vs-inkt); color: #fff; }

/* =========================================================================
   Responsief (breekpunten uit het canvas)
   ====================================================================== */
@media (max-width: 1100px) {
	.vs-tegels-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.vs-grid4, .vs-grid3, .vs-rijen4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vs-grid6, .vs-merkgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vs-werk-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.vs-werk-foto { display: none; }
	.vs-voet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vs-voet-intro { grid-column: 1 / -1; }
}
@media (max-width: 1060px) {
	.is-style-vs-stappenrij > li::after { display: none; }
}
@media (max-width: 900px) {
	.vs-hero-foto { position: relative; width: auto; height: 260px; }
	.vs-hero-fade, .vs-notitie, .vs-hubkop .vs-hero-fade { display: none; }
	.vs-hero-tekst { padding: 40px 0 32px; }
	.vs-hubkop-foto { position: relative; width: auto; height: 240px; }
	.vs-hubkop-tekst { padding: 28px 0; }
	.vs-split, .vs-banner, .vs-grp { grid-template-columns: minmax(0, 1fr); }
	.vs-split { gap: 32px; }
	.vs-banner-beeld { min-height: 0; height: 240px; }
	.vs-banner-tekst { padding: 48px var(--vs-goot); }
	.vs-foutbalk-beeld { display: none; }
	.vs-byline-item { padding-left: 0; border-left: 0; min-height: 0; }
	.vs-alist--twee { grid-template-columns: minmax(0, 1fr); }
	.vs-voet ul { gap: 0; }
	.vs-voet ul a { display: inline-flex; align-items: center; min-height: 44px; }
	.vs-kruimel a, .vs-kruimel--rm a { display: inline-flex; align-items: center; min-height: 32px; }
	.vs-vaak a { display: inline-block; padding: 6px 0; }
}
@media (max-width: 700px) {
	.vs-tekst { font-size: 17px; }
	.vs-rijen4 { grid-template-columns: minmax(0, 1fr); }
	.vs-sectie { padding: 56px 0; }
	.vs-werk { padding: 56px 0; }
	.vs-dm-rij { grid-template-columns: minmax(0, 1fr); }
	.vs-dm-as { margin-left: 0; }
	.vs-dm-oneven { display: none; }
	.vs-dm-labels { height: 104px; }
	.vs-dm-lbl { bottom: auto; height: 50px; font-size: 12.5px; }
	.vs-dm-lbl + .vs-dm-lbl { top: 54px; }
	.vs-kk { grid-template-columns: minmax(0, 1fr); }
	.vs-kk-g dl { display: block; }
	.vs-kk-g dt { padding: 10px 0 0; }
	.vs-kk-g dd { padding: 2px 0 10px; border-top: 0; }
	.vs-afzender { padding: 22px 20px; }
	.vs-afzender-wie { gap: 16px; }
	.vs-afzender-logo img { width: 56px; height: 56px; }
	.vs-afzender-check { padding-left: 0; border-left: 0; }
	.is-style-vs-laagopbouw > li { padding-left: 104px; }
	.is-style-vs-laagopbouw > li::before { width: 64px; }
	.is-style-vs-laagopbouw > li::after { left: 64px; margin-left: 12px; }
	.is-style-vs-letop { padding: 18px 18px 18px 64px; }
	.is-style-vs-letop::before { left: 16px; }
	.vs-merkgrid--archief { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.vs-tegels-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vs-grid4, .vs-grid3 { grid-template-columns: minmax(0, 1fr); }
	.vs-grid6, .vs-merkgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vs-werk-grid { grid-template-columns: minmax(0, 1fr); }
	.vs-voet-grid { grid-template-columns: minmax(0, 1fr); }
	.vs-dm-balkkol { display: none; }
	.vs-dm-tabel { font-size: 14px; }
	.vs-dm-tabel thead th, .vs-dm-tabel td { padding-left: 10px; padding-right: 8px; }
	.vs-dm-tabel thead th:first-child, .vs-dm-tabel tbody th { padding-left: 14px; padding-right: 8px; }
	.vs-tegel-tekst { padding: 12px 12px 10px; }
}
/* Smalle telefoons: kop compacter, zodat het antwoord vroeg in beeld staat */
@media (max-width: 600px) {
	.vs-kop-in { gap: 0 12px; }
	.vs-logo-naam { font-size: 28px; }
	.vs-logo-sub { font-size: 11px; }
	.vs-js .vs-menuknop { padding: 0 12px; gap: 6px; }
	.vs-pagina:has(.vs-art) .vs-kruimel ol > li[aria-current], .vs-pagina:has(.vs-art) .vs-kruimel ol > li:nth-last-child(2), .vs-pagina:has(.vs-art) .vs-kruimel--rm .last, .vs-pagina:has(.vs-art) .vs-kruimel--rm .separator:nth-last-child(2) { display: none; }
	.vs-pagina { padding-top: 16px; }
	.vs-pagina > .vs-kruimel { margin-bottom: 20px; }
	.vs-titel, .vs-artikel h1.wp-block-post-title { font-size: 28px; }
	.vs-artikel .vs-inhoud > p:first-child { margin-top: 16px; font-size: 17.5px; line-height: 1.6; }
	.vs-top-in { min-height: 56px; }
}
@media (pointer: coarse) {
	.vs-toc a { padding-block: 11px; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
	.vs-kaart:hover, .vs-rij:hover { transform: none; }
}