:root {
	--bg: #e6e6e1;
	--card: #fff;
	--stage: #f2f2ef;
	--ink: #14161a;
	--muted: #7b7f85;
	--line: #e4e4df;
	--accent: #e31937;

	--font: "Space Grotesk", "Helvetica Neue", sans-serif;
	--mono: "JetBrains Mono", ui-monospace, monospace;
}

* {
	box-sizing: border-box;
}

/* Page */

.page {
	min-height: 100vh;
	margin: 0;
	padding: 56px 24px 72px;
	font-family: var(--font);
	color: var(--ink);
	background: var(--bg);
	background-image: radial-gradient(
		circle at 50% 0%,
		#f4f4f1 0%,
		var(--bg) 60%
	);
}

.page__header {
	max-width: 1180px;
	margin: 0 auto 28px;
}

.page__eyebrow {
	margin: 0 0 10px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.page__title {
	margin: 0;
	font-size: 34px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

/* Card */

.card {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	grid-template-rows: minmax(0, 1fr);
	max-width: 1180px;
	max-height: clamp(520px, calc(100vh - 210px), 660px);
	margin: 0 auto;
	border: 1px solid var(--line);
	border-radius: 28px;
	background: var(--card);
	box-shadow:
		0 1px 2px rgba(20, 22, 26, 0.04),
		0 24px 60px -20px rgba(20, 22, 26, 0.18);
	overflow: hidden;
}

/* Preview */

.preview {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px;
	background: linear-gradient(160deg, #fff 0%, var(--stage) 100%);
	border-right: 1px solid var(--line);
}

.preview__badge {
	position: absolute;
	top: 28px;
	left: 32px;
	padding: 6px 12px;
	border: 1px solid var(--line);
	border-radius: 100px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
	background: rgba(255, 255, 255, 0.7);
}

.preview__image {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	/* JPG с белым фоном: multiply убирает белое, оставляя кузов */
	mix-blend-mode: multiply;
}

.preview__image--swap {
	animation: swap 0.4s ease;
}

@keyframes swap {
	from {
		opacity: 0;
		transform: translateX(14px);
	}
}

.preview__caption {
	position: relative;
	margin: 8px 0 0;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	color: var(--muted);
}

/* Config */

.config {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}

.config__groups {
	flex: 1;
	min-height: 0;
	padding: 36px 36px 8px;
	overflow-y: auto;
	/* мягкое затухание у нижней границы прокрутки */
	mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}

.group {
	margin: 0 0 26px;
	padding: 0;
	border: none;
}

.group__title {
	padding: 0;
	margin-bottom: 12px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.group__options {
	display: grid;
	gap: 8px;
}

.group__options--split {
	grid-template-columns: 1fr 1fr;
}

.group__options--swatches {
	display: flex;
	gap: 14px;
}

/* Option */

.opt {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 13px 15px;
	border: 1px solid var(--line);
	border-radius: 12px;
	cursor: pointer;
	transition:
		border-color 0.15s,
		background 0.15s;
}

.opt:hover {
	border-color: #c9c9c3;
	background: #fafaf8;
}

.opt:has(.opt__input:checked) {
	border-color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--ink);
}

.opt:has(.opt__input:focus-visible) {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.opt__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.opt__name {
	flex: 1;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.opt__price {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--muted);
	white-space: nowrap;
}

.opt:has(.opt__input:checked) .opt__price {
	color: var(--ink);
}

/* Swatch */

.swatch {
	cursor: pointer;
	line-height: 0;
}

.swatch__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.swatch__dot {
	display: block;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(20, 22, 26, 0.12);
	transition: outline-color 0.15s;
	outline: 2px solid transparent;
	outline-offset: 4px;
}

.swatch:hover .swatch__dot {
	outline-color: #c9c9c3;
}

.swatch__input:checked + .swatch__dot {
	outline-color: var(--ink);
}

.swatch__input:focus-visible + .swatch__dot {
	outline-color: var(--accent);
}

.swatch__dot--grey {
	background: #45464b;
}
.swatch__dot--white {
	background: #f2f3f4;
}
.swatch__dot--black {
	background: #171717;
}
.swatch__dot--blue {
	background: #7299bc;
}
.swatch__dot--silver {
	background: #9ea1a5;
}
.swatch__dot--red {
	background: #b01722;
}

/* Total */

.total {
	padding: 22px 36px 30px;
	border-top: 1px solid var(--line);
	background: #fbfbf9;
}

.total__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
	font-size: 13px;
	color: var(--muted);
}

.total__value {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
}

.total__row--sum {
	margin: 14px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
}

.total__note {
	display: block;
	margin-top: 2px;
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.total__sum {
	font-size: 34px;
	font-weight: 600;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.total__sum--flash {
	animation: flash 0.4s ease;
}

@keyframes flash {
	from {
		color: var(--accent);
	}
}

/* Adaptive */

@media (max-width: 920px) {
	.card {
		grid-template-columns: 1fr;
	}

	.preview {
		border-right: none;
		border-bottom: 1px solid var(--line);
		padding: 24px;
	}

	.card {
		grid-template-rows: auto auto;
		max-height: none;
	}

	.config__groups {
		padding: 28px 24px 8px;
		mask-image: none;
	}

	.total {
		padding: 20px 24px 26px;
	}
}

@media (max-width: 520px) {
	.page {
		padding: 32px 14px 44px;
	}

	.page__title {
		font-size: 26px;
	}

	.group__options--split {
		grid-template-columns: 1fr;
	}

	.group__options--swatches {
		gap: 10px;
	}

	.total__sum {
		font-size: 28px;
	}
}