/* NIO — вітрина «Авто в наявності» */

.ncar {
	--ncar-ink: #111111;
	--ncar-ink-contrast: #fff; /* текст на залитій кнопці — протилежний до ink */
	--ncar-muted: #6b7280;
	--ncar-accent: #00bebe; /* бренд NIO */
	--ncar-transit: #f5a623;  /* бейдж «У дорозі» */
	--ncar-instock: #2f9e5c;  /* бейдж «В наявності» */
	--ncar-card-bg: #fbfbfb;
	--ncar-border: #e4e4e7;   /* той самий border-токен, що й у nio-specs (тема light) */
	--ncar-line: #ececef;
	font-size: 16px;
	line-height: 1.35;
}

/* ---------- Темна тема (палітра — та сама пара bg/border/line, що й theme_dark у nio-specs) ---------- */
.ncar--dark {
	--ncar-ink: #ededf0;
	--ncar-ink-contrast: #18181b;
	--ncar-muted: #8b8b92;
	--ncar-accent: #c9a25a;
	--ncar-card-bg: #141417;
	--ncar-border: #2a2a2e;
	--ncar-line: #242428;
}
.ncar--dark .ncar__id::after { background: var(--ncar-line); }
.ncar--dark .ncar__carsil path { stroke: rgba(255, 255, 255, .32); }
.ncar--dark .ncar__empty { background: rgba(255, 255, 255, .05); border-color: var(--ncar-border); }

/* ---------- Скруглені кути — для сторінок ONVO (NIO лишається гострим). Комбінується з --dark незалежно. ---------- */
.ncar--rounded .ncar__row { border-radius: 15px; }
.ncar--rounded a.ncar__btn { border-radius: 7px; }
.ncar--rounded .ncar__empty { border-radius: 15px; }


.ncar__list { display: flex; flex-direction: column; gap: 14px; }

.ncar__empty {
	margin: 0;
	padding: 28px 26px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(128, 128, 128, .22);
	text-align: center;
	font-size: clamp(15px, 1.6vw, 18px);
	line-height: 1.5;
	/* Цвет берём из темы САМОГО шорткода, а не наследуем от страницы.
	   С `inherit` сообщение подхватывало цвет текста секции Elementor: на
	   страницах моделей он белый, поэтому при theme="light" текст оказывался
	   белым на светлом фоне и был не виден. --ncar-ink даёт #111 в светлой
	   теме и #ededf0 в тёмной — ровно то, для чего темы и заводились. */
	color: var(--ncar-ink);
}

/* ---------- Панель «Дивитись усі» — CSS grid-rows 0fr -> 1fr, без JS-вимірювання висоти.
   Жодних власних відступів у .reveal-inner: єдине джерело відстані між УСІМА рядками
   (видимими й прихованими) — те саме gap:14px, що й у .ncar__list, тому стику не видно. ---------- */
.ncar__reveal {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .7s cubic-bezier(.16, 1, .3, 1);
}
.ncar__reveal.is-open { grid-template-rows: 1fr; }
.ncar__reveal-inner {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 14px;
	/* Запас зверху під overflow:hidden — інакше підйом картки при наведенні (translateY(-4px))
	   зрізається верхньою межею цього контейнера, особливо в найпершого рядка панелі.
	   Від'ємний margin компенсує padding, щоб позиція вмісту в спокої лишилась незмінною. */
	padding-top: 6px;
	margin-top: -6px;
}
/* кожна карта в панелі має власну затримку через --d (порядковий номер, задається inline) */
.ncar__reveal .ncar__row {
	opacity: 0;
	transform: translateY(-22px);
	transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
	transition-delay: calc(var(--d, 0) * 85ms);
}
.ncar__reveal.is-open .ncar__row {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.ncar__reveal, .ncar__reveal .ncar__row { transition-duration: .01s; transition-delay: 0s !important; }
}

/* Лінія над кнопкою — той самий прийом, що й у віджеті NIO Counter (nio-cnt__line):
   overflow:hidden обгортка + scaleX(0)→scaleX(1), transform-origin:left, 700ms.
   Тут логіка навпаки: лінія ПОВНА в згорнутому стані і стискається в 0, коли список розкрито
   (клас is-drawn знімається/додається тим самим кліком, що розгортає/згортає картки). */
.ncar__toggle-line-wrap {
	width: 0; /* JS виставляє точну ширину = ширині кнопки (текст + іконка) */
	margin: 34px auto 0;
	overflow: hidden;
}
.ncar__toggle-line {
	display: block;
	width: 100%;
	height: 1px;
	background: var(--ncar-ink);
	opacity: .5;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 700ms cubic-bezier(.4, 0, .2, 1);
}
.ncar__toggle-line-wrap.is-drawn .ncar__toggle-line { transform: scaleX(1); }

/* «Дивитись усі»: мінімалістичне CTA без рамки/фону — текст по центру, +/− праворуч. */
.ncar__toggle {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	width: auto;
	margin: 16px auto 0; padding: 0;
	background: none; border: none;
	color: var(--ncar-ink); font: inherit; font-size: 18px; font-weight: 500; letter-spacing: .01em;
	cursor: pointer;
}
.ncar__toggle-text { white-space: nowrap; }
.ncar__toggle-ic { flex: 0 0 auto; color: var(--ncar-ink); align-self: center; }
.ncar__toggle-v { transition: opacity .18s ease; transform-origin: center; }
.ncar__toggle[aria-expanded="true"] .ncar__toggle-v { opacity: 0; }

/* Градієнт сторінки (підхоплений так само, як у nio_specs) — фарбує лінію і текст кнопки.
   Іконка +/− фарбується не тут, а SVG-градієнтом у розмітці (stroke="url(#...)"). */
.ncar--tgrad .ncar__toggle-line { background: var(--ncar-toggle-grad); opacity: 1; }
.ncar--tgrad .ncar__toggle-text {
	background: var(--ncar-toggle-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- Картка (усі кути гострі, однакова висота) ---------- */
.ncar__row {
	display: grid;
	grid-template-columns: minmax(240px, 2.3fr) minmax(95px, .55fr) minmax(88px, .4fr) minmax(130px, .55fr);
	align-items: center;
	column-gap: 16px;
	min-height: 128px;
	background: var(--ncar-card-bg);
	border: 1px solid var(--ncar-border);
	padding: 18px 26px;
	color: var(--ncar-ink);
	transition: transform .25s ease, border-color .25s ease;
	will-change: transform;
}
/* Рамка при наведенні — колір статусу цього рядка (--ncar-status-color). */
@media (hover: hover) {
	.ncar__row:hover {
		transform: translateY(-4px);
		border-color: var(--ncar-status-color, var(--ncar-accent));
	}
	/* .ncar__reveal.is-open .ncar__row (3 класи) специфічніше за .ncar__row:hover (клас+псевдоклас) —
	   без цього правила transform:translateY(0) "усталеного" стану переможе над підйомом при наведенні
	   саме на картках, що виїхали через "Дивитись усі". */
	.ncar__reveal.is-open .ncar__row:hover { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
	.ncar__row { transition: border-color .2s ease; }
	.ncar__row:hover { transform: none; }
}

/* -- ліва частина: значок + назва + характеристики + колір -- */
.ncar__id {
	display: flex; align-items: center; gap: 40px; min-width: 0;
	position: relative;
	align-self: stretch; /* на всю висоту рядка грід-контейнера — риска рахує 90% САМЕ від плашки */
}

/* Тонка вертикальна риска праворуч від значка — 90% висоти всієї плашки, по центру.
   Відступ від значка до риски (26px) дорівнює відступу від краю плашки до значка
   (== padding-left рядка .ncar__row: 26px). */
.ncar__id::after {
	content: "";
	position: absolute;
	top: 5%; bottom: 5%;
	left: calc(40px + 26px);
	width: 1px;
	background: rgba(20, 24, 31, .14);
}

/* color: var(--ncar-ink) — щоб інлайн-логотип бренду (fill:currentColor) сам ставав світлим на темній темі */
.ncar__markbox { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--ncar-ink); }
.ncar__mark { width: 100%; height: 100%; object-fit: contain; display: block; border: 0; outline: 0; }
.ncar__markbrand { width: 100%; height: 100%; object-fit: contain; display: block; }
.ncar__markbrand path { fill: currentColor; }
.ncar__nameblock { min-width: 0; }
.ncar__name { display: block; font-weight: 700; color: var(--ncar-ink); overflow-wrap: anywhere; }
.ncar__specs { margin-top: 4px; font-size: 14px; color: var(--ncar-muted); }
.ncar__specs-dot {
	display: inline-block;
	width: 4px; height: 4px;
	margin: 0 7px;
	border-radius: 50%;
	background: currentColor;
	opacity: .65;
	vertical-align: middle;
}

.ncar__color { display: inline-flex; width: fit-content; max-width: 100%; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; color: var(--ncar-ink); cursor: default; }

/* Колір — силует авто (не кружечок), перефарбовується через --ncar-dot на цій обгортці. */
.ncar__dot { flex: 0 0 auto; display: inline-flex; align-items: center; }
.ncar__carsil { width: 42px; height: auto; display: block; }
/* Тонка обводка завжди — інакше білий/світлий колір авто губиться на фоні плашки. */
.ncar__carsil path {
	fill: var(--ncar-dot, #c9ccd1);
	stroke: rgba(0, 0, 0, .22);
	stroke-width: 1.4px;
	paint-order: fill;
}

/* -- колонка «Ціна»: лише гривня (основна) + долар. Трохи підтягнута ближче до назви (лише вона, не «В наявності»/кнопки). -- */
.ncar__price { display: flex; flex-direction: column; gap: 4px; margin-left: -16px; }
.ncar__uah { font-weight: 700; font-size: 19px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ncar__uah--none { color: var(--ncar-muted); font-weight: 500; font-size: 15px; line-height: 1.25; white-space: normal; }
.ncar__usd { font-size: 14px; color: var(--ncar-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* -- колонка «В наявності / У дорозі»: бейдж + все, що стосується очікування/дати/міста -- */
.ncar__avail { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: default; }
.ncar__avail .ncar__status { align-items: center; text-align: center; }
.ncar__status { display: flex; flex-direction: column; font-size: 12px; font-weight: 500; color: var(--ncar-ink); }
.ncar__status-date { margin-top: 2px; }

/* Бейдж статусу — трохи скруглений (не гострий, не пігулка) */
.ncar__badge {
	display: inline-flex; align-items: center;
	padding: 3px 12px;
	border-radius: 6px;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
	white-space: nowrap;
}
.ncar__badge--transit { background: var(--ncar-transit); }
.ncar__badge--instock { background: var(--ncar-instock); }

/* -- права частина: кнопка + «Детальніше» — центровані по вертикалі відносно всієї плашки -- */
.ncar__side { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 10px; }

/* Залита за замовчуванням, контурна при наведенні (навпаки типового патерну). */
.ncar a.ncar__btn {
	display: inline-block;
	background: var(--ncar-ink);
	border: 1.5px solid var(--ncar-ink);
	padding: 9px 24px;
	font-weight: 600;
	color: var(--ncar-ink-contrast);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .18s ease, color .18s ease;
}
.ncar a.ncar__btn:hover,
.ncar a.ncar__btn:focus-visible {
	background: transparent;
	color: var(--ncar-ink) !important;
}

.ncar .ncar__more {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ncar-ink);
	text-decoration: none;
}
.ncar__more-ic { transition: transform .18s ease; }
.ncar a.ncar__more:hover .ncar__more-ic,
.ncar a.ncar__more:focus-visible .ncar__more-ic { transform: translateX(4px); }

/* ---------- Мобільні/планшет: 2 рядки — [лого+назва | статус], [ціна | кнопки] ---------- */
@media (max-width: 1050px) {
	.ncar__row {
		grid-template-columns: repeat(5, 1fr);
		grid-template-areas:
			"id    id    id    id    avail"
			"price price price side  side";
		column-gap: 20px;
		row-gap: 16px;
		align-items: center;
		padding: 18px 22px;
	}
	.ncar__id    { grid-area: id; }
	.ncar__avail { grid-area: avail; align-items: flex-end; text-align: right; }
	.ncar__avail .ncar__status { align-items: flex-end; text-align: right; }
	.ncar__price { grid-area: price; margin-left: 0; }
	.ncar__side  { grid-area: side; flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px; width: auto; align-self: center; }
}

/* ---------- Вузькі екрани: лого менше, колір і статус — в один рядок ----------
   .ncar__id і .ncar__nameblock "розчиняються" (display:contents), тож їхні діти
   (значок, назва, характеристики, колір) стають прямими елементами грід-рядка —
   і колір можна поставити в один рядок разом зі статусом. */
@media (max-width: 650px) {
	.ncar__row {
		/* minmax(0, …) — без цього трек не стискається нижче ширини свого вмісту (класична
		   грід-пастка), і overflow-wrap:anywhere у .ncar__name просто не встигає спрацювати. */
		grid-template-columns: 30px minmax(0, 1fr);
		grid-template-areas:
			"mark     name"
			"mark     specs"
			"mark     colorstat"
			"pricebtn pricebtn";
		column-gap: 17px;
		row-gap: 8px;
		padding-left: 17px;
		padding-right: 17px;
	}
	.ncar__id, .ncar__nameblock { display: contents; }
	.ncar__id::after { display: none; } /* риска прив'язана до боксу .ncar__id, якого тут вже немає */

	.ncar__markbox { grid-area: mark; width: 30px; height: 30px; align-self: center; }
	.ncar__name    { grid-area: name; min-width: 0; }
	.ncar__specs   { grid-area: specs; min-width: 0; }
	/* Колір і статус — в одній комірці на всю ширину: колір по лівому краю, статус по
	   правому. Відстань між ними сама скорочується при звуженні, статус ніколи не вилазить
	   за правий край картки (justify-self:end прив'язує його саме до цього краю). */
	.ncar__color   { grid-area: colorstat; justify-self: start; margin-top: 0; min-width: 0; max-width: 100%; }
	.ncar__avail   { grid-area: colorstat; justify-self: end; min-width: 0; max-width: 100%; }
	/* Ціна і кнопки — та сама техніка спільної комірки: ціна по лівому краю (впритул до
	   краю картки, під значком), кнопки по правому. Додатковий відступ зверху — інакше
	   зливається з рядком колір/статус. */
	.ncar__price   { grid-area: pricebtn; justify-self: start; margin-top: 10px; }
	.ncar__side    { grid-area: pricebtn; justify-self: end; margin-top: 10px; }

	.ncar__avail {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		text-align: left;
		gap: 10px;
	}
	.ncar__avail .ncar__status { flex-direction: row; align-items: center; text-align: left; gap: 6px; }
	.ncar__status-date { margin-top: 0; }

	.ncar a.ncar__btn { padding: 9px 16px; }
}

/* ---------- Дуже вузько: лишаємо тільки кольоровий бейдж, текст статусу (шоурум/дата) ховаємо ---------- */
@media (max-width: 560px) {
	.ncar__status { display: none; }
}

@media (max-width: 480px) {
	.ncar__row { padding-top: 16px; padding-bottom: 16px; }
}

/* ---------- Найвужче: без лого; ціна в один рядок (грн зліва, $ справа); кнопки окремим рядком ---------- */
@media (max-width: 468px) {
	.ncar__markbox { display: none; }

	.ncar__row {
		grid-template-columns: 1fr;
		grid-template-areas:
			"name"
			"specs"
			"colorstat"
			"price"
			"side";
	}

	.ncar__price {
		grid-area: price;
		justify-self: stretch;
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		width: 100%;
		gap: 10px;
	}
	.ncar__uah { font-size: 22px; }
	.ncar__side {
		grid-area: side;
		justify-self: stretch;
		width: 100%;
		justify-content: space-between;
		margin-top: 10px;
	}

	.ncar a.ncar__btn { font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ПЛИТКА (layout="tile") — вітрина магазину. Лише гострі кути (спільна для
   NIO/ONVO), .ncar--rounded свідомо ігнорується для .ncar--tiles (див. PHP).
   ══════════════════════════════════════════════════════════════════════════ */

.ncar--tiles .ncar__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
@media (max-width: 1400px) {
	.ncar--tiles .ncar__list { gap: 15px; }
}
@media (max-width: 1380px) {
	.ncar--tiles .ncar__list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1070px) {
	.ncar--tiles .ncar__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	.ncar--tiles .ncar__list { grid-template-columns: 1fr; }
}

/* Панель "Дивитись усі" для плитки — та сама grid-rows 0fr→1fr анімація,
   але й сама панель, і внутрішній контейнер — грід (не колонка), щоб виїжджали
   рядками по кілька карток одразу. */
.ncar--tiles .ncar__reveal {
	grid-column: 1 / -1;
}
.ncar--tiles .ncar__reveal-inner {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
	padding-top: 6px;
	margin-top: -6px; /* запас під overflow:hidden для підйому картки при наведенні, див. .ncar__reveal-inner вище */
}
.ncar--tiles .ncar__reveal .ncar__tile {
	opacity: 0;
	transform: translateY(-22px);
	transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
	transition-delay: calc(var(--d, 0) * 85ms);
}
.ncar--tiles .ncar__reveal.is-open .ncar__tile {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.ncar--tiles .ncar__reveal .ncar__tile { transition-duration: .01s; transition-delay: 0s !important; }
}

/* ---------- Картка-плитка ---------- */
.ncar__tile {
	background: var(--ncar-card-bg);
	border: 1px solid var(--ncar-border);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	color: var(--ncar-ink);
	transition: transform .25s ease, border-color .25s ease;
	will-change: transform;
}
@media (hover: hover) {
	.ncar__tile:hover { transform: translateY(-5px); border-color: var(--ncar-status-color, var(--ncar-accent)); }
}
@media (prefers-reduced-motion: reduce) {
	.ncar__tile { transition: border-color .2s ease; }
	.ncar__tile:hover { transform: none; }
}

/* Фото: реальне фото авто (post thumbnail). Віньєтка йде по ВСЬОМУ контуру (не лише знизу) і
   вигасає РІВНО у var(--ncar-card-bg) — той самий колір, що й тіло картки нижче, тому шва між
   фото й тілом не видно з жодного боку. Додатково підсилена знизу (окремий лінійний шар) — там
   лежить назва/комплектація, їй потрібна гарантована контрастність. Колір тексту й лого поверх
   фото — теж токени (var(--ncar-ink)), а не хардкод #fff, інакше на світлій темі (де
   --ncar-card-bg білий) білий текст/лого стане нечитабельним. */
.ncar__tile-photo {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ncar-card-bg);
	cursor: pointer;
}
/* Прозоре посилання на всю площу фото — клік по фото веде туди ж, куди «Переглянути».
   z-index 3: вище за назву (2) і лого/бейдж (2), але підказка .ncar__tip (fixed, 1000)
   і виїзд підкладки лишаються поверх. */
.ncar__tile-link { position: absolute; inset: 0; z-index: 3; }
.ncar__tile-link:focus-visible { outline: 2px solid var(--ncar-ink); outline-offset: -3px; }
.ncar__tile-shape {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; display: block;
}
/* Затверджений варіант C (порівняння на /in-stock-demo/): центр віньєту зміщений вгору (20%,
   не 50%), кільце плавно світлішає з 0.67 до 0.52 при наведенні на картку.
   @property потрібен, щоб transition узагалі міг інтерполювати число всередині rgba(),
   а не просто миттєво перемикав — звичайний CSS custom property цього не вміє. */
@property --ncar-ring-a {
	syntax: '<number>';
	inherits: true;
	initial-value: 0.67;
}
.ncar__tile-photo::after {
	content: "";
	position: absolute; inset: 0;
	background:
		linear-gradient(to top, var(--ncar-card-bg) 0%, rgba(6, 6, 7, .67) 20%, transparent 50%),
		radial-gradient(circle at 50% 20%, rgba(0, 0, 0, 0) 0%, rgba(3, 3, 4, var(--ncar-ring-a)) 90%, var(--ncar-card-bg) 100%);
	transition: --ncar-ring-a .35s ease;
}
@media (hover: hover) {
	.ncar__tile:hover .ncar__tile-photo::after { --ncar-ring-a: 0.52; }
}
.ncar__tile-logo {
	position: absolute; top: 14px; left: 14px; z-index: 2;
	width: 28px; height: auto; color: var(--ncar-ink);
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}
.ncar__tile-logo--img { width: 28px; height: 28px; object-fit: contain; }

/* Бейдж і темна підкладка лежать у флекс-рядку з правою межею на фіксованих 14px. В спокої
   підкладки не видно (max-width:0), тому бейдж стоїть сам у верхньому правому куті — як і
   раніше. При наведенні на картку max-width підкладки росте до заввідомо великої межі, але
   фактично зупиняється рівно на ширині свого тексту (overflow:hidden ріже далі) — тому бейдж
   зсувається вліво РІВНО настільки, наскільки розкрилась підкладка, без зайвого запасу.
   Невеликий негативний відступ підкладки дає легкий нахлест бейджа на підкладку замість шва.
   Якщо даних немає — блок підкладки взагалі не рендериться (PHP), тому бейджу нема куди
   зсуватись і він лишається на місці. */
.ncar__tile-status {
	position: absolute; top: 14px; right: 14px; z-index: 2;
	display: flex; align-items: stretch; justify-content: flex-end;
}
.ncar__tile-badge { position: relative; z-index: 1; cursor: default; }
.ncar__tile-statusdrop {
	position: relative; z-index: 0; box-sizing: border-box;
	display: flex; align-items: center;
	max-width: 0; min-width: 0; overflow: hidden; white-space: nowrap;
	background: var(--ncar-card-bg); color: var(--ncar-ink);
	font-size: 11px; border-radius: 6px;
	margin-left: -6px; padding: 0 10px 0 14px;
	opacity: 0;
	transition: max-width .8s ease, opacity .8s ease;
}
@media (hover: hover) {
	.ncar__tile:hover .ncar__tile-statusdrop { max-width: 160px; opacity: 1; }
}
/* Тач-пристрої (без hover) — зайвий тап нічого не додає, тому підкладка одразу розкрита. */
@media (hover: none) {
	.ncar__tile-statusdrop { max-width: 160px; opacity: 1; }
}
.ncar__tile-text { position: absolute; left: 16px; right: 16px; bottom: 13px; z-index: 2; }
.ncar__tile-name {
	font-weight: 700; font-size: 17px; line-height: 1.2;
	color: var(--ncar-ink); overflow-wrap: anywhere;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 2px 10px rgba(0, 0, 0, .4);
}
.ncar__tile-trim {
	margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--ncar-muted);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

/* ---------- Тіло картки ---------- */
.ncar__tile-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}

/* Блок ТТХ — кожен пункт своєї природної ширини (не рівні комірки), space-between: перший
   («Рік») впритул до лівого краю — врівень з ціною нижче, останній — впритул до правого,
   а між ними рівномірні проміжки. Текст усередині кожного пункту — по лівому краю. */
.ncar__tile-specs { display: flex; justify-content: space-between; width: 100%; gap: 12px; }
.ncar__tile-stat {
	flex: 0 0 auto;
	display: flex; flex-direction: column; align-items: flex-start;
	text-align: left; gap: 3px;
}
.ncar__tile-stat-v {
	font-weight: 600; font-size: 13.5px; color: var(--ncar-ink);
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ncar__tile-stat-l {
	font-size: 10.5px; font-weight: 600; white-space: nowrap;
	letter-spacing: .01em; color: var(--ncar-muted);
}

/* Ціна — ті самі .ncar__uah/.ncar__usd, що й у списку, лише в рядок замість стовпчика. */
.ncar__tile-price { display: flex; align-items: baseline; gap: 10px; }

/* Колір і VIN — в один рядок, коли влазить (ширші картки — напр. по 3 в ряд), і природно
   переносяться в два рядки лише тоді, коли справді затісно (вузькі картки — напр. по 4 в ряд). */
.ncar__tile-colorvin {
	display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
	font-size: 13px; color: var(--ncar-ink); cursor: default;
}
.ncar__tile-color { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.ncar__tile-vin {
	color: var(--ncar-muted); font-size: 12.5px; letter-spacing: .02em;
	font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}

.ncar__tile-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 2px; }
.ncar__tile-actions .ncar__btn { flex: 1; text-align: center; }
.ncar__tile-actions .ncar__more {
	flex: 0 0 auto;
	padding: 10px 14px;
	border: 1.5px solid var(--ncar-border);
	transition: border-color .18s ease;
}
@media (hover: hover) {
	.ncar__tile-actions a.ncar__more:hover { border-color: var(--ncar-ink); }
}

@media (max-width: 480px) {
	.ncar--tiles .ncar__list,
	.ncar--tiles .ncar__reveal-inner { grid-template-columns: 1fr; }
}

/* ---------- Підказка з адресою шоуруму — той самий стиль, що й в nio_ct/nio_models/nio_colors ---------- */
.ncar__tip {
	position: fixed;
	z-index: 1000;
	padding: 6px 11px;
	background: #1d1d1f;
	color: #fff;
	font-size: 10px;
	line-height: 1.4;
	white-space: nowrap;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	pointer-events: none;
	opacity: 0;
	transition: opacity .12s ease;
}
.ncar__tip.is-on { opacity: 1; }
@media (max-width: 1024px) { .ncar__tip { display: none !important; } }