/* Eleganza per-product extras: Pasvorm fit indicator + Kleur swatches.
 * Loaded on top of woocommerce.css. Colors come from the theme CSS vars. */

/* ---------------------------------------------------------------------------
 * Kleur (color) variant swatches.
 * ------------------------------------------------------------------------- */
.product-colors {
	margin: 18px 0 22px;
}
.product-colors__label {
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--e-text);
	margin-bottom: 10px;
}
.product-colors__label span {
	opacity: .6;
	margin-right: 6px;
}
.product-colors__label strong {
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}
.product-colors__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.product-colors__swatch {
	display: block;
	width: 54px;
	height: 54px;
	border: 1px solid rgba(20, 24, 27, .18);
	border-radius: 4px;
	overflow: hidden;
	background: var(--e-alt, #f1f3f3);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.product-colors__swatch img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.product-colors__swatch:hover {
	border-color: rgba(20, 24, 27, .45);
}
.product-colors__swatch.is-active {
	border: 1px solid var(--e-text);
	box-shadow: 0 0 0 1px var(--e-text);
}

/* ---------------------------------------------------------------------------
 * Pasvorm (fit) indicator.
 * ------------------------------------------------------------------------- */
.product-fit {
	margin: 18px 0 22px;
	max-width: 320px;
}
.product-fit__label {
	font-weight: 700;
	font-size: .95rem;
	color: var(--e-text);
	margin-bottom: 14px;
}
.product-fit__track {
	position: relative;
	height: 2px;
	background: rgba(20, 24, 27, .18);
	border-radius: 2px;
	margin: 0 6px;
}
.product-fit__dot {
	position: absolute;
	top: 50%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--e-accent);
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 3px var(--e-bg, #fff);
}
.product-fit__scale {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	font-size: .64rem;
	letter-spacing: .08em;
	color: var(--e-text);
	opacity: .55;
}
.product-fit__note {
	margin-top: 12px;
	font-size: .82rem;
	line-height: 1.5;
	color: var(--e-text);
	opacity: .8;
}

@media (max-width: 640px) {
	.product-colors__swatch {
		width: 48px;
		height: 48px;
	}
	.product-fit {
		max-width: none;
	}
}