/* ─── Compact variants для secций главной + responsive media queries ─── */
/* Mobile-preview классы .mh-mob__* удалены 17.05 (не используются */
/* в боевой теме — были скопированы из concept-mohawk dev-preview). */

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤1024px) и Mobile (≤768px / ≤480px).
   Адаптация всех секций главной: header → burger, hero → stack,
   services → 1 col, contacts → 1 col, footer → stack.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	/* P5 polish: topstrip удалён, правила .mh__topstrip больше не нужны. */
	.mh__header {
		/* P2 Polish: на mobile/tablet оставляем только Logo + CTA + Burger.
		   Mega-nav, phone, info-блок скрываем — навигация через burger sheet. */
		padding: 8px 24px;
		gap: 12px;
		min-height: 64px;
		grid-template-columns: 1fr auto;
	}
	.mh__brand-logo { height: 52px; }
	.mh__nav {
		display: none; /* burger берёт всю навигацию */
	}
	.mh__header-phone { display: none; }
	.mh__header-cta {
		border-left: 0; /* убираем separator — он был между nav-блоком и CTA */
		padding-left: 0;
		gap: 10px;
	}
	.mh__section { padding: 36px 24px; }

	.mh__hero {
		grid-template-columns: 1fr;
		min-height: auto;
	}
	.mh__hero-l { padding: 40px 24px; gap: 32px; }
	.mh__h1 { font-size: clamp(40px, 7vw, 72px); }
	.mh__hero-lead { font-size: var(--text-body); /* 16px → token */ max-width: none; }
	.mh__hero-r { min-height: 380px; }
	.mh__hero-r-spec { left: 16px; right: 16px; bottom: 16px; padding: 14px 16px; gap: 12px; }
	.mh__hero-r-spec-val { font-size: var(--text-mono-sm); }
	.mh__hero-mode-card { left: 16px; right: 16px; bottom: 16px; padding: 20px 20px 18px; box-shadow: 7px 7px 0 rgba(var(--rgb-graphite-900), 0.28); }
	.mh__hero-mode-card--vacation { box-shadow: 7px 7px 0 var(--accent); }
	.mh__hero-mode-message { max-width: 30ch; font-size: clamp(24px, 5vw, 34px); }

	.mh__hero-strip { grid-template-columns: 1fr 1fr; }
	.mh__hero-strip-cell { padding: 16px 20px; }
	.mh__hero-strip-cell:nth-child(2) { border-right: 0; }
	.mh__hero-strip-cell:nth-child(1),
	.mh__hero-strip-cell:nth-child(2) { border-bottom: 1px solid var(--line); }

	/* Services tablet: feature на всю ширину сверху, малые 2-col grid.
	   Фото в малых: aspect 4/3 — карточка ~220px высоты с видимым фото. */
	.mh__services {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 320px repeat(3, 220px);
	}
	.mh__service--feature {
		grid-column: 1 / span 2;
		grid-row: 1;
		min-height: 320px;
	}
	.mh__service-title { font-size: 19px; }
	.mh__service--feature .mh__service-title { font-size: clamp(28px, 4vw, 38px); }
	.mh__service-img { aspect-ratio: 4 / 3; }
	.mh__service--feature .mh__service-img { aspect-ratio: auto; }

	.mh__trust-inner { grid-template-columns: 1fr; min-height: auto; }
	.mh__trust-photo { min-height: 320px; }
	.mh__trust-body { padding: 48px 24px; }

	.mh__cases {
		gap: 14px;
		padding-bottom: 14px;
		scroll-padding-left: 24px;
	}
	.mh__cases > .mh__case {
		flex: 0 0 calc((100% - 14px) / 2);
		min-width: 280px;
	}

	.mh__poly {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 28px 24px;
	}

	/* Canvas (Холсты B2C) — горизонтальная карусель на планшетах и мобилке.
	   4 карточки в scroll-snap'е, видно 2 одновременно на 768 и 1.2 на mobile. */
	.mh__canvas-cases {
		display: flex;
		grid-template-columns: none;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 12px;
		scroll-padding-inline-start: 24px;
		scrollbar-width: thin;
	}
	.mh__canvas-cases::-webkit-scrollbar { height: 6px; }
	.mh__canvas-cases::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }
	.mh__canvas-case {
		flex: 0 0 calc((100% - 14px) / 2);
		min-width: 260px;
		scroll-snap-align: start;
	}

	.mh__corp {
		grid-template-columns: 1fr;
		padding: 48px 24px;
		gap: 32px;
	}

	/* Howto compact: каждый шаг ~95px вместо 250+. Badge встроен в title row,
	   desc + tag — короткие inline. */
	.mh__howto { padding-top: 0; }
	.mh__howto-steps {
		grid-template-columns: 1fr;
		counter-reset: howto-step;
		gap: 0;
	}
	.mh__howto-steps::before,
	.mh__howto-steps::after { display: none; }
	.mh__howto-step {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 14px 0;
		gap: 6px;
		border-bottom: 1px solid var(--line);
	}
	.mh__howto-step:last-child { border-bottom: 0; }
	.mh__howto-step::before {
		counter-increment: howto-step;
		content: counter(howto-step, decimal-leading-zero);
		width: 36px;
		height: 36px;
		border-radius: 50%;
		border: 1.5px solid var(--ink);
		background: var(--paper);
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--font-mh-mono);
		font-size: var(--text-eyebrow); /* 11px → token */
		font-weight: 600;
		color: var(--fg);
		margin: 0 0 4px;
		box-shadow: none;
	}
	.mh__howto-step:last-child::before { background: var(--accent); border-color: var(--accent); color: var(--ink); }
	.mh__howto-step::after { display: none; }
	.mh__howto-step-title { font-size: var(--text-h3-sm); margin: 0; line-height: 1.2; }
	.mh__howto-step-desc { font-size: var(--text-body-sm); line-height: 1.4; max-width: none; }
	.mh__howto-step-tag { font-size: var(--text-mono-3xs); }

	.mh__contacts { grid-template-columns: 1fr; min-height: auto; }
	.mh__contacts-l { padding: 40px 24px; gap: 20px; }
	.mh__contacts-r { min-height: 360px; }

	.mh__final {
		grid-template-columns: 1fr;
		padding: 48px 24px;
		gap: 24px;
	}
	.mh__final-cta { align-items: flex-start; }
	.mh__final h2 { font-size: clamp(32px, 5vw, 52px); }

	.mh__footer { padding: 40px 24px 24px; }
	.mh__footer-inner {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
		padding-bottom: 28px;
	}
}

@media (max-width: 640px) {
	/* P5 polish: .mh__topstrip удалён, правила больше не нужны. */
	.mh__header { padding: 8px 16px; }
	/* Главное меню (Кейсы/Контакты) скрыто на узком мобиле — навигация
	   через бургер: site-header__burger виден на ≤1024 (components.css),
	   открывает <dialog id="mobile-nav"> с услугами + кейсами + контактами
	   (header.php:174). Бургер реализован в Header rework 21.05. */
	.mh__nav { display: none; }
	.mh__brand-logo { height: 48px; }
	.mh__header-phone { display: none; }
	.mh__header-cta .mh__btn { padding: 10px 14px; font-size: var(--text-mono-sm); /* 12px → token */ }

	.mh__section { padding: 32px 16px; }
	.mh__h2 { font-size: clamp(32px, 6vw, 44px); }
	.mh__section-head {
		grid-template-columns: 1fr;
		gap: 16px;
		padding-bottom: 24px;
		margin-bottom: 28px;
	}

	.mh__hero-l { padding: 32px 16px; }
	.mh__h1 { font-size: clamp(36px, 9vw, 56px); }

	.mh__hero-strip { grid-template-columns: 1fr; }
	.mh__hero-strip-cell { border-right: 0; border-bottom: 1px solid var(--line); }
	.mh__hero-strip-cell:last-child { border-bottom: 0; }

	.mh__hero-r-spec { grid-template-columns: 1fr 1fr 1fr; gap: 6px 10px; padding: 10px 12px; }
	.mh__hero-r-spec-tag { font-size: var(--text-mono-3xs); }
	.mh__hero-r-spec-val { font-size: var(--text-eyebrow); }
	.mh__hero-mode-card { left: 12px; right: 12px; bottom: 12px; padding: 18px 16px 16px; }
	.mh__hero-mode-head { gap: 10px; }
	.mh__hero-mode-mark { display: none; }
	.mh__hero-mode-message { margin: 14px 0 16px; font-size: clamp(22px, 6.3vw, 28px); line-height: 1.06; }
	.mh__hero-mode-footer { align-items: flex-start; flex-direction: column; gap: 10px; }
	.mh__hero-mode-link { width: 100%; min-height: 44px; background: var(--ink); color: var(--paper); }

	/* Services ≤640: feature 280px + 6 малых сеткой 2-col по 3 ряда.
	   Ряды по 240px чтобы поместить img + title + pills + цена без обрезки. */
	.mh__services {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 280px repeat(3, 240px);
	}
	.mh__service--feature {
		grid-column: 1 / span 2;
		grid-row: 1;
		min-height: 280px;
	}
	.mh__service {
		padding: 10px 10px;
		gap: 5px;
		min-height: 240px;
	}
	/* Title с line-clamp 2 строки — все карточки на одной высоте, фото
	   выравнивается по горизонтали. Длинный «Таблички и информационные
	   стенды» обрезается ellipsis после 2 строк. */
	.mh__service-title {
		font-size: var(--text-body-sm);
		line-height: 1.2;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		min-height: 2.4em;
	}
	.mh__service-mats {
		min-height: 22px;
		max-height: 22px;
		overflow: hidden;
		align-items: flex-start;
	}
	.mh__service-mat { font-size: var(--text-mono-3xs); padding: 2px 5px; max-width: 9ch; letter-spacing: 0; }

	/* Img — фиксированная высота 90px (раньше aspect 4/3 = 119px на ширине 159px,
	   пушила цену за пределы карточки). margin-top: auto убран — flex flow. */
	.mh__service-img {
		aspect-ratio: auto;
		height: 90px;
		flex: 0 0 90px;
		margin-top: 0;
	}
	.mh__service-img img { width: 100%; height: 100%; object-fit: cover; }

	/* Цена — moved to top of card under title (flex order), gap 3px. */
	.mh__service-from { gap: 3px; align-items: baseline; flex-wrap: nowrap; margin-top: auto; }
	.mh__service-from-label { font-size: var(--text-mono-3xs); letter-spacing: 0.06em; }
	.mh__service-from b { font-size: var(--text-mono-sm); white-space: nowrap; letter-spacing: -0.015em; font-weight: 700; }
	.mh__service-num { font-size: var(--text-mono-3xs); letter-spacing: 0.12em; }

	/* Canvas остаётся карусель из ≤1024 правила. На <640 каждая карточка
	   занимает почти всю ширину viewport'а (видно 1 карточку + хвостик). */
	.mh__canvas-case {
		flex-basis: calc(100% - 28px);
		min-width: 0;
	}

	.mh__case-plate { grid-template-columns: repeat(2, 1fr); gap: 10px; }

	.mh__footer-inner { grid-template-columns: 1fr; gap: 24px; }
	.mh__footer-brand-logo { height: 80px; }

	.mh__contacts-row { grid-template-columns: 80px 1fr; gap: 16px; }

	.mh-marquee__item { font-size: var(--text-eyebrow); /* 11px → token */ padding: 0 18px; }
}

/* Compact variants Variant A удалены 17.05 — они применялись на ВСЕХ
   viewport'ах (без media query) и перекрывали мобильные стили из @media
   blocks выше из-за более высокой specificity (#howto vs .mh__section).
   Базовые desktop-стили уже есть в _section-shell.css и per-section CSS. */

/* ════════════════════════════════════════════════════════════════
   КАЛЬКУЛЯТОР ИНТЕРЬЕРНОЙ ПЕЧАТИ (.uc-calc__*)
   Real-time расчёт по ADR-008. Сетка: лево управление, право sticky-summary.
   ════════════════════════════════════════════════════════════════ */
.uc-calc {
	padding: 32px 56px;
	background: var(--paper);
	border-top: 1.5px solid var(--ink);
	border-bottom: 1.5px solid var(--ink);
}
.uc-calc .mh__section-head { padding-bottom: 20px; }
.uc-calc .mh__h2 { font-size: clamp(28px, 3vw, 40px); }
.uc-calc .mh__section-lead { font-size: var(--text-body-sm); /* 14px → token */ }
.uc-calc__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}
.uc-calc__controls {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.uc-calc__block--wide { grid-column: 1 / -1; }
/* На странице интерьерки только 4 блока — оставляем 2 колонки */
.uc-calc--interer .uc-calc__controls { grid-template-columns: 1fr 1fr; }

.uc-calc__block {
	background: var(--bg);
	border: 1px solid var(--line);
	padding: 14px 16px;
}
.uc-calc__block-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
}
.uc-calc__num {
	font-family: var(--font-mh-mono);
	font-size: var(--text-eyebrow); /* 11px → token */
	font-weight: 600;
	color: var(--accent);
	letter-spacing: 0.06em;
}
.uc-calc__block-head h3 {
	font-family: var(--font-mh-display);
	font-weight: 700;
	font-size: var(--text-body);
	color: var(--fg);
	margin: 0;
	letter-spacing: -0.008em;
}
.uc-calc__hint {
	margin-left: auto;
	font-family: var(--font-mh-mono);
	font-size: var(--text-mono-3xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-mute);
}

/* Размер */
.uc-calc__dims { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.uc-calc__field { display: flex; flex-direction: column; gap: 6px; }
.uc-calc__field > span {
	font-family: var(--font-mh-mono);
	font-size: var(--text-mono-3xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-mute);
}
.uc-calc__field input[type="number"] {
	font-family: var(--font-mh-display);
	font-weight: 700;
	font-size: var(--text-price); /* 22px → token */
	color: var(--fg);
	background: var(--paper);
	border: 1px solid var(--line);
	padding: 6px 10px;
	width: 100%;
	letter-spacing: -0.01em;
}
.uc-calc__field input[type="number"]:focus {
	outline: none;
	border-color: var(--accent);
}
.uc-calc__field input[type="range"] {
	width: 100%;
	accent-color: var(--accent);
}
.uc-calc__meta {
	display: flex;
	gap: 18px;
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px dashed var(--line);
	font-family: var(--font-mh-mono);
	font-size: var(--text-eyebrow); /* 11px → token */
	color: var(--fg-mute);
}
.uc-calc__meta b { color: var(--fg); font-weight: 600; }

/* Материалы — 1 колонка в compact-блоке */
.uc-calc__mats { display: flex; flex-direction: column; gap: 6px; }
.uc-calc__mat {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 4px 10px;
	padding: 8px 12px;
	background: var(--paper);
	border: 1px solid var(--line);
	cursor: pointer;
	transition: border-color 160ms ease, background 160ms ease;
	align-items: center;
}
.uc-calc__mat input { position: absolute; opacity: 0; pointer-events: none; }
.uc-calc__mat.is-active {
	border-color: var(--ink);
	background: var(--paper);
	box-shadow: inset 0 0 0 1px var(--ink);
}
.uc-calc__mat-name {
	font-family: var(--font-mh-display);
	font-weight: 600;
	font-size: var(--text-body-sm);
	color: var(--fg);
	line-height: 1.2;
}
.uc-calc__mat-desc { display: none; } /* compact-режим: hint в карточке материала не нужен */
.uc-calc__mat-rate {
	grid-row: 1 / 2;
	grid-column: 2 / 3;
	font-family: var(--font-mh-mono);
	font-size: var(--text-mono-2xs);
	color: var(--fg-mute);
	white-space: nowrap;
}
.uc-calc__mat-rate b {
	font-size: var(--text-body-sm);
	color: var(--fg);
	font-weight: 600;
}

/* Опции — компактные строки */
.uc-calc__opts { display: flex; flex-direction: column; gap: 6px; }
.uc-calc__opt {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr) auto;
	gap: 10px;
	padding: 8px 12px;
	background: var(--paper);
	border: 1px solid var(--line);
	cursor: pointer;
	align-items: center;
	transition: border-color 160ms ease, background 160ms ease;
}
.uc-calc__opt input { accent-color: var(--accent); width: 16px; height: 16px; }
.uc-calc__opt.is-active { border-color: var(--ink); background: var(--paper); }
.uc-calc__opt-name {
	font-family: var(--font-mh-display);
	font-weight: 600;
	font-size: var(--text-body-sm);
	color: var(--fg);
}
.uc-calc__opt-help { display: none; } /* compact: help скрыт, останется только title */
.uc-calc__opt-rate {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
	font-family: var(--font-mh-mono);
	white-space: nowrap;
}
.uc-calc__opt-rate span { font-size: var(--text-mono-2xs); /* 10px → token */ color: var(--fg-mute); }
.uc-calc__opt-rate b { font-size: var(--text-mono-sm); /* 12px → token */ color: var(--accent); font-weight: 600; }

/* Тираж */
.uc-calc__qty { display: flex; align-items: center; gap: 10px; }
.uc-calc__qty button {
	width: 34px; height: 34px;
	font-size: var(--text-h3-sm); /* 18px → token */ font-weight: 600;
	background: var(--paper);
	border: 1px solid var(--ink);
	color: var(--fg);
	cursor: pointer;
}
.uc-calc__qty button:hover { background: var(--ink); color: var(--paper); }
.uc-calc__qty input {
	width: 64px;
	font-family: var(--font-mh-display);
	font-weight: 700;
	font-size: var(--text-h3-sm);
	text-align: center;
	background: var(--paper);
	border: 1px solid var(--line);
	padding: 6px;
	color: var(--fg);
}
.uc-calc__qty-hint {
	font-family: var(--font-mh-mono);
	font-size: var(--text-eyebrow); /* 11px → token */
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-mute);
}

/* Summary (правая колонка) */
.uc-calc__summary {
	position: sticky;
	top: 24px;
	background: var(--ink);
	color: var(--paper);
	padding: 20px 22px 18px;
	border: 1.5px solid var(--ink);
}
.uc-calc__summary-eyebrow {
	font-family: var(--font-mh-mono);
	font-size: var(--text-mono-3xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.uc-calc__summary-eyebrow::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 4px rgba(var(--rgb-yellow-500), 0.18);
}
.uc-calc__total {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid rgba(var(--rgb-paper),0.18);
}
.uc-calc__total-label {
	font-family: var(--font-mh-mono);
	font-size: var(--text-mono-2xs); /* 10px → token */
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(var(--rgb-paper),0.6);
}
.uc-calc__total-value {
	font-family: var(--font-mh-display);
	font-weight: 700;
	font-size: var(--text-h2-md); /* 36px → token */
	letter-spacing: -0.02em;
	color: var(--paper);
	line-height: 1;
}
.uc-calc__total-floor {
	font-size: var(--text-eyebrow); /* 11px → token */
	color: rgba(var(--rgb-paper),0.55);
	margin-top: 4px;
	line-height: 1.4;
}
.uc-calc__breakdown {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.uc-calc__breakdown li {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) auto auto;
	gap: 10px;
	align-items: baseline;
	font-family: var(--font-mh-mono);
	font-size: var(--text-mono-2xs);
	color: rgba(var(--rgb-paper),0.7);
	padding-bottom: 6px;
	border-bottom: 1px dashed rgba(var(--rgb-paper),0.12);
}
.uc-calc__breakdown li:last-child { border-bottom: 0; padding-bottom: 0; }
.uc-calc__breakdown li b {
	font-size: var(--text-mono-sm); /* 12px → token */
	color: var(--paper);
	font-weight: 600;
	text-align: right;
}
.uc-calc__breakdown-qty {
	color: var(--accent) !important;
	font-weight: 600;
}
.uc-calc__cta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 12px;
}
.uc-calc__cta .mh__btn { width: 100%; justify-content: center; }
.uc-calc__cta-note {
	font-family: var(--font-mh-mono);
	font-size: var(--text-mono-3xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(var(--rgb-paper),0.5);
	text-align: center;
}
.uc-calc__legal {
	font-size: var(--text-eyebrow); /* 11px → token */
	line-height: 1.45;
	color: rgba(var(--rgb-paper),0.5);
	padding-top: 12px;
	border-top: 1px dashed rgba(var(--rgb-paper),0.14);
}

/* Холст: grid 3×3 кликабельных размеров */
.uc-calc__size-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
}
.uc-calc__size {
	position: relative;
	background: var(--paper);
	border: 1px solid var(--line);
	padding: 10px 12px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 2px;
	transition: border-color 160ms ease, background 160ms ease;
}
.uc-calc__size input { position: absolute; opacity: 0; pointer-events: none; }
.uc-calc__size.is-active {
	border-color: var(--ink);
	background: var(--paper);
	box-shadow: inset 0 0 0 1px var(--ink);
}
.uc-calc__size.is-popular .uc-calc__size-pin {
	position: absolute;
	top: 4px; right: 6px;
	font-family: var(--font-mh-mono);
	font-size: var(--text-mono-3xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}
.uc-calc__size.is-custom { background: var(--bg-deep); }
.uc-calc__size-label {
	font-family: var(--font-mh-mono);
	font-size: var(--text-mono-3xs); /* 9px → token */
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fg-mute);
}
.uc-calc__size-val {
	font-family: var(--font-mh-display);
	font-weight: 700;
	font-size: var(--text-h3-sm); /* 18px → token */
	line-height: 1;
	letter-spacing: -0.012em;
	color: var(--fg);
}
.uc-calc__size.is-custom .uc-calc__size-val { font-size: var(--text-body-sm); }
.uc-calc__size-price {
	font-family: var(--font-mh-mono);
	font-size: var(--text-mono-2xs);
	color: var(--fg-mute);
	display: flex;
	gap: 4px;
	align-items: baseline;
}
.uc-calc__size-price b { color: var(--fg); font-weight: 600; font-size: var(--text-mono-sm); /* 12px → token */ }

@media (max-width: 1024px) {
	.uc-calc__grid { grid-template-columns: 1fr; gap: 22px; }
	.uc-calc__summary { position: static; }
	.uc-calc__size-grid { grid-template-columns: repeat(2, 1fr); }
}