/* ======================================================================
   LuxAutoHub — варіант «AutoDealer»
   ----------------------------------------------------------------------
   Вигляд відтворює макет, а не підганяє під нього тему: шапка, підвал і
   головна малюються власними шаблонами дочірньої теми. Спроба досягти
   макета самими стилями поверх Car Dealer провалилась — кожне правило
   доводилось перебивати `!important`, і результат усе одно розходився.

   Від теми лишається те, що дає функціонал: каталог, картка авто,
   фільтри, кабінет, форми заявок. Їх приводимо до тієї самої палітри
   нижче.
   ====================================================================== */

:root {
	--lxd-ink: #08090a;
	--lxd-panel: #111314;
	--lxd-panel-2: #141516;
	--lxd-field: #0a0b0c;
	--lxd-line: #292b2d;
	--lxd-line-soft: #1f2122;
	--lxd-red: #e5231c;
	--lxd-red-bright: #ff3a31;
	--lxd-text: #ffffff;
	--lxd-muted: #9a9a9a;
	--lxd-radius: 4px;
	--lxd-shyryna: 1500px;
}

/* ---- основа ----------------------------------------------------------- */

body {
	margin: 0;
	background: var(--lxd-ink);
	color: var(--lxd-text);
	font-family: Inter, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/*
 * Поля обабіч. Були 32px — на широкому екрані заголовок починався майже
 * впритул до краю, і сторінка читалась як притиснута вліво. 60px дають
 * повітря і водночас не змушують очі бігати.
 */
.lxd-container {
	width: min(var(--lxd-shyryna), calc(100% - 120px));
	margin: 0 auto;
}

@media (max-width: 1200px) {

	.lxd-container {
		width: calc(100% - 64px);
	}
}

.lxd-header a,
.lxd-footer a,
.lxd-topbar a {
	color: inherit;
	text-decoration: none;
}

/* ---- смуга над шапкою -------------------------------------------------- */

.lxd-topbar {
	height: 44px;
	background: #0c0d0e;
	border-bottom: 1px solid #1c1d1e;
	color: #a9a9a9;
	font-size: 13px;
}

.lxd-topbar-inner {
	display: flex;
	align-items: center;
	gap: 32px;
	height: 100%;
}

.lxd-topbar-item i,
.lxd-topbar-tel i {
	margin-right: 8px;
	color: var(--lxd-red);
	font-size: 12px;
}

.lxd-topbar-right {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-left: auto;
}

.lxd-topbar-tel {
	color: #fff;
	font-weight: 700;
	white-space: nowrap;
}

/* ---- кнопки ------------------------------------------------------------ */

.lxd-btn {
	display: inline-block;
	padding: 14px 26px;
	border: 0;
	border-radius: var(--lxd-radius);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.lxd-btn-red {
	background: var(--lxd-red);
	color: #fff;
}

.lxd-btn-red:hover,
.lxd-btn-red:focus {
	background: var(--lxd-red-bright);
	color: #fff;
}

/* Рамка додає по пікселю згори й знизу, тож контурна кнопка виходила
   44px проти 42 у суцільної. Поруч у hero вони стоять парою в одному
   flex-ряду, і вища розтягувала сусідку — через це головна пара кнопок
   на сайті була на 2px вища за всі інші. Забираємо рамку з відступів. */
.lxd-btn-outline {
	padding: 13px 25px;
	border: 1px solid #6a6a6a;
	background: transparent;
	color: #fff;
}

.lxd-btn-outline:hover,
.lxd-btn-outline:focus {
	border-color: #fff;
	color: #fff;
}

.lxd-btn-sm {
	padding: 10px 18px;
	font-size: 12px;
}

/* ---- шапка ------------------------------------------------------------- */

.lxd-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--lxd-ink);
	border-bottom: 1px solid #171717;
}

.lxd-nav {
	display: flex;
	align-items: center;
	gap: 34px;
	height: 78px;
}

/* Логотип: напис і тонка дуга над ним — у макеті це силует даху авто */
.lxd-logo {
	position: relative;
	flex: 0 0 auto;
	margin-right: auto;
	padding-top: 9px;
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -0.4px;
	white-space: nowrap;
}

.lxd-logo-dah {
	position: absolute;
	top: 0;
	left: 4px;
	width: 74px;
	height: 20px;
	border-top: 2px solid var(--lxd-red);
	border-radius: 50%;
}

.lxd-logo-tekst b {
	color: var(--lxd-red);
	font-weight: 800;
}

.lxd-menu {
	display: flex;
	align-items: center;
}

.lxd-menu ul,
.lxd-menu li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lxd-menu > li,
.lxd-menu ul > li {
	position: relative;
	display: inline-block;
}

.lxd-menu a {
	display: block;
	padding: 28px 15px;
	color: #e9e9e9;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}

.lxd-menu a:hover,
.lxd-menu .current-menu-item > a,
.lxd-menu .current_page_item > a {
	color: var(--lxd-red);
}

.lxd-menu .current-menu-item > a::after,
.lxd-menu .current_page_item > a::after {
	content: "";
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 0;
	height: 3px;
	background: var(--lxd-red);
}

/* випадне підменю */
.lxd-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	display: none;
	min-width: 220px;
	padding: 8px 0;
	background: var(--lxd-panel);
	border: 1px solid var(--lxd-line);
	border-radius: var(--lxd-radius);
}

.lxd-menu li:hover > .sub-menu {
	display: block;
}

.lxd-menu .sub-menu li {
	display: block;
}

.lxd-menu .sub-menu a {
	padding: 11px 18px;
	font-size: 13px;
}

.lxd-heart {
	flex: 0 0 auto;
	color: var(--lxd-red);
	font-size: 26px;
	line-height: 1;
}

.lxd-menu-toggle {
	display: none;
	margin-left: auto;
	border: 0;
	background: none;
	color: #fff;
	font-size: 26px;
	cursor: pointer;
}

/* ---- підвал ------------------------------------------------------------ */

.lxd-footer {
	position: relative;
	padding: 54px 0 26px;
	background: #0a0b0c;
	border-top: 1px solid #1c1d1e;
	color: var(--lxd-muted);
	font-size: 14px;
}

/* Крайні колонки — однакові, середні — однакові: підвал читається як
   дзеркальний. Раніше було 1.6 і 1.4, і різниця в 99px на 1440 впадала
   в око, хоча жодного сенсу не несла. Сума лишилась та сама, тож
   ширина контактів навіть трохи виросла. */
.lxd-footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
	gap: 44px;
	padding-bottom: 34px;
}

.lxd-footer h4 {
	margin: 0 0 18px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}

.lxd-footer-col a,
.lxd-footer-kontakty p {
	display: block;
	margin: 0 0 11px;
	color: var(--lxd-muted);
	line-height: 1.5;
}

.lxd-footer-col a:hover {
	color: var(--lxd-red);
}

.lxd-footer-brand .lxd-logo {
	display: inline-block;
	margin: 0 0 16px;
	font-size: 21px;
}

.lxd-footer-brand p {
	margin: 0 0 18px;
	color: var(--lxd-muted);
	line-height: 1.6;
}

.lxd-footer-kontakty i {
	width: 18px;
	margin-right: 10px;
	color: var(--lxd-muted);
}

.lxd-soc {
	display: flex;
	gap: 12px;
}

.lxd-soc a,
.lxd-soc span {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #17191a;
	color: #cfcfcf;
	font-size: 15px;
	transition: background 0.18s, color 0.18s;
}

.lxd-soc a:hover {
	background: var(--lxd-red);
	color: #fff;
}

.lxd-soc span {
	opacity: 0.45;
}

.lxd-footer-nyz {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 20px;
	border-top: 1px solid #1c1d1e;
	font-size: 13px;
}

.lxd-footer-nyz-right a {
	margin-left: 26px;
	color: var(--lxd-muted);
}

.lxd-footer-nyz-right a:hover {
	color: var(--lxd-red);
}

/* ---- вікно зворотного дзвінка ------------------------------------------ */

.lxd-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: #000000cc;
}

.lxd-modal[hidden] {
	display: none;
}

.lxd-modal-box {
	position: relative;
	width: min(440px, 100%);
	padding: 34px;
	background: var(--lxd-panel-2);
	border: 1px solid #333;
	border-radius: 6px;
}

.lxd-modal-box h2 {
	margin: 8px 0 6px;
	font-size: 26px;
}

.lxd-modal-box > p {
	margin: 0 0 18px;
	color: var(--lxd-muted);
	font-size: 13px;
}

.lxd-modal-close {
	position: absolute;
	right: 14px;
	top: 8px;
	border: 0;
	background: none;
	color: #999;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.lxd-kicker {
	display: block;
	color: var(--lxd-red);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
}

/* ---- мобільна ---------------------------------------------------------- */

@media (max-width: 1100px) {
	.lxd-menu a {
		padding: 28px 10px;
		font-size: 13px;
	}

	.lxd-nav {
		gap: 20px;
	}
}

@media (max-width: 900px) {
	.lxd-container {
		width: calc(100% - 32px);
	}

	/* Топбар тут лишається, але худне.

	   Спершу ми ховали його на телефоні цілком — адреса з графіком не
	   вміщались у рядок. Разом з ними зникали телефон і «Замовити
	   дзвінок», тобто саме те, заради чого людина з телефона й заходить:
	   подзвонити одним дотиком. Тепер ховаємо лише адресу з графіком —
	   вони є і в підвалі, і на сторінці «Контакти», — а два способи
	   зв'язатися лишаємо на видноті. */
	.lxd-topbar {
		display: block;
	}

	.lxd-topbar-item {
		display: none;
	}

	.lxd-topbar-inner {
		justify-content: center;
	}

	.lxd-topbar-right {
		width: 100%;
		justify-content: space-between;
		gap: 10px;
	}

	@media (max-width: 400px) {

		.lxd-topbar-right {
			gap: 4px;
		}
	}

	.lxd-topbar-tel {
		font-size: 14px;
		font-weight: 700;
	}

	.lxd-nav {
		height: 64px;
	}

	.lxd-menu-toggle {
		display: block;
		order: 3;
	}

	.lxd-heart {
		order: 2;
		margin-left: auto;
		margin-right: 16px;
	}

	.lxd-menu {
		position: absolute;
		top: 64px;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		padding: 10px 16px 18px;
		background: #0b0c0d;
		border-bottom: 1px solid #242424;
	}

	.lxd-menu.lxd-vidkryte {
		display: flex;
	}

	.lxd-menu > li,
	.lxd-menu ul > li {
		display: block;
	}

	.lxd-menu a {
		padding: 13px 0;
	}

	.lxd-menu .current-menu-item > a::after {
		display: none;
	}

	.lxd-menu .sub-menu {
		position: static;
		display: block;
		padding: 0 0 0 14px;
		background: none;
		border: 0;
	}

	.lxd-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
	}

	.lxd-footer-nyz {
		flex-direction: column;
		gap: 12px;
		text-align: center;
	}
}

@media (max-width: 560px) {
	.lxd-footer-grid {
		grid-template-columns: 1fr;
	}
}

/* ======================================================================
   Головна
   ====================================================================== */

.lxd-sekciya {
	padding: 64px 0;
}

.lxd-sekciya-bez-verhu {
	padding-top: 0;
}

/* ---- hero -------------------------------------------------------------- */

.lxd-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 560px;
	overflow: hidden;
	/* точно той самий тон, що й полотно знімка, — інакше на межі, де
	   закінчується фото, видно вертикальну сходинку */
	background: var(--lxd-ink);
}

.lxd-hero-foto {
	position: absolute;
	inset: 0;
	/* Знімок із теки макета йде фоном на всю ширину — маска тут не
	   потрібна, читабельність тексту дає затемнення нижче. */
	background: url("/wp-content/uploads/lxd-hero.webp") center center / cover no-repeat;
}

/* Затемнення зліва направо: текст лежить на темному, авто лишається
   видимим праворуч — так само, як у макеті. */
.lxd-hero-foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #08090af2 0%, #08090ad9 38%, #08090a40 72%, #08090a1a 100%);
}

.lxd-hero-vmist {
	position: relative;
	z-index: 2;
	padding: 70px 0;
}

.lxd-hero-zag {
	margin: 0 0 18px;
	font-size: clamp(38px, 4.4vw, 62px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -1px;
}

.lxd-hero-zag span,
.lxd-hero-zag em {
	display: block;
	font-style: normal;
}

.lxd-hero-zag em {
	color: var(--lxd-red);
}

.lxd-hero-lead {
	margin: 0 0 30px;
	color: #c8c8c8;
	font-size: 17px;
	line-height: 1.65;
}

.lxd-hero-dii {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* ---- заголовок секції з червоною рискою -------------------------------- */

.lxd-sekciya-shapka {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 30px;
}

.lxd-zag-z-ryskoyu {
	position: relative;
	margin: 0;
	padding-bottom: 12px;
	font-size: 27px;
	font-weight: 700;
}

.lxd-zag-z-ryskoyu::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 54px;
	height: 3px;
	background: var(--lxd-red);
}

.lxd-posylannya-vsi {
	color: #cfcfcf;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}

.lxd-posylannya-vsi i {
	margin-left: 8px;
}

.lxd-posylannya-vsi:hover {
	color: var(--lxd-red);
}

/* ---- картки авто ------------------------------------------------------- */

.lxd-avto-sitka {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.lxd-avto {
	overflow: hidden;
	background: var(--lxd-panel);
	border: 1px solid var(--lxd-line);
	border-radius: 6px;
	transition: border-color 0.18s, transform 0.18s;
}

.lxd-avto:hover {
	border-color: #5a2320;
	transform: translateY(-3px);
}

.lxd-avto-foto {
	position: relative;
	display: block;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	background: #0d0f10;
}

.lxd-avto-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lxd-avto-serce {
	position: absolute;
	right: 12px;
	top: 12px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #0b0c0dcc;
	color: #fff;
	font-size: 14px;
}

.lxd-avto-telo {
	padding: 18px 18px 20px;
}

.lxd-avto-telo h3 {
	margin: 0 0 9px;
	font-size: 17px;
	font-weight: 600;
}

.lxd-avto-telo h3 a {
	color: #fff;
	text-decoration: none;
}

.lxd-avto-atr {
	margin: 0 0 12px;
	color: var(--lxd-muted);
	font-size: 13px;
}

.lxd-avto-cina {
	margin: 0;
	color: var(--lxd-red);
	font-size: 19px;
	font-weight: 700;
}

/* ---- смуга переваг ----------------------------------------------------- */

.lxd-perevagy {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: var(--lxd-panel);
	border: 1px solid var(--lxd-line);
	border-radius: 8px;
}

.lxd-perevaga {
	padding: 34px 26px;
	text-align: center;
}

.lxd-perevaga + .lxd-perevaga {
	border-left: 1px solid var(--lxd-line);
}

.lxd-perevaga i {
	display: block;
	margin-bottom: 16px;
	color: var(--lxd-red);
	font-size: 30px;
}

.lxd-perevaga h3 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
}

.lxd-perevaga p {
	margin: 0;
	color: var(--lxd-muted);
	font-size: 13px;
	line-height: 1.6;
}

/* ---- про нас ----------------------------------------------------------- */

.lxd-pro-nas {
	position: relative;
	overflow: hidden;
	background: #0b0c0d;
}

.lxd-pro-nas-foto {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 52%;
	background: url("/wp-content/uploads/lxd-pro-nas.webp") center / cover no-repeat;
}

.lxd-pro-nas-foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #08090a66 0%, #08090a26 55%, #0b0c0d 100%);
}

.lxd-pro-nas-vmist {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	padding: 78px 0;
}

.lxd-pro-nas-tekst {
	width: min(560px, 100%);
}

.lxd-pro-nas-tekst h2 {
	margin: 10px 0 18px;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.25;
}

.lxd-pro-nas-tekst p {
	margin: 0 0 28px;
	color: #c2c2c2;
	font-size: 15px;
	line-height: 1.8;
}

.lxd-cyfry {
	display: flex;
	gap: 46px;
}

.lxd-cyfry strong {
	display: block;
	color: var(--lxd-red);
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
}

.lxd-cyfry span {
	color: var(--lxd-muted);
	font-size: 13px;
}

/* ---- смуга «не знайшли авто» ------------------------------------------- */

.lxd-cta-sekciya {
	padding: 0 0 64px;
}

.lxd-cta {
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 26px 34px;
	background: var(--lxd-panel);
	border: 1px solid var(--lxd-line);
	border-radius: 8px;
}

.lxd-cta-znachok {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border-radius: 6px;
	background: #2a100e;
	color: var(--lxd-red);
	font-size: 26px;
}

.lxd-cta-tekst {
	flex: 1 1 auto;
}

.lxd-cta-tekst h2 {
	margin: 0 0 6px;
	font-size: 23px;
	font-weight: 700;
}

.lxd-cta-tekst p {
	margin: 0;
	color: var(--lxd-muted);
	font-size: 14px;
}

/* ---- адаптив головної -------------------------------------------------- */

@media (max-width: 1100px) {
	.lxd-avto-sitka {
		grid-template-columns: repeat(2, 1fr);
	}

	.lxd-perevagy {
		grid-template-columns: repeat(2, 1fr);
	}

	.lxd-perevaga:nth-child(3) {
		border-left: 0;
	}

	.lxd-perevaga:nth-child(n + 3) {
		border-top: 1px solid var(--lxd-line);
	}
}

@media (max-width: 900px) {
	.lxd-hero {
		min-height: 460px;
	}

	.lxd-pro-nas-foto {
		width: 100%;
	}

	.lxd-pro-nas-foto::after {
		background: linear-gradient(180deg, #08090a99 0%, #08090ae6 60%, #0b0c0d 100%);
	}

	.lxd-pro-nas-vmist {
		justify-content: flex-start;
		padding: 60px 0;
	}

	.lxd-cta {
		flex-wrap: wrap;
	}

	.lxd-cta .lxd-btn {
		width: 100%;
	}
}

@media (max-width: 560px) {
	.lxd-avto-sitka,
	.lxd-perevagy {
		grid-template-columns: 1fr;
	}

	.lxd-perevaga + .lxd-perevaga {
		border-left: 0;
		border-top: 1px solid var(--lxd-line);
	}

	.lxd-cyfry {
		gap: 26px;
	}

	.lxd-hero-dii .lxd-btn {
		flex: 1 1 100%;
	}
}

/* ---- перебиваємо типографіку теми -------------------------------------
   Тема фарбує заголовки в темний і ставить `capitalize` — українською
   виходить «Популярні Автомобілі», а на темному тлі текст просто зникає.
   Наші секції мають власні кольори, тому задаємо їх явно. */

.lxd-hero h1,
.lxd-hero-zag,
.lxd-hero-zag span,
.lxd-sekciya h2,
.lxd-zag-z-ryskoyu,
.lxd-perevaga h3,
.lxd-pro-nas-tekst h2,
.lxd-cta-tekst h2,
.lxd-avto-telo h3,
.lxd-avto-telo h3 a,
.lxd-footer h4,
.lxd-modal-box h2 {
	color: #fff;
	text-transform: none;
	letter-spacing: -0.3px;
}

.lxd-hero-zag em,
.lxd-avto-cina,
.lxd-cyfry strong,
.lxd-kicker {
	text-transform: none;
}

.lxd-hero-zag em {
	color: var(--lxd-red);
}

.lxd-kicker {
	text-transform: uppercase;
}

/* Тема дає своїм заголовкам серіфний шрифт — у макеті всюди Inter */
.lxd-header,
.lxd-footer,
.lxd-hero,
.lxd-sekciya,
.lxd-pro-nas,
.lxd-cta-sekciya,
.lxd-modal {
	font-family: Inter, Arial, sans-serif;
}

.lxd-hero h1,
.lxd-sekciya h2,
.lxd-sekciya h3,
.lxd-pro-nas h2,
.lxd-cta h2,
.lxd-footer h4 {
	font-family: Inter, Arial, sans-serif !important;
}

/* ======================================================================
   Сторінки
   ====================================================================== */

/* ---- смуга-заголовок --------------------------------------------------- */

.lxd-page-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 320px;
	overflow: hidden;
	background: var(--lxd-ink);
}

.lxd-page-hero-foto {
	position: absolute;
	inset: 0;
	background: url("/wp-content/uploads/lxd-hero.webp") center right / cover no-repeat;
	opacity: 0.55;
	-webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 45%, #000 100%);
	mask-image: linear-gradient(90deg, transparent 8%, #000 45%, #000 100%);
}

.lxd-page-hero-vmist {
	position: relative;
	z-index: 2;
	padding: 54px 0;
}

.lxd-page-hero h1 {
	margin: 10px 0 14px;
	color: #fff;
	font-family: Inter, Arial, sans-serif !important;
	font-size: clamp(30px, 3.4vw, 46px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -1px;
	text-transform: none;
}

.lxd-page-hero p {
	max-width: 640px;
	margin: 0;
	color: #b6b6b6;
	font-size: 15px;
	line-height: 1.7;
}

/* ---- вміст сторінки ---------------------------------------------------- */

.lxd-vmist {
	color: #cfcfcf;
	font-size: 15px;
	line-height: 1.75;
}

.lxd-vmist h2,
.lxd-vmist h3 {
	color: #fff;
	font-family: Inter, Arial, sans-serif !important;
	text-transform: none;
}

.lxd-vmist h2 {
	margin: 0 0 16px;
	font-size: 27px;
	font-weight: 700;
}

.lxd-vmist h3 {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 600;
}

.lxd-vmist p {
	margin: 0 0 16px;
}

.lxd-vmist a {
	color: var(--lxd-red);
}

/* Вступний блок наших сторінок */
.lxd-vmist .lx-intro {
	margin-bottom: 38px;
}

.lxd-vmist .lx-kicker {
	display: block;
	margin-bottom: 10px;
	color: var(--lxd-red);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
}

.lxd-vmist .lx-intro-title {
	margin: 0 0 14px;
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 700;
	line-height: 1.25;
}

.lxd-vmist .lx-intro-title span,
.lxd-vmist .lx-intro-title em {
	display: block;
	font-style: normal;
}

.lxd-vmist .lx-intro-title em {
	color: var(--lxd-red);
}

.lxd-vmist .lx-intro-lead {
	max-width: 720px;
	color: #b6b6b6;
	font-size: 16px;
}

/* Плитки списків — як картки послуг у макеті */
.lxd-vmist .lx-extra-section {
	margin: 0 0 38px;
}

/*
 * Сітка підлаштовується під кількість плиток.
 *
 * Жорсткі три колонки лишали четвертий пункт самотою в новому рядку —
 * найчастіший випадок, бо кроків у нас звично чотири. `auto-fit` розкладає
 * їх рівно: три пункти в три колонки, чотири — у чотири, і жодного
 * обірваного ряду.
 */
.lxd-vmist ol,
.lxd-vmist ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: lxd-krok;
}

.lxd-vmist ol > li,
.lxd-vmist ul > li {
	position: relative;
	padding: 22px 22px 22px 58px;
	background: var(--lxd-panel);
	border: 1px solid var(--lxd-line);
	border-radius: 6px;
	color: #cfcfcf;
	font-size: 14px;
	line-height: 1.65;
}

/* нумеровані — червоний номер, як «01 02 03» у кроках макета */
.lxd-vmist ol > li::before {
	counter-increment: lxd-krok;
	content: counter(lxd-krok, decimal-leading-zero);
	position: absolute;
	left: 20px;
	top: 20px;
	color: var(--lxd-red);
	font-size: 17px;
	font-weight: 800;
}

/* марковані — червона галочка */
.lxd-vmist ul > li::before {
	content: "\f00c";
	position: absolute;
	left: 21px;
	top: 22px;
	color: var(--lxd-red);
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 13px;
}

/* ---- форми ------------------------------------------------------------- */

.lxd-vmist .lx-form,
.lxd-vmist form {
	max-width: 760px;
	margin: 0 0 34px;
	padding: 30px;
	background: var(--lxd-panel);
	border: 1px solid var(--lxd-line);
	border-radius: 6px;
}

.lxd-vmist label {
	display: block;
	margin-bottom: 7px;
	color: #bdbdbd;
	font-size: 12px;
}

.lxd-vmist input[type="text"],
.lxd-vmist input[type="tel"],
.lxd-vmist input[type="email"],
.lxd-vmist input[type="number"],
.lxd-vmist textarea,
.lxd-vmist select {
	width: 100%;
	padding: 13px;
	background: var(--lxd-field);
	border: 1px solid #353637;
	border-radius: var(--lxd-radius);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
}

.lxd-vmist textarea {
	min-height: 110px;
	resize: vertical;
}

.lxd-vmist input:focus,
.lxd-vmist textarea:focus,
.lxd-vmist select:focus {
	border-color: var(--lxd-red);
	outline: none;
}

.lxd-vmist .lx-submit,
.lxd-vmist button[type="submit"],
.lxd-vmist input[type="submit"] {
	width: auto;
	padding: 14px 28px;
	border: 0;
	border-radius: var(--lxd-radius);
	background: var(--lxd-red);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.lxd-vmist .lx-submit:hover,
.lxd-vmist button[type="submit"]:hover {
	background: var(--lxd-red-bright);
}

.lxd-vmist .lx-result {
	margin-top: 14px;
	padding: 13px;
	border-radius: var(--lxd-radius);
	font-size: 13px;
}

.lxd-vmist .lx-ok {
	background: #142012;
	border: 1px solid #33532d;
	color: #bce5b6;
}

.lxd-vmist .lx-err {
	background: #241012;
	border: 1px solid #5a2226;
	color: #f0b6ba;
}

/* ---- картки й заклики усередині сторінок -------------------------------- */

.lxd-vmist .lx-card,
.lxd-vmist .lx-cta {
	margin: 0 0 16px;
	padding: 24px;
	background: var(--lxd-panel);
	border: 1px solid var(--lxd-line);
	border-radius: 6px;
}

.lxd-vmist .lx-cta-btn {
	display: inline-block;
	margin-top: 6px;
	padding: 13px 26px;
	border-radius: var(--lxd-radius);
	background: var(--lxd-red);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.lxd-vmist .lx-cta-btn:hover {
	background: var(--lxd-red-bright);
	color: #fff;
}

@media (max-width: 900px) {
	.lxd-vmist ol,
	.lxd-vmist ul {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.lxd-vmist ol,
	.lxd-vmist ul {
		grid-template-columns: 1fr;
	}
}

/* ---- дрібниці вмісту, які тягне тема ------------------------------------
   Тема фарбує заголовки всередині вмісту темним і ставить `capitalize`:
   на темному тлі «Швидкий Викуп» і зникає, і читається неправильно. */

.lxd-vmist h1,
.lxd-vmist h2,
.lxd-vmist h3,
.lxd-vmist h4,
.lxd-vmist h5,
.lxd-vmist strong,
.lxd-vmist b,
.lxd-vmist .lx-card h3,
.lxd-vmist .lx-cta h3 {
	color: #fff !important;
	text-transform: none !important;
}

.lxd-vmist .lx-intro-title em,
.lxd-vmist .lx-kicker {
	/* саме текст, тому світліший відтінок: фірмовий #e5231c дає тут 4.35
	   при нормі 4.5 */
	color: var(--lxd-red-text) !important;
}

.lxd-vmist .lx-kicker {
	text-transform: uppercase !important;
}

/* Картки варіантів — сіткою, як картки послуг у макеті */
.lxd-vmist .lx-karty,
.lxd-vmist .lx-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 34px;
}

.lxd-vmist .lx-card {
	margin: 0;
}

.lxd-vmist .lx-card > i,
.lxd-vmist .lx-cta > i {
	display: block;
	margin-bottom: 14px;
	color: var(--lxd-red);
	font-size: 22px;
}

/* Заклик у кінці сторінки — смугою, а не карткою в стовпчик */
.lxd-vmist .lx-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

.lxd-vmist .lx-cta h3 {
	flex: 1 1 320px;
	margin: 0;
}

.lxd-vmist .lx-cta p {
	flex: 1 1 100%;
	margin: 0;
}

@media (max-width: 900px) {
	.lxd-vmist .lx-karty,
	.lxd-vmist .lx-cards {
		grid-template-columns: 1fr;
	}
}

/* Тема дає заголовкам серіфний Playfair — у макеті всюди Inter.
   Селектор широкий навмисно: заголовки всередині вмісту приходять із
   різних місць (наші картки, шорткоди теми, редактор). */
.lxd-vmist :is(h1, h2, h3, h4, h5, h6),
.lxd-vmist .lx-card :is(h2, h3, h4),
.lxd-vmist .lx-intro-title,
.lxd-page-hero :is(h1, h2) {
	font-family: Inter, Arial, sans-serif !important;
	font-weight: 700;
}

/* Лід-абзац уже стоїть у смузі-заголовку — у тілі він дублювався б
   слово в слово одразу під ним. */
.lxd-vmist .lx-intro-lead {
	display: none;
}

/* Тема ставить спискам рідні маркери з !important — поряд із нашим
   номером «01» виходило «01 1.». Знімаємо їх і на списку, і на пункті:
   на самому лише <ol> правило не спрацьовує. */
.lxd-vmist ol,
.lxd-vmist ul,
.lxd-vmist ol > li,
.lxd-vmist ul > li {
	list-style: none !important;
	list-style-type: none !important;
}

.lxd-vmist ol > li::marker,
.lxd-vmist ul > li::marker {
	content: "";
	font-size: 0;
}

/* ======================================================================
   Каталог і картка авто
   ----------------------------------------------------------------------
   Ці екрани лишаємо на темі — саме вони дають фільтри, пагінацію й
   ajax-пошук. Тому не переписуємо розмітку, а приводимо до палітри
   макета: картки як на головній, бічна колонка темна.
   ====================================================================== */

.inner-intro,
.page-section-ptb,
.cars-listing,
.sidebar,
#content,
.site-content,
.content-area {
	background-color: var(--lxd-ink) !important;
	color: #cfcfcf;
}

/* смуга-заголовок каталогу — як у сторінок */
section.inner-intro {
	padding: 40px 0 !important;
	background: var(--lxd-ink) !important;
	border-bottom: 1px solid var(--lxd-line);
}

section.inner-intro h1,
section.inner-intro .breadcrumb,
section.inner-intro a {
	color: #fff !important;
	font-family: Inter, Arial, sans-serif !important;
	text-transform: none !important;
}

/* ---- картка авто в списку ---------------------------------------------- */

.car-item,
.product-item {
	overflow: hidden;
	background: var(--lxd-panel) !important;
	border: 1px solid var(--lxd-line) !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	transition: border-color 0.18s, transform 0.18s;
}

.car-item:hover {
	border-color: #5a2320 !important;
	transform: translateY(-3px);
}

.car-item .car-title,
.car-item .car-title a,
.car-item h2,
.car-item h3,
.car-item h4 {
	color: #fff !important;
	font-family: Inter, Arial, sans-serif !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	text-transform: none !important;
}

.car-item .car-title a:hover {
	color: var(--lxd-red) !important;
}

.car-item .price,
.car-item .car-price,
.car-item .price-block,
.car-item .regular-price {
	color: var(--lxd-red) !important;
	font-family: Inter, Arial, sans-serif !important;
	font-size: 19px !important;
	font-weight: 700 !important;
}

.car-item .car-attributes,
.car-item .vehicle-attributes-list,
.car-item .car-attribute-columns,
.car-item .car-attribute-columns * {
	color: var(--lxd-muted) !important;
	font-size: 13px !important;
}

.car-item i {
	color: var(--lxd-red) !important;
}

/* кнопка «Деталі» */
.car-item .btn,
.car-item .button,
.car-item .details-btn {
	background: transparent !important;
	border: 1px solid #4a4c4e !important;
	color: #ddd !important;
	border-radius: var(--lxd-radius) !important;
	font-size: 12px !important;
}

.car-item .btn:hover,
.car-item .button:hover {
	border-color: var(--lxd-red) !important;
	color: var(--lxd-red) !important;
}

/* ---- бічна колонка з фільтрами ------------------------------------------ */

.sidebar .widget,
.widget_vehicle_search,
.widget_financing_calculator,
.cars-filter,
.widget {
	background: var(--lxd-panel) !important;
	border: 1px solid var(--lxd-line) !important;
	border-radius: 6px !important;
	color: #cfcfcf !important;
}

.sidebar .widgettitle,
.sidebar .widget-title,
.widget .widgettitle,
.widget h4,
.widget h5 {
	color: #fff !important;
	font-family: Inter, Arial, sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	text-transform: none !important;
}

.widget label,
.widget .label {
	color: #b6b6b6 !important;
	font-size: 12px !important;
}

/* поля й Select2 у фільтрах */
.widget input[type="text"],
.widget input[type="number"],
.widget select,
.select2-container--default .select2-selection--single,
.select2-dropdown,
.select2-search__field {
	background: var(--lxd-field) !important;
	border: 1px solid #353637 !important;
	border-radius: var(--lxd-radius) !important;
	color: #fff !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #d6d6d6 !important;
}

.select2-container--default .select2-results__option {
	background: var(--lxd-panel-2) !important;
	color: #ddd !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
	background: var(--lxd-red) !important;
	color: #fff !important;
}

/* повзунок ціни */
.ui-slider,
.ui-slider-range,
.ui-slider-handle {
	background: var(--lxd-red) !important;
	border-color: var(--lxd-red) !important;
}

.ui-slider {
	background: #34363a !important;
}

/* кнопки фільтра */
.widget .btn,
.widget button,
.widget input[type="submit"] {
	background: var(--lxd-red) !important;
	border: 0 !important;
	border-radius: var(--lxd-radius) !important;
	color: #fff !important;
	font-family: Inter, Arial, sans-serif !important;
	font-size: 13px !important;
	text-transform: none !important;
}

.widget .btn:hover,
.widget button:hover {
	background: var(--lxd-red-bright) !important;
}

/* верхній ряд каталогу: кількість, сортування, вигляд */
.cars-listing-top,
.listing-top,
.short-by,
.grid-list-view {
	color: #cfcfcf !important;
}

.grid-list-view a,
.grid-list-view i {
	color: #8a8a8a !important;
}

.grid-list-view a.active i,
.grid-list-view a:hover i {
	color: var(--lxd-red) !important;
}

/* пагінація */
.pagination a,
.pagination span,
.page-numbers {
	background: var(--lxd-panel) !important;
	border: 1px solid var(--lxd-line) !important;
	border-radius: var(--lxd-radius) !important;
	color: #d6d6d6 !important;
}

.pagination .current,
.page-numbers.current,
.pagination a:hover {
	background: var(--lxd-red) !important;
	border-color: var(--lxd-red) !important;
	color: #fff !important;
}

/* ---- сторінка авто ------------------------------------------------------ */

.single-cars .car-detail,
.single-cars .details-block,
.single-cars .price-block,
.single-cars .tab-content,
.single-cars .nav-tabs {
	background: var(--lxd-panel) !important;
	border-color: var(--lxd-line) !important;
	color: #cfcfcf !important;
}

.single-cars h1,
.single-cars h2,
.single-cars h3,
.single-cars .details-title {
	color: #fff !important;
	font-family: Inter, Arial, sans-serif !important;
	text-transform: none !important;
}

.single-cars .price,
.single-cars .car-price {
	color: var(--lxd-red) !important;
}

/* ---- картка каталогу: кольори за заміряними класами ---------------------
   Тема віддає назву авто червоною, а ціну й значення характеристик —
   майже чорними (rgb(28,30,34)): на світлому тлі це читалось, на нашому
   темному зникає. Міняємо місцями: назва біла, ціна червона.
   Ціна лежить у <bdi class="new-price"> і <span class="currency">,
   значення — у <strong class="col-xs-6">; заміряно на живій картці. */

.car-item .car-title a,
.car-item h3 a,
.car-item h4 a,
.car-item .item-title a {
	color: #fff !important;
}

.car-item .car-title a:hover,
.car-item .item-title a:hover {
	color: var(--lxd-red) !important;
}

.car-item .new-price,
.car-item .currency,
.car-item .price bdi,
.car-item .price span,
.car-item .car-price .new-price {
	color: var(--lxd-red) !important;
	font-size: 19px !important;
	font-weight: 700 !important;
}

.car-item strong,
.car-item .car-attribute-columns strong,
.car-item strong.col-xs-6 {
	color: #dcdcdc !important;
	font-weight: 500 !important;
}

.car-item span.col-xs-6 {
	color: var(--lxd-muted) !important;
}

.car-item a {
	color: #d6d6d6;
}

/* Назва авто лежить у <a> без класу — точкового селектора для неї немає,
   тому фарбуємо всі посилання картки, а ціну й кнопку повертаємо
   окремими правилами нижче. */
.car-item a {
	color: #fff !important;
}

.car-item a:hover {
	color: var(--lxd-red) !important;
}

.car-item .new-price,
.car-item .currency,
.car-item .price bdi,
.car-item .price span {
	color: var(--lxd-red) !important;
}

/* «Деталі» — контурна кнопка, а не біла плашка */
.car-item .btn,
.car-item .button,
.car-item .details-btn,
.car-item a.btn {
	display: inline-block;
	padding: 9px 18px !important;
	background: transparent !important;
	border: 1px solid #4a4c4e !important;
	border-radius: var(--lxd-radius) !important;
	color: #d6d6d6 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
}

.car-item .btn:hover,
.car-item .button:hover {
	background: transparent !important;
	border-color: var(--lxd-red) !important;
	color: var(--lxd-red) !important;
}

.car-item .btn i {
	color: inherit !important;
}

/* Кнопка «Деталі» — теж <a> без класу, як і назва авто, тому вирізняємо
   її за значком усередині: у назви значка немає. Заодно знімаємо білу
   плашку, яку тема дає посиланням у картці. */
.car-item a {
	background: transparent !important;
}

.car-item .car-content a:has(i),
.car-item a:has(> i) {
	display: inline-block;
	padding: 9px 18px !important;
	border: 1px solid #4a4c4e !important;
	border-radius: var(--lxd-radius) !important;
	color: #d6d6d6 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
}

.car-item a:has(> i):hover {
	border-color: var(--lxd-red) !important;
	color: var(--lxd-red) !important;
}

.car-item a:has(> i) i {
	margin-right: 7px;
	color: inherit !important;
}

/* ======================================================================
   Форми заявок
   ----------------------------------------------------------------------
   Заміряно реальну будову: всередині `form.lx-form` лежать не поля, а
   п'ять блоків — пастка `.lx-hp`, заголовок `.lx-form-title`, сітка
   `.lx-form-grid`, підвал `.lx-form-foot` (кнопка + примітка) і
   `.lx-result`. Тому сітку двох колонок вішаємо на `.lx-form-grid`, а не
   на саму форму: інакше ці блоки розкидає по колонках і форма ламається.
   ====================================================================== */

.lxd-vmist .lx-form,
.lx-form {
	display: block;
	width: min(760px, 100%);
	margin: 0;
	padding: 32px;
	background: var(--lxd-panel);
	border: 1px solid var(--lxd-line);
	border-radius: 6px;
}

/* Заголовок форми дублює заголовок секції просто над нею */
.lx-form .lx-form-title {
	display: none;
}

/* Пастка для ботів. Ховав її brand.css, знятий на цьому стенді, — і поле
   стало видимим: клієнт бачить зайвий рядок «Не заповнюйте це поле», а
   бот перестає в неї потрапляти, тобто захист форм тихо вимикається.

   Селектор навмисно глобальний, без прив'язки до форми: та сама пастка
   стоїть і в заявках (`.lx-form`), і в реєстрації кабінету
   (`.lx-kab-form`). Перша версія цілилась лише в `.lx-form` — і в
   кабінеті поле лишалось видимим. */
.lx-hp,
.lx-form .lx-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.lx-form .lx-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 18px;
}

.lx-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
	color: #bdbdbd;
	font-size: 12px;
	font-weight: 500;
}

.lx-field-wide {
	grid-column: 1 / -1;
}

.lx-form input[type="text"],
.lx-form input[type="tel"],
.lx-form input[type="email"],
.lx-form input[type="number"],
.lx-form textarea,
.lx-form select {
	width: 100%;
	padding: 13px 14px;
	background: var(--lxd-field);
	border: 1px solid #353637;
	border-radius: var(--lxd-radius);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	transition: border-color 0.15s;
}

.lx-form input::placeholder,
.lx-form textarea::placeholder {
	color: #6f6f6f;
}

.lx-form input:focus,
.lx-form textarea:focus,
.lx-form select:focus {
	border-color: var(--lxd-red);
	outline: none;
}

.lx-form textarea {
	min-height: 110px;
	resize: vertical;
}

/* підвал форми: кнопка ліворуч, примітка поруч */
.lx-form .lx-form-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin-top: 22px;
}

/* `line-height: 1` тут не косметика: без нього висота кнопки складалась
   із успадкованого міжрядкового інтервалу й виходила 53px, тоді як
   звичайна `.lxd-btn` за тією самою формулою дає 42. Дві головні кнопки
   на сторінці різнились на 11px без жодної причини. Тепер висота
   рахується з відступів: 16 + 14 + 16 = 46px — кнопка форми свідомо
   більша за звичайну, але це рішення, а не випадковість. */
.lx-form .lx-submit {
	flex: 0 0 auto;
	min-width: 210px;
	padding: 16px 30px;
	border: 0;
	border-radius: var(--lxd-radius);
	background: var(--lxd-red);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background 0.18s;
}

.lx-form .lx-submit:hover {
	background: var(--lxd-red-bright);
}

.lx-form .lx-note {
	flex: 1 1 240px;
	margin: 0;
	color: #757575;
	font-size: 11px;
	line-height: 1.6;
}

.lx-form .lx-result {
	margin: 0;
	font-size: 13px;
}

.lx-form .lx-result:not(:empty) {
	margin-top: 16px;
	padding: 13px 15px;
	border-radius: var(--lxd-radius);
}

.lx-form .lx-ok {
	background: #142012;
	border: 1px solid #33532d;
	color: #bce5b6;
}

.lx-form .lx-err {
	background: #241012;
	border: 1px solid #5a2226;
	color: #f0b6ba;
}

/* Форма в модальному вікні — одна колонка, без власної рамки */
.lxd-modal .lx-form {
	width: 100%;
	padding: 0;
	background: transparent;
	border: 0;
}

.lxd-modal .lx-form .lx-form-grid {
	grid-template-columns: 1fr;
}

/* У вузькому вікні кнопка (210px) і примітка (від 240px) не вміщались
   в один ряд, і флекс-перенос роздував підвал форми до 316px — звідси
   порожнеча під кнопкою. Тут ряд не потрібен узагалі. */
.lxd-modal .lx-form .lx-form-foot {
	display: block;
	margin-top: 18px;
}

.lxd-modal .lx-form .lx-note {
	margin-top: 12px;
}

.lxd-modal .lx-form .lx-submit {
	width: 100%;
}

@media (max-width: 700px) {
	.lxd-vmist .lx-form,
	.lx-form {
		padding: 22px;
	}

	.lx-form .lx-form-grid {
		grid-template-columns: 1fr;
	}

	.lx-form .lx-submit {
		flex: 1 1 100%;
	}
}

/* Форма приходить усередині секції `.lx-cta`, яка має власну рамку на
   всю ширину — виходила рамка в рамці й порожнеча праворуч. Зовнішню
   прибираємо, форму лишаємо по центру, як у макеті. */
.lxd-vmist .lx-cta:has(.lx-form) {
	display: block;
	padding: 0;
	background: transparent;
	border: 0;
	text-align: center;
}

.lxd-vmist .lx-cta:has(.lx-form) > h3,
.lxd-vmist .lx-cta:has(.lx-form) > p {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.lxd-vmist .lx-cta:has(.lx-form) > h3 {
	margin-bottom: 8px;
	font-size: 24px;
}

.lxd-vmist .lx-cta:has(.lx-form) > p {
	margin-bottom: 24px;
	color: var(--lxd-muted);
}

/*
 * Форма на сторінці — на всю ширину вмісту.
 *
 * Раніше вона мала жорсткі 760px і центрувалася, тож не збігалася з
 * плитками ні лівим краєм, ні правим: висіла посередині, відступивши по
 * 205 пікселів з боків. На сторінці з плитками це кидалося в очі —
 * рівний ритмічний ряд і раптом вужчий блок посередині.
 *
 * Тепер рамка форми йде від краю до краю, як усе інше, а поля
 * розкладаються в три колонки — кожне лишається тієї самої зручної
 * ширини, що й було у двох колонках на 760 пікселях.
 */
.lxd-vmist .lx-form {
	width: 100%;
	max-width: none;
	margin: 0;
	text-align: left;
}

.lxd-vmist .lx-form .lx-form-grid {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1100px) {

	.lxd-vmist .lx-form .lx-form-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {

	.lxd-vmist .lx-form .lx-form-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * Власні нижні поля блоків прибираємо — ритм нижче задає їх сам.
 *
 * Інакше відступи додавалися один до одного: `.lx-extra-section` несла свої
 * 38px, зверху лягали 30px ритму, і виходило 68 замість 30. Через це
 * сторінки, зібрані різними блоками, дихали по-різному: одні з проміжками
 * 16/30/54, інші — 46/68.
 */
.lxd-vmist .lx-extra-section,
.lxd-vmist .lx-intro {
	margin-bottom: 0;
}

/*
 * Вертикальний ритм сторінки.
 *
 * Віджети конструктора йшли впритул — проміжок між блоками нуль. Вигляд
 * тримався лише на власних полях заголовків і списків, і там, де їх нема,
 * блоки злипалися: плитки «Що варто знати» закінчувалися, і одразу, без
 * повітря, починалася форма.
 *
 * Задаємо ритм через сусідів, а не через поле кожного блока: так відступ
 * ніколи не подвоюється й не лишається зайвим у кінці.
 */
.lxd-vmist .e-con-inner > .elementor-element + .elementor-element,
.lxd-vmist > .elementor-element + .elementor-element {
	margin-top: 30px;
}

/* Перед новим розділом повітря більше — саме воно ділить сторінку.
   На сторінках, де розділ загорнутий у власний контейнер, а не починається
   заголовком, виходить 46px замість 54 — різниця у вісім пікселів, якої
   око не бачить, тож окремого правила під неї не заводимо. */
.lxd-vmist .e-con-inner > .elementor-element + .elementor-widget-heading,
.lxd-vmist > .elementor-element + .elementor-widget-heading {
	margin-top: 54px;
}

/* А під самим заголовком — менше: підпис належить до нього. */
.lxd-vmist .e-con-inner > .elementor-widget-heading + .elementor-element,
.lxd-vmist > .elementor-widget-heading + .elementor-element {
	margin-top: 16px;
}

@media (max-width: 767px) {

	.lxd-vmist .e-con-inner > .elementor-element + .elementor-element,
	.lxd-vmist > .elementor-element + .elementor-element {
		margin-top: 22px;
	}

	.lxd-vmist .e-con-inner > .elementor-element + .elementor-widget-heading,
	.lxd-vmist > .elementor-element + .elementor-widget-heading {
		margin-top: 38px;
	}
}

/*
 * Вміст сторінки під банером — по тій самій вертикалі, що й заголовок.
 *
 * Заміряно: заголовок у банері починається з 60 пікселів, бо банер бере наш
 * `.lxd-container`, а вміст під ним — зі 108, бо контейнер конструктора має
 * власну ширину 1170 і центрується. Через це кожна сторінка мала дві різні
 * ліві межі, і текст під заголовком помітно «відступав» від нього.
 */
.lxd-vmist.e-con {
	padding-left: 0;
	padding-right: 0;
}

.lxd-vmist.e-con > .e-con-inner {
	width: min(var(--lxd-shyryna), calc(100% - 120px));
	max-width: none;
	margin-inline: auto;
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 1200px) {

	.lxd-vmist.e-con > .e-con-inner {
		width: calc(100% - 64px);
	}
}

@media (max-width: 900px) {

	.lxd-vmist.e-con > .e-con-inner {
		width: calc(100% - 32px);
	}
}

/*
 * Позначка стану на картці авто.
 *
 * Тема фарбує будь-яку позначку в яскраво-зелений: `.car-item .label
 * { background: #62e006 }`. Колір не залежить від назви стану — тобто
 * зеленим стане і «Сертифіковане», і будь-який стан, який заведуть згодом.
 * Тому перебиваємо не окремий стан, а саме правило.
 *
 * Робимо позначку темною напівпрозорою: вона читається на будь-якому фото,
 * не свариться з червоними кнопками поруч і не тягне на себе увагу — стан
 * авто це підпис, а не заклик до дії.
 */
.car-item .label,
.car-item .label.used,
.car-item .label[class*="car-condition"],
.label-featured-wrap .label-featured {
	background: rgba(12, 13, 15, 0.82);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 4px;
	font-weight: 600;
	letter-spacing: 0.02em;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

/*
 * Виняток — «Продано». Це єдина позначка, яку людина має помітити одразу:
 * інакше вона дзвонить про машину, якої вже немає.
 */
.car-item .label.sold,
.car-item .car-status,
.layout-4-vehicle-status .car-status {
	background: var(--lxd-red);
	border-color: transparent;
	color: #fff;
}

/*
 * Сторінка авто на телефоні їздила вбік.
 *
 * Заміряно: вікно 390, а прокрутка 395. Винуватець — bootstrap-сітка теми
 * у блоці схожих авто: `.row` несе від'ємні поля по 15px, а батько їх нічим
 * не компенсує, тож рядок виходить на 400 пікселів при екрані 390.
 * Каруселі галереї, які теж «вилазять», ні до чого — їх обрізає власна
 * обгортка.
 */
.feature-car > .row {
	margin-left: 0;
	margin-right: 0;
}

.feature-car > .row > [class*="col-"] {
	padding-left: 0;
	padding-right: 0;
}

/*
 * Галерея авто не має стрибати при завантаженні.
 *
 * Заміряно на картці: CLS 0.823 при нормі 0.1 — сторінка помітно смикалась.
 * Причина в тому, що до ініціалізації каруселі всі знімки стоять один під
 * одним, і блок галереї має висоту 749 пікселів; щойно скрипт згортає їх у
 * слайдер, висота падає до 522, а разом із нею підстрибує все, що нижче —
 * кнопки, вкладки, опис.
 *
 * Лікуємо резервом: доки слайдер не ожив, показуємо лише перший знімок і
 * тримаємо пропорцію. Висота від початку така сама, як буде потім.
 */
.slider-slick .slider-for:not(.slick-initialized),
.slider-slick .slider-for-full:not(.slick-initialized) {
	/* Заміряно на живих картках: слайдер стабільно виходить 512 пікселів
	   при ширині 765 — це рівно три до двох. */
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.slider-slick .slider-for:not(.slick-initialized) > figure:not(:first-child),
.slider-slick .slider-for-full:not(.slick-initialized) > figure:not(:first-child) {
	display: none;
}

.slider-slick .slider-for:not(.slick-initialized) > figure,
.slider-slick .slider-for-full:not(.slick-initialized) > figure {
	height: 100%;
	margin: 0;
}

.slider-slick .slider-for:not(.slick-initialized) > figure img,
.slider-slick .slider-for-full:not(.slick-initialized) > figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Те саме для стрічки мініатюр — вона теж спершу стоїть стовпчиком. */
.slider-slick .slider-nav:not(.slick-initialized) {
	display: flex;
	gap: 8px;
	overflow: hidden;
	/* Стрічка мініатюр після ініціалізації — 106 пікселів. */
	height: 106px;
}

.slider-slick .slider-nav:not(.slick-initialized) > figure {
	flex: 0 0 auto;
	width: 130px;
	margin: 0;
}

/*
 * Ритм усередині картки авто.
 *
 * Та сама історія, що й на сторінках: віджети конструктора йдуть впритул,
 * тож кнопки «Хочу це авто» починалися рівно там, де закінчувався останній
 * ряд мініатюр — проміжок нуль. Задаємо через сусідів; приховані на цій
 * ширині віджети (назва й ціна, що показуються лише на телефоні) мають
 * `display: none`, тому зайвого повітря не додають.
 */
.lxd-avto-livo > .elementor-element + .elementor-element {
	margin-top: 26px;
}

.lxd-avto-pravo > .elementor-element + .elementor-element {
	margin-top: 18px;
}

/* Вкладки — окремий блок, від кнопок їх варто відсунути помітніше. */
.lxd-avto-livo > .elementor-widget-cdhl_vehicle-tabs {
	margin-top: 38px;
}

@media (max-width: 767px) {

	.lxd-avto-livo > .elementor-element + .elementor-element {
		margin-top: 20px;
	}

	.lxd-avto-livo > .elementor-widget-cdhl_vehicle-tabs {
		margin-top: 30px;
	}
}

/*
 * Контакти плитками.
 *
 * Сторінка «Контакти» лишалася стовпчиком тексту вздовж лівого краю: три
 * блоки — адреса, телефон, месенджери — і дві третини екрана порожні.
 * Списків там немає, тож загальне правило плиток за них не бралося.
 */
.lxd-kontakty {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin: 0 0 34px;
}

.lxd-kontakt {
	padding: 26px 24px;
	background: var(--lxd-panel);
	border: 1px solid var(--lxd-line);
	border-radius: 6px;
}

.lxd-kontakt i {
	display: block;
	margin-bottom: 14px;
	color: var(--lxd-red);
	font-size: 24px;
}

.lxd-vmist .lxd-kontakt h3 {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 700;
}

.lxd-vmist .lxd-kontakt p {
	margin: 0 0 4px;
	color: var(--lxd-muted);
	font-size: 14px;
	line-height: 1.6;
}

.lxd-vmist .lxd-kontakt p:last-child {
	margin-bottom: 0;
}

.lxd-vmist .lxd-kontakt strong {
	display: block;
	margin-bottom: 2px;
	color: #fff;
	font-size: 18px;
}

/*
 * Виняток — форма всередині блока заклику: той блок вужчий і сам по собі
 * центрований, тож форма в ньому лишається як була.
 */
.lxd-vmist .lx-cta .lx-form {
	width: min(760px, 100%);
	margin: 0 auto;
}

.lxd-vmist .lx-cta .lx-form .lx-form-grid {
	grid-template-columns: repeat(2, 1fr);
}

/* Вікно дзвінка з формою всередині вище за екран — верх із хрестиком
   виїжджав за межі. Обмежуємо висоту й дозволяємо прокрутку всередині. */
.lxd-modal-box {
	max-height: calc(100vh - 40px);
	overflow-y: auto;
}

.lxd-modal-box .lx-form .lx-form-foot {
	margin-top: 18px;
}

/* поле «Коментар» у вікні зайве — дзвінок замовляють іменем і номером */
.lxd-modal-box .lx-form .lx-field-wide:has(textarea) {
	display: none;
}

/* Картка вікна розтягувалась на всю висоту флекс-контейнера — притискаємо
   її до вмісту. */
.lxd-modal-box {
	align-self: center;
	height: fit-content;
}

/* порожній блок відповіді не має займати місце до першої відправки */
.lx-form .lx-result:empty {
	display: none;
}

/* ======================================================================
   Перенесене зі stage: оформлення під функціональні блоки
   ----------------------------------------------------------------------
   Сама логіка живе в funkcional.php і додає розмітку з класами `lx-*` —
   ті самі, що на першому стенді. Тут даємо їм вигляд цього варіанта,
   щоб код лишався спільним, а оформлення різним.
   ====================================================================== */

/* ---- каталог: нічого не знайшлося --------------------------------------- */

.lx-nema {
	margin: 26px 0;
	padding: 34px 30px;
	background: var(--lxd-panel);
	border: 1px solid var(--lxd-line);
	border-radius: 8px;
	text-align: center;
}

.lx-nema > i {
	display: block;
	margin-bottom: 14px;
	color: var(--lxd-red);
	font-size: 28px;
}

.lx-nema h3 {
	margin: 0 0 10px;
	color: #fff !important;
	font-family: Inter, Arial, sans-serif !important;
	font-size: 21px;
	font-weight: 700;
	text-transform: none !important;
}

.lx-nema p {
	max-width: 560px;
	margin: 0 auto 20px;
	color: var(--lxd-muted);
	font-size: 14px;
	line-height: 1.7;
}

.lx-nema-dii {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.lx-nema-btn {
	display: inline-block;
	padding: 13px 26px;
	border: 1px solid var(--lxd-red);
	border-radius: var(--lxd-radius);
	background: var(--lxd-red);
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.lx-nema-btn:hover {
	background: var(--lxd-red-bright);
	border-color: var(--lxd-red-bright);
}

.lx-nema-btn-ghost {
	background: transparent;
	border-color: #4a4c4e;
	color: #ddd !important;
}

.lx-nema-btn-ghost:hover {
	background: transparent;
	border-color: var(--lxd-red);
	color: var(--lxd-red) !important;
}

.lx-nema-tg {
	margin: 18px 0 0 !important;
	font-size: 13px;
}

.lx-nema-tg a {
	color: var(--lxd-red);
}

/* ---- смуга акції в банері каталогу -------------------------------------- */

.lx-akciya {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	margin: 0;
	padding: 18px 24px;
	background: color-mix(in srgb, var(--lxd-red) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--lxd-red) 45%, transparent);
	border-radius: 6px;
}

.lx-akciya > i {
	flex: 0 0 auto;
	color: var(--lxd-red);
	font-size: 22px;
}

.lx-akciya-tekst {
	flex: 1 1 auto;
	color: #e8e8e8;
	font-size: 15px;
}

.lx-akciya-btn {
	flex: 0 0 auto;
	padding: 12px 24px;
	border-radius: var(--lxd-radius);
	background: var(--lxd-red);
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.lx-akciya-btn:hover {
	background: var(--lxd-red-bright);
}

/* ---- головна дія в картці авто ------------------------------------------ */

.lx-hochu {
	color: var(--lxd-red) !important;
	font-weight: 600;
}

.lx-hochu i {
	margin-right: 8px;
}

/* ---- сторінка «не знайдено» --------------------------------------------- */

.lx-404 {
	padding: 84px 0 96px;
	background: var(--lxd-ink);
	text-align: center;
}

.lx-404-kod {
	margin: 0 0 10px;
	color: var(--lxd-red);
	font-family: Inter, Arial, sans-serif !important;
	font-size: 74px;
	font-weight: 800;
	line-height: 1;
}

.lx-404-zag {
	margin: 0 0 14px;
	color: #fff !important;
	font-family: Inter, Arial, sans-serif !important;
	font-size: 30px;
	font-weight: 700;
	text-transform: none !important;
}

.lx-404-lead {
	max-width: 540px;
	margin: 0 auto 30px;
	color: var(--lxd-muted);
	font-size: 15px;
	line-height: 1.7;
}

.lx-404-dii {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-bottom: 32px;
}

.lx-404-btn {
	display: inline-block;
	padding: 13px 26px;
	border: 1px solid var(--lxd-red);
	border-radius: var(--lxd-radius);
	background: var(--lxd-red);
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.lx-404-btn:hover {
	background: var(--lxd-red-bright);
}

.lx-404-btn-ghost {
	background: transparent;
	border-color: #4a4c4e;
	color: #ddd !important;
}

.lx-404-btn-ghost:hover {
	border-color: var(--lxd-red);
	color: var(--lxd-red) !important;
}

.lx-404-spysok {
	display: inline-flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none !important;
	text-align: left;
}

.lx-404-spysok li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	color: var(--lxd-muted);
	font-size: 14px;
}

.lx-404-spysok li::before {
	content: none !important;
}

.lx-404-spysok i {
	flex: 0 0 18px;
	color: var(--lxd-red);
	text-align: center;
}

.lx-404-spysok a {
	color: #fff;
}

.lx-404-poshuk {
	display: flex;
	gap: 8px;
	max-width: 420px;
	margin: 0 auto;
}

.lx-404-poshuk input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	padding: 0 14px;
	background: var(--lxd-field);
	border: 1px solid #353637;
	border-radius: var(--lxd-radius);
	color: #fff;
	font-size: 15px;
}

.lx-404-poshuk button {
	flex: 0 0 auto;
	height: 46px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--lxd-radius);
	background: var(--lxd-red);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.lx-404-poshuk button:hover {
	background: var(--lxd-red-bright);
}

@media (max-width: 767px) {
	.lx-akciya {
		flex-wrap: wrap;
	}

	.lx-akciya-btn {
		flex: 1 1 100%;
		text-align: center;
	}

	.lx-404-dii .lx-404-btn,
	.lx-nema-dii .lx-nema-btn {
		flex: 1 1 100%;
		text-align: center;
	}
}

/* ======================================================================
   Кабінет клієнта
   ----------------------------------------------------------------------
   Свій модуль (`kabinet.php`): обране, заявки, профіль, вхід і
   відновлення пароля. Його розмітку стилізував brand.css, знятий на
   цьому стенді, — тож кабінет лишався напівголим: вкладки злиплися в
   рядок тексту, поле пароля було біле й вузьке.

   Заміряні класи: `.lx-kab`, `.lx-kab-auth`, `.lx-kab-h1`,
   `.lx-kab-intro`, `.lx-kab-tabs` (посилання, активне має `.is-on`),
   `.lx-kab-form`, `.lx-kab-alt`.
   ====================================================================== */

/*
 * Кабінет займає всю ширину вмісту.
 *
 * Було `max-width: 1180px` із центруванням — на широкому екрані кабінет
 * відступав від лівого краю на 43 пікселі, тоді як заголовок «Кабінет» у
 * банері над ним починався з 60. Дві різні ліві межі на одній сторінці.
 * Ширину тримає `.lxd-container`, тут вона зайва.
 */
.lx-kab {
	margin: 0;
}

/* Заголовок дублює той, що вже стоїть у смузі-заголовку сторінки */
.lx-kab-h1 {
	display: none;
}

.lx-kab-intro {
	margin: 0 0 26px;
	color: var(--lxd-muted);
	font-size: 15px;
	line-height: 1.7;
}

/* ---- вкладки «Вхід / Реєстрація» ---------------------------------------- */

.lx-kab-tabs {
	display: flex;
	gap: 10px;
	margin: 0 0 22px;
}

.lx-kab-tabs a {
	padding: 11px 22px;
	border: 1px solid var(--lxd-line);
	border-radius: var(--lxd-radius);
	background: var(--lxd-panel);
	color: #cfcfcf !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.18s, color 0.18s, background 0.18s;
}

.lx-kab-tabs a:hover {
	border-color: var(--lxd-red);
	color: #fff !important;
}

.lx-kab-tabs a.is-on {
	background: var(--lxd-red);
	border-color: var(--lxd-red);
	color: #fff !important;
}

/* ---- форма кабінету ------------------------------------------------------ */

.lx-kab-form {
	width: min(560px, 100%);
	margin: 0 0 18px;
	padding: 30px;
	background: var(--lxd-panel);
	border: 1px solid var(--lxd-line);
	border-radius: 6px;
}

.lx-kab-form label,
.lx-kab-form .lx-field {
	display: block;
	margin-bottom: 16px;
	color: #bdbdbd;
	font-size: 12px;
	font-weight: 500;
}

.lx-kab-form input[type="text"],
.lx-kab-form input[type="email"],
.lx-kab-form input[type="tel"],
.lx-kab-form input[type="password"],
.lx-kab-form input[type="number"],
.lx-kab-form textarea,
.lx-kab-form select {
	display: block;
	width: 100%;
	margin-top: 7px;
	padding: 13px 14px;
	background: var(--lxd-field);
	border: 1px solid #353637;
	border-radius: var(--lxd-radius);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
}

.lx-kab-form input:focus,
.lx-kab-form textarea:focus,
.lx-kab-form select:focus {
	border-color: var(--lxd-red);
	outline: none;
}

/* чекбокс «не виходити» — у рядок зі своїм підписом */
.lx-kab-form input[type="checkbox"] {
	width: auto;
	margin: 0 8px 0 0;
	accent-color: var(--lxd-red);
	vertical-align: middle;
}

.lx-kab-form label:has(input[type="checkbox"]) {
	display: flex;
	align-items: center;
	gap: 0;
	color: #b6b6b6;
	font-size: 13px;
}

/* Та сама причина, що й у кнопки заявки: без `line-height: 1` висота
   лічиться з успадкованого інтервалу й «пливе» від сторінки до
   сторінки. Тут 16 + 14 + 16 = 46px — стільки ж, скільки в кнопки
   форми, бо це така сама головна дія. */
.lx-kab-form button,
.lx-kab-form input[type="submit"],
.lx-kab-form .lx-submit {
	min-width: 180px;
	padding: 16px 28px;
	border: 0;
	border-radius: var(--lxd-radius);
	background: var(--lxd-red);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background 0.18s;
}

.lx-kab-form button:hover {
	background: var(--lxd-red-bright);
}

.lx-kab-alt {
	margin: 0;
	font-size: 13px;
}

.lx-kab-alt a {
	color: var(--lxd-red);
}

/* ---- кабінет після входу ------------------------------------------------- */

.lx-kab-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 26px;
}

.lx-kab-nav a {
	padding: 11px 20px;
	border: 1px solid var(--lxd-line);
	border-radius: var(--lxd-radius);
	background: var(--lxd-panel);
	color: #cfcfcf !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.lx-kab-nav a.is-on,
.lx-kab-nav a:hover {
	border-color: var(--lxd-red);
	color: #fff !important;
}

.lx-kab-nav a.is-on {
	background: var(--lxd-red);
}

.lx-kab-card,
.lx-kab-lead,
.lx-kab-empty {
	margin: 0 0 14px;
	padding: 20px 22px;
	background: var(--lxd-panel);
	border: 1px solid var(--lxd-line);
	border-radius: 6px;
	color: #cfcfcf;
}

.lx-kab-card h3,
.lx-kab-lead h3 {
	margin: 0 0 8px;
	color: #fff !important;
	font-family: Inter, Arial, sans-serif !important;
	font-size: 16px;
	text-transform: none !important;
}

.lx-kab-stan {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 20px;
	background: #1d2022;
	color: #cfcfcf;
	font-size: 12px;
}

@media (max-width: 700px) {
	.lx-kab-form {
		padding: 22px;
	}

	.lx-kab-tabs a,
	.lx-kab-nav a {
		flex: 1 1 auto;
		text-align: center;
	}
}

/* ---- обране й кабінет у шапці ------------------------------------------
   Сердечко лишається саме «обраним» і стає стриманішим — воно тепер не
   єдиний значок у кутку, тож не має перетягувати увагу з меню. Поруч
   з'являється вхід у кабінет. */

.lxd-dii {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}

.lxd-heart,
.lxd-kabinet {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: var(--lxd-red);
	font-size: 19px;
	line-height: 1;
	transition: background 0.18s, color 0.18s;
}

.lxd-kabinet {
	color: #d6d6d6;
	font-size: 18px;
}

.lxd-heart:hover,
.lxd-kabinet:hover {
	background: #17191a;
	color: var(--lxd-red) !important;
}

@media (max-width: 900px) {
	.lxd-dii {
		order: 2;
		margin-left: auto;
		margin-right: 10px;
	}

	.lxd-heart,
	.lxd-kabinet {
		width: 34px;
		height: 34px;
		font-size: 17px;
	}
}

/* ======================================================================
   Мобільні правки
   ====================================================================== */

@media (max-width: 700px) {
	/* Заголовок секції й посилання «всі авто» тіснилися в один ряд:
	   заголовок ламався на два рядки, а червона риска відривалась від
	   нього й опинялась під посиланням. */
	.lxd-sekciya-shapka {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.lxd-zag-z-ryskoyu {
		font-size: 23px;
	}

	.lxd-posylannya-vsi {
		font-size: 13px;
	}

	.lxd-sekciya {
		padding: 44px 0;
	}

	.lxd-hero-vmist {
		padding: 54px 0;
	}

	.lxd-hero-zag {
		font-size: 34px;
	}

	.lxd-hero-lead {
		font-size: 15px;
	}

	/* пункти мобільного меню — щільніше, щоб уміщалось без прокрутки */
	.lxd-menu a {
		padding: 11px 0;
		font-size: 15px;
	}

	.lxd-menu .sub-menu a {
		font-size: 14px;
	}
}

/* Тема ставить `capitalize` лічильнику каталогу — виходить «42 Знайдені
   авто» з великої посеред речення. Заодно повертаємо йому нейтральний
   колір: червоним має світитися ціна, а не службовий підпис. */
.cars-total-vehicles,
.cars-total-vehicles *,
.sort-filters-box .stripe,
.listing-top .total {
	text-transform: none !important;
}

.cars-total-vehicles,
.cars-total-vehicles span {
	color: #d6d6d6 !important;
}

.cars-total-vehicles strong,
.cars-total-vehicles b {
	color: var(--lxd-red) !important;
}

/* «Фільтри» на вузькому екрані був майже невидимий */
.cars-filter-toggle,
.filter-toggle,
.mobile-filter-title,
.sort-filters-box a {
	color: #d6d6d6 !important;
}

/* ======================================================================
   Горизонтальна прокрутка в каталозі
   ----------------------------------------------------------------------
   Заміряно: на 768/820/1024 сторінка каталогу з'їжджала вбік на 300–380px.
   Винен `select.cd-select-box` — рідний список, який Select2 підміняє
   своєю розміткою. Тема лишає його в потоці, а наші правила для полів
   дали йому видиму ширину, і він вилазив за екран.

   Прибираємо його з потоку там, де Select2 уже відпрацював, і на всяк
   випадок не даємо жодному полю бути ширшим за контейнер.
   ====================================================================== */

/* Перша спроба звужувала елемент до 1px — не спрацювало: щось із
   правил теми перебивало ширину, і select лишався на 698px. Найнадійніше
   прибрати його з потоку зовсім: Select2 бере значення з елемента через
   DOM, і `display: none` цьому не заважає — поле й далі відправляється
   разом із формою. */
select.select2-hidden-accessible,
select.cd-select-box.select2-hidden-accessible,
.select2-container + select.cd-select-box {
	display: none !important;
}

.sidebar select,
.widget select,
.cars-filter select,
select.cd-select-box {
	max-width: 100%;
}

/* остання застава: жодне поле не має розпирати сторінку */
input,
select,
textarea,
.select2-container {
	max-width: 100%;
}

/* ======================================================================
   Послуги на головній
   ----------------------------------------------------------------------
   П'ять плиток замість колишніх чотирьох загальних переваг: кожна веде
   на свою сторінку із заявкою. Роздільники між колонками, а не рамки
   навколо кожної — так само, як на першому стенді.
   ====================================================================== */

.lxd-poslugy {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	background: var(--lxd-panel);
	border: 1px solid var(--lxd-line);
	border-radius: 8px;
	overflow: hidden;
}

.lxd-posluga {
	display: flex;
	flex-direction: column;
	padding: 32px 24px 26px;
	color: inherit;
	text-align: center;
	text-decoration: none;
	transition: background 0.18s;
}

.lxd-posluga + .lxd-posluga {
	border-left: 1px solid var(--lxd-line);
}

.lxd-posluga:hover {
	background: #16181a;
}

.lxd-posluga > i {
	margin-bottom: 16px;
	color: var(--lxd-red);
	font-size: 28px;
}

.lxd-posluga h3 {
	margin: 0 0 10px;
	color: #fff !important;
	font-family: Inter, Arial, sans-serif !important;
	font-size: 16px;
	font-weight: 700;
	text-transform: none !important;
}

.lxd-posluga p {
	flex: 1 1 auto;
	margin: 0 0 18px;
	color: var(--lxd-muted);
	font-size: 13px;
	line-height: 1.65;
}

.lxd-posluga-dali {
	color: var(--lxd-red);
	font-size: 13px;
	font-weight: 600;
}

.lxd-posluga-dali i {
	margin-left: 6px;
	transition: transform 0.18s;
}

.lxd-posluga:hover .lxd-posluga-dali i {
	transform: translateX(4px);
}

@media (max-width: 1100px) {
	.lxd-poslugy {
		grid-template-columns: repeat(2, 1fr);
	}

	.lxd-posluga:nth-child(odd) {
		border-left: 0;
	}

	.lxd-posluga:nth-child(n + 3) {
		border-top: 1px solid var(--lxd-line);
	}
}

@media (max-width: 560px) {
	.lxd-poslugy {
		grid-template-columns: 1fr;
	}

	.lxd-posluga {
		border-left: 0 !important;
	}

	.lxd-posluga + .lxd-posluga {
		border-top: 1px solid var(--lxd-line);
	}
}

/* Значки характеристик у картці авто — той самий скрипт, що на першому
   стенді, тільки колір під цей варіант. */
.lx-attr-ico {
	margin-right: 8px;
	color: var(--lxd-red) !important;
	font-size: 12px;
	width: 14px;
	text-align: center;
}

/* ======================================================================
   «Чому купують у нас»
   ----------------------------------------------------------------------
   Текст власника цілісний, тому не ріжемо його на колонки: перелік
   читається як продовження фрази «…зручні умови, а саме:». Нумерація
   замість крапок — на прохання власника: так видно, що напрямків рівно
   шість, а не «ось кілька прикладів».
   ====================================================================== */

.lxd-chomu {
	padding-top: 0;
}

.lxd-chomu-zag {
	margin: 10px 0 22px;
	color: #fff !important;
	font-family: Inter, Arial, sans-serif !important;
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 800;
	line-height: 1.15;
	text-transform: uppercase;
}

.lxd-chomu-tekst {
	max-width: 820px;
}

.lxd-chomu-tekst p {
	margin: 0 0 16px;
	color: #c2c2c2;
	font-size: 15px;
	line-height: 1.8;
}

.lxd-chomu-perelik {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	max-width: 980px;
	margin: 24px 0 26px;
	padding: 0;
	/* Тема ставить спискам маркери з !important — поряд із нашим
	   кружечком виходило «① 1. продаж авто». */
	list-style: none !important;
	counter-reset: lxd-chomu;
}

.lxd-chomu-perelik li {
	position: relative;
	list-style: none !important;
	padding: 16px 18px 16px 52px;
	background: var(--lxd-panel);
	border: 1px solid var(--lxd-line);
	border-radius: 6px;
	color: #e2e2e2;
	font-size: 14px;
	line-height: 1.5;
}

.lxd-chomu-perelik li::before {
	counter-increment: lxd-chomu;
	content: counter(lxd-chomu);
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--lxd-red);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.lxd-chomu-perelik li::marker {
	content: "";
	font-size: 0;
}

/* риска над заголовком — як у першому варіанті */
.lxd-chomu-zag::before {
	content: "";
	display: block;
	width: 54px;
	height: 3px;
	margin-bottom: 18px;
	background: var(--lxd-red);
}

.lxd-chomu-pidsumok {
	max-width: 820px;
	margin: 0;
	color: #c2c2c2;
	font-size: 15px;
	line-height: 1.8;
}

@media (max-width: 900px) {
	.lxd-chomu-perelik {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.lxd-chomu-perelik {
		grid-template-columns: 1fr;
	}
}

/* ======================================================================
   Картка авто: ієрархія дій
   ----------------------------------------------------------------------
   Знайдено оглядом: «Хочу це авто» виводилось як звичайний пункт списку
   з маркером — червоний текст без рамки, — а поруч стояли три обведені
   кнопки («Запропонувати ціну», «Тест-драйв», «Кредит»). Головна дія
   виглядала найслабшою з чотирьох.

   Заміряно будову: <a class="lx-hochu"> лежить у <li class="lx-hochu-item">,
   а той — прямо в <div class="details-nav">, БЕЗ проміжного <ul>. Перша
   спроба цілилась у `.details-nav ul > li` і тому не діяла зовсім.
   ====================================================================== */

.details-nav,
.car-detail-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* Головна дія лежить окремим <li> просто в .details-nav, а решта кнопок —
   усередині власного <ul>. Через це flex бачив два елементи й переносив
   ряд. `display: contents` розчиняє обгортку, і всі кнопки стають в один
   ряд. */
.details-nav > ul {
	display: contents !important;
}

.details-nav li,
.car-detail-actions li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	list-style-type: none !important;
	display: inline-flex !important;
}

.details-nav li::marker,
.details-nav li::before {
	content: none !important;
	font-size: 0 !important;
}

/* головна дія */
.details-nav li.lx-hochu-item > a.lx-hochu,
.details-nav a.lx-hochu {
	display: inline-flex !important;
	align-items: center;
	padding: 15px 30px !important;
	border: 0 !important;
	border-radius: var(--lxd-radius) !important;
	background-color: var(--lxd-red) !important;
	background-image: none !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

.details-nav a.lx-hochu:hover {
	background-color: var(--lxd-red-bright) !important;
	color: #fff !important;
}

.details-nav a.lx-hochu i {
	margin-right: 9px;
	color: #fff !important;
}

/* другорядні дії — контурні, меншим кеглем */
.details-nav li:not(.lx-hochu-item) > a {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 12px 18px !important;
	border: 1px solid #3a3c3e !important;
	border-radius: var(--lxd-radius) !important;
	background: transparent !important;
	color: #c8c8c8 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
}

.details-nav li:not(.lx-hochu-item) > a:hover {
	border-color: var(--lxd-red) !important;
	color: var(--lxd-red) !important;
}

/* «Дізнатись більше» над характеристиками — та сама заявка, тому не даємо
   йому вигляду головної кнопки */
.single-cars .btn-enquire,
.single-cars a[data-target="#request_more_info_mdl"] {
	border: 1px solid #3a3c3e !important;
	background: transparent !important;
	color: #c8c8c8 !important;
	font-weight: 500 !important;
}

/* Заголовки блоків у картці тема фарбує темним — на чорному зникають */
.single-cars .details-title,
.single-cars .car-details-sidebar h5,
.single-cars .car-details-sidebar h6,
.single-cars .tab-content h4,
.single-cars h5,
.single-cars h6 {
	color: #fff !important;
}

/* Смуга каталогу нижча за сторінкову: під нею одразу фільтри й товар,
   і високий блок тільки відсував би їх за екран. */
.lxd-page-hero-nyzka {
	min-height: 210px;
}

.lxd-page-hero-nyzka .lxd-page-hero-vmist {
	padding: 34px 0;
}

.lxd-page-hero-nyzka h1 {
	font-size: clamp(26px, 2.6vw, 34px);
}

/* ---- картка авто: прямий контакт ---------------------------------------- */

.lxd-kartka-kontakt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin: 18px 0 0;
	padding: 16px 20px;
	background: var(--lxd-panel);
	border: 1px solid var(--lxd-line);
	border-radius: 6px;
}

.lxd-kartka-kontakt-pidpys {
	color: var(--lxd-muted);
	font-size: 13px;
}

.lxd-kartka-tel,
.lxd-kartka-tg {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.lxd-kartka-tel i,
.lxd-kartka-tg i {
	color: var(--lxd-red);
	font-size: 14px;
}

.lxd-kartka-tg {
	font-size: 14px;
	font-weight: 500;
}

.lxd-kartka-tel:hover,
.lxd-kartka-tg:hover {
	color: var(--lxd-red) !important;
}

/* «Дізнатись більше» над характеристиками відкриває те саме вікно, що й
   «Хочу це авто» — дві кнопки на одну дію лише плутають. */
.single-cars .btn-enquire,
.single-cars a[data-target="#request_more_info_mdl"]:not(.lx-hochu) {
	display: none !important;
}

/* Орієнтир над картками послуг: пояснює, коли йти на «Продати авто»,
   а коли одразу в конкретну послугу. */
.lxd-vmist .lx-orientyr {
	max-width: 720px;
	margin: 0 0 26px;
	color: var(--lxd-muted);
	font-size: 15px;
	line-height: 1.7;
}

.lxd-vmist .lx-orientyr a {
	color: var(--lxd-red);
	font-weight: 600;
}

/* ======================================================================
   Контраст: червоний як текст
   ----------------------------------------------------------------------
   Перевірка показала системну ваду: фірмовий #e5231c як КОЛІР ТЕКСТУ на
   темному дає 4.07–4.35 при нормі 4.5. Він добрий як тло під білим
   написом, але не як сам напис — а ми ним фарбували надзаголовки,
   посилання в тексті, «Детальніше» й активний пункт меню.

   Заводимо окремий, світліший відтінок саме для тексту: 5.47 на полотні
   і 5.12 на панелях. Тло кнопок лишається фірмовим — там білий напис
   і контраст рахується інакше.
   ====================================================================== */

:root {
	--lxd-red-text: #f04a43;
}

.lxd-kicker,
.lx-kicker,
.lxd-posluga-dali,
.lx-card-link,
.lxd-posylannya-vsi:hover,
/* Кнопки виключаємо навмисно: у них червоний ФОН, і від такого правила
   напис на кнопці ставав червоним по червоному — контраст 1.26,
   тобто кнопка переставала читатися. Спіймано перевіркою.

   Сюди ж `.is-on` (активна вкладка кабінету), `.lx-submit` (кнопка
   «Перейти до каталогу») і `.lx-kab-out` (вихід). Окремі правила для них
   не допомагали: кожен `:not()` додає специфічність свого аргументу, тож
   цей селектор важить більше за будь-яке правило з двох-трьох класів.
   Дешевше перелічити винятки тут, ніж змагатися вагою селекторів. */
.lxd-vmist a:not(.lx-cta-btn):not(.lx-nema-btn):not(.lxd-btn):not(.lx-card-link):not(.is-on):not(.lx-submit):not(.lx-kab-out),
.lxd-vmist .lx-orientyr a,
.lx-nema-tg a,
.lx-kab-alt a,
.lxd-footer-col a:hover,
.lxd-menu a:hover,
.lxd-menu .current-menu-item > a,
.lxd-menu .current_page_item > a,
.lxd-kartka-tel:hover,
.lxd-kartka-tg:hover,
.car-item a:hover,
.lxd-heart,
.lxd-topbar-item i,
.lxd-topbar-tel i {
	color: var(--lxd-red-text) !important;
}

/* Примітка під формою була ще темніша за поріг (4.04) — підсвітлюємо. */
.lx-form .lx-note,
.lxd-vmist .lx-note {
	color: #8f8f8f !important;
}

/* ---- картка авто: написи, які лишались майже невидимими ----------------
   Заміряно: «Друк» і «Розташування» приходили кольором rgb(28,30,34) —
   це контраст 1.1 на чорному, тобто напис читався лише як пляма.
   «Рік» у характеристиках був rgb(54,54,54), вкладки — старим червоним
   теми rgb(214,18,27). Усе це кольори, розраховані на світле тло. */

.single-cars .vehicle-button-link,
.single-cars .vehicle-button-link-print,
.single-cars .nav-tabs a,
.single-cars .nav-tabs li a,
.single-cars .tab-content .car-attribute-title,
.single-cars .car-attributes span,
.single-cars .car-attributes strong,
.single-cars .details-block span,
.single-cars .details-block strong {
	color: #cfcfcf !important;
}

.single-cars .nav-tabs li.active a,
.single-cars .nav-tabs a:hover {
	color: var(--lxd-red-text) !important;
}

.single-cars .car-attributes strong,
.single-cars .details-block strong {
	color: #fff !important;
}

/* Напис на суцільних кнопках завжди білий — незалежно від того, які
   правила кольору тексту застосуються до посилань навколо. */
.lxd-vmist .lx-cta-btn,
.lxd-vmist .lx-nema-btn:not(.lx-nema-btn-ghost),
.lxd-vmist .lxd-btn-red,
.lx-cta-btn,
.lxd-btn-red {
	color: #fff !important;
}

.lxd-vmist .lx-card-link {
	color: var(--lxd-red-text) !important;
}


/* Активна вкладка кабінету має червоне тло — напис на ній мусить лишатися
   білим. Правило кольору посилань у вмісті фарбувало і її, даючи червоне
   по червоному (контраст 1.26). */
.lx-kab-tabs a.is-on,
.lx-kab-nav a.is-on,
.lxd-vmist .lx-kab-tabs a.is-on,
.lxd-vmist .lx-kab-nav a.is-on {
	color: #fff !important;
}

/* ======================================================================
   Кабінет після входу
   ----------------------------------------------------------------------
   Знайдено перевіркою з реальним входом: кнопка «Перейти до каталогу»
   (клас `lx-submit`) мала червоне тло й червоний напис — контраст 1.26,
   тобто напис зливався з кнопкою. Автоматична перевірка цього не бачила,
   бо ходить сайтом як гість і в кабінет не потрапляє.

   Заміряні класи: `.lx-kab-out` (вихід), `.lx-submit` (кнопка),
   вкладки — <a> без класу, активна з `.is-on`.
   ====================================================================== */

.lx-kab .lx-submit,
.lx-kab a.lx-submit,
.lxd-vmist .lx-kab .lx-submit {
	background: var(--lxd-red) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--lxd-radius);
	padding: 13px 26px;
	font-weight: 600;
	text-decoration: none;
}

.lx-kab .lx-submit:hover {
	background: var(--lxd-red-bright) !important;
	color: #fff !important;
}

/* Вихід стояв дрібним посиланням над вкладками — його легко було
   прийняти за ще одну вкладку. Відсуваємо вправо й робимо стриманим. */
.lx-kab-out,
.lxd-vmist .lx-kab-out {
	float: right;
	padding: 9px 16px;
	border: 1px solid var(--lxd-line);
	border-radius: var(--lxd-radius);
	color: var(--lxd-muted) !important;
	font-size: 13px;
	text-decoration: none;
}

.lx-kab-out:hover {
	border-color: var(--lxd-red);
	color: var(--lxd-red-text) !important;
}

/* ======================================================================
   Значки характеристик: метал
   ----------------------------------------------------------------------
   Значок — не текст, а суцільна форма, тому на ньому читається перепад
   від відблиску до тіні. Саме він і робить «метал»; плаский колір,
   навіть насичений, лишається просто кольором.

   Перелив іде згори вниз: частина значків — flex-елементи, розтягнуті
   на всю колонку, і горизонтальний градієнт лишив би на самому гліфі
   однорідну пляму.
   ====================================================================== */

:root {
	--lxd-zoloto: #eec14a;
	--lxd-zoloto-svitle: #fff4cf;
	--lxd-zoloto-tin: #a8761f;
}

.lx-attr-ico,
.car-item .lx-attr-ico,
.vehicle-attributes-list i,
.car-item .car-attribute-columns i,
.single-cars .car-attributes i,
.single-cars .details-block i {
	color: var(--lxd-zoloto) !important;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
	.lx-attr-ico,
	.car-item .lx-attr-ico,
	.vehicle-attributes-list i,
	.car-item .car-attribute-columns i,
	.single-cars .car-attributes i,
	.single-cars .details-block i {
		background-image: linear-gradient(
			172deg,
			var(--lxd-zoloto-svitle) 0%,
			#f7d066 24%,
			#e0ad33 56%,
			#b8862b 82%,
			var(--lxd-zoloto-tin) 100%
		);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent !important;
		-webkit-text-fill-color: transparent;
	}
}

/* Характеристики на картці головної — рядком зі значками, як у каталозі */
.lxd-avto-atr {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none !important;
}

.lxd-avto-atr li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 0;
	color: var(--lxd-muted);
	font-size: 13px;
	list-style: none !important;
}

.lxd-avto-atr li::marker,
.lxd-avto-atr li::before {
	content: none !important;
}

.lxd-avto-atr .lx-attr-ico {
	width: 14px;
	font-size: 12px;
	text-align: center;
}

/* ======================================================================
   Підказка гостю про обране
   ----------------------------------------------------------------------
   Клік по сердечку в каталозі створює `.lx-fav-toast` із поясненням і
   посиланням на вхід (з поверненням на ту саму сторінку). Оформлення
   для нього жило в brand.css, знятому на цьому стенді, — тож підказка
   з'являлась у розмітці, але лишалась невидимою: гість натискав
   сердечко й не бачив жодної реакції.

   Клас `is-on` вішається наступним кадром після вставки — на ньому й
   тримається поява.
   ====================================================================== */

.lx-fav-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	z-index: 120;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 22px;
	background: var(--lxd-panel);
	border: 1px solid var(--lxd-line);
	border-radius: 8px;
	box-shadow: 0 14px 40px #000a;
	color: #eaeaea;
	font-size: 14px;
	transform: translate(-50%, 16px);
	opacity: 0;
	transition: opacity 0.25s, transform 0.25s;
	pointer-events: none;
}

.lx-fav-toast.is-on {
	transform: translate(-50%, 0);
	opacity: 1;
	pointer-events: auto;
}

.lx-fav-toast a {
	flex: 0 0 auto;
	padding: 9px 18px;
	border-radius: var(--lxd-radius);
	background: var(--lxd-red);
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.lx-fav-toast a:hover {
	background: var(--lxd-red-bright);
	color: #fff !important;
}

/* Сердечко в каталозі: активний стан має бути помітним, бо саме він
   каже, що авто збережено. */
.lx-fav {
	color: #cfcfcf;
	transition: color 0.18s;
}

.lx-fav:hover,
.lx-fav.is-on,
.lx-fav.active {
	color: var(--lxd-red-text) !important;
}

@media (max-width: 560px) {
	.lx-fav-toast {
		left: 16px;
		right: 16px;
		bottom: 16px;
		flex-wrap: wrap;
		transform: translateY(16px);
	}

	.lx-fav-toast.is-on {
		transform: translateY(0);
	}

	.lx-fav-toast a {
		flex: 1 1 100%;
		text-align: center;
	}
}

/* ======================================================================
   Бічна колонка каталогу: лад
   ----------------------------------------------------------------------
   Оглядом знайдено кілька речей, які псували враження:
   · у блоків «Ціна» й «Кредитний калькулятор» не було внутрішніх полів —
     заголовок і повзунок упиралися в рамку й візуально вилазили за неї;
   · кнопки калькулятора «Розрахувати платіж» і «Очистити» налазили одна
     на одну й виходили за межі блоку;
   · підписи полів ішли КАПСОМ, а заголовки — з великої кожне слово
     («42 Знайдені авто», «Розрахувати Платіж»): це `capitalize` теми,
     розрахований на англійську.
   ====================================================================== */

.sidebar .widget,
.sidebar .cars_filters,
.sidebar .widget_financing_calculator,
.sidebar .widget_vehicle_price_range,
.sidebar > div {
	padding: 22px !important;
	margin-bottom: 22px !important;
	overflow: hidden;
}

.sidebar .widget > *:first-child,
.sidebar .widget > .widgettitle {
	margin-top: 0 !important;
}

/* повзунок ціни тримаємо в межах картки */
.sidebar .ui-slider,
.sidebar .price-slider,
.sidebar .slider-range {
	width: 100% !important;
	max-width: 100% !important;
	margin: 18px 0 !important;
	box-sizing: border-box;
}

.sidebar .ui-slider-handle {
	margin-left: -6px;
}

/* підписи полів — звичайним регістром, а не капсом */
.sidebar label,
.sidebar .widget label,
.widget_financing_calculator label,
.sidebar .widgettitle,
.sidebar .widget-title,
.cars-total-vehicles,
.sidebar .btn,
.sidebar button,
.sidebar input[type="submit"] {
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.sidebar label,
.widget_financing_calculator label {
	display: block;
	margin: 0 0 7px;
	color: #b6b6b6 !important;
	font-size: 12px !important;
	font-weight: 500;
}

.sidebar input[type="text"],
.sidebar input[type="number"],
.sidebar select,
.widget_financing_calculator input {
	width: 100% !important;
	margin-bottom: 16px;
	box-sizing: border-box;
}

/* кнопки калькулятора: у ряд, без накладання */
.widget_financing_calculator .btn,
.widget_financing_calculator button,
.widget_financing_calculator input[type="submit"],
.widget_financing_calculator input[type="reset"],
.sidebar .payment-btn,
.sidebar .clear-btn {
	position: static !important;
	float: none !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	margin: 0 8px 8px 0 !important;
	padding: 12px 20px !important;
	font-size: 13px !important;
}

.widget_financing_calculator form,
.sidebar .financing-calculator {
	display: flex;
	flex-direction: column;
}

.widget_financing_calculator .calculator-btns,
.sidebar .calculator-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px;
}

/* результат розрахунку — окремим рядком, а не поверх кнопок */
.widget_financing_calculator .monthly-payment,
.sidebar .monthly-payment,
.sidebar .payment-result {
	display: block;
	clear: both;
	margin-top: 14px;
	color: #fff !important;
	font-size: 18px;
	font-weight: 700;
}

/* лічильник знайдених авто */
.cars-total-vehicles {
	display: block;
	margin-bottom: 16px;
	color: #d6d6d6 !important;
	font-size: 14px !important;
}

/* Кнопки калькулятора стояли впритул одна до одної (заміряно: 1817 і
   1859 при висоті 42) — виглядало як накладання. Ставимо їх у ряд із
   проміжком і прибираємо капіталізацію, через яку виходило
   «Розрахувати Платіж». */
.sidebar .form-group:has(.do_calculator) {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}

.sidebar .do_calculator,
.sidebar .do_calculator_clear,
.sidebar .button,
.sidebar .button.red {
	margin: 0 !important;
	padding: 12px 20px !important;
	border-radius: var(--lxd-radius) !important;
	font-size: 13px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.sidebar .do_calculator {
	background: var(--lxd-red) !important;
	color: #fff !important;
}

.sidebar .do_calculator:hover {
	background: var(--lxd-red-bright) !important;
}

/* «очистити» — другорядна дія, тому контурна, а не червона плашка */
.sidebar .do_calculator_clear {
	background: transparent !important;
	border: 1px solid #4a4c4e !important;
	color: #c8c8c8 !important;
}

.sidebar .do_calculator_clear:hover {
	border-color: var(--lxd-red) !important;
	color: var(--lxd-red-text) !important;
}

.sidebar .reset_filters,
.sidebar .pgs-price-filter-btn {
	text-transform: none !important;
}

/* ======================================================================
   Картка авто: дрібниці верстки
   ----------------------------------------------------------------------
   Оглядом знайдено: вкладки («опції та комплектація», «розташування»)
   виводились капсом дрібним кеглем; заголовок «Схожі Авто» — з великої
   кожне слово; список опцій ішов трьома нерівними колонками, через що
   довгі пункти рвалися посеред слова.
   ====================================================================== */

.single-cars .nav-tabs,
.single-cars .nav-tabs li a,
.single-cars .nav-tabs a {
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.single-cars .nav-tabs li a {
	padding: 14px 20px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

.single-cars .nav-tabs li.active a {
	border-bottom: 2px solid var(--lxd-red) !important;
}

/* заголовки блоків нижче картки */
.single-cars h2,
.single-cars h3,
.single-cars h4,
.single-cars .section-title,
.single-cars .similar-cars-title {
	text-transform: none !important;
}

/* Список опцій: рівні колонки з однаковим кроком, щоб довгі пункти не
   рвались і не з'їжджали один відносно одного. */
.single-cars .tab-content ul,
.single-cars .car-features ul,
.single-cars .features-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px 24px;
	margin: 0;
	padding: 0;
	list-style: none !important;
}

.single-cars .tab-content ul > li,
.single-cars .car-features ul > li,
.single-cars .features-list > li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 !important;
	padding: 0 !important;
	color: #d6d6d6 !important;
	font-size: 14px;
	line-height: 1.5;
	list-style: none !important;
}

.single-cars .tab-content ul > li::marker,
.single-cars .tab-content ul > li::before {
	content: none !important;
}

.single-cars .tab-content ul > li i {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--lxd-red-text) !important;
	font-size: 12px;
}

@media (max-width: 900px) {
	.single-cars .tab-content ul,
	.single-cars .car-features ul,
	.single-cars .features-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.single-cars .tab-content ul,
	.single-cars .car-features ul,
	.single-cars .features-list {
		grid-template-columns: 1fr;
	}
}

/* «Схожі авто» — це h6.related-title, а не h2/h3, тому попереднє правило
   його не діставало: тема лишала свій `capitalize` («Схожі Авто») і
   серіфний шрифт. Заодно піднімаємо кегль — це заголовок секції, а не
   підпис. */
.single-cars .related-title,
.single-cars h6.related-title,
.feature-car .related-title {
	margin: 0 0 20px !important;
	color: #fff !important;
	font-family: Inter, Arial, sans-serif !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	text-transform: none !important;
}

/* ======================================================================
   Форми: дрібниці, помітні оком
   ----------------------------------------------------------------------
   · зірочка обов'язковості губилася в кольорі підпису — тепер червона;
   · примітка під кнопкою була 11px сірим і читалася насилу;
   · останнє коротке поле перед «Коментарем» лишало порожню половину
     ряду — дірка, яка виглядає як недоробка верстки.
   ====================================================================== */

.lx-field .lx-zirka,
.lx-field abbr,
.lx-field .required {
	color: var(--lxd-red-text);
}

.lx-form .lx-note,
.lxd-vmist .lx-note {
	font-size: 12px !important;
	line-height: 1.65;
	color: #9a9a9a !important;
}

/* Непарне коротке поле перед довгим — на всю ширину, щоб не лишалося
   порожньої половини ряду. */
.lx-form-grid > .lx-field:nth-child(odd):nth-last-child(2) {
	grid-column: 1 / -1;
}

/* ======================================================================
   Сторінки послуг: пропорції карток
   ----------------------------------------------------------------------
   Оглядом видно: заголовок картки («Комісійний продаж») набирався
   майже 28px у картці шириною 370 — він забивав опис і посилання, хоча
   головне в картці саме опис. Номер «01» навпаки губився сірим.
   Заголовок «Що ще» був дрібніший за пункти під ним.
   ====================================================================== */

.lxd-vmist .lx-card h4,
.lxd-vmist .lx-card h3 {
	margin: 0 0 10px !important;
	font-size: 19px !important;
	line-height: 1.3;
}

.lxd-vmist .lx-card p {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.65;
}

/* Номер картки — червоний і помітний: він задає порядок читання */
.lxd-vmist .lx-card-num {
	display: block;
	margin-bottom: 10px;
	color: var(--lxd-red-text);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.06em;
}

.lxd-vmist .lx-card > i {
	margin-bottom: 12px;
	font-size: 20px;
}

/* Заголовок «Що ще» був дрібніший за текст під ним */
.lxd-vmist h3 {
	font-size: 21px !important;
	margin: 34px 0 16px !important;
}

.lxd-vmist .lx-card h4,
.lxd-vmist .lx-card h3 {
	margin-top: 0 !important;
}

/* ======================================================================
   Каталог: очікування, наведення на фото, згортання підменю
   ----------------------------------------------------------------------
   Три вади, знайдені власником у живому користуванні.
   ====================================================================== */

/* Шар очікування при зміні сторінки чи фільтра тема малює білим —
   `rgba(255, 255, 255, .8)`. На темному сайті це читалось як біла рамка,
   що спалахує поверх списку. Робимо його темним, а крутилку фірмовою. */
.filter-loader,
.pagination-loader {
	background: rgba(8, 9, 10, 0.74) !important;
}

.filter-loader .cd-loader,
.pagination-loader .cd-loader {
	border-color: rgba(255, 255, 255, 0.16) !important;
	border-top-color: var(--lxd-red) !important;
}

/* Наведення на картку: суцільний червоний `rgba(214, 18, 27, .85)`
   повністю ховав саме авто — клієнт наводить мишу на машину й перестає
   її бачити. Лишаємо впізнаваний фірмовий відтінок, але тепер це
   градієнт, крізь який видно кузов. */
.car-item .car-overlay-banner,
.product-item .car-overlay-banner {
	background: linear-gradient(
		180deg,
		rgba(8, 9, 10, 0.28) 0%,
		rgba(214, 18, 27, 0.62) 100%
	) !important;
}

/* Кнопки над фото були 38×36 — тобто не квадрат, а на око «майже
   квадрат» із заокругленням 4px. Стояли вони `inline-block`, і проміжок
   між ними складався з власного відступу плюс пробілу в розмітці, через
   що пара виглядала зсунутою від центру. Тепер це flex-ряд однакових
   кружків із рівним проміжком. */
.car-item .car-overlay-banner ul,
.product-item .car-overlay-banner ul {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.car-item .car-overlay-banner ul li,
.product-item .car-overlay-banner ul li {
	display: flex !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.car-item .car-overlay-banner ul li::marker,
.car-item .car-overlay-banner ul li::before {
	content: none !important;
}

.car-item .car-overlay-banner ul li a,
.product-item .car-overlay-banner ul li a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 46px !important;
	height: 46px !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	border-radius: 50% !important;
	background: rgba(8, 9, 10, 0.42) !important;
	color: #fff !important;
	font-size: 15px !important;
	line-height: 1 !important;
	transition: background 0.16s, border-color 0.16s, transform 0.16s;
}

.car-item .car-overlay-banner ul li a:hover,
.car-item .car-overlay-banner ul li a:focus-visible,
.product-item .car-overlay-banner ul li a:hover {
	border-color: #fff !important;
	background: rgba(8, 9, 10, 0.8) !important;
	transform: translateY(-2px);
}

.car-item .car-overlay-banner ul li a i,
.product-item .car-overlay-banner ul li a i {
	margin: 0 !important;
	color: inherit !important;
	font-size: 15px !important;
}

/* Кнопка згортання підменю потрібна лише у вузькому меню. */
.lxd-pidmenu-toggle {
	display: none;
}

@media (max-width: 900px) {

	/* Підменю «Послуги» стояло розгорнутим завжди: сім пунктів
	   розтягували список так, що «Про нас» і «Контакти» відсувались за
	   екран, і меню втрачало свою суть — швидкий огляд розділів.
	   Тепер розділ розгортається дотиком по стрілці, а сам пункт
	   лишається звичайним посиланням. */
	.lxd-menu li.menu-item-has-children {
		position: relative;
	}

	.lxd-pidmenu-toggle {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 0;
		background: none;
		color: #fff;
		font-size: 12px;
		cursor: pointer;
	}

	.lxd-pidmenu-toggle span {
		display: block;
		transition: transform 0.18s;
	}

	.lxd-menu li.lxd-rozgornuto > .lxd-pidmenu-toggle span {
		transform: rotate(180deg);
	}

	.lxd-menu .sub-menu {
		display: none;
	}

	.lxd-menu li.lxd-rozgornuto > .sub-menu {
		display: block;
	}
}

/* ----------------------------------------------------------------------
   Режим списку в каталозі
   ----------------------------------------------------------------------
   Над каталогом три перемикачі вигляду. Сітку тема будує на `.car-item`
   — його ми перефарбували. А список і «цегляну кладку» вона будує на
   `.car-grid`, тож усі наші правила проходили повз: варто було клієнту
   перемкнути вигляд, як каталог ставав білим із чорним текстом, з
   заголовками КАПСОМ і світлими смугами під кожним авто.
   ---------------------------------------------------------------------- */

.car-grid,
.car-grid.style-classic {
	background: var(--lxd-panel) !important;
	border: 1px solid var(--lxd-line) !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	overflow: hidden;
}

.car-grid .car-info,
.car-grid .car-bottom,
.car-grid .car-list,
.car-grid .car-content,
.car-grid .car-detail,
.car-grid .price-block {
	background: transparent !important;
	border-color: var(--lxd-line) !important;
}

.car-grid h2,
.car-grid h3,
.car-grid h4,
.car-grid .car-title,
.car-grid .car-title a,
.car-grid h2 a,
.car-grid h3 a {
	color: #fff !important;
	font-family: Inter, Arial, sans-serif !important;
	font-size: 19px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.car-grid .car-title a:hover,
.car-grid h2 a:hover,
.car-grid h3 a:hover {
	color: var(--lxd-red-text) !important;
}

.car-grid .price,
.car-grid .car-price,
.car-grid .regular-price,
.car-grid .final-price,
.car-grid .price-block strong,
.car-grid .price-block span {
	color: var(--lxd-red-text) !important;
	font-weight: 700 !important;
}

.car-grid .vehicle-attributes-list span,
.car-grid .car-attributes span,
.car-grid .car-info span {
	color: var(--lxd-muted) !important;
}

.car-grid .vehicle-attributes-list strong,
.car-grid .car-attributes strong,
.car-grid .car-info strong {
	color: #fff !important;
}

.car-grid p,
.car-grid .car-excerpt,
.car-grid .description {
	color: var(--lxd-muted) !important;
}

/* Кнопки в нижній смузі картки-списку. */
.car-grid .car-bottom a,
.car-grid .car-bottom .btn,
.car-grid .details-btn {
	color: #fff !important;
}

.car-grid .car-bottom a:hover,
.car-grid .details-btn:hover {
	color: var(--lxd-red-text) !important;
}

/* Нижня рамка картки лишалась світлою від теми навіть у сітці. */
.car-item,
.car-item.gray-bg,
.car-grid {
	border-bottom-color: var(--lxd-line) !important;
}

/* Знак валюти лежить в окремому `<span class="currency">` усередині
   ціни. Сірим його робило не оформлення теми, а наше ж правило
   `.car-grid .car-info span` для підписів характеристик — воно важить
   три класи проти двох і перемагало. Дописуємо контейнер ціни, щоб
   вийти вперед за вагою, а не множити `!important`. */
.car-grid .car-info .price .currency,
.car-grid .car-info .car-price .currency,
.car-grid .price .currency,
.car-grid .car-price .currency,
.car-grid .new-price .currency,
.car-item .price .currency,
.car-item .car-price .currency,
.car-item .new-price .currency {
	color: var(--lxd-red-text) !important;
}

/* `.new-price` тема фарбує чистим #d6121b — на темному тлі це 4.07 при
   нормі 4.5, тобто нижче порога читабельності. Той самий випадок, що з
   основним червоним: для тексту беремо освітлений відтінок. */
.car-item .new-price,
.car-grid .new-price,
bdi.new-price {
	color: var(--lxd-red-text) !important;
}

/* Світла смуга під карткою лишалась від теми: її правило важить більше
   за наше однокласове, тому додаємо `body` до селектора. */
body .car-item,
body .car-item.gray-bg,
body .car-item.gray-bg.text-center,
body .car-grid,
body .car-grid.style-classic {
	border-bottom-color: var(--lxd-line) !important;
}

/* Роздільник між характеристиками і ціною в режимі списку тема малює
   смугою `border-right: 3px solid #f5f5f5` — на темному тлі вона світила
   білою рискою через усю картку. */
.car-grid .car-info-top-left,
.car-item .car-info-top-left {
	border-right-color: var(--lxd-line) !important;
	border-right-width: 1px !important;
}

/* Лічильник обраного на сердечку в шапці. Порожній не показуємо: нуль
   у кружечку виглядав би як помилка, а не як «поки нічого не збережено». */
.lxd-heart {
	position: relative;
}

.lxd-heart .lx-fav-count {
	position: absolute;
	top: -5px;
	right: -9px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--lxd-red);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.lxd-heart.is-empty .lx-fav-count {
	display: none;
}

/* Набір значків у топбарі — для телефона.

   На комп'ютері топбар несе адресу, графік, номер і кнопку дзвінка, і
   значкам там тісно; вони стоять у меню. На вузьких екранах усе
   навпаки: меню згорнуте під кнопку, тож значки видно лише в топбарі —
   поруч із номером, тобто там, де людина й шукає, як зв'язатися. */
.lxd-topbar-soc {
	display: none;
}

@media (max-width: 900px) {

	.lxd-topbar-soc {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		margin: 0 auto 0 6px;
	}

	.lxd-topbar-soc a,
	.lxd-topbar-soc .lxd-soc-nema {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		font-size: 15px;
		line-height: 1;
	}

	.lxd-topbar-soc .lxd-soc-nema {
		opacity: 0.45;
	}

	.lxd-topbar-soc .lxd-soc-telegram {
		color: #2aabee;
	}

	.lxd-topbar-soc .lxd-soc-youtube {
		color: #ff2d2d;
	}

	.lxd-topbar-soc .lxd-soc-tiktok {
		color: #fff;
		text-shadow: -1px -1px 0 rgba(37, 244, 238, 0.85), 1px 1px 0 rgba(254, 44, 85, 0.85);
	}

	.lxd-topbar-soc .lxd-soc-instagram {
		color: #f0567a;
	}
}

/* Соцмережі в меню.

   Спершу вони стояли в топбарі, але там їх не було видно на телефоні —
   топбар на вузьких екранах несе лише телефон і кнопку дзвінка. У меню
   вони живуть в одному місці для всіх ширин: на комп'ютері в рядку
   меню за розділювачем, на телефоні — всередині розгорнутого списку.

   Мережі без адреси показуємо приглушеним значком без посилання:
   видно, що салон там є, просто сторінка ще готується. */
.lxd-menu-soc {
	/* `order: -1` ставить значки перед пунктами меню, не чіпаючи
	   розмітки: у HTML вони лишаються в кінці `<nav>`, тобто читач
	   екрана й клавіатура проходять спершу навігацію, а вже потім
	   зовнішні посилання. */
	order: -1;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-right: 22px;
	padding-right: 22px;
	border-right: 1px solid var(--lxd-line);
}

/* Селектор із `.lxd-menu` попереду навмисне: посилання всередині меню
   успадковували його ж правила — вертикальні поля пункту розтягували
   значок до 72px, а сусідні `<span>` лишались 14px. Тепер усі чотири
   однакові. */
.lxd-menu .lxd-menu-soc a,
.lxd-menu .lxd-menu-soc .lxd-soc-nema {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	font-size: 16px;
	line-height: 1;
	transition: opacity 0.16s, transform 0.16s;
}

/* Підкреслення активного пункту меню значків не стосується. */
.lxd-menu .lxd-menu-soc a::after,
.lxd-menu .lxd-menu-soc a::before {
	content: none;
}

.lxd-menu .lxd-menu-soc a:hover,
.lxd-menu .lxd-menu-soc a:focus-visible {
	transform: translateY(-2px);
}

/* Фірмові кольори мереж.

   Беремо кольори самих брендів, а не палітру сайту: значок соцмережі
   впізнають саме за кольором, і сірий рядок однакових іконок читається
   гірше за чотири різні. Тло в нас темне, тому відтінки взяті світліші
   за офіційні — інакше синій Telegram і фіолетовий Instagram на чорному
   тьмяніють. */
.lxd-menu .lxd-menu-soc .lxd-soc-telegram {
	color: #2aabee;
}

.lxd-menu .lxd-menu-soc .lxd-soc-youtube {
	color: #ff2d2d;
}

/* TikTok на чорному тлі — білий логотип із бірюзовим і малиновим
   зсувом; тінями відтворюємо той самий ефект. */
.lxd-menu .lxd-menu-soc .lxd-soc-tiktok {
	color: #fff;
	text-shadow: -1px -1px 0 rgba(37, 244, 238, 0.85), 1px 1px 0 rgba(254, 44, 85, 0.85);
}

/* Instagram.

   Тут довго стояв градієнт через `background-clip: text` — так фарбують
   шрифтову іконку. Значки давно стали SVG (`fill: currentColor`), і
   правило просто нічого не робило: селектор чіплявся за `i`, якого в
   розмітці більше немає. Беремо фірмовий рожевий одноколірного логотипа,
   трохи світліший за офіційний #E4405F — на чорному тлі він тьмяніє. */
.lxd-menu .lxd-menu-soc .lxd-soc-instagram {
	color: #f0567a;
}

/* Мережі без адреси лишаються у своєму кольорі, але приглушені:
   впізнавані й водночас видно, що це ще не посилання. */
.lxd-menu .lxd-menu-soc .lxd-soc-nema {
	opacity: 0.45;
	cursor: default;
}

@media (max-width: 900px) {

	/* У розгорнутому меню список іде колонкою, тож соцмережі стають
	   окремим рядком під пунктами — з рискою-роздільником згори. */
	/* На телефоні значки живуть у топбарі, поруч із номером — там вони
	   на видноті одразу, без розгортання меню. Набір усередині меню
	   ховаємо, щоб той самий рядок не з'являвся двічі. */
	.lxd-menu-soc {
		display: none;
	}
}

/* ======================================================================
   Дотикові цілі на телефоні
   ----------------------------------------------------------------------
   Заміряно на 360 і 390: значки в шапці виходили 34–35px, перемикачі
   вигляду каталогу — 26×23, стрілки галереї — 30×30, посилання підвалу
   мали висоту 21px. Пальцем у таке влучати важко: і Apple, і Material
   називають межею 44px, WCAG 2.5.8 — 24px як абсолютний мінімум.

   Збільшуємо саму зону дотику, а не малюнок: значки лишаються того
   самого розміру, просто навколо них з'являється поле.
   ====================================================================== */

@media (max-width: 900px) {

	.lxd-menu-toggle,
	.lxd-heart,
	.lxd-kabinet {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}

	.lxd-soc a {
		width: 44px;
		height: 44px;
	}

	/* Сортування й три перемикачі вигляду — елементи теми. */
	.cars-order a,
	.view-icon .catlog-layout {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		min-width: 40px;
		min-height: 40px;
	}

	/* Стрілки галереї в картці авто. */
	.slick-prev,
	.slick-next {
		width: 40px !important;
		height: 40px !important;
	}

	/* Посилання підвалу стояли впритул: 21px висоти й нуль між рядками.
	   Додаємо поле — тепер кожен пункт має 31px і не злипається з
	   сусіднім. */
	.lxd-footer-col a {
		padding-top: 5px;
		padding-bottom: 5px;
	}

	.lxd-footer-nyz-right a,
	.lx-kab-alt a {
		display: inline-block;
		padding: 6px 0;
	}
}

/* На 360px шапка перестала вміщатись, щойно дотикові цілі виросли до
   44px: логотип 159 + три значки по 44 + проміжки давали 370 при вікні
   360, і сторінка їхала вбік. Тому на вузьких екранах підбираємо
   проміжки й трохи зменшуємо логотип — цілі лишаються повнорозмірними,
   бо саме вони важливі для пальця. */
@media (max-width: 420px) {

	.lxd-nav {
		gap: 8px;
	}

	.lxd-dii {
		gap: 2px;
	}

	.lxd-heart {
		margin-right: 0;
	}

	.lxd-logo {
		font-size: 20px;
		letter-spacing: -0.6px;
	}

	.lxd-logo-dah {
		width: 64px;
	}

	/* «Поділитися» в картці авто — 15×20, найдрібніша ціль на сайті. */
	.cardealer-share-action-link,
	.cardealer-share-action a {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		min-width: 40px;
		min-height: 40px;
	}
}

/* Посилання-дія в картці послуги («Залишити авто на комісію»,
   «Розрахувати обмін») мало висоту 17px — це головна дія картки, і саме
   в неї цілиться палець. Робимо зону дотику 44px, не змінюючи вигляду:
   відступ згори й знизу, і від'ємне поле знизу, щоб картка не виросла. */
@media (max-width: 900px) {

	.lxd-vmist .lx-card-link,
	.lx-card-link {
		display: inline-block;
		padding-top: 13px;
		padding-bottom: 13px;
		margin-bottom: -10px;
	}
}

/* На 360px рядок топбара не сходився: номер 118 + чотири значки 126 +
   кнопка 143 давали 381 при вікні 360. Тому на найвужчих екранах усе
   трохи стискаємо — номер лишається читабельним, значки й кнопка просто
   компактніші. */
@media (max-width: 400px) {

	/* Значок телефону лишається: без нього номер губився серед іншого
	   дрібного тексту, а це головний спосіб зв'язку. Місце під нього
	   звільняємо за рахунок значків соцмереж і полів кнопки — вони тут
	   другорядні. */
	.lxd-topbar-tel {
		font-size: 13px;
		gap: 5px;
	}

	.lxd-topbar-tel i {
		font-size: 12px;
	}

	.lxd-topbar-soc {
		gap: 0;
		margin-left: 0;
	}

	/* 24px — мінімальна дотикова ціль за WCAG 2.5.8. Зменшувати нижче
	   не можна, тому місце під значок телефону беремо з проміжків і
	   полів кнопки, а не з розміру значків. */
	.lxd-topbar-soc a,
	.lxd-topbar-soc .lxd-soc-nema {
		width: 24px;
		height: 24px;
		font-size: 12px;
	}

	/* Без заборони переносу напис «Замовити дзвінок» ламався на два
	   рядки й кнопка ставала вищою за сам топбар.

	   Стискаємо кнопку тільки вшир: перша спроба зменшила й вертикальні
	   поля, і висота впала до 23px — нижче за мінімальні 24, та ще й у
	   головної дії топбара. Тепер вузько, але 31px заввишки. */
	.lxd-topbar .lxd-btn-sm {
		padding: 9px 6px;
		font-size: 10.5px;
		letter-spacing: 0;
		white-space: nowrap;
	}

	.lxd-topbar-tel {
		letter-spacing: -0.2px;
	}
}

/* Посилання, яке стоїть окремим абзацом («Подивитись усі авто в
   наявності»), — це самостійна дія, а не згадка в рядку тексту. При
   висоті 19px пальцем у нього важко влучити, тому на телефоні даємо
   йому поле згори й знизу. Посилань усередині речення це не стосується:
   там `:only-child` не спрацює. */
@media (max-width: 900px) {

	.lxd-vmist p > a:only-child {
		display: inline-block;
		padding-top: 11px;
		padding-bottom: 11px;
	}
}

/* ======================================================================
   Мобільний каталог: згорнуті фільтри
   ====================================================================== */

@media (max-width: 900px) {

	/*
	 * Ховаємо вміст фільтрів одразу, ще до того, як спрацює скрипт.
	 *
	 * Раніше правило стосувалося лише `.lxd-vidzhet-vmist` — обгортки, яку
	 * створює скрипт. Виходило так: спершу браузер малював усі фільтри
	 * розгорнутими, а через кілька секунд скрипт їх згортав, і каталог
	 * стрибав під пальцем. На телефоні це давало зсув макета 0,48 —
	 * уп'ятеро більше за припустиме, і саме там, де більшість покупців.
	 *
	 * Тепер вміст схований від першого кадру, а скрипт лише додає
	 * можливість розкрити.
	 */
	.listing-sidebar .widget > *:not(.widgettitle),
	.listing-sidebar .widget .lxd-vidzhet-vmist {
		display: none;
	}

	.listing-sidebar .widget.lxd-vidkryto .lxd-vidzhet-vmist {
		display: block;
	}

	/* Заголовок стає кнопкою: стрілка праворуч показує, що блок
	   розкривається, і повертається, коли він відкритий. */
	.listing-sidebar .widget .lxd-vidzhet-zag {
		position: relative;
		margin: 0;
		padding: 14px 40px 14px 0;
		cursor: pointer;
		user-select: none;
	}

	.listing-sidebar .widget .lxd-vidzhet-zag::after {
		content: "▾";
		position: absolute;
		top: 50%;
		right: 4px;
		color: var(--lxd-muted);
		font-size: 13px;
		transform: translateY(-50%);
		transition: transform 0.18s;
	}

	.listing-sidebar .widget.lxd-vidkryto .lxd-vidzhet-zag::after {
		transform: translateY(-50%) rotate(180deg);
	}

	.listing-sidebar .widget {
		margin-bottom: 10px;
		padding: 0 16px;
	}

	/* Три перемикачі вигляду на телефоні зайві: колонка все одно одна,
	   а «список» і «сітка» на 390px виглядають однаково. */
	.view-icon,
	.catlog-layout {
		display: none !important;
	}
}

/* ======================================================================
   Банери на телефоні: затемнення згори вниз, а не збоку
   ----------------------------------------------------------------------
   На широкому екрані текст лежить ліворуч, авто видно праворуч, і
   затемнення йде зліва направо — так і задумано в макеті. На телефоні
   текст займає всю ширину, тобто заходить на праву частину, де
   затемнення майже немає: рядки лягають прямо на світлий кузов і
   перестають читатися.

   Тому на вузьких екранах міняємо напрямок — темніше згори, де текст,
   і прозоріше знизу, де лишається видно машину.
   ====================================================================== */

@media (max-width: 900px) {

	/* Заміряно на знімку: підзаголовок перетинає світлу фару, і в
	   найгіршій точці контраст падав до 4.42 при нормі 4.5. Тримаємо
	   верхні дві третини майже непрозорими — саме там лежить текст, —
	   а низ лишаємо світлішим, щоб машину було видно. */
	.lxd-hero-foto::after {
		background: linear-gradient(
			180deg,
			#08090af7 0%,
			#08090af2 55%,
			#08090ad9 72%,
			#08090a73 100%
		);
	}

	/* Смуга-заголовок сторінок і каталогу: маска збоку тут теж не
	   працює, а прозорість 0.55 лишає фото надто помітним під текстом. */
	.lxd-page-hero-foto {
		opacity: 0.4;
		-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
	}
}

/* ======================================================================
   Ієрархія заголовків на телефоні
   ----------------------------------------------------------------------
   Заміряно на живій сторінці: h1 давав 34px, а h2 — то 26, то 23,
   залежно від того, який клас на ньому стоїть. Тобто один рівень
   заголовків виглядав двома різними, і сторінка читалась як набір
   уривків, а не як одне ціле.

   Заголовки колонок підвалу (h4) виходили 16px — рівно як h3 карток
   послуг. Нижчий рівень має бути помітно меншим, інакше око не бачить,
   що це підпорядкований заголовок.
   ====================================================================== */

@media (max-width: 900px) {

	.lxd-chomu-zag,
	.lxd-zag-z-ryskoyu,
	.lxd-pro-nas-tekst h2,
	.lxd-cta-tekst h2 {
		font-size: 24px;
	}

	.lxd-footer h4 {
		font-size: 14px;
		letter-spacing: 0.4px;
		text-transform: uppercase;
	}
}

/* Поля фільтра на телефоні: Select2 малює їх 33px заввишки — вище
   мінімальних 24, але для пальця замало. Доводимо до 44. */
@media (max-width: 900px) {

	.listing-sidebar .select2-selection--single,
	.listing-sidebar .select2-selection {
		height: 44px !important;
	}

	.listing-sidebar .select2-selection--single .select2-selection__rendered {
		line-height: 42px !important;
	}

	.listing-sidebar .select2-selection--single .select2-selection__arrow {
		height: 42px !important;
	}
}

/* ======================================================================
   Сторінки, зібрані в Elementor
   ----------------------------------------------------------------------
   Elementor будує власну сітку на всю ширину екрана. Наш вузький
   контейнер стискав би її вдвічі — і сторінка виглядала б не так, як у
   редакторі. Тому вміст іде без обгортки, а поля дає сам Elementor.

   Смуга-заголовок і підвал лишаються нашими: без них сторінка втрачає
   h1 і читається як чужа на сайті.
   ====================================================================== */

.lxd-elementor-vmist {
	position: relative;
	padding: 44px 0;
}

/* Типографіка всередині лишається наша — Elementor свою не нав'язує,
   якщо в блоці не задано інше.

   `text-transform: none` тут обов'язковий: тема ставить заголовкам
   `capitalize`, і українською це дає «Прямий Ефір» замість «Прямий
   ефір». Англійською такий стиль звичний, у нас читається як помилка. */
.lxd-elementor-vmist h1,
.lxd-elementor-vmist h2,
.lxd-elementor-vmist h3,
.lxd-elementor-vmist h4,
.lxd-elementor-vmist h5,
.lxd-elementor-vmist h6,
.lxd-elementor-vmist .elementor-heading-title,
.lxd-elementor-vmist .elementor-icon-box-title,
.lxd-elementor-vmist .elementor-icon-box-title span,
.lxd-elementor-vmist .elementor-button-text {
	text-transform: none;
}

.lxd-elementor-vmist h1,
.lxd-elementor-vmist h2,
.lxd-elementor-vmist h3,
.lxd-elementor-vmist h4 {
	color: #fff;
}

.lxd-elementor-vmist p,
.lxd-elementor-vmist li {
	color: var(--lxd-muted);
	line-height: 1.7;
}

.lxd-elementor-vmist a {
	color: var(--lxd-red-text);
}

/* ======================================================================
   Вкладки в картці авто
   ----------------------------------------------------------------------
   Заміряно на живій сторінці: неактивна вкладка («Розташування») мала
   колір rgb(28, 30, 34) на тлі rgb(17, 19, 20) — контраст 1.12, тобто
   напис зливався з фоном і його майже не було видно. Активна
   («Опції та комплектація») давала 3.51 при нормі 4.5.

   Це кольори теми під світле тло: там темно-сірий на білому читався
   добре. На нашому тлі потрібні зворотні.
   ====================================================================== */

.car-tabs .nav-tabs > li > a,
.nav-tabs > li.features_tab > a,
.nav-tabs > li.location_tab > a,
.nav-tabs > li > a {
	/* Світліше за звичайний приглушений текст: це не підпис, а пункт,
	   на який тиснуть, і його треба помітити з першого погляду.
	   Контраст 11.6 замість 6.6. */
	color: #d4d4d4 !important;
	font-size: 15px;
	font-weight: 500;
}

/* `!important` тут не примха: тема фарбує сам `<li>` правилом, яке важить
   більше за наше, і без нього пункт лишався кольору rgb(28, 30, 34) —
   контраст 1.12 на нашому тлі. */
.car-tabs .nav-tabs > li,
.nav-tabs > li.features_tab,
.nav-tabs > li.location_tab {
	color: #d4d4d4 !important;
}

/* Активна вкладка — білим, а не червоним.

   Червоний давав 5.12: норму проходить, але поруч зі світло-сірими
   сусідами читався тьмяніше за них, тобто виглядав слабшим за
   неактивні. Білий дає 18.4 і одразу видно, де ти зараз. Червону роль
   бере на себе смужка під написом — колір лишається фірмовим, але не
   коштує читабельності. */
.car-tabs .nav-tabs > li.active,
.car-tabs .nav-tabs > li.active > a,
.nav-tabs > li.active,
.nav-tabs > li.active > a,
.nav-tabs > li.features_tab.active,
.nav-tabs > li.features_tab.active > a {
	color: #fff !important;
	font-weight: 700;
}

.car-tabs .nav-tabs > li.active > a,
.nav-tabs > li.active > a {
	position: relative;
	border-bottom: 2px solid var(--lxd-red) !important;
}

/* Значок перед написом успадковує колір від `<li>`, а не від посилання —
   без цього правила він лишався б темним навіть зі світлим написом. */
.car-tabs .nav-tabs > li > a i,
.nav-tabs > li > a i {
	color: inherit !important;
}

.nav-tabs > li:hover > a,
.car-tabs .nav-tabs > li:hover > a {
	color: #fff !important;
}

/* ======================================================================
   Кнопка «нагору»
   ----------------------------------------------------------------------
   Автомобіль замість звичайної стрілки — так було на сайті раніше, і це
   впізнаваний знак саме для автосалону. З'являється після першого
   екрана, ховається на самому верху.
   ====================================================================== */

.lxd-nagoru {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	padding: 0;
	border: 1px solid var(--lxd-line);
	border-radius: 50%;
	background: rgba(17, 19, 20, 0.92);
	cursor: pointer;
	/* Схована, поки не потрібна: не забираємо подій і не блимаємо. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.2s, transform 0.2s, visibility 0.2s, border-color 0.2s;
}

.lxd-nagoru.lxd-vydno {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.lxd-nagoru:hover,
.lxd-nagoru:focus-visible {
	border-color: var(--lxd-red);
	transform: translateY(-3px);
}

.lxd-nagoru img {
	display: block;
	width: 42px;
	height: auto;
}

@media (max-width: 900px) {

	/* На телефоні тримаємо ближче до кута — там кожен піксель на рахунку,
	   а великий палець дістає саме до низу праворуч. */
	.lxd-nagoru {
		right: 14px;
		bottom: 14px;
		width: 60px;
		height: 60px;
	}

	.lxd-nagoru img {
		width: 38px;
	}
}

/* ---------------------------------------------------------------------------
 * Секція «Чому купують у нас» зібрана в Elementor
 *
 * Її вміст правиться в конструкторі, а не в коді — заради цього головну й
 * переносили. Але контейнер Elementor тримає власну максимальну ширину:
 * текст починався зі 128 пікселів замість 32 і виглядав вужчим за решту
 * сторінки. Повертаємо йому ту саму ширину, що дає наш `.lxd-container`.
 * ------------------------------------------------------------------------- */

.lxd-chomu > .e-con-inner {
	width: min(var(--lxd-shyryna), calc(100% - 120px));
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* ---------------------------------------------------------------------------
 * Картка авто: резервуємо місце під те, що з'являється пізно
 *
 * Виміри в DevTools показали зсув макета 0.232 — учетверо більше за норму.
 * Причина не одна: секція картки росте трьома стрибками з 1173 до 2281
 * пікселя вже після того, як людина почала читати. Найбільше додають
 * карусель «схожі авто», що до ініціалізації має нульову висоту, і наш
 * власний рядок дій, куди скрипт дописує кнопку «Хочу це авто» та блок
 * з телефоном.
 *
 * Тому місце під них тримаємо заздалегідь. Це не прискорює завантаження,
 * зате сторінка перестає стрибати під курсором.
 * ------------------------------------------------------------------------- */

.owl-carousel.related-vehicle {
	min-height: 450px;
}

/*
 * Головна галерея авто — саме вона й дає більшу частину зсуву.
 *
 * У розмітці 18 великих зображень без width і height, і найбільше з них —
 * фото 800×535 у слайдері. Поки воно не завантажилось, місця під нього
 * немає, і коли слайдер оживає, уся сторінка стрибає вниз під курсором.
 *
 * Тримаємо співвідношення сторін заздалегідь: висота відома ще до того,
 * як прийде перший байт зображення.
 */
.slider-for.detail-big-car-gallery,
.my-gallery.cars-image-gallery > .slider-for {
	aspect-ratio: 800 / 535;
}

.details-nav {
	min-height: 122px;
}

@media (max-width: 991px) {
	.owl-carousel.related-vehicle {
		min-height: 380px;
	}
	.details-nav {
		min-height: 150px;
	}
}

/* ---------------------------------------------------------------------------
 * Верхня панель каталогу: тримаємо висоту до появи випадних списків
 *
 * Сортування й «скільки показувати» тема оформлює через select2. На
 * повільному телефоні той оживає аж на восьмій секунді: рідні поля
 * ховаються, замість них стають вищі — і список авто зсувається вниз уже
 * після того, як людина почала гортати. DevTools показував це як стрибок
 * 0,15 із двох таких полів.
 *
 * Задаємо обгорткам ту саму висоту, яку матиме готовий список, тож заміна
 * відбувається безшовно.
 * ------------------------------------------------------------------------- */

.cars-top-filters-box .selected-box {
	min-height: 40px;
}

.cars-top-filters-box .selected-box > .select,
.cars-top-filters-box .selected-box > select {
	min-height: 40px;
}

/* ---------------------------------------------------------------------------
 * Кнопки Elementor у наших секціях
 *
 * Секції головної зібрані в конструкторі, щоб їх можна було правити мишею.
 * Але віджет-кнопка малює власну розмітку `<a class="elementor-button">`, і
 * наш клас на неї не потрапляє — він лягає на обгортку.
 *
 * Тому просто вчимо кнопку Elementor виглядати як наша: усередині секцій
 * головної вона бере ті самі кольори, розміри й поведінку. Так менеджер
 * редагує звичайний віджет, а на сайті бачить звичну кнопку.
 * ------------------------------------------------------------------------- */

.lxd-hero .elementor-button,
.lxd-cta .elementor-button,
.lxd-cta-sekciya .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 30px;
	border-radius: 4px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background .2s, color .2s, border-color .2s;
}

.lxd-hero .elementor-button,
.lxd-cta .elementor-button,
.lxd-cta-sekciya .elementor-button {
	background: var(--lxd-red);
	color: #fff;
}

.lxd-hero .elementor-button:hover,
.lxd-cta .elementor-button:hover,
.lxd-cta-sekciya .elementor-button:hover {
	background: #a8161f;
	color: #fff;
}

/* друга кнопка банера — з обведенням */
.lxd-hero-dii .elementor-widget:nth-child(2) .elementor-button {
	background: transparent;
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
}

.lxd-hero-dii .elementor-widget:nth-child(2) .elementor-button:hover {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
}

/* ряд кнопок банера */
.lxd-hero-dii {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* плитки послуг лишаються сіткою, коли їх збирає конструктор */
.lxd-poslugy > .e-con,
.lxd-poslugy > .elementor-element {
	display: flex;
	flex-direction: column;
}

/* ---------------------------------------------------------------------------
 * Наші секції, зібрані конструктором, — без його власних відступів
 *
 * Контейнер Elementor типово додає по 10 пікселів з боків і згори. На
 * секціях, які мають власні відступи в макеті, це збиває ширину рядків на
 * 20 пікселів і робить сторінку на чверть екрана вищою. Оскільки всі ці
 * блоки вже мають свої класи (`lxd-container`, `lxd-hero`, `lxd-cta` тощо),
 * власні відступи конструктора тут зайві.
 * ------------------------------------------------------------------------- */

/*
 * Обнуляємо відступи лише там, де в макеті їх і не було. Класи з власними
 * полями — `.lxd-posluga`, `.lxd-cta`, `.lxd-sekciya`, `.lxd-hero-vmist` —
 * не чіпаємо: спершу я обнулив і їх, і плитки послуг схудли зі 225 до 145
 * пікселів, а сторінка стала на чверть екрана нижчою.
 */
.lxd-container.e-con,
.lxd-pro-nas.e-con,
.lxd-pro-nas-vmist.e-con,
.lxd-pro-nas-tekst.e-con,
.lxd-sekciya-shapka.e-con,
.lxd-hero.e-con,
.lxd-hero-dii.e-con,
.lxd-cta-sekciya.e-con,
.lxd-cta-tekst.e-con,
.lxd-poslugy.e-con {
	padding: 0;
}

.lxd-container.e-con > .e-con-inner,
.lxd-hero.e-con > .e-con-inner,
.lxd-pro-nas.e-con > .e-con-inner,
.lxd-cta-sekciya.e-con > .e-con-inner {
	padding: 0;
}

.lxd-hero .elementor-widget,
.lxd-sekciya .elementor-widget,
.lxd-pro-nas .elementor-widget,
.lxd-cta-sekciya .elementor-widget {
	margin-bottom: 0;
}

/*
 * Перший екран: повітря згори й знизу.
 *
 * `.lxd-hero-vmist` має свої `70px 0`, але контейнер конструктора несе
 * заразом клас `lxd-container`, а правило обнулення відступів написане як
 * `.lxd-container.e-con` — два класи проти одного, тож воно перемагало.
 * Через це заголовок «Знайдіть своє ідеальне авто» прилипав до шапки, а
 * весь перший екран здавався зсунутим угору.
 */
.lxd-hero .lxd-hero-vmist.e-con {
	padding-top: 70px;
	padding-bottom: 70px;
}

/*
 * І центруємо вміст по висоті.
 *
 * `.lxd-hero` має `align-items: center` ще з власної розмітки, де блок був
 * рядком — там це означало «вирівняти по середині висоти». Контейнер
 * конструктора завжди стовпець, і в стовпці той самий рядок центрує вже по
 * горизонталі, а за висоту відповідає `justify-content`, якого не було.
 * Тому текст висів угорі, а під кнопками лишалося 182 пікселі порожнечі.
 */
.lxd-hero.e-con {
	justify-content: center;
}

@media (max-width: 767px) {

	.lxd-hero .lxd-hero-vmist.e-con {
		padding-top: 46px;
		padding-bottom: 46px;
	}
}

/*
 * Іконка плитки послуги.
 *
 * Правило писалося як `.lxd-posluga > i` — на власну розмітку, де іконка
 * була прямою дитиною. У конструкторі вона лежить усередині віджета, тож
 * до неї це вже не діставало: іконки стали білі та вдвічі дрібніші, хоча
 * мали бути червоні. Стрілку «Детальніше» не чіпаємо — у неї свій розмір.
 */
.lxd-posluga .elementor-widget-html:first-child i {
	display: block;
	margin-bottom: 16px;
	color: var(--lxd-red);
	font-size: 28px;
}

/*
 * Рівний низ у плиток.
 *
 * Описи різної довжини — у когось два рядки, у когось три, — і посилання
 * «Детальніше» ставали сходинкою. У власній розмітці це вирішував
 * `.lxd-posluga p { flex: 1 }`, але у конструкторі абзац лежить усередині
 * віджета, і тягнутися має саме віджет.
 */
.lxd-posluga .elementor-widget-text-editor {
	flex: 1 1 auto;
}

.lxd-posluga .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/*
 * Клікабельна плитка.
 *
 * У власній розмітці вся плитка була одним посиланням. Конструктор зробив із
 * неї контейнер, а «Детальніше» лишилось звичайним написом — тобто послуга
 * взагалі нікуди не вела, хоча стрілка натякала на перехід. Посилання
 * повернули в самому написі, а тут розтягуємо його на всю плитку: клік у
 * будь-якому місці працює, і при цьому в розмітці лишається одне посилання
 * з нормальним текстом — так його прочитають і пошуковик, і читач екрана.
 */
.lxd-posluga {
	position: relative;
}

.lxd-posluga-dali {
	color: var(--lxd-red);
	text-decoration: none;
	font-weight: 600;
}

/*
 * Накладка міряється від найближчого позиційованого предка, а конструктор
 * ставить `position: relative` кожному віджету — тож без цього рядка вона
 * розтягувалась лише на сам напис «Детальніше», і клік по решті плитки
 * нікуди не вів.
 */
.lxd-posluga .elementor-widget-html:last-child {
	position: static;
}

.lxd-posluga-dali::after {
	content: "";
	position: absolute;
	inset: 0;
}

.lxd-posluga:hover .lxd-posluga-dali {
	text-decoration: underline;
}

/*
 * Повітря між секціями.
 *
 * «Про нас» і блок «Не знайшли потрібне авто?» лишились геть без
 * вертикальних відступів — вони йшли одразу за попередньою секцією, і на
 * сторінці це читалось як злиплі блоки.
 */
.lxd-pro-nas.e-con,
.lxd-cta-sekciya.e-con {
	padding-top: 64px;
	padding-bottom: 64px;
}

@media (max-width: 767px) {

	.lxd-pro-nas.e-con,
	.lxd-cta-sekciya.e-con {
		padding-top: 42px;
		padding-bottom: 42px;
	}
}

/*
 * Кнопка в блоці заклику.
 *
 * Текст ліворуч розтягувався на всю вільну ширину і виштовхував кнопку за
 * праву межу рамки — вона визирала на вісім пікселів. Даємо кнопці не
 * стискатися, а тексту — поступитися.
 */
.lxd-cta {
	gap: 24px;
}

.lxd-cta-tekst {
	flex: 1 1 auto;
	min-width: 0;
}

.lxd-cta .lxd-btn,
.lxd-cta .elementor-widget-button {
	flex: 0 0 auto;
}

/*
 * Шапка секції в конструкторі.
 *
 * `.lxd-sekciya-shapka` розрахована на рядок: заголовок ліворуч, посилання
 * «Переглянути всі» праворуч, обидва притиснуті до низу — звідси
 * `align-items: flex-end`. У звичайному `<div>` напрямок рядка типовий, тож
 * писати його не було потреби.
 *
 * Контейнер Elementor натомість завжди `flex-direction: column`. У стовпці
 * `align-items: flex-end` означає вже не «по низу», а «до правого краю» — і
 * заголовок «Чим ми можемо допомогти» поїхав у правий кут, лишивши риску
 * під собою на місці. Тому напрямок задаємо явно.
 */
.lxd-sekciya-shapka.e-con {
	flex-direction: row;
	flex-wrap: nowrap;
}

.lxd-sekciya-shapka.e-con > .e-con-inner {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
}

@media (max-width: 767px) {

	.lxd-sekciya-shapka.e-con,
	.lxd-sekciya-shapka.e-con > .e-con-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

/*
 * Розмір заголовків секцій у конструкторі.
 *
 * Секції, зібрані власною розміткою, беруть `.lxd-zag-z-ryskoyu` — 27px.
 * Ті самі секції, перекладені на віджети Elementor, беруть заголовок із
 * налаштувань теми, а там h2 — 48px. На одній сторінці виходило два
 * розміри: «Чим ми можемо допомогти» удвічі більше за «Популярні
 * автомобілі», хоча це рівнозначні заголовки сусідніх секцій.
 *
 * Зрівнюємо: у наших блоках заголовок Elementor виглядає так само, як
 * власний.
 */
.lxd-sekciya-shapka .elementor-widget-heading .elementor-heading-title,
.lxd-chomu .elementor-widget-heading .elementor-heading-title,
.lxd-pro-nas-tekst .elementor-widget-heading .elementor-heading-title,
.lxd-cta-tekst .elementor-widget-heading .elementor-heading-title {
	font-size: 27px;
	font-weight: 700;
	line-height: 1.25;
}

/* Назви послуг у плитках — підзаголовки, а не заголовки секцій. */
.lxd-posluga .elementor-widget-heading .elementor-heading-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

/* Заголовок першого екрана лишається великим — він тут головний. */
.lxd-hero .elementor-widget-heading .elementor-heading-title {
	font-size: 56px;
	font-weight: 700;
	line-height: 1.1;
}

@media (max-width: 767px) {

	.lxd-sekciya-shapka .elementor-widget-heading .elementor-heading-title,
	.lxd-chomu .elementor-widget-heading .elementor-heading-title,
	.lxd-pro-nas-tekst .elementor-widget-heading .elementor-heading-title,
	.lxd-cta-tekst .elementor-widget-heading .elementor-heading-title {
		font-size: 23px;
	}

	.lxd-hero .elementor-widget-heading .elementor-heading-title {
		font-size: 34px;
	}
}

/* ---------------------------------------------------------------------------
 * Дві поправки для секцій, зібраних конструктором
 *
 * Контейнер Elementor завжди flex і завжди в стовпчик. Для «Заклику до дії»
 * це ламало макет: іконка, текст і кнопка ставали одна під одною замість
 * одного рядка.
 *
 * Друге — фонове фото в «Про нас». Воно позиціюється абсолютно від секції,
 * але віджет HTML обгортає його у власний контейнер, і фото починало
 * рахувати координати від тієї обгортки, а не від секції. Тому обгортку
 * робимо прозорою для позиціювання.
 * ------------------------------------------------------------------------- */

.lxd-cta.e-con {
	flex-direction: row;
	align-items: center;
}

.lxd-pro-nas .elementor-widget-html,
.lxd-pro-nas .elementor-widget-html .elementor-widget-container,
.lxd-hero .elementor-widget-html,
.lxd-hero .elementor-widget-html .elementor-widget-container {
	position: static;
}

/* «Про нас»: текст праворуч від фото, як у макеті */
.lxd-pro-nas-vmist.e-con {
	flex-direction: row;
	justify-content: flex-end;
}

.lxd-pro-nas-tekst.e-con {
	flex: 0 1 auto;
}

/* напис на кнопці не переносимо — «Залишити заявку» в один рядок */
.lxd-cta .elementor-button,
.lxd-hero .elementor-button {
	white-space: nowrap;
}

/* кнопки банера — в один рядок, кожна по своєму вмісту */
.lxd-hero-dii.e-con {
	flex-direction: row;
	align-items: center;
	width: auto;
}

.lxd-hero-dii.e-con > .elementor-widget {
	width: auto;
}

/* ---------------------------------------------------------------------------
 * Вхід для персоналу в підвалі
 *
 * Це посилання не для покупців, тож воно приглушене: помітне тому, хто його
 * шукає, і не відтягує уваги від «Контактів» і «Послуг» поруч. Тому, хто вже
 * увійшов, на його місці показується «Панель керування».
 * ------------------------------------------------------------------------- */

.lxd-vhid-personal {
	opacity: .5;
	font-size: 13px;
	margin-left: 14px;
}

/*
 * Ліворуч, поруч із копірайтом, а не в правому куті.
 *
 * Спершу воно стояло праворуч — і його наполовину накривала кнопка
 * «нагору», що висить у тому самому кутку. На знімку було видно тільки
 * «Вхід для пер…».
 */

.lxd-vhid-personal:hover,
.lxd-vhid-personal:focus-visible {
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Нижній рядок підвалу не ховається під кнопкою «нагору»
 *
 * Кнопка з машинкою висить у правому нижньому куті й накривала останні
 * посилання рядка: спершу «Вхід для персоналу», а коли його перенесли —
 * «Послуги». Видно це було тільки на знімку екрана, у вимірах ширин такого
 * не побачиш.
 * ------------------------------------------------------------------------- */

.lxd-footer-nyz-right {
	padding-right: 92px;
}

@media (max-width: 700px) {
	.lxd-footer-nyz-right {
		padding-right: 0;
		padding-bottom: 78px;
	}
}