/*
 * Clean your Desk — winkel
 *
 * Sluit aan op de bestaande site: Saira Semi Condensed voor koppen (uppercase),
 * Roboto voor lopende tekst, groen #187f4c als accent en donkerblauw #0b3a66 als
 * tekstkleur. Alleen de winkelpagina's laden dit bestand.
 *
 * Opbouw
 *   1. Tokens
 *   2. Gedeelde onderdelen (knoppen, koppen, iconen)
 *   3. Winkelpagina
 *   4. Productpagina
 *   5. Secties onder de productpagina
 *   6. Bestelbalk op mobiel
 *   7. Winkelwagen en afrekenen
 */

/* 1. Tokens ------------------------------------------------------------- */

:root {
	--cyd-groen: #187f4c;
	--cyd-groen-diep: #12633b;

	/* Knoppen hebben sinds 02-09-2026 een eigen groen: Kim koos het lichtgroen uit de
	   huisstijl (variant 2 van /knopkleur/). Bewust NIET --cyd-groen aanpassen, want dat
	   wordt ook voor tekst en accenten gebruikt en moet leesbaar blijven. */
	--cyd-knop: #61b87a;
	--cyd-knop-hover: #52a86b;
	--cyd-groen-zacht: #eaf4ee;
	--cyd-blauw: #0b3a66;
	--cyd-blauw-diep: #082c4a;
	--cyd-grijs: #4b5563;
	--cyd-grijs-zacht: #6b7280;
	--cyd-vlak: #f5f7f8;
	--cyd-lijn: #e1e7eb;
	--cyd-lijn-sterk: #cdd7de;
	--cyd-wit: #fff;

	/* Bewust verschillend per soort element, niet één radius overal. */
	--cyd-radius-knop: 10px;
	--cyd-radius-vlak: 4px;

	--cyd-beweging: 180ms cubic-bezier(0.16, 1, 0.3, 1);

	--cyd-kop: "Saira Semi Condensed", sans-serif;
	--cyd-tekst: roboto, sans-serif;
}

/* 2. Gedeelde onderdelen ------------------------------------------------ */

.cyd-icoon {
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	color: var(--cyd-groen);
}

.woocommerce .cyd-sectie__kop,
.woocommerce .cyd-specs__kop {
	font-family: var(--cyd-kop);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--cyd-blauw);
	letter-spacing: 0.01em;
}

.woocommerce .cyd-sectie__kop {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	line-height: 1.15;
	margin: 0 0 1.25rem;
}

/* Knoppen: de vorm van de site (uppercase, 10px), maar met meer gewicht in de winkel. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt,
.woocommerce #respond input#submit {
	font-family: var(--cyd-kop);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	background: var(--cyd-knop);
	color: var(--cyd-wit);
	border: 0;
	border-radius: var(--cyd-radius-knop);
	transition: background-color var(--cyd-beweging), box-shadow var(--cyd-beweging);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button.alt:hover,
.woocommerce #respond input#submit:hover {
	background: var(--cyd-knop-hover);
	color: var(--cyd-wit);
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce .button.alt:focus-visible {
	outline: 3px solid var(--cyd-blauw);
	outline-offset: 2px;
}

/* 3. Winkelpagina ------------------------------------------------------- */

/* De paginakop van het thema is ruim opgezet. In een winkel kost dat verkoop: de
   bezoeker moet eerst 280 pixels voorbij scrollen voor hij een product ziet. Hier
   iets compacter, wel in dezelfde stijl als de rest van de site. */
.woocommerce-page .entry-hero-container-inner,
.woocommerce .entry-hero-container-inner {
	padding-block: 2.5rem;
}

.woocommerce-page .entry-hero .entry-header,
.woocommerce .entry-hero .entry-header {
	min-height: 0;
}

.woocommerce-page .content-area,
.woocommerce .content-area {
	margin-block: 3rem 4rem;
}

/* Koopvoorwaarden in één regel, gescheiden door lijnen — geen rij losse kaartjes. */
.cyd-usps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0;
	margin: 0 0 2.5rem;
	border-block: 1px solid var(--cyd-lijn);
}

.cyd-usp {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1.125rem 1.5rem 1.125rem 0;
}

.cyd-usp + .cyd-usp {
	border-left: 1px solid var(--cyd-lijn);
	padding-left: 1.5rem;
}

.cyd-usp strong {
	display: block;
	font-family: var(--cyd-kop);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--cyd-blauw);
	line-height: 1.3;
}

.cyd-usp span {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--cyd-grijs);
	margin-top: 0.125rem;
}

@media (max-width: 47.99em) {
	.cyd-usps {
		grid-template-columns: 1fr;
	}

	.cyd-usp + .cyd-usp {
		border-left: 0;
		border-top: 1px solid var(--cyd-lijn);
		padding-left: 0;
	}
}

/* Productkaart */
.woocommerce ul.products li.product.loop-entry {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--cyd-wit);
	border: 1px solid var(--cyd-lijn);
	border-radius: var(--cyd-radius-vlak);
	overflow: hidden;
	transition: border-color var(--cyd-beweging), box-shadow var(--cyd-beweging);
}

/* Kaarten in dezelfde rij even hoog, ongeacht de lengte van de productnaam. */
.woocommerce ul.products.grid-cols {
	align-items: stretch;
}

.woocommerce ul.products li.product.loop-entry:hover {
	border-color: var(--cyd-lijn-sterk);
	box-shadow: 0 1px 2px rgb(11 58 102 / 6%), 0 8px 24px -12px rgb(11 58 102 / 22%);
}

.woocommerce ul.products li.product .woocommerce-loop-image-link {
	display: block;
	position: relative;
	background: var(--cyd-vlak);
	border-bottom: 1px solid var(--cyd-lijn);
}

.woocommerce ul.products li.product img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	padding: 1.25rem;
	mix-blend-mode: multiply; /* haalt de witte fotorand weg op het grijze vlak */
}

.woocommerce ul.products li.product .product-details {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem 1.25rem 1.5rem;
}

/* Productnamen bevatten maten (15 × 15 cm, 250 ml). Die lezen slecht in kapitalen,
   dus hier bewust normale schrijfwijze — wel in de kopletter van de site. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--cyd-kop);
	font-weight: 600;
	text-transform: none;
	font-size: 1.1875rem;
	line-height: 1.25;
	margin: 0;
	padding: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a {
	color: var(--cyd-blauw);
	text-decoration: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover {
	color: var(--cyd-groen-diep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce ul.products li.product .product-excerpt p {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--cyd-grijs);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.woocommerce ul.products li.product .price {
	font-family: var(--cyd-kop);
	font-weight: 600;
	font-size: 1.5rem;
	color: var(--cyd-blauw);
	margin: 0;
}

.cyd-kaart-staffel {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--cyd-groen-diep);
	background: var(--cyd-groen-zacht);
	border-radius: 2px;
	padding: 0.3125rem 0.5625rem;
	align-self: flex-start;
}

.cyd-kaart-staffel .cyd-icoon {
	width: 1rem;
	height: 1rem;
}

.cyd-badge {
	position: absolute;
	inset-block-start: 0.75rem;
	inset-inline-start: 0.75rem;
	z-index: 2;
	font-family: var(--cyd-kop);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--cyd-wit);
	background: var(--cyd-blauw);
	padding: 0.25rem 0.5rem;
	border-radius: 2px;
}

/* Kadence toont de bestelknop standaard alleen bij hover (absoluut gepositioneerd,
   opacity 0). Op een telefoon bestaat hover niet, dus is de knop daar onbereikbaar.
   Hier staat hij altijd in beeld, onderaan de kaart uitgelijnd. */
.woocommerce ul.products li.product .product-action-wrap {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	margin-top: auto;
	padding-top: 1rem;
	width: 100%;
}

.woocommerce ul.products li.product .product-action-wrap .button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	margin: 0;
	padding-block: 0.6875rem;
	font-size: 0.9375rem;
}

/* Kadence zet drie pictogrammen in de knop (toevoegen, bezig, gereed). Alleen het
   eerste hoort standaard zichtbaar te zijn. */
.woocommerce ul.products li.product .product-action-wrap .button .kadence-svg-iconset {
	flex: none;
}

/* Producten die nog niet leverbaar zijn krijgen een rustige, secundaire knop. */
.woocommerce ul.products li.product .product-action-wrap .button.product_type_simple:not(.add_to_cart_button),
.woocommerce ul.products li.product .product-action-wrap a.button:not(.add_to_cart_button) {
	background: var(--cyd-wit);
	color: var(--cyd-blauw);
	box-shadow: inset 0 0 0 1px var(--cyd-lijn-sterk);
}

.woocommerce ul.products li.product .product-action-wrap a.button:not(.add_to_cart_button):hover {
	background: var(--cyd-vlak);
	color: var(--cyd-blauw);
}

/* Sorteerbalk boven de producten */
.woocommerce .kadence-shop-top-row {
	border-bottom: 1px solid var(--cyd-lijn);
	padding-bottom: 0.875rem;
	margin-bottom: 1.75rem;
}

.woocommerce .woocommerce-result-count {
	/* was --cyd-grijs-zacht: haalde 4,5:1 net niet op het lichte vlak (audit 2026-08-24) */
	color: var(--cyd-grijs);
	font-size: 0.9375rem;
}

/* 4. Productpagina ------------------------------------------------------ */

.woocommerce div.product .woocommerce-product-gallery {
	background: var(--cyd-vlak);
	border: 1px solid var(--cyd-lijn);
	border-radius: var(--cyd-radius-vlak);
	padding: 1.5rem;
}

.woocommerce div.product .woocommerce-product-gallery img {
	mix-blend-mode: multiply;
}

.woocommerce div.product .flex-control-thumbs {
	display: flex;
	gap: 0.625rem;
	margin: 1rem 0 0;
	padding: 0;
}

.woocommerce div.product .flex-control-thumbs li {
	width: 4.5rem;
	margin: 0;
	list-style: none;
}

.woocommerce div.product .flex-control-thumbs img {
	border: 1px solid var(--cyd-lijn);
	border-radius: 2px;
	background: var(--cyd-wit);
	opacity: 1;
	transition: border-color var(--cyd-beweging);
}

.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover {
	border-color: var(--cyd-groen);
}

.woocommerce div.product .product_title {
	font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem);
	line-height: 1.08;
	margin-bottom: 0.75rem;
}

.woocommerce div.product p.price {
	font-family: var(--cyd-kop);
	font-weight: 600;
	font-size: 2rem;
	line-height: 1.1;
	color: var(--cyd-blauw);
	margin: 0 0 0.25rem;
}

.woocommerce div.product p.price::after {
	content: "Incl. btw";
	display: block;
	font-family: var(--cyd-tekst);
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--cyd-grijs-zacht);
	margin-top: 0.125rem;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--cyd-grijs);
	margin: 1rem 0 1.5rem;
	max-width: 42ch;
}

/* Staffeltabel — verfijning van de basis uit cyd-staffelkorting.php */
.woocommerce div.product table.cyd-staffel {
	max-width: 26rem;
	border: 1px solid var(--cyd-lijn);
	border-radius: var(--cyd-radius-vlak);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin-bottom: 1.75rem;
	font-size: 0.9375rem;
}

.woocommerce div.product table.cyd-staffel caption {
	font-family: var(--cyd-kop);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.875rem;
	letter-spacing: 0.03em;
	color: var(--cyd-blauw);
	background: var(--cyd-groen-zacht);
	text-align: left;
	padding: 0.625rem 0.875rem;
	border-bottom: 1px solid var(--cyd-lijn);
}

.woocommerce div.product table.cyd-staffel th,
.woocommerce div.product table.cyd-staffel td {
	padding: 0.5625rem 0.875rem;
	border-bottom: 1px solid var(--cyd-lijn);
	text-align: left;
}

.woocommerce div.product table.cyd-staffel thead th {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--cyd-grijs-zacht);
	background: var(--cyd-wit);
}

.woocommerce div.product table.cyd-staffel tbody tr:last-child th,
.woocommerce div.product table.cyd-staffel tbody tr:last-child td {
	border-bottom: 0;
}

.woocommerce div.product table.cyd-staffel tbody tr:last-child {
	background: var(--cyd-vlak);
	font-weight: 500;
}

/* Koopblok */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.woocommerce div.product form.cart .quantity input.qty {
	height: 100%;
	min-height: 3.25rem;
	width: 4.5rem;
	border: 1px solid var(--cyd-lijn-sterk);
	border-radius: var(--cyd-radius-knop);
	font-family: var(--cyd-kop);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--cyd-blauw);
	text-align: center;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1 1 14rem;
	min-height: 3.25rem;
	font-size: 1.0625rem;
	padding-inline: 1.75rem;
}

/* Op een telefoon past "Toevoegen aan winkelwagen" niet naast het aantalveld.
   Daar staat de knop op een eigen regel, over de volle breedte. */
@media (max-width: 35.99em) {
	.woocommerce div.product form.cart {
		flex-direction: column;
		align-items: stretch;
	}

	.woocommerce div.product form.cart .quantity input.qty {
		width: 100%;
		min-height: 3rem;
	}

	.woocommerce div.product form.cart .single_add_to_cart_button {
		white-space: normal;
		width: 100%;
	}

	/* Ruimte onder de galerij voor de miniaturen, die anders over de foto vallen. */
	.woocommerce div.product .woocommerce-product-gallery {
		padding: 1rem 1rem 1.25rem;
	}

	.woocommerce div.product .flex-control-thumbs {
		margin-top: 0.75rem;
	}
}

/* Zekerheid direct onder de knop */
.cyd-koopzekerheid {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.cyd-koopzekerheid li {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.9375rem;
	color: var(--cyd-grijs);
	margin: 0;
}

.woocommerce div.product .product_meta {
	border-top: 1px solid var(--cyd-lijn);
	padding-top: 1rem;
	font-size: 0.875rem;
	color: var(--cyd-grijs-zacht);
}

.woocommerce div.product .stock.cyd-binnenkort,
.woocommerce div.product .stock {
	font-size: 1rem;
	font-weight: 500;
}

/* 5. Secties onder de productpagina ------------------------------------- */

/* De galerij en de koopkolom zweven naast elkaar (float). Zonder clear zouden deze
   secties ertussen schuiven in plaats van eronder te komen. */
.woocommerce div.product .cyd-sectie {
	clear: both;
	width: 100%;
}

.cyd-sectie {
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--cyd-lijn);
}

.cyd-sectie__kolommen {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 0.85fr);
	gap: 3rem;
	align-items: start;
}

@media (max-width: 61.99em) {
	.cyd-sectie__kolommen {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

.cyd-prose {
	max-width: 68ch;
	color: var(--cyd-grijs);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.cyd-prose > p:first-of-type {
	font-size: 1.1875rem;
	line-height: 1.55;
	color: var(--cyd-blauw);
}

.cyd-prose h2 {
	font-family: var(--cyd-kop);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.125rem;
	letter-spacing: 0.02em;
	color: var(--cyd-blauw);
	margin: 2rem 0 0.625rem;
}

.cyd-prose ul {
	margin: 0 0 1rem;
	padding-left: 0;
	list-style: none;
}

.cyd-prose ul li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.4375rem;
}

/* Eigen opsommingsteken in het groen van het merk. */
.cyd-prose ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6875em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--cyd-groen);
	transform: translateY(-50%);
}

/* Specificaties als vaste kaart naast de tekst */
.cyd-specs {
	background: var(--cyd-vlak);
	border: 1px solid var(--cyd-lijn);
	border-radius: var(--cyd-radius-vlak);
	padding: 1.5rem;
	position: sticky;
	top: 6rem;
}

.cyd-specs__kop {
	font-size: 1rem;
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--cyd-lijn-sterk);
}

.cyd-specs__lijst {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem 1rem;
	margin: 0;
	font-size: 0.9375rem;
}

.cyd-specs__lijst dt {
	/* zie hierboven: contrast op het vlak van de specificatiekaart */
	color: var(--cyd-grijs);
	margin: 0;
}

.cyd-specs__lijst dd {
	margin: 0;
	color: var(--cyd-blauw);
	font-weight: 500;
	text-align: right;
}

@media (max-width: 61.99em) {
	.cyd-specs {
		position: static;
	}
}

/* Vragen: twee kolommen met een lijn erboven, geen uitklapmenu. */
.cyd-vragen {
	display: grid;
	gap: 0 4rem;
}

/* Twee kolommen leest rustiger dan drie: vier vragen vullen dan een net raster. */
@media (min-width: 48em) {
	.cyd-vragen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cyd-vraag {
	border-top: 1px solid var(--cyd-lijn);
	padding: 1.25rem 0;
}

.cyd-vraag h3 {
	font-family: var(--cyd-kop);
	font-weight: 600;
	font-size: 1.0625rem;
	text-transform: none;
	color: var(--cyd-blauw);
	margin: 0 0 0.375rem;
}

.cyd-vraag p {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--cyd-grijs);
	margin: 0;
	max-width: 46ch;
}

.woocommerce div.product section.related > h2 {
	font-family: var(--cyd-kop);
	font-weight: 600;
	text-transform: uppercase;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	color: var(--cyd-blauw);
	margin-bottom: 1.5rem;
}

.woocommerce div.product section.related {
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--cyd-lijn);
}

/* 6. Bestelbalk op mobiel ----------------------------------------------- */

.cyd-balk {
	display: none;
}

@media (max-width: 47.99em) {
	.cyd-balk:not([hidden]) {
		display: flex;
		align-items: center;
		gap: 1rem;
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 90;
		background: var(--cyd-wit);
		border-top: 1px solid var(--cyd-lijn);
		box-shadow: 0 -4px 20px -8px rgb(11 58 102 / 25%);
		padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
	}

	.cyd-balk__info {
		flex: 1 1 auto;
		min-width: 0;
	}

	.cyd-balk__titel {
		display: block;
		font-size: 0.8125rem;
		color: var(--cyd-grijs-zacht);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.cyd-balk__prijs {
		display: block;
		font-family: var(--cyd-kop);
		font-weight: 600;
		font-size: 1.25rem;
		color: var(--cyd-blauw);
		line-height: 1.2;
	}

	.cyd-balk__prijs .woocommerce-Price-amount {
		font-size: inherit;
	}

	.cyd-balk__knop {
		flex: none;
		font-family: var(--cyd-kop);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		font-size: 0.9375rem;
		color: var(--cyd-wit);
		background: var(--cyd-knop);
		border: 0;
		border-radius: var(--cyd-radius-knop);
		padding: 0.8125rem 1.25rem;
		cursor: pointer;
		transition: background-color var(--cyd-beweging);
	}

	.cyd-balk__knop:hover {
		background: var(--cyd-knop-hover);
	}
}

/* 7. Winkelwagen en afrekenen ------------------------------------------- */

.wc-block-components-product-name,
.wc-block-cart-item__wrap .wc-block-components-product-name {
	font-family: var(--cyd-kop);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--cyd-blauw);
	text-decoration: none;
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	color: var(--cyd-blauw);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--cyd-kop);
	font-weight: 600;
}

.wc-block-components-sale-badge,
.wc-block-components-product-badge {
	background: var(--cyd-groen-zacht);
	border-color: transparent;
	color: var(--cyd-groen-diep);
	font-weight: 500;
	border-radius: 2px;
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	font-family: var(--cyd-kop);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	background: var(--cyd-knop);
	border-radius: var(--cyd-radius-knop);
	min-height: 3.25rem;
	transition: background-color var(--cyd-beweging);
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--cyd-knop-hover);
}

.wc-block-components-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
	font-family: var(--cyd-kop);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--cyd-blauw);
}

.wc-block-components-text-input input,
.wc-block-components-select select {
	border-radius: var(--cyd-radius-vlak);
}

/* De winkelwagen- en afrekenpagina liepen op een breed scherm van rand tot rand, terwijl de
   rest van de site binnen een kolom van 1290px blijft. Dat maakte de winkelwagen breder dan
   welke andere pagina ook. */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
	max-width: var(--global-content-width, 1290px);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Minder motion voor wie daarom vraagt. */
@media (prefers-reduced-motion: reduce) {
	.woocommerce *,
	.cyd-balk * {
		transition-duration: 0.01ms !important;
	}
}