/**
 * Надстройки темы поверх перенесённой вёрстки:
 * витрина каталога, карточка автомобиля, формы, слайдер.
 */

/* ---------- слайдер каталога ---------- */
.v5-most-viewed-slider {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 8px;
}
.v5-most-viewed-slider::-webkit-scrollbar { display: none; }
.v5-most-viewed-slider > .v5-most-viewed-card {
	flex: 0 0 clamp(260px, 30%, 380px);
	scroll-snap-align: start;
}
.v5-most-viewed-arrow[disabled] { opacity: .35; cursor: default; }

/* ---------- сетка каталога ---------- */
.tsc-catalog { padding: 40px 24px 72px; max-width: 1440px; margin: 0 auto; }
.tsc-catalog-head { margin-bottom: 24px; }
.tsc-catalog-title { margin: 0 0 6px; font-size: clamp(28px, 4vw, 44px); }
.tsc-catalog-count { margin: 0; opacity: .7; font-size: 14px; }

.tsc-catalog-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
}
.tsc-catalog-filters input[type=search],
.tsc-catalog-filters select {
	padding: 10px 14px;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 8px;
	background: #fff;
	font: inherit;
	min-width: 180px;
}
.tsc-catalog-filters input[type=search] { flex: 1 1 260px; }
.tsc-catalog-filters .btn-primary {
	padding: 10px 22px;
	border: 0;
	border-radius: 8px;
	background: #111;
	color: #fff;
	cursor: pointer;
	font-weight: 600;
}
.tsc-catalog-reset { align-self: center; font-size: 14px; text-decoration: underline; }

.tsc-catalog-pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 40px;
}
.tsc-catalog-pagination .page-numbers {
	padding: 8px 14px;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 8px;
	text-decoration: none;
}
.tsc-catalog-pagination .page-numbers.current { background: #111; color: #fff; border-color: #111; }
.tsc-catalog-empty { padding: 40px 0; opacity: .75; }

/* ---------- отметка «продан» ---------- */
.tsc-sold-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(17, 17, 17, .88);
	color: #fff;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.v5-most-viewed-card-image { position: relative; }

/* ---------- карточка автомобиля ---------- */
.tsc-vdp { max-width: 1440px; margin: 0 auto; padding: 32px 24px 80px; }
.tsc-vdp-breadcrumbs { display: flex; gap: 10px; font-size: 13px; opacity: .7; margin-bottom: 18px; }
.tsc-vdp-breadcrumbs a { text-decoration: none; }
.tsc-vdp-breadcrumbs span::before { content: '/'; margin-right: 10px; opacity: .5; }

.tsc-vdp-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 40px;
	align-items: start;
}
.tsc-vdp-stage { position: relative; border-radius: 14px; overflow: hidden; background: #0d0d0d; }
.tsc-vdp-stage img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tsc-stage-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.tsc-stage-prev { left: 14px; }
.tsc-stage-next { right: 14px; }
.tsc-stage-counter {
	position: absolute;
	right: 14px;
	bottom: 14px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .6);
	color: #fff;
	font-size: 13px;
}
.tsc-vdp-thumbs {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	margin-top: 12px;
	padding-bottom: 6px;
}
.tsc-thumb {
	flex: 0 0 108px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: none;
	cursor: pointer;
}
.tsc-thumb.is-active { border-color: #111; }
.tsc-thumb img { display: block; width: 100%; height: 74px; object-fit: cover; }

.tsc-vdp-block { margin-top: 42px; }
.tsc-vdp-block h2 { font-size: 22px; margin: 0 0 16px; }
.tsc-vdp-description p { line-height: 1.7; }
.tsc-vdp-specs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 14px 24px;
}
.tsc-spec { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.tsc-spec-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .6; }
.tsc-spec-value { font-weight: 600; }
.tsc-vdp-features {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 8px 20px;
	margin: 0;
	padding-left: 18px;
}

.tsc-vdp-card {
	position: sticky;
	top: 24px;
	padding: 26px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 14px;
	background: #fff;
}
.tsc-vdp-title { font-size: 26px; margin: 0 0 4px; }
.tsc-vdp-trim { margin: 0 0 12px; opacity: .7; }
.tsc-vdp-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; font-size: 13px; }
.tsc-vdp-meta span { padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .06); }
.tsc-vdp-status.is-sold { background: #111; color: #fff; }
.tsc-vdp-price-label { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .6; }
.tsc-vdp-price { margin: 2px 0 18px; font-size: 34px; font-weight: 700; }
.tsc-vdp-price-sold { font-size: 26px; }
.tsc-vdp-carfax { display: inline-block; margin-bottom: 18px; font-size: 14px; }

.tsc-vdp-contacts { margin-top: 22px; font-size: 14px; line-height: 1.6; opacity: .85; }
.tsc-vdp-related { margin-top: 64px; }
.tsc-vdp-related h2 { margin: 0 0 20px; }

/* ---------- формы ---------- */
.tsc-form { display: grid; gap: 10px; }
.tsc-form h2 { margin: 0 0 4px; font-size: 18px; }
.tsc-form input,
.tsc-form textarea,
.tsc-form select {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 8px;
	font: inherit;
	background: #fff;
}
.tsc-form .btn-primary {
	padding: 12px 20px;
	border: 0;
	border-radius: 8px;
	background: #111;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}
.tsc-form .btn-primary[disabled] { opacity: .6; cursor: default; }
.tsc-form-status { margin: 2px 0 0; font-size: 14px; min-height: 20px; }
.tsc-form-status.is-ok { color: #1a7f37; }
.tsc-form-status.is-error { color: #b42318; }

/* ---------- появление секций ---------- */
.sd-anim { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.sd-anim.sd-anim-in { opacity: 1; transform: none; }
.sd-anim-2 { transition-delay: .08s; }
.sd-anim-3 { transition-delay: .16s; }
.sd-anim-4 { transition-delay: .24s; }

/* ---------- мобильное меню ---------- */
body.show-offcanvas-menu { overflow: hidden; }
.space-header-v3-offcanvas-menu.is-active { visibility: visible; z-index: 10000; }

@media (max-width: 1024px) {
	.tsc-vdp-layout { grid-template-columns: 1fr; }
	.tsc-vdp-card { position: static; }
}
@media (max-width: 640px) {
	.tsc-catalog { padding: 24px 16px 56px; }
	.tsc-vdp { padding: 20px 16px 56px; }
	.tsc-catalog-filters input[type=search],
	.tsc-catalog-filters select { min-width: 0; flex: 1 1 100%; }
	.v5-most-viewed-slider > .v5-most-viewed-card { flex-basis: 82%; }
}

/* Сетка каталога использует карточку из слайдера. Её внутренняя вёрстка
   рассчитана на ширину 300px, поэтому колонки делаем такой же ширины,
   а не растягиваем карточку. */
.sd-v5-most-viewed.tsc-catalog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 300px);
	justify-content: center;
	gap: 24px;
	overflow: visible;
	padding: 0;
}
.sd-v5-most-viewed.tsc-catalog-grid .v5-most-viewed-card { flex: none; }

/* Шапка донора зафиксирована поверх страницы. На главной под неё уходит
   первый экран, а каталог и карточка начинаются сразу с контента — им нужен
   отступ на высоту шапки, иначе первые строки прячутся под ней. */
.tsc-catalog,
.tsc-vdp { padding-top: 104px; }

@media (max-width: 640px) {
	.tsc-catalog,
	.tsc-vdp { padding-top: 178px; }
}

/* формы на страницах */
.tsc-form-row { display: grid; gap: 6px; margin: 0 0 14px; }
.tsc-form-row label { font-size: 13px; font-weight: 600; color: #333; }
#submit .tsc-form-row label { color: #fff; }
.tsc-req { color: #b42318; }
.tsc-form-contact,
.tsc-form-credit,
.tsc-form-trade-in { display: block; }
.tsc-form-credit .tsc-form-row,
.tsc-form-trade-in .tsc-form-row { margin-bottom: 16px; }
@media (min-width: 700px) {
	.tsc-form-credit,
	.tsc-form-trade-in { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
	.tsc-form-credit .tsc-form-row:has(textarea),
	.tsc-form-trade-in .tsc-form-row:has(textarea),
	.tsc-form-credit > button,
	.tsc-form-trade-in > button,
	.tsc-form-credit > .tsc-form-status,
	.tsc-form-trade-in > .tsc-form-status { grid-column: 1 / -1; }
}

/* поиск в шапке ведёт в каталог */
.tsc-header-search { display: flex; align-items: center; gap: 8px; width: 100%; }
.tsc-header-search .spx-input {
	flex: 1;
	min-width: 0;
	padding: 8px 12px;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 999px;
	background: #fff;
	font: inherit;
}
.tsc-header-search .spx-enter {
	border: 0;
	background: none;
	cursor: pointer;
	padding: 6px;
	color: inherit;
}

/* нижняя панель на телефоне: у донора она появляется только на узких экранах */
.mtb-v2-wrapper { display: none; }
@media (max-width: 782px) {
	.mtb-v2-wrapper { display: block; }
	body { padding-bottom: 62px; }
}
/* Выезжающее меню. Панель донора уведена за экран (translateX) и скрыта:
   выезжать её заставлял скрипт поставщика. Возвращаем на место по классу
   на <body>, который ставит наш скрипт. */
body.show-offcanvas-menu .space-header-v3-offcanvas-menu,
body.show-offcanvas-menu .space-header-v3-offcanvas-menu-wrapper,
body.show-offcanvas-menu .space-header-v3-offcanvas-menu-close {
	visibility: visible !important;
}
body.show-offcanvas-menu .space-header-v3-offcanvas-menu-wrapper {
	transform: none !important;
	z-index: 100000;
	overflow-y: auto;
}
body.show-offcanvas-menu .space-header-v3-offcanvas-menu::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 99998;
	background: rgba(0, 0, 0, .5);
}

/* ---------- окно заявки карточки автомобиля ---------- */
/* у донора на этих кнопках висел виджет space.auto; он не переносился,
   поэтому здесь то же действие выполняет форма темы */
.tsc-lead-modal {
	position: fixed;
	inset: 0;
	z-index: 99999999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, .55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.tsc-lead-modal.show { display: flex; }
body.tsc-lead-open { overflow: hidden; }
.tsc-lead-box {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	background: #fff;
	border-radius: var(--border-radius, 8px);
	padding: 28px 28px 24px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
}
.tsc-lead-title { margin: 0 0 18px; font-size: 22px; font-weight: 600; padding-right: 32px; }
.tsc-lead-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 50%;
	background: #f0f0f0;
	color: #333;
	font-size: 16px;
	cursor: pointer;
}
.tsc-lead-close:hover { background: #e3e3e3; }
.tsc-lead-form[hidden] { display: none !important; }
.tsc-lead-form .btn-primary { width: 100%; margin-top: 4px; }
@media (min-width: 700px) {
	.tsc-lead-form[data-kind="credit"],
	.tsc-lead-form[data-kind="trade-in"] {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 18px;
	}
	.tsc-lead-form[data-kind="credit"] .tsc-form-row:has(textarea),
	.tsc-lead-form[data-kind="trade-in"] .tsc-form-row:has(textarea),
	.tsc-lead-form .btn-primary,
	.tsc-lead-form .tsc-form-status { grid-column: 1 / -1; }
}

/* ---------- страница «не найдено» ---------- */
.tsc-404-row .fl-row-content-wrap { padding: 120px 24px 140px; }
.tsc-404-row .fl-heading { margin: 0 0 16px; font-size: clamp(28px, 4vw, 44px); }
.tsc-404-row p { margin: 0 0 28px; max-width: 640px; opacity: .8; }
.tsc-404-row .fl-button-group-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 767px) {
	.tsc-404-row .fl-row-content-wrap { padding: 72px 20px 96px; }
	.tsc-404-row .fl-button-group-buttons .fl-button-group-button { flex: 1 1 100%; }
}

/* ---------- сетка машин на странице салона ---------- */
/* У донора этот блок на широком экране — сетка в три колонки, а на телефоне
   на телефоне превращается в горизонтальную карусель: колонка из 12 карточек
   растянула бы страницу вчетверо. На планшете, как и у донора, карточки
   идут в одну колонку. */
@media (max-width: 767px) {
	.tsc-page-location .recommended-vehicles .vehicle-grid {
		/* без сброса явной колонки первая карточка схлопывается в 1fr */
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: calc(100vw - 36px);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin: 16px 0;
		padding: 0 16px;
	}
	.tsc-page-location .recommended-vehicles .vehicle-grid::-webkit-scrollbar { display: none; }
	.tsc-page-location .recommended-vehicles .vehicle-grid > .vehicle.card { scroll-snap-align: start; }
}