/**
 * Productpagina, ontwerp G (single-product.php + inc/enqueue-product-detail.php).
 * Bron: verbeterplan/ontwerpen/g-complete-webshop.html, data-view="product".
 *
 * Alleen tokens uit design-tokens.css (--kleur-*, --radius, --radius-rond,
 * --font-tekst, --font-koppen); geen losse kleurcodes.
 *
 * Specificiteit: WooCommerce's eigen CSS gebruikt selectors als
 * `.woocommerce div.product p.price` (0,3,2) en voor de kolombreedtes zelfs
 * `.woocommerce #content div.product div.images` (1,3,2). Alles hieronder
 * begint daarom met `body.single-product .cs-pd-pagina` (0,2,1); de twee
 * kolombreedtes gebruiken #content.cs-pd-pagina. De productkaarten in
 * "Past bij dit product" worden NIET hier gestijld (woocommerce/
 * content-product.php + product-categorie.css); hier staat alleen het raster.
 *
 * Mobile-first: basis = telefoon; 821px = twee kolommen; 1081px = sticky
 * galerij en 4 kaarten naast elkaar.
 *
 * Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 */

/* ==========================================================================
   0. Basis
   ========================================================================== */

body.single-product .cs-pd-pagina {
	display: block;
	color: var(--kleur-inkt);
	font-family: var(--font-tekst);
}

body.single-product .cs-pd-wrap {
	max-width: 1320px;
	margin-inline: auto;
	padding-inline: clamp(16px, 3vw, 40px);
}

body.single-product .cs-pd-pagina .screen-reader-text,
body.single-product .cs-koopbalk .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

body.single-product .cs-pd-pagina :focus-visible {
	outline: 3px solid var(--kleur-focus, var(--kleur-groen-donker));
	outline-offset: 2px;
}

body.single-product .cs-pd-pagina .woocommerce-notices-wrapper:empty {
	display: none;
}

body.single-product .cs-pd-pagina .woocommerce-notices-wrapper {
	margin-bottom: 16px;
}

/* ==========================================================================
   1. Kruimelpad
   ========================================================================== */

body.single-product .cs-pd-pagina .cs-pd-kruimel {
	margin: 0;
	padding-block: 18px 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--kleur-zacht);
}

body.single-product .cs-pd-pagina .cs-pd-kruimel ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	margin: 0;
	padding: 0;
}

body.single-product .cs-pd-pagina .cs-pd-kruimel li {
	display: block;
	margin: 0;
}

body.single-product .cs-pd-pagina .cs-pd-kruimel li + li::before {
	content: "/";
	content: "/" / "";
	margin-right: 6px;
	color: var(--kleur-zacht);
}

body.single-product .cs-pd-pagina .cs-pd-kruimel a {
	color: inherit;
	text-decoration: none;
	padding-block: 12px; /* groter tikvlak zonder extra regelhoogte */
}

body.single-product .cs-pd-pagina .cs-pd-kruimel a:hover {
	color: var(--kleur-groen-donker);
	text-decoration: underline;
}

/* De laatste stap is de producttitel; op telefoon staat die als H1 al vlakbij. */
@media (max-width: 600px) {
	body.single-product .cs-pd-pagina .cs-pd-kruimel li:last-child:not(:first-child) {
		display: none;
	}
}

/* ==========================================================================
   2. Indeling: galerij + koopkolom
   ========================================================================== */

body.single-product .cs-pd-pagina div.product.cs-pd {
	margin: 0;
}

body.single-product .cs-pd-pagina .cs-pd__boven {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	max-width: 600px;
	margin-inline: auto;
	padding-bottom: 40px;
}

body.single-product #content.cs-pd-pagina div.product div.images,
body.single-product #content.cs-pd-pagina div.product div.summary {
	float: none;
	width: auto;
	margin: 0;
	clear: none;
}

/* Positioneringscontext voor de badges; vanaf 1081px sticky (hieronder). */
body.single-product .cs-pd-pagina .cs-pd__galerij {
	position: relative;
	min-width: 0;
}

@media (min-width: 821px) {
	body.single-product .cs-pd-pagina .cs-pd__boven {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: clamp(24px, 4vw, 56px);
		max-width: none;
	}
}

@media (min-width: 1081px) {
	body.single-product .cs-pd-pagina .cs-pd__galerij {
		position: sticky;
		/* --cs-header-hoogte: hoogte van de sticky header (+8px), gezet door
		   inc/assets/header.js. */
		top: calc(var(--cs-header-hoogte, 0px) + 16px);
	}
}

/* ==========================================================================
   3. Galerij (WooCommerce: flexslider, zoom, PhotoSwipe)
   ========================================================================== */

body.single-product .cs-pd-pagina .cs-pd .woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;
}

/* Grote fototegel op vlak, foto via multiply (witte fotoachtergrond valt weg).
   flexslider zet inline display:block op de slides; vandaar !important. */
body.single-product .cs-pd-pagina .cs-pd div.images .woocommerce-product-gallery__image {
	display: flex !important;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 0;
	border-radius: var(--radius);
	background: var(--kleur-vlak);
}

/* Packshots op wit vallen via multiply weg in het vlak. (Packshots met een
   eigen grijze studioachtergrond, bijv. 3043, blijven als grijs vierkant
   zichtbaar: dat is een fotokwestie, geen CSS-kwestie.) */
body.single-product .cs-pd-pagina .cs-pd div.images .woocommerce-product-gallery__image > a {
	display: block;
	width: 84%;
	outline-offset: -3px;
}

body.single-product .cs-pd-pagina .cs-pd div.images .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	mix-blend-mode: multiply;
}

body.single-product .cs-pd-pagina .cs-pd div.images .woocommerce-product-gallery__image--placeholder img {
	width: 78%;
}

/* Ingezoomde afbeelding (WooCommerce-zoom, 2000px) dekkend: geen multiply,
   anders schemert de gewone foto erdoorheen. */
body.single-product .cs-pd-pagina .cs-pd div.images .woocommerce-product-gallery__image .zoomImg {
	background-color: var(--kleur-wit);
	mix-blend-mode: normal;
}

/* Vergrootknop (lightbox): 44px, inktkleurig vergrootglas. */
body.single-product .cs-pd-pagina .cs-pd div.images .woocommerce-product-gallery__trigger {
	top: 12px;
	right: 12px;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-rond);
	background: var(--kleur-wit);
	box-shadow: 0 0 0 1px var(--kleur-lijn);
}

body.single-product .cs-pd-pagina .cs-pd div.images .woocommerce-product-gallery__trigger::before {
	top: 13px;
	left: 13px;
	border-color: var(--kleur-inkt);
}

body.single-product .cs-pd-pagina .cs-pd div.images .woocommerce-product-gallery__trigger::after {
	top: 23px;
	left: 26px;
	background: var(--kleur-inkt);
}

body.single-product .cs-pd-pagina .cs-pd div.images .woocommerce-product-gallery__trigger:focus-visible {
	outline: 3px solid var(--kleur-focus, var(--kleur-groen-donker));
	outline-offset: 2px;
}

/* Thumbnails onder de grote foto (alleen bij meerdere afbeeldingen). */
body.single-product .cs-pd-pagina .cs-pd div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	overflow: visible;
}

body.single-product .cs-pd-pagina .cs-pd div.images .flex-control-thumbs li {
	width: auto;
	float: none;
	margin: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: var(--radius);
	background: var(--kleur-vlak);
	transition: border-color 0.15s ease-out;
}

body.single-product .cs-pd-pagina .cs-pd div.images .flex-control-thumbs li:hover {
	border-color: var(--kleur-lijn);
}

body.single-product .cs-pd-pagina .cs-pd div.images .flex-control-thumbs li:has(img.flex-active) {
	border-color: var(--kleur-groen);
}

body.single-product .cs-pd-pagina .cs-pd div.images .flex-control-thumbs li img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	opacity: 1;
	mix-blend-mode: multiply;
	cursor: pointer;
}

/* Badges linksboven op de foto. */
body.single-product .cs-pd-pagina .cs-pd-badges {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 9;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-width: calc(100% - 88px);
	pointer-events: none;
}

body.single-product .cs-pd-pagina .cs-pd-badges > span,
body.single-product .cs-pd-pagina .cs-pd .cs-pd-badges span.onsale {
	position: static;
	display: inline-block;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 3px 10px;
	border-radius: var(--radius-rond);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.5;
	text-align: left;
	box-shadow: none;
}

body.single-product .cs-pd-pagina .cs-pd-badges .cs-pd-badge--best {
	background: var(--kleur-badge);
	color: var(--kleur-badge-tekst);
}

body.single-product .cs-pd-pagina .cs-pd .cs-pd-badges span.onsale,
body.single-product .cs-pd-pagina .cs-pd-badges .codex-product-sale-label {
	background: var(--kleur-sale);
	color: var(--kleur-wit);
}

body.single-product .cs-pd-pagina .cs-pd-badges .codex-product-new-label:not(.codex-product-sale-label) {
	background: var(--kleur-groen);
	color: var(--kleur-wit);
}

/* functions.php plakt hetzelfde label nog eens via JS in de galerij; de
   badgegroep hierboven toont het al. */
body.single-product .cs-pd-pagina .woocommerce-product-gallery > .codex-product-new-label {
	display: none;
}

/* ==========================================================================
   4. Koopkolom
   ========================================================================== */

body.single-product .cs-pd-pagina .cs-pd__koop {
	display: grid;
	gap: 18px;
	align-content: start;
	min-width: 0;
}

body.single-product .cs-pd-pagina .cs-pd__koop > * {
	margin: 0;
}

/* Merk + H1 */
body.single-product .cs-pd-pagina .cs-pd-merk {
	margin-bottom: -12px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

body.single-product .cs-pd-pagina .cs-pd-merk a {
	color: var(--kleur-groen);
	text-decoration: none;
	padding-block: 12px;
}

body.single-product .cs-pd-pagina .cs-pd-merk a:hover {
	color: var(--kleur-groen-donker);
	text-decoration: underline;
}

body.single-product .cs-pd-pagina .cs-pd .product_title {
	margin: 0;
	padding: 0;
	font-family: var(--font-koppen);
	font-size: clamp(30px, 1.8vw + 20px, 44px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--kleur-kop);
	text-wrap: balance;
}

body.single-product .cs-pd-pagina .cs-pd .woocommerce-product-rating {
	margin: 0;
}

/* Korte omschrijving */
body.single-product .cs-pd-pagina .cs-pd .woocommerce-product-details__short-description {
	font-size: 17px;
	line-height: 1.55;
	color: var(--kleur-zacht);
}

body.single-product .cs-pd-pagina .cs-pd .woocommerce-product-details__short-description > * {
	margin: 0;
}

body.single-product .cs-pd-pagina .cs-pd .woocommerce-product-details__short-description > * + * {
	margin-top: 0.6em;
}

@media (min-width: 821px) {
	body.single-product .cs-pd-pagina .cs-pd .woocommerce-product-details__short-description {
		font-size: 18px;
	}
}

/* Prijs + prijs per 100 ml */
body.single-product .cs-pd-pagina .cs-pd-prijs {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
}

body.single-product .cs-pd-pagina .cs-pd-prijs .price {
	margin: 0;
	font-size: 34px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--kleur-inkt);
}

body.single-product .cs-pd-pagina .cs-pd-prijs .price del {
	margin-right: 8px;
	font-size: 18px;
	font-weight: 500;
	color: var(--kleur-zacht);
	opacity: 1;
}

body.single-product .cs-pd-pagina .cs-pd-prijs .price ins {
	text-decoration: none;
	color: var(--kleur-sale);
}

body.single-product .cs-pd-pagina .cs-pd-prijs__per {
	font-size: 14.5px;
	color: var(--kleur-zacht);
}

body.single-product .cs-pd-pagina .cs-pd-prijs__per[hidden] {
	display: none;
}

/* Voorraad (simpel product; bij variaties in .single_variation) */
body.single-product .cs-pd-pagina .cs-pd .stock {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--kleur-groen-donker);
}

body.single-product .cs-pd-pagina .cs-pd .stock.out-of-stock {
	color: var(--kleur-sale);
}

/* ==========================================================================
   5. Koopformulier: inhoudskeuze, aantal, knop
   ========================================================================== */

body.single-product .cs-pd-pagina .cs-pd form.cart {
	margin: 0;
}

body.single-product .cs-pd-pagina .cs-pd form.cart::before,
body.single-product .cs-pd-pagina .cs-pd form.cart::after,
body.single-product .cs-pd-pagina .cs-pd .woocommerce-variation-add-to-cart::before,
body.single-product .cs-pd-pagina .cs-pd .woocommerce-variation-add-to-cart::after {
	display: none;
}

/* Aantal + knop naast elkaar (simpel product en variatieknop). */
body.single-product .cs-pd-pagina .cs-pd form.cart:not(.variations_form),
body.single-product .cs-pd-pagina .cs-pd .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

body.single-product .cs-pd-pagina .cs-pd form.variations_form {
	display: grid;
	gap: 18px;
}

/* Variatietabel: blijft in de DOM (WooCommerce leest het select), maar het
   select, het label en "Wissen" worden vervangen door de tegels. */
body.single-product .cs-pd-pagina .cs-pd form.cart table.variations {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
}

body.single-product .cs-pd-pagina .cs-pd form.cart table.variations tbody,
body.single-product .cs-pd-pagina .cs-pd form.cart table.variations tr {
	display: block;
}

body.single-product .cs-pd-pagina .cs-pd form.cart table.variations tr + tr {
	margin-top: 18px;
}

body.single-product .cs-pd-pagina .cs-pd form.cart table.variations th,
body.single-product .cs-pd-pagina .cs-pd form.cart table.variations td {
	display: block;
	padding: 0;
	border: 0;
	background: transparent;
	line-height: inherit;
	text-align: left;
}

body.single-product .cs-pd-pagina .cs-pd form.cart table.variations th {
	margin-bottom: 8px;
	font-weight: 700;
}

body.single-product .cs-pd-pagina .cs-pd form.cart table.variations tr:has(.cs-keuze) th,
body.single-product .cs-pd-pagina .cs-pd form.cart select.cs-keuze-select {
	display: none;
}

/* WooCommerce toont "Wissen" met jQuery fadeIn() (inline display); met de
   tegels is wissen niet nodig. */
body.single-product .cs-pd-pagina .cs-pd form.cart td.value:has(.cs-keuze) .reset_variations {
	display: none !important;
}

body.single-product .cs-pd-pagina .cs-pd .single_variation_wrap {
	display: block;
}

/* De variatieprijs staat al groot bovenaan (product-detail.js). */
body.single-product .cs-pd-pagina .cs-pd .woocommerce-variation-price {
	display: none;
}

body.single-product .cs-pd-pagina .cs-pd .woocommerce-variation-availability:not(:empty),
body.single-product .cs-pd-pagina .cs-pd .woocommerce-variation-description:not(:empty) {
	margin-bottom: 12px;
}

body.single-product .cs-pd-pagina .cs-pd .woocommerce-variation-description p {
	margin: 0;
	font-size: 15px;
	color: var(--kleur-zacht);
}

/* Inhoudskeuze-tegels (.keuze in G) */
body.single-product .cs-pd-pagina .cs-keuze {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

body.single-product .cs-pd-pagina .cs-keuze__titel {
	margin: 0 0 10px;
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--kleur-inkt);
}

body.single-product .cs-pd-pagina .cs-keuze__rij {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 8px;
}

body.single-product .cs-pd-pagina .cs-keuze__optie {
	position: relative;
	display: grid;
	align-content: center;
	gap: 2px;
	min-height: 64px;
	margin: 0;
	padding: 10px 26px 10px 10px;
	border: 1px solid var(--kleur-veldrand);
	border-radius: var(--radius);
	background: var(--kleur-wit);
	font-size: inherit;
	cursor: pointer;
	transition: border-color 0.15s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

body.single-product .cs-pd-pagina .cs-keuze__optie:hover {
	border-color: var(--kleur-inkt);
}

body.single-product .cs-pd-pagina .cs-keuze__optie input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

body.single-product .cs-pd-pagina .cs-keuze__label {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--kleur-inkt);
}

body.single-product .cs-pd-pagina .cs-keuze__prijs {
	font-size: 14px;
	line-height: 1.3;
	color: var(--kleur-zacht);
}

body.single-product .cs-pd-pagina .cs-keuze__optie:has(input:checked) {
	border-color: var(--kleur-groen);
	box-shadow: inset 0 0 0 1px var(--kleur-groen);
	background: var(--kleur-groen-licht);
}

/* Vinkje: de gekozen tegel is niet alleen aan kleur te herkennen. */
body.single-product .cs-pd-pagina .cs-keuze__optie:has(input:checked)::after {
	content: "";
	position: absolute;
	top: 10px;
	right: 9px;
	width: 14px;
	height: 14px;
	background: var(--kleur-groen);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.single-product .cs-pd-pagina .cs-keuze__optie:has(input:focus-visible) {
	outline: 3px solid var(--kleur-focus, var(--kleur-groen-donker));
	outline-offset: 2px;
}

body.single-product .cs-pd-pagina .cs-keuze__optie:has(input:disabled) {
	cursor: not-allowed;
	opacity: 0.55;
}

body.single-product .cs-pd-pagina .cs-keuze__optie:has(input:disabled):hover {
	border-color: var(--kleur-veldrand);
}

@media (min-width: 821px) {
	body.single-product .cs-pd-pagina .cs-keuze__rij {
		gap: 10px;
	}

	body.single-product .cs-pd-pagina .cs-keuze__optie {
		padding: 12px 28px 12px 14px;
	}
}

/* Aantal-stepper (− 1 +) */
body.single-product .cs-pd-pagina .cs-pd form.cart div.quantity {
	display: inline-flex;
	flex: none;
	align-items: center;
	height: 50px;
	margin: 0;
	float: none;
	border: 1px solid var(--kleur-veldrand);
	border-radius: var(--radius-rond);
	background: var(--kleur-wit);
}

body.single-product .cs-pd-pagina .cs-pd form.cart div.quantity:has(input[type="hidden"]) {
	display: none;
}

body.single-product .cs-pd-pagina .cs-pd form.cart .quantity .qty {
	width: 38px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--kleur-inkt);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

body.single-product .cs-pd-pagina .cs-pd form.cart .quantity .qty::-webkit-inner-spin-button,
body.single-product .cs-pd-pagina .cs-pd form.cart .quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body.single-product .cs-pd-pagina .cs-pd form.cart .quantity .qty:focus {
	outline: 3px solid var(--kleur-focus, var(--kleur-groen-donker));
	outline-offset: 0;
}

body.single-product .cs-pd-pagina .cs-pd .cs-pd-stap,
body.single-product .cs-pd-pagina .cs-pd .cs-pd-stap:focus {
	display: grid;
	place-items: center;
	width: 44px;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--radius-rond);
	background: transparent;
	color: var(--kleur-inkt);
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

body.single-product .cs-pd-pagina .cs-pd .cs-pd-stap:hover {
	background: var(--kleur-vlak);
	color: var(--kleur-inkt);
}

body.single-product .cs-pd-pagina .cs-pd .cs-pd-stap:focus-visible {
	outline: 3px solid var(--kleur-focus, var(--kleur-groen-donker));
	outline-offset: 2px;
}

/* Groene knop "In winkelwagen" */
body.single-product .cs-pd-pagina .cs-pd form.cart .single_add_to_cart_button {
	display: inline-flex;
	flex: 1 1 180px;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	margin: 0;
	padding: 0 24px;
	float: none;
	border: 0;
	border-radius: var(--radius-rond);
	background: var(--kleur-groen);
	color: var(--kleur-wit);
	font-family: var(--font-tekst);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease-out, transform 0.15s ease-out;
}

body.single-product .cs-pd-pagina .cs-pd form.cart .single_add_to_cart_button:hover,
body.single-product .cs-pd-pagina .cs-pd form.cart .single_add_to_cart_button:focus {
	background: var(--kleur-groen-donker);
	color: var(--kleur-wit);
}

body.single-product .cs-pd-pagina .cs-pd form.cart .single_add_to_cart_button:active {
	transform: scale(0.98);
}

body.single-product .cs-pd-pagina .cs-pd form.cart .single_add_to_cart_button:focus-visible {
	outline: 3px solid var(--kleur-focus, var(--kleur-groen-donker));
	outline-offset: 2px;
}

body.single-product .cs-pd-pagina .cs-pd form.cart .single_add_to_cart_button.disabled,
body.single-product .cs-pd-pagina .cs-pd form.cart .single_add_to_cart_button:disabled {
	background: var(--kleur-groen);
	color: var(--kleur-wit);
	opacity: 0.5;
	cursor: not-allowed;
}

/* ==========================================================================
   6. Checklist en "Vraag het Jolanda"
   ========================================================================== */

body.single-product .cs-pd-pagina .cs-pd-check {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.45;
}

body.single-product .cs-pd-pagina .cs-pd-check li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
}

body.single-product .cs-pd-pagina .cs-pd-check__icoon {
	flex: none;
	margin-top: 3px;
	color: var(--kleur-groen);
}

body.single-product .cs-pd-pagina .cs-pd-vraag {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px;
	border: 1px solid var(--kleur-lijn);
	border-radius: var(--radius);
}

body.single-product .cs-pd-pagina .cs-pd-vraag__foto {
	flex: none;
	width: 54px;
	height: 54px;
	border-radius: var(--radius-rond);
	object-fit: cover;
	object-position: 50% 15%;
	background: var(--kleur-vlak);
}

body.single-product .cs-pd-pagina .cs-pd-vraag p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

body.single-product .cs-pd-pagina .cs-pd-vraag a {
	color: var(--kleur-groen-donker);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.14em;
	padding-block: 12px;
}

body.single-product .cs-pd-pagina .cs-pd-vraag a:hover {
	color: var(--kleur-inkt);
}

/* ==========================================================================
   7. Uitklapblokken (.info in G)
   ========================================================================== */

body.single-product .cs-pd-pagina .cs-pd-info {
	margin-top: 6px;
	border-top: 1px solid var(--kleur-lijn);
}

body.single-product .cs-pd-pagina .cs-pd-info__blok {
	border-bottom: 1px solid var(--kleur-lijn);
}

body.single-product .cs-pd-pagina .cs-pd-info__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 60px;
	padding-block: 10px;
	list-style: none;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--kleur-inkt);
	cursor: pointer;
}

body.single-product .cs-pd-pagina .cs-pd-info__kop::-webkit-details-marker {
	display: none;
}

body.single-product .cs-pd-pagina .cs-pd-info__kop::after {
	content: "+";
	content: "+" / "";
	flex: none;
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
	color: var(--kleur-groen);
}

body.single-product .cs-pd-pagina .cs-pd-info__blok[open] > .cs-pd-info__kop::after {
	content: "\2212";
	content: "\2212" / "";
}

body.single-product .cs-pd-pagina .cs-pd-info__kop:hover {
	color: var(--kleur-groen-donker);
}

body.single-product .cs-pd-pagina .cs-pd-info__kop:focus-visible {
	outline: 3px solid var(--kleur-focus, var(--kleur-groen-donker));
	outline-offset: 2px;
	border-radius: 4px;
}

body.single-product .cs-pd-pagina .cs-pd-info__inhoud {
	display: grid;
	gap: 12px;
	max-width: 70ch;
	padding-bottom: 20px;
	font-size: 16px;
	line-height: 1.6;
}

body.single-product .cs-pd-pagina .cs-pd-info__inhoud > *,
body.single-product .cs-pd-pagina .cs-pd-info__inhoud li > p {
	margin: 0;
}

body.single-product .cs-pd-pagina .cs-pd-info__inhoud ul,
body.single-product .cs-pd-pagina .cs-pd-info__inhoud ol {
	display: grid;
	gap: 6px;
	margin: 0;
	padding-left: 20px;
}

body.single-product .cs-pd-pagina .cs-pd-info__inhoud a {
	color: var(--kleur-groen-donker);
	text-decoration: underline;
}

body.single-product .cs-pd-pagina .cs-pd-info__inhoud a:hover {
	color: var(--kleur-inkt);
}

body.single-product .cs-pd-pagina .cs-pd-info__inhoud h2,
body.single-product .cs-pd-pagina .cs-pd-info__inhoud h3,
body.single-product .cs-pd-pagina .cs-pd-info__inhoud h4 {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

/* Ingrediëntentabel */
body.single-product .cs-pd-pagina .cs-pd-tabel {
	max-width: 100%;
	overflow-x: auto;
	border-radius: 4px;
}

body.single-product .cs-pd-pagina .cs-pd-tabel table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 15px;
}

body.single-product .cs-pd-pagina .cs-pd-tabel th,
body.single-product .cs-pd-pagina .cs-pd-tabel td {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--kleur-lijn);
	background: transparent;
	text-align: left;
	vertical-align: top;
	line-height: 1.45;
}

body.single-product .cs-pd-pagina .cs-pd-tabel th {
	background: var(--kleur-vlak);
	font-weight: 700;
}

/* Beoordelingen (WooCommerce-template) binnen een uitklapblok */
body.single-product .cs-pd-pagina .cs-pd-info #reviews .woocommerce-Reviews-title,
body.single-product .cs-pd-pagina .cs-pd-info #reviews #reply-title {
	font-size: 17px;
}

/* ==========================================================================
   8. "Past bij dit product" (alleen het raster; de kaart zelf komt uit
   content-product.php + product-categorie.css)
   ========================================================================== */

body.single-product .cs-pd-pagina .cs-pd-passend {
	padding-block: 8px 64px;
}

body.single-product .cs-pd-pagina .cs-pd-passend__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 4px 24px;
	margin-bottom: 24px;
}

body.single-product .cs-pd-pagina .cs-pd-passend__titel {
	margin: 0;
	font-family: var(--font-koppen);
	font-size: clamp(26px, 1.6vw + 16px, 36px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--kleur-kop);
}

body.single-product .cs-pd-pagina .cs-pd-passend__link {
	color: var(--kleur-groen);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.14em;
	padding-block: 12px;
}

body.single-product .cs-pd-pagina .cs-pd-passend__link:hover {
	color: var(--kleur-groen-donker);
}

body.single-product .cs-pd-pagina .cs-pd-passend ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.single-product .cs-pd-pagina .cs-pd-passend ul.products::before,
body.single-product .cs-pd-pagina .cs-pd-passend ul.products::after {
	display: none;
}

body.single-product .cs-pd-pagina .cs-pd-passend ul.products li.product {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
}

@media (min-width: 821px) {
	body.single-product .cs-pd-pagina .cs-pd-passend ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px 20px;
	}

	/* Drie kolommen: de vierde kaart zou alleen op een rij staan. */
	body.single-product .cs-pd-pagina .cs-pd-passend ul.products li.product.cs-kaart:nth-child(4):not(#cs) {
		display: none;
	}
}

@media (min-width: 1081px) {
	body.single-product .cs-pd-pagina .cs-pd-passend ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	body.single-product .cs-pd-pagina .cs-pd-passend ul.products li.product.cs-kaart:nth-child(4):not(#cs) {
		display: flex;
	}
}

/* ==========================================================================
   9. Koopbalk (alleen ≤ 820px)
   ========================================================================== */

body.single-product .cs-koopbalk {
	display: none;
}

@media (max-width: 820px) {
	body.single-product .cs-koopbalk {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 50;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 12px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		background: var(--kleur-wit);
		box-shadow: 0 -6px 18px color-mix(in srgb, var(--kleur-inkt) 12%, transparent);
		color: var(--kleur-inkt);
		font-family: var(--font-tekst);
		transform: translateY(110%);
		visibility: hidden;
		transition: transform 0.2s ease-out, visibility 0s linear 0.2s;
	}

	body.single-product .cs-koopbalk.is-zichtbaar {
		transform: none;
		visibility: visible;
		transition: transform 0.2s ease-out, visibility 0s;
	}

	/* Ruimte zodat de balk de onderkant van de footer niet afdekt. */
	body.single-product.cs-pd-heeft-balk {
		padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
	}
}

body.single-product .cs-koopbalk__tekst {
	min-width: 0;
}

body.single-product .cs-koopbalk__naam,
body.single-product .cs-koopbalk__prijs {
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

body.single-product .cs-koopbalk__naam {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}

body.single-product .cs-koopbalk__prijs {
	font-size: 14px;
	line-height: 1.35;
	color: var(--kleur-zacht);
}

body.single-product .cs-koopbalk__prijs del {
	font-size: 13px;
}

body.single-product .cs-koopbalk__prijs ins {
	text-decoration: none;
	color: var(--kleur-sale);
}

body.single-product .cs-koopbalk .cs-koopbalk__knop,
body.single-product .cs-koopbalk .cs-koopbalk__knop:focus {
	min-height: 44px;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: var(--radius-rond);
	background: var(--kleur-groen);
	color: var(--kleur-wit);
	font-family: var(--font-tekst);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease-out;
}

body.single-product .cs-koopbalk .cs-koopbalk__knop:hover {
	background: var(--kleur-groen-donker);
	color: var(--kleur-wit);
}

body.single-product .cs-koopbalk .cs-koopbalk__knop:focus-visible {
	outline: 3px solid var(--kleur-focus, var(--kleur-groen-donker));
	outline-offset: 2px;
}

/* ==========================================================================
   10. Minder beweging
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	body.single-product .cs-pd-pagina *,
	body.single-product .cs-koopbalk {
		transition: none !important;
	}

	body.single-product .cs-pd-pagina .cs-pd form.cart .single_add_to_cart_button:active {
		transform: none;
	}
}

/* Toast (product-categorie.css) boven de sticky koopbalk houden op mobiel. */
@media (max-width: 820px) {
	body.single-product {
		--cs-toast-onder: 92px;
	}
}

/* ==========================================================================
   11. Toevoegen zonder herladen (product-detail.js, onderdeel 6)
   ========================================================================== */

/* Bezig: knop staat even uit (geen dubbel toevoegen). */
body.single-product .cs-pd-pagina .cs-pd form.cart .single_add_to_cart_button[aria-busy="true"],
body.single-product .cs-koopbalk .cs-koopbalk__knop[aria-busy="true"] {
	opacity: 0.7;
	cursor: progress;
}

/* WooCommerce's add-to-cart.js zet na het event added_to_cart een link
   "Bekijk winkelwagen" naast de knop en een icoon-vinkje erachter; de toast
   heeft die link al en de knop zegt zelf "Toegevoegd". */
body.single-product .cs-pd-pagina .cs-pd form.cart .added_to_cart {
	display: none;
}

body.single-product .cs-pd-pagina .cs-pd form.cart .single_add_to_cart_button.added::after {
	content: none;
}

/* Inline foutmelding bij de knop (role=alert), in WooCommerce-stijl. */
body.single-product .cs-pd-pagina .cs-pd-melding {
	flex: 1 1 100%;
	width: 100%;
}

body.single-product .cs-pd-pagina .cs-pd-melding[hidden] {
	display: none;
}

body.single-product .cs-pd-pagina .cs-pd-melding .cs-pd-melding__lijst {
	margin: 0;
	padding: 12px 14px;
	list-style: none;
	border: 0;
	border-left: 4px solid var(--kleur-sale);
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--kleur-sale) 7%, var(--kleur-wit));
	color: var(--kleur-inkt);
	font-size: 15px;
	line-height: 1.45;
}

body.single-product .cs-pd-pagina .cs-pd-melding .cs-pd-melding__lijst::before,
body.single-product .cs-pd-pagina .cs-pd-melding .cs-pd-melding__lijst::after {
	content: none;
	display: none;
}

body.single-product .cs-pd-pagina .cs-pd-melding .cs-pd-melding__lijst li {
	margin: 0;
	padding: 0;
}

body.single-product .cs-pd-pagina .cs-pd-melding .cs-pd-melding__lijst li + li {
	margin-top: 4px;
}

body.single-product .cs-pd-pagina .cs-pd-melding a {
	color: var(--kleur-groen-donker);
	font-weight: 600;
	text-decoration: underline;
}

/* Koopknop "Toevoegen aan winkelwagen": nooit over twee regels. Past hij
   niet naast de stepper (smalle telefoons), dan schuift hij via flex-wrap
   naar een eigen regel over de volle breedte. */
body.single-product .cs-pd-pagina .cs-pd form.cart .single_add_to_cart_button {
	white-space: nowrap;
}

/* Koopbalk: lang label als het past, anders "Toevoegen" (container query op
   de balk zelf). De toegankelijke naam staat in aria-label. */
body.single-product .cs-koopbalk {
	container-type: inline-size;
	container-name: cs-koopbalk;
}

body.single-product .cs-koopbalk .cs-koopbalk__lang {
	display: none;
}

@container cs-koopbalk (min-width: 440px) {
	body.single-product .cs-koopbalk .cs-koopbalk__lang {
		display: inline;
	}

	body.single-product .cs-koopbalk .cs-koopbalk__kort {
		display: none;
	}
}

/* Plugin-velden in het koopformulier (bijv. PPOM "Cadeauverpakking") over
   de volle breedte, boven aantal + knop. */
body.single-product .cs-pd-pagina .cs-pd form.cart:not(.variations_form) > div:not(.quantity),
body.single-product .cs-pd-pagina .cs-pd .woocommerce-variation-add-to-cart > div:not(.quantity) {
	flex: 1 1 100%;
	min-width: 0;
}

body.single-product .cs-pd-pagina .cs-pd .ppom-wrapper .form-group {
	margin: 0;
}

body.single-product .cs-pd-pagina .cs-pd .ppom-wrapper .form-control-label {
	display: block;
	margin: 0 0 2px;
	font-size: 16px;
	font-weight: 700;
	color: var(--kleur-inkt);
}

body.single-product .cs-pd-pagina .cs-pd .ppom-wrapper .form-check {
	display: inline-flex;
	margin: 0 20px 0 0;
	padding: 0;
}

body.single-product .cs-pd-pagina .cs-pd .ppom-wrapper .form-check-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 15px;
	cursor: pointer;
}

body.single-product .cs-pd-pagina .cs-pd .ppom-wrapper .form-check-label input[type="radio"] {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--kleur-groen);
}

body.single-product .cs-pd-pagina .cs-pd .ppom-wrapper .ppom-option-label-price {
	color: var(--kleur-zacht);
}

/* PPOM zet bij een flex-formulier .ppom-flex-controller { display:block
   !important } (zodat zijn velden niet naast de knop belanden). Hierboven
   staan plugin-velden al over de volle breedte, dus flex mag blijven. */
body.single-product .cs-pd-pagina .cs-pd form.cart.ppom-flex-controller:not(.variations_form) {
	display: flex !important;
}