/* Keep every variation control on one shared responsive left edge. */
body.single-product .cie-sp-summary table.variations {
	--cie-variation-label-column:clamp(108px, 6.25vw, 120px);
	--cie-variation-control-gap:clamp(16px, 1.042vw, 20px);
}

body.single-product .cie-sp-summary table.variations tr,
body.single-product .cie-sp-summary table.variations tr.cie-colour-radio-row,
body.single-product .cie-sp-summary table.variations tr:has(.cie-colour-radio-group) {
	display:grid !important;
	grid-template-columns:var(--cie-variation-label-column) minmax(0, 1fr) !important;
	column-gap:var(--cie-variation-control-gap) !important;
}

@supports (grid-template-columns:subgrid) {
	body.single-product .cie-sp-summary table.variations tbody {
		grid-template-columns:max-content minmax(0, 1fr) !important;
		column-gap:var(--cie-variation-control-gap) !important;
	}

	body.single-product .cie-sp-summary table.variations tr,
	body.single-product .cie-sp-summary table.variations tr.cie-colour-radio-row,
	body.single-product .cie-sp-summary table.variations tr:has(.cie-colour-radio-group) {
		grid-column:1 / -1 !important;
		grid-template-columns:subgrid !important;
	}
}

body.single-product .cie-sp-summary table.variations td.value {
	justify-self:start !important;
	width:100% !important;
	margin-inline:0 !important;
	text-align:left !important;
}

body.single-product .cie-sp-summary table.variations td.value > :is(select, .cie-colour-radio-group) {
	margin-inline:0 !important;
}

/* Keep native dropdowns compact without changing the colour radio control. */
body.single-product .cie-sp-summary table.variations select:not(.cie-colour-select-native) {
	min-height:clamp(34px, 1.979vw, 38px) !important;
	height:clamp(34px, 1.979vw, 38px) !important;
	padding:0 clamp(30px, 1.771vw, 34px) 0 clamp(12px, .729vw, 14px) !important;
	font-size:clamp(12px, .677vw, 13px) !important;
	line-height:1.2 !important;
	background-position:calc(100% - clamp(12px, .729vw, 14px)) 50% !important;
	background-size:clamp(14px, .833vw, 16px) clamp(14px, .833vw, 16px) !important;
}

body.single-product .cie-sp-summary .cie-colour-radio-pill:before {
	inline-size:clamp(14px, .833vw, 16px) !important;
	block-size:clamp(14px, .833vw, 16px) !important;
}

/* Hide Clear for both guests and logged-in customers. */
body.single-product .cie-sp-summary .variations_form .reset_variations {
	display:none !important;
}

/* Match the space above guest variation rows before the login/register buttons. */
body.single-product .cie-sp-summary .cie-guest-variations + .cie-price-gate {
	margin-top:calc(var(--cie-summary-gap, 11.4px) + clamp(9.5px, .789vw, 15.2px)) !important;
}

@media (max-width:520px) {
	body.single-product .cie-sp-summary .cie-guest-variations + .cie-price-gate {
		margin-top:calc(var(--cie-summary-gap, 13.3px) + 11.4px) !important;
	}
}

/* Pointer selection keeps the radio indicator; keyboard focus keeps its outline. */
body.single-product .cie-sp-summary .cie-colour-radio-pill:focus-within:not(:has(:focus-visible)) {
	outline:none !important;
}