/* ChromaLab Product Widget.
   The wheel block reuses the Filter widget's `.chromalab` markup + styles
   (chroma-filter.css), so this file only adds the product-specific bits:
   compact sizing, the reveal toggle, and the variation swatches. White
   surfaces, soft hairline swatches, theme typography (no bespoke font). */

.chromalab-product {
	/* Identity tokens mirror chroma-filter.css so both widgets read as one tool. */
	--cl-color-text: #171717;
	--cl-color-muted: #a3a3a3;
	--cl-color-border: #e5e5e5;
	--cl-color-track: #f0f0f0;

	width: 100%;
	box-sizing: border-box;
}

.chromalab-product *, .chromalab-product *::before, .chromalab-product *::after {
	box-sizing: border-box;
}

/* --- Wheel toggle (ChromaLab pill, not a generic grey button) --- */

.chromalab-product__wheel-toggle {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--cl-color-border);
	border-radius: 9999px;
	background: #fff;
	color: #525252;
	font-size: 13px;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
	margin-bottom: 12px;
}

.chromalab-product__wheel-toggle:hover,
.chromalab-product__wheel-toggle:focus-visible {
	border-color: var(--cl-color-text);
	color: var(--cl-color-text);
	outline: none;
}

/* --- Wheel block: transparent show/hide wrapper around the reused .chromalab --- */

.chromalab-product__wheel-wrap {
	margin-bottom: 16px;
}

.chromalab-product__wheel-wrap[hidden] {
	display: none;
}

/* Compact tuning: the picker lives in the product summary, so trim padding and
   gaps a touch versus the full-width archive filter. Wheel size comes from the
   inline --cl-wheel (widget "Wheel size" control). */
.chromalab-product .chromalab--in-product {
	--cl-gap: 14px;
	--cl-gap-body: 16px;
	padding: 0;
}

/* --- Swatches --- */

.chromalab-product__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.chromalab-product__swatch {
	/* Soft hairline (matches Results swatches) — no heavy black frame. */
	position: relative;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 50%;
	cursor: pointer;
	transition: box-shadow 0.12s, opacity 0.15s;
	padding: 0;
	flex-shrink: 0;
}

/* Hover: subtle contained inset ring — no scale, no outer ring, so nothing
   grows over neighbours in the dense grid. */
.chromalab-product__swatch:hover {
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.95), inset 0 0 0 3px rgba(0, 0, 0, 0.3);
}

/* Selected: a CONTAINED inset ring + centered check, legible on any swatch
   colour (white glyph + dark drop-shadow halo). No scale / no outer ring, so a
   selected swatch never grows over its neighbours in the dense grid. */
.chromalab-product__swatch--selected {
	box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px rgba(0, 0, 0, 0.6);
}

.chromalab-product__swatch--selected::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 6px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	transform: translate(-50%, -60%) rotate(45deg);
	filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.95));
	pointer-events: none;
}

/* Non-matching swatches when the wheel filter is active. 0.2 read as "broken";
   0.4 keeps them legible while clearly de-emphasised. */
.chromalab-product__swatch--dimmed {
	opacity: 0.4;
}

/* --- Variation info --- */

.chromalab-product__variation-info {
	/* Always-reserved one-line zone: hovering a swatch fills/empties the text
	   without ever shifting the content below (price, add-to-cart). */
	display: flex;
	align-items: center;
	min-height: 28px;
	padding: 4px 0;
}

.chromalab-product__variation-name {
	font-size: 13px;
	line-height: 1.3;
	color: var(--cl-color-text);
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

/* --- Mobile --- */

@media (max-width: 600px) {
	.chromalab-product__swatches {
		gap: 4px;
	}
}