/**
 * De pop-up op de site, en het voorbeeld ervan in het bewerkscherm.
 *
 * De vormgeving volgt de ontwerpen die Nathan goedkeurde (25-09-2026,
 * werk/acties/mockups/: F1 verloop, F2 naast, F3 verdonkerd, F4 onderblad,
 * F5 hoek; de maten staan daar in mock.css). Standaard voor een nieuwe pop-up:
 * F1 op de computer, F4 op de telefoon.
 *
 * Alles leunt op de tokens van het thema (--accent, --radius, --fs-*,
 * --font-family, ...), met de waarde van vandaag als terugval. Zo staat hij
 * meteen in de huisstijl, en werkt hij ook zonder het thema.
 *
 * De opbouw (klassen en data-attributen) staat in werk/acties/verslag-popups.md.
 * Kort:
 *
 *   .dnpu                     het geheel, fixed, met de keuzes als data-*
 *     .dnpu-achter            het donkere vlak (alleen als hij modaal is)
 *     .dnpu-venster           het venster, role=dialog
 *       .dnpu-greep           het streepje bovenaan het onderblad
 *       .dnpu-sluit           het kruisje
 *       .dnpu-beeld           het beeld (achtergrond, opzij, of kopbeeld),
 *                             met .dnpu-waarde--beeld erop
 *       .dnpu-inhoud          boven (chip), kop, tekst, waarde, producten,
 *                             aftellen, voorwaarden, knoppen
 *       .dnpu-flyer           alleen bij het sjabloon flyer
 *
 * De kleur van het vlak staat als "r g b" in --dnpu-vlak, zodat het verloop
 * en de verdonkering dezelfde kleur met een eigen doorzichtigheid kunnen
 * gebruiken. data-inkt zegt of de letters licht of donker zijn; dat rekent het
 * script uit (bij de merkkleur op contrast). data-beeld staat er als er een
 * beeldvak is.
 *
 * Onder de 768px is het de telefoon: dan geldt data-telefoon (onderblad,
 * volledig, midden) en is hij altijd modaal. Het script gebruikt dezelfde
 * grens. Geen beweging bij prefers-reduced-motion.
 *
 * @package dn-winkel
 */

.dnpu{
	--dnpu-hoek:var(--radius,3px);
	--dnpu-letter:var(--font-family,'Space Grotesk',Arial,Helvetica,sans-serif);
	--dnpu-groen:var(--accent,#008646);
	--dnpu-groen-hover:var(--accent-hover,#00723c);
	--dnpu-groen-tekst:var(--accent-text,#fff);
	--dnpu-blauw:var(--accent-ink,#0f6187);
	--dnpu-lijn:var(--border-color,#c3ccd3);
	--dnpu-mat:var(--surface-muted,#f1f5f8);
	--dnpu-geel:255 210 0;
	--dnpu-donker:20 32 42;
	--dnpu-vlak:255 255 255;
	--dnpu-sterkte:1;
	--dnpu-w:520px;
	--dnpu-kopmaat:var(--fs-xl,28px);

	/* de letters, gezet door data-inkt hieronder */
	--dnpu-tekst:var(--text-primary,#14202a);
	--dnpu-tekst-2:var(--text-secondary,#4a5b68);
	--dnpu-tekst-3:var(--text-tertiary,#61707c);
	--dnpu-kop:var(--dnpu-tekst);

	position:fixed;
	inset:0;
	z-index:250;
	pointer-events:none;
	font-family:var(--dnpu-letter);
	font-size:var(--fs-base,15px);
	line-height:1.5;
	color:var(--dnpu-tekst);
	text-align:left;
	-webkit-font-smoothing:antialiased;
}

.dnpu *,
.dnpu *::before,
.dnpu *::after{box-sizing:border-box;}

.dnpu[hidden]{display:none;}

html.dnpu-open{overflow:hidden;}

.dnpu-i{display:inline-block; flex:none; vertical-align:middle;}

/* ---- kleur en letters ---- */

.dnpu[data-kleur="licht"]{--dnpu-vlak:255 255 255;}
.dnpu[data-kleur="donker"]{--dnpu-vlak:var(--dnpu-donker);}
.dnpu[data-kleur="actie"]{--dnpu-vlak:var(--dnpu-geel);}
.dnpu[data-kleur="merk"]{--dnpu-vlak:var(--dnpu-merk-rgb, var(--dnpu-donker));}

.dnpu[data-inkt="licht"]{
	--dnpu-tekst:#fff;
	--dnpu-tekst-2:#fff;
	--dnpu-tekst-3:rgb(255 255 255 / .78);
	--dnpu-kop:#fff;
}

.dnpu[data-inkt="donker"]:not([data-kleur="licht"]){
	--dnpu-tekst:#111;
	--dnpu-tekst-2:rgb(17 17 17 / .84);
	--dnpu-tekst-3:rgb(17 17 17 / .7);
	--dnpu-kop:#111;
}

/* Op het witte vlak de kop in het blauw, zoals de koppen op de site (F2, F4). */
.dnpu[data-kleur="licht"]{--dnpu-kop:var(--dnpu-blauw);}

/* ---- het donkere vlak ---- */

.dnpu-achter{
	position:absolute;
	inset:0;
	display:none;
	background:rgb(9 18 26 / .55);
	pointer-events:auto;
	animation:dnpu-vervaag .2s ease both;
}

.dnpu[data-modaal] .dnpu-achter{display:block;}

/* ---- het venster ---- */

.dnpu-venster{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width:var(--dnpu-w);
	max-width:calc(100vw - 32px);
	max-height:calc(100vh - 32px);
	max-height:calc(100dvh - 32px);
	overflow:auto;
	overscroll-behavior:contain;
	pointer-events:auto;
	background:rgb(var(--dnpu-vlak));
	color:var(--dnpu-tekst);
	border:1px solid var(--dnpu-lijn);
	border-radius:var(--dnpu-hoek);
	box-shadow:0 24px 60px rgba(9,18,26,.3);
	outline:none;
	animation:dnpu-in .22s ease both;
}

.dnpu:not([data-kleur="licht"]) .dnpu-venster{border-color:rgb(var(--dnpu-vlak));}

.dnpu.is-dicht{opacity:0; transition:opacity .15s ease;}

.dnpu-greep{display:none;}

/* ---- het kruisje ---- */

.dnpu-sluit{
	position:absolute;
	top:12px;
	right:12px;
	z-index:3;
	display:flex;
	align-items:center;
	justify-content:center;
	width:36px;
	height:36px;
	margin:0;
	padding:0;
	border:1px solid transparent;
	border-radius:var(--dnpu-hoek);
	background:transparent;
	color:var(--dnpu-tekst-2);
	cursor:pointer;
}

.dnpu-sluit:hover{border-color:currentColor; color:var(--dnpu-tekst);}

/* Op een beeld een eigen vlakje, anders valt het kruisje weg in de foto. */
.dnpu[data-sjabloon="verloop"][data-beeld] .dnpu-sluit,
.dnpu[data-sjabloon="verdonkerd"][data-beeld] .dnpu-sluit,
.dnpu[data-sjabloon="flyer"] .dnpu-sluit{
	background:rgb(20 32 42 / .55);
	color:#fff;
}

.dnpu[data-sjabloon="verloop"][data-beeld] .dnpu-sluit:hover,
.dnpu[data-sjabloon="verdonkerd"][data-beeld] .dnpu-sluit:hover,
.dnpu[data-sjabloon="flyer"] .dnpu-sluit:hover{background:rgb(20 32 42 / .8); color:#fff; border-color:transparent;}

.dnpu :focus-visible{outline:2px solid currentColor; outline-offset:2px;}
.dnpu .dnpu-venster:focus-visible{outline:none;}

/* ---- de inhoud ---- */

.dnpu-inhoud{
	position:relative;
	z-index:2;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	padding:40px 36px 34px;
}

.dnpu-inhoud > *{max-width:100%;}

/* de chip: "Actie · t/m 31 juli 2026" */
.dnpu-boven{
	display:inline-flex;
	align-items:center;
	gap:5px;
	margin:0;
	padding:3px 8px;
	font-size:var(--fs-xs,11px);
	font-weight:700;
	line-height:1.4;
	border-radius:var(--dnpu-hoek);
	background:var(--dnpu-groen);
	color:var(--dnpu-groen-tekst);
}

.dnpu[data-kleur="actie"] .dnpu-boven,
.dnpu[data-kleur="merk"] .dnpu-boven{background:var(--dnpu-tekst); color:rgb(var(--dnpu-vlak));}

.dnpu-kop{
	margin:10px 0;
	padding:0;
	font-family:inherit;
	font-size:var(--dnpu-kopmaat);
	font-weight:700;
	line-height:1.2;
	letter-spacing:normal;
	text-transform:none;
	color:var(--dnpu-kop);
}

.dnpu-inhoud > .dnpu-kop:first-child{margin-top:0;}

.dnpu-tekst{
	margin:0 0 10px;
	font-size:var(--fs-base,15px);
	line-height:1.55;
	color:var(--dnpu-tekst-2);
}

.dnpu-tekst strong{font-weight:700; color:var(--dnpu-tekst);}

/* de witte waardechip: "t.w.v. € 559" */
.dnpu-waarde{
	display:inline-block;
	margin:0;
	padding:4px 10px;
	font-size:var(--fs-sm,13px);
	font-weight:700;
	line-height:1.4;
	border-radius:var(--dnpu-hoek);
	background:var(--surface,#fff);
	color:var(--text-primary,#14202a);
	border:1px solid transparent;
}

.dnpu[data-kleur="licht"] .dnpu-waarde,
.dnpu-waarde--beeld{border-color:var(--dnpu-lijn);}

.dnpu-waarde--beeld{display:none;}

.dnpu-producten{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin:6px 0 4px;
	padding:0;
	list-style:none;
}

.dnpu-product{
	width:84px;
	height:84px;
	margin:0;
	padding:6px;
	background:#fff;
	border:1px solid var(--dnpu-lijn);
	border-radius:var(--dnpu-hoek);
}

.dnpu-product img{display:block; width:100%; height:100%; object-fit:contain;}

.dnpu-aftellen{
	margin:8px 0 0;
	font-size:var(--fs-sm,13px);
	color:var(--dnpu-tekst-2);
	font-variant-numeric:tabular-nums;
}

.dnpu-aftellen-tijd{font-weight:700; color:var(--dnpu-tekst);}

.dnpu-voorwaarden{
	margin:4px 0 0;
	font-size:var(--fs-xs,11px);
	line-height:1.5;
	color:var(--dnpu-tekst-3);
}

.dnpu-knoppen{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px 16px;
	margin-top:18px;
}

.dnpu-knop{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-height:44px;
	margin:0;
	padding:12px 20px;
	border:1px solid transparent;
	border-radius:var(--dnpu-hoek);
	font-family:inherit;
	font-size:var(--fs-base,15px);
	font-weight:700;
	line-height:1.2;
	text-decoration:none;
	cursor:pointer;
}

.dnpu-knop--hoofd{
	background:var(--dnpu-groen);
	border-color:var(--dnpu-groen);
	color:var(--dnpu-groen-tekst);
}

.dnpu-knop--hoofd:hover{
	background:var(--dnpu-groen-hover);
	border-color:var(--dnpu-groen-hover);
	color:var(--dnpu-groen-tekst);
}

/* Op geel of een merkkleur: de knop in de letterkleur, de tekst in het vlak. */
.dnpu[data-kleur="actie"] .dnpu-knop--hoofd,
.dnpu[data-kleur="merk"] .dnpu-knop--hoofd{
	background:var(--dnpu-tekst);
	border-color:var(--dnpu-tekst);
	color:rgb(var(--dnpu-vlak));
}

.dnpu[data-kleur="actie"] .dnpu-knop--hoofd:hover,
.dnpu[data-kleur="merk"] .dnpu-knop--hoofd:hover{opacity:.9; color:rgb(var(--dnpu-vlak));}

/* "Nee, bedankt" */
.dnpu-knop--tweede{
	padding:12px 0;
	background:none;
	border:0;
	font-size:var(--fs-sm,13px);
	color:var(--dnpu-tekst-2);
	text-decoration:underline;
	text-underline-offset:3px;
}

.dnpu-knop--tweede:hover{color:var(--dnpu-tekst);}

.dnpu-img{display:block; width:100%; height:100%; object-fit:cover;}

/* ---- de grootte ---- */

.dnpu[data-grootte="klein"]{--dnpu-w:400px; --dnpu-kopmaat:var(--fs-lg,21px);}
.dnpu[data-grootte="groot"]{--dnpu-w:680px; --dnpu-kopmaat:calc(var(--fs-xl,28px) * 1.15);}

.dnpu[data-sjabloon="verloop"],
.dnpu[data-sjabloon="verdonkerd"],
.dnpu[data-sjabloon="naast"]{--dnpu-w:760px;}
.dnpu[data-sjabloon="verloop"][data-grootte="klein"],
.dnpu[data-sjabloon="verdonkerd"][data-grootte="klein"],
.dnpu[data-sjabloon="naast"][data-grootte="klein"]{--dnpu-w:600px;}
.dnpu[data-sjabloon="verloop"][data-grootte="groot"],
.dnpu[data-sjabloon="verdonkerd"][data-grootte="groot"],
.dnpu[data-sjabloon="naast"][data-grootte="groot"]{--dnpu-w:900px;}

.dnpu[data-sjabloon="flyer"]{--dnpu-w:560px;}
.dnpu[data-sjabloon="flyer"][data-grootte="klein"]{--dnpu-w:420px;}
.dnpu[data-sjabloon="flyer"][data-grootte="groot"]{--dnpu-w:760px;}

/* ---- F1: beeld als achtergrond met verloop ---- */

.dnpu[data-sjabloon="verloop"] .dnpu-venster,
.dnpu[data-sjabloon="verdonkerd"] .dnpu-venster{
	display:flex;
	align-items:center;
	min-height:430px;
	border:0;
	overflow:hidden auto;
}

.dnpu[data-sjabloon="verloop"] .dnpu-beeld,
.dnpu[data-sjabloon="verdonkerd"] .dnpu-beeld{
	position:absolute;
	inset:0;
	z-index:0;
}

.dnpu[data-sjabloon="verloop"] .dnpu-beeld::after,
.dnpu[data-sjabloon="verdonkerd"] .dnpu-beeld::after{
	content:"";
	position:absolute;
	inset:0;
}

.dnpu[data-sjabloon="verloop"] .dnpu-img{object-position:right center;}
.dnpu[data-sjabloon="verloop"][data-richting="rechts"] .dnpu-img{object-position:left center;}
.dnpu[data-sjabloon="verloop"][data-richting="onder"] .dnpu-img{object-position:center top;}
.dnpu[data-sjabloon="verloop"][data-richting="boven"] .dnpu-img{object-position:center bottom;}

.dnpu[data-sjabloon="verloop"]{--dnpu-hoek-verloop:90deg;}
.dnpu[data-sjabloon="verloop"][data-richting="rechts"]{--dnpu-hoek-verloop:270deg;}
.dnpu[data-sjabloon="verloop"][data-richting="onder"]{--dnpu-hoek-verloop:0deg;}
.dnpu[data-sjabloon="verloop"][data-richting="boven"]{--dnpu-hoek-verloop:180deg;}

.dnpu[data-sjabloon="verloop"] .dnpu-beeld::after{
	background:linear-gradient(
		var(--dnpu-hoek-verloop),
		rgb(var(--dnpu-vlak) / calc(.97 * var(--dnpu-sterkte))) 0%,
		rgb(var(--dnpu-vlak) / calc(.9 * var(--dnpu-sterkte))) 42%,
		rgb(var(--dnpu-vlak) / calc(.35 * var(--dnpu-sterkte))) 72%,
		rgb(var(--dnpu-vlak) / 0) 100%
	);
}

.dnpu[data-sjabloon="verloop"] .dnpu-inhoud{width:58%; padding:40px;}
.dnpu[data-sjabloon="verloop"][data-richting="rechts"] .dnpu-inhoud{margin-left:auto;}
.dnpu[data-sjabloon="verloop"][data-richting="onder"] .dnpu-venster,
.dnpu[data-sjabloon="verloop"][data-richting="boven"] .dnpu-venster{min-height:480px;}
.dnpu[data-sjabloon="verloop"][data-richting="onder"] .dnpu-venster{align-items:flex-end;}
.dnpu[data-sjabloon="verloop"][data-richting="boven"] .dnpu-venster{align-items:flex-start;}
.dnpu[data-sjabloon="verloop"][data-richting="onder"] .dnpu-inhoud,
.dnpu[data-sjabloon="verloop"][data-richting="boven"] .dnpu-inhoud{width:100%;}

/* Zonder beeld is het gewoon een kleurvlak met tekst over de hele breedte. */
.dnpu[data-sjabloon="verloop"]:not([data-beeld]) .dnpu-venster,
.dnpu[data-sjabloon="verdonkerd"]:not([data-beeld]) .dnpu-venster{min-height:0;}
.dnpu[data-sjabloon="verloop"]:not([data-beeld]) .dnpu-inhoud{width:100%;}

/* ---- F3: beeld verdonkerd ---- */

.dnpu[data-sjabloon="verdonkerd"] .dnpu-beeld::after{background:rgb(var(--dnpu-vlak) / calc(.72 * var(--dnpu-sterkte)));}
.dnpu[data-sjabloon="verdonkerd"] .dnpu-venster{justify-content:center; text-align:center;}
.dnpu[data-sjabloon="verdonkerd"] .dnpu-inhoud{align-items:center; max-width:560px; margin:0 auto; padding:44px 36px;}
.dnpu[data-sjabloon="verdonkerd"] .dnpu-knoppen,
.dnpu[data-sjabloon="verdonkerd"] .dnpu-producten{justify-content:center;}

/* ---- F2: beeld naast de tekst ---- */

.dnpu[data-sjabloon="naast"][data-beeld] .dnpu-venster{
	display:grid;
	grid-template-columns:44% minmax(0,1fr);
	align-items:stretch;
}

.dnpu[data-sjabloon="naast"] .dnpu-beeld{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:14px;
	min-height:320px;
	padding:28px;
	background:var(--dnpu-mat);
	border-right:1px solid var(--dnpu-lijn);
}

.dnpu[data-sjabloon="naast"] .dnpu-beeld .dnpu-img{
	width:100%;
	max-width:260px;
	height:auto;
	aspect-ratio:1;
	object-fit:contain;
	mix-blend-mode:multiply;
}

.dnpu[data-sjabloon="naast"][data-kant="rechts"] .dnpu-beeld{order:2; border-right:0; border-left:1px solid var(--dnpu-lijn);}
.dnpu[data-sjabloon="naast"] .dnpu-inhoud{align-self:center;}
.dnpu[data-sjabloon="naast"] .dnpu-waarde--beeld{display:inline-block;}
.dnpu[data-sjabloon="naast"][data-beeld] .dnpu-waarde--tekst{display:none;}
.dnpu[data-sjabloon="naast"][data-kant="rechts"] .dnpu-sluit{right:auto; left:12px;}

.dnpu-beeld--fotos .dnpu-producten{justify-content:center; margin:0;}
.dnpu-beeld--fotos .dnpu-product{width:112px; height:112px;}
.dnpu-beeld--fotos .dnpu-product:only-child{width:220px; height:220px;}

/* ---- sjabloon: flyer ---- */

.dnpu[data-sjabloon="flyer"] .dnpu-venster{
	padding:0;
	background:transparent;
	border:0;
	overflow:visible;
}

.dnpu-flyer{display:block; line-height:0;}

.dnpu-flyer .dnpu-img{
	width:100%;
	height:auto;
	max-height:calc(100vh - 48px);
	max-height:calc(100dvh - 48px);
	object-fit:contain;
	border-radius:var(--dnpu-hoek);
}

/* ---- op de computer: balk onderaan en hoek rechtsonder ---- */

@media (min-width:768px){
	.dnpu[data-positie="balk"]{inset:auto 0 0 0;}

	.dnpu[data-positie="balk"] .dnpu-venster{
		position:relative;
		left:auto;
		top:auto;
		transform:none;
		display:flex;
		align-items:center;
		gap:24px;
		width:100%;
		max-width:none;
		min-height:0;
		max-height:50vh;
		padding:0 max(24px, calc((100vw - 1280px) / 2));
		border-width:1px 0 0;
		border-radius:0;
		box-shadow:0 -6px 24px rgba(9,18,26,.12);
		animation-name:dnpu-omhoog;
	}

	.dnpu[data-positie="balk"] .dnpu-inhoud{
		flex-direction:row;
		flex-wrap:wrap;
		align-items:center;
		gap:6px 22px;
		flex:1;
		width:auto;
		max-width:none;
		margin:0;
		padding:14px 56px 14px 0;
	}

	.dnpu[data-positie="balk"] .dnpu-kop,
	.dnpu[data-positie="balk"] .dnpu-tekst,
	.dnpu[data-positie="balk"] .dnpu-producten,
	.dnpu[data-positie="balk"] .dnpu-aftellen,
	.dnpu[data-positie="balk"] .dnpu-voorwaarden,
	.dnpu[data-positie="balk"] .dnpu-knoppen{margin:0;}

	.dnpu[data-positie="balk"] .dnpu-kop{font-size:var(--fs-md,17px);}
	.dnpu[data-positie="balk"] .dnpu-tekst{font-size:var(--fs-sm,13px);}
	.dnpu[data-positie="balk"] .dnpu-voorwaarden{flex-basis:100%;}
	.dnpu[data-positie="balk"] .dnpu-product{width:52px; height:52px; padding:4px;}
	.dnpu[data-positie="balk"] .dnpu-knoppen{margin-left:auto;}
	.dnpu[data-positie="balk"] .dnpu-sluit{top:50%; transform:translateY(-50%); right:max(12px, calc((100vw - 1280px) / 2 - 44px));}
	.dnpu[data-positie="balk"][data-sjabloon="verloop"] .dnpu-inhoud,
	.dnpu[data-positie="balk"][data-sjabloon="verdonkerd"] .dnpu-inhoud{width:auto; max-width:none; padding:14px 56px 14px 0;}
	.dnpu[data-positie="balk"][data-sjabloon="naast"] .dnpu-venster{display:flex;}
	.dnpu[data-positie="balk"][data-sjabloon="naast"] .dnpu-beeld{flex:0 0 96px; min-height:0; padding:8px; align-self:stretch; order:0; border:0;}
	.dnpu[data-positie="balk"] .dnpu-waarde--beeld{display:none;}
	.dnpu[data-positie="balk"][data-sjabloon="naast"] .dnpu-waarde--tekst{display:inline-block;}
	.dnpu[data-positie="balk"][data-sjabloon="flyer"] .dnpu-venster{justify-content:center; background:rgb(var(--dnpu-vlak)); padding:8px 60px;}
	.dnpu[data-positie="balk"][data-sjabloon="flyer"] .dnpu-flyer .dnpu-img{max-height:140px; width:auto;}

	/* F5: klein in de hoek, zonder donker vlak */
	.dnpu[data-positie="hoek"]{inset:auto 24px 24px auto; width:360px; max-width:calc(100vw - 48px);}
	.dnpu[data-positie="hoek"][data-grootte="klein"]{width:300px;}
	.dnpu[data-positie="hoek"][data-grootte="groot"]{width:440px;}

	.dnpu[data-positie="hoek"] .dnpu-venster{
		position:relative;
		left:auto;
		top:auto;
		transform:none;
		display:flex;
		align-items:flex-start;
		gap:14px;
		width:100%;
		max-width:none;
		min-height:0;
		max-height:calc(100vh - 48px);
		max-height:calc(100dvh - 48px);
		padding:16px 44px 16px 16px;
		border:1px solid var(--dnpu-lijn);
		animation-name:dnpu-omhoog;
	}

	.dnpu[data-positie="hoek"] .dnpu-beeld{
		position:relative;
		inset:auto;
		flex:0 0 72px;
		width:72px;
		height:72px;
		min-height:0;
		padding:0;
		overflow:hidden;
		background:var(--dnpu-mat);
		border:1px solid var(--dnpu-lijn);
		border-radius:var(--dnpu-hoek);
	}

	.dnpu[data-positie="hoek"] .dnpu-beeld::after{display:none;}
	.dnpu[data-positie="hoek"] .dnpu-beeld .dnpu-img{width:100%; height:100%; max-width:none; object-fit:contain; mix-blend-mode:multiply;}
	.dnpu[data-positie="hoek"] .dnpu-beeld--fotos .dnpu-producten{display:block;}
	.dnpu[data-positie="hoek"] .dnpu-beeld--fotos .dnpu-product{width:70px; height:70px; border:0;}
	.dnpu[data-positie="hoek"] .dnpu-beeld--fotos .dnpu-product ~ .dnpu-product{display:none;}
	.dnpu[data-positie="hoek"] .dnpu-waarde--beeld{display:none;}
	.dnpu[data-positie="hoek"] .dnpu-waarde--tekst{display:inline-block; margin-top:4px;}
	.dnpu[data-positie="hoek"] .dnpu-inhoud{flex:1; width:auto; max-width:none; margin:0; padding:0; align-items:flex-start; text-align:left;}
	.dnpu[data-positie="hoek"] .dnpu-boven{display:none;}
	.dnpu[data-positie="hoek"] .dnpu-kop{margin:0; font-size:var(--fs-base,15px); line-height:1.35; color:var(--dnpu-tekst);}
	.dnpu[data-positie="hoek"] .dnpu-tekst{margin:3px 0 0; font-size:var(--fs-sm,13px); line-height:1.45;}
	.dnpu[data-positie="hoek"] .dnpu-producten{display:none;}
	.dnpu[data-positie="hoek"] .dnpu-knoppen{margin-top:8px; justify-content:flex-start;}
	.dnpu[data-positie="hoek"] .dnpu-knop--hoofd{min-height:0; padding:0; background:none; border:0; font-size:var(--fs-sm,13px); color:var(--dnpu-blauw); gap:4px;}
	.dnpu[data-positie="hoek"]:not([data-kleur="licht"]) .dnpu-knop--hoofd{color:var(--dnpu-tekst);}
	.dnpu[data-positie="hoek"] .dnpu-knop--hoofd:hover{text-decoration:underline; background:none;}
	.dnpu[data-positie="hoek"] button.dnpu-knop--tweede{display:none;}
	.dnpu[data-positie="hoek"] .dnpu-sluit{top:6px; right:6px; left:auto; width:32px; height:32px; background:none; color:var(--dnpu-tekst-2);}
	.dnpu[data-positie="hoek"][data-sjabloon="flyer"] .dnpu-venster{display:block; padding:0;}
	.dnpu[data-positie="hoek"][data-sjabloon="flyer"] .dnpu-sluit{background:rgb(20 32 42 / .55); color:#fff;}
}

/* ---- F4: op de telefoon ---- */

@media (max-width:767px){
	.dnpu-venster{width:calc(100vw - 32px);}
	.dnpu,
	.dnpu[data-grootte]{--dnpu-kopmaat:var(--fs-lg,21px);}
	.dnpu-inhoud{padding:20px 16px 20px; width:auto;}
	.dnpu-kop{margin-top:8px;}
	.dnpu-tekst{font-size:var(--fs-sm,13px);}
	.dnpu-knoppen{flex-direction:column; align-items:stretch; gap:12px; width:100%; margin-top:18px;}
	.dnpu-knop--hoofd{width:100%;}
	.dnpu-knop--tweede{align-self:center; padding:4px 0 8px;}
	.dnpu-product{width:72px; height:72px;}

	/* onderblad: vanaf de onderkant, over de hele breedte */
	.dnpu[data-telefoon="onderblad"] .dnpu-venster{
		left:0;
		right:0;
		top:auto;
		bottom:0;
		transform:none;
		width:100%;
		max-width:none;
		max-height:88vh;
		max-height:88dvh;
		border-width:1px 0 0;
		border-radius:14px 14px 0 0;
		animation-name:dnpu-blad;
		animation-duration:.26s;
	}

	.dnpu[data-telefoon="onderblad"] .dnpu-greep{
		display:block;
		position:relative;
		z-index:3;
		width:40px;
		height:4px;
		margin:8px auto 0;
		border-radius:2px;
		background:var(--dnpu-lijn);
	}

	/* volledig scherm */
	.dnpu[data-telefoon="volledig"] .dnpu-venster{
		inset:0;
		transform:none;
		width:100%;
		max-width:none;
		height:100%;
		max-height:none;
		border:0;
		border-radius:0;
		animation-name:dnpu-vervaag;
	}

	/* Verloop en naast: het beeld wordt een kopbeeld van 150px bovenaan, met
	   de waardechip erop, en de tekst eronder op een wit vlak (F4). */
	.dnpu[data-sjabloon="verloop"][data-beeld] .dnpu-venster,
	.dnpu[data-sjabloon="naast"][data-beeld] .dnpu-venster{display:block; min-height:0;}

	.dnpu[data-sjabloon="verloop"][data-beeld] .dnpu-beeld,
	.dnpu[data-sjabloon="naast"][data-beeld] .dnpu-beeld{
		position:relative;
		inset:auto;
		display:block;
		height:150px;
		min-height:0;
		margin:10px 16px 0;
		padding:0;
		overflow:hidden;
		border:0;
		border-radius:var(--dnpu-hoek);
		background:var(--dnpu-mat);
	}

	.dnpu[data-sjabloon="verloop"][data-beeld] .dnpu-beeld::after{display:none;}
	.dnpu[data-sjabloon="verloop"][data-beeld] .dnpu-img{object-position:70% center;}
	.dnpu[data-sjabloon="naast"][data-beeld] .dnpu-beeld .dnpu-img{max-width:none; height:100%; aspect-ratio:auto; padding:8px;}
	.dnpu[data-sjabloon="naast"] .dnpu-beeld--fotos{display:flex; flex-direction:row; height:auto; padding:12px;}
	.dnpu-beeld--fotos .dnpu-product,
	.dnpu-beeld--fotos .dnpu-product:only-child{width:96px; height:96px;}

	.dnpu[data-sjabloon="verloop"][data-beeld] .dnpu-waarde--beeld,
	.dnpu[data-sjabloon="naast"][data-beeld] .dnpu-waarde--beeld{
		display:inline-block;
		position:absolute;
		left:10px;
		bottom:10px;
		z-index:1;
	}

	.dnpu[data-sjabloon="naast"] .dnpu-beeld--fotos .dnpu-waarde--beeld{position:static; align-self:center;}

	.dnpu[data-sjabloon="verloop"][data-beeld] .dnpu-waarde--tekst,
	.dnpu[data-sjabloon="naast"][data-beeld] .dnpu-waarde--tekst{display:none;}

	.dnpu[data-sjabloon="verloop"] .dnpu-inhoud,
	.dnpu[data-sjabloon="verloop"][data-richting] .dnpu-inhoud{width:auto; margin:0; padding:16px 16px 20px;}

	.dnpu[data-sjabloon="verloop"][data-beeld] .dnpu-sluit,
	.dnpu[data-sjabloon="naast"][data-beeld] .dnpu-sluit{top:26px; right:24px; left:auto; background:rgb(20 32 42 / .55); color:#fff;}

	/* Het donkere verloop van de computer is op de telefoon een wit blad. */
	.dnpu[data-sjabloon="verloop"][data-beeld][data-kleur="donker"]{
		--dnpu-vlak:255 255 255;
		--dnpu-tekst:var(--text-primary,#14202a);
		--dnpu-tekst-2:var(--text-secondary,#4a5b68);
		--dnpu-tekst-3:var(--text-tertiary,#61707c);
		--dnpu-kop:var(--dnpu-blauw);
	}

	.dnpu[data-sjabloon="verloop"][data-beeld][data-kleur="donker"] .dnpu-venster{border-color:var(--dnpu-lijn);}

	.dnpu[data-sjabloon="verdonkerd"][data-beeld] .dnpu-venster{min-height:380px;}
	.dnpu[data-telefoon="volledig"][data-sjabloon="verdonkerd"] .dnpu-venster{display:flex;}

	.dnpu[data-sjabloon="flyer"][data-telefoon="midden"] .dnpu-venster{width:calc(100vw - 32px);}
	.dnpu[data-sjabloon="flyer"][data-telefoon="onderblad"] .dnpu-venster{width:100%; background:var(--surface,#fff); border-color:var(--dnpu-lijn); padding:10px 16px 16px;}
	.dnpu[data-sjabloon="flyer"][data-telefoon="onderblad"] .dnpu-greep{margin-bottom:10px;}
	.dnpu[data-sjabloon="flyer"][data-telefoon="onderblad"] .dnpu-sluit{top:34px; right:24px;}
	.dnpu[data-sjabloon="flyer"][data-telefoon="volledig"] .dnpu-venster{display:flex; align-items:center; justify-content:center; background:rgb(9 18 26 / .92); padding:16px;}
	.dnpu[data-sjabloon="flyer"] .dnpu-flyer .dnpu-img{max-height:80vh; max-height:80dvh;}
}

/* ---- beweging ---- */

@keyframes dnpu-in{
	from{opacity:0; transform:translate(-50%,-46%);}
	to{opacity:1; transform:translate(-50%,-50%);}
}

@keyframes dnpu-omhoog{
	from{opacity:0; transform:translateY(16px);}
	to{opacity:1; transform:none;}
}

@keyframes dnpu-blad{
	from{transform:translateY(100%);}
	to{transform:none;}
}

@keyframes dnpu-vervaag{
	from{opacity:0;}
	to{opacity:1;}
}

.dnpu--stil .dnpu-venster,
.dnpu--stil .dnpu-achter{animation:none;}

@media (prefers-reduced-motion:reduce){
	.dnpu-venster,
	.dnpu-achter{animation:none !important;}
	.dnpu.is-dicht{transition:none;}
}

@media print{
	.dnpu{display:none !important;}
}

/* ------------------------------------------------------------------
   De knop rechtsonder (trigger "knop"), en het vinkje voor de
   nieuwsbrief in de bladerenpopup van het thema.
   ------------------------------------------------------------------ */

.dnpu-hoek{
	position:fixed;
	right:max(16px,env(safe-area-inset-right,0px));
	bottom:max(16px,env(safe-area-inset-bottom,0px));
	z-index:240;
	display:inline-flex;
	align-items:center;
	gap:8px;
	min-height:44px;
	padding:0 14px 0 10px;
	border:0;
	border-radius:var(--radius,3px);
	background-color:var(--accent,#008646);
	color:var(--accent-text,#fff);
	font:inherit;
	font-family:var(--font-family,'Space Grotesk',Arial,Helvetica,sans-serif);
	font-weight:700;
	cursor:pointer;
	box-shadow:0 6px 18px rgb(20 32 42 / .18);
}
.dnpu-hoek:not(:has(span)){padding:0 10px;}
.dnpu-hoek .dnpu-i,
.dnpu-hoek-blad{width:26px;height:26px;flex:none;}
.dnpu-hoek-blad{color:#e2a73b;animation:dnpu-hoek-blad 2.4s ease-in-out infinite alternate;}
@keyframes dnpu-hoek-blad{from{transform:rotate(-14deg);}to{transform:rotate(14deg);}}
@media (hover:hover){.dnpu-hoek:hover{background-color:var(--accent-hover,#00723c);}}
.dnpu-hoek:focus-visible{outline:2px solid var(--accent-ink,#0f6187);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){.dnpu-hoek-blad{animation:none;}}

.dnpu-blaas-nb{
	display:flex;
	flex:1 1 100%;
	align-items:center;
	justify-content:center;
	gap:6px;
	font-size:var(--fs-sm,14px);
	color:var(--text-secondary,#4a5b68);
	cursor:pointer;
}
.hfb .dnpu-blaas-nb input,
.dnpu-blaas-nb input{flex:none;width:18px;height:18px;min-width:0;min-height:0;margin:0;padding:0;accent-color:var(--accent,#008646);}