/*
 * Характеристики двигателя. Дизайн-код темы:
 *   #002E55 — основной текст   #3F53A8 — акцент      #52556F — приглушённый
 *   #FF9934 — оранжевый        #E2E4E6 — границы     #9FCF36 — зелёный
 *   PT Sans 14/1.214           radius 3px            брейкпоинты 999 / 767 / 420
 * Мобильный — основной трафик, поэтому плитки, а не таблица.
 */

.espec__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Фото мотора в статье (если есть). Задник фигуры = наш же #F4F6FA, чтобы поля картинки слились. */
.ephoto {
	margin: 0 0 22px;
	max-width: 440px;
	border: 1px solid #E2E4E6;
	border-radius: 3px;
	overflow: hidden;
	background: #F4F6FA;
}

.ephoto__img { display: block; width: 100%; height: auto; }

/* Герой статьи мотора: фото слева, введение справа. На мобиле — стек. */
.ehero {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	margin-bottom: 24px;
}

.ehero__pic { flex: 0 0 40%; max-width: 420px; }
.ehero__pic .ephoto { margin: 0; max-width: none; }   /* фото заполняет колонку */
.ehero__intro { flex: 1 1 0; min-width: 0; }
.ehero__intro > :first-child { margin-top: 0; }

@media (max-width: 640px) {
	.ehero { flex-direction: column; gap: 14px; }
	.ehero__pic { flex-basis: auto; max-width: 100%; width: 100%; }
}

.espec { margin: 22px 0; }

.espec__icon {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	color: #3F53A8;
}

/* --- три главные цифры --- */

.espec__hero {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.espec__hero .espec__tile {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 16px 14px;
	background: #F7F8FA;
	border-color: transparent;
}

.espec__hero .espec__icon {
	width: 26px;
	height: 26px;
	flex-basis: 26px;
}

.espec__hero .espec__value { font-size: 28px; line-height: 1.1; }
.espec__hero .espec__unit  { font-size: 14px; }

/* --- остальные плитки --- */

.espec__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-top: 10px;
}

.espec__tile {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
	border: 1px solid #E2E4E6;
	border-radius: 3px;
	min-width: 0;                  /* иначе длинное значение распирает колонку грида */
}

.espec__body { min-width: 0; }

.espec__value {
	font-size: 17px;
	font-weight: bold;
	line-height: 1.2;
	color: #002E55;
	overflow-wrap: break-word;
}

.espec__unit {
	font-size: 12px;
	font-weight: normal;
	color: #52556F;
	white-space: nowrap;
}

.espec__label {
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.25;
	color: #52556F;
}

/* --- разбивка семейства по кодам --- */

.efam {
	margin: 18px 0;
	overflow-x: auto;              /* узкий экран: таблица скроллится сама, страница — нет */
	-webkit-overflow-scrolling: touch;
}

/* Тема задаёт свои отступы и рамки правилами `.post__entry table` и `.post__entry th/td`
   (один класс + тип). Перебиваем специфичностью: класс темы + наш класс. */
.post__entry .efam__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 14px;
}

.post__entry .efam__table th,
.post__entry .efam__table td {
	padding: 9px 10px;
	border: 1px solid #E2E4E6;
	text-align: left;
	white-space: nowrap;
}

.efam__table thead th {
	background: #F7F8FA;
	font-size: 12px;
	font-weight: normal;
	color: #52556F;
}

.efam__table tbody tr:hover { background: #FBFCFD; }

.efam__code { font-weight: bold; color: #002E55; }

.efam__tag {
	padding: 1px 6px;
	border-radius: 3px;
	background: #FFF1E2;
	font-size: 11px;
	font-weight: normal;
	color: #C86A16;
}

/* --- гибрид --- */

.ehyb {
	margin: 22px 0;
	padding: 16px;
	border: 1px solid #FFD9B0;
	border-radius: 3px;
	background: #FFF8F1;
}

.ehyb__head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
}

.ehyb__head .espec__icon { color: #FF9934; }

.ehyb__kind {
	margin-left: auto;
	padding: 3px 8px;
	border-radius: 3px;
	background: #FF9934;
	color: #FFF;
	font-size: 12px;
	white-space: nowrap;
}

.ehyb__bar {
	position: relative;
	height: 10px;
	margin: 14px 0 10px;
	border-radius: 3px;
	background: #FF9934;         /* вся установка */
	overflow: hidden;
}

.ehyb__bar-ice {
	display: block;
	height: 100%;
	background: #3F53A8;         /* доля самого двигателя */
	border-radius: 3px;
}

.ehyb__nums {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
}

.ehyb__num { font-size: 13px; color: #52556F; }
.ehyb__num b { font-size: 20px; color: #002E55; }

.ehyb__num--ice b { color: #3F53A8; }
.ehyb__num--sys b { color: #FF9934; }

.ehyb__fam {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: #002E55;
}

.ehyb__note {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.35;
	color: #52556F;
}

/* Главное фото машины. Drom отдаёт снимки в fullsize — без ограничения они занимали
   весь первый экран. Но и резать нельзя: cover отрезал машине крышу и колёса.
   Поэтому рамка 16:9 и contain — снимок вписывается целиком, поля закрывает подложка. */
/* ===========================================================================
   Шапка страницы авто: фото слева, факты справа
   ===========================================================================
   Фон у фото уже впечён в сам снимок (photos_compose.php). Своей подложки здесь
   быть НЕ должно — иначе рамка в рамке: светлый фон блока, а внутри него ещё
   один светлый фон фотографии.
*/

/* Фото слева, характеристики справа, текст — под ними во всю ширину. */
.chero {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 18px 22px;
	margin: 0 0 24px;
	align-items: start;
}

.chero__pic {
	border-radius: 3px;
	overflow: hidden;
	line-height: 0;              /* убирает щель под инлайновой картинкой */
}

.chero__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Текст — во всю ширину под фото и характеристиками.
   Кегль как у основного текста статей (.post__entry — 17px/1.5): это такой же текст,
   а не сноска. В узкой правой колонке он рвался на обрывки по три слова. */
/* `.post__entry p` задаёт свой нижний отступ — перебиваем классом, не !important */
.post__entry .chero__text {
	grid-column: 1 / -1;
	margin: 4px 0 0;
	font-size: 17px;
	line-height: 1.5;
	color: #002E55;
}

.chero__facts {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 16px;
	font-size: 16px;
	line-height: 1.35;
}

.chero__facts dt {
	color: #52556F;
	font-size: 14px;
}

.chero__facts dd {
	margin: 0;
	font-weight: bold;
	color: #002E55;
}

/* ===========================================================================
   Карточки автомобилей (на странице двигателя)
   =========================================================================== */

/* `.post__entry h3` задаёт крупный кегль и большие отступы — перебиваем классом */
.post__entry .ccards__brand {
	margin: 22px 0 12px;
	font-size: 18px;
}

.ccards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 26px;
}

.ccard {
	display: block;
	border: 1px solid #E2E4E6;
	border-radius: 3px;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s;
}

.ccard:hover {
	border-color: #3F53A8;
	box-shadow: 0 1px 6px rgba(0, 46, 85, .08);
}

/* Обработанные фото уже 16:9 и уже со своим фоном — просто заполняем ими рамку.
   Подложка нужна только тем снимкам, что обработку не прошли (список исключений). */
.ccard__pic {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	background: #F4F6FA;
	overflow: hidden;
}

.ccard__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ccard__nopic { font-size: 11px; color: #9BA2B0; }

.ccard__body { padding: 8px 10px 10px; }

.ccard__name {
	font-size: 13px;
	font-weight: bold;
	line-height: 1.25;
	color: #002E55;
}

.ccard:hover .ccard__name { color: #3F53A8; }

.ccard__years,
.ccard__body-type {
	margin-top: 2px;
	font-size: 11px;
	line-height: 1.3;
	color: #52556F;
}

.ccard__body-type { color: #9BA2B0; }

/* через какой мотор связана эта машина с текущей */
.ccard__via {
	display: inline-block;
	margin-top: 4px;
	padding: 1px 6px;
	border-radius: 3px;
	background: #F0F2F7;
	font-size: 11px;
	font-weight: bold;
	color: #3F53A8;
}

/* ===========================================================================
   Версии автомобиля, сгруппированные по двигателю
   ===========================================================================
   Не таблица комплектаций, как у Drom: строка = мотор, внутри — коробки и версии.
*/

.ctrims { margin: 18px 0 28px; }

.ctrim {
	padding: 14px 0;
	border-top: 1px solid #E2E4E6;
}

.ctrim:last-child { border-bottom: 1px solid #E2E4E6; }

.ctrim__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-bottom: 8px;
}

.ctrim__code {
	font-size: 19px;
	font-weight: bold;
	color: #3F53A8;
	text-decoration: none;
}

.ctrim__code:hover { text-decoration: underline; }
.ctrim__code--plain { color: #002E55; }

.ctrim__spec {
	font-size: 14px;
	color: #52556F;
}

.ctrim__row {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 4px 14px;
	padding: 4px 0;
	font-size: 15px;
	line-height: 1.4;
}

.ctrim__gear {
	color: #52556F;
	font-size: 13px;
	padding-top: 2px;
}

.ctrim__names { color: #002E55; }

/* ===========================================================================
   Карточки двигателей (на странице автомобиля)
   =========================================================================== */

/* Один мотор — одна карточка, и версии живут внутри неё.
   Раньше карточки и версии были двумя блоками, и второй дублировал первый. */
.ecards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 18px 0 28px;           /* иначе блок липнет к «Подпишитесь» */
}

.ecard {
	display: block;
	padding: 14px 16px;
	border: 1px solid #E2E4E6;
	border-radius: 3px;
	color: inherit;
	text-decoration: none;
}

/* картинка ДВС слева, код+характеристики справа; комплектации — ниже во всю ширину */
.ecard__top {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.ecard__main { flex: 1 1 0; min-width: 0; }

.ecard__pic {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	border-radius: 3px;
	overflow: hidden;
	background: #F4F6FA;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ecard__pic img { width: 72px; height: 72px; object-fit: cover; display: block; }
.ecard__pic .escheme { width: 100%; height: 100%; }

.ecard__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.ecard__code {
	font-size: 19px;
	font-weight: bold;
	color: #3F53A8;
	text-decoration: none;
}

.ecard__code:hover { text-decoration: underline; }

/* мотора ещё нет статьёй — не ведём в никуда */
.ecard__code--plain { color: #002E55; }

/* подпись: иначе строки «МКПП / 1.5 MT Cool» висят без объяснения, что это */
.ecard__label {
	margin: 10px 0 4px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #9BA2B0;
}

/* Строка = коробка + привод. Именно пара, а не одна коробка: у каждой версии привод
   ровно один, и склеенные в кучу «полный, задний» вводили в заблуждение. */
.ecard__row {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 4px 16px;
	padding: 7px 0;
	border-top: 1px solid #F0F1F3;
	font-size: 15px;
	line-height: 1.45;
}

.ecard__row:first-of-type { border-top: 0; }

.ecard__gear {
	color: #002E55;
	font-size: 13px;
	font-weight: bold;
	padding-top: 2px;
}

/* привод — свойство машины, а не мотора: стоит в подписи версии, а не в ряду
   характеристик двигателя, где читался как его собственная характеристика */
.ecard__drive {
	display: inline-block;
	margin-top: 2px;
	font-weight: normal;
	color: #52556F;
}

/* Комплектации — списком по строке на версию, в две колонки: у части машин их по восемь
   на коробку, и сплошной строкой они превращались в стену текста.

   Тема рисует свой зелёный маркер правилом
   `.post__entry ul:not(.manufacturers ul) > li::before` — два класса и четыре типа.
   Перебиваем СПЕЦИФИЧНОСТЬЮ (три класса), а не !important. */
.post__entry .ecard .ecard__names {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #002E55;
	columns: 2;
	column-gap: 24px;
}

.post__entry .ecard .ecard__version {
	margin: 0 0 2px;
	padding: 0 0 0 12px;
	position: relative;
	break-inside: avoid;
	list-style: none;
	background: none;
}

.post__entry .ecard .ecard__version::before {
	content: '';
	position: absolute;
	left: 0;
	top: .62em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #C9CED6;
}

.ecard__tag {
	padding: 1px 6px;
	border-radius: 3px;
	background: #FFF1E2;
	font-size: 11px;
	color: #C86A16;
	white-space: nowrap;
}

.ecard__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	padding-bottom: 4px;
	border-bottom: 1px solid #F0F1F3;
}

.ecard__chip {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	color: #002E55;
	white-space: nowrap;
}

.ecard__chip i { font-style: normal; font-size: 10px; color: #52556F; }
.ecard__chip .espec__icon { width: 15px; height: 15px; flex-basis: 15px; }

.ecard__family {
	margin-top: 6px;
	font-size: 11px;
	color: #9BA2B0;
	overflow-wrap: break-word;
}

/* ===========================================================================
   Витрина рубрики «Автомобили {марка}»
   ===========================================================================
   Обычная карточка темы даёт фото и заголовок. Здесь нужно больше: человек ищет
   свою машину и хочет сразу видеть годы, кузов и какие моторы на ней стояли.
*/

/* Оглавление по типам кузова: у марки бывает 30+ моделей, и без него каталог
   приходится пролистывать целиком. Кузов — то, чем человек думает о машине. */
.carnav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
}

.carnav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid #E2E4E6;
	border-radius: 3px;
	font-size: 14px;
	color: #002E55;
	text-decoration: none;
	transition: border-color .15s, color .15s;
}

.carnav__link:hover {
	border-color: #3F53A8;
	color: #3F53A8;
}

.carnav__count {
	font-size: 12px;
	font-weight: bold;
	color: #9BA2B0;
}

.carnav__title {
	margin: 30px 0 14px;
	font-size: 22px;
	font-weight: bold;
	color: #002E55;
	scroll-margin-top: 16px;      /* якорь не прячется под шапку */
}

.items--cars {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 10px;
}

.caritem {
	display: flex;
	flex-direction: column;
	border: 1px solid #E2E4E6;
	border-radius: 3px;
	overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
}

.caritem:hover {
	border-color: #3F53A8;
	box-shadow: 0 1px 6px rgba(0, 46, 85, .08);
}

.caritem__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.caritem__pic {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	background: #F4F6FA;
	overflow: hidden;
}

.caritem__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.caritem__nopic { font-size: 12px; color: #9BA2B0; }

.caritem__body { padding: 10px 12px; }

.caritem__name {
	font-size: 15px;
	font-weight: bold;
	line-height: 1.25;
	color: #002E55;
}

.caritem:hover .caritem__name { color: #3F53A8; }

.caritem__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 10px;
	margin-top: 3px;
	font-size: 12px;
	color: #52556F;
}

.caritem__body-type { color: #9BA2B0; }

/* поколения модели: годами, ссылками — модель одна, а поколений бывает шесть */
.caritem__gens {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px 8px;
	padding: 0 12px 10px;
}

.caritem__genslabel {
	width: 100%;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #9BA2B0;
}

.caritem__gen {
	padding: 2px 7px;
	border: 1px solid #E2E4E6;
	border-radius: 3px;
	font-size: 12px;
	color: #52556F;
	text-decoration: none;
	white-space: nowrap;
}

.caritem__gen:hover {
	border-color: #3F53A8;
	color: #3F53A8;
}

/* коды моторов — отдельными ссылками: из каталога машин человек уходит на свой мотор */
.caritem__engines {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: auto;
	padding: 0 12px 12px;
}

.caritem__code {
	padding: 2px 7px;
	border-radius: 3px;
	background: #F0F2F7;
	font-size: 12px;
	font-weight: bold;
	color: #3F53A8;
	text-decoration: none;
}

.caritem__code:hover { background: #3F53A8; color: #FFF; }

/* мотора ещё нет статьёй — показываем, но не ведём в никуда */
.caritem__code--plain {
	background: #F7F8FA;
	color: #9BA2B0;
}


/* ===========================================================================
   Хаб марки: вход в двигатели и автомобили
   =========================================================================== */

.bhub { margin-bottom: 30px; }

.bhub__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 26px 0 14px;
}

.bhub__title {
	margin: 0;
	font-size: 22px;
	font-weight: bold;
	color: #002E55;
}

.bhub__all {
	font-size: 14px;
	color: #3F53A8;
	white-space: nowrap;
}

.bhub__empty { color: #52556F; }

.bhub__engines {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.bhub__engine {
	display: block;
	padding: 12px 14px;
	border: 1px solid #E2E4E6;
	border-radius: 3px;
	text-decoration: none;
	transition: border-color .15s;
}

.bhub__engine:hover { border-color: #3F53A8; }

.bhub__code {
	display: block;
	font-size: 17px;
	font-weight: bold;
	color: #3F53A8;
}

.bhub__spec {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: #52556F;
}


/* ===========================================================================
   Витрина рубрики: список моторов с характеристиками
   =========================================================================== */

/* Две колонки: после того как из карточки убрали заголовок, строка во всю ширину
   стала наполовину пустой. Внутри осталось три вещи — код, шильдик, характеристики. */
/* ═══ Витрина двигателей: сводка, фильтры, группы по объёму ═══ */

.eshow__summary {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.eshow__stat {
	border: 1px solid #E2E4E6;
	border-radius: 3px;
	padding: 8px 12px;
	background: #F7F8FA;
}

.eshow__stat b {
	display: block;
	font-size: 19px;
	line-height: 1.1;
	color: #002E55;
	font-variant-numeric: tabular-nums;
}

.eshow__stat span { font-size: 12px; color: #52556F; }
.eshow__stat--turbo b  { color: #E07C0E; }   /* темнее #FF9934 — контраст текста на светлом */
.eshow__stat--hybrid b { color: #6F9E14; }   /* темнее #9FCF36 — читаемость */

.eshow__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 12px 0;
	border-top: 1px solid #E2E4E6;
	border-bottom: 1px solid #E2E4E6;
	margin-bottom: 20px;
}

.eshow__fgroup { display: flex; align-items: center; gap: 6px; }

.eshow__flabel {
	font-size: 11px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #9BA2B0;
}

.echip {
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	border: 1px solid #D6D9DE;
	background: #FFF;
	color: #52556F;
	padding: 5px 12px;
	border-radius: 999px;
	transition: border-color .15s, background .15s, color .15s;
}

.echip:hover { border-color: #3F53A8; color: #002E55; }
.echip[aria-pressed="true"] { background: #3F53A8; border-color: #3F53A8; color: #FFF; }
.echip--turbo[aria-pressed="true"]  { background: #E07C0E; border-color: #E07C0E; }
.echip--hybrid[aria-pressed="true"] { background: #6F9E14; border-color: #6F9E14; }

.eshow__jump {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-left: auto;
}

.eshow__jump a {
	font-size: 13px;
	color: #52556F;
	text-decoration: none;
	padding: 4px 9px;
	border-radius: 3px;
	font-variant-numeric: tabular-nums;
}

.eshow__jump a:hover { background: #EEF0F6; color: #3F53A8; }

.eshow__sec { margin-bottom: 26px; scroll-margin-top: 16px; }

.eshow__sechead {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 12px;
	padding-bottom: 6px;
	border-bottom: 1px solid #E2E4E6;
}

.eshow__vol  { font-size: 18px; font-weight: bold; color: #002E55; }
.eshow__meta { font-size: 13px; color: #52556F; }
.eshow__count { margin-left: auto; font-size: 12px; color: #9BA2B0; font-variant-numeric: tabular-nums; }
.eshow__foot { font-size: 13px; color: #9BA2B0; margin-top: 8px; }

@media (max-width: 767px) {
	.eshow__jump { margin-left: 0; width: 100%; }
}

.items--engines {
	display: grid;
	/* minmax(0,1fr), а не 1fr: иначе карточка с характеристиками распирает свою колонку
	   собственной минимальной шириной, и колонки выходят разными. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.eitem {
	border: 1px solid #E2E4E6;
	border-radius: 3px;
	transition: border-color .15s, box-shadow .15s;
}

.eitem:hover {
	border-color: #3F53A8;
	box-shadow: 0 1px 6px rgba(0, 46, 85, .08);
}

.eitem__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	color: inherit;
	text-decoration: none;
}

/* --- миниатюра / заглушка --- */

.eitem__thumb {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	background: #F7F8FA;
	overflow: hidden;
}

.eitem__thumb img { width: 64px; height: 64px; object-fit: cover; }

/* --- схема-визитка вместо фото --- */

.escheme {
	width: 100%;
	height: 100%;
	display: block;
}

.escheme rect {                    /* цилиндры */
	fill: #FFF;
	stroke: #3F53A8;
	stroke-width: 1.4;
}

.escheme__vol {
	font-size: 27px;
	font-weight: bold;
	fill: #002E55;
}

.escheme__unit {
	font-size: 13px;
	font-weight: normal;
	fill: #9BA2B0;
}

.escheme__turbo { fill: #FF9934; stroke: none; }
.escheme__hyb   { fill: #6BAE1E; stroke: none; }

.escheme__mark {
	font-size: 11px;
	font-weight: bold;
	fill: #FFF;
}

.eitem__stub {
	padding: 0 4px;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.1;
	text-align: center;
	color: #9BA2B0;
	overflow-wrap: anywhere;
}

/* --- название --- */

.eitem__body {
	flex: 1 1 auto;
	min-width: 0;
}

.eitem__head {
	display: flex;
	flex-wrap: wrap;      /* длинный код + шильдик чужого мотора не влезали в один ряд узкой
	                         карточки и наезжали на характеристики — при нехватке места
	                         шильдик переносится под код, а не вылезает вправо. */
	align-items: center;
	gap: 3px 8px;
	margin-bottom: 3px;
}

/* Код — единственный текст карточки: заголовок не показываем, ищут по коду.
   Не переносим: «DFMC15TE3» в две строки выглядит как две разные надписи. */
.eitem__code {
	font-size: 17px;
	font-weight: bold;
	line-height: 1.2;
	color: #002E55;
	white-space: nowrap;
}

/* Шильдик чужого мотора: HR16DE на витрине Dongfeng живёт в разделе Nissan.
   Без пометки ссылка в чужой раздел выглядит ошибкой. */
.eitem__badge {
	padding: 2px 7px;
	border: 1px solid #E2E4E6;
	border-radius: 3px;
	background: #FFF;
	font-size: 11px;
	color: #52556F;
	white-space: nowrap;
}

/* Остальные коды семейства: без них владелец SFG15TA не поймёт, что статья и про него. */
.eitem__family {
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.3;
	color: #52556F;
	overflow-wrap: break-word;
}

.eitem__more { color: #9BA2B0; }

.eitem__head { margin-bottom: 0; }

.eitem:hover .eitem__code { color: #3F53A8; }

/* --- характеристики справа --- */

/* Сеткой 2×2, а не строкой: четыре чипа в ряд отъедали ширину у названия,
   а названия у моторов длинные (в них перечислены машины). */
.eitem__specs {
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 5px 12px;
	flex: 0 0 auto;
	margin-left: auto;
	padding-left: 12px;
	border-left: 1px solid #F0F1F3;
}

.eitem__chip {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	white-space: nowrap;
	color: #002E55;
}

.eitem__chip .espec__icon { width: 15px; height: 15px; flex-basis: 15px; }
.eitem__unit { font-size: 10px; color: #52556F; }

/* --- планшет --- */

@media screen and (max-width: 999px) {
	.espec__grid { grid-template-columns: repeat(3, 1fr); }

	/* Контентная колонка тут ~470px (обёртка 730 минус сайдбар) — две карточки
	   в ряд не помещаются, характеристики сплющиваются. Возвращаем одну колонку. */
	.items--engines { grid-template-columns: 1fr; }
	.eitem__specs { gap: 5px 10px; }

	.ccards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* Карточки двигателей — всегда по одной в ряд. Правило на две колонки осталось
	   с тех пор, когда в карточке были только код и три чипа. Теперь внутри неё
	   живут комплектации, и в узкой колонке они налезали друг на друга. */
	.ecards { grid-template-columns: 1fr; }

	/* Витрина авто и хаб марки: в три колонки на планшете чипы поколений и моторов
	   сыпались в вертикальные столбики по одному. */
	.items--cars   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bhub__engines { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Список версий в две колонки тоже сжимался в кашу — на планшете и телефоне в одну. */
	.post__entry .ecard .ecard__names { columns: 1; }
}

/* --- телефон: компактно, но без потери смысла --- */

@media screen and (max-width: 767px) {
	.espec__hero { gap: 8px; }

	.espec__hero .espec__tile {
		padding: 12px 10px;
		gap: 4px;
	}

	.espec__hero .espec__icon { width: 22px; height: 22px; flex-basis: 22px; }
	.espec__hero .espec__value { font-size: 22px; }
	.espec__hero .espec__unit  { font-size: 12px; }

	.espec__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
		margin-top: 8px;
	}

	.espec__tile { padding: 10px; gap: 8px; }
	.espec__icon { width: 20px; height: 20px; flex-basis: 20px; }
	.espec__value { font-size: 15px; }

	.ehyb { padding: 14px; }
	.ehyb__nums { gap: 6px 16px; }
	.ehyb__num b { font-size: 18px; }

	/* Витрина: справа характеристики не помещаются — уводим их под название,
	   строкой чипов. Смысл сохраняется, ширины хватает. */
	.eitem__link {
		flex-wrap: wrap;
		gap: 10px;
		padding: 10px;
	}

	.eitem__thumb {
		flex: 0 0 60px;
		width: 60px;
		height: 60px;
	}

	.eitem__thumb img { width: 60px; height: 60px; }
	.eitem__stub { font-size: 11px; }

	/* basis:auto = ширина по содержимому, а названия у моторов длинные — блок
	   не влезал рядом с миниатюрой и сваливался под неё. basis:0 даёт ему сжиматься. */
	.eitem__body { flex: 1 1 0; }

	.eitem__specs {
		display: flex;
		flex: 1 1 100%;
		flex-wrap: wrap;
		margin-left: 0;
		padding-left: 0;
		padding-top: 8px;
		border-left: 0;
		border-top: 1px solid #F0F1F3;
		gap: 6px 14px;
	}

	.eitem__chip { font-size: 13px; }
	.eitem__code { font-size: 17px; }
	.eitem__family { font-size: 12px; }

	/* Карточки: две в ряд. По одной — слишком длинная простыня (у мотора до 11 машин). */
	.ccards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

	.ecard { padding: 12px; }
	.ecard__code { font-size: 17px; }
	.ecard__chip { font-size: 12px; }

	/* на телефоне подпись версии — сверху, список под ней */
	.ecard__row { grid-template-columns: 1fr; gap: 2px; }

	/* Шапка авто: на телефоне две колонки не читаются — фото, под ним факты. */
	.chero { grid-template-columns: 1fr; gap: 14px; }

	/* Витрина авто: одна карточка в ряд. В двух колонках длинные названия моделей
	   («Dongfeng Aeolus Yixuan GS») ломались на четыре строки, а чипы поколений
	   и моторов выстраивались в столбик по одному. */
	.items--cars { grid-template-columns: 1fr; gap: 10px; }

	/* Хаб марки: заголовок и «Все двигатели →» в одну строку не помещаются */
	.bhub__engines { grid-template-columns: 1fr; }
	.bhub__head { flex-wrap: wrap; gap: 4px; margin: 20px 0 12px; }
	.bhub__title { font-size: 19px; }
}

@media screen and (max-width: 420px) {
	/* Заголовок «Диаметр × ход» в две колонки не влезал — на узких экранах
	   плитки в одну колонку читаются лучше, чем обрезанные подписи. */
	.espec__hero .espec__value { font-size: 20px; }
	.espec__label { font-size: 11px; }

	.ehyb__head { flex-wrap: wrap; }
	.ehyb__kind { margin-left: 0; }
}