/* ==========================================================================
   Главная — редизайн «сайт как приложение» (с 29.09.2026)
   Правила: FRONTEND_CONVENTIONS.md. Макеты: Home.dc.html (ПК),
   MobileHome.dc.html + MobileCalc.dc.html (телефон) в
   https://claude.ai/artifact/DWC7sWLCLi7TmMaE6t6Lhe.
   Только внешний вид: все классы/id/data-атрибуты калькулятора, ленты и
   баннеров прежние, скрипты страницы не менялись. Всё — внутри .home-v2.
   Шрифт Inter — только здесь (решение Амира 29.09).
   ========================================================================== */

@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Medium.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Bold.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

/* base.css задаёт шрифт каждому элементу (*) — перекрываем внутри главной */
.home-v2,
.home-v2 * {
	font-family: "Inter", "kupitak", sans-serif;
}

.home-v2 .title {
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* Светлая «дорожка» под ползунком (calcPinkTrack приложения). Заливку
   рисует calculator.js инлайн-градиентом до «transparent» — незаполненная
   часть раньше была невидимой; дорожку кладём под ползунок псевдоэлементом,
   сам ползунок и его логика не меняются. top = высота плашки + отступ. */
.home-v2 .calculator-input-item::after {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	height: 3px;
	border-radius: 2px;
	pointer-events: none;
	z-index: 0;
}

.home-v2 .calculator-input-item input[type="range"] {
	position: relative;
	z-index: 1;
}

/* Панель расчёта — только после выбора региона (решение Амира 29.09).
   Класс calc-inactive ставит/снимает calculator.js (setTariff/deactivate),
   логика прежняя; раньше панель была видна размытой под подсказкой. */
.home-v2 .calculator-container.calc-inactive {
	display: none;
}

.home-v2 .hv2-calc-hint {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--gray);
}

.home-v2 .hv2-calc-hint svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* карточка калькулятора и окно — только телефон */
.hv2-calc-card-wrap,
.hv2-calc-close,
.hv2-calc-backdrop {
	display: none;
}

/* калькулятор «как в приложении» (30.09.2026): тексты/элементы телефона на
   ПК скрыты — ПК без изменений (решение Амира) */
.hv2-lbl-m,
.home-v2 .hv2-unit,
.hv2-calc-back {
	display: none;
}

/* ==========================================================================
   ПК (≥769)
   ========================================================================== */
@media (min-width: 769px) {
	/* --- Калькулятор: белая карточка, шапка с иконкой слева --- */
	.home-v2 .calculator {
		scroll-margin-top: 144px; /* якорь #calculator — под шапкой (124 + 20) */
	}

	.home-v2 .calculator > .container > * {
		position: relative;
	}

	.home-v2 .hv2-calc-head {
		display: flex;
		align-items: center;
		gap: 18px;
		margin-bottom: 24px;
	}

	.home-v2 .hv2-calc-icon {
		width: 64px;
		height: 64px;
		border-radius: 20px;
		background: var(--card-lilac);
		color: var(--accent);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.home-v2 .hv2-calc-icon svg {
		width: 30px;
		height: 30px;
	}

	.home-v2 .hv2-calc-head .title {
		margin: 0;
		text-align: left;
	}

	.home-v2 .hv2-calc-sub {
		margin-top: 4px;
		font-size: 16px;
		color: var(--gray);
	}

	/* регионы — строками: логотип | регион | ›. На ПК две строки, как в
	   макете: неактивный «Дагестан — СКОРО» скрыт (решение Амира 29.09);
	   на телефоне он остаётся третьей карточкой, как в приложении. */
	.home-v2 .calc-regions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		margin-bottom: 14px;
	}

	.home-v2 .calc-region-btn[data-region="dagestan"] {
		display: none;
	}

	.home-v2 .calc-region-btn {
		flex-direction: row;
		justify-content: flex-start;
		gap: 16px;
		min-height: 88px;
		padding: 0 22px;
		border: 1.5px solid var(--card-lilac);
		border-radius: 20px;
		background: var(--white);
		position: relative;
	}

	.home-v2 .calc-region-btn:not(:disabled)::after {
		content: "";
		width: 9px;
		height: 9px;
		border-right: 2.4px solid var(--accent);
		border-top: 2.4px solid var(--accent);
		transform: rotate(45deg);
		margin-left: auto;
		flex-shrink: 0;
	}

	.home-v2 .calc-region-btn:hover:not(:disabled) {
		border-color: var(--accent-bright);
	}

	.home-v2 .calc-region-btn.active {
		border-color: var(--accent);
		background: #fbf6fd; /* светлее --card-lilac: выбранная строка как в макете */
	}

	.home-v2 .calc-region-btn:disabled {
		background: var(--light);
		opacity: 1;
	}

	.home-v2 .calc-region-sub,
	.home-v2 .calc-region-name {
		font-size: 16px;
		font-weight: 600;
		color: var(--black);
		text-align: left;
	}

	.home-v2 .calc-region-logo-kupitak {
		height: 26px;
	}

	.home-v2 .calc-region-logo-fincity {
		height: 24px;
	}

	.home-v2 .calc-region-active {
		text-align: left;
		margin: 4px 0 18px;
	}

	/* серая панель расчёта */
	.home-v2 .calculator-container {
		border-radius: 24px;
		padding: 36px 40px 30px;
		background: var(--light);
	}

	.home-v2 .calculator-inputs {
		gap: 36px;
		margin-bottom: 26px;
	}

	/* поле как «плашка» приложения: подпись слева, сумма справа */
	.home-v2 .calculator-input-item {
		gap: 0;
	}

	/* подпись занимает только место слева от числа (как CalcPinkRow
	   приложения: подпись Expanded, число по ширине) — иначе длинная сумма
	   (2 000 000) уходила под «(руб)»; не влезает в строку — переносится.
	   --hv2-num-w (ширина числа) ставит скрипт главной (syncNumWidths). */
	.home-v2 .calculator-input-item label {
		position: absolute;
		left: 18px;
		top: 26px; /* середина плашки 52 px */
		transform: translateY(-50%);
		max-width: calc(100% - 36px - 10px - var(--hv2-num-w, 90px));
		line-height: 1.2;
		font-size: 14px;
		font-weight: 500;
		color: var(--label-gray);
		z-index: 2;
		pointer-events: none;
	}

	.home-v2 .calculator-input-item input[type="tel"] {
		height: 52px;
		border-radius: 16px;
		padding: 0 18px;
		text-align: right;
		font-size: 17px;
		font-weight: 700;
	}

	/* ползунки — розовые, как в приложении (calc_pink_parts.dart);
	   заливку рисует calculator.js через var(--accent) — переопределяем
	   переменную только у самих ползунков */
	.home-v2 .calculator-input-item input[type="range"] {
		--accent: var(--brand-purple);
		height: 3px;
		width: calc(100% - 16px);
		margin: 17px 8px 0;
	}

	.home-v2 .calculator-input-item input[type="range"]::-webkit-slider-thumb {
		width: 16px;
		height: 16px;
		background: var(--white);
		box-shadow: 0 0 0 1px var(--brand-purple);
	}

	.home-v2 .calculator-input-item input[type="range"]::-moz-range-thumb {
		width: 16px;
		height: 16px;
		background: var(--white);
		box-shadow: 0 0 0 1px var(--brand-purple);
	}

	.home-v2 .calc-with-snap .snap-mark {
		width: 9px;
		height: 9px;
		background: #e2dde6; /* на тон темнее дорожки — видна на серой панели */
		z-index: 2;
	}

	.home-v2 .calculator-input-item::after {
		top: 69px; /* 52 плашка + 17 отступ */
		background: #e9e6ec; /* дорожка на серой панели ПК */
	}

	.home-v2 .calculator-results {
		gap: 36px;
		margin-bottom: 8px;
	}

	.home-v2 .calculator-result-rata {
		font-size: 34px;
		font-weight: 700;
		letter-spacing: -0.02em;
	}

	.home-v2 .calculator-result-item h3 {
		font-size: 14px;
		font-weight: 400;
		color: var(--gray);
	}

	.home-v2 .calculator-action-button {
		height: 56px;
		border-radius: 18px;
		padding: 0 40px;
		font-size: 17px;
		font-weight: 600;
		background: var(--accent);
	}

	.home-v2 .calculator-action-button:hover {
		background: var(--accent-alternate);
	}

	/* --- Баннеры --- */
	.home-v2 .home-banner {
		border-radius: 28px;
	}

	/* --- Лента: карточка как в приложении (название → город → цена) --- */
	.home-v2 .new-posts .post-item {
		display: flex;
		flex-direction: column;
	}

	.home-v2 .new-posts .post-item-image {
		border-radius: 20px;
	}

	.home-v2 .new-posts .post-item-title {
		order: 1;
		margin-top: 12px;
		font-size: 16px;
		font-weight: 500;
	}

	.home-v2 .new-posts .post-item-location {
		order: 2;
	}

	.home-v2 .new-posts .post-item-pair {
		order: 3;
		margin-top: 6px;
	}

	.home-v2 .new-posts .post-item-price {
		font-size: 22px;
		font-weight: 700;
	}
}

/* ==========================================================================
   ТЕЛЕФОН (≤768) — как в приложении (home_screen.dart)
   ========================================================================== */
@media (max-width: 768px) {
	.home-v2 {
		background: var(--light);
	}

	/* низ шапки — светлый лист того же цвета, что и страница */
	.home-v2 .global-search.gs-v2::after {
		background: var(--light);
	}

	.home-v2 .title {
		text-align: left !important; /* у заголовка категорий инлайн-центр */
		font-size: 20px;
		line-height: 1;
		margin: 0 0 24px;
	}

	/* --- Категории: 2 + 2 + 3 + 3, карточки 80 px (_CategoryCards) --- */
	.home-v2 .categories {
		background: none;
		padding: 0;
		margin: 0 0 24px;
	}

	.home-v2 .categories-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 8px 10px;
		overflow: visible;
		padding: 0 20px;
	}

	.home-v2 .categories .container {
		padding: 0 20px;
	}

	.home-v2 .categories-grid .category-item {
		grid-column: span 2;
		min-width: 0;
		height: 80px;
		min-height: 0;
		padding: 10px 4px 10px 10px;
		border-radius: 14px;
	}

	.home-v2 .categories-grid .category-item:nth-child(-n + 4) {
		grid-column: span 3;
	}

	.home-v2 .categories-grid .category-item h3 {
		font-size: 12px;
		font-weight: 600;
		line-height: 14px;
		padding: 0;
	}

	.home-v2 .categories-grid .category-item img {
		height: 100%;
	}

	/* --- Карточка калькулятора (_CalcBlock) --- */
	.hv2-calc-card-wrap {
		display: block;
		padding: 0 20px;
		margin-bottom: 24px;
	}

	.hv2-calc-card {
		display: block;
		width: 100%;
		border: 0;
		background: var(--white);
		border-radius: 20px;
		padding: 20px;
		text-align: left;
		cursor: pointer;
		color: var(--black);
	}

	.hv2-calc-card-head {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.home-v2 .hv2-calc-icon {
		width: 48px;
		height: 48px;
		border-radius: 14px;
		background: rgb(149 55 180 / 8%);
		color: var(--accent);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.home-v2 .hv2-calc-icon svg {
		width: 26px;
		height: 26px;
	}

	.hv2-calc-card-title {
		display: block;
		font-size: 16px;
		font-weight: 700;
		line-height: 20px;
	}

	.hv2-calc-card-text {
		display: block;
		margin-top: 4px;
		font-size: 13px;
		line-height: 18px;
		color: rgb(22 14 24 / 50%);
	}

	.hv2-calc-card-btn {
		margin-top: 16px;
		padding: 14px;
		border-radius: 16px;
		background: var(--accent);
		color: var(--white);
		font-size: 14px;
		font-weight: 700;
		line-height: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
	}

	.hv2-calc-card-btn::after {
		content: "";
		width: 6px;
		height: 6px;
		border-right: 2px solid currentColor;
		border-top: 2px solid currentColor;
		transform: rotate(45deg);
	}

	/* --- Калькулятор = окно снизу --- */
	.hv2-calc-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 399;
		background: rgb(22 14 24 / 45%);
		opacity: 0;
		transition: opacity 0.25s;
	}

	.hv2-calc-backdrop[hidden] {
		display: none;
	}

	body.hv2-calc-open .hv2-calc-backdrop {
		opacity: 1;
	}

	body.hv2-calc-open {
		overflow: hidden;
	}

	.home-v2 .calculator {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 400;
		max-height: 90dvh;
		overflow-y: auto;
		margin: 0;
		background: var(--white);
		border-radius: 24px 24px 0 0;
		padding: 10px 0 max(20px, env(safe-area-inset-bottom));
		transform: translateY(105%);
		transition: transform 0.3s ease;
		visibility: hidden;
	}

	body.hv2-calc-open .home-v2 .calculator {
		transform: none;
		visibility: visible;
	}

	.home-v2 .calculator > .container {
		padding: 0 20px;
	}

	.home-v2 .calculator > .container::before {
		content: "";
		display: block;
		width: 36px;
		height: 5px;
		border-radius: 3px;
		background: var(--light-gray);
		margin: 0 auto 14px;
	}

	/* заголовок окна с крестиком закреплён: прежний скрипт после выбора
	   региона прокручивает окно к расчёту — крестик не должен уезжать */
	.home-v2 .hv2-calc-head {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 0 -20px 16px;
		padding: 6px 20px 10px;
		position: sticky;
		top: -10px;
		z-index: 20;
		background: var(--white);
	}

	.home-v2 .hv2-calc-head .hv2-calc-icon,
	.home-v2 .hv2-calc-sub {
		display: none;
	}

	.home-v2 .hv2-calc-head-text {
		flex-grow: 1;
	}

	.home-v2 .hv2-calc-head .title {
		margin: 0;
		font-size: 20px;
	}

	.hv2-calc-close {
		display: flex;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		border: 0;
		background: var(--light);
		color: var(--gray);
		font-size: 20px;
		line-height: 1;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		flex-shrink: 0;
	}

	/* регионы — три карточки в ряд (CalcCompanyCard) */
	.home-v2 .calc-regions {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		margin-bottom: 10px;
	}

	.home-v2 .calc-region-btn {
		flex-direction: column;
		justify-content: center;
		min-height: 84px;
		padding: 0 6px;
		gap: 8px;
		border: 1.5px solid var(--card-lilac);
		border-radius: 16px;
	}

	.home-v2 .calc-region-btn.active {
		border-color: var(--accent);
		background: var(--white);
	}

	.home-v2 .calc-region-logo-kupitak,
	.home-v2 .calc-region-logo-fincity {
		height: 22px;
	}

	.home-v2 .calc-region-sub,
	.home-v2 .calc-region-name {
		font-size: 11px;
		font-weight: 500;
		color: var(--black);
		text-align: center;
	}

	.home-v2 .calc-region-btn:disabled .calc-region-name {
		color: var(--label-gray);
	}

	.home-v2 .calc-region-soon {
		font-size: 10px;
		padding: 0;
		background: none;
		margin: 0;
	}

	.home-v2 .calc-region-active {
		text-align: left;
		font-size: 13px;
		margin: 0 0 12px;
	}

	/* панель расчёта: плашки 48 + ползунки, как CalcPinkRow/CalcPinkSlider */
	.home-v2 .calculator-container {
		background: none;
		padding: 0;
		border-radius: 0;
		overflow: visible;
		scroll-margin-top: 64px; /* прокрутка к расчёту — не под закреплённый заголовок */
	}

	.home-v2 .calculator-icon {
		display: none;
	}

	.home-v2 .calculator-inputs {
		gap: 0;
		margin-bottom: 4px;
	}

	.home-v2 .calculator-input-item {
		gap: 0;
	}

	.home-v2 .calculator-input-item label {
		position: absolute;
		left: 16px;
		top: 0;
		height: 48px;
		display: flex;
		align-items: center;
		font-size: 13px;
		font-weight: 500;
		color: var(--label-gray);
		z-index: 2;
		pointer-events: none;
	}

	.home-v2 .calculator-input-item input[type="tel"] {
		height: 48px;
		border-radius: 16px;
		background: var(--light);
		padding: 0 16px;
		text-align: right;
		font-size: 15px;
		font-weight: 700;
	}

	.home-v2 .calculator-input-item input[type="range"] {
		--accent: var(--brand-purple);
		height: 3px;
		width: calc(100% - 16px);
		margin: 16px 8px 17px;
	}

	.home-v2 .calculator-input-item input[type="range"]::-webkit-slider-thumb {
		width: 16px;
		height: 16px;
		background: var(--white);
		box-shadow: 0 0 0 1px var(--brand-purple);
	}

	.home-v2 .calculator-input-item input[type="range"]::-moz-range-thumb {
		width: 16px;
		height: 16px;
		background: var(--white);
		box-shadow: 0 0 0 1px var(--brand-purple);
	}

	.home-v2 .calc-with-snap .snap-mark {
		width: 9px;
		height: 9px;
		background: #e2dde6; /* как в приложении — точка чуть темнее дорожки */
		z-index: 2;
	}

	.home-v2 .calculator-input-item::after {
		top: 64px; /* 48 плашка + 16 отступ */
		background: #f3f5f7; /* calcPinkTrack приложения */
	}

	/* итоги — строками-плашками: «Ежемесячный платеж … ₽» */
	.home-v2 .calculator-results {
		gap: 8px;
		margin-bottom: 18px;
		padding: 0; /* у main.css на мобиле здесь 20px — строки выходили уже полей */
	}

	.home-v2 .calculator-result-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 48px;
		padding: 0 16px;
		border-radius: 16px;
		background: var(--light);
	}

	.home-v2 .calculator-result-item h3 {
		order: 0;
		margin: 0;
		font-size: 13px;
		font-weight: 500;
		color: var(--label-gray);
	}

	.home-v2 .calculator-result-rata {
		order: 1;
		font-size: 15px;
		font-weight: 700;
	}

	.home-v2 .calculator-actions .calculator-action-button {
		max-width: none;
		height: 52px;
		border-radius: 16px;
		font-size: 16px;
		font-weight: 700;
		background: var(--accent);
	}

	/* затемнение «Сначала выберите регион» — по размеру панели */
	.home-v2 .calc-overlay {
		border-radius: 16px;
	}

	/* --- Баннеры --- */
	.home-v2 .home-banners {
		padding: 0 0 24px;
	}

	.home-v2 .home-banner {
		border-radius: 22px;
	}

	/* --- Лента «Новые объявления» (FeedCard) --- */
	.home-v2 .new-posts .container {
		padding: 0 20px;
	}

	.home-v2 .new-posts .posts-grid {
		gap: 20px 8px;
	}

	.home-v2 .new-posts .post-item {
		display: flex;
		flex-direction: column;
	}

	.home-v2 .new-posts .post-item-image {
		aspect-ratio: 164 / 182;
		height: auto;
		border-radius: 24px;
	}

	.home-v2 .new-posts .post-item-title {
		order: 1;
		margin-top: 8px;
		font-size: 15px;
		font-weight: 500;
		line-height: 20px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.home-v2 .new-posts .post-item-location {
		order: 2;
		margin-top: 4px;
		font-size: 11px;
		line-height: 16px;
		color: rgb(22 14 24 / 40%);
	}

	.home-v2 .new-posts .post-item-pair {
		order: 3;
		margin-top: 8px;
	}

	.home-v2 .new-posts .post-item-price {
		font-size: 18px;
		font-weight: 700;
		line-height: 16px;
	}

	.home-v2 .new-posts .promo-mark {
		background: rgb(238 237 254 / 92%);
		color: #534ab7; /* как в FeedCard приложения */
		font-size: 11px;
		font-weight: 500;
		border-radius: 999px;
		padding: 6px 10px;
	}

	/* ======================================================================
	   Калькулятор как в приложении (30.09.2026, снимок шита приложения от
	   Амира; calculator_section.dart + calc_pink_parts.dart). Только
	   телефон — ПК без изменений. Логика calculator.js прежняя.
	   - заголовок «Выберите регион», светлый шит, крестик белым квадратом;
	   - компании: 2 карточки CalcCompanyCard (Дагестан скрыт, как в
	     приложении); после выбора — строка CalcSelectedCompanyBar
	     (лого, регион, «назад» → сброс выбора, скрипт в index.blade.php);
	   - поля и итоги — в белой карточке r18 (padding 20), плашки как
	     CalcPinkRow: подпись с двоеточием слева, значение + «₽»/«месяца»
	     справа; итоги — такие же плашки;
	   - «Условия рассрочки» с иконкой по центру, «Оформить ›».
	   ====================================================================== */
	.hv2-lbl-pc {
		display: none;
	}

	.hv2-lbl-m {
		display: inline;
	}

	.home-v2 .calculator,
	.home-v2 .hv2-calc-head {
		background: var(--light);
	}

	.home-v2 .hv2-calc-head .title {
		font-size: 22px;
		font-weight: 600;
	}

	.hv2-calc-close {
		width: 40px;
		height: 40px;
		border-radius: 14px;
		background: var(--white);
		font-size: 24px;
	}

	/* компании — кнопками-строками, как на ПК (просьба Амира: «должны быть
	   как кнопки, а то непонятно, что нужно выбрать»): белая строка в
	   лиловой рамке, логотип | регион | «›» */
	.home-v2 .calc-region-btn[data-region="dagestan"] {
		display: none;
	}

	.home-v2 .calc-regions {
		position: relative;
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
		margin-bottom: 12px;
	}

	.home-v2 .calc-region-btn {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 14px;
		min-height: 64px;
		padding: 0 18px;
		border: 1.5px solid color-mix(in srgb, var(--accent) 30%, var(--white));
		border-radius: 16px;
		background: var(--white);
		box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 8%, transparent);
		transition: border-color 0.15s, transform 0.1s;
	}

	.home-v2 .calc-region-btn:not(:disabled)::after {
		content: "";
		flex-shrink: 0;
		width: 8px;
		height: 8px;
		margin-left: auto;
		border-top: 2.2px solid var(--accent);
		border-right: 2.2px solid var(--accent);
		transform: rotate(45deg);
	}

	.home-v2 .calc-region-btn:active {
		border-color: var(--accent);
		transform: scale(0.99);
	}

	/* колонка логотипа одной ширины — названия регионов на одной линии */
	.home-v2 .calc-region-logo-kupitak {
		flex-shrink: 0;
		width: 96px;
		height: auto;
	}

	.home-v2 .calc-region-logo-fincity {
		flex-shrink: 0;
		width: 96px;
		height: 20px;
		object-fit: contain;
		object-position: left center;
	}

	.home-v2 .calc-region-sub {
		font-size: 15px;
		font-weight: 600;
		line-height: 20px;
		text-align: left;
		color: var(--black);
	}

	/* в строке-кнопке название региона помещается полностью */
	.home-v2 .calc-region-sub .hv2-lbl-pc {
		display: inline;
	}

	.home-v2 .calc-region-sub .hv2-lbl-m {
		display: none;
	}

	/* у выбранной строки справа «назад» — стрелка «›» и тень не нужны */
	.home-v2 .calc-regions .calc-region-btn.active::after {
		display: none;
	}

	.home-v2 .calc-regions .calc-region-btn.active {
		box-shadow: none;
		transform: none;
	}

	/* после выбора — строка выбранной компании с «назад» */
	.home-v2 .calc-regions:has(.calc-region-btn.active) {
		display: block;
	}

	.home-v2 .calc-regions:has(.calc-region-btn.active) .calc-region-btn:not(.active) {
		display: none;
	}

	.home-v2 .calc-regions .calc-region-btn.active {
		flex-direction: row;
		align-items: center;
		gap: 10px;
		width: 100%;
		height: 56px;
		padding: 0 56px 0 12px;
		border: 2px solid var(--accent);
		border-radius: 12px;
		background: color-mix(in srgb, var(--accent) 5%, var(--white));
		pointer-events: none; /* повторный тап сбросил бы введённые суммы */
	}

	.home-v2 .calc-region-btn.active .calc-region-logo-kupitak,
	.home-v2 .calc-region-btn.active .calc-region-logo-fincity {
		width: auto;
		padding: 0;
		border-radius: 0;
		background: none;
	}

	.home-v2 .calc-region-btn.active .calc-region-logo-kupitak {
		height: 22px;
	}

	.home-v2 .calc-region-btn.active .calc-region-logo-fincity {
		height: 20px;
	}

	.home-v2 .calc-region-btn.active .calc-region-sub {
		font-size: 13px;
		text-align: left;
	}

	.home-v2 .calc-regions:has(.calc-region-btn.active) .hv2-calc-back {
		position: absolute;
		top: 12px;
		right: 12px;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--white);
		color: var(--black);
		cursor: pointer;
	}

	.hv2-calc-back svg {
		width: 18px;
		height: 18px;
	}

	/* «Вы выбрали…» и подсказка про прописку — лишние при строке выбранной */
	.home-v2 .calc-region-active {
		display: none;
	}

	.home-v2 .calculator:has(.calc-region-btn.active) .hv2-calc-hint {
		display: none;
	}

	/* белая карточка полей и итогов (r18, как в приложении) */
	.home-v2 .calculator-inputs {
		margin-bottom: 0;
		padding: 20px 20px 0;
		border-radius: 18px 18px 0 0;
		background: var(--white);
	}

	.home-v2 .calculator-results {
		margin-bottom: 4px;
		padding: 4px 20px 20px;
		border-radius: 0 0 18px 18px;
		background: var(--white);
	}

	/* единица в плашке: «₽», «месяц / месяца / месяцев» */
	.home-v2 .calculator-input-item .hv2-unit {
		position: absolute;
		top: 0;
		right: 16px;
		z-index: 2;
		display: flex;
		align-items: center;
		height: 48px;
		color: var(--black);
		font-size: 15px;
		font-weight: 700;
		pointer-events: none;
	}

	.home-v2 .calculator-input-item input[type="tel"] {
		padding-right: calc(21px + var(--hv2-unit-w, 12px));
	}

	/* «Условия рассрочки» с иконкой по центру, под ней «Оформить ›» */
	.home-v2 .calculator-actions {
		gap: 4px;
		margin-top: 4px;
	}

	.home-v2 .calculator-conditions-info {
		display: none;
	}

	.home-v2 .calculator-conditions-link {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 48px;
		border-bottom: 0;
		color: var(--brand-purple);
		font-size: 14px;
		font-weight: 600;
	}

	.home-v2 .calculator-conditions-link::before {
		content: "";
		flex-shrink: 0;
		width: 18px;
		height: 18px;
		background: currentColor;
		-webkit-mask: url("../images/info-circle.svg") center / contain no-repeat;
		mask: url("../images/info-circle.svg") center / contain no-repeat;
	}

	.home-v2 .calculator-actions .calculator-action-button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		height: 56px;
		border-radius: 16px;
	}

	.home-v2 .calculator-actions .calculator-action-button::after {
		content: "";
		width: 7px;
		height: 7px;
		border-top: 2px solid currentColor;
		border-right: 2px solid currentColor;
		transform: rotate(45deg);
	}
}

/* Подписи калькулятора уступают место сумме: одна строка с многоточием. */
.home-v2 .calculator-input-item label {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: max(0px, calc(100% - 46px - var(--hv2-num-w, 90px)));
}
@media (max-width: 768px) {
	.home-v2 .calculator-input-item label {
		line-height: 48px;
		max-width: max(0px, calc(100% - 47px - var(--hv2-unit-w, 12px) - var(--hv2-num-w, 90px)));
	}
}

/* Телефон: итоги расчёта без серых плашек; редактируемые поля прежние. */
@media (max-width: 768px) {
	.home-v2 .calculator-result-item { background: none; }
}

/* Телефон: единый тонкий контур у всех итогов, включая общую стоимость. */
@media (max-width: 768px) {
	.home-v2 .calculator-result-item,
	.home-v2 .calculator-result-item:last-child { border-bottom: 1px solid var(--light-gray); }
}

/* Тот же контурный icon-info, что у ссылки условий в объявлении. */
.home-v2 .calculator-conditions-info { background: none; color: var(--accent); }
.home-v2 .calculator-conditions-info .calculator-info-icon { width: 18px; height: 18px; flex-shrink: 0; }