/* Opt-in controls. Native inputs retain keyboard, validation and form behavior. */
.ov-choice,
.ov-selection,
.ov-quantity {
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-text-primary);
	font-family: var(--font-ui);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
	letter-spacing: 0;
}
.ov-choice {
	display: flex;
	align-items: center;
	gap: var(--spacing-12);
	min-height: var(--height-56);
	width: fit-content;
	max-width: 100%;
	cursor: pointer;
}
.ov-choice__label { min-width: 0; overflow-wrap: anywhere; }
.ov-choice__control { position: relative; display: grid; flex: none; }
.ov-choice .ov-choice__input {
	display: block;
	box-sizing: border-box;
	width: var(--spacing-24);
	height: var(--spacing-24);
	margin: 0;
	padding: 0;
	appearance: none;
	border: 1px solid var(--color-border-control);
	border-radius: var(--radius-8);
	background: var(--color-bg-surface);
	box-shadow: none;
	cursor: inherit;
	transition: background-color var(--transition-interactive), border-color var(--transition-interactive);
}
.ov-choice--radio .ov-choice__input { border-radius: var(--radius-full); }
.ov-choice__input:is(:checked, :indeterminate) {
	border-color: var(--color-bg-action-primary);
	background: var(--color-bg-action-primary);
}
.ov-choice--radio .ov-choice__input:checked {
	border-width: calc(var(--spacing-12) / 2);
	background: var(--color-text-primary);
}
.ov-choice__mark,
.ov-choice__mixed {
	position: absolute;
	inset: 0;
	display: none;
	place-items: center;
	pointer-events: none;
}
.ov-choice__control .ov-icon { width: var(--spacing-20); height: var(--spacing-20); }
.ov-choice__input:checked:not(:indeterminate) ~ .ov-choice__mark,
.ov-choice__input:indeterminate ~ .ov-choice__mixed { display: grid; }
.ov-choice--switch { gap: var(--spacing-16); }
.ov-choice--switch .ov-choice__input {
	width: var(--height-56);
	height: var(--spacing-32);
	border-radius: var(--radius-full);
	background: var(--color-bg-subtle);
}
.ov-choice--switch .ov-choice__input:checked { background: var(--color-bg-action-primary); }
.ov-choice__thumb {
	position: absolute;
	inset-inline-start: var(--spacing-4);
	top: var(--spacing-4);
	width: var(--spacing-24);
	height: var(--spacing-24);
	border-radius: var(--radius-full);
	background: var(--color-text-primary);
	pointer-events: none;
	transition: transform var(--transition-interactive);
}
.ov-choice__input:checked ~ .ov-choice__thumb { transform: translateX(var(--spacing-24)); }
.ov-choice:dir(rtl) .ov-choice__input:checked ~ .ov-choice__thumb { transform: translateX(calc(-1 * var(--spacing-24))); }
.ov-choice:has(:disabled) { cursor: not-allowed; opacity: 0.5; }
.ov-choice .ov-choice__input:disabled { opacity: 1; }

.ov-selection__legend {
	float: none;
	margin: 0 0 var(--spacing-8);
	padding: 0;
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-label);
}
.ov-selection__items { display: flex; flex-wrap: wrap; gap: var(--spacing-12); min-width: 0; }
.ov-selection__option { position: relative; display: flex; min-width: 0; max-width: 100%; margin: 0; cursor: pointer; }
.ov-selection .ov-selection__input {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: inherit;
}
.ov-selection__face {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-8);
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: var(--height-56);
	padding: var(--spacing-8) var(--spacing-12);
	border: 1px solid var(--color-border-control);
	border-radius: var(--radius-16);
	background: var(--color-bg-surface);
	font-size: var(--font-size-field);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-field);
	transition: background-color var(--transition-interactive), border-color var(--transition-interactive);
}
.ov-selection__label { min-width: 0; overflow-wrap: anywhere; }
.ov-selection__swatch {
	flex: none;
	width: var(--spacing-24);
	height: var(--spacing-24);
	border: 1px solid var(--color-border-control);
	border-radius: var(--radius-full);
	background: var(--ov-swatch);
}
.ov-selection__check { display: flex; flex: none; visibility: hidden; }
.ov-selection__check .ov-icon { width: var(--spacing-20); height: var(--spacing-20); }
.ov-selection__input:checked + .ov-selection__face {
	background: var(--color-bg-page);
	border-color: var(--color-border-focus);
	outline: var(--focus-width) solid var(--color-border-focus);
	outline-offset: calc(-1 * var(--focus-width));
}
.ov-selection__input:checked + .ov-selection__face .ov-selection__check { visibility: visible; }
.ov-selection__option:has(:disabled) { cursor: not-allowed; }
.ov-selection:disabled,
.ov-selection:not(:disabled) .ov-selection__option:has(:disabled) { opacity: 0.5; }
.ov-selection__option[data-unavailable] .ov-selection__label { text-decoration: line-through; }
.ov-selection--segmented .ov-selection__items {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 0;
	padding: var(--spacing-4);
	border-radius: var(--radius-24);
	background: var(--color-bg-subtle);
}
.ov-selection--segmented .ov-selection__face { border-color: transparent; background: transparent; text-align: center; }
.ov-selection--segmented .ov-selection__input:checked + .ov-selection__face {
	background: var(--color-bg-action-primary);
	outline: none;
}
.ov-choice .ov-choice__input:focus-visible,
.ov-selection .ov-selection__input:focus-visible + .ov-selection__face,
.ov-quantity .ov-quantity__button:focus-visible {
	outline: var(--focus-width) solid var(--color-border-focus);
	outline-offset: var(--focus-offset);
}
.ov-selection .ov-selection__input:focus-visible + .ov-selection__face { background: var(--color-bg-page); }
.ov-choice .ov-choice__input:focus:not(:focus-visible),
.ov-quantity .ov-quantity__button:focus:not(:focus-visible) { outline: none; }

.ov-quantity { width: calc(var(--spacing-48) * 2 + var(--height-64) + var(--spacing-8)); max-width: 100%; }
.ov-quantity__frame {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: var(--height-56);
	padding: 3px;
	border: 1px solid var(--color-border-control);
	border-radius: var(--radius-16);
	background: var(--color-bg-surface);
	transition: border-color var(--transition-interactive);
}
.ov-quantity__frame:focus-within { border-color: var(--color-border-focus); }
.ov-quantity__frame:has(.ov-quantity__input:focus-visible) {
	outline: var(--focus-width) solid var(--color-border-focus);
	outline-offset: var(--focus-offset);
}
.ov-quantity .ov-quantity__button {
	display: grid;
	place-items: center;
	flex: none;
	box-sizing: border-box;
	width: var(--spacing-48);
	height: var(--spacing-48);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--radius-16);
	background: transparent;
	color: var(--color-text-primary);
	box-shadow: none;
	cursor: pointer;
	transition: background-color var(--transition-interactive), color var(--transition-interactive);
}
.ov-quantity__button .ov-icon { width: var(--spacing-24); height: var(--spacing-24); }
.ov-quantity .ov-quantity__button[data-step="up"] { background: var(--color-bg-action-primary); }
.ov-quantity .ov-quantity__button:disabled { opacity: 0.5; cursor: not-allowed; }
.ov-quantity:disabled { opacity: 0.5; }
.ov-quantity:disabled .ov-quantity__button { opacity: 1 !important; }
.ov-quantity .ov-quantity__input {
	box-sizing: border-box;
	flex: 1 1 0;
	width: 100%;
	min-width: 0;
	height: var(--spacing-48);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--radius-8);
	background: transparent;
	color: var(--color-text-primary);
	box-shadow: none;
	font-family: var(--font-ui);
	font-size: var(--action-font-24);
	font-weight: var(--font-weight-regular);
	line-height: var(--action-line-32);
	letter-spacing: 0;
	text-align: center;
}
.ov-quantity[data-enhanced] .ov-quantity__input { appearance: textfield; }
.ov-quantity[data-enhanced] .ov-quantity__input::-webkit-inner-spin-button,
.ov-quantity[data-enhanced] .ov-quantity__input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.ov-quantity .ov-quantity__input:focus { outline: none; }
.ov-quantity .ov-quantity__input:disabled { opacity: 1; }
.ov-quantity__spinner { position: absolute; inset: 0; display: none; place-items: center; pointer-events: none; }
.ov-quantity__spinner .ov-icon { width: var(--spacing-24); height: var(--spacing-24); animation: ov-quantity-spin 1s linear infinite; }
.ov-quantity__frame[aria-busy="true"] .ov-quantity__spinner { display: grid; }
.ov-quantity__frame[aria-busy="true"] .ov-quantity__input { opacity: 0; }
.ov-quantity [hidden] { display: none; }
@keyframes ov-quantity-spin { to { transform: rotate(360deg); } }

@media (hover: hover) {
	.ov-quantity .ov-quantity__button:hover:not(:disabled) { background: var(--color-text-primary); color: var(--color-text-inverse); }
}
@media (prefers-reduced-motion: reduce) {
	.ov-choice .ov-choice__input,
	.ov-choice__thumb,
	.ov-selection__face,
	.ov-quantity__frame,
	.ov-quantity .ov-quantity__button { transition: none; }
	.ov-quantity__spinner .ov-icon { animation: none; }
}
@media (forced-colors: active) {
	.ov-choice .ov-choice__input { appearance: auto; border: revert; background: revert; }
	.ov-choice__mark, .ov-choice__mixed, .ov-choice__thumb { display: none !important; }
	.ov-selection__swatch { forced-color-adjust: none; }
	.ov-selection .ov-selection__input:checked + .ov-selection__face { outline: var(--focus-width) solid Highlight; outline-offset: calc(-1 * var(--focus-width)); }
	.ov-choice .ov-choice__input:focus-visible,
	.ov-selection .ov-selection__input:focus-visible + .ov-selection__face,
	.ov-quantity .ov-quantity__button:focus-visible,
	.ov-quantity .ov-quantity__input:focus-visible { outline: var(--focus-width) solid Highlight; }
	.ov-choice:has(:disabled), .ov-selection:disabled,
	.ov-selection:not(:disabled) .ov-selection__option:has(:disabled), .ov-quantity:disabled { opacity: 1; color: GrayText; }
}