.uoc-configurator {
	--uoc-border: color-mix(in srgb, currentColor 18%, transparent);
	--uoc-subtle: color-mix(in srgb, currentColor 67%, transparent);
	border-block: 1px solid var(--uoc-border);
	margin: 1.75rem 0;
	padding: 1.5rem 0;
}

.uoc-configurator__title {
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	letter-spacing: .02em;
	margin: 0 0 .35rem;
}

.uoc-configurator__price {
	font-size: clamp(1.7rem, 4vw, 2.35rem);
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
	margin-bottom: 1.5rem;
}

.uoc-configurator__row {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.uoc-configurator label,
.uoc-configurator legend {
	font-weight: 600;
}

.uoc-configurator select {
	background: transparent;
	border: 1px solid var(--uoc-border);
	border-radius: 0;
	box-sizing: border-box;
	color: inherit;
	font: inherit;
	margin-top: .45rem;
	min-height: 3rem;
	padding: .65rem .8rem;
	width: 100%;
}

.uoc-configurator select:focus-visible,
.uoc-configurator input:focus-visible + .uoc-configurator__mount-label {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.uoc-configurator__mounts {
	border: 0;
	margin: 1.35rem 0;
	padding: 0;
}

.uoc-configurator__mount-grid {
	display: grid;
	gap: .75rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: .65rem;
}

.uoc-configurator__mount {
	border: 1px solid var(--uoc-border);
	cursor: pointer;
	display: grid;
	font-weight: 400;
	gap: .4rem;
	min-height: 4.5rem;
	padding: .75rem;
	position: relative;
}

.uoc-configurator__mount:has(input:checked) {
	box-shadow: inset 0 0 0 2px currentColor;
}

.uoc-configurator:not(.is-uoc-ready) .uoc-configurator__mount.is-unavailable {
	cursor: not-allowed;
	opacity: .55;
}

.uoc-configurator.is-uoc-ready .uoc-configurator__mount.is-unavailable {
	display: none;
}

.uoc-configurator__mount input {
	position: absolute;
	right: .6rem;
	top: .6rem;
}

.uoc-configurator__mount-image {
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.uoc-configurator__mount-label {
	display: block;
	padding-right: 1.25rem;
}

.uoc-configurator__mount-price,
.uoc-configurator__note {
	color: var(--uoc-subtle);
	font-size: .85em;
}

.uoc-configurator__options {
	display: grid;
	gap: .75rem;
	margin: 1.25rem 0;
}

.uoc-configurator__options label {
	align-items: center;
	display: flex;
	gap: .55rem;
}

.uoc-configurator__options input {
	height: 1.1rem;
	width: 1.1rem;
}

.uoc-configurator__delivery {
	display: flex;
	gap: .6rem;
	justify-content: space-between;
	margin: 1.25rem 0 .3rem;
}

@media (max-width: 680px) {
	.uoc-configurator__row { grid-template-columns: 1fr; }
	.uoc-configurator__mount-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
	.uoc-configurator__mount-grid { grid-template-columns: 1fr; }
}