/* Productpagina van vanyildtegels.nl: letterlijk de stijl uit snippet 8408 (vy-productpagina 2.2.2).
   Niets hierin herschrijven; de klant wil deze pagina houden zoals hij is. Alleen het blok
   helemaal onderaan ("NIEUW OP VERCEL") is toegevoegd bij de verhuizing. */
.vy-pp {
	--vy-pp-ink:#15171a;
	--vy-pp-zacht:#6b7280;
	--vy-pp-mid:#3f4650;
	--vy-pp-lijn:#e7e7e3;
	--vy-pp-was:#fafaf8;
	--vy-pp-navy:#213276;
	--vy-pp-navy-diep:#1a2860;
	--vy-pp-ok:#1f7a4d;
	--vy-pp-stop:#b42318;
	/* Bovenrand voor de meelopende galerij. Dit is alleen de terugval voor
	   het geval JavaScript niet draait; meetKleefrand() in het script
	   overschrijft hem met de echte hoogte van de plakkende koptekst.
	   Te ruim is hier beter dan te krap: te ruim kost wat lege ruimte, te
	   krap schuift de bovenkant van de foto onder de header. */
	--vy-pp-kleefrand:210px;
	font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	font-size:15px; line-height:1.55; color:var(--vy-pp-ink);
	/* 1320 met 20 opvulling links en rechts geeft precies dezelfde 1280
	   inhoud op een breed scherm als hiervoor, maar houdt op elk smaller
	   scherm een marge over. Zonder die opvulling raakten titel, prijs en
	   rekenhulp op een telefoon allebei de schermranden: de Elementor-
	   sectie die dat vroeger opving is bij de omzetting weggehaald. */
	box-sizing:border-box;
	max-width:1320px; margin:0 auto; padding:0 20px;
	-webkit-font-smoothing:antialiased;
}
.vy-pp *, .vy-pp *::before, .vy-pp *::after { box-sizing:border-box; }
/* De lightbox, het afhaalvenster en de mobiele balk verhuizen bij het
   opstarten naar het einde van de body en houden de klasse vy-pp voor hun
   variabelen en de knopreset. Ze mogen daar niet de max-width en de
   automarges van de pagina meenemen: een vast gepositioneerde laag zou dan
   op een breed scherm maar 1280 pixels breed zijn en het scherm niet meer
   afdekken. 0,2,0. */
.vy-pp.vy-pp__licht, .vy-pp.vy-pp__venster, .vy-pp.vy-pp__balk { max-width:none; margin:0; padding:0; }

/* Reset: Elementor en het thema kleuren elke knop mee, in alle toestanden. */
.vy-pp button, .vy-pp button:hover, .vy-pp button:focus, .vy-pp button:active,
.vy-pp button:focus-visible, .vy-pp button:focus-within, .vy-pp 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;
	border:0; border-radius:0; padding:0; margin:0; color:inherit; font-size:inherit;
	line-height:inherit; cursor:pointer; -webkit-appearance:none; appearance:none;
}
.vy-pp a, .vy-pp a:hover, .vy-pp a:focus, .vy-pp a:visited {
	color:inherit; text-decoration:none; font-size:inherit; box-shadow:none;
}
.vy-pp p { margin:0 0 12px; color:inherit; font-size:inherit; line-height:inherit; }
.vy-pp p:last-child { margin-bottom:0; }
.vy-pp h1, .vy-pp h2, .vy-pp h3 { margin:0; font-family:inherit; color:inherit; letter-spacing:-.01em; }
.vy-pp ul, .vy-pp dl, .vy-pp dd { margin:0; padding:0; list-style:none; }
.vy-pp img { max-width:100%; height:auto; display:block; }
.vy-pp input { font-family:inherit; color:var(--vy-pp-ink); }
.vy-pp .woocommerce-Price-amount, .vy-pp .woocommerce-Price-amount bdi {
	font:inherit; color:inherit; letter-spacing:inherit; white-space:nowrap;
}
.vy-pp__verborgen {
	position:absolute!important; width:1px; height:1px; overflow:hidden;
	clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.vy-pp-meldingen { box-sizing:border-box; margin:0 auto 22px; max-width:1320px; padding:0 20px; }

/* ---------- kruimelpad ---------- */
.vy-pp .vy-pp__kruimels {
	font-size:12.5px; color:var(--vy-pp-zacht); margin:0 0 26px;
	display:flex; flex-wrap:wrap; align-items:center; gap:2px;
}
.vy-pp .vy-pp__kruimels a { color:var(--vy-pp-zacht); }
.vy-pp .vy-pp__kruimels a:hover { color:var(--vy-pp-ink); }
.vy-pp .vy-pp__kruimelstreep { color:var(--vy-pp-lijn); padding:0 7px; }

/* ---------- hoofdraster ---------- */
.vy-pp__hoofd { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:60px; align-items:start; }

/* ---------- galerij ---------- */
.vy-pp__galerij { position:sticky; top:var(--vy-pp-kleefrand); }
.vy-pp__podium {
	position:relative; aspect-ratio:4/3; border-radius:20px; overflow:hidden;
	background:var(--vy-pp-was); border:1px solid var(--vy-pp-lijn);
}
.vy-pp .vy-pp__vergroot { display:block; width:100%; height:100%; cursor:zoom-in; }
.vy-pp__foto { width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.vy-pp .vy-pp__vergroot:hover .vy-pp__foto { transform:scale(1.035); }
.vy-pp__loep {
	position:absolute; right:14px; bottom:14px; width:40px; height:40px; border-radius:50%;
	background:rgba(255,255,255,.94); color:var(--vy-pp-ink);
	display:flex; align-items:center; justify-content:center;
	box-shadow:0 4px 14px rgba(15,23,42,.14); transition:opacity .2s ease;
}
.vy-pp__loep svg { width:19px; height:19px; }

.vy-pp__strip { display:flex; gap:10px; margin-top:12px; overflow-x:auto; padding:2px 2px 4px; scrollbar-width:thin; }
.vy-pp .vy-pp__mini {
	flex:0 0 88px; height:88px; border-radius:12px; overflow:hidden;
	border:1px solid var(--vy-pp-lijn); background:var(--vy-pp-was);
	transition:border-color .18s ease, box-shadow .18s ease;
}
.vy-pp__mini img { width:100%; height:100%; object-fit:cover; }
.vy-pp .vy-pp__mini:hover { border-color:#c9c9c2; }
.vy-pp .vy-pp__mini.is-actief { border-color:var(--vy-pp-navy); box-shadow:0 0 0 3px rgba(33,50,118,.12); }

/* ---------- kop van het paneel ---------- */
.vy-pp__cats { font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--vy-pp-zacht); margin:0; }
.vy-pp .vy-pp__cats a { color:var(--vy-pp-zacht); }
.vy-pp .vy-pp__cats a:hover { color:var(--vy-pp-navy); }
.vy-pp__punt { padding:0 7px; color:#c4c4bc; }
.vy-pp .vy-pp__titel { font-size:clamp(28px,3.2vw,40px); font-weight:600; line-height:1.12; letter-spacing:-.025em; margin:12px 0 14px; }
.vy-pp__regel { display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--vy-pp-zacht); }
.vy-pp__sku strong { font-weight:600; color:var(--vy-pp-mid); }
.vy-pp__voorraad { display:inline-flex; align-items:center; gap:7px; font-weight:500; }
.vy-pp__stip { width:7px; height:7px; border-radius:50%; background:currentColor; }
.vy-pp__voorraad--in-stock { color:var(--vy-pp-ok); }
.vy-pp__voorraad--available-on-backorder { color:#8a6100; }
.vy-pp__voorraad--out-of-stock { color:var(--vy-pp-stop); }
.vy-pp__kort { margin-top:16px; font-size:14px; line-height:1.6; color:var(--vy-pp-mid); }

/* ---------- prijzen ----------
   De doosprijs en de doosinhoud stonden als kolommetje naast het grote
   bedrag; dat las als twee losse gegevens die er per ongeluk bij stonden.
   Ze vormen nu één regel eronder, met de btw-vermelding als laatste feit
   in diezelfde regel. */
.vy-pp__prijzen { margin-top:24px; }
.vy-pp__prijshoofd { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.vy-pp__prijsgetal { font-size:38px; font-weight:650; letter-spacing:-.035em; line-height:1; }
.vy-pp__prijseenheid { font-size:14px; color:var(--vy-pp-zacht); }
.vy-pp__oudeprijs { font-size:13px; color:var(--vy-pp-zacht); text-decoration:line-through; }
.vy-pp .vy-pp__prijsvoet {
	display:flex; align-items:center; flex-wrap:wrap; gap:0 9px;
	margin:9px 0 0; font-size:13px; color:var(--vy-pp-zacht);
}
.vy-pp__prijsfeit { white-space:nowrap; }
.vy-pp__prijsfeit strong { font-weight:600; color:var(--vy-pp-mid); }
.vy-pp__prijspunt { width:3px; height:3px; border-radius:50%; background:#c4c4bc; }
.vy-pp__prijsbtw { font-style:italic; color:#9ca3af; }

/* ---------- varianten ---------- */
.vy-pp__blok { margin-top:26px; }
.vy-pp__bloklabel { display:block; font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--vy-pp-mid); }
.vy-pp__swatches { display:flex; flex-wrap:wrap; gap:10px; margin-top:11px; }
.vy-pp .vy-pp__swatch {
	width:62px; height:62px; border-radius:12px; overflow:hidden;
	border:1px solid var(--vy-pp-lijn); background:var(--vy-pp-was);
	transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.vy-pp .vy-pp__swatch:hover { border-color:#c9c9c2; transform:translateY(-1px); }
.vy-pp .vy-pp__swatch.is-actief { border-color:var(--vy-pp-navy); box-shadow:0 0 0 3px rgba(33,50,118,.12); }
.vy-pp__swatch img { width:100%; height:100%; object-fit:cover; }

/* ---------- formaatkiezer ----------
   Een details/summary, dus zonder JavaScript klapt hij ook uit. De
   standaard driehoek van de browser gaat eraf; die is in geen enkele
   browser hetzelfde en past nergens bij. */
.vy-pp__kiezer { margin-top:11px; position:relative; }
.vy-pp .vy-pp__kiezerknop {
	display:flex; align-items:center; gap:12px; width:100%;
	height:56px; padding:0 16px; cursor:pointer;
	background:#fff; border:1px solid var(--vy-pp-lijn); border-radius:13px;
	list-style:none; transition:border-color .18s ease, box-shadow .18s ease;
}
.vy-pp .vy-pp__kiezerknop::-webkit-details-marker { display:none; }
.vy-pp .vy-pp__kiezerknop::marker { content:''; }
.vy-pp .vy-pp__kiezerknop:hover { border-color:#c9c9c2; }
.vy-pp .vy-pp__kiezer[open] .vy-pp__kiezerknop { border-color:var(--vy-pp-navy); box-shadow:0 0 0 3px rgba(33,50,118,.1); }
.vy-pp__kiezerwaarde { display:flex; flex-direction:column; gap:2px; min-width:0; margin-right:auto; text-align:left; }
.vy-pp__kiezermaat { font-size:15px; font-weight:600; line-height:1.25; }
.vy-pp__kiezerbij { font-size:12px; color:var(--vy-pp-zacht); line-height:1.3; }
.vy-pp__kiezertelling { font-size:11.5px; color:var(--vy-pp-zacht); white-space:nowrap; }
.vy-pp__kiezerpijl { width:18px; height:18px; flex:0 0 18px; color:var(--vy-pp-zacht); transition:transform .2s ease; }
.vy-pp__kiezer[open] .vy-pp__kiezerpijl { transform:rotate(180deg); }
.vy-pp__kiezerlijst {
	position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40;
	background:#fff; border:1px solid var(--vy-pp-lijn); border-radius:13px;
	box-shadow:0 14px 34px rgba(15,23,42,.13); overflow:hidden;
	max-height:min(340px,60vh); overflow-y:auto;
}
.vy-pp .vy-pp__kiezerregel {
	display:flex; align-items:center; justify-content:space-between; gap:14px;
	padding:12px 16px; border-bottom:1px solid var(--vy-pp-lijn);
	transition:background-color .15s ease;
}
.vy-pp .vy-pp__kiezerregel:last-child { border-bottom:0; }
.vy-pp .vy-pp__kiezerregel:hover { background:var(--vy-pp-was); }
.vy-pp .vy-pp__kiezerregel.is-actief { background:rgba(33,50,118,.05); }
.vy-pp .vy-pp__kiezerregel.is-actief .vy-pp__kiezermaat { color:var(--vy-pp-navy); }
.vy-pp .vy-pp__kiezerregel .vy-pp__kiezerbij { text-align:right; white-space:nowrap; }
.vy-pp__kiezerop { display:block; font-size:11px; color:#8a6100; }
.vy-pp__kiezerop--weg { color:var(--vy-pp-stop); }
.vy-pp .vy-pp__kiezerregel--vraag { background:var(--vy-pp-was); }
.vy-pp .vy-pp__kiezerregel--vraag .vy-pp__kiezermaat { font-size:13.5px; font-weight:500; color:var(--vy-pp-mid); }
.vy-pp .vy-pp__kiezerregel--vraag .vy-pp__kiezerbij { color:var(--vy-pp-navy); font-weight:600; }

/* ---------- rekenhulp ---------- */
.vy-pp__reken {
	margin-top:26px; background:var(--vy-pp-was); border:1px solid var(--vy-pp-lijn);
	border-radius:18px; padding:20px 20px 18px;
}
.vy-pp__stap { display:flex; align-items:center; gap:10px; margin-top:13px; }
.vy-pp .vy-pp__rond {
	flex:0 0 44px; width:44px; height:44px; border-radius:50%;
	border:1px solid var(--vy-pp-lijn); background-color:#fff!important; color:var(--vy-pp-ink);
	display:inline-flex; align-items:center; justify-content:center;
	transition:border-color .18s ease, color .18s ease;
}
.vy-pp .vy-pp__rond:hover { border-color:var(--vy-pp-navy); color:var(--vy-pp-navy); }
.vy-pp .vy-pp__rond svg { width:17px; height:17px; }
.vy-pp__veld {
	flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px;
	height:48px; padding:0 15px; background:#fff;
	border:1px solid var(--vy-pp-lijn); border-radius:13px;
	transition:border-color .18s ease, box-shadow .18s ease;
}
.vy-pp__veld:focus-within { border-color:var(--vy-pp-navy); box-shadow:0 0 0 3px rgba(33,50,118,.1); }
.vy-pp .vy-pp__veld input {
	width:100%; min-width:0; height:46px; border:0; background:transparent;
	padding:0; margin:0; font-size:16px; font-weight:600; box-shadow:none; outline:0;
}
.vy-pp__eenheid { font-size:13px; color:var(--vy-pp-zacht); white-space:nowrap; }
.vy-pp__snij { position:relative; display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:13px; font-size:13px; color:var(--vy-pp-mid); }
.vy-pp .vy-pp__snij label { margin:0; cursor:pointer; font-weight:400; }
.vy-pp .vy-pp__snijaan { width:17px; height:17px; accent-color:var(--vy-pp-navy); cursor:pointer; margin:0; }
.vy-pp .vy-pp__snijpct {
	width:58px; height:34px; text-align:center; font-size:13.5px; font-weight:600;
	border:1px solid var(--vy-pp-lijn); border-radius:9px; background:#fff; padding:0;
}
.vy-pp .vy-pp__snijpct:disabled { background:#efefeb; color:#9ca3af; cursor:not-allowed; }
.vy-pp__snijteken { color:var(--vy-pp-zacht); }

/* Informatieknopje met eigen tooltip. Hij hangt aan een span met
   position:relative en niet aan het title-attribuut: dat laatste verschijnt
   pas na een seconde, is op een telefoon onbereikbaar en niet te stijlen. */
.vy-pp__hulp { position:relative; display:inline-flex; margin-left:2px; }
.vy-pp .vy-pp__hulpknop {
	width:22px; height:22px; border-radius:50%; display:inline-flex;
	align-items:center; justify-content:center; color:var(--vy-pp-zacht);
	transition:color .18s ease;
}
/* Bewust losse regels en geen kommalijst. Kent een browser één selector uit
   zo'n lijst niet, dan gooit hij de hele regel weg; dan zou een onbekende
   :focus-visible ook de hover-kleur meenemen. Zelfde reden hieronder bij
   :focus-within, en daar hing de zichtbaarheid van de tooltip aan. */
.vy-pp .vy-pp__hulpknop:hover { color:var(--vy-pp-navy); }
.vy-pp .vy-pp__hulpknop:focus-visible { color:var(--vy-pp-navy); }
.vy-pp .vy-pp__hulpknop svg { width:16px; height:16px; }
.vy-pp__tip {
	position:absolute; left:50%; bottom:calc(100% + 9px); z-index:60;
	width:max-content; max-width:min(280px,72vw); transform:translateX(-50%);
	background:#15171a; color:#fff; border-radius:11px; padding:11px 13px;
	font-size:12px; line-height:1.5; font-weight:400; text-align:left;
	box-shadow:0 10px 26px rgba(15,23,42,.22);
	opacity:0; visibility:hidden; transition:opacity .16s ease, visibility .16s ease;
}
.vy-pp__tip::after {
	content:''; position:absolute; top:100%; left:50%; margin-left:-5px;
	border:5px solid transparent; border-top-color:#15171a;
}
.vy-pp__hulp.is-op .vy-pp__tip { opacity:1; visibility:visible; }
.vy-pp__hulp:hover .vy-pp__tip { opacity:1; visibility:visible; }
.vy-pp__hulp:focus-within .vy-pp__tip { opacity:1; visibility:visible; }
/* Op een telefoon past een ballonnetje van 280 pixels niet meer naast een
   knopje dat halverwege de regel staat: gecentreerd valt hij links buiten
   beeld, en rechts uitgelijnd ook. Daarom wisselt het aanknopingspunt naar
   de hele snijverliesregel (die is even breed als het rekenblok) en wordt
   de tooltip een balkje over de volle breedte. Het pijltje vervalt dan,
   want dat zou naar een willekeurige plek wijzen. */
@media (max-width:560px) {
	.vy-pp__hulp { position:static; }
	.vy-pp__tip { left:0; right:0; width:auto; max-width:none; transform:none; }
	.vy-pp__tip::after { display:none; }
}
.vy-pp__uitkomst {
	display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
	margin-top:16px; padding-top:15px; border-top:1px dashed var(--vy-pp-lijn);
}
.vy-pp__uitkomstlinks, .vy-pp__uitkomstrechts { display:flex; flex-direction:column; gap:2px; }
.vy-pp__uitkomstrechts { text-align:right; }
.vy-pp__dozen { font-size:17px; font-weight:650; }
.vy-pp__dozensub, .vy-pp__totaalsub { font-size:11.5px; color:var(--vy-pp-zacht); }
.vy-pp__totaal { font-size:25px; font-weight:650; letter-spacing:-.03em; color:var(--vy-pp-navy); }

/* ---------- knoppen ---------- */
.vy-pp .vy-pp-knop {
	display:inline-flex; align-items:center; justify-content:center; gap:10px;
	height:54px; padding:0 24px; border-radius:13px; border:1px solid transparent;
	font-size:14.5px; font-weight:600; line-height:1; text-align:center;
	cursor:pointer; transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.vy-pp .vy-pp-knop svg { width:19px; height:19px; flex:0 0 19px; }
/* De knopreset bovenin (.vy-pp button:hover, 0,2,1) zette bij hover radius, rand en padding op nul: de knop
   werd dan vierkant en verschoof. Deze regel (0,3,0) wint daar in elke toestand van. */
.vy-pp .vy-pp-knop:hover, .vy-pp .vy-pp-knop:focus, .vy-pp .vy-pp-knop:active, .vy-pp .vy-pp-knop:focus-visible {
	border-radius:13px; border-width:1px; border-style:solid; padding:0 24px;
}
.vy-pp .vy-pp-knop--vol,
.vy-pp a.vy-pp-knop--vol, .vy-pp a.vy-pp-knop--vol:visited {
	flex:1 1 220px; background-color:var(--vy-pp-navy)!important; border-color:var(--vy-pp-navy);
	color:#fff!important;
}
.vy-pp .vy-pp-knop--vol:hover, .vy-pp .vy-pp-knop--vol:focus,
.vy-pp a.vy-pp-knop--vol:hover, .vy-pp a.vy-pp-knop--vol:focus {
	background-color:var(--vy-pp-navy-diep)!important; border-color:var(--vy-pp-navy-diep); color:#fff!important;
}
.vy-pp .vy-pp-knop--licht,
.vy-pp a.vy-pp-knop--licht, .vy-pp a.vy-pp-knop--licht:visited {
	flex:1 1 200px; height:50px; background-color:#fff!important; border-color:var(--vy-pp-lijn);
	color:var(--vy-pp-ink)!important; font-weight:500;
}
.vy-pp .vy-pp-knop--licht:hover, .vy-pp .vy-pp-knop--licht:focus,
.vy-pp a.vy-pp-knop--licht:hover, .vy-pp a.vy-pp-knop--licht:focus {
	background-color:var(--vy-pp-was)!important; border-color:var(--vy-pp-navy); color:var(--vy-pp-navy)!important;
}
.vy-pp .vy-pp-knop--licht svg { width:17px; height:17px; flex:0 0 17px; color:var(--vy-pp-zacht); }
.vy-pp .vy-pp-knop--licht:hover svg { color:var(--vy-pp-navy); }

/* ---------- winkelwagen ---------- */
.vy-pp .vy-pp__cart { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:22px 0 0; }
.vy-pp__aantal { display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.vy-pp__veld--aantal { flex:0 0 132px; width:132px; height:54px; }
.vy-pp .vy-pp__veld--aantal input { height:52px; }
.vy-pp__acties { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.vy-pp__nietbeschikbaar {
	margin-top:22px; padding:20px; border:1px solid var(--vy-pp-lijn);
	border-radius:16px; background:var(--vy-pp-was);
}
.vy-pp__nietbeschikbaar strong { display:block; font-size:15px; margin-bottom:6px; }
.vy-pp__nietbeschikbaar p { font-size:13.5px; color:var(--vy-pp-zacht); margin-bottom:16px; }
.vy-pp__standaardcart { margin-top:22px; }

/* ---------- usp ---------- */
/* LET OP de dubbele klasse. .vy-pp ul uit de reset hierboven is 0,1,1 en
   wint van .vy-pp__usp (0,1,0); de marge en de opvulling kwamen daardoor
   nooit aan en de lijst plakte tegen de knoppen. 0,2,0 wint wel. */
.vy-pp .vy-pp__usp { display:flex; flex-direction:column; gap:11px; margin-top:38px; padding-top:26px; border-top:1px solid var(--vy-pp-lijn); }
.vy-pp__usp li { display:flex; align-items:flex-start; gap:11px; font-size:13.5px; color:var(--vy-pp-mid); }
.vy-pp__usp svg { width:16px; height:16px; flex:0 0 16px; margin-top:3px; color:var(--vy-pp-ok); }
.vy-pp .vy-pp__usp a { text-decoration:underline; text-underline-offset:3px; }
.vy-pp .vy-pp__usp a:hover { color:var(--vy-pp-navy); }
.vy-pp .vy-pp__usp .vy-pp__uspextern { width:12px; height:12px; flex:0 0 12px; margin:0 0 -1px 4px; color:currentColor; display:inline-block; vertical-align:baseline; }

/* ---------- onderkant ---------- */
.vy-pp__onder { margin-top:70px; padding-top:46px; border-top:1px solid var(--vy-pp-lijn); display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.vy-pp .vy-pp__kop { font-size:22px; font-weight:600; margin:0 0 18px; }
.vy-pp__tekst { font-size:14.5px; line-height:1.7; color:var(--vy-pp-mid); }
.vy-pp__tekst p { margin-bottom:14px; }
.vy-pp__kenmerken { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:22px; }
.vy-pp__kenmerk { display:flex; flex-direction:column; gap:4px; padding:15px 16px; border:1px solid var(--vy-pp-lijn); border-radius:14px; background:var(--vy-pp-was); }
.vy-pp__kenmerklabel { font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--vy-pp-zacht); }
.vy-pp__kenmerkwaarde { font-size:15px; font-weight:600; }
.vy-pp__specrij { display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding:12px 0; border-bottom:1px solid var(--vy-pp-lijn); font-size:14px; }
.vy-pp__specrij:first-child { border-top:1px solid var(--vy-pp-lijn); }
.vy-pp__specrij dt { color:var(--vy-pp-zacht); }
.vy-pp__specrij dd { font-weight:550; text-align:right; }

/* ---------- up-sells ---------- */
.vy-pp__upsell { margin-top:60px; padding-top:44px; border-top:1px solid var(--vy-pp-lijn); }
.vy-pp__upsellrij { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.vy-pp .vy-pp__upsellkaart { display:flex; flex-direction:column; gap:9px; }
.vy-pp__upsellbeeld {
	display:block; aspect-ratio:1/1; border-radius:14px; overflow:hidden;
	background:var(--vy-pp-was); border:1px solid var(--vy-pp-lijn);
}
.vy-pp__upsellbeeld img { width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1); }
.vy-pp .vy-pp__upsellkaart:hover .vy-pp__upsellbeeld img { transform:scale(1.04); }
.vy-pp__upselltitel { font-size:14px; font-weight:600; line-height:1.35; }
.vy-pp__upsellprijs { font-size:13px; color:var(--vy-pp-mid); }
.vy-pp__upsellprijs span { color:var(--vy-pp-zacht); }

/* ---------- venster (afhalen) ---------- */
/* Boven de kortingsbalk van de site, die op z-index 999999 staat. Anders
   zweeft die balk over het venster heen, en dat deed de oude popup ook al. */
.vy-pp__venster {
	position:fixed; inset:0; z-index:1000000; display:none;
	align-items:center; justify-content:center; padding:20px;
	background:rgba(15,23,42,.55); opacity:0; transition:opacity .26s ease;
	font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	color:var(--vy-pp-ink,#15171a);
}
.vy-pp__venster.is-op { display:flex; }
.vy-pp__venster.is-zichtbaar { opacity:1; }
.vy-pp__vensterbak {
	position:relative; width:100%; max-width:560px; max-height:90vh; overflow-y:auto;
	background:#fff; border-radius:22px; padding:36px 34px 28px;
	box-shadow:0 26px 60px rgba(0,0,0,.25);
	transform:scale(.94) translateY(10px); transition:transform .32s cubic-bezier(.16,1,.3,1);
}
.vy-pp__venster.is-zichtbaar .vy-pp__vensterbak { transform:none; }
.vy-pp__venster .vy-pp__sluit,
.vy-pp__licht .vy-pp__sluit {
	position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%;
	display:flex; align-items:center; justify-content:center; cursor:pointer;
	background-color:transparent!important; border:0; color:inherit; padding:0;
	transition:opacity .2s ease;
}
.vy-pp__venster .vy-pp__sluit:hover, .vy-pp__licht .vy-pp__sluit:hover { opacity:.55; }
.vy-pp__venster .vy-pp__sluit svg, .vy-pp__licht .vy-pp__sluit svg { width:19px; height:19px; }
/* De uitlijning staat bewust op .vy-pp .vy-pp__... (0,2,0). Het venster
   verhuist bij het opstarten naar het einde van de body en houdt daarbij
   zelf de klasse vy-pp, dus deze selector blijft kloppen. Een thema- of
   Elementor-regel op p of h2 haalt het daar niet meer van. */
.vy-pp .vy-pp__venstertitel { font-size:27px; font-weight:600; text-align:center; margin:0 0 12px; letter-spacing:-.02em; }
.vy-pp .vy-pp__venstertekst { font-size:14px; line-height:1.6; text-align:center; color:#6b7280; margin:0 auto 18px; max-width:430px; }
.vy-pp .vy-pp__venstertekst strong { color:#3f4650; font-weight:600; }
.vy-pp .vy-pp__adreskaart {
	display:flex; align-items:center; justify-content:center; gap:11px;
	margin:0 auto 18px; padding:13px 18px; width:max-content; max-width:100%;
	border:1px solid var(--vy-pp-lijn,#e7e7e3); border-radius:13px; background:var(--vy-pp-was,#fafaf8);
	text-align:left;
}
.vy-pp .vy-pp__adreskaart svg { width:20px; height:20px; flex:0 0 20px; color:var(--vy-pp-navy,#213276); }
.vy-pp__adresregels { display:flex; flex-direction:column; gap:1px; font-size:13.5px; }
.vy-pp__adresregels strong { font-weight:600; color:#15171a; }
.vy-pp__adresregels span { color:#6b7280; }
.vy-pp__kaart { border-radius:14px; overflow:hidden; line-height:0; background:#f2f2ee; }
.vy-pp__kaart iframe { width:100%; height:330px; border:0; display:block; }
.vy-pp__venster .vy-pp__route { display:flex; width:100%; margin-top:16px; height:48px; }
.vy-pp__vensteracties .vy-pp__route + .vy-pp__route { margin-top:10px; }

/* ---------- showroomlabel ---------- */
/* Het showroomlabel is een button. De knopreset .vy-pp button:hover is
   0,2,1 en zet radius, padding, lettergrootte en regelhoogte terug, dus
   alles wat de vorm bepaalt staat hieronder nog eens in de regel met
   0,3,0 voor alle toestanden. Anders wordt het label hoekig bij hover. */
.vy-pp .vy-pp__label {
	display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 12px;
	border-radius:999px; font-size:12.5px; font-weight:500; line-height:1; white-space:nowrap;
}
.vy-pp .vy-pp__label svg { width:15px; height:15px; flex:0 0 15px; }
.vy-pp .vy-pp__label--showroom,
.vy-pp .vy-pp__label--showroom:hover, .vy-pp .vy-pp__label--showroom:focus,
.vy-pp .vy-pp__label--showroom:active, .vy-pp .vy-pp__label--showroom:focus-visible {
	height:30px; padding:0 12px; border-radius:999px; font-size:12.5px; line-height:1;
	background-color:var(--vy-pp-was,#fafaf8)!important; border:1px solid var(--vy-pp-navy,#213276)!important;
	color:var(--vy-pp-navy,#213276)!important; cursor:pointer; box-shadow:none;
	transition:background-color .2s ease, color .2s ease;
}
.vy-pp .vy-pp__label--showroom:hover, .vy-pp .vy-pp__label--showroom:focus-visible {
	background-color:var(--vy-pp-navy,#213276)!important; color:#fff!important;
}
.vy-pp .vy-pp__label--showroom .vy-pp__labelpijl { width:13px; height:13px; flex:0 0 13px; margin-right:-3px; }
.vy-pp .vy-pp__label--online {
	background:var(--vy-pp-was,#fafaf8); border:1px solid var(--vy-pp-lijn,#e7e7e3); color:var(--vy-pp-zacht,#6b7280);
}

/* ---------- lightbox ---------- */
.vy-pp__licht {
	position:fixed; inset:0; z-index:1000001; display:none;
	align-items:center; justify-content:center; padding:64px 20px;
	background:rgba(10,12,16,.93); opacity:0; transition:opacity .24s ease; color:#fff;
}
.vy-pp__licht.is-op { display:flex; }
.vy-pp__licht.is-zichtbaar { opacity:1; }
.vy-pp__lichtfoto { max-width:min(1120px,94vw); max-height:84vh; width:auto; object-fit:contain; border-radius:10px; }
.vy-pp__licht .vy-pp__lichtnav {
	position:absolute; top:50%; transform:translateY(-50%)!important; width:48px; height:48px;
	border-radius:50%; display:flex; align-items:center; justify-content:center;
	background-color:rgba(255,255,255,.12)!important; color:#fff; border:0; cursor:pointer;
	transition:background-color .2s ease;
}
.vy-pp__licht .vy-pp__lichtnav:hover { background-color:rgba(255,255,255,.24)!important; }
.vy-pp__licht .vy-pp__lichtnav svg { width:22px; height:22px; }
.vy-pp__lichtvorige { left:18px; }
.vy-pp__lichtvolgende { right:18px; }

/* ---------- plakkende balk op mobiel ---------- */
.vy-pp__balk { display:none; }

/* ---------- responsief ---------- */
@media (max-width:1100px) {
	.vy-pp__hoofd { gap:44px; }
	.vy-pp__prijsgetal { font-size:34px; }
}
@media (max-width:1024px) {
	.vy-pp__hoofd { grid-template-columns:1fr; gap:36px; }
	.vy-pp__galerij { position:static; }
	.vy-pp__podium { aspect-ratio:16/10; }
	.vy-pp__onder { margin-top:56px; padding-top:38px; gap:40px; }
}
@media (max-width:900px) {
	.vy-pp__onder { grid-template-columns:1fr; }
	.vy-pp__upsellrij { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
	.vy-pp__upsell { margin-top:48px; padding-top:36px; }
	/* Plakkende koopbalk. Alleen hier: op desktop staat de knop altijd in beeld. */
	.vy-pp__balk.is-op {
		position:fixed; left:0; right:0; bottom:0; z-index:99998;
		display:flex; align-items:center; gap:14px; padding:12px 16px;
		padding-bottom:calc(12px + env(safe-area-inset-bottom));
		background:#fff; border-top:1px solid var(--vy-pp-lijn,#e7e7e3);
		box-shadow:0 -6px 24px rgba(15,23,42,.09);
		font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	}
	.vy-pp__balkprijs { display:flex; flex-direction:column; gap:1px; flex:0 0 auto; }
	.vy-pp__balkgetal { font-size:19px; font-weight:650; letter-spacing:-.02em; color:#15171a; }
	.vy-pp__balksub { font-size:11px; color:#6b7280; }
	.vy-pp__balk .vy-pp-knop { flex:1 1 auto; height:48px; padding:0 18px; }
}
@media (max-width:640px) {
	.vy-pp { font-size:14.5px; padding:0 16px; }
	.vy-pp-meldingen { padding:0 16px; }
	.vy-pp__podium { aspect-ratio:4/3; border-radius:16px; }
	.vy-pp .vy-pp__mini { flex:0 0 68px; height:68px; }
	.vy-pp .vy-pp__titel { margin:10px 0 12px; }
	.vy-pp__prijzen { gap:14px; }
	.vy-pp__prijsgetal { font-size:30px; }
	.vy-pp__reken { padding:17px 16px 15px; border-radius:16px; }
	.vy-pp .vy-pp__rond { flex:0 0 42px; width:42px; height:42px; }
	.vy-pp .vy-pp__cart { gap:10px; }
	.vy-pp__aantal { width:100%; }
	.vy-pp__veld--aantal { flex:1 1 auto; width:auto; }
	.vy-pp .vy-pp-knop { width:100%; flex:1 1 100%; }
	.vy-pp__kenmerken { grid-template-columns:1fr; }
	.vy-pp__specrij { gap:14px; font-size:13.5px; }
	.vy-pp__vensterbak { padding:30px 20px 22px; border-radius:18px; }
	.vy-pp .vy-pp__venstertitel { font-size:23px; }
	.vy-pp .vy-pp__adreskaart { width:100%; }
	.vy-pp .vy-pp__kiezerknop { height:54px; padding:0 14px; }
	.vy-pp__kiezertelling { display:none; }
	.vy-pp__kaart iframe { height:260px; }
	.vy-pp__licht { padding:70px 12px; }
	.vy-pp__licht .vy-pp__lichtnav { width:42px; height:42px; }
	.vy-pp__lichtvorige { left:8px; }
	.vy-pp__lichtvolgende { right:8px; }
}
@media (prefers-reduced-motion:reduce) {
	.vy-pp *, .vy-pp__venster, .vy-pp__licht, .vy-pp__vensterbak { transition:none!important; }
}

/* =========================================================================
 * NIEUW OP VERCEL
 * ====================================================================== */
/* De Elementor-container om de shortcode had 25 pixels marge boven het kruimelpad
   (.elementor-element-e923609, --margin-top:25px). Die container bestaat niet meer. */
#inhoud > .vy-pp { margin-top:25px; }
#inhoud > .vy-pp-meldingen { margin-top:25px; }
#inhoud > .vy-pp-meldingen + .vy-pp { margin-top:0; }

/* Melding na "In winkelwagen". Live drukte WooCommerce hier zijn eigen notice af, na een
   volledige paginaverversing; nu zet het script hem neer zonder te herladen. */
.vy-pp-melding {
	display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
	padding:14px 18px; border:1px solid #e7e7e3; border-left:3px solid #1f7a4d; border-radius:12px;
	background:#fafaf8; color:#15171a;
	font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:14px; line-height:1.5;
}
.vy-pp-melding a { color:#213276; font-weight:600; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.vy-pp-melding a:hover { color:#1a2860; }

/* De 404 binnen /product/. */
.vy-pp-weg { box-sizing:border-box; max-width:760px; margin:70px auto 90px; padding:0 20px; text-align:center;
	font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#15171a; }
.vy-pp-weg h1 { font-size:30px; line-height:1.2; font-weight:600; margin:0 0 14px; }
.vy-pp-weg p { font-size:15px; line-height:1.6; color:#3f4650; margin:0 0 26px; }
.vy-pp-weg a { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 26px;
	border-radius:999px; background:#213276; color:#fff; font-weight:600; font-size:15px; text-decoration:none; }
.vy-pp-weg a:hover { background:#1a2860; color:#fff; }

/* Wat het oude thema (Hello Elementor) en WooCommerce stilzwijgend meegaven en de nieuwe schil niet:
   nagemeten op de live pagina, 20-09-2026. De schil zet de broodtekst op gewicht 300; deze pagina stond
   op 400, met vet op 700 en de koppen van het thema (500, regelhoogte 1,2). :where() houdt de
   specificiteit op nul, zodat elke eigen regel van de pagina hierboven blijft winnen. */
.vy-pp { font-weight:400; }
:where(.vy-pp) :where(strong, b) { font-weight:700; }
:where(.vy-pp) :where(h1, h2, h3, h4, h5, h6) { font-weight:500; line-height:1.2; }
:where(.vy-pp) h1 { font-size:40px; }
:where(.vy-pp) h2 { font-size:32px; }
:where(.vy-pp) h3 { font-size:28px; }
:where(.vy-pp) h4 { font-size:24px; }
:where(.vy-pp) h5 { font-size:20px; }
:where(.vy-pp) h6 { font-size:16px; }
:where(.vy-pp) :where(input, button, select, textarea) { line-height:1.5; }
/* Het thema gaf elk label regelhoogte 1; daardoor is "Hoeveel m² heb je nodig?" 13 pixels hoog en niet 19. */
:where(.vy-pp) label { line-height:1; }
/* WooCommerce: .woocommerce div.product form.cart { margin-bottom:2em }: 30 pixels op desktop, 29 op mobiel. */
.vy-pp .vy-pp__cart { margin-bottom:2em; }
/* WooCommerce zette een clearfix op form.cart (::before en ::after, display:table). In een flex-rij zijn dat
   twee lege flex-items, en met de gap van 12 pixels staat het aantalblok daardoor 12 pixels ingesprongen
   en eindigt de knop 12 pixels voor de rand; op mobiel geeft het een extra rij-gap. Zo kent de klant het. */
.vy-pp .vy-pp__cart::before, .vy-pp .vy-pp__cart::after { content:" "; display:table; }
/* ---------- responsive-check 04-10-2026 ----------
   Op mobiel werd het paneel breder dan het scherm: de categorielinks staan zonder spatie aan elkaar
   (letterlijk uit de snippet), dus de regel kon nergens breken, en een kolom van 1fr groeit mee. */
.vy-pp__punt::after { content:"\200B"; }	/* onzichtbaar afbreekpunt (stond als teken 0x80 plus een B in het bestand) */
.vy-pp__cats { overflow-wrap:anywhere; }
@media (max-width:1024px) {
	.vy-pp__hoofd { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:767px) {
	.vy-pp .vy-pp__snijpct { font-size:16px; }	/* iOS zoomt in op velden onder 16px */
}