.variation-swatches {
	--color-thumb: 1.75rem;
	--image-thumb: 5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
/* naam-swatch = klein outline-dark-knopje (was @extend .btn .btn-sm .btn-outline-dark) */
.variation-swatches > *:not(.color):not(.image) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem 0.5rem;
	font-size: var(--wcp-font-size-sm, 0.875rem);
	line-height: 1.5;
	cursor: pointer;
	text-decoration: none;
	color: var(--wcp-color-dark, #374151);
	background-color: transparent;
	border: 1px solid var(--wcp-color-dark, #374151);
	border-radius: var(--wcp-radius, 0.375rem);
	transition: all 0.2s ease-in-out;
}
.variation-swatches > *:not(.color):not(.image):hover,
.variation-swatches > *:not(.color):not(.image).active {
	color: #fff;
	background-color: var(--wcp-color-dark, #374151);
	border-color: var(--wcp-color-dark, #374151);
}
/* Naam-swatch met prijs per optie (wcp_variation_swatches_show_price): naam + prijs onder elkaar. */
/* :not(.color):not(.image) erbij: anders wint de algemene naam-swatch-regel hierboven (hogere specificiteit)
   en staan naam + prijs gecentreerd met de krappe knop-padding. */
.variation-swatches > .swatch--price:not(.color):not(.image) {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.125rem;
	padding: 0.375rem 0.75rem;
	line-height: 1.3;
}
.variation-swatches > .swatch--price .swatch__label {
	font-weight: var(--wcp-font-weight-semibold, 600);
}
.variation-swatches > .swatch--price .swatch__price {
	font-size: var(--wcp-font-size-xs, 0.75rem);
	opacity: 0.75;
}
.variation-swatches > *.color,
.variation-swatches > *.image {
	border: 1px solid var(--wcp-color-border, #e5e7eb);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.variation-swatches > *.color.active,
.variation-swatches > *.image.active {
	border-color: var(--wcp-color-primary, #873EFF);
}
.variation-swatches > *.color {
	width: var(--color-thumb);
	height: var(--color-thumb);
	border-radius: 50%;
}
.variation-swatches > *.color div {
	width: 75%;
	height: 75%;
	border-radius: 50%;
}
.variation-swatches > *.image {
	width: var(--image-thumb);
	height: var(--image-thumb);
	border-radius: var(--wcp-radius, 0.375rem);
}
.variation-swatches > *.image img {
	aspect-ratio: 1/1;
	width: 85%;
	height: 85%;
	object-fit: contain;
	border-radius: var(--wcp-radius, 0.375rem);
}
/* JS-getoggled beschikbaarheid + verborgen native select (waren Bootstrap .d-none) */
.variation-swatches .swatch.is-hidden { display: none; }
.variation-swatches .swatch.disabled { opacity: 0.4; cursor: not-allowed; }
/* Met WooCommerce's eigen selector: .woocommerce div.product form.cart .variations select zet
   display: inline-block en wint anders op specificiteit (Bootstrap's .d-none had !important). */
select.wcp-swatch-select,
.woocommerce div.product form.cart .variations select.wcp-swatch-select { display: none; }

/* FacetWP-color-integratie (ongewijzigd t.o.v. legacy, tokens waar relevant) */
.facetwp-type-color .facetwp-color-item {
	position: relative;
	width: max-content;
	margin: 0 0.5rem 0.5rem 0;
	gap: 0.5rem;
}
.facetwp-type-color .facetwp-color-item .facetwp-color {
	margin: 0 !important;
}
.facetwp-type-color .facetwp-color-item .facetwp-color:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: calc(100% - 0.5rem);
	height: calc(100% - 0.5rem);
	display: block !important;
}

/* Productpagina: swatches in dezelfde taal als de keuzelijsten en de stepper (rand in de randkleur, radius van het
   thema, merkkleur bij de keuze) i.p.v. een kaal zwart-omlijnd knopje en kleine kleurbolletjes. De productkaart
   houdt de compacte maten hierboven. */
.summary .variation-swatches { --color-thumb: 2.25rem; gap: 0.5rem; }
.summary .variation-swatches > *:not(.color):not(.image) {
	min-width: 3.25rem; /* maten (36, 37, … / S, M, L) als gelijke tegels */
	min-height: 2.75rem;
	padding: 0 0.9rem;
	border-color: var(--wcp-color-border);
	background-color: var(--wcp-color-surface);
	color: var(--wcp-color-dark);
	font-size: 0.9375rem;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.summary .variation-swatches > *:not(.color):not(.image):hover {
	border-color: var(--wcp-color-primary);
	background-color: var(--wcp-color-surface);
	color: var(--wcp-color-primary);
}
.summary .variation-swatches > *:not(.color):not(.image).active {
	border-color: var(--wcp-color-primary);
	background-color: color-mix(in srgb, var(--wcp-color-primary) 7%, var(--wcp-color-surface));
	box-shadow: inset 0 0 0 1px var(--wcp-color-primary);
	color: var(--wcp-color-primary);
}
.summary .variation-swatches > *.color { background-color: var(--wcp-color-surface); transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.summary .variation-swatches > *.color:hover { border-color: var(--wcp-color-primary); }
.summary .variation-swatches > *.color.active { border-color: var(--wcp-color-primary); box-shadow: 0 0 0 1px var(--wcp-color-primary); }
.summary .variation-swatches > *.color div { width: 72%; height: 72%; }
.summary .variation-swatches > .swatch:focus-visible { outline: 2px solid var(--wcp-color-primary); outline-offset: 2px; }
/* Prijs-swatch op de productpagina: kaartje met naam + prijs links uitgelijnd; de tegel-maten hierboven
   (vaste hoogte, padding 0 0.9rem) zijn voor korte maten als S/M/L en zouden 'm weer centreren. */
.summary .variation-swatches > .swatch--price:not(.color):not(.image) {
	min-height: 0;
	padding: 0.5rem 0.75rem;
	align-items: flex-start;
	text-align: start;
}
/* Niet leverbare keuze: doorgestreept en gedempt i.p.v. alleen doorzichtig — leest direct als "uitverkocht". */
.summary .variation-swatches > .swatch.disabled:not(.color):not(.image) { opacity: 1; color: var(--wcp-color-muted); text-decoration: line-through; background-color: var(--wcp-color-surface); border-color: var(--wcp-color-border); box-shadow: none; }
.summary .variation-swatches > .swatch.disabled.color { opacity: 0.35; }
/* Binnen een bundel- of samengesteld-productregel: kleinere tegels, het blijft een onderdeel van de regel. */
.summary :is(.bundled_product, .component_content) .variation-swatches { --color-thumb: 1.9rem; gap: 0.35rem; }
.summary :is(.bundled_product, .component_content) .variation-swatches > *:not(.color):not(.image) { min-width: 2.5rem; min-height: 2.15rem; padding: 0 0.6rem; font-size: 0.875rem; }