/*
 * De vaste koopbalk (spec 5-6, "5i. De vaste koopbalk").
 *
 * Vast onderaan, op elke breedte: 72 hoog (de foto, --wp--custom--miniatuur)
 * plus een bovenrand van custom.lijn.dun in line, met de schaduw van de preset
 * koopbalk en onderaan de ruimte voor de thuisbalk van een telefoon
 * (safe-area-inset-bottom). Laag 880: boven de inhoud, onder de header (900,
 * blocks/header/style.css), de cookiemelding (890, assets/css/cookies.css),
 * de lade van de mini-cart en de galerijdialoog van Woo.
 *
 * De balk staat óp de cookiemelding: zijn onderkant ligt op
 * --dg-cookiebalk-hoogte, die cookies.js zet (0 als de melding dicht is). Zo
 * ligt zijn knop nooit achter de melding (WCAG 2.4.11), en is de ruimte die de
 * pagina onderaan vrijhoudt precies de som van de twee hoogtes (hieronder).
 * Groeit de melding (het paneel "Instellen"), dan blijft zij in haar laag
 * erboven.
 *
 * Verborgen staat de balk onder zijn plek, onzichtbaar en inert (render.php en
 * view.js). In: 900 ms (custom.duur.koopbalk), uit: 300 ms
 * (custom.duur.standaard), op custom.curve; visibility schakelt pas als het
 * uitschuiven klaar is. Bij prefers-reduced-motion geen beweging.
 *
 * Twee klassen op de balk: de constrained layout van main geeft een direct
 * kind max-width en marges (.is-layout-constrained > :where(…), één klasse
 * zwaar). En in de Site Editor draagt het blok alleen
 * wp-block-dreamglow-koopbalk: daar staat het dus niet vast.
 */
.wp-block-dreamglow-koopbalk.dg-koopbalk {
	position: fixed;
	inset-inline: 0;
	inset-block-end: var(--dg-cookiebalk-hoogte, 0px);
	z-index: 880;
	box-sizing: border-box;
	max-inline-size: none;
	margin: 0;
	padding-block-end: env(safe-area-inset-bottom, 0px);
	border-block-start: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--paper);
	box-shadow: var(--wp--preset--shadow--koopbalk);
	transform: translateY(100%);
	visibility: hidden;
	transition: transform var(--wp--custom--duur--standaard) var(--wp--custom--curve--standaard), visibility 0s linear var(--wp--custom--duur--standaard);
}

/* Zonder JavaScript, of zolang view.js niet draaide, is de balk weg
   (render.php). Een display-regel van buiten mag dat niet opheffen. */
.wp-block-dreamglow-koopbalk.dg-koopbalk[hidden] {
	display: none;
}

.wp-block-dreamglow-koopbalk.dg-koopbalk.is-zichtbaar {
	transform: none;
	visibility: visible;
	transition: transform var(--wp--custom--duur--koopbalk) var(--wp--custom--curve--standaard), visibility 0s;
}

/*
 * De ruimte onderaan (spec 5i, "Toegankelijkheid"; assets/css/cookies.css
 * r. 67-82). Zolang de balk zichtbaar is, zet view.js zijn hoogte in
 * --dg-koopbalk-hoogte op html. scroll-padding laat de browser een element
 * dat de focus krijgt boven balk en melding uitkomen; padding maakt de pagina
 * zo veel langer, zodat ook de laatste footerlinks erboven kunnen. :root en
 * geen html: dan wint deze regel van die in cookies.css (html, één element
 * zwaar), welk blad ook later laadt. Dit blad laadt alleen als de balk er is.
 */
:root {
	scroll-padding-bottom: calc(var(--dg-cookiebalk-hoogte, 0px) + var(--dg-koopbalk-hoogte, 0px));
	padding-bottom: calc(var(--dg-cookiebalk-hoogte, 0px) + var(--dg-koopbalk-hoogte, 0px));
}

/* De rij: foto, tekst en knop. Onder 1024 de foto tegen de schermrand en de
   knop op de zijmarge; vanaf 1024 alles op de lijn van de container
   (--dg-gutter uit style.css van het thema, zoals de cookiemelding). */
.dg-koopbalk__binnen {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--16);
	box-sizing: border-box;
	min-block-size: var(--wp--custom--miniatuur);
	padding-inline: 0 var(--dg-zijmarge);
}

/* De foto van de gekozen variant op het productvlak: wit fotovlak (jade),
   zoals kaart D (blocks/productkaart/style.css:123-139). */
.dg-koopbalk__foto {
	display: block;
	flex: none;
	box-sizing: border-box;
	inline-size: var(--wp--custom--miniatuur);
	block-size: var(--wp--custom--miniatuur);
	overflow: hidden;
	background: var(--wp--preset--color--jade);
}

.dg-koopbalk__foto img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.dg-koopbalk__tekst {
	flex: 1 1 auto;
	min-inline-size: 0;
}

/* De naam: serif in de rol koopbalk, op één regel. Onder 1024 alleen voor
   schermlezers, visueel verborgen zoals .screen-reader-text: mobiel toont de
   balk alleen de gekozen kleur (uitrol 2, besluit eigenaar 23 oktober 2026;
   de prijs staat alleen in de knop, die onder 1024 het tasje is). Zonder
   kleur staat de naam er wel (de regel hieronder). */
.dg-koopbalk__naam {
	position: absolute;
	box-sizing: border-box;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--dg-rol-koopbalk);
	font-weight: 400;
	line-height: calc(1em + var(--wp--preset--spacing--8));
	letter-spacing: var(--wp--custom--spatie--krap);
	color: var(--wp--preset--color--kop);
}

/* De gekozen kleur (uitrol 2, in plaats van de prijsregel; besluit eigenaar
   23 oktober 2026: de prijs staat alleen in de knop). Klein, in de letter en
   de kleur van wat "incl. btw" was: body 14/24 in ink-soft, op één regel.
   Ook onder 1024 in beeld. Zonder keuze is hij leeg. */
.dg-koopbalk__keuze {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 400;
	line-height: var(--wp--custom--leading--s);
	letter-spacing: 0;
	color: var(--wp--preset--color--ink-soft);
}

/* Een lege kleurregel (een eenvoudig product, of nog geen keuze): dan stond er
   onder 1024 geen tekst in de balk. Dan staat de naam in beeld, op één regel
   (uitrol 2b). Vanaf 1024 staat hij er toch al. */
.dg-koopbalk__tekst:has(> .dg-koopbalk__keuze:empty) > .dg-koopbalk__naam {
	position: static;
	inline-size: auto;
	block-size: auto;
	clip-path: none;
	text-overflow: ellipsis;
}

/* De knoppen: de primaire knop van het thema (theme.json, elements.button:
   moss en wit, knoplabel 14/16, kapitalen, 2 px), 48 hoog, zonder
   .wp-element-button. De tekstknop is minstens 193 breed (min-inline-size, de
   vloer van spec 5i; "In winkelwagen" met 2 × 24 padding is 193,8 gemeten op
   8092). Sinds taak 6 zegt hij wat de hoofdknop zegt, dus met de prijs
   ("In winkelwagen — €x", ongeveer 270 breed) of "Uitverkocht" (korter, dus de
   vloer houdt de breedte gelijk); hij is nooit smaller dan 193. */
.dg-koopbalk__knop,
.dg-koopbalk__icoon {
	flex: none;
	box-sizing: border-box;
	block-size: var(--wp--custom--knop--hoogte);
	margin: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--standaard);
	background: var(--wp--preset--color--moss);
	color: var(--wp--preset--color--paper);
	cursor: pointer;
	transition: background-color var(--wp--custom--duur--standaard) var(--wp--custom--curve--knoppen);
}

.dg-koopbalk__knop {
	display: none;
	box-sizing: border-box;
	/* De vloer van spec 5i: ook "Uitverkocht" (korter dan "In winkelwagen — €x") laat de knop niet smaller worden dan 193. */
	min-inline-size: 193px;
	padding: 0 var(--wp--preset--spacing--24);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 400;
	line-height: var(--wp--custom--leading--xs);
	letter-spacing: var(--wp--custom--spatie--groot);
	text-transform: uppercase;
	white-space: nowrap;
}

.dg-koopbalk__icoon {
	display: inline-grid;
	place-items: center;
	inline-size: var(--wp--custom--knop--hoogte);
	padding: 0;
}

.dg-koopbalk__icoon svg {
	inline-size: var(--wp--preset--spacing--24);
	block-size: var(--wp--preset--spacing--24);
}

/* Niets te koop voor deze keuze (aria-disabled): een stiller vlak, zoals het
   uitverkochte tasje van kaart D; een klik doet niets (view.js). */
.dg-koopbalk__knop[aria-disabled="true"],
.dg-koopbalk__icoon[aria-disabled="true"] {
	background: var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink-soft);
	cursor: not-allowed;
}

@media (hover: hover) {
	.dg-koopbalk__knop:not([aria-disabled="true"]):hover,
	.dg-koopbalk__icoon:not([aria-disabled="true"]):hover {
		background: var(--wp--preset--color--knop-hover);
	}
}

/* Vanaf 1024: op de lijn van de container, de naam zichtbaar, de tekstknop in
   plaats van de icoonknop. */
@media (width > 1023px) {
	.dg-koopbalk__binnen {
		padding-inline: var(--dg-gutter);
	}

	.dg-koopbalk__naam {
		position: static;
		inline-size: auto;
		block-size: auto;
		clip-path: none;
		text-overflow: ellipsis;
	}

	.dg-koopbalk__knop {
		display: block;
	}

	.dg-koopbalk__icoon {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-dreamglow-koopbalk.dg-koopbalk,
	.wp-block-dreamglow-koopbalk.dg-koopbalk.is-zichtbaar,
	.dg-koopbalk__knop,
	.dg-koopbalk__icoon {
		transition: none;
	}
}