/*
 * Productdetails op de productpagina (spec 5-6, 5h "Productdetails"; plan 5,
 * taak 8): woocommerce/product-details met core/accordion (kopniveau 2), in
 * de witte band module-productdetails van taak 2. beschrijving.php laadt dit
 * blad met wp_enqueue_block_style( 'woocommerce/product-details' ), dus alleen
 * waar dat blok rendert.
 *
 * De kop van een item is een h2, en ziet eruit als een tertiaire knop: het
 * knoplabel (ontwerpsysteem §1: Jost 14/16, kapitalen, 2 px, gewicht 400) in
 * kop-zwart, zonder vlak en zonder rand, 48 hoog (16 + 16 + 16), met rechts
 * de chevron die beschrijving.php in de plaats van het plusje van core zet.
 * Core draait zijn plusje bij een open item 45 graden
 * (wp-includes/blocks/accordion-item/style.css); hier draait alleen de
 * chevron, een halve slag, in 300 ms op de ene curve (spec 1b, §9: "Chevrons
 * die 180° draaien"). Een hoek is geen token: ProductCssTest staat precies
 * deze ene toe, rotate: 180deg (plan 5, taak 8). Een lijn van 1 px in ink
 * schuift onder het label in bij hover en bij toetsenbordfocus (spec 1b, §8);
 * de focusring van het thema blijft. Core onderstreept het label bij hover;
 * hier doet de lijn dat werk.
 *
 * Open staat de beschrijving vanaf 1024 in kolommen van minstens de
 * tekstkolom (custom.kolom.tekst, 416) met 64 ertussen: in de brede
 * container (1320) zijn dat er twee. Vanaf 2560 is de container 1920 breed en
 * worden het er vier: twee kolommen van 928 gaven regels van ±130 tekens
 * (ontwerpsysteem §2, regel 8: ±79). Een deel met een kop
 * (dg-beschrijving__deel) breekt niet over twee kolommen, en begint zonder
 * marge, zodat beide kolommen bovenaan gelijk beginnen. De tekst is Jost 16/24
 * in ink (spec 5h).
 *
 * Twee klassen of meer in elke regel: WordPress zet de layoutregels
 * (:root :where(.is-layout-flow) > *, specificiteit 0,1,0) ná dit blad in de
 * pagina, en core zet zijn eigen accordeonregels met tot vier klassen.
 */
.wp-block-woocommerce-product-details .wp-block-accordion > .wp-block-accordion-item {
	margin-block: 0;
	/* Core opent het item met grid-template-rows in 0,3 s ease-out; hier op
	   de ene curve (spec 1b, "Beweging"; 13-10-2026, N-19 en C-50). */
	transition-duration: var(--wp--custom--duur--standaard);
	transition-timing-function: var(--wp--custom--curve);
}

.wp-block-woocommerce-product-details .wp-block-accordion-heading {
	margin: 0;
	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);
	font-weight: 400;
	text-transform: uppercase;
	color: var(--wp--preset--color--kop);
}

.wp-block-woocommerce-product-details .wp-block-accordion-heading__toggle {
	box-sizing: border-box;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--16);
	min-block-size: var(--dg-raakvlak);
	padding-block: var(--wp--preset--spacing--16);
	padding-inline: 0;
}

.wp-block-woocommerce-product-details .wp-block-accordion-heading .wp-block-accordion-heading__toggle .wp-block-accordion-heading__toggle-title {
	position: relative;
	flex: none;
	text-decoration: none;
}

.wp-block-woocommerce-product-details .wp-block-accordion-heading__toggle-title::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: calc(-1 * var(--wp--preset--spacing--4));
	block-size: var(--wp--custom--lijn--dun);
	background: var(--wp--preset--color--ink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--wp--custom--duur--standaard) var(--wp--custom--curve);
}

.wp-block-woocommerce-product-details .wp-block-accordion-heading__toggle:focus-visible .wp-block-accordion-heading__toggle-title::after {
	transform: none;
}

.wp-block-woocommerce-product-details .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
	transform: none;
}

.wp-block-woocommerce-product-details .wp-block-accordion-heading__toggle-icon {
	flex: none;
	/* Het icoon zelf draait niet meer (de chevron erin wel): zonder core's
	   overgang van 0,2 s. */
	transition: none;
	inline-size: var(--wp--preset--spacing--16);
	block-size: var(--wp--preset--spacing--16);
}

.wp-block-woocommerce-product-details .dg-productdetails__chevron {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	transition: rotate var(--wp--custom--duur--standaard) var(--wp--custom--curve);
}

.wp-block-woocommerce-product-details .wp-block-accordion-heading__toggle[aria-expanded="true"] .dg-productdetails__chevron {
	rotate: 180deg;
}

.wp-block-woocommerce-product-details .wp-block-accordion-item > .wp-block-accordion-panel {
	margin-block-start: 0;
	padding-block-end: var(--wp--preset--spacing--24);
}

.wp-block-woocommerce-product-details .wp-block-woocommerce-product-description {
	color: var(--wp--preset--color--ink);
}

.wp-block-woocommerce-product-details .dg-beschrijving__deel {
	break-inside: avoid;
}

.wp-block-woocommerce-product-details .dg-beschrijving__deel > :first-child {
	margin-block-start: 0;
}

@media (hover: hover) {
	.wp-block-woocommerce-product-details .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title::after {
		transform: none;
	}
}

@media (width > 1023px) {
	.wp-block-woocommerce-product-details .wp-block-woocommerce-product-description {
		columns: var(--wp--custom--kolom--tekst);
		column-gap: var(--wp--preset--spacing--64);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-woocommerce-product-details .wp-block-accordion > .wp-block-accordion-item,
	.wp-block-woocommerce-product-details .wp-block-accordion-heading__toggle-title::after {
		transition: none;
	}

	.wp-block-woocommerce-product-details .dg-productdetails__chevron {
		transition-property: none;
	}
}