/* Winkel: popover, winkelwagen en afrekenen - Van Yild Tegels.
   DEEL 1 is LETTERLIJK het stijlblok van snippet 8298 (vy_winkel_stijl, v1.7.17), inclusief het
   commentaar dat uitlegt waarom regels er staan. Niet opschonen: tests/test_vy_winkel.py
   vergelijkt dit bestand met de snippet.
   DEEL 2 is het stijlblok van de afhaalmelding uit snippet 8276.
   DEEL 3 is het weinige dat de nieuwe site zelf nodig heeft (geen Elementor, geen WooCommerce). */

/* ===== DEEL 1: snippet 8298 ===== */
/* Thema en Elementor zetten koppen, links, knoppen en formuliervelden
   agressief op eigen waarden. Binnen .vy-wk en .vy-pop zetten we die
   expliciet terug. */
.vy-wk, .vy-pop {
	--vy-ink:#15171a; --vy-zacht:#6b7280; --vy-lijn:#e7e7e3; --vy-was:#fafaf8;
	--vy-accent:var(--e-global-color-accent,#0a3c8f); --vy-ok:#1f7a4d; --vy-stop:#b42318;
	font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	color:var(--vy-ink); font-size:14px; line-height:1.55;
}
.vy-wk *, .vy-pop * { box-sizing:border-box; }

/* ---------------------------------------------------------------
   Elementor stijlt ELKE <button> op de site mee, inclusief eigen
   hover- en active-kleuren (dat roze). Eén reset voor alle knoppen
   binnen onze onderdelen, in álle toestanden. Alles wat er daarna
   uit moet zien als knop krijgt hieronder z'n eigen regels met een
   hogere specificiteit (.vy-wk .vy-wk-knop = 0,2,0 wint van
   .vy-wk button = 0,1,1).
   --------------------------------------------------------------- */
.vy-wk button, .vy-pop button,
.vy-wk button:hover, .vy-pop button:hover,
.vy-wk button:focus, .vy-pop button:focus,
.vy-wk button:active, .vy-pop button:active,
.vy-wk button:focus-visible, .vy-pop button:focus-visible,
.vy-wk button:focus-within, .vy-pop button:focus-within,
.vy-wk button:visited, .vy-pop button:visited {
	background-color:transparent!important; background-image:none!important;
	box-shadow:none!important; text-shadow:none!important; outline:0!important;
	transform:none!important; filter:none!important; text-decoration:none!important;
	font-family:inherit!important; letter-spacing:normal!important; text-transform:none!important;
	min-height:0!important; transition:none;
}
.vy-wk h1,.vy-wk h2,.vy-wk h3,.vy-pop h3 {
	font-family:inherit!important; color:var(--vy-ink)!important; text-transform:none!important;
	margin:0!important; padding:0!important; line-height:1.25!important; letter-spacing:-.01em!important;
}
.vy-wk p, .vy-pop p { margin:0!important; padding:0!important; }
/* Links erven ONZE typografie, niet die van het thema. Zonder dit pakt een
   <a> zonder eigen klasse de linkstijl van de pagina op: op /webshop kwam
   de productnaam binnen een kop van 13px uit op 16px/400, en de links in
   "Sample van" waren groter dan de regel eromheen. Elementor stijlt per
   template, vandaar dat het op de ene pagina veel erger was dan op de
   andere. De knopregels verderop hebben een hogere specificiteit
   (.vy-pop a.vy-wk-knop = 0,2,1 tegen 0,1,1) en blijven dus staan. */
.vy-wk a, .vy-pop a {
	text-decoration:none!important; color:inherit;
	font-size:inherit!important; font-weight:inherit!important;
	font-family:inherit!important; line-height:inherit!important;
	letter-spacing:inherit!important; text-transform:none!important;
}
.vy-wk ul, .vy-pop ul { margin:0!important; padding:0!important; list-style:none!important; }
/* Bedragen. wc_price() levert een span.woocommerce-Price-amount.amount met
   een bdi en een los valutateken erin, en bij prijzen exclusief btw ook een
   small.tax_label. Thema's stijlen .amount standaard, want dat is de
   prijsopmaak op productpagina's. Zonder dit erft geen enkel bedrag onze
   maat. Stond alleen voor .vy-pop__som vast; die regel is 0,3,0 en blijft
   dus gewoon winnen. Wij gebruiken deze klassen nergens zelf. */
.vy-wk .woocommerce-Price-amount, .vy-pop .woocommerce-Price-amount,
.vy-wk .amount, .vy-pop .amount,
.vy-wk .woocommerce-Price-currencySymbol, .vy-pop .woocommerce-Price-currencySymbol,
.vy-wk .tax_label, .vy-pop .tax_label,
.vy-wk bdi, .vy-pop bdi {
	font-size:inherit!important; font-weight:inherit!important;
	line-height:inherit!important; letter-spacing:inherit!important; color:inherit;
}
.vy-wk dl, .vy-wk dt, .vy-wk dd { margin:0!important; padding:0!important; }
.vy-wk-h1 { font-size:26px!important; font-weight:650!important; }
.vy-wk-h2 { font-size:12px!important; font-weight:700!important; letter-spacing:.08em!important;
	text-transform:uppercase!important; color:var(--vy-zacht)!important; margin-bottom:14px!important; }
.vy-wk-zacht { color:var(--vy-zacht); font-size:13px; }
.vy-wk-gratis { color:var(--vy-ok); font-weight:600; }

.vy-wk { max-width:1120px; margin:0 auto; padding:8px 0 72px; }
.vy-wk-kop { margin-bottom:22px; }
.vy-wk-grid { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; align-items:start; }
/* BUG 2. De zijkolom schoof onder de vastgeplakte header. top stond op een
   vaste 24px en hield geen rekening met wat er allemaal boven aan het
   scherm vastzit. Drie variabelen, van boven naar beneden:
   - --vy-adminbar-h  de WP-adminbalk (vy-sitekorting, alleen fixed >782px)
   - --vy-balk-h      de kortingsbalk (vy-sitekorting, gemeten hoogte)
   - --vy-kop-h       de sticky Elementor-header (hier gemeten, zie
                      vy_winkel_kopscript)
   Alle drie met een terugval, want ze bestaan alleen als de balk aan staat
   respectievelijk als het meetscript gedraaid heeft. Zonder terugval zou
   calc() ongeldig worden en verdwijnt de top in zijn geheel - dan zit je
   met een sticky kolom die tegen de bovenrand plakt, precies de kwaal.
   De 84px voor de header is de stand vóór de eerste meting. Bewust aan de
   ruime kant: bij scrollpositie 0 verschuift een sticky element toch niet,
   dus te veel kost hooguit wat wit zodra je scrolt, en te weinig kost je de
   bovenkant van de kaart. Specificiteit 0,1,0, gelijk aan de regel die hier
   stond. */
.vy-wk-rechts {
	position:sticky;
	top:calc( var(--vy-adminbar-h, 0px) + var(--vy-balk-h, 0px) + var(--vy-kop-h, 84px) + 20px );
}
/* Ons eigen formulier op de afrekenpagina is leeg en mag niets innemen. Het
   attribuut hidden zou genoeg moeten zijn, maar een themaregel op form
   (display of margin) wint daar zo van. 0,2,0 tegen de reguliere themaregels
   van hooguit 0,1,1. */
.vy-wk .vy-wk-eigenform { display:none!important; }
/* Verborgen velden binnen een grid. .vy-wk-velden is display:grid, en een
   themaregel die van input een block maakt zou van type=hidden een lege
   cel maken. Dat raakt sinds 1.7.9 het landveld. 0,2,1. */
.vy-wk input[type="hidden"] { display:none!important; }
.vy-wk-kaart { background:#fff; border:1px solid var(--vy-lijn); border-radius:14px; padding:20px 22px; margin-bottom:16px; }

/* Regels */
.vy-wk-regel { display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--vy-lijn); }
.vy-wk-regel:first-child { border-top:0; }
.vy-wk-regel__beeld { position:relative; flex:0 0 84px; width:84px; }
.vy-wk-regel.is-compact .vy-wk-regel__beeld { flex-basis:52px; width:52px; }
.vy-wk-regel__beeld img { width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:9px; display:block; background:var(--vy-was); }
.vy-wk-vlag { position:absolute; left:0; bottom:0; background:var(--vy-accent); color:#fff; font-size:9.5px;
	font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:2px 6px; border-radius:0 7px 0 9px; }
.vy-wk-regel__tekst { flex:1; min-width:0; }
.vy-wk-regel__naam { font-size:14.5px!important; font-weight:600!important; }
.vy-wk-regel.is-compact .vy-wk-regel__naam { font-size:13px!important; }
.vy-wk-regel__meta { font-size:12px; color:var(--vy-zacht); margin-top:3px!important; line-height:1.4; }
.vy-wk-regel__meta li { margin:0; padding:0; }
.vy-wk-regel__meta span { font-weight:600; }
.vy-wk-regel__meta p { margin:0!important; display:inline; font-size:inherit!important; line-height:inherit!important; }
/* Lange tegelnamen mogen de regel niet uit elkaar duwen. De guard stond
   alleen op de meta-regels, maar de PRODUCTNAAM staat in
   .vy-wk-regel__naam en die was onbeschermd. Rekensom op 375px: scherm
   375 - 32 pagina-padding - 44 kaart-padding - 2 rand = 297 binnenwerk,
   min 66 foto, min 2x14 gap, min 114 teller = 89px voor de naam. Elk
   woord dat daar niet in past duwde de kaart uit beeld en gaf horizontaal
   scrollen. Allebei 0,1,0, en niets anders in dit blad zet overflow-wrap
   op deze twee klassen; de <a> in de naam erft het. */
.vy-wk-regel__meta { overflow-wrap:anywhere; }
.vy-wk-regel__naam { overflow-wrap:anywhere; }
.vy-wk-regel__meta a { color:var(--vy-accent)!important; text-decoration:none!important; }
.vy-wk-regel__meta a:hover { text-decoration:underline!important; }
.vy-wk-regel.is-compact .vy-wk-regel__meta { font-size:11.5px; }
.vy-wk-regel__doos { font-size:11.5px!important; color:var(--vy-zacht); margin-top:3px!important; }
.vy-wk-regel__rechts { display:flex; flex-direction:column; align-items:flex-end; gap:7px; text-align:right; }
.vy-wk-regel__prijs { font-weight:650; font-size:14px; white-space:nowrap; }
.vy-wk-regel__aantal { font-size:12.5px; color:var(--vy-zacht); }
.vy-wk-regel__m2 { font-size:11px; color:var(--vy-zacht); }

.vy-wk-teller { display:inline-flex; align-items:stretch; border:1px solid var(--vy-lijn); border-radius:9px; overflow:hidden; background:#fff; }
.vy-wk .vy-wk-teller__knop,
.vy-wk .vy-wk-teller__knop:hover,
.vy-wk .vy-wk-teller__knop:focus,
.vy-wk .vy-wk-teller__knop:active {
	display:flex!important; align-items:center!important; justify-content:center!important;
	border:0!important; border-radius:0!important; background-color:#fff!important;
	width:34px; min-width:34px; height:36px; padding:0!important; margin:0!important;
	font-size:17px!important; font-weight:500!important; line-height:1!important;
	color:var(--vy-ink)!important; cursor:pointer;
}
.vy-wk .vy-wk-teller__knop:hover { background-color:var(--vy-was)!important; color:var(--vy-ink)!important; }
.vy-wk .vy-wk-teller__knop:disabled { color:var(--vy-zacht)!important; cursor:default; }
/* Kruisje in de popover */
.vy-wk .vy-wk-kruis,
.vy-wk .vy-wk-kruis:hover,
.vy-wk .vy-wk-kruis:focus,
.vy-pop .vy-wk-kruis,
.vy-pop .vy-wk-kruis:hover,
.vy-pop .vy-wk-kruis:focus {
	display:flex!important; align-items:center!important; justify-content:center!important;
	width:22px; min-width:22px; height:22px; padding:0!important; margin:0 0 2px!important;
	border:0!important; border-radius:50%!important; background-color:transparent!important;
	font-size:17px!important; line-height:1!important; color:var(--vy-zacht)!important; cursor:pointer;
}
.vy-pop .vy-wk-kruis:hover, .vy-wk .vy-wk-kruis:hover {
	background-color:rgba(180,35,24,.09)!important; color:var(--vy-stop)!important;
}
.vy-wk-teller__veld { width:44px; height:34px; border:0!important; border-left:1px solid var(--vy-lijn)!important;
	border-right:1px solid var(--vy-lijn)!important; text-align:center; font-size:13.5px; font-family:inherit;
	background:#fff!important; padding:0!important; border-radius:0!important; box-shadow:none!important; -moz-appearance:textfield; }
.vy-wk-teller__veld::-webkit-outer-spin-button,
.vy-wk-teller__veld::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* Specificiteit 0,2,1 met !important: anders wint de linkreset hierboven
   (.vy-wk a, 0,1,1 met !important) en verliest deze link zijn maat. */
.vy-wk a.vy-wk-verder { display:inline-block; margin-top:18px; font-size:13px!important; font-weight:600!important; color:var(--vy-zacht)!important; }
.vy-wk-verder:hover { color:var(--vy-ink)!important; }

/* Totalen */
.vy-wk-totaal { display:flex; justify-content:space-between; align-items:baseline; gap:14px;
	padding:9px 0; border-bottom:1px dashed var(--vy-lijn); font-size:13.5px; }
.vy-wk-totaal dt { color:var(--vy-zacht); }
.vy-wk-totaal dd { font-weight:600; text-align:right; }
.vy-wk-totaal.is-korting dd { color:var(--vy-ok); }
.vy-wk-totaal--eind { border-bottom:0; padding-top:14px; margin-top:4px; border-top:2px solid var(--vy-ink); font-size:16px; }
.vy-wk-totaal--eind dt { color:var(--vy-ink)!important; font-weight:650; }
.vy-wk-totaal--eind dd { font-size:18px; font-weight:700; }
.vy-wk-coupon-weg { border:0; background:none; color:var(--vy-zacht); cursor:pointer; font-size:15px; line-height:1; padding:0 0 0 4px; }
.vy-wk-coupon-weg:hover { color:var(--vy-stop); }

/* Verzending */
.vy-wk-verzending { margin:18px 0 6px; }
.vy-wk-verzending__kop { font-size:11px!important; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
	color:var(--vy-zacht); margin:14px 0 7px!important; }
.vy-wk-verzending__kop:first-child { margin-top:0!important; }
.vy-wk-optie { display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--vy-lijn);
	border-radius:10px; margin-bottom:7px; cursor:pointer; transition:border-color .14s ease,background .14s ease; }
.vy-wk-optie:hover { border-color:var(--vy-ink); }
.vy-wk-optie.is-gekozen { border-color:var(--vy-ink); background:var(--vy-was); }
.vy-wk-optie input { margin:0; flex:0 0 auto; accent-color:var(--vy-ink); }
.vy-wk-optie__tekst { flex:1; min-width:0; }
.vy-wk-optie__tekst strong { display:block; font-size:13px; font-weight:600; }
.vy-wk-optie__tekst small { display:block; font-size:11.5px; color:var(--vy-zacht); margin-top:1px; }
.vy-wk-optie__prijs { font-size:13px; font-weight:650; white-space:nowrap; }

/* Kortingscode */
.vy-wk-coupon { margin:18px 0; padding-top:16px; border-top:1px solid var(--vy-lijn); }
.vy-wk-coupon label { display:block; font-size:12.5px!important; font-weight:600!important; margin-bottom:6px!important; }
.vy-wk-coupon__rij { display:flex; gap:8px; }
.vy-wk-coupon__rij input { flex:1; min-width:0; border:1px solid var(--vy-lijn)!important; border-radius:9px!important;
	padding:9px 12px!important; font-size:13.5px!important; font-family:inherit!important; background:#fff!important;
	margin:0!important; height:auto!important; box-shadow:none!important; }
.vy-wk-coupon__rij input:focus { outline:none!important; border-color:var(--vy-ink)!important; }
.vy-wk-coupon__melding { display:block; font-size:12px; margin-top:6px; color:var(--vy-ok); }
.vy-wk-coupon__melding.is-fout { color:var(--vy-stop); }
.vy-wk-coupon__melding:empty { display:none; }
/* Sinds 1.7.9 zet het script hier een complete .vy-wk-notice in, dezelfde
   als op de server. Die heeft een eigen margin-bottom van 14px voor
   meldingen bovenaan een pagina; onderaan het codeveld is dat een gat.
   Specificiteit 0,2,0 tegen de 0,1,0 van .vy-wk-notice. */
.vy-wk-coupon__melding .vy-wk-notice { margin:0; }

/* Gratis-verzendingdrempel */
.vy-wk-gratis { margin:0 0 16px; }
/* PUNT 4, EN ER ZAT MEER ONDER DAN DE KLANT KON ZIEN.
   De vraag was 2 a 3 pixels lucht tussen de tekst en de balk. De marge
   stond op 7px, dus dat leek een kwestie van een getal ophogen. Nagerekend
   met de cascade kwam er iets anders uit: in de GEWONE variant stond die
   7px er helemaal niet.

   De selector was .vy-wk-gratis__tekst, en dat is 0,1,0. Een paar honderd
   regels hoger staat de typografiereset .vy-wk p, .vy-pop p met
   margin:0!important, en die is 0,1,1 - een tagnaam telt mee in de c-kolom.
   Twee keer !important, dus dan beslist de specificiteit, en 0,1,1 verslaat
   0,1,0. De tekst plakte dus met marge NUL tegen de balk. Precies dezelfde
   val als de linkreset .vy-wk a die eerder twee regels sloopte.
   In de popover viel het niet op omdat de compacte variant hieronder op
   0,3,0 staat en wel wint; daar werkte de 7px wel.

   Daarom niet alleen het getal maar ook de selector. .vy-wk-gratis
   .vy-wk-gratis__tekst is 0,2,0 en verslaat de reset (b=2 tegen b=1). De
   wikkel .vy-wk-gratis staat er altijd omheen, in beide varianten en in
   beide contexten (.vy-wk en .vy-pop), dus dit dekt alles zonder een
   selector per plek. De regels die deze hierna nog overschrijven staan
   allemaal op 0,3,0 (is-compact en is-gehaald) en blijven dus winnen. */
.vy-wk-gratis .vy-wk-gratis__tekst { font-size:13px!important; color:var(--vy-ink); margin:0 0 10px!important; }
.vy-wk-gratis__tekst strong { font-weight:650; }
.vy-wk-gratis__baan { display:block; height:5px; border-radius:999px; background:var(--vy-lijn); overflow:hidden; }
.vy-wk-gratis__vul { display:block; height:100%; border-radius:999px; background:var(--vy-accent); transition:width .3s ease; }
.vy-wk-gratis.is-gehaald .vy-wk-gratis__vul { background:var(--vy-ok); }
.vy-wk-gratis.is-gehaald .vy-wk-gratis__tekst { color:var(--vy-ok); }
.vy-wk-gratis.is-compact { margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--vy-lijn); }
/* PUNT 4, compacte variant (in de popover). De tekst is hier een halve pixel
   kleiner en het hele blok krapper, dus 9px in plaats van 10px: dezelfde
   optische lucht bij een kleinere letter.
   LET OP de specificiteit. Deze selector is 0,3,0 (.vy-wk-gratis en
   .is-compact zijn twee klassen op hetzelfde element, plus de klasse van
   het kind) tegen de 0,1,0 van de basisregel hierboven - maar die staat op
   !important, en !important verslaat élke specificiteit. Zonder !important
   hier zou deze margin dus stil verliezen en bleef het 10px. Dat is exact
   de reden dat de font-size op deze regel er ook al een had. */
.vy-wk-gratis.is-compact .vy-wk-gratis__tekst { font-size:12.5px!important; margin-bottom:9px!important; }
/* "Winkelwagen bijwerken" is het vangnet voor bezoekers zonder werkend
   JavaScript: de plus- en minknoppen zijn type=button en de verzendradio's
   versturen zichzelf niet. Met JavaScript is de knop overbodig, dus hij
   staat standaard uit. Bewust in CSS en niet meer in JavaScript: dat script
   komt uit de popover-shortcode in de header en draaide dus vóór deze knop
   bestond, en na elke vervanging van .vy-wk kwam hij sowieso terug.
   Specificiteit 0,3,0 zodat hij wint van .vy-wk .vy-wk-knop, ongeacht de
   volgorde in dit blok. */
.vy-wk .vy-wk-knop.vy-wk-bijwerken { display:none!important; width:100%; margin-top:14px; }

/* Knoppen. Specificiteit bewust hoger dan de reset hierboven. */
.vy-wk .vy-wk-knop, .vy-pop .vy-wk-knop,
.vy-wk a.vy-wk-knop, .vy-pop a.vy-wk-knop {
	display:inline-flex!important; align-items:center!important; justify-content:center!important;
	background-color:var(--vy-ink)!important; color:#fff!important; border:1px solid var(--vy-ink)!important;
	border-radius:10px!important; padding:11px 22px!important; font-size:13.5px!important;
	font-weight:600!important; line-height:1.3!important; cursor:pointer; transition:background-color .14s ease;
}
.vy-wk .vy-wk-knop:hover, .vy-pop .vy-wk-knop:hover,
.vy-wk .vy-wk-knop:focus, .vy-pop .vy-wk-knop:focus {
	background-color:#2c3238!important; border-color:#2c3238!important; color:#fff!important;
}
.vy-wk .vy-wk-knop--groot { width:100%; padding:14px 22px!important; font-size:15px!important; margin-top:16px; }
.vy-wk .vy-wk-knop--licht, .vy-pop .vy-wk-knop--licht {
	background-color:#fff!important; color:var(--vy-ink)!important; border-color:var(--vy-lijn)!important;
}
.vy-wk .vy-wk-knop--licht:hover, .vy-pop .vy-wk-knop--licht:hover {
	background-color:var(--vy-was)!important; border-color:var(--vy-ink)!important; color:var(--vy-ink)!important;
}
.vy-wk .vy-wk-weg, .vy-wk .vy-wk-weg:hover, .vy-wk .vy-wk-weg:focus {
	display:inline!important; border:0!important; background-color:transparent!important; padding:0!important;
	margin-top:8px; font-size:12px!important; font-weight:400!important; color:var(--vy-zacht)!important;
	cursor:pointer; text-decoration:underline!important;
}
.vy-wk .vy-wk-weg:hover { color:var(--vy-stop)!important; }
.vy-wk .vy-wk-coupon__rij .vy-wk-knop { padding:0 18px!important; }

.vy-wk-leeg { text-align:center; padding:60px 20px; }
/* Font-size stond hier niet, waardoor deze tekst de themamaat pakte. De
   tweelingregel .vy-ma-leeg p in vy-mijn-account had 'm wel; dit was dus
   een omissie, geen keuze. */
.vy-wk-leeg p { color:var(--vy-zacht); font-size:14px!important; line-height:1.55!important; margin:10px 0 22px!important; }
.vy-wk-melding { background:rgba(180,35,24,.07); color:var(--vy-stop); border-radius:9px; padding:11px 14px; font-size:13px; }

/* Meldingen van WooCommerce, getekend door vy_winkel_meldingen(). Zelfde
   taal als de kaarten eromheen: afgeronde hoek, dunne rand, zachte tint en
   een eigen icoon. De standaardopmaak van het thema was een balk over de
   volle breedte met een rode streep erboven. */
.vy-wk-notice { display:flex; align-items:flex-start; gap:10px; margin:0 0 14px;
	padding:12px 15px; border:1px solid var(--vy-lijn); border-radius:11px;
	background:#fff; font-size:13px!important; line-height:1.45!important; color:var(--vy-ink); }
.vy-wk-notice__icoon { flex:0 0 auto; display:flex; margin-top:1px; }
.vy-wk-notice__icoon svg { width:17px; height:17px; display:block; }
.vy-wk-notice__tekst { min-width:0; font-size:inherit!important; line-height:inherit!important;
	overflow-wrap:anywhere; }
.vy-wk-notice.is-fout { border-color:rgba(180,35,24,.35); background:rgba(180,35,24,.055); }
.vy-wk-notice.is-fout .vy-wk-notice__icoon { color:var(--vy-stop); }
.vy-wk-notice.is-goed { border-color:rgba(21,128,61,.32); background:rgba(21,128,61,.05); }
.vy-wk-notice.is-goed .vy-wk-notice__icoon { color:var(--vy-ok); }
.vy-wk-notice.is-info .vy-wk-notice__icoon { color:var(--vy-zacht); }
.vy-wk-inlogtip { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
	background:var(--vy-was); border:1px solid var(--vy-lijn); border-radius:11px; padding:13px 16px; margin-bottom:20px; font-size:13.5px; }
/* Ook hier 0,2,1 met !important tegen de linkreset. */
.vy-wk .vy-wk-inlogtip a { color:var(--vy-accent)!important; font-weight:600!important; }
body.vy-wk-bezig .vy-wk-regels, body.vy-wk-bezig .vy-wk-totalen { opacity:.5; pointer-events:none; transition:opacity .12s; }

/* Popover-knop.
   Elementor stijlt elke <button> in de header mee, inclusief een eigen
   hover- en active-kleur. Daarom hier alles expliciet terugzetten voor
   álle toestanden; zonder de :hover-, :focus- en :active-regels springt
   de knop bij aanraken terug naar de themakleur. */
.vy-pop { position:relative; display:inline-flex; align-items:center; vertical-align:middle; line-height:1; }
.vy-pop__knop,
.vy-pop__knop:hover,
.vy-pop__knop:focus,
.vy-pop__knop:active,
.vy-pop__knop:focus-visible,
.vy-pop__knop:focus-within {
	display:inline-flex!important; align-items:center!important; gap:12px;
	background:none!important; background-color:transparent!important; background-image:none!important;
	border:0!important; box-shadow:none!important; outline:0!important; text-shadow:none!important;
	border-radius:0!important; padding:4px!important; margin:0!important;
	color:var(--vy-ink)!important; font-family:inherit!important; font-size:14px!important;
	font-weight:600!important; line-height:1!important; text-decoration:none!important;
	min-height:0!important; height:auto!important; transform:none!important; cursor:pointer;
}
.vy-pop__knopbinnen { display:inline-flex; align-items:center; gap:11px; line-height:1; }
/* Het bedrag erft anders de kopstijl van het thema en wordt veel te groot
   en te vet. Alles hier vastzetten, inclusief de opmaak die WooCommerce
   zelf om het bedrag heen zet (.woocommerce-Price-amount / bdi). */
/* BUG 5, de bron. Hier stond display:inline-flex!important. Dat is de
   regel die .vy-pop__som { display:none } uit de 900px-query versloeg:
   die is 0,1,0 zonder !important, deze is 0,2,0 mét - en een mediaquery
   telt niet mee voor specificiteit, dus "later in het blad" hielp niet.
   Het !important stond hier voor de font- en kleurwaarden tegen het thema;
   voor display was het nooit nodig. Het is er daarom alleen bij display
   af, en de mobiele regel is opgehoogd naar dezelfde specificiteit. Geen
   zwaardere regel erbovenop dus, maar de bron gerepareerd.
   Het weglaten is veilig: .vy-pop__som is een flexitem van
   .vy-pop__knopbinnen, dus zijn display wordt hoe dan ook geblokkeerd, en
   de bedragopmaak eronder staat op display:inline!important. */
.vy-pop .vy-pop__som {
	display:inline-flex; align-items:center!important;
	font-size:14px!important; font-weight:500!important; line-height:1!important;
	white-space:nowrap; color:var(--vy-ink)!important; letter-spacing:normal!important;
}
.vy-pop .vy-pop__som .woocommerce-Price-amount,
.vy-pop .vy-pop__som .amount,
.vy-pop .vy-pop__som bdi,
.vy-pop .vy-pop__som .woocommerce-Price-currencySymbol {
	font-size:inherit!important; font-weight:inherit!important; line-height:1!important;
	color:inherit!important; display:inline!important;
}
.vy-pop__ico { position:relative; display:inline-flex; align-items:center; justify-content:center; }
.vy-pop__ico svg { width:24px; height:24px; display:block; transition:opacity .14s ease; }
.vy-pop__knop:hover .vy-pop__ico svg { opacity:.65; }
.vy-pop__knop:focus-visible .vy-pop__ico { outline:2px solid var(--vy-accent); outline-offset:3px; border-radius:6px; }
.vy-pop__teller { position:absolute; top:-6px; right:-9px; display:inline-flex; align-items:center;
	justify-content:center; min-width:17px; height:17px; padding:0 4px; border-radius:999px;
	background:var(--vy-accent); color:#fff!important; font-size:10.5px; font-weight:700;
	line-height:1; letter-spacing:0; border:2px solid #fff; box-sizing:content-box; }
.vy-pop__paneel { position:absolute; top:calc(100% + 10px); right:0; z-index:99999; width:370px; max-width:92vw;
	background:#fff; border:1px solid var(--vy-lijn); border-radius:14px; box-shadow:0 18px 50px rgba(15,23,42,.16);
	padding:18px 20px; }
.vy-pop__paneel[hidden] { display:none!important; }
.vy-pop__scherm { display:none; }
.vy-pop__sluit { display:none; }
.vy-pop__paneel:before { content:""; position:absolute; top:-7px; right:20px; width:12px; height:12px;
	background:#fff; border-left:1px solid var(--vy-lijn); border-top:1px solid var(--vy-lijn); transform:rotate(45deg); }

/* ---------------------------------------------------------------
   PUNT 1. OPENEN EN SLUITEN MET EEN ANIMATIE.

   hidden en display:none zijn niet te animeren: er is geen tussenstand.
   Daarom doet het script het in twee stappen (zie zetPop() hierboven) en
   staat hier alleen de vormgeving van die stappen: een begintoestand op
   het paneel zelf, en een eindtoestand achter de klasse is-in.

   Dit is de DESKTOP-variant: een korte vervaging met 6px verschuiving,
   vanaf het ankerpunt onder de knop naar beneden. Onder 900px wordt hij
   verderop overschreven door de bottom sheet, die schuift in plaats van
   vervaagt.

   Specificiteit 0,2,0 en niet 0,1,0, om twee redenen: het portaal-omhulsel
   draagt zelf de klasse vy-pop, dus .vy-pop <iets> matcht ook nadat het
   paneel naar body is verhuisd; en 0,2,0 zet hem gelijk aan
   .vy-pop__portaal .vy-pop__paneel, die alleen position zet. Er wordt
   niets overschreven: opacity, transform en transition stonden nergens
   voor dit element. De klasseregel eronder is 0,3,0 en wint dus altijd,
   ongeacht de volgorde in het blad. */
/* OPENEN EN SLUITEN HEBBEN EEN EIGEN DUUR (1.7.14).
   De transition staat op de toestand waar je NAARTOE gaat: bij het
   toevoegen van is-in geldt de transition van de is-in-regel, bij het
   weghalen die van de basisregel. Zo krijgt openen een andere duur en
   curve dan sluiten zonder een derde klasse.
   Basisregel = SLUITEN, is-in = OPENEN. */
.vy-pop .vy-pop__paneel {
	opacity:0; transform:translateY(-6px);
	transition:opacity .12s ease-in, transform .12s ease-in;
}
.vy-pop .vy-pop__paneel.is-in {
	opacity:1; transform:none;
	transition:opacity .15s cubic-bezier(.25,.46,.45,.94), transform .15s cubic-bezier(.25,.46,.45,.94);
}
/* De dimlaag vloeit mee in en uit. display staat hier bewust NIET: op
   desktop blijft hij op display:none uit het basisblok staan, onder 900px
   zet de mobiele regel hem aan. Zou display hier staan, dan zou hij ook op
   desktop over de pagina vallen. 0,2,0 respectievelijk 0,3,0, allebei
   nieuwe eigenschappen voor dit element. */
.vy-pop .vy-pop__scherm { opacity:0; transition:opacity .14s ease-in; }
.vy-pop .vy-pop__scherm.is-in { opacity:1; transition:opacity .18s ease-out; }

/* ---------------------------------------------------------------
   BUG 1. Het omhulsel waar het script paneel en dimlaag in hangt zodra de
   popover opengaat; zie vyPortaal() in het script hierboven. Het draagt
   zélf de klasse vy-pop, anders matcht geen enkele .vy-pop <iets>-regel
   meer en valt de hele vormgeving van het paneel weg - inclusief de custom
   properties --vy-ink, --vy-lijn en --vy-was, die op .vy-wk, .vy-pop
   gedefinieerd staan en dus alleen binnen die elementen bestaan.

   Specificiteit 0,2,0 en daarmee altijd sterker dan .vy-pop (0,1,0),
   ongeacht de volgorde in het blad. Er worden bewust twee dingen van
   overschreven:
   - display:inline-flex wordt block. Een leeg inline-flex-blok aan het
     eind van body zou daar nog een regelhoogte aan de pagina plakken.
   - position:relative wordt static. Zonder position en zonder z-index
     maakt dit omhulsel GEEN stacking context, en dat is precies de
     bedoeling: paneel en dimlaag komen zo rechtstreeks in de context van
     de wortel, waar hun z-index eindelijk telt tegenover de zwevende
     WhatsApp- en telefoonknoppen en de vertaalknop.
   De rest van .vy-pop (font, kleur, de variabelen) blijft juist staan.
   --------------------------------------------------------------- */
.vy-pop.vy-pop__portaal { position:static; display:block; }
/* Buiten .vy-pop is het paneel zijn ankerpunt kwijt: position:absolute zou
   nu tegen het omhulsel of tegen de pagina uitrekenen in plaats van tegen
   de knop. In het portaal staat het daarom fixed, met top en right die het
   script uit de plaats van de knop berekent. 0,2,0 tegen de basisregel
   .vy-pop__paneel (0,1,0); onder 900px wint de bottom sheet daar met
   position:fixed!important sowieso van, inclusief van de inline top/right
   die het script zet - !important van een auteur wint van inline zonder
   !important, en dat is hier precies het gewenste gedrag. */
.vy-pop__portaal .vy-pop__paneel { position:fixed; }

.vy-pop .vy-wk-regels { max-height:min(46vh,340px); overflow-y:auto; }
/* Lege winkelwagen. Stond eerst als een losse grijze zin met een knop
   links eronder; de tekst had bovendien geen eigen font-size en kwam dus
   op de themamaat uit. Nu een gecentreerd blokje met icoon, en alle maten
   expliciet. */
.vy-pop__leegblok { display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px 6px 8px; }
.vy-pop__leegicoon { display:flex; align-items:center; justify-content:center; width:48px; height:48px;
	border-radius:50%; background:var(--vy-was); color:var(--vy-zacht); margin-bottom:14px; }
.vy-pop__leegicoon svg { width:23px; height:23px; display:block; }
.vy-pop__leeg { font-size:14.5px!important; font-weight:600!important; line-height:1.3!important;
	color:var(--vy-ink)!important; padding:0!important; }
/* 0,2,0. Stond tot 1.7.11 op .vy-pop__leegsub (0,1,0) en verloor daarmee van
   de typografiereset .vy-pop p (0,1,1, margin:0!important) een paar honderd
   regels hoger: allebei !important, dus beslist de specificiteit, en de
   tagnaam p telt mee in de c-kolom. De 5px is dus nooit gerenderd. Zelfde
   val als bij .vy-wk-gratis__tekst in 1.7.11 en de linkreset in 1.7.1. */
.vy-pop .vy-pop__leegsub { font-size:12.5px!important; font-weight:400!important; line-height:1.45!important;
	color:var(--vy-zacht)!important; margin-top:5px!important; max-width:220px; }
/* 1.7.17: "Naar de tegels" in de lege popover in de merk-navy, niet in het
   inktzwart van de gewone knoppen. Bewust #213276 en niet var(--vy-accent):
   die haalt Elementor's globale accent op, en dat is op deze site het felle
   blauw van de showroomknop (#105cda). De navy is de kleur die op de
   collectiepagina al voor Bekijken en de filterknop gebruikt wordt.

   Specificiteit 0,2,1 en later in de stylesheet dan .vy-pop a.vy-wk-knop,
   dus deze wint. Met !important omdat de basisregel dat ook heeft. */
.vy-pop .vy-pop__leegknop { width:100%; margin-top:18px; }
.vy-pop a.vy-pop__leegknop,
.vy-pop a.vy-pop__leegknop:visited {
	background-color:#213276!important; border-color:#213276!important; color:#fff!important;
}
.vy-pop a.vy-pop__leegknop:hover,
.vy-pop a.vy-pop__leegknop:focus {
	background-color:#1a2860!important; border-color:#1a2860!important; color:#fff!important;
}
.vy-pop__voet { border-top:1px solid var(--vy-lijn); margin-top:12px; padding-top:13px; display:flex; flex-direction:column; gap:8px; }
.vy-pop__totaalregel { display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; }
.vy-pop__totaalregel.is-korting { color:var(--vy-ok); font-size:12.5px; }
.vy-pop__totaalregel strong { font-weight:650; }
.vy-pop__voet .vy-wk-knop { width:100%; }

/* Afrekenen: WooCommerce' eigen veldmarkup in onze vorm gieten. */
.vy-wk-velden { display:grid; grid-template-columns:1fr 1fr; gap:13px 15px; }
/* min-width:0 is nieuw in 1.7.8 en hoort bij BUG 4. Een .form-row is een
   gridcel en heeft dus min-width:auto: hij kan niet smaller worden dan de
   min-content-breedte van zijn inhoud. Eén <select> met "Verenigde
   Arabische Emiraten" erin blaast daarmee de hele kolom op. Aanvulling op
   deze bestaande regel (0,2,0), geen overschrijving: min-width stond hier
   nog niet. */
.vy-wk-velden .form-row { margin:0!important; padding:0!important; display:flex; flex-direction:column; gap:6px; width:auto!important; min-width:0; float:none!important; }
.vy-wk-velden .form-row-wide, .vy-wk-velden #billing_address_1_field,
.vy-wk-velden #billing_company_field, .vy-wk-velden #order_comments_field,
.vy-wk-velden #shipping_address_1_field { grid-column:1/-1; }
.vy-wk-velden label { font-size:12.5px!important; font-weight:600!important; color:var(--vy-ink)!important; margin:0!important; }
.vy-wk-velden .required { color:var(--vy-stop); text-decoration:none; }
.vy-wk-velden input[type=text], .vy-wk-velden input[type=email], .vy-wk-velden input[type=tel],
.vy-wk-velden input[type=password], .vy-wk-velden select, .vy-wk-velden textarea,
.vy-wk-velden .select2-selection {
	width:100%!important; max-width:100%!important;
	border:1px solid var(--vy-lijn)!important; border-radius:9px!important;
	padding:10px 12px!important; font-size:14px!important; font-family:inherit!important;
	background:#fff!important; color:var(--vy-ink)!important; margin:0!important; height:auto!important;
	min-height:42px; line-height:1.4!important; box-shadow:none!important;
}
.vy-wk-velden input:focus, .vy-wk-velden select:focus, .vy-wk-velden textarea:focus {
	outline:none!important; border-color:var(--vy-ink)!important; box-shadow:0 0 0 3px rgba(21,23,26,.08)!important;
}
.vy-wk-velden textarea { min-height:84px; resize:vertical; }
/* ---------------------------------------------------------------
   BUG 4. WooCommerce vervangt land- en provincievelden door select2
   (selectWoo). Dat brengt eigen opmaak mee die niet bij de rest past en
   over het volgende label heen valt, dus verbergen we de select2-schil en
   tonen we het gewone <select> weer; de change-events waar de btw- en
   verzendberekening op hangen blijven daarmee gewoon werken.

   Dat was niet genoeg. selectWoo hangt óók de klasse
   .select2-hidden-accessible op het ORIGINELE <select>, en die zet
   position:absolute, clip, clip-path, overflow, white-space, width:1px en
   height:1px - allemaal met !important. Wij zetten daar alleen display
   tegenover. Gemeten op een venster van 361px was het gevolg:
   - het select stond BUITEN de flow, dus width:100% rekende tegen een veel
     breder blok en de rechterrand lag op 396px. Dat is precies de 35px
     horizontaal scrollen waar de klant over viel;
   - clip-path:inset(50%) maakte hem onzichtbaar, waardoor het leek alsof
     er bij land/regio helemaal geen invoerveld stond.
   Eén oorzaak, twee klachten. Daarom hier de hele klasse neutraliseren.
   Specificiteit 0,2,0 met !important tegen de 0,1,0 met !important van
   select2 zelf: b=2 verslaat b=1. Buiten .vy-wk blijft select2 ongemoeid,
   dus de rest van de site merkt hier niets van.
   --------------------------------------------------------------- */
.vy-wk .select2-container { display:none!important; }
.vy-wk .select2-hidden-accessible {
	position:static!important; clip:auto!important;
	-webkit-clip-path:none!important; clip-path:none!important;
	overflow:visible!important; white-space:normal!important;
	width:100%!important; max-width:100%!important; height:auto!important;
}
.vy-wk select.country_select, .vy-wk select.state_select { display:block!important; }
/* Staat de winkel maar één land toe, dan rendert woocommerce_form_field()
   helemaal geen keuzelijst maar <strong>Nederland</strong> plus een
   verborgen input met dezelfde veldnaam; het land komt dan dus nog steeds
   mee bij het afrekenen en de validatie kan niet stil falen. Zonder deze
   regel is dat een losse vetgedrukte term zonder maat onder het label.
   0,2,1. Nieuwe selector: .vy-wk-velden bevat verder geen <strong> binnen
   een invoerwikkel, dus dit overschrijft niets. */
.vy-wk-velden .woocommerce-input-wrapper > strong {
	display:block; padding:10px 12px; border:1px solid var(--vy-lijn); border-radius:9px;
	background:var(--vy-was); font-size:14px!important; font-weight:500!important;
	line-height:1.4!important; color:var(--vy-ink)!important;
}
.vy-wk-anderadres { display:flex; align-items:center; gap:9px; margin-bottom:14px; font-size:13.5px;
	font-weight:600; cursor:pointer; }
.vy-wk-anderadres input { margin:0; accent-color:var(--vy-ink); }
.vy-wk .woocommerce-shipping-fields__field-wrapper { margin-top:4px; }

/* ---------------------------------------------------------------
   Account aanmaken tijdens het afrekenen.

   Specificiteit per regel nagelopen tegen wat er al staat. De
   linkreset .vy-wk a (0,1,1 mét !important) speelt hier geen rol: dit
   blok bevat bewust geen enkele <a>. De knopregels blijven ook
   ongemoeid (.vy-wk .vy-wk-knop 0,2,0 en .vy-pop a.vy-wk-knop 0,2,1):
   er staat geen knop in dit blok en geen van de selectors hieronder
   matcht er een. Alle klassen zijn nieuw en komen nergens anders in
   dit blad voor. De énige regel die iets van onszelf overschrijft is
   .vy-wk-account__velden; daar staat de afweging bij.
   --------------------------------------------------------------- */

/* 0,2,0. Nieuwe klasse, overschrijft niets van onszelf. Het !important
   is er tegen thema en Elementor, die input[type=checkbox] (0,0,2) een
   eigen maat, rand en achtergrond geven. appearance:none maakt van de
   input zélf het vakje: geen display:none, dus de toetsenbordfocus en
   de spatiebalk blijven gewoon werken. */
.vy-wk .vy-wk-account__aan {
	-webkit-appearance:none!important; appearance:none!important;
	float:left; width:19px!important; height:19px!important; min-height:0!important;
	margin:1px 11px 0 0!important; padding:0!important;
	border:1.5px solid var(--vy-lijn)!important; border-radius:6px!important;
	background-color:#fff!important; box-shadow:none!important; cursor:pointer;
}
/* 0,3,0 en wint dus van de regel hierboven, ongeacht de volgorde. */
.vy-wk .vy-wk-account__aan:checked {
	background-color:var(--vy-ink)!important; border-color:var(--vy-ink)!important;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6l4.4 4.4L19 7.4'/%3E%3C/svg%3E")!important;
	background-repeat:no-repeat!important; background-position:center!important;
	background-size:13px 13px!important;
}
/* 0,3,0. Zichtbare focus. De harde outline:0!important uit de
   knoppenreset geldt alleen voor <button> en raakt dit niet, en
   .vy-wk-velden input:focus (0,2,1, outline:none!important) matcht niet:
   dit vinkje staat buiten .vy-wk-velden. */
.vy-wk .vy-wk-account__aan:focus-visible {
	outline:2px solid var(--vy-accent)!important; outline-offset:2px!important;
}
/* 0,2,0. overflow:hidden maakt er een eigen blok van, zodat een lange
   regel naast het vakje doorloopt in plaats van eronder. Maat expliciet:
   een <label> zonder font-size pakt anders de themamaat. */
.vy-wk .vy-wk-account__label {
	display:block; overflow:hidden; cursor:pointer; margin:0!important;
	font-size:13.5px!important; font-weight:600!important; line-height:1.4!important;
	color:var(--vy-ink)!important;
}
/* Allebei 0,2,0 met !important tegen .vy-wk p (0,1,1, ook !important),
   die margin en padding op 0 zet: b=2 tegen b=1, dus deze winnen. Ze
   overschrijven verder niets van onszelf. */
.vy-wk .vy-wk-account__vast {
	clear:both; margin:0!important; font-size:13.5px!important; font-weight:600!important;
	line-height:1.4!important; color:var(--vy-ink)!important;
}
.vy-wk .vy-wk-account__uitleg {
	clear:both; margin:6px 0 0!important; font-size:12.5px!important;
	line-height:1.45!important; color:var(--vy-zacht)!important;
}
/* LET OP, dit is de enige regel hier die iets van onszelf overschrijft.
   Het veldenblok draagt óók .vy-wk-velden (0,1,0, display:grid) voor de
   veldopmaak; deze regel (0,2,0) zet dat bewust uit zolang het vinkje
   uit staat. De twee regels eronder zetten de grid weer terug, op 0,4,0
   en 0,3,0, dus de mitigatie zit er meteen bij. Alleen display wordt
   overschreven: kolommen, gap en de mobiele variant van .vy-wk-velden
   blijven staan. Het !important is er voor een oude WooCommerce die
   div.create-account met slideToggle() een inline display meegeeft; dan
   blijft onze stand leidend, open én dicht. */
.vy-wk .vy-wk-account__velden { display:none!important; clear:both; margin-top:13px; }
/* 0,4,0. Zonder JavaScript, dus ook goed als WP Rocket het script nog
   vasthoudt. Werkt alleen omdat de input een broer is van dit blok en
   niet in het label zit. */
.vy-wk .vy-wk-account__aan:checked ~ .vy-wk-account__velden { display:grid!important; }
/* 0,3,0. Voor het geval gast afrekenen uit staat: dan is er geen vinkje
   en horen de velden altijd open te staan. */
.vy-wk .vy-wk-account__velden.is-open { display:grid!important; }

.vy-wk-reviewtabel { width:100%; border:0!important; margin:0!important; background:none!important; }
.vy-wk-reviewtabel td, .vy-wk-reviewtabel tr { border:0!important; padding:0!important; background:none!important; }
.vy-wk-reviewtabel thead { display:none; }

/* Verzendnotitie bij de bezorgopties. Bewust GEEN kaderlijn en accentrand
   zoals de keuzeopties: het is toelichting, geen aanklikbare keuze, en
   met dezelfde vormgeving werd het voor een optie aangezien. */
.vy-wk-verzendnotitie { display:flex; align-items:center; gap:8px; padding:0 2px; margin:0 0 8px; }
.vy-wk-verzendnotitie svg { width:16px; height:16px; flex:0 0 16px; color:var(--vy-zacht); }
.vy-wk-verzendnotitie__tekst { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; line-height:1.3; }
.vy-wk-verzendnotitie__tekst strong { font-size:11.5px; font-weight:600; color:var(--vy-zacht); }
.vy-wk-verzendnotitie__tekst small { font-size:11.5px; color:var(--vy-zacht); }

/* Meldingen van de andere snippets (sitekorting, afhalen) binnen onze
   kaders trekken, zodat ze niet als losse blokken uitsteken. */
.vy-wk .vy-korting-notitie {
	display:block!important; background:var(--vy-was)!important; border:1px solid var(--vy-lijn)!important;
	border-left:3px solid var(--vy-accent)!important; border-radius:10px!important;
	padding:11px 14px!important; margin:0 0 16px!important; font-size:13px!important;
	line-height:1.45!important; color:var(--vy-ink)!important;
}
.vy-wk .vy-afhaal-melding { margin:0 0 16px!important; box-shadow:none!important; border-radius:12px!important; }

/* WooCommerce' eigen betaalblok, in onze vorm gegoten. */
.vy-wk .woocommerce-checkout-payment { margin-top:18px!important; padding-top:18px; border-top:1px solid var(--vy-lijn);
	background:none!important; border-radius:0!important; }
.vy-wk .wc_payment_methods { margin:0 0 16px!important; padding:0!important; list-style:none!important; }
/* De hele rij is het aanraakvlak, niet alleen de tekst.
   Het label stond op display:inline-flex en was dus zo hoog als zijn
   inhoud: max( 13.5px x 1.3, logo 22px ) = 22px. De verticale padding zat
   op de <li> eromheen, dus tikken in die 11px selecteerde niets. Dezelfde
   oplossing als .vy-wk-optie hierboven: de padding hoort op het label.
   WooCommerce zet de radio als BROER voor het label, niet erin, dus de
   <li> wordt een flexrij: [radio][label vult de rest][payment_box eronder].
   De rijhoogte blijft gelijk (11 + 22 + 11 = 44), alleen is de rij nu
   helemaal aanraakbaar.
   Specificiteit: alle vier de regels hieronder bestonden al met exact deze
   selectors (0,2,1 / 0,2,2 / 0,3,1); ze zijn ter plaatse aangepast in
   plaats van dat er een tweede regel bij komt, dus er valt niets te
   overschrijven. De vijfde regel is nieuw. */
.vy-wk .wc_payment_methods > li { display:flex; flex-wrap:wrap; align-items:center;
	border:1px solid var(--vy-lijn)!important; border-radius:10px; padding:0 13px;
	margin:0 0 7px!important; background:#fff!important; list-style:none!important; }
.vy-wk .wc_payment_methods > li:hover { border-color:var(--vy-ink)!important; }
.vy-wk .wc_payment_methods > li > label { font-size:13.5px!important; font-weight:600!important;
	color:var(--vy-ink)!important; cursor:pointer; display:flex!important; align-items:center; gap:9px;
	flex:1 1 auto; min-width:0; min-height:44px; padding:11px 0!important; margin:0!important; }
.vy-wk .wc_payment_methods > li > input[type=radio] { flex:0 0 auto; margin:0 6px 0 0!important; accent-color:var(--vy-ink); }
/* Alles wat geen radio of label is (de .payment_box van de gateway, en de
   losse blokken die sommige gateways ertussen zetten) op een eigen regel.
   Zonder dit zou zo'n blok naast het label komen te staan nu de <li> een
   flexrij is. De margin-bottom vervangt de 11px die zo'n blok eerst van de
   padding van de <li> kreeg; die staat nu op het label.
   Specificiteit 0,2,2 door de twee :not()-argumenten, en dat is precies
   waarom het !important hier mag: .vy-wk .payment_box (0,2,0) zet
   margin:9px 0 0!important, en zonder een hogere specificiteit zou die
   marge blijven staan. De marge bovenaan blijft van die regel. */
.vy-wk .wc_payment_methods > li > *:not(input):not(label) { flex:1 0 100%; margin-bottom:11px!important; }
.vy-wk .wc_payment_methods label img { max-height:22px; width:auto; vertical-align:middle; margin-left:4px; }
.vy-wk .payment_box { font-size:12.5px!important; color:var(--vy-zacht)!important; margin:9px 0 0!important;
	background:var(--vy-was)!important; border-radius:8px!important; padding:10px 12px!important; border:0!important; }
.vy-wk .payment_box:before { display:none!important; }
.vy-wk .payment_box p { margin:0!important; }
.vy-wk .payment_box select, .vy-wk .payment_box input[type=text] {
	width:100%!important; border:1px solid var(--vy-lijn)!important; border-radius:8px!important;
	padding:9px 11px!important; font-size:13.5px!important; font-family:inherit!important;
	background:#fff!important; margin-top:7px!important; height:auto!important; box-shadow:none!important;
}
.vy-wk .form-row.place-order { margin:0!important; padding:0!important; }
.vy-wk .woocommerce-terms-and-conditions-wrapper { margin-bottom:14px; }
.vy-wk .woocommerce-privacy-policy-text, .vy-wk .woocommerce-terms-and-conditions-wrapper p {
	font-family:inherit!important; font-size:12px!important; color:var(--vy-zacht)!important; line-height:1.5!important; margin:0 0 8px!important;
}
.vy-wk .woocommerce-privacy-policy-text a { color:var(--vy-accent)!important; text-decoration:underline!important; }
.vy-wk #place_order {
	width:100%!important; display:block!important; background:var(--vy-ink)!important; color:#fff!important;
	border:1px solid var(--vy-ink)!important; border-radius:10px!important; padding:14px 22px!important;
	font-size:15px!important; font-weight:600!important; font-family:inherit!important; line-height:1.3!important;
	margin:0!important; height:auto!important; box-shadow:none!important; text-shadow:none!important; cursor:pointer;
}
.vy-wk #place_order:hover { background:#2c3238!important; border-color:#2c3238!important; }
.vy-wk .blockUI.blockOverlay { background:#fff!important; opacity:.6!important; }
.vy-wk-checkout .woocommerce-invalid input, .vy-wk-checkout .woocommerce-invalid select { border-color:var(--vy-stop)!important; }

/* =====================================================================
   Typografie-vangnet
   ---------------------------------------------------------------------
   Zet een regel wel kleur, marge of layout maar geen font-size, dan pakt
   dat element de maat van het thema, en die verschilt per pagina-template.
   Dat ging hier al drie keer mis: de lege popover, de <a> in de
   productnaam en de lege winkelwagen. Hieronder de rest.
   Bewust NIET gebruikt: een generieke .vy-wk p of .vy-wk small met
   !important. Die zijn 0,1,1 en winnen daarmee van eigen klassen als
   .vy-wk-gratis__tekst (0,1,0) — precies de fout die 1.7.1 maakte.
   ===================================================================== */

/* Het besteloverzicht op de afrekenpagina is een table.shop_table.
   WooCommerce' eigen .woocommerce table.shop_table td is 0,2,2 en wint dus
   van .vy-wk-reviewtabel td (0,1,1); zet een thema daar een maat bij, dan
   gaat de hele rechterkolom mee. th staat erbij voor het geval WooCommerce
   zijn eigen tabel terugzet. Wij zetten nergens zelf een font op
   table/tr/td/th, dus dit overschrijft niets van onszelf. */
.vy-wk-reviewtabel, .vy-wk-reviewtabel tr,
.vy-wk-reviewtabel td, .vy-wk-reviewtabel th {
	font-family:inherit!important; font-size:inherit!important;
	font-weight:inherit!important; line-height:inherit!important;
}

/* =====================================================================
   WooCommerce' eigen meldingsmarkup, in de vorm van .vy-wk-notice
   ---------------------------------------------------------------------
   vy_winkel_meldingen() (1.7.4) leest de wachtrij uit en tekent hem in
   onze opmaak, maar dat gebeurt alleen bij het RENDEREN van de pagina.
   De validatie bij het afrekenen loopt via AJAX: checkout.js post het
   formulier naar ?wc-ajax=checkout, WooCommerce geeft de meldingen als
   HTML terug in de JSON, en submit_error() plakt die HTML er zelf in:

       $checkout_form.prepend( '<div class="woocommerce-NoticeGroup
           woocommerce-NoticeGroup-checkout">' + error_message + '</div>' )

   Dat is een prepend op form.checkout. Dat formulier is bij ons
   form.checkout.vy-wk-checkout en staat BINNEN .vy-wk, dus onze CSS komt
   erbij; dat was de eerste vraag om te beantwoorden. Hetzelfde geldt voor
   .woocommerce-NoticeGroup-updateOrderReview, die op dezelfde plek belandt,
   en voor de .woocommerce-notices-wrapper die woocommerce_output_all_notices()
   op woocommerce_before_cart en woocommerce_before_checkout_form print.
   Onze server-side renderer komt aan geen van drieën toe.

   ROUTE: puur CSS, geen JavaScript. Overwogen alternatief was de melding
   met JS omzetten naar onze eigen markup zodra hij verschijnt (meer
   controle over de opbouw), maar dat hangt dan aan een MutationObserver of
   aan het checkout_error-event, en juist op deze site is dat broos: WP
   Rocket draait delay_js, dus ons script kan er nog niet zijn op het moment
   dat de melding verschijnt, en dan ziet de bezoeker alsnog de kale versie.
   De CSS staat er altijd. Bovendien werkt CSS ongeacht in welke van de drie
   containers de HTML landt en of WooCommerce ooit een <ul> in een <div>
   verandert. De opbouw die we nodig hebben (icoon links, tekst rechts) is
   met een ::before prima te maken, dus route (a) volstaat.

   De markup is <ul class="woocommerce-error" role="alert"> met een <li>
   per fout, of een <div class="woocommerce-message">. We maken van dat
   buitenste element zelf de kaart en zetten het icoon in een ::before.
   WooCommerce en het thema zetten daar hun eigen icoon (een letter uit hun
   pictogramfont) en de rode streep bovenaan; die worden hier expliciet
   uitgezet.

   Specificiteit: alle regels hieronder zijn 0,2,0 of hoger en stonden er
   in deze vorm nog niet; de twee typografieregels die er wél stonden zijn
   hierin opgegaan, niet gedupliceerd. Ze overschrijven dus niets van
   onszelf. De linkreset .vy-wk a (0,1,1 mét !important) raakt dit blok
   niet: er staat geen regel voor een <a> bij, en de <a> die WooCommerce
   soms in een melding zet houdt gewoon onze eigen typografie.
   ===================================================================== */
.vy-wk .woocommerce-error, .vy-wk .woocommerce-message, .vy-wk .woocommerce-info {
	/* position en display mét !important: het icoon hieronder staat
	   absoluut en zou bij een themaregel die hier position:static zet naar
	   het eerstvolgende gepositioneerde blok springen. */
	position:relative!important; display:block!important; list-style:none!important;
	margin:0 0 14px!important; padding:12px 15px 12px 42px!important;
	border:1px solid var(--vy-lijn)!important; border-radius:11px!important;
	background-color:#fff!important; background-image:none!important;
	box-shadow:none!important; text-shadow:none!important;
	font-family:inherit!important; font-size:13px!important; line-height:1.45!important;
	color:var(--vy-ink)!important; overflow-wrap:anywhere;
}
/* Het pictogram van WooCommerce en het thema weg, en ons eigen icoon
   ervoor in de plaats. Zelfde tekening als in vy_winkel_meldingen(), hier
   als data-URI omdat CSS geen inline SVG kan invoegen; die techniek staat
   verderop ook al voor het vinkje bij "account aanmaken". De kleur zit in
   de URI gebakken (stroke=%23...), want currentColor werkt niet in een
   data-URI. */
.vy-wk .woocommerce-error:before, .vy-wk .woocommerce-message:before, .vy-wk .woocommerce-info:before {
	content:""!important; position:absolute!important; top:12px!important; left:15px!important;
	display:block!important; width:17px!important; height:17px!important;
	margin:0!important; padding:0!important; border:0!important;
	background-repeat:no-repeat!important; background-position:center!important;
	background-size:17px 17px!important; background-color:transparent!important;
	font-size:0!important; line-height:0!important; animation:none!important;
}
.vy-wk .woocommerce-error {
	border-color:rgba(180,35,24,.35)!important; background-color:rgba(180,35,24,.055)!important;
}
.vy-wk .woocommerce-error:before {
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v5'/%3E%3Cpath d='M12 16.5v.01'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E")!important;
}
.vy-wk .woocommerce-message {
	border-color:rgba(21,128,61,.32)!important; background-color:rgba(21,128,61,.05)!important;
}
.vy-wk .woocommerce-message:before {
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f7a4d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12.5l2.6 2.6L16 9.7'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E")!important;
}
.vy-wk .woocommerce-info:before {
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 7.5v.01'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E")!important;
}
/* Bij <ul class="woocommerce-error"> zit de tekst in de <li>: één kaart met
   een regel per fout, net als bij een enkele melding. Het vetgedrukte
   veldlabel ("Facturering Voornaam") blijft staan; alleen de maat wordt
   gelijkgetrokken, want thema's zetten daar hun eigen font-size op. */
.vy-wk .woocommerce-error li, .vy-wk .woocommerce-message li, .vy-wk .woocommerce-info li,
.vy-wk .woocommerce-error p, .vy-wk .woocommerce-message p, .vy-wk .woocommerce-info p {
	font-size:inherit!important; line-height:inherit!important; color:inherit;
	margin:0!important; padding:0!important; list-style:none!important;
}
.vy-wk .woocommerce-error li + li, .vy-wk .woocommerce-message li + li, .vy-wk .woocommerce-info li + li,
.vy-wk .woocommerce-error p + p, .vy-wk .woocommerce-message p + p, .vy-wk .woocommerce-info p + p {
	margin-top:5px!important;
}
.vy-wk .woocommerce-error li:before, .vy-wk .woocommerce-message li:before, .vy-wk .woocommerce-info li:before {
	display:none!important;
}
.vy-wk .woocommerce-error strong, .vy-wk .woocommerce-message strong, .vy-wk .woocommerce-info strong {
	font-size:inherit!important; line-height:inherit!important; font-weight:650!important; color:inherit;
}
/* De omhulsels waar checkout.js en WooCommerce de melding in zetten. Die
   mogen zelf geen kader of ruimte toevoegen; de kaart zit op de melding.
   De lege wrapper die woocommerce_output_all_notices() altijd print (ook
   zonder meldingen, want vy_winkel_meldingen() heeft de wachtrij dan al
   geleegd) zou anders stille ruimte kosten. */
.vy-wk .woocommerce-NoticeGroup, .vy-wk .woocommerce-notices-wrapper {
	margin:0!important; padding:0!important; border:0!important;
	background:none!important; box-shadow:none!important;
}
.vy-wk .woocommerce-notices-wrapper:empty { display:none!important; }

/* woocommerce_form_field() zet elk veld in <p class="form-row">. Die <p>
   had geen maat, en het label eronder heeft wel een font-size maar geen
   line-height en erfde die dus van diezelfde <p>. */
.vy-wk-velden .form-row { font-size:inherit!important; line-height:1.55!important; }
.vy-wk-velden label { line-height:1.35!important; }
.vy-wk-velden .required { font-size:inherit!important; }
.vy-wk-velden .woocommerce-input-wrapper { font-size:inherit!important; line-height:inherit!important; }
.vy-wk-velden .description { font-size:12.5px!important; line-height:1.45!important; }
/* input, select en textarea erven van zichzelf geen font. Maat, familie en
   line-height stonden al vast, deze twee nog niet. 0,1,1 tegen de
   bestaande veldregel op 0,2,1, en die zet font-weight niet. */
.vy-wk-velden input, .vy-wk-velden select, .vy-wk-velden textarea,
.vy-wk-coupon__rij input {
	font-weight:400!important; letter-spacing:normal!important;
}

/* .vy-wk-optie is een <label> zonder eigen maat, dus een themaregel op
   label matcht daar direct. De strong en small erin hebben hun eigen
   font-size (13px en 11.5px) en veranderen dus niet. */
.vy-wk .vy-wk-optie { font-size:13px; line-height:1.4; }

/* Elk bedrag in de totalen staat in een <dd>. LET OP: deze regel is 0,1,1
   met !important en zou .vy-wk-totaal--eind dd (0,1,1, zonder !important)
   overschrijven. Die zetten we daarom meteen terug op 0,2,1. Dezelfde fout
   als in 1.7.1, nu vooraf afgevangen. */
.vy-wk-totaal dt, .vy-wk-totaal dd { font-size:inherit!important; }
.vy-wk .vy-wk-totaal--eind dd { font-size:18px!important; }

/* De regels onder de productnaam komen uit het filter
   woocommerce_get_item_data: HTML van WooCommerce of van een andere
   plugin. De <p> stond al vast, li en span nog niet. De font-weight blijft
   van .vy-wk-regel__meta span. */
.vy-wk-regel__meta li, .vy-wk-regel__meta span {
	font-size:inherit!important; line-height:inherit!important;
}

/* Gateways zetten eigen tekst en soms een tweede <label> binnen
   .payment_box. Dat viel buiten .vy-wk .wc_payment_methods > li > label,
   want dat matcht alleen het directe kind. font-weight bewust ongemoeid,
   anders verdwijnt de <strong> uit hun eigen tekst. */
.vy-wk .payment_box label, .vy-wk .payment_box p,
.vy-wk .payment_box li, .vy-wk .payment_box span {
	font-family:inherit!important; font-size:inherit!important; line-height:1.45!important;
}

@media (max-width:900px) {
	/* Het subtotaal past niet naast een mobiel menu; alleen het icoon met
	   de badge blijft over.
	   BUG 5: deze regel stond hier al, maar als .vy-pop__som (0,1,0) en
	   verloor daarmee van .vy-pop .vy-pop__som (0,2,0, display met
	   !important) uit het basisblok. Gemeten op 361px was de computed
	   display dan ook gewoon flex. Nu 0,2,0, gelijk aan die regel maar
	   later in het blad, en daar is het !important vervallen: deze wint.
	   Dat scheelt het scherm meteen de breedte van het bedrag plus de gap
	   van 11px uit .vy-pop__knopbinnen - zie BUG 6 hieronder. */
	.vy-pop .vy-pop__som { display:none; }
	/* "Verder winkelen" was ~17px hoog en dus geen bruikbaar tap-target.
	   Specificiteit 0,2,1, gelijk aan de basisregel maar later in het blad,
	   dus die wint hier. inline-flex zodat min-height ook echt telt. */
	.vy-wk a.vy-wk-verder { display:inline-flex; align-items:center; min-height:44px; margin-top:10px; }
	.vy-wk-grid { grid-template-columns:1fr; gap:20px; }
	.vy-wk-rechts { position:static; }
	.vy-wk-velden { grid-template-columns:1fr; }
	.vy-wk-h1 { font-size:22px!important; }
	.vy-wk-regel__beeld { flex-basis:66px; width:66px; }
	/* .vy-wk stond op padding:8px 0 72px, ook op mobiel: nul links en
	   rechts, dus de kaarten plakten tegen de schermrand. Zelfde maten als
	   vy-mijn-account. 0,1,0, gelijk aan de basisregel maar later in het
	   blad, dus deze wint; de max-width en de margin blijven staan omdat we
	   alleen padding zetten. */
	.vy-wk { padding:14px 16px 56px; }
	/* De melding is op een telefoon vaak het eerste dat een bezoeker ziet
	   als hij iets vergeten is. Iets krapper, en het icoon mee naar links.
	   Beide regels 0,2,0 respectievelijk 0,2,0 met een pseudo-element,
	   gelijk aan de basisregels hierboven en later in het blad. */
	.vy-wk .woocommerce-error, .vy-wk .woocommerce-message, .vy-wk .woocommerce-info {
		padding:11px 13px 11px 38px!important; margin-bottom:12px!important;
	}
	.vy-wk .woocommerce-error:before, .vy-wk .woocommerce-message:before, .vy-wk .woocommerce-info:before {
		top:11px!important; left:13px!important;
	}

	/* ---------------------------------------------------------------
	   iOS Safari zoomt automatisch in zodra een veld met minder dan 16px
	   focus krijgt, en zoomt daarna NIET terug. Op de afrekenpagina is dat
	   funest. Alles waar je in kunt typen gaat daarom onder 900px naar
	   16px, precies zoals vy-mijn-account dat al doet.
	   De specificiteit is per geval opgehoogd tot boven de bestaande
	   veldregel, want die staan allemaal op !important:
	   - .vy-wk-velden input[type=text] enz. is 0,2,1 met font-size:14px.
	     Onze .vy-wk .vy-wk-velden input is óók 0,2,1 en staat later, dus
	     die wint - en hij dekt meteen alle typen, ook e-mail en tel.
	   - .vy-wk-coupon__rij input is 0,1,1 met 13.5px; die van ons is 0,2,1.
	   - .vy-wk-teller__veld is 0,1,0 met 13.5px; die van ons is 0,2,0.
	   Alleen font-size wordt overschreven; rand, padding en achtergrond
	   blijven van de bestaande regels.
	   --------------------------------------------------------------- */
	.vy-wk .vy-wk-velden input, .vy-wk .vy-wk-velden select,
	.vy-wk .vy-wk-velden textarea, .vy-wk .vy-wk-velden .select2-selection,
	.vy-wk .vy-wk-coupon__rij input {
		font-size:16px!important; /* voorkomt inzoomen op iOS */
	}
	/* De velden die een gateway zelf in .payment_box zet. LET OP: de
	   bestaande regel is .vy-wk .payment_box input[type=text] en dat is
	   0,3,1 door het attribuutdeel. Een gewone .vy-wk .payment_box input
	   (0,2,1) zou daarvan verliezen, dus staat de variant mét [type] erbij:
	   die is ook 0,3,1 en staat later. De losse input/select/textarea
	   dekken de velden zonder type-attribuut, waar de bestaande regel niet
	   op matcht. */
	.vy-wk .payment_box input[type], .vy-wk .payment_box input,
	.vy-wk .payment_box select, .vy-wk .payment_box textarea {
		font-size:16px!important; /* voorkomt inzoomen op iOS */
	}

	/* ---------------------------------------------------------------
	   Aanraakvlakken van minstens 44x44.
	   LET OP bij alles wat een <button> is: de knoppenreset bovenaan zet
	   min-height:0!important op ELKE knop binnen .vy-wk en .vy-pop, en dat
	   doet hij ook voor :hover, :focus en :active. Die reset is 0,1,1, dus
	   elke regel hieronder is minstens 0,2,0 en herhaalt dezelfde
	   toestanden waar de bestaande regel dat ook doet. Zou je alleen de
	   grondvorm zetten, dan pakt de :hover-variant (0,2,1) na een tik op
	   een telefoon - waar :hover blijft plakken - alsnog de oude maat.
	   --------------------------------------------------------------- */

	/* Plus, min en het aantalveld. De bestaande regel zet width/min-width/
	   height zonder !important op 0,2,0 (en 0,3,0 voor de toestanden: een
	   pseudo-KLASSE telt in de b-kolom, niet in de c-kolom - hier stond
	   0,2,1, en dat was fout), dus dezelfde selectors later in het blad
	   winnen. De teller wordt hierdoor
	   46px hoog inclusief zijn rand; zie het blok op 480px, waar hij een
	   eigen regel krijgt zodat de productnaam niet in de knel komt. */
	.vy-wk .vy-wk-teller__knop,
	.vy-wk .vy-wk-teller__knop:hover,
	.vy-wk .vy-wk-teller__knop:focus,
	.vy-wk .vy-wk-teller__knop:active {
		width:44px; min-width:44px; height:44px; min-height:44px!important;
	}
	.vy-wk .vy-wk-teller__veld { width:48px; height:44px; font-size:16px!important; }

	/* Het kruisje in de bottom sheet is de enige manier om daar iets weg te
	   halen en was 22x22. De cirkel blijft visueel 22px - een cirkel van
	   44px zou bij aanraken een enorme vlek geven - en alleen het klikbare
	   gebied wordt opgerekt met een ::after van 44x44. Het vlak ligt over
	   het aantal en de prijs eronder, en die zijn niet aanklikbaar, dus er
	   valt niets te stelen. Een klik op de ::after heeft nog steeds de
	   knop als target, dus closest('[data-vy-verwijder]') blijft werken.
	   position staat nergens anders voor deze knop, en de ::after-selector
	   (0,2,1) bestaat nog niet: dit overschrijft dus niets. */
	.vy-wk .vy-wk-kruis, .vy-pop .vy-wk-kruis { position:relative; }
	.vy-wk .vy-wk-kruis:after, .vy-pop .vy-wk-kruis:after {
		content:""; position:absolute; top:-11px; right:-11px; bottom:-11px; left:-11px;
	}

	/* Zelfde truc voor de winkelwagenknop in de header: die is 32x32 door
	   padding:4px om een icoon van 24px. De padding groter maken zou de
	   header 12px hoger maken, dus ook hier alleen het klikbare vlak.

	   BUG 6. Twee dingen staken rechts buiten de knop uit, en dat is
	   onschuldig tot de knop tegen de schermrand staat - wat op 361px het
	   geval is:
	   - .vy-pop__teller staat op right:-9px, dus zijn rechterrand ligt
	     9px voorbij de rand van het icoon en 5px voorbij de knop (die
	     heeft 4px padding). Gemeten: knop 365px, badge 370px.
	   - dit ::after staat op right:-6px en steekt er dus 6px uit.
	   Opgelost zonder het aanraakvlak te verkleinen: de knop krijgt rechts
	   10px padding in plaats van 4px, en het ::after loopt rechts tot de
	   rand van de knop in plaats van 6px erbuiten. Het bereik blijft
	   daarmee exact gelijk (icoonrand + 10px), de badge past nu binnen de
	   knop (9 < 10), en niets steekt nog buiten .vy-pop uit. Het icoon
	   schuift 6px van de schermrand af, wat op een telefoon alleen maar
	   prettiger tikt.
	   Specificiteit, en let hier op: een pseudo-KLASSE telt in de b-kolom,
	   niet in de c-kolom. .vy-pop__knop:hover is dus 0,2,0 en niet 0,1,1,
	   precies gelijk aan .vy-pop .vy-pop__knop. Bij gelijke specificiteit
	   beslist de volgorde, en dit blok staat later - maar daarop wil ik
	   niet leunen voor iets dat op een telefoon blijft plakken. Daarom
	   staan alle toestanden er expliciet bij: 0,3,0, en dan wint deze
	   regel van elke variant van de knopregel (padding:4px!important),
	   ongeacht de volgorde. Alleen padding-right wordt overschreven; de
	   rest van die regel blijft staan. */
	.vy-pop .vy-pop__knop,
	.vy-pop .vy-pop__knop:hover,
	.vy-pop .vy-pop__knop:focus,
	.vy-pop .vy-pop__knop:active,
	.vy-pop .vy-pop__knop:focus-visible,
	.vy-pop .vy-pop__knop:focus-within { position:relative; padding-right:10px!important; }
	.vy-pop .vy-pop__knop:after {
		content:""; position:absolute; top:-6px; right:0; bottom:-6px; left:-6px;
	}

	/* "Verwijderen" onder een winkelwagenregel stond op display:inline en
	   was daardoor 12-14px hoog. Nu een blok van 44px hoog met de tekst
	   verticaal in het midden; de marge van 8px eronder vervalt, want die
	   ruimte zit nu in de knop zelf. Alle drie de toestanden herhaald,
	   want de bestaande regel zet display:inline!important óók voor
	   :hover en :focus. Die varianten zijn 0,3,0 en niet 0,2,1: een
	   pseudo-KLASSE telt in de b-kolom. Hier stond het verkeerd. */
	.vy-wk .vy-wk-weg, .vy-wk .vy-wk-weg:hover, .vy-wk .vy-wk-weg:focus {
		display:inline-flex!important; align-items:center!important;
		min-height:44px!important; margin-top:0!important; padding:0 2px!important;
	}

	/* Het kruisje achter een toegepaste kortingscode was ongeveer 11x15.
	   Het wordt 44x44, maar met een negatieve verticale marge van 11px:
	   een inline-flex telt met zijn margebox mee voor de regelhoogte, dus
	   de regel in de totalen blijft even hoog als eerst terwijl het
	   aanraakvlak wel 44px is. De inhoud staat links in dat vlak
	   (justify-content:flex-start) en de padding-left van 4px blijft staan,
	   zodat het kruisje op exact dezelfde plek blijft staan als eerst: het
	   extra vlak groeit naar rechts, de lege ruimte in, en niet over de
	   code ernaast. 0,2,0 met !important tegen de knoppenreset (0,1,1,
	   min-height:0!important); de bestaande .vy-wk-coupon-weg is 0,1,0 en
	   zet van deze eigenschappen alleen padding, die hier gelijk blijft. */
	.vy-wk .vy-wk-coupon-weg, .vy-wk .vy-wk-coupon-weg:hover, .vy-wk .vy-wk-coupon-weg:focus {
		display:inline-flex!important; align-items:center!important; justify-content:flex-start!important;
		min-width:44px!important; min-height:44px!important;
		margin:-11px 0!important; padding:0 0 0 4px!important;
	}

	/* Het vinkje "Bezorgen op een ander adres" is een <label>, dus de
	   knoppenreset raakt hem niet. 0,2,0 tegen de bestaande 0,1,0; alleen
	   min-height en padding komen erbij, de rest blijft staan. */
	.vy-wk .vy-wk-anderadres { min-height:44px; padding:2px 0; }

	/* Bottom sheet. z-index hoger dan de zwevende WhatsApp- en
	   telefoonknoppen en de taalkiezer, anders ligt het paneel eronder en
	   is het onleesbaar.
	   max-height in dvh in plaats van vh. vh is op iOS de viewport ZONDER
	   adresbalk, dus 86vh kan hoger uitpakken dan wat je werkelijk ziet en
	   dan valt de onderkant van het paneel - met de knop Afrekenen erin -
	   achter de browserbalk. dvh is de dynamische viewport en klopt wel.
	   De vh-regel blijft eronder staan als terugval voor browsers die dvh
	   niet kennen; die negeren de tweede regel gewoon.
	   overflow-y blijft auto: in de normale situatie scrollt het paneel
	   nooit omdat de regellijst hieronder krimpt, maar op een heel lage
	   viewport (liggende telefoon) is scrollen beter dan afkappen. */
	.vy-pop__paneel { position:fixed!important; top:auto!important; bottom:0!important; left:0!important; right:0!important;
		width:100%!important; max-width:none!important; z-index:2147483000!important;
		border-radius:18px 18px 0 0; max-height:86vh; max-height:86dvh; overflow-y:auto; overscroll-behavior:contain;
		display:flex; flex-direction:column;
		padding:20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
		box-shadow:0 -12px 40px rgba(15,23,42,.22); }
	.vy-pop__paneel:before { display:none; }

	/* ---------------------------------------------------------------
	   PUNT 1, mobiel. De bottom sheet schuift van onderen in en uit in
	   plaats van te vervagen; hij staat al op bottom:0, dus translateY(100%)
	   zet hem precies onder de vouw. De dimlaag doet het vervagen.
	   Specificiteit 0,2,0, gelijk aan de basisregel in het desktopblok maar
	   later in het blad, dus deze wint. Overschreven worden: transform (van
	   -6px naar 100%), transition (alleen transform, en langer) en opacity
	   (terug naar 1 - op mobiel schuift het paneel, het vervaagt niet, want
	   een vervagend paneel over een dimlaag ziet er vuil uit).
	   will-change:transform houdt de sheet op een eigen laag zolang hij in
	   beeld is; buiten beeld staat hij op display:none en kost dat niets.

	   DUUR EN CURVE HERZIEN IN 1.7.14, na een meting op de live site.
	   Er stond .28s met cubic-bezier(.32,.72,0,1). Die curve heeft een
	   uitgaand controlepunt op x=0 en remt daardoor extreem lang af: het
	   grootste deel van de weg is snel afgelegd, maar de laatste pixels
	   duren zo lang dat het paneel trager aanvoelt dan het is. Nu .2s met
	   easeOutQuad, die eerder tot rust komt.
	   Sluiten (de basisregel) mag korter en versnellend: .16s met een
	   ease-in-curve. Kort sluiten voelt kordaat, kort openen voelt gehaast -
	   vandaar het verschil. De vangnettimer in het script is daarop
	   afgestemd; die bepaalt hoe lang een paneel blijft staan als
	   transitionend niet vuurt, en dat is live waargenomen. */
	.vy-pop .vy-pop__paneel {
		opacity:1; transform:translateY(100%); will-change:transform;
		transition:transform .16s cubic-bezier(.4,0,1,1);
	}
	.vy-pop .vy-pop__paneel.is-in {
		transform:translateY(0);
		transition:transform .2s cubic-bezier(.25,.46,.45,.94);
	}

	/* ---------------------------------------------------------------
	   PUNT 2, DE BRON. Hier stond geen display, en daardoor bleef
	   .vy-pop__scherm { display:none } uit het basisblok (0,1,0) staan: een
	   mediaquery telt niet mee voor specificiteit, en een regel die de
	   eigenschap niet noemt overschrijft niets. De dimlaag is dus nooit
	   zichtbaar geweest en kon nooit een klik vangen - dat is de gemelde
	   bug "buiten de winkelwagen klikken sluit hem niet".
	   display:block staat hier op 0,1,0, gelijk aan de basisregel maar later
	   in het blad, dus deze wint. De regel eronder is 0,1,1 en verslaat hem
	   weer zodra het hidden-attribuut staat; die volgorde moet zo blijven.
	   cursor:pointer is geen opsmuk: WebKit op iOS stuurt een klik op een
	   element zonder klikbare rol niet door naar een gedelegeerde handler op
	   document. Met een pointer-cursor telt hij wel als klikbaar. Het script
	   hangt er daarnaast een handler rechtstreeks op; zie schermLuisteraars().
	   opacity blijft van .vy-pop .vy-pop__scherm (0,2,0) uit het desktopblok
	   komen - die is specifieker dan deze regel en wordt hier niet geraakt. */
	.vy-pop__scherm { display:block; cursor:pointer; position:fixed; inset:0; z-index:2147482999; background:rgba(15,23,42,.45); }
	.vy-pop__scherm[hidden] { display:none; }
	/* 44x44 in plaats van 32x32. top en right gaan met precies hetzelfde
	   aantal pixels omlaag als de knop groter wordt (10-6=4 en 12-6=6),
	   zodat het kruisje op exact dezelfde plek op het scherm blijft staan
	   en er visueel niets verschuift. Hij staat absoluut, dus de rest van
	   het paneel merkt er niets van. */
	.vy-pop__sluit { position:absolute; top:4px; right:6px; width:44px; height:44px; display:flex!important;
		align-items:center; justify-content:center; border:0!important; background-color:transparent!important;
		font-size:24px!important; line-height:1!important; color:var(--vy-zacht)!important; cursor:pointer;
		min-height:44px!important; z-index:1; }

	/* ---------------------------------------------------------------
	   De bottom sheet scrollde in zijn geheel, waardoor het subtotaal en
	   de knop Afrekenen onder de vouw zakten zodra er een paar producten
	   in zaten. Op desktop was dat al goed opgelost (alleen .vy-wk-regels
	   scrollt), maar de mobiele regel zette dat met max-height:none uit.
	   Nu andersom: het paneel heeft een vaste maximumhoogte en is een
	   flexkolom, en alleen de regellijst krimpt en scrollt. De voet met de
	   knop staat daarmee altijd in beeld.
	   De keten moet helemaal door: paneel > .vy-pop__binnen > het formulier
	   > de lijst. Elke schakel heeft min-height:0 nodig, anders weigert een
	   flexitem kleiner te worden dan zijn inhoud en scrollt er niets.
	   Specificiteit: .vy-pop__binnen en .vy-pop__form hadden nog geen enkele
	   regel in dit blad. De laatste regel (0,3,0) overschrijft bewust
	   .vy-pop .vy-wk-regels (0,2,0) uit het desktopblok; dat is dezelfde
	   omzetting die de oude regel max-height:none ook deed, alleen nu met
	   de flexwaarden erbij. De oude regel is vervangen, niet aangevuld.
	   --------------------------------------------------------------- */
	.vy-pop .vy-pop__binnen { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
	.vy-pop .vy-pop__form { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
	/* Alles behalve de lijst houdt zijn hoogte: de balk voor gratis
	   verzending en de voet mogen niet meekrimpen, want hun tekst krimpt
	   niet mee en zou uit zijn kader lopen. */
	.vy-pop .vy-pop__form > * { flex-shrink:0; }
	/* overscroll-behavior is nieuw in 1.7.8 en hoort bij BUG 2: de pagina
	   erachter staat vast, dus een veeg die het einde van deze lijst
	   bereikt moet daar stoppen in plaats van door te ketenen naar het
	   document. Zonder dit voelt de bottom sheet aan het einde van de
	   lijst alsof hij vastloopt. Aanvulling op deze regel (0,3,0), geen
	   overschrijving: overscroll-behavior stond nergens. */
	.vy-pop .vy-pop__form > .vy-wk-regels {
		flex:1 1 auto; min-height:0; max-height:none;
		overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
	}

	/* De pagina erachter écht vastzetten. overflow:hidden op body sluit
	   scrollen op iOS Safari niet af - de pagina erachter beweegt gewoon
	   mee - dus het moet position:fixed. Dat springt naar boven zodra het
	   aan gaat, vandaar dat het script de scrollpositie bewaart, hier als
	   negatieve top zet en bij het sluiten terugzet. left/right/width zijn
	   nodig omdat een fixed body anders naar zijn inhoudsbreedte krimpt. */
	body.vy-pop-open { position:fixed!important; left:0!important; right:0!important;
		width:100%!important; overflow:hidden!important; }
}

/* De teller is met 44x44-knoppen ongeveer 138px breed. Op een smal scherm
   blijft er dan te weinig over voor de productnaam: 375 - 32 - 44 - 2 = 297
   binnenwerk, min 66 foto, min 2x14 gap, min 138 teller = 65px. Daarom
   krijgt het rechterdeel van een winkelwagenregel onder 480px een eigen
   regel onder de foto en de tekst, met de prijs rechts uitgelijnd. Boven
   480px is er ruimte zat en verandert er niets.
   ALLEEN voor de gewone regels: in de popover en op de afrekenpagina staat
   in dat rechterdeel het aantal (en in de popover het kruisje), en dat hoort
   gewoon naast het product te blijven staan.
   Specificiteit: .vy-wk-regel:not(.is-compact) is 0,2,0 tegen 0,1,0, en
   .vy-wk-regel:not(.is-compact) .vy-wk-regel__rechts is 0,3,0 tegen de
   0,1,0 van de basisregel. Die laatste overschrijft flex-direction,
   align-items en text-align van .vy-wk-regel__rechts; dat is de bedoeling
   en het geldt alleen binnen deze mediaquery. */
@media (max-width:480px) {
	.vy-wk-regel:not(.is-compact) { flex-wrap:wrap; }
	.vy-wk-regel:not(.is-compact) .vy-wk-regel__rechts {
		flex:1 0 100%; flex-direction:row; align-items:center;
		justify-content:flex-start; gap:12px; text-align:left;
	}
	.vy-wk-regel:not(.is-compact) .vy-wk-regel__prijs { margin-left:auto; }
}

/* Zelfde smalste stap als in vy-mijn-account. 0,1,0, later dan de regel in
   het 900px-blok, dus alleen links en rechts worden overschreven; de
   padding boven en onder blijft van daar. */
@media (max-width:420px) {
	.vy-wk { padding-left:12px; padding-right:12px; }
}

/* PUNT 1. Wie beweging heeft uitgezet krijgt geen animatie, maar wel een
   volledig werkende winkelwagen. Het paneel gaat gewoon open en dicht; het
   springt alleen meteen naar zijn eindstand omdat de klasse is-in in
   dezelfde taak wordt gezet en er niets meer te interpoleren valt.
   Het script kent exact dezelfde mediaquery (beweegt() in vy_winkel_script)
   en slaat dan ook zijn wachttijd bij het sluiten over, zodat het paneel
   niet 280 ms onzichtbaar blijft hangen.
   Alleen transition wordt overschreven; de begintoestanden blijven staan.
   Bewust !important en niet op specificiteit of volgorde: dit blok moet
   winnen van élke regel hierboven, ook als er later iets tussen geschoven
   wordt. Zonder !important zou een gelijk gespecificeerde regel verderop in
   het blad de transition zo weer terugzetten. */
@media (prefers-reduced-motion: reduce) {
	.vy-pop .vy-pop__paneel, .vy-pop .vy-pop__scherm { transition:none!important; }
}

/* ===== DEEL 2: snippet 8276, afhaalmelding ===== */
.vy-afhaal-melding {
	font-family: Poppins, sans-serif;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, .1);
	border-left: 4px solid var(--e-global-color-accent, #0a3c8f);
	border-radius: 14px;
	padding: 22px 24px;
	margin: 0 0 26px;
	box-shadow: 0 6px 20px rgba(15, 23, 42, .05);
	color: #1f2937;
}
.vy-afhaal-melding__kop { display: flex; align-items: flex-start; gap: 13px; }
.vy-afhaal-melding__kop svg { width: 22px; height: 22px; flex-shrink: 0; fill: var(--e-global-color-accent, #0a3c8f); margin-top: 1px; }
.vy-afhaal-melding__kop strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; color: #0f172a; }
.vy-afhaal-melding__kop span { display: block; font-size: 14px; color: #6b7280; margin-top: 2px; }

.vy-afhaal-melding__kolommen {
	display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
	margin: 18px 0 0; padding-top: 18px; border-top: 1px solid rgba(15, 23, 42, .08);
}
.vy-afhaal-melding__locatie h4 { margin: 0; font-size: 14px; font-weight: 600; color: #0f172a; }
.vy-afhaal-melding__adres { margin: 2px 0 8px; font-size: 12.5px; color: #6b7280; }
.vy-afhaal-melding__locatie ul { margin: 0; padding: 0; list-style: none; }
.vy-afhaal-melding__locatie li {
	position: relative; padding: 3px 0 3px 16px; font-size: 13.5px; line-height: 1.45; color: #374151;
}
.vy-afhaal-melding__locatie li:before {
	content: ""; position: absolute; left: 0; top: 11px;
	width: 5px; height: 5px; border-radius: 50%; background: var(--e-global-color-accent, #0a3c8f); opacity: .45;
}
.vy-afhaal-melding__voet {
	margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(15, 23, 42, .08);
	font-size: 13.5px; color: #6b7280;
}
@media (max-width: 640px) {
	.vy-afhaal-melding { padding: 18px; border-radius: 12px; }
	.vy-afhaal-melding__kolommen { grid-template-columns: 1fr; gap: 14px; }
}
	

/* ===== DEEL 3: nieuw voor de statische site ===== */
/* KvK- en btw-nummer verschijnen pas als er een bedrijfsnaam staat (winkel.js zet is-zichtbaar). */
.vy-wk .vy-wk-velden .vy-wk-zakelijk { display:none; }
.vy-wk .vy-wk-velden .vy-wk-zakelijk.is-zichtbaar { display:flex; }
.vy-wk .vy-wk-velden .optional { color:var(--vy-zacht); font-weight:400; }
.vy-wk .screen-reader-text { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Veldmelding onder een afgekeurd veld en de melding boven de bestelknop. */
.vy-wk .vy-wk-veldfout { color:var(--vy-stop, #b42318); font-size:12.5px; line-height:1.4; }
.vy-wk .vy-wk-afrekenfout:empty { display:none; }
.vy-wk .vy-wk-afrekenfout { margin:0 0 12px; }
.vy-wk #place_order[disabled] { opacity:.6; cursor:progress; }
/* Laadtoestand: de pagina is statisch gebakken en wordt gevuld uit /api/shop/wagen/. */
.vy-wk[aria-busy="true"] { min-height:40vh; }
.vy-wk--bedankt .vy-wk-notice { margin-bottom:22px; }
/* Op de oude site gaf de Elementor-sectie om de shortcode de zijmarge en de lucht boven de kop.
   Die sectie bestaat niet meer, dus tussen 901px en de volle breedte zorgen we daar zelf voor;
   onder 900px regelt de snippet het al (DEEL 1). */
@media (min-width:901px) {
	.vy-wk { padding-top:36px; }
}
@media (min-width:901px) and (max-width:1180px) {
	.vy-wk { padding-left:24px; padding-right:24px; }
}

/* NIEUW OP VERCEL: een kale 1fr-kolom krimpt niet onder zijn inhoud. Op 360 px liep de
   winkelwagen daardoor 8 px uit beeld. minmax(0,1fr) mag wel krimpen. */
@media (max-width: 980px) {
	.vy-wk .vy-wk-grid, .vy-wk-grid { grid-template-columns: minmax(0, 1fr); }
	.vy-wk-velden { grid-template-columns: minmax(0, 1fr); }
	.vy-wk-regel__naam, .vy-wk-regel__tekst { min-width: 0; overflow-wrap: anywhere; }
}

/* Logo's naast de betaalmethode (07-10-2026), dezelfde als in de footer. Na het snippetblok, zodat dat letterlijk blijft. */
.vy-wk .wc_payment_methods > li > label { display:flex; align-items:center; flex:1 1 auto; }
.vy-wk-betaallogos { margin-left:auto; display:inline-flex; gap:6px; padding-left:10px; }
.vy-wk-betaallogos img { margin-left:0!important; border:1px solid #e5e5e0; border-radius:4px; background:#fff; padding:2px 3px; box-sizing:content-box; }