/* =============================================================
   3dartelier — kleur swatches
   Vervangt de standaard <select> voor het kleur-attribuut.
   ============================================================= */

.tda-native-select { display: none !important; }

.tda-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-bottom: var(--space-3);
}

/* Wrapper per swatch: cirkel boven + naam eronder */
.tda-swatch-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.tda-swatch-name {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted, #9a9a9a);
	text-align: center;
	line-height: 1;
	transition: color var(--dur-fast, 150ms) ease;
	white-space: nowrap;
}

/* Naam wordt accentkleur bij actieve swatch */
.tda-swatch-item:has(.tda-swatch.is-active) .tda-swatch-name {
	color: var(--color-primary, #1a1a1a);
	font-weight: 600;
}

.tda-swatch {
	--swatch: #cccccc;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--swatch);
	border: 1px solid var(--color-border);
	cursor: pointer;
	padding: 0;
	position: relative;
	transition: transform var(--dur-fast) var(--ease);
	box-shadow: inset 0 0 0 2px var(--color-surface);
}

.tda-swatch:hover { transform: scale(1.08); }

.tda-swatch.is-active {
	box-shadow:
		inset 0 0 0 2px var(--color-surface),
		0 0 0 2px var(--color-primary);
}

.tda-swatch:focus-visible {
	outline: 0;
	box-shadow:
		inset 0 0 0 2px var(--color-surface),
		0 0 0 2px var(--color-accent);
}

/* Witte / zeer lichte swatches krijgen een extra randje voor zichtbaarheid */
.tda-swatch[style*="#fff" i],
.tda-swatch[style*="#ffffff" i] {
	border-color: var(--color-border-strong);
}