.calc-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

@media (min-width: 900px) {
	.calc-layout {
		grid-template-columns: 1fr 320px;
		align-items: start;
	}
}

.calc-form {
	display: grid;
	gap: var(--space-5);
}

.calc-field {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-bg);
	padding: var(--space-4) var(--space-5);
	margin: 0;
}

.calc-field legend {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 14px;
	color: var(--color-ink);
	padding: 0 var(--space-1);
}

.chip-group {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-2);
	margin-top: var(--space-2);
}

.chip-group--wrap {
	flex-wrap: wrap;
}

.chip {
	position: relative;
}

.chip input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.chip span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: 14px;
	color: var(--color-ink);
	background: var(--color-bg-alt);
	cursor: pointer;
	transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.chip input:checked + span {
	border-color: var(--color-brand-red);
	background: color-mix(in srgb, var(--color-brand-red) 8%, var(--color-bg));
	color: var(--color-brand-red-dark);
	font-weight: 600;
}

.chip input:focus-visible + span {
	outline: 2px solid var(--color-brand-red-dark);
	outline-offset: 2px;
}

.calc-dims {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-2);
	color: var(--color-ink-soft);
}

.calc-dim-input {
	width: 96px;
	min-height: 44px;
	padding: 0 var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: 16px;
	font-family: var(--font-body);
	color: var(--color-ink);
}

.calc-dim-input:focus-visible {
	outline: 2px solid var(--color-brand-red);
	outline-offset: 2px;
}

/* ---------- Итого ---------- */

.calc-summary {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-bg);
	padding: var(--space-5);
	position: sticky;
	top: var(--space-4);
}

.calc-summary__title {
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 var(--space-3);
}

.calc-lineitems {
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: 0;
	display: grid;
	gap: var(--space-2);
}

.calc-lineitems li {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	font-size: 13px;
	color: var(--color-ink-soft);
}

.calc-lineitems li span:last-child {
	color: var(--color-ink);
	white-space: nowrap;
}

.calc-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
	margin-bottom: var(--space-4);
	font-family: var(--font-heading);
}

.calc-total strong {
	font-size: 24px;
	color: var(--color-brand-red);
}

.calc-meta {
	display: grid;
	gap: var(--space-2);
	margin: 0 0 var(--space-3);
	font-size: 13px;
}

.calc-meta div {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
}

.calc-meta dt {
	color: var(--color-ink-soft);
}

.calc-meta dd {
	margin: 0;
	color: var(--color-ink);
	font-weight: 600;
}

.calc-note {
	font-size: 13px;
	color: var(--color-error);
	border-left: 3px solid var(--color-error);
	background: var(--color-bg-alt);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	margin: 0 0 var(--space-3);
}

.calc-disclaimer {
	font-size: 12px;
	color: var(--color-ink-soft);
	margin: 0;
}