/**
 * nouw-2026: size selector in the add-to-cart bar (single product page).
 *
 * Lays out the radio markup of woocommerce/single-product/add-to-cart/variable.php
 * (see inc/nouw-size-selector.php, js/nouw-size-selector.js). Overrides the
 * .select bar rules of css/app.css and css/nouw-a11y.css with the same chain.
 *
 * - The bar keeps the swatch colour (background set inline by js/scripts.js) and
 *   its white/black text; everything here uses currentColor.
 * - Sizes: one strip of evenly spaced numbers (equal widths, no boxes) that
 *   scrolls sideways when it must; the chosen size is underlined, hover shows a
 *   thin underline, sold-out stays struck through (nouw-a11y.css), the edges
 *   fade while there is more, the mouse can drag the strip.
 * - Phones: colour and size are native selects (OS picker) from two options on,
 *   side by side above a full-width add-to-cart button; underline only.
 */

.single-product .select form.variations_form {
	--nouw-size-cell: 2em;
	--nouw-size-row: 1.5em;
	--nouw-size-max: 20.5em; /* ten EU sizes fit; more scrolls */
	gap: 0 1.5em;
}

/* The table is only a layout table (role=presentation): its rows become flex
   children of the form so the parts can be ordered and wrapped on phones. */
.single-product .select form.variations_form .variations,
.single-product .select form.variations_form .variations tbody {
	display: contents;
	width: auto;
	height: auto;
	position: static;
}

.single-product .select form.variations_form .variations tr {
	display: flex;
	flex-direction: row;
	align-items: center;
	position: static;
	width: auto;
	padding: 0;
	margin: 0;
}

.single-product .select form.variations_form .variations tr.attribute-pa_farbe {
	flex: 0 1 auto;
	min-width: 0;
}

.single-product .select form.variations_form .variations tr.attribute-pa_grose {
	flex: 1 1 auto;
	min-width: 0;
	justify-content: center;
}

.single-product .select form.variations_form .variations td {
	padding: 0;
	display: flex;
	align-items: center;
	line-height: 1.2;
	max-width: none;
}

.single-product .select form.variations_form .variations td.label {
	margin-right: 0.6em;
	white-space: nowrap;
}

/* Helper span of the old plugin; the "Clear" link stays reachable */
.single-product .select form.variations_form .variations td.value > span.pa_colour {
	display: none;
}

.single-product .select form.variations_form .single_variation_wrap {
	flex: 0 0 auto;
	position: relative;
	right: auto;
}

/* ---------- the strip ---------- */

.single-product .select form.variations_form .attribute-pa_grose td.value {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start; /* centred overflowing content would be unreachable at the start */
	flex: 0 1 auto;
	min-width: 0;
	max-width: min(100%, var(--nouw-size-max));
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scroll-padding: 0 var(--nouw-size-cell);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x pan-y;
	white-space: nowrap;
}

.single-product .select form.variations_form .attribute-pa_grose td.value::-webkit-scrollbar {
	display: none;
}

.single-product .select form.variations_form .attribute-pa_grose td.value > div {
	display: block;
	flex: 0 0 auto;
	min-width: var(--nouw-size-cell); /* numbers share one width; words like "one size" may be wider */
	height: var(--nouw-size-row);
	margin: 0;
	position: relative;
	scroll-snap-align: center;
}

.single-product .select form.variations_form .attribute-pa_grose td.value > div label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0 0.3em;
	box-sizing: border-box;
	font-size: 0.86em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	/* the underline: 0 (none), 1px (hover) or 2px (chosen) */
	box-shadow: inset 0 calc(-1 * var(--nouw-size-line, 0px)) 0 0 currentColor;
	transition: box-shadow 0.15s;
}

.single-product .select form.variations_form .attribute-pa_grose td.value > div label:hover {
	--nouw-size-line: 1px;
}

.single-product .select form.variations_form .attribute-pa_grose input[type="radio"]:checked + label,
.single-product .select form.variations_form .attribute-pa_grose input[type="radio"]:checked + label:hover {
	--nouw-size-line: 2px;
}

/* The size row shows the choice by the underline, not the dot of the colour row */
.single-product .select form.variations_form .attribute-pa_grose input[type="radio"]:checked + label::after,
.single-product .select form.variations_form .attribute-pa_grose input[type="radio"] + label:hover::after {
	content: none;
}

/* Keyboard focus: ring inside the cell, so it isn't clipped by the scroller */
.single-product .select form.variations_form .attribute-pa_grose input[type="radio"]:focus-visible + label {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* Sold out: struck through (nouw-a11y.css) and greyed out, no underline on
   hover, no hand. Greyed via opacity so it works on every swatch bar colour;
   WCAG 1.4.3 exempts inactive controls from the contrast minimum, and the
   strike-through + screen-reader "sold out" still carry the meaning. */
.single-product .select form.variations_form .attribute-pa_grose input[type="radio"]:disabled + label,
.single-product .select form.variations_form .attribute-pa_grose label.out-of-stock {
	text-decoration: line-through;
	text-decoration-thickness: 0.07em;
	cursor: default;
	opacity: 0.4;
}

.single-product .select form.variations_form .attribute-pa_grose input[type="radio"]:disabled + label:hover,
.single-product .select form.variations_form .attribute-pa_grose label.out-of-stock:hover {
	--nouw-size-line: 0px;
}

/* "Clear" link after the sizes */
.single-product .select form.variations_form .attribute-pa_grose td.value > a.reset_variations {
	align-self: center;
	flex: 0 0 auto;
	padding: 0 0.6em;
	margin: 0;
	font-size: 0.75em;
	color: inherit;
}

/* Edge fades only on the side that has more */
.single-product .select form.variations_form .attribute-pa_grose.nouw-size-overflow td.value {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 1.4em, #000 calc(100% - 1.4em), transparent);
	mask-image: linear-gradient(to right, transparent, #000 1.4em, #000 calc(100% - 1.4em), transparent);
}

.single-product .select form.variations_form .attribute-pa_grose.nouw-size-overflow.nouw-size-at-start td.value {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.4em), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 1.4em), transparent);
}

.single-product .select form.variations_form .attribute-pa_grose.nouw-size-overflow.nouw-size-at-end td.value {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 1.4em);
	mask-image: linear-gradient(to right, transparent, #000 1.4em);
}

.single-product .select form.variations_form .attribute-pa_grose.nouw-size-overflow.nouw-size-at-start.nouw-size-at-end td.value {
	-webkit-mask-image: none;
	mask-image: none;
}

/* Mouse drag */
@media (hover: hover) and (pointer: fine) {
	.single-product .select form.variations_form .attribute-pa_grose.nouw-size-overflow td.value {
		cursor: grab;
	}

	.single-product .select form.variations_form .attribute-pa_grose.nouw-size-dragging td.value,
	.single-product .select form.variations_form .attribute-pa_grose.nouw-size-dragging td.value > div label {
		cursor: grabbing;
	}
}

/* ---------- native select (phones, many sizes) ---------- */

.single-product .select form.variations_form .nouw-size-select {
	display: none;
}


/* Arrows: real buttons that scroll the strip by about a page, shown only on
   the side that has more (in addition to the fades). aria-hidden + tabindex -1:
   keyboard users move through the radios with the arrow keys, and the strip
   follows the focused size. */
.single-product .select form.variations_form .nouw-size-arrow {
	display: none;
	flex: 0 0 auto;
	width: 1.3em;
	height: var(--nouw-size-row);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	position: relative;
	visibility: hidden;
}

.single-product .select form.variations_form .attribute-pa_grose.nouw-size-overflow .nouw-size-arrow {
	display: block;
}

.single-product .select form.variations_form .attribute-pa_grose.nouw-size-overflow:not(.nouw-size-at-start) .nouw-size-arrow--prev,
.single-product .select form.variations_form .attribute-pa_grose.nouw-size-overflow:not(.nouw-size-at-end) .nouw-size-arrow--next {
	visibility: visible;
}

/* hairline chevron in the bar's text colour */
.single-product .select form.variations_form .nouw-size-arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.42em;
	height: 0.42em;
	border-left: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translate(-30%, -50%) rotate(45deg);
}

.single-product .select form.variations_form .nouw-size-arrow--next::before {
	transform: translate(-70%, -50%) rotate(-135deg);
}

.single-product .select form.variations_form .nouw-size-arrow:hover::before {
	border-width: 2px;
}

/* ---------- phones (the theme switches by aspect ratio; width added for safety) ----------
   One row: colour | size (native select, or the strip for up to four sizes) | add to cart,
   each with its small label above. */

@media screen and (max-aspect-ratio: 800/1000), screen and (max-width: 640px) {
	.single-product .select {
		height: auto;
		min-height: var(--divider-height);
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		box-sizing: border-box;
	}

	.single-product .select form.variations_form {
		/* the theme's own phone type steps (--font-size = 5.9vw on phones):
		   75 % = shop tile names/prices, 56.25 % = filter bar / footer links */
		--nouw-bar-text: clamp(16px, calc(var(--font-size) * 0.75), 20px); /* ≥ 16 px: the select needs it on iOS, the rest matches */
		--nouw-bar-caption: clamp(11px, calc(var(--font-size) * 0.5625), 14px);
		--nouw-size-cell: 2em;
		--nouw-size-row: 2em; /* same height as the selects */
		--nouw-size-max: 100%;
		position: static;
		height: auto;
		width: 100%;
		padding: 0;
		flex-wrap: wrap; /* row 1: colour | size, row 2: the button, full width */
		align-items: flex-start; /* captions line up at the top, whatever the colour column's height */
		justify-content: flex-start;
		gap: 1em 1.4em; /* row gap: room above the button; column gap: between the two underlines */
	}

	.single-product .select form.variations_form .variations tr {
		flex-direction: column;
		align-items: flex-start;
	}

	.single-product .select form.variations_form .variations tr.attribute-pa_farbe {
		order: 1;
		flex: 1 1 0;
		min-width: 0;
	}

	/* colour and size share row 1 as two equal halves */
	.single-product .select form.variations_form .variations tr.attribute-pa_grose {
		order: 2;
		flex: 1 1 0;
		min-width: 0;
		margin: 0;
	}

	/* row 2: add to cart, full width */
	.single-product .select form.variations_form .single_variation_wrap {
		order: 3;
		flex: 1 0 100%;
		width: 100%;
		position: relative;
		right: auto;
		margin: 0;
	}

	.single-product .select form.variations_form .single_variation_wrap .woocommerce-variation-add-to-cart {
		display: flex;
		width: 100%;
	}

	.single-product .select form.variations_form .single_add_to_cart_button {
		flex: 1 1 auto;
		width: 100%;
		min-height: 44px;
		font-size: var(--nouw-bar-text);
		justify-content: center;
		text-align: center;
		white-space: nowrap;
	}

	/* small caption above each control */
	.single-product .select form.variations_form .variations tr .label {
		display: flex;
		margin: 0 0 0.2em;
		font-size: var(--nouw-bar-caption);
		line-height: 1.2;
		white-space: nowrap;
	}

	.single-product .select form.variations_form .variations tr.attribute-pa_farbe td.value {
		flex-wrap: wrap;
		gap: 0.15em 0.9em; /* room between colour names */
		line-height: 1.3;
		min-height: 2em; /* same height as the selects, so values sit on one line */
		align-content: center;
		font-size: var(--nouw-bar-text);
	}

	.single-product .select form.variations_form .variations tr.attribute-pa_farbe td.value label {
		font-size: inherit;
	}

	/* single size (e.g. one size): shown inline as text; the strip rules stay
	   as fallback if the select can't be built */
	.single-product .select form.variations_form .attribute-pa_grose td.value {
		flex: 0 1 auto;
		width: 100%;
		scroll-padding: 0 1.2em;
	}

	.single-product .select form.variations_form .attribute-pa_grose td.value > div {
		flex: 1 1 0;
		min-width: 2em;
	}

	/* a single size ("one size") reads as text like a single colour: left, underline under the word only */
	.single-product .select form.variations_form .attribute-pa_grose td.value > div:only-of-type {
		flex: 0 0 auto;
	}

	.single-product .select form.variations_form .attribute-pa_grose td.value > div:only-of-type label {
		justify-content: flex-start;
	}

	.single-product .select form.variations_form .attribute-pa_grose td.value > div label {
		font-size: var(--nouw-bar-text);
	}

	.single-product .select form.variations_form .attribute-pa_grose .nouw-size-arrow,
	.single-product .select form.variations_form .attribute-pa_grose.nouw-size-overflow .nouw-size-arrow {
		display: none;
	}

	/* native selects are the phone default from two options (js/nouw-size-selector.js) */
	.single-product .select form.variations_form .variations tr.nouw-size-native td.label {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		margin: 0;
	}

	.single-product .select form.variations_form .variations tr.nouw-size-native td.label > label {
		margin: 0 0 0.2em;
	}

	.single-product .select form.variations_form .variations tr.nouw-size-native td.value {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* each select underlines its whole half of the row */
	.single-product .select form.variations_form .nouw-size-select {
		display: block;
		position: relative;
		width: 100%;
		min-width: 0;
	}

	.single-product .select form.variations_form .nouw-size-select__field {
		appearance: none;
		-webkit-appearance: none;
		display: block;
		width: 100%;
		min-height: 2em; /* ≈ 33 px; shorter than before, still a comfortable tap target */
		margin: 0;
		padding: 0 1.4em 0.1em 0;
		border: 0;
		border-bottom: 1px solid currentColor;
		border-radius: 0;
		background: transparent;
		color: inherit;
		font-family: inherit;
		font-weight: inherit;
		font-size: max(16px, var(--nouw-bar-text)); /* same as the rest of the bar; ≥ 16 px so iOS doesn't zoom */
		line-height: 1.1;
		text-overflow: ellipsis;
		cursor: pointer;
	}

	.single-product .select form.variations_form .nouw-size-select__field:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}

	/* the arrow: a rotated hairline square, like the theme's carets */
	.single-product .select form.variations_form .nouw-size-select::after {
		content: "";
		position: absolute;
		right: 0.3em;
		top: 50%;
		width: 0.45em;
		height: 0.45em;
		border-right: 1px solid currentColor;
		border-bottom: 1px solid currentColor;
		transform: translateY(-70%) rotate(45deg);
		pointer-events: none;
	}

	/* The OS list renders the options; keep them legible on dark bars in browsers that style them */
	.single-product .select form.variations_form .nouw-size-select__field option {
		color: #000;
		background: #fff;
	}
}

@media (prefers-reduced-motion: reduce) {
	.single-product .select form.variations_form .attribute-pa_grose td.value {
		scroll-behavior: auto;
	}

	.single-product .select form.variations_form .attribute-pa_grose td.value > div label {
		transition: none;
	}
}