/*
 * De blokstijlen van de productpagina (deelproject 5, taak 2): productheld,
 * koopblok, module-uitgelicht en module-productdetails, op core/group.
 * inc/modules/product/blokstijlen.php hiernaast registreert ze met dit blad
 * (handle dreamglow-plugin-product-blokstijlen), zoals
 * inc/modules/winkel/blokstijlen.php dat voor 4/7 doet en
 * inc/modules/paginas/pagina.php voor 2: vaste CSS op de vaste klasse, geen
 * theme.json-partials in styles/. Anders nummert WordPress de klasse per
 * pagina (afwijkingen-4-7.md, "Blokstijlen: statische CSS").
 *
 * Geen regel voor de rollen eyebrow en lead: die staan in het blad van plan 2
 * en van plan 3, en de blokstijlen op core/post-terms en
 * woocommerce/product-summary wijzen daarheen (kruiscontrole T-2, afwijking
 * 14 van plan 5). ProductCssTest bewaakt dat.
 *
 * WordPress zet dit blad vóór de globale stijlen in de pagina. Een regel die
 * van een layoutregel moet winnen (.wp-container-… > *, één klasse), heeft
 * daarom twee klassen of meer.
 *
 * Elke maat komt uit een token: de modules uit --dg-module-*, de galerij uit
 * --dg-hoogte-galerij, de zijmarge uit --dg-zijmarge (style.css van het
 * thema), de kolom van het koopblok uit --wp--custom--kolom--koopblok en het
 * verloop uit --wp--preset--gradient--koopblok (theme.json, taak 1).
 */

/* Module uitgelicht (ontwerpsysteem §6): crème, 48, vanaf 1024 64. Op de
   productpagina de band van lead en specificaties (spec 5h). */
.wp-block-group.is-style-module-uitgelicht {
	padding-block: var(--dg-module-uitgelicht);
	background-color: var(--wp--preset--color--surface);
}

/* Module productdetails (afwijking 4 van plan 5): wit, 48, vanaf 1024 64. */
.wp-block-group.is-style-module-productdetails {
	padding-block: var(--dg-module-productdetails);
	background-color: var(--wp--preset--color--paper);
}

/*
 * Het vangnet (spec 2-3, "De valkuil: twee gelijke modules onder elkaar"):
 * de tweede van twee gelijke modules krijgt de helft van zijn bovenpadding.
 * Vier klassen: zo wint de regel van die van de module zelf (twee klassen).
 */
.wp-block-group.is-style-module-uitgelicht + .wp-block-group.is-style-module-uitgelicht {
	padding-block-start: calc(var(--dg-module-uitgelicht) / 2);
}

.wp-block-group.is-style-module-productdetails + .wp-block-group.is-style-module-productdetails {
	padding-block-start: calc(var(--dg-module-productdetails) / 2);
}

/*
 * De haarlijn (ontwerpsysteem §6, kruiscontrole D5-10): een crème module
 * direct boven de crème footer krijgt een lijn als grens; daar valt de
 * kleurwissel weg. Als laatste blok van main, en als laatste blok van de
 * pagina-inhoud (core/post-content). module-productdetails is wit en krijgt
 * geen lijn.
 */
main > .wp-block-group.is-style-module-uitgelicht:last-child,
.wp-block-post-content > .wp-block-group.is-style-module-uitgelicht:last-child {
	border-block-end: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--line);
}

/*
 * De galerij in de held (spec 5a en 5c; ruling dp5-4). Een vast vlak van
 * --dg-hoogte-galerij: 504 tot en met 1023, 680 vanaf 1024. Onder 1024 van
 * rand tot rand: de held staat op de brede kolom, binnen de zijmarge, en de
 * galerij gaat die marge aan beide kanten voorbij. De foto staat heel in het
 * vlak (scale contain op woocommerce/product-image).
 */
.wp-block-group.is-style-productheld > .wp-block-woocommerce-product-gallery {
	block-size: var(--dg-hoogte-galerij);
	margin-inline: calc(-1 * var(--dg-zijmarge));
}

/* Woo's grote foto rekent met een verhouding (1:1, ProductGallery.php); hier
   is de hoogte vast, dus vullen beeld, rij en dia het vlak. */
.wp-block-group.is-style-productheld .wc-block-product-gallery-large-image,
.wp-block-group.is-style-productheld .wc-block-product-gallery-large-image__container,
.wp-block-group.is-style-productheld .wc-block-product-gallery-large-image__wrapper {
	block-size: 100%;
}

.wp-block-group.is-style-productheld .wc-block-product-gallery-large-image__wrapper {
	aspect-ratio: auto;
}

/*
 * Het koopblok (spec 5d): wit met het verloop in zandgoud. Onder 1024 onder
 * de galerij, met de zijmarge links en rechts, 24 boven en 40 onder (5a). Het
 * blok plakt niet: de koopbalk neemt die rol over (5d, "Niet meeschuivend").
 */
.wp-block-group.is-style-koopblok {
	padding-block: var(--wp--preset--spacing--24) var(--wp--preset--spacing--40);
	padding-inline: var(--dg-zijmarge);
	background-color: var(--wp--preset--color--paper);
	background-image: var(--wp--preset--gradient--koopblok);
}

/* In de held gaat het koopblok onder 1024 van rand tot rand, zoals de
   galerij; de padding houdt de inhoud op de zijmarge. */
.wp-block-group.is-style-productheld > .wp-block-group.is-style-koopblok {
	margin-inline: calc(-1 * var(--dg-zijmarge));
}

/* De tekststapel in het koopblok (5d): eyebrow, 8, naam, 24, het
   koopformulier. De rest van het ritme zetten de taken die de elementen in
   het formulier zetten (3, 4, 6, 9 en 13). */
.wp-block-group.is-style-koopblok > .wp-block-post-title {
	margin-block-start: var(--wp--preset--spacing--8);
}

.wp-block-group.is-style-koopblok > .wp-block-post-title + * {
	margin-block-start: var(--wp--preset--spacing--24);
}

/*
 * De categorie in een eyebrow (core/post-terms, spec 5d en 5h) is een link.
 * Ze houdt de kleur van de eyebrow (ink-soft) in plaats van de linkkleur, en
 * krijgt alleen bij hover een streep. Op de klasse van het blok en de
 * taxonomie, niet op .is-style-eyebrow: die rol staat in het blad van plan 2.
 */
.wp-block-post-terms.taxonomy-product_cat a {
	color: inherit;
	text-decoration: none;
}

@media (hover: hover) {
	.wp-block-post-terms.taxonomy-product_cat a:hover {
		text-decoration: underline;
	}
}

/*
 * Vanaf 1024: de held 60/40 binnen de brede kolom, in een raster van vijf
 * (3 + 2), zonder ruimte ertussen (5a). Galerij en koopblok staan bovenaan;
 * het koopblok is minstens zo hoog als de galerij en groeit mee als het meer
 * inhoud heeft (5d, "Hoogte"). Het koopblok heeft 40 binnenruimte, en zijn
 * inhoud staat verticaal in het midden, hooguit
 * --wp--custom--kolom--koopblok breed.
 */
@media (width > 1023px) {
	.wp-block-group.is-style-productheld {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		align-items: start;
	}

	.wp-block-group.is-style-productheld > .wp-block-woocommerce-product-gallery {
		grid-column: span 3;
		margin-inline: 0;
	}

	.wp-block-group.is-style-koopblok {
		display: grid;
		grid-template-columns: minmax(0, var(--wp--custom--kolom--koopblok));
		align-content: center;
		padding: var(--wp--preset--spacing--40);
	}

	.wp-block-group.is-style-productheld > .wp-block-group.is-style-koopblok {
		box-sizing: border-box;
		grid-column: span 2;
		min-block-size: var(--dg-hoogte-galerij);
		margin-inline: 0;
	}
}

/*
 * Ritme van het koopblok, correctie K-8 (KoopblokRitmeTest, taak 9; spec 5d,
 * "Primaire knop … 24"): onder de koopknop staat in het koopblok niets meer
 * dan de 24 boven de beloften (blocks/winkelbeloften/style.css). Woo zet
 * 1.5em onder de omhulling met het formulier, en het verborgen veld van een
 * variant (.single_variation_wrap) krijgt de blockGap van het formulier
 * (is-layout-flow).
 */
.wp-block-group.is-style-koopblok .wc-block-components-notices {
	margin-block-end: 0;
}

.wp-block-group.is-style-koopblok .wp-block-add-to-cart-with-options > .single_variation_wrap {
	margin-block: 0;
}

/*
 * De strook met het kruimelpad: crème over de volle breedte, zoals de kop van
 * categorie, winkel en contentpagina's. Was wit tussen de crème header en de
 * galerij (vergelijking met de Rituals-analyse, 13-10-2026, K-30). Een
 * schaduw zo breed als de grootste container (container.xxl, 1920), aan de
 * zijkanten doorgelaten door clip-path, kleurt de marges tot de rand zonder
 * horizontale scroll; de groep zelf blijft breed (ProductSjabloonTest).
 */
.wp-block-group.dg-productkop {
	background-color: var(--wp--preset--color--surface);
	box-shadow: 0 0 0 var(--wp--custom--container--xxl) var(--wp--preset--color--surface);
	clip-path: inset(0 calc(-1 * var(--wp--custom--container--xxl)));
}