/**
 * Phänomen Variation UI
 *
 * Colour swatches (pa_farbe) and size chips (pa_groesse) for the single
 * variable product page.
 *
 * No font-family is declared anywhere — every control uses `font: inherit`
 * so typography comes from the page and the site keeps exactly one webfont
 * request. The only literal colour value used is `transparent`; every real
 * colour comes from the Breakdance palette variables aliased below.
 */

.pvu {
	/* Design tokens — Breakdance global palette. */
	--pvu-ink:        var(--bde-palette-color-1-1941ae39-5fd1-488e-917f-5d78aaaed343);
	--pvu-ink-soft:   var(--bde-palette-color-1-a0e2ca77-2d49-4263-a9d3-44ff3540307f);
	--pvu-ink-faint:  var(--bde-palette-color-1-958f4842-ed4f-48d9-908f-bfea722eb4e3);
	--pvu-canvas:     var(--bde-palette-color-1-381c0d3c-7dbc-412b-b42f-0e47e0edf035);
	--pvu-surface:    var(--bde-palette-color-1-ee680f71-e28d-4961-a89a-3fa5c9511c7a);
	--pvu-line:       var(--bde-palette-color-1-6ff98eb0-e04c-47a7-8d7e-46a642ad5286);
	--pvu-on-dark:    var(--bde-palette-color-1-c365544d-749a-494c-8a06-9f7575656729);

	/* Geometry. The swatch is specified from the inside out: a 32px colour
	   fill, a 4px gap, then a ring up to 2px. */
	--pvu-gap:          8px;
	--pvu-swatch-size:  32px;
	--pvu-swatch-pad:   4px;
	--pvu-swatch-ring:  2px;
	--pvu-swatch-box:   calc(
		var(--pvu-swatch-size) +
		(var(--pvu-swatch-pad) * 2) +
		(var(--pvu-swatch-ring) * 2)
	);
	--pvu-radius:       3px;
	--pvu-disabled:     0.25;

	display: block;
	margin: 0 0 24px;
}

/* --------------------------------------------------------------------------
 * Original Woo controls
 * The <select> elements stay in the DOM and remain the source of truth —
 * only their table rows are hidden.
 * ----------------------------------------------------------------------- */

form.variations_form table.variations tr.pvu-original-hidden {
	display: none;
}

form.variations_form table.variations.pvu-table-hidden {
	display: none;
}

form.variations_form a.reset_variations {
	display: none;
}

/* Attribute rows we do NOT take over (a real pa_material) keep their native
   dropdown. Breakdance uppercases the label, which reads inconsistently next
   to our sentence-case "Farbe" / "Grösse". Scoped to the variations table so
   it cannot affect any other Breakdance label. */
form.variations_form table.variations th.label label {
	text-transform: none;
}

/* --------------------------------------------------------------------------
 * Rows and labels
 * ----------------------------------------------------------------------- */

.pvu-row {
	display: block;
	margin: 0 0 20px;
}

.pvu-row:last-child {
	margin-bottom: 0;
}

/* Deliberately NOT flex: a flex gap would insert space between the label and
   the value, rendering "Farbe : Navy". Inline flow keeps the colon tight
   against the label — "Farbe: Navy" — while still wrapping naturally. */
.pvu-row__head {
	display: block;
	margin: 0 0 8px;
}

.pvu-row__label {
	font: inherit;
	font-weight: 500;
	color: var(--pvu-ink);
}

/* The selected value, shown next to the label. Phänomen's colour names are
   supplier codes ("890 navy") that a 32px circle cannot communicate, and
   tooltips do not exist on touch. Its text content carries its own leading
   ": " separator. */
.pvu-row__value {
	font: inherit;
	color: var(--pvu-ink-soft);
}

.pvu-row__value:empty {
	display: none;
}

/* --------------------------------------------------------------------------
 * Colour swatches
 *
 * Two-part construction: an outer ring frame with internal padding, holding a
 * filled circle. Selection is signalled by ring weight and colour only — no
 * checkmark, no scale change. The ring is an inset box-shadow over a
 * permanently transparent 2px border, so 1px → 2px never shifts layout.
 *
 * Breakdance ships `.breakdance *, ::before, ::after { box-sizing: border-box }`
 * in global-settings.css. That has the same specificity as a single class but
 * loads later, so it beats any `box-sizing` we declare. Rather than fight it,
 * the button opts into border-box explicitly and its outer size is derived
 * with calc(), and the fill is given explicit pixel dimensions instead of
 * 100% — so the colour area is 32×32 under either box model.
 * ----------------------------------------------------------------------- */

.pvu-swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pvu-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pvu-swatch {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pvu-swatch__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--pvu-swatch-box);
	height: var(--pvu-swatch-box);
	padding: var(--pvu-swatch-pad);
	margin: 0;
	border: var(--pvu-swatch-ring) solid transparent;
	border-radius: 999px;
	background: none;
	box-shadow: inset 0 0 0 1px var(--pvu-line);
	cursor: pointer;
	font: inherit;
	appearance: none;
	-webkit-appearance: none;
	transition: box-shadow 0.15s ease, opacity 0.15s ease;
}

.pvu-swatch__fill {
	display: block;
	box-sizing: border-box;
	width: var(--pvu-swatch-size);
	height: var(--pvu-swatch-size);
	flex: 0 0 auto;
	border-radius: 999px;
	/* Fill is set inline: a hex, a hard-stop gradient, or a variation image. */
	background: var(--pvu-fill, transparent);
	/* Hairline that keeps very light fills (white, chalk, milk) legible on a
	   light canvas. Derived from the palette rather than a literal colour;
	   browsers without color-mix() simply drop the declaration. */
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pvu-ink) 10%, transparent);
}

.pvu-swatch__btn:hover:not(:disabled) {
	box-shadow: inset 0 0 0 2px var(--pvu-ink-soft);
}

.pvu-swatch__btn:focus-visible {
	outline: 2px solid var(--pvu-ink);
	outline-offset: 2px;
}

.pvu-swatch.is-active .pvu-swatch__btn,
.pvu-swatch.is-active .pvu-swatch__btn:hover {
	box-shadow: inset 0 0 0 2px var(--pvu-ink);
}

.pvu-swatch__btn:disabled {
	opacity: var(--pvu-disabled);
	cursor: not-allowed;
}

/* --------------------------------------------------------------------------
 * Size chips
 * Square outlined chips, ~1:2 vertical:horizontal padding, small radius to
 * match the site's pill convention.
 * ----------------------------------------------------------------------- */

.pvu-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pvu-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pvu-chip {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pvu-chip__btn {
	display: inline-block;
	box-sizing: border-box;
	min-width: 44px;
	padding: 8px 16px;
	margin: 0;
	border: 1px solid var(--pvu-line);
	border-radius: var(--pvu-radius);
	background: transparent;
	color: var(--pvu-ink);
	cursor: pointer;
	font: inherit;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.pvu-chip__btn:hover:not(:disabled) {
	border-color: var(--pvu-ink-soft);
}

.pvu-chip__btn:focus-visible {
	outline: 2px solid var(--pvu-ink);
	outline-offset: 2px;
}

.pvu-chip.is-active .pvu-chip__btn,
.pvu-chip.is-active .pvu-chip__btn:hover {
	background: var(--pvu-ink);
	border-color: var(--pvu-ink);
	color: var(--pvu-on-dark);
}

.pvu-chip__btn:disabled {
	opacity: var(--pvu-disabled);
	cursor: not-allowed;
}

/* --------------------------------------------------------------------------
 * Reduced motion
 * ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.pvu-swatch__btn,
	.pvu-chip__btn {
		transition: none;
	}
}