/**
 * Cool Bear UK — Product Configurator (Phase 8 — plan 08-06).
 *
 * Renders inside the WC add-to-cart form, above the add-to-cart button. Uses
 * theme.json design tokens (CSS custom properties) exclusively — no literal
 * brand colours. Dark-mode aware via the existing dark theme palette.
 *
 * Breakpoints:
 *   - Mobile: 320–767px (single column, large touch targets)
 *   - Tablet: 768–1023px
 *   - Desktop: 1024px+
 *
 * @package Cool_Bear_Core
 * @since   1.1.0
 */

/* ─── Container ──────────────────────────────────────────────────────────── */

.cb-configurator {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: var(--wp--preset--spacing--40, 24px) 0;
	padding: var(--wp--preset--spacing--40, 24px);
	background: var(--wp--preset--color--surface, #18181C);
	border: 1px solid var(--wp--preset--color--border, #2E2E38);
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--sans, "DM Sans", sans-serif);
	color: var(--wp--preset--color--text, #F0F0F2);
}

/* Tighten + visually divide successive addon groups so the operator can
 * tell where "Front spring rate" ends and "Rear spring rate" begins. */
.cb-configurator .cb-addon-group + .cb-addon-group {
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--border, #2E2E38);
}

.cb-configurator .cb-addon-group--numeric_range {
	gap: 8px;
}

.cb-configurator .cb-addon-group__hint {
	margin: 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--text-muted, #9898A8);
	line-height: 1.35;
}

.cb-configurator .cb-addon-group__upcharge-note {
	color: var(--wp--preset--color--accent, #E8FF00);
	font-weight: 600;
}

.cb-configurator.is-invalid {
	/* Subtle border tint when required groups unsatisfied. */
	border-color: var(--wp--preset--color--warning, #F59E0B);
}

/* ─── Group ──────────────────────────────────────────────────────────────── */

.cb-addon-group {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30, 16px);
}

.cb-addon-group__label {
	display: block;
	font-size: var(--wp--preset--font-size--body, 1rem);
	font-weight: 600;
	color: var(--wp--preset--color--text, #F0F0F2);
	letter-spacing: -0.005em;
}

.cb-addon-group__unit {
	font-weight: 400;
	color: var(--wp--preset--color--text-muted, #9898A8);
}

.cb-addon-group__req {
	color: var(--wp--preset--color--accent, #E8FF00);
	margin-left: 2px;
}

.cb-addon-group__options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20, 8px);
}

/* ─── Option (radio / multi_radio button style) ──────────────────────────── */

.cb-addon-option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 16px;
	background: var(--wp--preset--color--surface-raised, #222228);
	border: 1px solid var(--wp--preset--color--border, #2E2E38);
	border-radius: 6px;
	cursor: pointer;
	transition: border-color 120ms ease, background-color 120ms ease;
	user-select: none;
}

.cb-addon-option:hover {
	border-color: var(--wp--preset--color--text-muted, #9898A8);
}

.cb-addon-option.is-selected {
	border-color: var(--wp--preset--color--accent, #E8FF00);
	background: var(--wp--preset--color--surface-raised, #222228);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent, #E8FF00);
}

.cb-addon-option.is-focused,
.cb-addon-option:focus-within {
	outline: 2px solid var(--wp--preset--color--accent, #E8FF00);
	outline-offset: 2px;
}

/* Hide the actual radio input visually but keep it in the a11y tree. */
.cb-addon-option__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cb-addon-option__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--wp--preset--font-size--body, 1rem);
	color: var(--wp--preset--color--text, #F0F0F2);
}

.cb-addon-option__price {
	color: var(--wp--preset--color--text-muted, #9898A8);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/* Visually-hidden helper for swatch labels (the colour circle is the visual). */
.cb-addon-option__visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ─── Swatch (caliper colour etc.) ───────────────────────────────────────── */

/* Uniform tile grid — every swatch option (PNG render OR flat anodised colour)
   sits in an identical cell. No more circle-vs-oblong mismatch. */
.cb-addon-group--swatch .cb-addon-group__options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 12px;
}

.cb-addon-option--swatch {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	max-width: none;
	min-height: 0;
	padding: 6px;
	background: var(--wp--preset--color--surface-raised, #222228);
	border: 2px solid var(--wp--preset--color--border, #2E2E38);
	border-radius: 10px;
	justify-content: flex-start;
	align-items: stretch;
}

.cb-addon-option--swatch:hover {
	border-color: var(--wp--preset--color--text-muted, #9898A8);
}

.cb-addon-option--swatch.is-selected {
	border-color: var(--wp--preset--color--accent, #E8FF00);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent, #E8FF00);
}

/* Shared media box — image tile and colour chip occupy the IDENTICAL footprint:
   same width, same 4:3 aspect, object-fit:cover so variable-resolution PNGs are
   normalised into one box instead of rendering at their intrinsic size. */
.cb-swatch-tile,
.cb-swatch-circle {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 6px;
	overflow: hidden;
	position: relative;
	background: #0c0c10;
	border: 1px solid rgba(255, 255, 255, 0.06);
	transition: transform 160ms ease;
}

.cb-swatch-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cb-addon-option--swatch:hover .cb-swatch-tile,
.cb-addon-option--swatch:hover .cb-swatch-circle {
	transform: scale(1.03);
}

/* Selected indicator — accent corner badge, legible over a photo or a flat colour. */
.cb-addon-option--swatch.is-selected .cb-swatch-tile::after,
.cb-addon-option--swatch.is-selected .cb-swatch-circle::after {
	content: "";
	position: absolute;
	top: 6px;
	right: 6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent, #E8FF00);
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
}

.cb-swatch-tile__caption {
	display: block;
	font-size: 0.72rem;
	line-height: 1.25;
	text-align: center;
	color: var(--wp--preset--color--contrast, #f5f5f7);
}

.cb-swatch-tile__caption .cb-addon-option__price {
	display: block;
	color: var(--wp--preset--color--accent, #E8FF00);
}

/* Dynamically-unavailable option (e.g. carbon-ceramic when the chosen disc size
   has no carbon price) — greyed and unclickable; the input is also disabled. */
.cb-addon-option.is-unavailable {
	opacity: 0.4;
	filter: grayscale(1);
	pointer-events: none;
}
.cb-addon-option.is-unavailable .cb-addon-option__price {
	color: var(--wp--preset--color--text-muted, #9aa0a6);
}

@media (max-width: 575px) {
	.cb-addon-group--swatch .cb-addon-group__options {
		grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
		gap: 8px;
	}
}

/* ─── Group "?" help tooltip ──────────────────────────────────────────────
   A small yellow-underlined "?" beside the group label; reveals a short
   tooltip on hover / keyboard focus / tap (tap handled by configurator.js). */
.cb-addon-help {
	position: relative;
	display: inline-block;
	margin-left: 5px;
	vertical-align: middle;
}

.cb-addon-help__btn {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	width: 15px;
	height: 17px;
	padding: 0;
	font-size: 0.74rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--accent, #E8FF00);
	background: transparent;
	border: 0;
	border-bottom: 1.5px solid var(--wp--preset--color--accent, #E8FF00);
	border-radius: 0;
}

.cb-addon-help__tip {
	position: absolute;
	left: -6px;
	top: calc(100% + 8px);
	z-index: 30;
	display: none;
	width: max-content;
	max-width: 240px;
	padding: 10px 12px;
	font-size: 0.78rem;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wp--preset--color--contrast, #f5f5f7);
	background: var(--wp--preset--color--surface, #18181c);
	border: 1px solid var(--wp--preset--color--border, #2E2E38);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.cb-addon-help:hover .cb-addon-help__tip,
.cb-addon-help:focus-within .cb-addon-help__tip,
.cb-addon-help__btn[aria-expanded="true"] + .cb-addon-help__tip {
	display: block;
}

/* ─── Section sub-heading inside a swatch group (full-width row break) ─────── */
.cb-addon-section {
	grid-column: 1 / -1;
	margin: 6px 0 -2px;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted, #9898A8);
}
.cb-addon-section:first-child { margin-top: 0; }

/* Pantone code field — a full-width row inside the grid (sits beneath the
   painted row), revealed only when the Custom Color option is selected. */
.cb-pantone-field {
	grid-column: 1 / -1;
	display: none;
	flex-direction: column;
	gap: 4px;
	margin-top: 4px;
	width: 100%;
}
.cb-addon-group--swatch:has(.cb-pantone-trigger:checked) .cb-pantone-field {
	display: flex;
}
.cb-pantone-field__label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #f5f5f7);
}
.cb-pantone-field__input {
	padding: 8px 10px;
	border: 1px solid var(--wp--preset--color--border, #2E2E38);
	border-radius: 6px;
	background: var(--wp--preset--color--surface, #18181c);
	color: var(--wp--preset--color--contrast, #f5f5f7);
	max-width: 260px;
}
.cb-pantone-field__hint {
	font-size: 0.72rem;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
}

/* Generic custom-text field (Custom PCD / Custom bore) — a full-width row that
   follows the options grid, revealed only when its trigger option is selected.
   Works for plain radio groups too (not just swatch). */
.cb-custom-field {
	display: none;
	flex-direction: column;
	gap: 4px;
	margin-top: 8px;
	width: 100%;
}
.cb-addon-group:has(.cb-custom-trigger:checked) .cb-custom-field {
	display: flex;
}
.cb-custom-field__label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #f5f5f7);
}
.cb-custom-field__input {
	padding: 8px 10px;
	border: 1px solid var(--wp--preset--color--border, #2E2E38);
	border-radius: 6px;
	background: var(--wp--preset--color--surface, #18181c);
	color: var(--wp--preset--color--contrast, #f5f5f7);
	max-width: 260px;
}
.cb-custom-field__hint {
	font-size: 0.72rem;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
}

/* Colour-picker field (wheel rim / spoke) — a visual swatch + paint-code input,
   revealed when the "Custom colour" option is selected in a swatch group. */
.cb-color-field {
	grid-column: 1 / -1;
	display: none;
	flex-direction: column;
	gap: 6px;
	margin-top: 6px;
	width: 100%;
}
.cb-addon-group--swatch:has(.cb-color-trigger:checked) .cb-color-field {
	display: flex;
}
.cb-color-field__row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.cb-color-field__swatch {
	width: 46px;
	height: 38px;
	padding: 2px;
	border: 1px solid var(--wp--preset--color--border, #2E2E38);
	border-radius: 8px;
	background: var(--wp--preset--color--surface, #18181c);
	cursor: pointer;
	flex: 0 0 auto;
}
.cb-color-field__value {
	font-family: ui-monospace, monospace;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--contrast, #f5f5f7);
}
.cb-color-field__hint {
	font-size: 0.72rem;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
}

@media (prefers-reduced-motion: reduce) {
	.cb-swatch-tile img,
	.cb-addon-option--swatch:hover .cb-swatch-tile img {
		transition: none;
		transform: none;
	}
}

/* ─── Numeric range — slider + stepper ───────────────────────────────────── */

.cb-addon-group--numeric_range {
	gap: var(--wp--preset--spacing--20, 8px);
}

.cb-numeric-range {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--wp--preset--spacing--20, 8px);
}

.cb-numeric-range__step {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--surface-raised, #222228);
	color: var(--wp--preset--color--text, #F0F0F2);
	border: 1px solid var(--wp--preset--color--border, #2E2E38);
	border-radius: 6px;
	font-size: 1.25rem;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.cb-numeric-range__step:hover:not(:disabled) {
	border-color: var(--wp--preset--color--accent, #E8FF00);
	color: var(--wp--preset--color--accent, #E8FF00);
}

.cb-numeric-range__step:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #E8FF00);
	outline-offset: 2px;
}

.cb-numeric-range__step:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.cb-numeric-range__value {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	padding: 8px 12px;
	background: var(--wp--preset--color--base, #0D0D0F);
	color: var(--wp--preset--color--text, #F0F0F2);
	border: 1px solid var(--wp--preset--color--border, #2E2E38);
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 1.125rem;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.cb-numeric-range__value::-webkit-outer-spin-button,
.cb-numeric-range__value::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.cb-numeric-range__value:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #E8FF00);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--accent, #E8FF00);
}

.cb-numeric-range__value[readonly] {
	background: var(--wp--preset--color--surface, #18181C);
	cursor: not-allowed;
	opacity: 0.7;
}

.cb-numeric-range__unit {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--text-muted, #9898A8);
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	min-width: 3.5em;
}

/* Range slider — webkit + firefox track/thumb. */
.cb-numeric-range__slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	background: var(--wp--preset--color--border, #2E2E38);
	border-radius: 3px;
	outline: none;
	margin: var(--wp--preset--spacing--20, 8px) 0 0;
	cursor: pointer;
}

.cb-numeric-range__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent, #E8FF00);
	border: 2px solid var(--wp--preset--color--base, #0D0D0F);
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	transition: transform 120ms ease;
}

.cb-numeric-range__slider::-webkit-slider-thumb:hover {
	transform: scale(1.1);
}

.cb-numeric-range__slider::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent, #E8FF00);
	border: 2px solid var(--wp--preset--color--base, #0D0D0F);
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.cb-numeric-range__slider:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #E8FF00);
	outline-offset: 4px;
	border-radius: 6px;
}

.cb-numeric-range__slider:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.cb-numeric-range__bounds {
	display: flex;
	justify-content: space-between;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--text-muted, #9898A8);
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	margin-top: 2px;
}

/* Preset chips. */
.cb-numeric-range__presets {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--wp--preset--spacing--20, 8px);
}

.cb-numeric-range__preset {
	min-height: 36px;
	padding: 6px 14px;
	background: transparent;
	color: var(--wp--preset--color--text-muted, #9898A8);
	border: 1px solid var(--wp--preset--color--border, #2E2E38);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	cursor: pointer;
	transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}

.cb-numeric-range__preset:hover {
	border-color: var(--wp--preset--color--text, #F0F0F2);
	color: var(--wp--preset--color--text, #F0F0F2);
}

.cb-numeric-range__preset.is-selected {
	background: var(--wp--preset--color--accent, #E8FF00);
	color: var(--wp--preset--color--text-on-accent, #0D0D0F);
	border-color: var(--wp--preset--color--accent, #E8FF00);
}

.cb-numeric-range__preset:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #E8FF00);
	outline-offset: 2px;
}

/* ─── Live total summary ─────────────────────────────────────────────────── */

.cb-configurator__summary {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding-top: var(--wp--preset--spacing--30, 16px);
	border-top: 1px solid var(--wp--preset--color--border, #2E2E38);
	flex-wrap: wrap;
}

.cb-configurator__summary-label {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--text-muted, #9898A8);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.cb-configurator__summary-price {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--text, #F0F0F2);
	font-family: var(--wp--preset--font-family--sans, "DM Sans", sans-serif);
	font-feature-settings: "tnum" 1;
	margin-left: auto;
}

.cb-configurator__summary-vat {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--text-muted, #9898A8);
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.cb-configurator {
		padding: var(--wp--preset--spacing--30, 16px);
		gap: var(--wp--preset--spacing--30, 16px);
	}

	.cb-addon-group__options {
		gap: 8px;
	}

	.cb-addon-option {
		flex: 1 1 auto;
		justify-content: center;
		min-height: 48px; /* Larger touch target on mobile. */
	}

	.cb-addon-option--swatch {
		flex: 0 1 auto;
	}

	.cb-numeric-range__step {
		min-width: 48px;
		min-height: 48px;
	}

	.cb-numeric-range__value {
		min-height: 48px;
		font-size: 1rem;
	}

	.cb-configurator__summary-price {
		margin-left: 0;
		width: 100%;
	}
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.cb-addon-option,
	.cb-numeric-range__step,
	.cb-numeric-range__value,
	.cb-numeric-range__slider::-webkit-slider-thumb,
	.cb-numeric-range__preset,
	.cb-swatch-circle {
		transition: none;
	}

	.cb-addon-option--swatch:hover .cb-swatch-circle,
	.cb-numeric-range__slider::-webkit-slider-thumb:hover {
		transform: none;
	}
}

/* ─── Checkbox addon (plan 08-10) — DCK + future optional add-ons ───────── */

.cb-addon-group--checkbox {
	gap: var(--wp--preset--spacing--20, 8px);
}

.cb-addon-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 10px 16px;
	box-sizing: border-box; /* width:100% + padding must not overflow the group box. */
	background: var(--wp--preset--color--surface-raised, #222228);
	border: 1px solid var(--wp--preset--color--border, #2E2E38);
	border-radius: 6px;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	color: var(--wp--preset--color--text, #F0F0F2);
	transition: border-color 120ms ease, background-color 120ms ease;
	width: 100%;
}

.cb-addon-checkbox:hover,
.cb-addon-checkbox.is-focused {
	border-color: var(--wp--preset--color--text-muted, #9898A8);
}

.cb-addon-checkbox.is-selected {
	border-color: var(--wp--preset--color--accent, #E8FF00);
	background: color-mix(in srgb, var(--wp--preset--color--accent, #E8FF00) 8%, var(--wp--preset--color--surface-raised, #222228));
}

.cb-addon-checkbox__input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	cursor: pointer;
	accent-color: var(--wp--preset--color--accent, #E8FF00);
}

.cb-addon-checkbox__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #E8FF00);
	outline-offset: 2px;
}

.cb-addon-checkbox__label {
	flex: 1 1 auto;
	font-weight: 500;
	color: inherit;
}

.cb-addon-checkbox__price {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--text-muted, #9898A8);
	background: var(--wp--preset--color--surface, #18181C);
	padding: 2px 8px;
	border-radius: 999px;
}

.cb-addon-checkbox.is-selected .cb-addon-checkbox__price {
	color: var(--wp--preset--color--text, #F0F0F2);
}

/* ─── High-contrast / forced-colors mode ─────────────────────────────────── */

@media (forced-colors: active) {
	.cb-addon-option,
	.cb-numeric-range__step,
	.cb-numeric-range__value,
	.cb-numeric-range__preset,
	.cb-addon-checkbox {
		border-color: ButtonBorder;
		background: ButtonFace;
		color: ButtonText;
	}

	.cb-addon-option.is-selected,
	.cb-numeric-range__preset.is-selected,
	.cb-addon-checkbox.is-selected {
		border-color: Highlight;
		background: Highlight;
		color: HighlightText;
	}
}

/* ---------------------------------------------------------------------------
 *  Spring-rate "Customise" disclosure (operator brief 2026-06): numeric ranges
 *  ship collapsed to the recommended value; the slider/stepper/presets only
 *  appear when the buyer opens it. Keeps the buybox compact + prevents casual
 *  mis-tuning while still allowing custom rates.
 * ------------------------------------------------------------------------- */
.cb-springrate {
	margin-top: 6px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.02);
}
.cb-springrate__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 12px;
	cursor: pointer;
	list-style: none;
	font-size: 0.875rem;
}
.cb-springrate__summary::-webkit-details-marker { display: none; }
.cb-springrate__summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #c8102e);
	outline-offset: 2px;
}
.cb-springrate__rec strong { font-variant-numeric: tabular-nums; }
.cb-springrate__tag {
	margin-left: 6px;
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-subtle, #9a9aa2);
}
.cb-springrate__toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: none;
	font-size: 0.76rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, #c8102e);
}
.cb-springrate__toggle::after {
	content: "\25BE";
	transition: transform 150ms ease;
}
.cb-springrate[open] .cb-springrate__toggle::after { transform: rotate(180deg); }
.cb-springrate__body {
	padding: 2px 12px 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ─── a11y: validation live region + aria-disabled ATC (Deploy-3 jxn) ─────────
   The add-to-cart button is now kept focusable (aria-disabled, not `disabled`)
   so SR users can focus it and hear the blocked-submit announcement. The button
   no longer gets the native `:disabled` greying, so re-apply an inactive look
   for sighted users via the aria-disabled attribute. */
form.cart button[type="submit"][aria-disabled="true"],
form.cart .single_add_to_cart_button[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Polite validation error — naming the first unmet group. Visually collapses
   when empty (no text = no box), shows in the warning colour when populated. */
.cb-configurator__error {
	margin-top: 10px;
	color: var(--wp--preset--color--warning, #F59E0B);
	font-size: 0.85rem;
	line-height: 1.4;
}
.cb-configurator__error:empty {
	margin-top: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
 *  Forged-wheel configurator — compact, premium layout pass (operator 2026-06-27).
 *  Scoped to .single-cb_forged_wheel so the coilover/brake configurators (already
 *  operator-approved) are untouched. Defensive box-sizing prevents full-width
 *  pills/checkbox rows from overhanging the padded group box.
 * ------------------------------------------------------------------------- */
.cb-addon-option,
.cb-addon-option--swatch,
.cb-addon-checkbox,
.cb-addon-group__options {
	box-sizing: border-box;
}

/* Tighter vertical rhythm — less dead space between label and options, and
   between successive groups, so the long wheel option list doesn't sprawl. */
.single-cb_forged_wheel .cb-configurator {
	gap: 10px;
	padding: 18px;
}
.single-cb_forged_wheel .cb-addon-group {
	gap: 5px;
}
.single-cb_forged_wheel .cb-configurator .cb-addon-group + .cb-addon-group {
	padding-top: 8px;
}
.single-cb_forged_wheel .cb-addon-group__label {
	font-size: 0.95rem;
}

/* Colour / hardware swatches: a fixed 4-column grid (was auto-fill ≈5+), tighter
   gaps. 3 columns on small phones. */
.single-cb_forged_wheel .cb-addon-group--swatch .cb-addon-group__options {
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}
.single-cb_forged_wheel .cb-swatch-tile__caption {
	font-size: 0.68rem;
}
@media (max-width: 575px) {
	.single-cb_forged_wheel .cb-addon-group--swatch .cb-addon-group__options {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Side-by-side row (Width + Offset) — two compact columns instead of two
   full-width blocks. The .cb-addon-row is the divided unit; its inner groups
   drop the per-group top divider. */
.cb-addon-row {
	display: flex;
	gap: 14px;
	box-sizing: border-box;
}
.cb-addon-row > .cb-addon-group {
	flex: 1 1 0;
	min-width: 0;
}
.cb-addon-row > .cb-addon-group + .cb-addon-group {
	border-top: 0;
	padding-top: 0;
}
.single-cb_forged_wheel .cb-configurator > .cb-addon-row + .cb-addon-group,
.single-cb_forged_wheel .cb-configurator > .cb-addon-group + .cb-addon-row,
.single-cb_forged_wheel .cb-configurator > .cb-addon-row + .cb-addon-row {
	padding-top: 10px;
	border-top: 1px solid var(--wp--preset--color--border, #2E2E38);
}
@media (max-width: 575px) {
	.cb-addon-row {
		flex-direction: column;
		gap: 8px;
	}
}

/* Chosen-options recap (wheels) — compact, collapsible "Your configuration"
   list above the price so the buyer can review the long option set. */
.cb-config-recap {
	margin-top: 2px;
	padding-top: 10px;
	border-top: 1px solid var(--wp--preset--color--border, #2E2E38);
}
.cb-config-recap__title {
	cursor: pointer;
	list-style: none;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted, #9898A8);
}
.cb-config-recap__title::-webkit-details-marker { display: none; }
.cb-config-recap__title::after { content: " \25BE"; }
.cb-config-recap[open] .cb-config-recap__title::after { content: " \25B4"; }
.cb-config-recap__list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 18px;
}
.cb-config-recap__item {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 0.78rem;
	line-height: 1.4;
	padding: 2px 0;
	border-bottom: 1px dotted rgba(255, 255, 255, 0.06);
}
.cb-config-recap__k {
	color: var(--wp--preset--color--text-muted, #9898A8);
	white-space: nowrap;
}
.cb-config-recap__v {
	color: var(--wp--preset--color--text, #F0F0F2);
	text-align: right;
	font-weight: 500;
}
.cb-config-recap__price {
	color: var(--wp--preset--color--accent, #E8FF00);
	margin-left: 6px;
}
@media (max-width: 575px) {
	.cb-config-recap__list { grid-template-columns: 1fr; }
}

/* Colour swatches — XYZ's full "Forged Wheels Colors" chart cell (round swatch +
   baked S-code/name on black). Show the whole portrait cell contained on black;
   the duplicate text caption is visually hidden (kept for screen readers). */
.cb-addon-group--colour .cb-swatch-tile {
	aspect-ratio: 274 / 374;
	background: #000;
	border-color: rgba(255, 255, 255, 0.10);
}
.cb-addon-group--colour .cb-swatch-tile img {
	object-fit: contain;
}
.cb-addon-group--colour .cb-swatch-tile__caption {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Vehicle gate — wheels can't be added until a car is selected. Prominent
   accent banner at the top of the configurator; the buy button is also held
   (aria-disabled) by configurator.js until a car is set. */
.cb-configurator__vehicle-gate {
	margin: 0 0 2px;
	padding: 10px 12px;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--wp--preset--color--text, #F0F0F2);
	background: color-mix(in srgb, var(--wp--preset--color--accent, #E8FF00) 12%, var(--wp--preset--color--surface, #18181C));
	border: 1px solid var(--wp--preset--color--accent, #E8FF00);
	border-radius: 6px;
}

/* ───────────────────────────────────────────────────────────────────────────
 *  Configurator tidy-up pass (operator 2026-06-27): inline help subtitles,
 *  collapsed colour pickers, and dropdowns for hardware — calmer, consistent.
 * ------------------------------------------------------------------------- */

/* Inline help subtitle — replaces the hover-only "?" affordance. Small, muted,
   sits directly under the group label. */
.cb-addon-group__sub {
	margin: -3px 0 0;
	font-size: 0.76rem;
	line-height: 1.35;
	color: var(--wp--preset--color--text-muted, #9898A8);
	max-width: 58ch;
}
.cb-addon-group__sub--checkbox {
	margin: 2px 0 0;
}

/* Collapsed colour picker — a compact summary row (selected swatch + name +
   "Change") that expands the full swatch grid. Keeps the 35-colour list from
   dominating the page. */
.cb-colour-picker > .cb-addon-group__options,
.cb-colour-picker > .cb-addon-group__sub {
	display: none;
}
.cb-colour-picker[open] > .cb-addon-group__options {
	display: grid;
	margin-top: 8px;
	padding: 10px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--wp--preset--color--border, #2E2E38);
	border-radius: 8px;
}
.cb-colour-picker[open] > .cb-addon-group__sub {
	display: block;
	margin-top: 8px;
}
.cb-colour-picker__summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	list-style: none;
	cursor: pointer;
	background: var(--wp--preset--color--surface-raised, #222228);
	border: 1px solid var(--wp--preset--color--border, #2E2E38);
	border-radius: 8px;
	transition: border-color 120ms ease;
}
.cb-colour-picker__summary::-webkit-details-marker { display: none; }
.cb-colour-picker__summary:hover { border-color: var(--wp--preset--color--text-muted, #9898A8); }
.cb-colour-picker[open] .cb-colour-picker__summary { border-color: var(--wp--preset--color--accent, #E8FF00); }
.cb-colour-picker__summary .cb-addon-group__label { margin: 0; }
.cb-colour-picker__current {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-left: auto;
	min-width: 0;
}
.cb-colour-picker__thumb {
	display: block;
	width: 26px;
	height: 34px;
	border-radius: 4px;
	overflow: hidden;
	background: #000;
	border: 1px solid rgba(255, 255, 255, 0.14);
	flex: 0 0 auto;
}
.cb-colour-picker__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cb-colour-picker__name {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--wp--preset--color--text, #F0F0F2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cb-colour-picker__toggle {
	flex: 0 0 auto;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, #E8FF00);
}
.cb-colour-picker[open] .cb-colour-picker__toggle { color: var(--wp--preset--color--text-muted, #9898A8); }

/* Hardware dropdown (screws / TPMS / valve) — native select, dark, with a
   custom chevron. Compact + consistent vs the old oversized photo tiles. */
.cb-addon-select-wrap { position: relative; }
.cb-addon-select-wrap::after {
	content: "\25BE";
	position: absolute;
	right: 13px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--wp--preset--color--text-muted, #9898A8);
	font-size: 0.8rem;
}
.cb-addon-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	min-height: 44px;
	box-sizing: border-box;
	padding: 10px 36px 10px 14px;
	background: var(--wp--preset--color--surface-raised, #222228);
	color: var(--wp--preset--color--text, #F0F0F2);
	border: 1px solid var(--wp--preset--color--border, #2E2E38);
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--sans, "DM Sans", sans-serif);
	font-size: 0.9375rem;
	cursor: pointer;
}
.cb-addon-select:hover { border-color: var(--wp--preset--color--text-muted, #9898A8); }
.cb-addon-select:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #E8FF00);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--accent, #E8FF00);
}
.cb-addon-select option {
	background: var(--wp--preset--color--surface, #18181C);
	color: var(--wp--preset--color--text, #F0F0F2);
}

/* ── Options & hardware gallery (PDP sales copy) ──────────────────────────────
   The option photography that used to sit on the configurator swatches now lives
   here as a proper gallery: white photo wells (the shots are on white) on dark
   cards, with a name, price and short blurb under each. */
.cb-wheel-options {
	margin: 2.5rem 0;
}
.cb-wheel-options__title {
	margin: 0 0 0.35rem;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast, #f5f5f7);
}
.cb-wheel-options__lead {
	margin: 0 0 1.2rem;
	max-width: 62ch;
	color: var(--wp--preset--color--text-muted, #9898A8);
	line-height: 1.5;
}
.cb-wheel-options__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}
.cb-wheel-option-card {
	margin: 0;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--surface, #18181C);
	border: 1px solid var(--wp--preset--color--border, #2E2E38);
	border-radius: 10px;
	overflow: hidden;
}
.cb-wheel-option-card__media {
	aspect-ratio: 4 / 3;
	background: #fff;
}
.cb-wheel-option-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.cb-wheel-option-card__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 12px 14px 14px;
}
.cb-wheel-option-card__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
}
.cb-wheel-option-card__name {
	font-weight: 600;
	color: var(--wp--preset--color--text, #F0F0F2);
}
.cb-wheel-option-card__price {
	flex: 0 0 auto;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent, #E8FF00);
}
.cb-wheel-option-card__blurb {
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--wp--preset--color--text-muted, #9898A8);
}

/* ───────────────────────────────────────────────────────────────────────────
 *  Wheel configurator — sectioned "hybrid" layout (operator 2026-06-28).
 *  Supersedes the 2026-06-27 compact pass where they overlap (later rules win).
 *  Groups the long made-to-order option set into three numbered sections
 *  (render_addons() emits .cb-config-section for wheels only), unifies the
 *  field treatment so colour pickers / dropdowns / spring-rate disclosures
 *  read as one calm system, keeps pick-from-many groups as full-width
 *  segmented controls, and collapses single-value hardware into a tidy
 *  label-left / value-right list. Scoped to .single-cb_forged_wheel so the
 *  operator-approved coilover + brake configurators are untouched.
 * ------------------------------------------------------------------------- */

/* ── Panel ── */
.single-cb_forged_wheel .cb-configurator {
	gap: 0;
	padding: 6px 20px 20px;
	background: linear-gradient(180deg, #1b1b20 0%, #161619 100%);
	border-color: #34343f;
	counter-reset: cbsec;
}

/* Sections own the dividers now — drop the per-group top border. */
.single-cb_forged_wheel .cb-configurator .cb-addon-group + .cb-addon-group,
.single-cb_forged_wheel .cb-configurator > .cb-addon-row + .cb-addon-group,
.single-cb_forged_wheel .cb-configurator > .cb-addon-group + .cb-addon-row,
.single-cb_forged_wheel .cb-configurator > .cb-addon-row + .cb-addon-row {
	border-top: 0;
	padding-top: 0;
}

/* ── Numbered section ── */
.single-cb_forged_wheel .cb-config-section {
	padding: 13px 0;
	counter-increment: cbsec;
}
.single-cb_forged_wheel .cb-config-section:first-of-type { padding-top: 8px; }
.single-cb_forged_wheel .cb-config-section + .cb-config-section {
	border-top: 1px solid var(--wp--preset--color--border, #2E2E38);
}
.single-cb_forged_wheel .cb-config-section__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 2px;
	font: 600 0.72rem/1 var(--wp--preset--font-family--sans, "DM Sans", sans-serif);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text, #F0F0F2);
}
.single-cb_forged_wheel .cb-config-section__head::before {
	content: counter(cbsec, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--wp--preset--color--accent, #E8FF00);
}

/* Groups within a section: even rhythm, hairline between rows. */
.single-cb_forged_wheel .cb-config-section .cb-addon-group,
.single-cb_forged_wheel .cb-config-section .cb-addon-row {
	padding: 12px 0 14px;
}
.single-cb_forged_wheel .cb-config-section .cb-addon-group:last-child,
.single-cb_forged_wheel .cb-config-section .cb-addon-row:last-child { padding-bottom: 2px; }
.single-cb_forged_wheel .cb-config-section .cb-addon-group + .cb-addon-group,
.single-cb_forged_wheel .cb-config-section .cb-addon-row + .cb-addon-group,
.single-cb_forged_wheel .cb-config-section .cb-addon-group + .cb-addon-row,
.single-cb_forged_wheel .cb-config-section .cb-addon-row + .cb-addon-row {
	border-top: 1px solid rgba(255, 255, 255, 0.045);
}
.single-cb_forged_wheel .cb-addon-group { gap: 9px; }

/* Label rhythm. */
.single-cb_forged_wheel .cb-addon-group__label {
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0;
}
.single-cb_forged_wheel .cb-addon-group__sub {
	margin: -4px 0 0;
	font-size: 0.74rem;
}

/* ── Segmented pick-one (Diameter / PCD / Centre bore / Centre cap) ── */
.single-cb_forged_wheel .cb-addon-group--multi_radio:not(.cb-addon-group--swatch) .cb-addon-group__options,
.single-cb_forged_wheel .cb-addon-group--radio .cb-addon-group__options { gap: 6px; }
.single-cb_forged_wheel .cb-addon-option {
	min-height: 40px;
	padding: 8px 14px;
	background: rgba(255, 255, 255, 0.025);
	border-color: rgba(255, 255, 255, 0.10);
	border-radius: 8px;
	font-size: 0.875rem;
}
.single-cb_forged_wheel .cb-addon-option:hover {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.05);
}
.single-cb_forged_wheel .cb-addon-option.is-selected {
	border-color: var(--wp--preset--color--accent, #E8FF00);
	background: color-mix(in srgb, var(--wp--preset--color--accent, #E8FF00) 12%, transparent);
	box-shadow: none;
}
.single-cb_forged_wheel .cb-addon-option.is-selected .cb-addon-option__label {
	color: var(--wp--preset--color--contrast, #f5f5f7);
	font-weight: 600;
}
.single-cb_forged_wheel .cb-addon-option__price { font-size: 0.8rem; }

/* ── Unified "field" treatment: colour summary + hardware dropdown ── */
.single-cb_forged_wheel .cb-colour-picker__summary,
.single-cb_forged_wheel .cb-addon-select {
	min-height: 46px;
	border-radius: 8px;
	border-color: rgba(255, 255, 255, 0.10);
	background: rgba(255, 255, 255, 0.025);
}
.single-cb_forged_wheel .cb-colour-picker__summary:hover,
.single-cb_forged_wheel .cb-addon-select:hover { border-color: rgba(255, 255, 255, 0.28); }
.single-cb_forged_wheel .cb-colour-picker[open] .cb-colour-picker__summary {
	border-color: var(--wp--preset--color--accent, #E8FF00);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.single-cb_forged_wheel .cb-colour-picker[open] > .cb-addon-group__options {
	margin-top: 0;
	border-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	background: rgba(255, 255, 255, 0.015);
	border-color: var(--wp--preset--color--accent, #E8FF00);
}
.single-cb_forged_wheel .cb-colour-picker__toggle { font-size: 0.68rem; }
.single-cb_forged_wheel .cb-colour-picker__name { font-size: 0.82rem; }

/* ── Width / Offset — lighter inline disclosure ── */
.single-cb_forged_wheel .cb-springrate {
	border-color: rgba(255, 255, 255, 0.10);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.025);
}
.single-cb_forged_wheel .cb-springrate__summary {
	min-height: 46px;
	padding: 8px 13px;
	box-sizing: border-box;
}
.single-cb_forged_wheel .cb-springrate__rec strong { font-size: 0.95rem; }
.single-cb_forged_wheel .cb-springrate__toggle { color: var(--wp--preset--color--accent, #E8FF00); }

/* ── Design upsell checkboxes — quieter toggle rows ── */
.single-cb_forged_wheel .cb-addon-checkbox {
	min-height: 46px;
	border-color: rgba(255, 255, 255, 0.10);
	background: rgba(255, 255, 255, 0.025);
	border-radius: 8px;
}
.single-cb_forged_wheel .cb-addon-checkbox:hover { border-color: rgba(255, 255, 255, 0.28); }
.single-cb_forged_wheel .cb-addon-checkbox.is-selected {
	border-color: var(--wp--preset--color--accent, #E8FF00);
	background: color-mix(in srgb, var(--wp--preset--color--accent, #E8FF00) 9%, transparent);
}
.single-cb_forged_wheel .cb-addon-checkbox__price {
	color: var(--wp--preset--color--accent, #E8FF00);
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent, #E8FF00) 40%, transparent);
}

/* ── Recap + price footer ── */
.single-cb_forged_wheel .cb-config-recap {
	margin-top: 0;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--border, #2E2E38);
}
.single-cb_forged_wheel .cb-configurator__summary {
	margin-top: 4px;
	padding: 16px;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
}
.single-cb_forged_wheel .cb-configurator__summary-price { font-size: 1.6rem; }

/* ── Hardware dropdowns → label-left / value-right spec rows ── */
.single-cb_forged_wheel .cb-config-section .cb-addon-group--select {
	display: grid;
	grid-template-columns: minmax(96px, 40%) 1fr;
	align-items: center;
	column-gap: 14px;
	row-gap: 2px;
}
.single-cb_forged_wheel .cb-addon-group--select .cb-addon-group__label { grid-column: 1; grid-row: 1; }
.single-cb_forged_wheel .cb-addon-group--select .cb-addon-group__sub { grid-column: 1; grid-row: 2; }
.single-cb_forged_wheel .cb-addon-group--select .cb-addon-select-wrap { grid-column: 2; grid-row: 1 / 3; }
.single-cb_forged_wheel .cb-addon-group--select .cb-addon-select { min-height: 42px; }
.single-cb_forged_wheel .cb-colour-picker__summary,
.single-cb_forged_wheel .cb-addon-checkbox { min-height: 44px; }

/* Stack the hardware spec rows full-width on small phones. */
@media (max-width: 575px) {
	.single-cb_forged_wheel .cb-config-section .cb-addon-group--select {
		grid-template-columns: 1fr;
	}
	.single-cb_forged_wheel .cb-addon-group--select .cb-addon-select-wrap { grid-column: 1; grid-row: auto; }
	.single-cb_forged_wheel .cb-addon-group--select .cb-select-custom { grid-column: 1; }
}

/* ── Dropdown reveal fields (operator 2026-06-28) ──
 *  Custom PCD / Custom bore / centre-cap logo / OE cap size — a full-width row
 *  below the dropdown, shown by SelectGroup JS only when its option is chosen.
 *  Reuses .cb-custom-field__label/__input/__hint for the inner styling. */
.single-cb_forged_wheel .cb-select-custom {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 8px;
	width: 100%;
}
.single-cb_forged_wheel .cb-select-custom[hidden] { display: none; }

/* File-upload input (custom centre-cap design). */
.cb-custom-field__file {
	font-size: 0.85rem;
	color: var(--wp--preset--color--text, #F0F0F2);
}
.cb-custom-field__file::file-selector-button {
	margin-right: 10px;
	padding: 7px 12px;
	background: var(--wp--preset--color--surface-raised, #222228);
	color: var(--wp--preset--color--text, #F0F0F2);
	border: 1px solid var(--wp--preset--color--border, #2E2E38);
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.82rem;
}
.cb-custom-field__file::file-selector-button:hover {
	border-color: var(--wp--preset--color--accent, #E8FF00);
}

/* Tighten the design-extra checkboxes (3D / directional) — hug the help
 *  subtitle to the toggle row instead of floating it below. */
.single-cb_forged_wheel .cb-addon-group--checkbox { gap: 4px; }
.single-cb_forged_wheel .cb-addon-group__sub--checkbox { margin-top: 0; }

/* Width + Offset — top-align the two columns so their labels and "recommended"
 *  rows sit on the same baseline (was: offset drifting higher than width). */
.single-cb_forged_wheel .cb-addon-row { align-items: start; }
.single-cb_forged_wheel .cb-addon-row > .cb-addon-group { gap: 6px; }

/* ── Parts revamp 2026-07 — donor-SKU searchable picker (sku_search) ────── */
.cb-sku-search { position: relative; }
.cb-sku-search__input {
	width: 100%;
	padding: 10px 12px;
	background: var(--wp--preset--color--surface-raised, #222228);
	color: var(--wp--preset--color--text, #F0F0F2);
	border: 1px solid var(--wp--preset--color--border, #2E2E38);
	border-radius: 8px;
	font-size: 0.9rem;
}
.cb-sku-search__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent, #E8FF00);
}
.cb-sku-search__list {
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 280px;
	overflow-y: auto;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var(--wp--preset--color--surface-raised, #222228);
	border: 1px solid var(--wp--preset--color--border, #2E2E38);
	border-radius: 8px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.cb-sku-search__item {
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 0.85rem;
	cursor: pointer;
}
.cb-sku-search__item:hover {
	background: rgba(232, 255, 0, 0.08);
	color: var(--wp--preset--color--accent, #E8FF00);
}
.cb-sku-search__empty {
	padding: 8px 10px;
	font-size: 0.82rem;
	opacity: 0.7;
}
.cb-sku-search__picked {
	margin: 6px 0 0;
	font-size: 0.82rem;
	color: var(--wp--preset--color--accent, #E8FF00);
}
.cb-sku-search__picked[hidden] { display: none; }
.cb-sku-search__list[hidden] { display: none; }

/* ── Parts car-selector: Make→Model→Year→Range cascade (2026-07) ──────────────
   Four dependent selects resolve the buyer's coilover to a real kit SKU. Reuses
   .cb-addon-select for the dropdowns and .cb-sku-search for the fallback. */
.cb-vpicker__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 12px;
	margin-top: 4px;
}
.cb-vpicker__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.cb-vpicker__label {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted, #9898A8);
}
.cb-vpicker__select[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}
.cb-vpicker__picked {
	margin: 10px 0 0;
	padding: 8px 12px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent, #E8FF00);
	background: rgba(232, 255, 0, 0.08);
	border: 1px solid rgba(232, 255, 0, 0.25);
	border-radius: 8px;
}
.cb-vpicker__picked[hidden] { display: none; }
.cb-vpicker__picked--warn {
	color: #ffcf6a;
	background: rgba(255, 176, 32, 0.10);
	border-color: rgba(255, 176, 32, 0.30);
}
.cb-vpicker__fallback {
	margin-top: 10px;
	font-size: 0.85rem;
}
.cb-vpicker__fallback > summary {
	cursor: pointer;
	color: var(--wp--preset--color--text-muted, #9898A8);
	text-decoration: underline;
	text-underline-offset: 3px;
	list-style: none;
}
.cb-vpicker__fallback > summary::-webkit-details-marker { display: none; }
.cb-vpicker__fallback > summary:hover { color: var(--wp--preset--color--text, #F0F0F2); }
.cb-vpicker__search { margin-top: 8px; }

@media (max-width: 520px) {
	.cb-vpicker__grid { grid-template-columns: 1fr; }
}