/*
 * Toon meer (spec 4): gecentreerd onder het grid, met 48 erboven. De balk is
 * 2 px (custom.lijn.dik) en even breed als de knop: het blok is een grid van
 * één kolom, zo breed als zijn breedste kind, en de balk rekt mee. De knop is
 * outline, 48 hoog, met de padding van bediening.
 *
 * De 48 telt vanaf de onderkant van de laatste kaart. De rijafstand van het
 * grid is een marge onder elk item, en het grid trekt hem onder de laatste
 * rij terug met een negatieve marge (blocks/productkaart/style.css). Die
 * valt samen met de marge hieronder, dus de laatste kaart en het blok staan
 * precies 48 uit elkaar, op elke breedte.
 *
 * De marge staat op twee klassen. De collectie is een flow-layout, en
 * :root :where(.is-layout-flow) > * uit de globale stijlen zet de
 * blokafstand (16) als margin-block-start. Die regel heeft dezelfde
 * specificiteit als één klasse, en staat later in de cascade: met alleen
 * .wp-block-dreamglow-toon-meer won hij (gemeten: 16 in plaats van 48).
 */
.wp-block-dreamglow-toon-meer {
	display: grid;
	justify-content: center;
	gap: var(--wp--preset--spacing--16);
}

.wp-block-dreamglow-toon-meer.dg-toon-meer {
	margin-block-start: var(--wp--preset--spacing--48);
}

.wp-block-dreamglow-toon-meer[hidden] {
	display: none;
}

.dg-toon-meer__balk {
	display: block;
	block-size: var(--wp--custom--lijn--dik);
	overflow: hidden;
	background: var(--wp--preset--color--line);
}

.dg-toon-meer__vulling {
	display: block;
	block-size: 100%;
	background: var(--wp--preset--color--ink);
}

.dg-toon-meer__teller {
	margin: 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--s);
	line-height: var(--wp--custom--leading--s);
	color: var(--wp--preset--color--ink-soft);
}

.dg-toon-meer__knop {
	min-block-size: var(--wp--preset--spacing--48);
	padding-block: 0;
	padding-inline: var(--wp--custom--ruimte--bediening);
	border: var(--wp--custom--rand--knop) solid var(--wp--preset--color--kop);
	border-radius: var(--wp--custom--radius--standaard);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--kop);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--s);
	line-height: var(--wp--custom--leading--xs);
	letter-spacing: var(--wp--custom--spatie--groot);
	text-transform: uppercase;
	cursor: pointer;
}

.dg-toon-meer__knop[aria-busy="true"] {
	cursor: progress;
}

@media (hover: hover) {
	.dg-toon-meer__knop:hover {
		background: var(--wp--preset--color--lichtgrijs);
	}
}

/* Met JavaScript staat "Toon meer" er, en is de paginering overbodig.
   Zonder JavaScript blijft het blok hidden en de paginering zichtbaar.

   Met scripting wisselen ze al bij de eerste paint, niet pas bij de
   hydratatie. Wie terugkeert met de onderkant van het grid in beeld
   (herladen, "terug" zonder bfcache), zag eerst de paginering, en daarna
   sprong alles eronder 90 tot 114 px. Tot de hydratatie doet de knop nog
   niets, zoals de sorteerlijst. De regel met :not([hidden]) blijft voor een
   browser die (scripting) niet kent: daar wisselen ze bij de hydratatie,
   via de binding op hidden.

   Alleen op de site: beide regels vragen de klasse dg-toon-meer, die alleen
   render.php geeft. In de Site Editor is "Toon meer" een benoemd vlak
   zonder die klasse en zonder hidden (editor.js), en daar blijft de
   paginering te zien en te kiezen. */
.wp-block-woocommerce-product-collection:has(.wp-block-dreamglow-toon-meer.dg-toon-meer:not([hidden])) .dg-winkel-paginering {
	display: none;
}

@media (scripting: enabled) {
	.wp-block-dreamglow-toon-meer.dg-toon-meer[hidden] {
		display: grid;
	}

	.wp-block-woocommerce-product-collection:has(.wp-block-dreamglow-toon-meer.dg-toon-meer) .dg-winkel-paginering {
		display: none;
	}
}