/**
 * EC Productpagina
 * Versie 1.4.0
 *
 * Alleen ingeladen op de enkele productpagina.
 *
 * De vormtaal volgt de bestaande conventies uit style.css van het child theme:
 * - Secundaire knop volgt .ec-ks__actie--secundair
 * - Accordion volgt .ec-faq__toggle en .ec-faq__item
 * - Zekerheidsregels gebruiken het bestaande .ec-usp component
 *
 * Moderne features en hun status:
 * - :has()               Baseline sinds december 2023.
 * - ::details-content    Chrome 131, Safari 18.4, Firefox 139. Achter @supports,
 *                        zonder ondersteuning klapt het paneel direct open.
 * - interpolate-size     Nodig om naar block-size: auto te animeren. Scoped op
 *                        .ec-accordions, dus geen effect op de rest van de site.
 * - transition-behavior  allow-discrete, nodig voor content-visibility.
 */

/* ---------------------------------------------------------------------------
 * 1. Knoppenhiërarchie
 * ------------------------------------------------------------------------- */

.single-product form.cart .single_add_to_cart_button {
	inline-size: 100%;
	justify-content: center;
	text-align: center;
}

/* WooCommerce rendert een verborgen veld zodra min en max allebei 1 zijn.
   De tweede selector vangt afwijkende markup van themes of plugins af. */
.single-product form.cart .quantity.hidden,
.single-product form.cart .quantity:has(> input[type="hidden"]) {
	display: none !important;
}

/* De "Wissen"-link voegt hier niets toe. !important is nodig omdat
   WooCommerce hem via JavaScript inline zichtbaar maakt. */
.single-product .reset_variations {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * 2. Maathulp
 *
 * Voeg in de blokinstellingen van de knop, onder Geavanceerd, de extra CSS
 * klasse "ec-size-help" toe.
 *
 * Volgt .ec-ks__actie--secundair uit style.css, zodat de knop dezelfde
 * vormtaal heeft als de secundaire knoppen elders op de site.
 * ------------------------------------------------------------------------- */

.single-product .ec-size-help {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-block: 0 1rem;
	margin-inline: 0;
	padding-block: 0.8125rem;
	padding-inline: 1.5rem;
	border: 1.5px solid var(--contrast-3);
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--contrast);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition:
		background 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease,
		transform 0.15s ease;
}

.single-product .ec-size-help:hover,
.single-product .ec-size-help:focus-visible {
	background: var(--contrast);
	border-color: var(--contrast);
	color: var(--base);
	transform: translateY(-1px);
}

.single-product .ec-size-help:focus-visible {
	outline: 2px solid var(--contrast-3);
	outline-offset: 3px;
}

/* Terugval zolang de extra klasse nog niet is toegevoegd. Verwijderen zodra
   "ec-size-help" op de knop staat. */
.single-product button.gb-text-9ccfbeb6 {
	border: 1.5px solid var(--contrast-3);
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--contrast);
	font-weight: 500;
}

/* ---------------------------------------------------------------------------
 * 3. Zekerheidsregels
 *
 * De opmaak komt volledig uit .ec-usp in style.css. Hier staat alleen de
 * modifier voor de plaatsing op de productpagina.
 * ------------------------------------------------------------------------- */

.ec-usp--productpagina {
	margin-block: 1.25rem 0;
}

/* ---------------------------------------------------------------------------
 * 4. Accordions
 *
 * Volgt .ec-faq__item en .ec-faq__toggle uit style.css.
 * ------------------------------------------------------------------------- */

.ec-accordions {
	margin-block: 2rem 0;
	border-block-start: 1px solid var(--dust-grey);

	/* Alleen binnen dit blok, zodat block-size: auto animeerbaar wordt. */
	interpolate-size: allow-keywords;
}

.ec-accordions__item {
	border-block-end: 1px solid var(--dust-grey);
	scroll-margin-block-start: 1.5rem;
}

.ec-accordions__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.9375rem;
	padding-inline: 0.25rem;
	color: var(--contrast);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
	transition: color 0.15s ease;

	/* Verwijdert het driehoekje in alle moderne browsers. */
	list-style: none;
}

/* Safari tot en met 17 negeert list-style op summary. */
.ec-accordions__summary::-webkit-details-marker {
	display: none;
}

.ec-accordions__summary:hover {
	color: var(--contrast-3);
}

.ec-accordions__summary:focus-visible {
	outline: 2px solid var(--contrast-3);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.ec-accordions__marker {
	flex: none;
	inline-size: 0.5rem;
	aspect-ratio: 1;
	border-inline-end: 2px solid var(--contrast-3);
	border-block-end: 2px solid var(--contrast-3);
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform 0.25s ease, border-color 0.2s ease;
}

.ec-accordions__item[open] > .ec-accordions__summary .ec-accordions__marker {
	transform: rotate(-135deg) translate(-1px, -1px);
	border-color: var(--contrast);
}

.ec-accordions__panel {
	padding-block: 0 1.25rem;
	padding-inline: 0.25rem;
}

.ec-accordions__panel p,
.ec-accordions__panel li {
	color: var(--taube-grey);
	font-size: 0.9375rem;
	line-height: 1.65;
	max-width: 68ch;
}

.ec-accordions__panel > *:first-child {
	margin-block-start: 0;
}

.ec-accordions__panel > *:last-child {
	margin-block-end: 0;
}

.ec-accordions__panel a {
	color: var(--rosy-brown);
	text-decoration: none;
	transition: color 0.15s ease;
}

.ec-accordions__panel a:hover,
.ec-accordions__panel a:focus-visible {
	color: var(--contrast);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Open- en dichtklappen animeren waar de browser dat ondersteunt. */
@supports selector(::details-content) {
	.ec-accordions__item::details-content {
		block-size: 0;
		overflow: clip;
		transition:
			block-size 250ms ease,
			content-visibility 250ms allow-discrete;
	}

	.ec-accordions__item[open]::details-content {
		block-size: auto;
	}
}

/* ---------------------------------------------------------------------------
 * 5. Tabel met producteigenschappen
 *
 * De globale tabelregel in style.css zet een rand van 1px #ddd op elke cel.
 * Binnen een accordion is dat te zwaar.
 * ------------------------------------------------------------------------- */

.ec-accordions__panel .woocommerce-product-attributes {
	inline-size: 100%;
	border: 0;
}

.ec-accordions__panel .woocommerce-product-attributes th,
.ec-accordions__panel .woocommerce-product-attributes td {
	padding-block: 0.5rem;
	padding-inline: 0;
	border: 0;
	border-block-end: 1px solid var(--dust-grey);
	color: var(--contrast);
	font-size: 0.9375rem;
	text-align: start;
	vertical-align: top;
}

.ec-accordions__panel .woocommerce-product-attributes td {
	color: var(--taube-grey);
}

.ec-accordions__panel .woocommerce-product-attributes tr:last-child th,
.ec-accordions__panel .woocommerce-product-attributes tr:last-child td {
	border-block-end: 0;
}

/* ---------------------------------------------------------------------------
 * 7. Variantkeuze
 *
 * De maatvakjes komen uit WooCommerce Product Variation Swatches (ThemeHiGH),
 * design preset 2. Klassen bevestigd uit de plugin-JS: "selected" en
 * "thwvs-selected" voor de actieve keuze, "out_of_stock" voor uitverkocht.
 *
 * Kijk eerst of de plugin-instellingen onder Producten, WooCommerce Product
 * Variation Swatches dit al kunnen. Wat daar kan, hoort daar en niet hier.
 * ------------------------------------------------------------------------- */

/* Actieve keuze: gevuld, gelijk aan .ec-ks__actie--primair. Een randkleur
   alleen is op een tablet in daglicht niet te zien. */
.single-product .thwvs-wrapper-item-li.selected,
.single-product .thwvs-wrapper-item-li.thwvs-selected {
	background: var(--contrast);
	border-color: var(--contrast);
}

/* De wildcard is nodig omdat het cijfer in een genest element kan staan. */
.single-product .thwvs-wrapper-item-li.selected,
.single-product .thwvs-wrapper-item-li.selected *,
.single-product .thwvs-wrapper-item-li.thwvs-selected,
.single-product .thwvs-wrapper-item-li.thwvs-selected * {
	color: var(--base);
}

/* Uitverkochte maten rustiger. Ze trokken meer aandacht dan de maten die
   wel besteld kunnen worden. */
.single-product .thwvs-wrapper-item-li.out_of_stock {
	opacity: 0.4;
}

.single-product .thwvs-wrapper-item-li:focus-visible {
	outline: 2px solid var(--contrast-3);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * 8. Uitleg bij een onvolledige keuze
 *
 * Staat er standaard, en verdwijnt zodra WooCommerce de wrapper de klasse
 * woocommerce-variation-add-to-cart-enabled geeft. Andersom zou een korte
 * sprong in de layout geven, want die klasse staat er pas na het laden.
 * ------------------------------------------------------------------------- */

.ec-select-hint {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-block: 0 0.75rem;
	color: var(--contrast);
	font-size: 0.9375rem;
	line-height: 1.4;
}

.ec-select-hint::before {
	content: "";
	flex: none;
	inline-size: 0.5rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--rosy-brown);
}

.woocommerce-variation-add-to-cart-enabled .ec-select-hint {
	display: none;
}

/* ---------------------------------------------------------------------------
 * 6. Terugval en toegankelijkheid
 * ------------------------------------------------------------------------- */

/* Voor het geval een ander onderdeel de oude tabnavigatie alsnog uitvoert. */
.single-product .woocommerce-tabs .wc-tabs {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.ec-accordions__marker,
	.ec-accordions__summary,
	.ec-accordions__panel a,
	.single-product .ec-size-help {
		transition: none;
	}

	.ec-accordions__item::details-content {
		transition: none;
	}
}