@charset "utf-8";

/* Шрифты макета (design_handoff_yamal_moto_home): Oswald — заголовки и цены,
   IBM Plex Sans — текст и кнопки, IBM Plex Mono — метки и спек-чипы.
   Лежат рядом с сайтом: хостинг российский, к Google Fonts не ходим. */
/* Montserrat — только для кнопки предзаказа в шапке: она стоит рядом с
   логотипом, а тот набран широким геометрическим гротеском. Oswald рядом с ним
   читался чужим шрифтом (Артур, 03.09.2026). Файл вариативный, один на все
   веса; качается так же со своего хоста, к Google Fonts не ходим.
   Латинского набора нет намеренно: на кнопке только кириллица, а из-за одного
   пробела браузер тянул ещё 37 КБ. Появится латиница в надписи — вернуть
   второй @font-face, иначе она уедет на системный шрифт. */
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 700 900; font-display: swap;
  src: url('/data/fonts/montserrat-cyrillic.woff2?h=520cd39b') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/data/fonts/oswald-cyrillic.woff2?h=d8672733') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/data/fonts/oswald-latin.woff2?h=aabe123b') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Plex'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/data/fonts/plexsans-cyrillic.woff2?h=d60fe850') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Plex'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/data/fonts/plexsans-latin.woff2?h=d8b4e62d') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'PlexMono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/data/fonts/plexmono-cyrillic.woff2?h=5877f0f9') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PlexMono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/data/fonts/plexmono-latin.woff2?h=ce9a5ca3') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ============ БАЗА ============ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #FFFFFF; color: #101418;
  font-family: 'Plex', -apple-system, 'Segoe UI', system-ui, Arial, sans-serif;
  font-size: 16px; line-height: 1.5;
}
img { max-width: 100%; }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }
.л-строка h3 a:hover, .л-карта .имя:hover { color: var(--л-акцент); }
/* заглушка на весь экран: под ней в HTML лежит блок «О каталоге» — пока грузится приложение, он за краем экрана */
.скелет { min-height: 100vh; }

/* Всплывающая подсказка после копирования ссылки или текста заявки */
.тост {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  background: #101418; color: #fff; padding: 12px 18px; font-size: 14px;
  max-width: min(520px, calc(100vw - 32px)); z-index: 60;
  opacity: 0; pointer-events: none; transition: opacity .16s ease-out, transform .16s ease-out;
}
.тост.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 767px) { .тост { bottom: 84px; } }

/* ============ ГЛАВНАЯ СТРАНИЦА (хендофф, секция 1a) ============
   Палитра здесь своя и намеренно светлая: в хендоффе тёмной темы нет,
   а половинчатая инверсия сломала бы фирменные плашки. */
/* Палитра объявлена на :root, а не только на .сайт: липкая нижняя панель
   телефона лежит рядом с обёрткой, а не внутри неё, и переменные до неё
   не доставали — фон и акцентная кнопка оказывались прозрачными. */
:root {
  --л-фон: #FFFFFF; --л-подложка: #F4F6F7; --л-тёмный: #101418;
  --л-текст: #4A5058; --л-приглушённый: #5A6069; --л-метка: #8A9099;
  --л-линия: #DCDFE3; --л-линия-тёмная: #2A3037; --л-текст-тёмный-фон: #A8AEB6;
  --л-акцент: #0D9F88; --л-сигнал: #C2551B; --л-сигнал-фон: #FFF1E8;
}
.сайт {
  --л-поле: 56px;
  background: var(--л-фон); color: var(--л-тёмный);
  font-family: 'Plex', -apple-system, 'Segoe UI', system-ui, Arial, sans-serif;
  overflow-x: clip;
  --контейнер: 1440px;
}
/* Куски, которые типограф запрещает рвать: «Ski-Doo», «09:00–17:00», «30–40 дней» (разметитьТипограф) —
   свой тег x-nb; .нп — для обёрток, поставленных в разметке руками */
.нп, x-nb { white-space: nowrap; }

/* ============ КОНТЕЙНЕР — ПРАВИЛО САЙТА ============
   Текст, цены и таблицы никогда не шире 1440: иначе на широком мониторе
   сетка каталога расползается в шесть колонок, а в таблице доставки подпись
   и значение разъезжаются на полметра. Поэтому каждая секция ограничена
   контейнером и центрируется.

   Исключение — четыре полосы (шапка, футер, тёмная секция, полоса CTA):
   у них фон тянется во всю ширину окна, а содержимое сидит в том же
   контейнере. Так цветные полосы не обрываются посреди экрана.

   Приём с padding: max(поле, (100% − 1440)/2 + поле) даёт ровно те же
   отступы 56px, что и внутри контейнера, но фон при этом остаётся сплошным. */
.сайт > * { max-width: var(--контейнер); margin-inline: auto; width: 100%; }
.сайт > .л-шапка, .сайт > .л-тьма, .сайт > .л-полоса, .сайт > .л-футер { max-width: none; }
.л-тьма, .л-полоса, .л-футер {
  padding-inline: max(var(--л-поле), calc((100% - var(--контейнер)) / 2 + var(--л-поле)));
}
/* У шапки логотип-плашка и кнопка прижаты к краям контейнера, поля им не нужны */
.л-шапка { padding-inline: max(0px, calc((100% - var(--контейнер)) / 2)); }
.сайт * { box-sizing: border-box; }
.сайт a { text-decoration: none; color: inherit; }
.сайт h1, .сайт h2, .сайт h3 { font-family: 'Oswald', 'Arial Narrow', sans-serif; text-transform: uppercase; margin: 0; }
.сайт p { text-wrap: pretty; }
.мет { font-family: 'PlexMono', ui-monospace, monospace; }

/* --- шапка --- */
.л-шапка {
  display: flex; align-items: stretch; justify-content: space-between;
  border-bottom: 1px solid var(--л-линия); background: var(--л-фон);
  position: sticky; top: 0; z-index: 30;
}
.л-шапка .лево { display: flex; align-items: center; min-width: 0; }
/* Логотип и телефон не сжимаются — сжимается навигация. Когда телефону
   запретили сжиматься (25.08.2026), флекс принялся за плашку логотипа, и
   «ЯМАЛ МОТО» разъехалось на две строки. */
.л-лого {
  background: var(--л-акцент); color: #fff; padding: 0 18px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: stretch;
  flex: 0 0 auto; white-space: nowrap;
}
/* Логотип — картинка, а не набранный текст. Фирменное начертание компании —
   широкий геометрический гротеск; Oswald, которым он был набран, узкий и
   конденсированный, то есть на сайте стояло чужое написание имени
   (Артур, 03.09.2026). Файл тот же, что лежит поверх ролика на главной. */
.л-лого img { height: 32px; width: auto; display: block; }
.л-нав { display: flex; gap: 28px; padding: 0 28px; font-size: 13px; font-weight: 600; letter-spacing: .08em; min-width: 0; flex: 0 0 auto; }
/* Шапка разложена space-between, поэтому весь остаток ширины оказывался между
   меню и телефоном: между пунктами 28, а до номера — то 12, то 45, смотря
   какое окно. Отдаём остаток левому блоку и прижимаем меню к его правому краю —
   тогда зазор до телефона равен ровно padding-left правой группы (Артур,
   31.08.2026: «чтобы расстояние между контактами и номером было такое же»). */
.л-шапка > .лево { flex: 1 1 auto; min-width: 0; }
/* Свободную ширину делим пополам: раньше меню прижималось вправо и весь
   остаток вставал между логотипом и первым пунктом — слева зияло, справа
   было тесно (Артур, 01.09.2026: «в одном месте воздуха больше, чем в
   другом»). Минимальный зазор с обеих сторон держит padding самого меню и
   равен шагу между пунктами. */
.л-нав { margin-inline: auto; }

.л-нав a { color: var(--л-приглушённый); padding: 22px 0; transition: color .14s ease-out; white-space: nowrap; text-transform: uppercase; }
.л-нав a:hover { color: var(--л-акцент); }
.л-нав a.on { color: var(--л-тёмный); border-bottom: 2px solid var(--л-тёмный); }
.л-право { display: flex; align-items: center; gap: 20px; padding-right: 20px; }
/* Высота шапки — опорная величина: на неё настроены липкие панели (top: 71px).
   Кнопка предзаказа задавала её своими полями, а после растяжения во всю
   высоту перестала — держим явно, иначе панели повисали с зазором. */
.л-шапка { min-height: 71px; }
/* Кнопка предзаказа — правая пара логотипа: тот же Oswald того же кегля и цвета
   на том же зелёном (Артур, 31.08.2026). Чёрный текст только у акцентной: на
   странице модели кнопка тёмная, и чёрным по тёмному её бы не стало видно. */
.л-шапка .л-право .л-кн {
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .06em;
  align-self: stretch; padding: 0 20px; line-height: 1.05; white-space: normal;
  max-width: 190px; text-align: center;
}
.л-шапка .л-право .л-кн.акцент { color: var(--л-тёмный); }
.л-шапка .л-право .л-кн.акцент:hover { background: #0B8B76; color: var(--л-тёмный); }
/* Номер не переносим и не даём флексу его сжимать: с шестым пунктом меню
   (гидроциклы, 25.08.2026) шапке стало тесно, и телефон ломался на две
   строки, распирая шапку по высоте. */
.л-тел { text-align: right; line-height: 1.25; flex: 0 0 auto; margin-left: 0; }
.л-тел b { font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 600; white-space: nowrap; }
.л-тел span { display: block; font-family: 'PlexMono', monospace; font-size: 10px; color: var(--л-приглушённый); letter-spacing: .1em; }
/* Телефон в шапке — ссылка, по которой звонят с телефона: тач-цель была 36 px
   при норме 44 (аудит 03.09.2026). */
.л-шапка .л-тел { display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; }

/* --- кнопки --- */
/* Две ступени кнопок (14.09.2026, Артур: «кнопки разных размеров… чтобы всё выровнено было»):
   крупная 56 px — по умолчанию (первый экран, формы, полосы с призывом), компактная 44 px —
   в карточках, плашках и боковых панелях (список ниже). Высоту задаёт min-height, а не
   вертикальные отступы: отступы у блоков свои, и из них выходило 15 разных высот. */
.л-кн {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px;
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: 0; cursor: pointer; text-align: center;
  transition: background-color .14s ease-out, color .14s ease-out, border-color .14s ease-out;
  font-family: inherit;
}
.л-кн.тёмная { background: var(--л-тёмный); color: #fff; padding: 14px 22px; font-size: 12px; }
.л-кн.тёмная:hover { background: #23292F; }
.л-кн.акцент { background: var(--л-акцент); color: #fff; padding: 17px 30px; }
.л-кн.акцент:hover { background: #0B8B76; }
.л-кн.контур { border-color: var(--л-тёмный); color: var(--л-тёмный); padding: 17px 30px; background: none; }
.л-кн.контур:hover { background: var(--л-тёмный); color: #fff; }
.л-карта .л-кн, .л-пара-кн .л-кн, .л-ср-к .л-кн, .л-строка .право .л-кн, .л-карта-места .плашка .л-кн,
.л-помощь-фильтров .л-кн, .л-номер .действия .л-кн { min-height: 44px; }

/* --- герой --- */
.л-герой { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--л-линия); }
.л-герой .текст { padding: 64px var(--л-поле) 56px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.л-бейдж {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 8px;
  background: var(--л-сигнал-фон); color: var(--л-сигнал);
  font-family: 'PlexMono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .16em;
  padding: 7px 12px; margin-bottom: 26px;
}
/* Заголовок первого экрана. У автомобильных сайтов той же школы (Lamborghini,
   Rivian, Tesla) hero-строка идёт 80–120px: масштаб там и есть голос бренда,
   потому что цвет один и украшений нет. У нас было 70 — по центру колонки в
   700px это читалось как крупный подзаголовок, а не как заявление. */
.л-герой h1 { font-size: clamp(56px, 5.4vw, 84px); line-height: .98; font-weight: 700; letter-spacing: -.015em; margin-bottom: 22px; }
/* Переносить «Модельный ряд» можно: колонка героя — половина контейнера, и на
   крупном кегле строка в неё не влезает. Раньше её держал nowrap, поэтому и
   кегль был заперт на 70px. */
.л-герой h1 .строка { display: block; }
.л-герой h1 .цвет { color: var(--л-акцент); display: block; }
.л-герой .лид { font-size: 17px; line-height: 1.5; color: var(--л-текст); margin: 0 0 34px; max-width: 460px; }
.л-герой .кнопки { display: flex; gap: 14px; margin-bottom: 38px; flex-wrap: wrap; }
.л-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--л-линия); border: 1px solid var(--л-линия); }
.л-kpi div { background: var(--л-фон); padding: 16px 18px; }
.л-kpi b { display: block; font-family: 'Oswald', sans-serif; font-size: 30px; font-weight: 600; line-height: 1; }
/* Подпись — прямой ребёнок плитки: внутри значения тоже бывает span (.цел),
   и общее «.л-kpi span» делало его мелкой моноширинной подписью. */
.л-kpi div > span { display: block; font-family: 'PlexMono', monospace; font-size: 10px; color: var(--л-метка); letter-spacing: .12em; margin-top: 5px; }
.л-медиа { position: relative; background: var(--л-подложка); border-left: 1px solid var(--л-линия); min-height: 600px; min-width: 0; }
.л-медиа img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 40px; }
/* Ролик героя заполняет блок целиком (`cover`), а не вписывается с полями:
   студия в кадре темнее подложки сайта (#b8b8b6 против #F4F6F7), и при
   `contain` вокруг видео появлялась серая рамка на светлом блоке. */
.л-медиа video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  background-size: cover; background-position: center; }
/* Логотип лежит слоем разметки, а не вжжён в файл: `cover` срезает у кадра
   верх и низ, и вжжённая надпись уходила бы под обрез на узких экранах. */
/* `inset` идёт ПЕРЕД `top`: сокращённое свойство сбрасывает все четыре
   стороны, и записанное после него `top` оно бы затёрло в `auto` — логотип
   уезжал под самый верх блока. */
.л-медиа .л-лого-поверх {
  position: absolute; inset: auto auto auto 50%; top: 64px; transform: translateX(-50%);
  width: 38%; max-width: 300px; height: auto; padding: 0; pointer-events: none;
}
.л-медиа .подпись {
  position: absolute; left: 0; bottom: 0; background: var(--л-тёмный); color: #fff;
  font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .12em; padding: 12px 18px; pointer-events: none;
}
/* На главной ролик и подпись — ссылка на машину из кадра (14.09.2026) */
.л-медиа .л-медиа-ссылка { position: absolute; inset: 0; z-index: 1; }
.л-медиа a.подпись { pointer-events: auto; z-index: 2; transition: background-color .14s ease-out; }
.л-медиа a.подпись:hover, .л-медиа .л-медиа-ссылка:hover ~ .подпись { background: var(--л-акцент); }

/* --- заголовки секций --- */
.л-кикер { font-family: 'PlexMono', monospace; font-size: 11px; color: var(--л-метка); letter-spacing: .18em; margin-bottom: 10px; }
.л-шапка-секции { padding: 56px var(--л-поле) 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.л-шапка-секции h2 { font-size: 44px; font-weight: 600; line-height: 1; }
.л-пилюли { display: flex; gap: 8px; flex-wrap: wrap; }
.л-пилюли button {
  border: 1px solid var(--л-линия); color: var(--л-текст); background: var(--л-фон);
  padding: 10px 18px; border-radius: 100px; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .06em;
  cursor: pointer; transition: background-color .14s ease-out, color .14s ease-out, border-color .14s ease-out;
}
.л-пилюли button:hover { border-color: var(--л-тёмный); }
.л-пилюли button.on { background: var(--л-тёмный); color: #fff; border-color: var(--л-тёмный); }

/* --- сетка моделей --- */
/* Под вырезами техники нет серой подложки (design_handoff_no_plate, 21.08.2026):
   фото BRP — прозрачные PNG/AVIF одного размера 661×480 с колёсами на общей
   базовой линии, поэтому бокс фиксированной высоты держит сетку и без заливки.
   Подложка остаётся у галереи модели (ракурсы — webp на сером мате), у строки-хита
   (там, наоборот, белый бокс на сером фоне — маркер выбора) и у пустого фото. */
/* Линии сетки рисуем обводкой карточек, а не фоном контейнера: при фоне
   недозаполненная последняя строка проступала серым прямоугольником —
   у снегоходов (7 карточек в три колонки) это две пустые ячейки подряд
   (Артур, 25.08.2026). Обводка не занимает места, поэтому зазор в 1px
   остаётся прежним и линии не удваиваются. */
.л-сетка { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--л-фон);
  border-top: 1px solid var(--л-линия); border-bottom: 1px solid var(--л-линия); margin-top: 24px; }
.л-карта { background: var(--л-фон); padding: 22px; display: flex; flex-direction: column;
  outline: 1px solid var(--л-линия); }
.л-карта .фото { height: 190px; margin-bottom: 20px; display: block; }
.л-карта .фото img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.л-карта .кат { font-family: 'PlexMono', monospace; font-size: 10px; color: var(--л-метка); letter-spacing: .14em; margin-bottom: 7px; }
.л-карта .имя { font-family: 'Oswald', sans-serif; font-size: 23px; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; }
.л-карта .цена { font-family: 'Oswald', sans-serif; font-size: 27px; font-weight: 600; margin-bottom: 14px; }
.л-карта .цена i { font-style: normal; font-family: 'PlexMono', monospace; font-size: 13px; color: var(--л-метка); }
.л-карта .цена.запрос { font-size: 20px; color: var(--л-приглушённый); }
/* Рублёвая цена под долларовой (Артур, 11.09.2026): тот же Oswald, мельче и
   тоньше — главной остаётся долларовая. Курс на сайте не печатается, только
   сумма. Цвет наследуется: в сравнении выбранная колонка остаётся акцентной. */
.руб { font-family: 'Oswald', sans-serif; font-weight: 500; white-space: nowrap; }
.л-карта .цена + .руб { display: block; font-size: 18px; line-height: 1.2; margin: -10px 0 14px; }
.л-чипы { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.л-чип { background: var(--л-подложка); color: var(--л-текст); font-family: 'PlexMono', monospace; font-size: 10px; padding: 5px 8px; }
.л-карта .л-кн { margin-top: auto; width: 100%; padding: 12px; font-size: 12px; letter-spacing: .08em; }
.л-подвал-секции { padding: 20px var(--л-поле) 56px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.л-подвал-секции .мет { font-size: 11px; color: var(--л-метка); letter-spacing: .1em; }
.л-ссылка { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--л-акцент); text-transform: uppercase; }
.л-ссылка:hover { color: #0B8B76; }

/* --- направления: список слева, одно фото справа (17b) --- */
/* Прежние четыре плитки 2×2 занимали полтора экрана, дублировали кнопку
   кликом по плитке и не показывали цену. Список ставит направления друг под
   друга: цены и число моделей сравниваются взглядом, а фото одно на весь блок
   и меняется по наведению (design_handoff_directions, 27.08.2026). */
/* Блок направлений — тёмный. Главная шла белой простынёй: герой, витрина,
   направления — три светлых экрана подряд, и взгляду не за что зацепиться.
   У автомобильных сайтов ритм строится чередованием полос: тёмная сцена, где
   работает фотография, светлая — где работает текст. Здесь как раз фотография.
   Цвета — те же из системы: тёмный #101418, линии #2A3037, текст #A8AEB6. */
/* Общий кикер оставляет под заголовком 24 px — на светлых секциях этого
   хватает, а здесь заголовок упирался прямо в первую строку списка и в кадр
   (Артур, 01.09.2026: «прилипла к снегоходу»). Отступ увеличен только у этого
   блока, чтобы не сдвигать остальные секции страницы. */
.л-напр-шапка { background: var(--л-тёмный); color: #fff; }
.л-напр-шапка .л-шапка-секции { padding-bottom: 56px; }
/* Линия под шапкой — того же цвета, что разделители строк списка ниже
   (--л-линия, светлая). Тёмная #2A3037 из общего правила на чёрном поле
   не читалась вовсе, а промежуточный серый выглядел тоньше соседних линий:
   рядом стоят две линии, и разной их делать нельзя (Артур, 02.09.2026). */
.л-напр-шапка + .л-направления { border-top-color: var(--л-линия); }
.л-напр-шапка .л-кикер { color: var(--л-метка); }
.л-направления {
  border-top: 1px solid var(--л-линия-тёмная); display: grid; grid-template-columns: minmax(0, 1fr) 620px;
  background: var(--л-тёмный); color: #fff;
}
.л-направления .л-напр-список { border-right-color: var(--л-линия-тёмная); }
.л-напр-строка { border-bottom-color: var(--л-линия-тёмная); }
.л-напр-строка .опис { color: var(--л-текст-тёмный-фон); }
.л-напр-фото { background: #171C22; }
/* Плашка на тёмном фоне сливалась бы с секцией — отделяем линией. */
.л-напр-плашка { border-top: 1px solid var(--л-линия-тёмная); }
/* Высоту блока задаёт список, и она должна остаться НЕ БОЛЬШЕ 520 px: при
   колонке фото 620 это ровно пропорция кадра BRP (1240×1040). Список выше —
   и cover срезает кадр по бокам, то есть саму машину: она занимает в кадре
   всю ширину, запаса по краям рендер не оставляет (Артур, 27.08.2026:
   «не помещаются фотки»). Список ниже — срезается фон сверху и снизу, это
   безопасно. Поэтому поля строк 20 px и описание ровно в две строки. */
.л-напр-список { border-right: 1px solid var(--л-линия); min-width: 0; display: grid; grid-auto-rows: 1fr; }
.л-напр-строка {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px;
  padding: 20px 40px; border-bottom: 1px solid var(--л-линия); position: relative;
  color: inherit; text-decoration: none;
}
.л-напр-список > .л-напр-строка:last-child { border-bottom: 0; }
.л-напр-строка:hover, .л-напр-строка:focus-visible { background: #171C22; outline: none; }
/* Полоса слева — единственный акцент блока; она же метка выбранной строки,
   поэтому у наведения без выбора её нет. */
.л-напр-строка.выбрана { background: #171C22; }
.л-напр-строка.выбрана::before,
.л-напр-строка:focus-visible::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--л-акцент);
}
.л-напр-строка .верх { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.л-напр-строка h3 { font-family: 'Oswald', sans-serif; font-size: 34px; font-weight: 600; line-height: 1; text-transform: uppercase; }
.л-напр-строка .счёт { font-family: 'PlexMono', monospace; font-size: 10px; color: var(--л-метка); letter-spacing: .12em; }
.л-напр-строка .опис { font-size: 15px; line-height: 1.5; color: var(--л-текст); max-width: 440px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.л-напр-строка .цена { text-align: right; }
.л-напр-строка .цена .мет { font-family: 'PlexMono', monospace; font-size: 10px; color: var(--л-метка); letter-spacing: .12em; margin-bottom: 3px; }
.л-напр-строка .цена b { font-family: 'Oswald', sans-serif; font-size: 28px; font-weight: 600; line-height: 1; white-space: nowrap; }
/* Фото направления. Кадры сняты рендером BRP в среде (снег, грунт, вода) —
   единственное место на сайте, где техника не вырезана: скрипты/фото-направлений.mjs. */
/* Пропорция та же, что у кадра (1240×1040): при любом другом отношении
   cover срезал технику по бокам — она занимает в кадре всю ширину, и запаса
   по краям у рендера BRP нет (Артур, 27.08.2026: «не помещаются фотки»).
   Строки списка поэтому и ужаты: четыре по 130 укладываются в 520 и не
   растягивают колонку фото. Где колонка уже (планшет), кадр обрезается уже
   по вертикали — там срезается фон, а не машина. */
/* Плашка не лежит поверх кадра, а стоит под ним: рендер BRP сажает технику
   почти на нижний край, и тёмная полоса срезала колёса (Артур, 27.08.2026:
   «ну не влазит же»). Общая высота блока при этом та же, что в макете, —
   меняется только то, что фотография не перекрыта. */
.л-напр-фото { position: relative; min-width: 0; background: var(--л-подложка); display: block; }
.л-напр-кадр { position: absolute; left: 0; right: 0; top: 0; bottom: 92px; overflow: hidden; }
.л-напр-фото img,
/* Постер продублирован фоном: пока файл не загружен, у <video> нет ничего
   своего и сквозь него видна тёмная подложка карточки — на телефоне это
   читалось как «чёрный квадрат» (Артур, 01.09.2026). */
.л-напр-фото video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .16s ease-out; background-size: cover; background-position: center; }
.л-напр-фото img.видно,
.л-напр-фото video.видно { opacity: 1; }
.л-напр-плашка {
  position: absolute; left: 0; right: 0; bottom: 0; height: 92px; background: var(--л-тёмный); color: #fff;
  padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  pointer-events: none;
}
.л-напр-плашка .бренд { font-family: 'PlexMono', monospace; font-size: 10px; color: var(--л-метка); letter-spacing: .14em; margin-bottom: 5px; }
.л-напр-плашка .модель { font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600; text-transform: uppercase; }
.л-напр-плашка .смотреть { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--л-акцент); text-transform: uppercase; white-space: nowrap; }
/* Кому анимации противопоказаны — ни перехода, ни движения в кадре:
   ролики не запускаются, остаётся постер. */
@media (prefers-reduced-motion: reduce) {
  .л-напр-фото img, .л-напр-фото video { transition: none; }
}
/* Лента направлений для телефона: включается в мобильном блоке правил внизу. */
.л-напр-лента { display: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1px; background: var(--л-линия-тёмная); -webkit-overflow-scrolling: touch; }
/* Карточка занимает экран целиком: при 82% из-за края было видно начало
   соседней, и лента читалась как обрезанная вёрстка, а не как «листай дальше»
   (Артур, 01.09.2026). Между карточками зазор в 1px — он же линия. */
.л-напр-лента > a { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; position: relative; background: #171C22; color: #fff; }
.л-напр-лента .кадр { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background-size: cover; background-position: center; }
.л-напр-лента .кадр img,
.л-напр-лента .кадр video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.л-напр-лента .низ { padding: 12px 16px 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.л-напр-лента .бренд { font-family: 'PlexMono', monospace; font-size: 9px; letter-spacing: .14em; color: var(--л-метка); }
.л-напр-лента .модель { font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: 600; text-transform: uppercase; }
.л-напр-лента .смотреть { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--л-акцент); text-transform: uppercase; white-space: nowrap; }

/* Подпись «На фото …» под ценой карточки: превью снято с топовой версии,
   а цена показана «от» базовой (см. подписьФото). Тон как у метки, не крупнее
   чипов — это уточнение, а не заголовок. */
.л-подпись-фото {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--л-метка); margin-top: 4px; line-height: 1.4;
}
.л-строка .право .л-подпись-фото { margin-top: 2px; margin-bottom: 6px; text-align: right; }
.л-карта .л-подпись-фото { display: block; }
/* --- полоса «не нашли» --- */
.л-полоса {
  background: var(--л-подложка); border-bottom: 1px solid var(--л-линия);
  padding-block: 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.л-полоса .лево { display: flex; align-items: baseline; gap: 16px; min-width: 0; flex-wrap: wrap; }
.л-полоса .заг { font-family: 'Oswald', sans-serif; font-size: 26px; font-weight: 600; text-transform: uppercase; }
.л-полоса .пояс { font-size: 15px; color: var(--л-текст); }
.л-полоса .право { display: flex; align-items: center; gap: 18px; }
.л-полоса .тел { font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 600; white-space: nowrap; }
/* Тёмный вариант — финальный CTA на «Доставке»: акцент страницы переехал в её
   конец, на светлой подложке он там не держал внимание. */
.л-полоса.тьма { background: var(--л-тёмный); color: #fff; border-bottom: 0; padding-block: 34px; }
.л-полоса.тьма .лево { flex-direction: column; align-items: flex-start; gap: 6px; }
.л-полоса.тьма .заг { font-size: 30px; }
.л-полоса.тьма .пояс { color: var(--л-текст-тёмный-фон); }

/* --- тёмная секция логистики --- */
.л-тьма { background: var(--л-тёмный); color: #fff; padding-block: 56px; }
.л-тьма .верх { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; gap: 32px; flex-wrap: wrap; }
.л-тьма .л-кикер { color: var(--л-акцент); }
.л-тьма h2 { font-size: 44px; font-weight: 600; line-height: 1; }
.л-тьма .лид { max-width: 380px; font-size: 15px; line-height: 1.55; color: var(--л-текст-тёмный-фон); margin: 0; }
.л-шаги { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--л-линия-тёмная); }
.л-шаги > div { background: var(--л-тёмный); padding: 26px 24px; display: flex; flex-direction: column; }
.л-шаги .ном { font-family: 'Oswald', sans-serif; font-size: 34px; color: var(--л-акцент); line-height: 1; margin-bottom: 14px; }
.л-шаги .заг { font-family: 'Oswald', sans-serif; font-size: 19px; font-weight: 600; margin-bottom: 8px; text-transform: uppercase; }
.л-шаги .опис { font-size: 14px; line-height: 1.5; color: var(--л-текст-тёмный-фон); }

/* --- форма --- */
.л-форма-секция { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--л-линия); }
.л-форма-текст { padding: 56px var(--л-поле); }
.л-форма-текст h2 { font-size: 52px; font-weight: 600; line-height: 1; margin-bottom: 18px; }
.л-форма-текст p { font-size: 16px; line-height: 1.55; color: var(--л-текст); max-width: 420px; margin: 0 0 26px; }
.л-галочки { display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: var(--л-тёмный); }
.л-галочки div { display: flex; gap: 10px; }
.л-галочки b { color: var(--л-акцент); }
.л-форма { padding: 56px var(--л-поле); background: var(--л-подложка); border-left: 1px solid var(--л-линия); }
.л-форма .поля { display: grid; gap: 14px; }
.л-форма .пара { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.л-форма label { display: block; font-family: 'PlexMono', monospace; font-size: 10px; color: var(--л-метка); letter-spacing: .14em; margin-bottom: 6px; text-transform: uppercase; }
.л-форма input, .л-форма select {
  width: 100%; background: var(--л-фон); border: 1px solid var(--л-линия); border-radius: 0;
  padding: 15px 16px; font: inherit; font-size: 15px; color: var(--л-тёмный); min-height: 50px;
}
.л-форма input:focus, .л-форма select:focus { outline: none; border-color: var(--л-акцент); }
.л-форма input:focus-visible, .л-форма select:focus-visible { outline: 2px solid var(--л-тёмный); outline-offset: 1px; }
.л-форма .ошибка input, .л-форма .ошибка select { border-color: #C0392B; }
.л-форма .текст-ошибки { display: none; font-size: 12px; color: #C0392B; margin-top: 6px; }
/* Мини-форма предзаказа поверх страницы модели (Артур, 22.08.2026): клиент не
   уходит с выбранной машины. Радиус 0, теней нет — как у всего сайта. */
.л-миниформа { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
.л-миниформа .тень { position: absolute; inset: 0; background: rgba(16, 20, 24, .55); }
.л-миниформа .окно { position: relative; width: 100%; max-width: 480px; background: var(--л-фон); padding: 28px; max-height: calc(100vh - 40px); overflow-y: auto; }
.л-миниформа .л-форма { padding: 0; border: 0; background: none; }
.л-миниформа .заг { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.л-миниформа h3 { font-family: 'Oswald', sans-serif; font-size: 26px; font-weight: 600; text-transform: uppercase; line-height: 1.05; }
.л-миниформа .закрыть { width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--л-линия); background: none; cursor: pointer; font-size: 20px; color: var(--л-тёмный); }
.л-миниформа .сводка { border: 1px solid var(--л-линия); padding: 14px 16px; margin-bottom: 18px; display: grid; gap: 4px; }
.л-миниформа .сводка .что { font-size: 15px; color: var(--л-тёмный); }
.л-миниформа .сводка .сумма { font-family: 'Oswald', sans-serif; font-size: 28px; font-weight: 600; }
.л-миниформа .сводка .руб { font-size: 18px; margin-top: 2px; }
.л-миниформа .сводка .л-мета { margin: 0; }
.л-миниформа .поля { display: grid; gap: 14px; }
.л-миниформа .л-кн { width: 100%; min-height: 56px; }
.л-миниформа .согласие { font-size: 12px; color: var(--л-метка); line-height: 1.5; margin-top: 10px; }
.л-миниформа .успех { display: grid; gap: 12px; font-size: 15px; line-height: 1.5; }
.л-миниформа .успех b { font-family: 'Oswald', sans-serif; font-size: 24px; font-weight: 600; text-transform: uppercase; }
body.мини-открыта { overflow: hidden; }
.л-форма .ошибка .текст-ошибки { display: block; }
.л-форма .л-кн { width: 100%; padding: 18px; margin-top: 6px; }
.л-форма .л-кн[disabled] { opacity: .6; cursor: default; }
.л-форма .согласие { font-size: 12px; color: var(--л-метка); line-height: 1.5; }
/* Ловушка уводится за пределы экрана, а не прячется display:none: часть
   роботов пропускает скрытые поля, но заполняет те, что «есть» в разметке. */
.л-ловушка { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Галочка согласия. Кегль 13 и основной цвет текста, а не серая метка: это
   то, чем человек распоряжается своими данными, а не сноска. Вся строка —
   тач-цель (label), высота от 44. */
/* Селектор с тегом намеренно: это тоже <label>, а `.л-форма label` задаёт всем
   подписям моно-капс кеглем 10 и специфичнее одного класса — строка согласия
   выходила служебной надписью вразрядку. */
.л-согласие, .л-форма label.л-согласие, .л-миниформа label.л-согласие {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: 'Plex', -apple-system, 'Segoe UI', system-ui, Arial, sans-serif;
  font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0;
  text-transform: none; text-align: left; color: var(--л-текст);
  min-height: 44px; padding: 10px 0; margin: 4px 0 0;
}
/* min-height обязателен: поля формы получают min-height 50, а он всегда бьёт
   height — галочка становилась колонкой 20×50 и квадратик вставал по центру
   этой высоты, то есть заметно ниже своей же подписи (Артур, 02.09.2026). */
.л-согласие input, .л-форма .л-согласие input, .л-миниформа .л-согласие input {
  flex: 0 0 auto; width: 20px; height: 20px; min-height: 20px; margin: 0;
  accent-color: var(--л-акцент); cursor: pointer;
}
.л-согласие a { text-decoration: underline; text-underline-offset: 2px; color: var(--л-текст); }
.л-согласие a:hover { color: var(--л-акцент); }
/* Не отмечена, а человек нажал «Отправить» — красим строку сигнальным цветом
   и подписываем словом: цвет здесь не единственный носитель смысла. */
.л-согласие.ошибка { color: var(--л-сигнал); }
.л-согласие.ошибка input { outline: 2px solid var(--л-сигнал); outline-offset: 2px; }
.л-согласие.ошибка span::after { content: ' — отметьте, чтобы отправить'; font-weight: 600; }
.л-успех { background: var(--л-фон); border: 1px solid var(--л-линия); padding: 32px; }
.л-успех b { display: block; font-family: 'Oswald', sans-serif; font-size: 24px; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; }
.л-успех span { color: var(--л-текст); font-size: 15px; }

/* --- футер --- */
.л-футер {
  background: var(--л-фон); border-top: 1px solid var(--л-линия); padding-block: 34px;
  display: flex; flex-direction: column; gap: 22px;
  font-size: 13px; color: var(--л-метка);
}
.л-футер .ряд { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
/* Правовая строка. Цвет — основной текст, а не метка: у метки контраст к белому
   3,0:1, для мелкого кегля это ниже нормы AA, а читать эту строку человек
   приходит целенаправленно. */
.л-футер .право {
  border-top: 1px solid var(--л-линия); padding-top: 18px; display: grid; gap: 8px;
  font-size: 12px; line-height: 1.55; color: var(--л-текст);
}
/* Строки — во всю ширину подвала, вровень с линией над ними (Артур, 14.09.2026:
   «можно это во всю ширину сайта оформить?»; было max-width 900px). Шире 1440 не
   уедут: содержимое подвала держит общий контейнер сайта. */
.л-футер .право p { margin: 0; }
.л-футер .право a { text-decoration: underline; text-underline-offset: 2px; }
.л-футер .право a:hover { color: var(--л-акцент); }
.л-футер .ссылки { display: flex; gap: 26px; flex-wrap: wrap; }
.л-футер .ссылки a:hover { color: var(--л-акцент); }
.л-футер .подпись { font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .1em; }

/* Короткое имя региона нужно только ленте пилюль на телефоне */
.л-номер .действия .квадрат .полно { display: none; }
/* Подпись под кнопками связи — тоже мобильная */
.л-подпись-связи { display: none; }

/* --- мобильные части страницы модели: на десктопе выключены --- */
.л-галерея-моб, .л-спеки-моб, .только-моб { display: none; }

/* --- панель управления каталогом на телефоне (design_handoff_mobile) --- */
.л-моб-панель { display: none; }
.л-затемнение { display: none; }

/* --- липкая нижняя панель для телефона --- */
.л-низ-моб { display: none; font-family: 'Plex', -apple-system, 'Segoe UI', system-ui, Arial, sans-serif; }
.л-низ-моб, .л-низ-моб * { box-sizing: border-box; }
.л-низ-моб a { text-decoration: none; color: inherit; }

/* ============ АДАПТИВ ЛЕНДИНГА (по README хендоффа) ============ */
@media (max-width: 1279px) {
  .сайт { --л-поле: 32px; }
  .л-сетка { grid-template-columns: repeat(3, 1fr); }
  .л-герой h1 { font-size: 56px; }
  /* Колонка 460 из макета оставляла слот уже пропорции кадра, и cover срезал
     машину по бокам. 560 при списке в 464 повторяет ту же пропорцию, что и
     620 на широком экране, — режется только фон. */
  .л-направления { grid-template-columns: minmax(0, 1fr) 560px; }
  .л-напр-строка { padding: 17px 28px; }
  .л-напр-строка h3 { font-size: 28px; }
  .л-напр-строка .цена b { font-size: 24px; }
}
@media (max-width: 1023px) {
  .л-герой { grid-template-columns: 1fr; }
  .л-герой .текст { padding: 40px var(--л-поле); }
  .л-медиа { min-height: 420px; border-left: none; border-top: 1px solid var(--л-линия); }
  .л-сетка { grid-template-columns: repeat(2, 1fr); }
  /* Ниже 1024 колонка под фото уже не остаётся, а полоса во всю ширину
     вырезает из квадратного кадра середину машины — без верха и лыж. Тогда
     лучше список без фото: цены и описания в нём и так полные. */
  .л-направления { grid-template-columns: 1fr; }
  .л-напр-фото { display: none; }
  .л-напр-список { border-right: 0; }

  .л-шаги { grid-template-columns: repeat(2, 1fr); }
  .л-форма-секция { grid-template-columns: 1fr; }
  .л-форма { border-left: none; border-top: 1px solid var(--л-линия); }
  .л-нав { display: none; }
}
@media (max-width: 767px) {
  .сайт { --л-поле: 20px; }
  .л-герой h1 { font-size: 40px; }
  .л-герой h1 .строка { white-space: normal; }
  .л-сетка { grid-template-columns: 1fr; }
  .л-шаги { grid-template-columns: 1fr; }
  .л-шапка-секции h2, .л-тьма h2 { font-size: 32px; }
  .л-форма-текст h2 { font-size: 36px; }
  .л-медиа { min-height: 300px; }
  .л-медиа .л-лого-поверх { top: 10px; width: 32%; }
  .л-полоса .заг { font-size: 22px; white-space: normal; }
  /* Наведения на телефоне нет, поэтому одно фото на четыре строки показывало бы
     всегда первое направление. Вместо него — лента: по кадру на направление,
     листается пальцем, каждый кадр ведёт в свой раздел. */
  .л-напр-фото { display: none; }
  .л-напр-лента { display: flex; }
  .л-напр-шапка .л-шапка-секции { padding-bottom: 26px; }
  /* Без фото выбранной строки не существует: подсвечивать одну из четырёх
     значило бы обещать состояние, которого на телефоне нет. */
  .л-напр-строка.выбрана { background: transparent; }
  .л-напр-строка.выбрана::before { content: none; }
  .л-напр-строка { grid-template-columns: 1fr; gap: 6px; padding: 16px var(--л-поле); min-height: 64px; }
  .л-напр-строка h3 { font-size: 22px; }
  .л-напр-строка .верх { margin-bottom: 2px; }
  .л-напр-строка .цена { text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .л-напр-строка .цена .мет { margin-bottom: 0; }
  .л-напр-строка .цена b { font-size: 20px; }
  .л-напр-строка .опис { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* Телефон и «Предзаказ» уезжают в липкую панель — в шапке им тесно */
  .л-шапка .л-право { display: none; }
  .л-низ-моб {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--л-фон); border-top: 1px solid var(--л-линия); align-items: center;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); gap: 10px;
  }
  .л-низ-моб .л-кн.акцент { flex: 1; min-height: 52px; padding: 14px 18px; font-size: 12px; }
  .л-звонок-низ {
    display: flex; align-items: center; justify-content: center; flex: 0 0 52px;
    width: 52px; height: 48px; border: 1px solid var(--л-тёмный); color: var(--л-тёмный);
  }
  .л-звонок-низ svg { width: 20px; height: 20px; fill: currentColor; }
  /* Доставка: панель тёмная — акцент страницы в её конце, а не в белой полосе */
  .л-низ-моб.тьма { background: var(--л-тёмный); border-top-color: var(--л-тёмный); }
  .л-пилюли button { padding: 12px 20px; min-height: 44px; }
  /* Города наличия в шоуруме — сеткой в две равные колонки, название слева, число справа; нечётный
     последний — во всю ширину (Артур, 16.09.2026, скрин: «расположение иконок можешь сделать как-то
     по другому» — пилюли разной ширины ложились рваными рядами). На компьютере — пилюли как были. */
  .л-склад .л-пилюли { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .л-склад .л-пилюли button { display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 12px 16px; text-align: left; }
  .л-склад .л-пилюли button:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .л-склад .л-пилюли .разд { display: none; }
  .л-склад .л-пилюли button:not(.on) .число { color: var(--л-метка); }
  .л-футер .ссылки { gap: 8px 20px; }
  .л-футер .ссылки a, .л-ссылка, .л-карта .л-кн {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .л-нав a { min-height: 44px; display: inline-flex; align-items: center; }
  .л-карта .имя { display: flex; align-items: center; min-height: 44px; }
  .л-лого { min-height: 44px; }
  .сайт { padding-bottom: 86px; }

}



/* ============ ВНУТРЕННИЕ ЭКРАНЫ ХЕНДОФФА (2a, 2b, 2c, 3a, 4a, 5a) ============
   Те же токены и та же геометрия, что на главной: радиус 0, теней нет,
   «линии» между ячейками — это зазор grid gap:1px на фоне цвета линий. */

/* --- бургер: на планшете и телефоне меню прячется в него --- */
.л-бургер {
  display: none; background: none; border: 0; padding: 0 20px; cursor: pointer;
  color: var(--л-тёмный); align-items: center; align-self: stretch;
}
.л-бургер svg { width: 22px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }

/* --- крошки и заголовок внутренней страницы --- */
.л-крошки {
  font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .14em;
  color: var(--л-метка); text-transform: uppercase; margin-bottom: 14px;
}
.л-крошки a:hover { color: var(--л-акцент); }
.л-заг {
  padding: 34px var(--л-поле) 26px; border-bottom: 1px solid var(--л-линия);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap;
}
.л-заг .лево { min-width: 0; }
.л-заг h1 { font-size: 64px; line-height: .98; font-weight: 700; letter-spacing: -.01em; margin-bottom: 16px; }
.л-заг h1 .цвет { color: var(--л-акцент); }
.л-заг p { font-size: 17px; line-height: 1.5; color: var(--л-текст); max-width: 640px; margin: 0; }
.л-kpi.n2 { grid-template-columns: repeat(2, 1fr); }
.л-kpi.n4 { grid-template-columns: repeat(2, 1fr); }
.л-kpi.n4 b { font-size: 24px; }

/* ============ 2a — КАТАЛОГ ============ */
.л-каталог { display: grid; grid-template-columns: 248px 1fr; align-items: start; }
.л-каталог > .право { min-width: 0; }
.л-каталог > .право > .л-подвал-секции { padding: 24px 32px 40px; }
.л-каталог > .право > .л-сетка { border-top: 0; }
.л-фильтры {
  border-right: 1px solid var(--л-линия); padding: 26px 24px 32px; min-width: 0;
  position: sticky; top: 67px; align-self: start;
}
/* Под сбросом — помощь: раньше там висела пустота во весь экран */
.л-помощь-фильтров { background: var(--л-подложка); padding: 18px 18px 20px; margin-top: 22px; }
.л-помощь-фильтров h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.л-помощь-фильтров p { font-size: 13px; line-height: 1.5; color: var(--л-текст); margin: 0 0 14px; }
.л-помощь-фильтров .л-кн { width: 100%; padding: 12px; }
.л-помощь-фильтров .метка {
  font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .14em;
  color: var(--л-метка); text-transform: uppercase; margin: 14px 0 2px;
}
.л-помощь-фильтров .тел { font-family: 'Oswald', sans-serif; font-size: 15px; font-weight: 600; }
.л-фсекция { margin-bottom: 26px; }
.л-фзаг {
  font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .16em;
  color: var(--л-метка); text-transform: uppercase; margin-bottom: 12px;
}
.л-типы { display: grid; gap: 1px; background: var(--л-линия); border: 1px solid var(--л-линия); }
.л-типы button {
  background: var(--л-фон); border: 0; width: 100%; text-align: left; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 14px; font: inherit; font-size: 14px; color: var(--л-тёмный);
}
.л-типы button .счёт { font-family: 'PlexMono', monospace; font-size: 11px; color: var(--л-метка); }
.л-типы button.on { background: var(--л-тёмный); color: #fff; font-weight: 600; }
.л-типы button.on .счёт { color: #fff; }
.л-чек { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; font-size: 14px; }
.л-чек .кв {
  width: 16px; height: 16px; flex: none; border: 1px solid var(--л-линия);
  display: flex; align-items: center; justify-content: center; font-size: 11px; color: transparent;
}
.л-чек.on .кв { background: var(--л-тёмный); border-color: var(--л-тёмный); color: #fff; }
.л-чек .счёт { margin-left: auto; font-family: 'PlexMono', monospace; font-size: 11px; color: var(--л-метка); }
.л-слайдер { position: relative; height: 22px; margin: 6px 0 8px; }
.л-слайдер .трек { position: absolute; top: 10px; left: 0; right: 0; height: 2px; background: var(--л-линия); }
.л-слайдер .актив { position: absolute; top: 10px; height: 2px; background: var(--л-акцент); }
.л-слайдер input {
  position: absolute; top: 0; left: 0; width: 100%; height: 22px; margin: 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.л-слайдер input:focus { outline: none; }
/* Фокус с клавиатуры — на самом ползунке: сам input невидим и растянут на всю полосу */
.л-слайдер input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--л-тёмный); }
.л-слайдер input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--л-тёмный); }
.л-слайдер input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; border: 0; border-radius: 0;
  background: var(--л-тёмный); pointer-events: auto; cursor: pointer;
}
.л-слайдер input::-moz-range-thumb {
  width: 12px; height: 12px; border: 0; border-radius: 0;
  background: var(--л-тёмный); pointer-events: auto; cursor: pointer;
}
.л-цены-подписи {
  display: flex; justify-content: space-between;
  font-family: 'PlexMono', monospace; font-size: 11px; color: var(--л-метка);
}
.л-места { display: flex; gap: 8px; flex-wrap: wrap; }
.л-места button {
  border: 1px solid var(--л-линия); background: var(--л-фон); cursor: pointer;
  font-family: 'PlexMono', monospace; font-size: 11px; padding: 8px 13px; color: var(--л-тёмный);
}
.л-места button.on { background: var(--л-тёмный); color: #fff; border-color: var(--л-тёмный); }
.л-сброс {
  width: 100%; border: 1px solid var(--л-линия); background: none; color: var(--л-приглушённый);
  padding: 13px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.л-сброс:hover { border-color: var(--л-тёмный); color: var(--л-тёмный); }
.л-результаты {
  padding: 20px 32px; border-bottom: 1px solid var(--л-линия);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.л-результаты .мет { font-size: 11px; letter-spacing: .12em; color: var(--л-метка); text-transform: uppercase; }
.л-результаты .право { display: flex; gap: 22px; align-items: center; font-size: 13px; color: var(--л-метка); }
.л-результаты select {
  border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--л-тёмный); cursor: pointer; padding: 4px 2px;
}
.л-кн-фильтры, .л-закрыть-фильтры, .л-низ-шита { display: none; } /* только в мобильном шите */
.л-сетка.три { grid-template-columns: repeat(3, 1fr); }
.л-карта .фото { position: relative; }
.л-карта.каталожная {
  padding: 20px; display: flex; flex-direction: column; color: inherit;
  transition: background-color .14s ease-out;
}
.л-карта.каталожная:hover { background: var(--л-подложка); }
/* Второй ракурс по наведению. Кадры уже сняты и лежат — карточка показывает
   машину с другой стороны, не заставляя открывать страницу. Подставляется
   только при первом наведении: грузить по второй картинке на каждую из
   тридцати карточек заранее незачем. */
.л-карта .фото .первая { transition: opacity .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .л-карта .фото img { transition: none; } }
.л-карта.каталожная .фото {
  display: block; height: 186px; margin-bottom: 16px; overflow: hidden;
}
/* contain, а не cover из хендоффа: длинные багги и шестиколёсники при обрезке
   теряли колёса и бампер — правило проекта «фото вписывается целиком». */
.л-карта.каталожная .фото img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.л-карта.каталожная .имя {
  display: block; font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600;
  margin-bottom: 8px; text-transform: uppercase;
}
.л-карта.каталожная .цена {
  display: block; font-family: 'Oswald', sans-serif; font-size: 27px; font-weight: 600; margin-bottom: 12px;
}
.л-карта.каталожная .цена.запрос { font-size: 20px; color: var(--л-приглушённый); }
.л-карта.каталожная .цена i { font-style: normal; font-family: 'PlexMono', monospace; font-size: 11px; color: var(--л-метка); }
.л-карта.каталожная .цена + .руб { margin: -8px 0 12px; }
.л-карта.каталожная .л-чипы { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.л-карта.каталожная .л-кн {
  margin-top: auto; width: 100%; padding: 11px; font-size: 11px; letter-spacing: .08em;
  border-color: var(--л-тёмный); color: var(--л-тёмный); background: none; text-align: center;
}
.л-карта.каталожная:hover .л-кн { background: var(--л-тёмный); color: #fff; }
/* Бейджи не должны перехватывать клик по карточке */
.л-карта.каталожная .угол { pointer-events: none; }
.л-карта .угол {
  position: absolute; left: 0; top: 0; font-family: 'PlexMono', monospace;
  font-size: 10px; letter-spacing: .1em; padding: 5px 8px; text-transform: uppercase;
}
.л-карта .угол.сигнал { background: var(--л-сигнал-фон); color: var(--л-сигнал); }
.л-карта .угол.тёмный { background: var(--л-тёмный); color: #fff; }
.л-пара-кн { display: flex; gap: 10px; margin-top: auto; }
.л-пара-кн .л-кн { flex: 1; margin-top: 0; padding: 12px 8px; }

/* ============ 2b — СТРАНИЦА МОДЕЛИ ============
   Правка по хендоффу design_handoff_model_page: цена и кнопки подняты под H1
   (раньше уезжали за сгиб у моделей с 11–14 версиями), описание и KPI ушли
   под фото, версии свёрнуты тумблером по числу мест, миниатюры стали
   ракурсами и живут в колонке фото. */
.л-покупка { display: grid; grid-template-columns: 1fr 460px; border-bottom: 1px solid var(--л-линия); }
.л-покупка > .лево { border-right: 1px solid var(--л-линия); min-width: 0; }
.л-покупка > .лево > .л-крошки { padding: 22px 32px 16px; margin: 0; }
.л-главфото {
  position: relative; height: 520px; background: var(--л-подложка);
  border-top: 1px solid var(--л-линия); border-bottom: 1px solid var(--л-линия);
}
/* Галерея остаётся на серой подложке (Артур, 21.08.2026, после трёх вариантов без неё):
   ракурсы ZeroLight — webp на сером мате без прозрачности, белого варианта у сервиса
   BRP нет; cover «раздувал» технику, подобранный градиент и размытая копия кадра
   оставляли видимые границы. Решено не трогать. */
.л-главфото img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 24px; }
/* Кадр снят с фоном — студийный мат или сцена на воде. Тогда contain оставляет
   по краям поля блока, и они видны белыми полосами вокруг фотографии
   (Артур, 26.08.2026: «можно эти фотки сделать вровень с рамкой?»).
   Подгоняем РАМКУ под пропорцию кадра (16:9), а не кадр под рамку: cover тут
   не годится — у вида сзади и у кадра приборов техника доходит до самого низа
   кадра (запас 6 и 0 пикселей), и заполнение по высоте срезало бы корму.
   Высота при этом задаётся пропорцией, поэтому фиксированную снимаем: с ней
   aspect-ratio не работает. */
/* Кадр со сценой сам держит фон, поэтому рамка подгоняется под него, а не
   наоборот. Пропорция не всегда 16:9: длинные машины (Outlander 6x6) сервис
   отдаёт кадром 1800×620, и жёсткое 16/9 добавило бы им полей сверху и снизу
   (Артур, 27.08.2026). Пропорцию ставит скрипт по первому загруженному кадру. */
.с-фоном .л-главфото { height: auto; aspect-ratio: 16 / 9; }
.с-фоном .л-мини button { height: auto; aspect-ratio: 16 / 9; }
/* Кадры со сценой доходят до самых краёв миниатюры, и светло-серый шов между
   ними пропадал: на снегу Ski-Doo лента читалась как одна картинка, а не как
   четыре кадра (Артур, 27.08.2026). Для сцены шов темнее и шире. */
.с-фоном .л-мини { gap: 2px; background: rgba(16, 20, 24, .45); }
.с-фоном .л-главфото img,
.с-фоном .л-мини button img,
.с-фоном .л-галерея-моб .кадр img { object-fit: contain; padding: 0; }
.с-фоном .л-галерея-моб .кадр { height: auto; aspect-ratio: 16 / 9; }
.л-главфото .подпись {
  position: absolute; left: 0; bottom: 0; background: var(--л-тёмный); color: #fff;
  font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .12em;
  padding: 10px 16px; text-transform: uppercase; pointer-events: none; max-width: 100%;
}
.л-мини { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--л-линия); }
.л-мини button {
  position: relative; height: 96px; background: var(--л-фон);
  border: 0; padding: 0; cursor: pointer; overflow: hidden;
}
.л-мини button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.л-мини button.on { outline: 2px solid var(--л-акцент); outline-offset: -2px; z-index: 1; }

/* «Коротко о версии» — описание и KPI, выселенные из панели покупки */
.л-коротко { padding: 22px 32px 28px; border-top: 1px solid var(--л-линия); }
.л-коротко .метка {
  font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .16em;
  color: var(--л-метка); text-transform: uppercase; margin-bottom: 10px;
}
.л-коротко p { font-size: 16px; line-height: 1.55; color: var(--л-текст); max-width: 640px; margin: 0 0 22px; }
/* Ключевые черты вместо описания: BRP публикует их вместо текста у Ski-Doo */
.л-черты { list-style: none; padding: 0; margin: 0 0 22px; max-width: 640px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; }
.л-черты li { font-size: 15px; line-height: 1.45; color: var(--л-текст); padding-left: 16px; position: relative; }
.л-черты li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 1px; background: var(--л-акцент); }
@media (max-width: 720px) { .л-черты { grid-template-columns: 1fr; } }
/* Колонок столько, сколько значений реально нашлось в данных: при жёстких
   четырёх у Outlander Electric (нет л.с. и объёма — машина электрическая)
   четвёртая ячейка оставалась пустой и показывала фон сетки серым
   прямоугольником (Артур, 01.09.2026). Число приходит из разметки. */
.л-kpi.вряд { grid-template-columns: repeat(var(--кпи, 4), minmax(0, 1fr)); }
/* Длинное значение переносится по словам, и последнее слово оставалось на
   строке одно: «900 ACE Turbo» / «R» (Артур, 01.09.2026). Хвост из одной-двух
   букв склеиваем неразрывным пробелом в разметке, а строки распределяем
   ровнее — тогда получается «900 ACE» / «Turbo R». */
.л-kpi b { text-wrap: balance; }
/* Плитка сама подбирает кегль под свою ширину (Артур, 11.09.2026: на 1024
   «PowderMax Ultra-Light 3.0» вылезал за плитку, а «850 E-TEC®» рвалось на
   «E-» и «TEC®»). Самые длинные слова в плитках — «Ultra-Light» и «PowderMax»,
   шириной около 5,4 кегля: кегль = ширина плитки / 5,4, но не больше 30 px и
   не меньше 16. Слова с дефисом не переносятся — они обёрнуты в .цел. */
.л-kpi.вряд > div { container-type: inline-size; }
.л-kpi.вряд b { font-size: clamp(16px, calc(100cqi / 5.4), 30px); }
.л-kpi b .цел { white-space: nowrap; }
/* На 1024–1279 четыре плитки делят узкую левую колонку — по 140 px на плитку.
   Сеткой 2×2 значения остаются крупными, как на широком экране. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .л-kpi.вряд.только-десктоп { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .л-kpi.вряд.только-десктоп > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Панель покупки: блоки разделены линиями, порядок — цена и кнопки сразу под H1.
   Не липкая (Артур, 21.08.2026): прилипавшая под шапкой панель читалась как
   поломка — «едет только этот блок». Кнопка «Оформить предзаказ» и так есть в
   шапке на каждой странице, так что дублировать её липкой панелью незачем. */
.л-панель-покупки {
  padding: 26px 32px 24px; display: flex; flex-direction: column;
  align-self: start; min-width: 0;
}
.л-панель-покупки .блок { border-bottom: 1px solid var(--л-линия); padding-bottom: 20px; margin-bottom: 20px; }
.л-панель-покупки .блок:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.л-панель-покупки h1 { font-size: 40px; line-height: 1.05; font-weight: 700; margin: 10px 0 0; }
.л-панель-покупки .л-бейдж { font-size: 10px; padding: 6px 10px; margin-bottom: 14px; }
.л-мета { font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .14em; color: var(--л-метка); text-transform: uppercase; }
.л-цена-строка { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.л-цена-строка .сумма { font-family: 'Oswald', sans-serif; font-size: 40px; font-weight: 600; line-height: 1; }
.л-цена-строка .чья { font-family: 'PlexMono', monospace; font-size: 11px; color: var(--л-метка); letter-spacing: .06em; }
/* Рубли встают в строку с долларами, подпись версии уходит строкой ниже */
.л-цена-строка .руб { font-size: 26px; line-height: 1; }
.л-цена-строка .руб + .чья { flex-basis: 100%; }
/* Переключатель доставки: авиа или морем (Артур, 12.10.2026). Две кнопки под
   суммой — у Мавериков и Дефендеров, где есть обе цены. Выбранная залита
   тёмным, как нажатая пилюля фильтра; срок стоит второй строкой в кнопке. */
.л-доставка { margin: 10px 0 16px; }
.дост { display: inline-flex; border: 1px solid var(--л-линия); }
.дост-кн {
  font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 9px 16px; background: transparent; border: 0; cursor: pointer; color: var(--л-тёмный);
  min-height: 44px; justify-content: center;
}
.дост-кн + .дост-кн { border-left: 1px solid var(--л-линия); }
.дост-кн span {
  font-family: 'PlexMono', monospace; font-size: 10px; font-weight: 400; letter-spacing: .08em;
  color: var(--л-метка); text-transform: none;
}
.дост-кн.вкл { background: var(--л-тёмный); color: #fff; }
.дост-кн.вкл span { color: #fff; opacity: .7; }
.дост-кн:not(.вкл):hover { background: var(--л-подложка); }
.л-доставка .л-условия { margin: 8px 0 0; }
@media (max-width: 520px) {
  .дост { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .дост-кн + .дост-кн { border-left: 1px solid var(--л-линия); }
}
.л-условия {
  font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .1em;
  color: var(--л-метка); text-transform: uppercase; margin: 8px 0 16px; line-height: 1.6;
}
/* Когда кнопка идёт сразу за ценой (нижний блок панели), воздух даёт этот отступ:
   в верхнем блоке его создаёт .л-условия между ними (Артур, 22.08.2026) */
.л-цена-строка + .л-кнопки-покупки { margin-top: 16px; }
.л-кнопки-покупки { display: flex; gap: 10px; }
.л-кнопки-покупки .л-кн { padding: 16px 18px; }
.л-кнопки-покупки .л-кн.акцент { flex: 1; }
.л-заг-блока { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.л-заг-блока .имя { font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .16em; color: var(--л-метка); text-transform: uppercase; }
.л-места-пилюли { display: flex; gap: 6px; flex-wrap: wrap; }
.л-места-пилюли button {
  border: 1px solid var(--л-линия); background: none; border-radius: 100px;
  padding: 6px 12px; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; color: var(--л-текст);
}
.л-места-пилюли button.on { background: var(--л-тёмный); color: #fff; border-color: var(--л-тёмный); }

/* Список версий: разделители — зазор сетки, разница к выбранной справа */
.л-версии { display: flex; flex-direction: column; gap: 1px; background: var(--л-линия); border: 1px solid var(--л-линия); }
.л-версии button {
  background: var(--л-фон); border: 0; width: 100%; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; font: inherit; font-size: 14px; color: var(--л-тёмный);
}
.л-версии button .разница { font-family: 'PlexMono', monospace; font-size: 12px; color: var(--л-метка); white-space: nowrap; }
.л-версии button.on { background: var(--л-тёмный); color: #fff; font-weight: 600; }
.л-версии button.on .разница { font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: 600; color: #fff; }
.л-подпись-версий {
  font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .1em;
  color: var(--л-метка); text-transform: uppercase; margin-top: 10px; line-height: 1.7;
}
.л-подпись-версий a { color: var(--л-акцент); font-weight: 600; }
.л-цвета { display: flex; gap: 10px; flex-wrap: wrap; }
.л-цвета button { width: 34px; height: 34px; padding: 0; cursor: pointer; border: 1px solid var(--л-линия); background-size: cover; }
.л-цвета button.on { outline: 2px solid var(--л-акцент); outline-offset: -2px; }
/* Галочка на выбранном цвете — рамка различима не всем, а красный и зелёный свотчи легко спутать */
.л-цвета button { position: relative; }
.л-цвета button.on::after {
  content: '✓'; position: absolute; right: 2px; bottom: 0; width: 14px; height: 14px; line-height: 14px;
  background: var(--л-тёмный); color: #fff; font-size: 10px; font-weight: 700; text-align: center;
}
.л-панель-покупки .л-галочки { font-size: 14px; }
/* Кнопка, а не ссылка: href="#характеристики" менял хеш, роутер не знал такого
   адреса и уходил на главную (Артур, 22.08.2026) */
.л-к-спекам { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--л-акцент); text-transform: uppercase; background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.л-к-спекам:hover { color: var(--л-тёмный); }
/* «Все версии и цены списком» — на статическую страницу комплектации; в отличие
   от «Полных характеристик» видна и на телефоне (13.09.2026) */
.л-к-списку { display: block; margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--л-акцент); text-transform: uppercase; }
.л-к-списку:hover { color: var(--л-тёмный); }

/* Характеристики: 2×2, подпись фиксированной ширины, значение сразу за ней */
.л-спеки {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--л-линия);
  border-top: 1px solid var(--л-линия); border-bottom: 1px solid var(--л-линия);
}
.л-спеки section { background: var(--л-фон); padding: 26px 32px 28px; min-width: 0; }
.л-спеки h3 { font-size: 20px; font-weight: 600; margin-bottom: 16px; }
.л-спеки .стр {
  display: grid; grid-template-columns: 190px 1fr; gap: 10px 20px;
  align-items: baseline; font-size: 14px; padding: 6px 0;
}
.л-спеки .стр .п { color: var(--л-метка); }
.л-спеки .стр .з { font-weight: 600; overflow-wrap: anywhere; }
.л-спеки-пусто { padding: 0 var(--л-поле) 40px; color: var(--л-метка); }
.л-низ-покупки { display: none; }

@media (max-width: 1279px) {
  .л-покупка { grid-template-columns: 1fr 400px; }
  .л-главфото { height: 440px; }
  .л-панель-покупки h1 { font-size: 34px; }
}
@media (max-width: 1023px) {
  .л-покупка { grid-template-columns: 1fr; }
  .л-покупка > .лево { border-right: 0; }
  .л-главфото { height: 380px; }
  .л-панель-покупки { position: static; border-top: 1px solid var(--л-линия); padding: 24px var(--л-поле) 28px; }
  .л-спеки { grid-template-columns: 1fr; }
  /* Цена и кнопки — в липкую нижнюю полосу: на планшете панель уезжает под фото */
  /* Панель живёт вне .сайт, поэтому переменные оттуда (--л-поле, --л-фон) здесь
     не работают — значения пишем явно. Раньше отступы задавались через
     var(--л-поле): объявление отваливалось целиком, padding обнулялся, цена
     прилипала к краю экрана, а подпись под ней срезалась нижней кромкой
     (Артур, 27.08.2026). */
  .л-низ-покупки {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: #fff; border-top: 1px solid #DCDFE3;
    padding: 9px 16px calc(9px + env(safe-area-inset-bottom));
    gap: 12px; align-items: center; justify-content: space-between;
  }
  /* Цена забирает остаток строки, кнопка — по своему тексту: на 390 она занимала
     половину панели, и рядом с ней цене не оставалось места. */
  .л-низ-покупки > div { min-width: 0; flex: 1 1 auto; }
  .л-низ-покупки .сумма { font-family: 'Oswald', sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; }
  /* Рубли в той же строке, мелко: отдельной строкой панель выросла бы и
     закрыла низ страницы (под неё отведено ровно 84 px). */
  .л-низ-покупки .сумма .руб { font-size: 15px; margin-left: 8px; }
  .л-низ-покупки .л-мета { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .л-низ-покупки .л-кн { flex: 0 0 auto; padding: 13px 20px; font-size: 12px; min-height: 46px; }
  body.есть-низ-покупки .сайт { padding-bottom: 84px; }
  body.есть-низ-покупки .л-низ-моб { display: none; }
}
@media (max-width: 767px) {
  .л-покупка > .лево > .л-крошки { padding: 18px var(--л-поле) 12px; }
  .л-главфото { height: 300px; }
  .л-главфото img { padding: 12px; }
  .л-панель-покупки h1 { font-size: 32px; }
  .л-коротко { padding: 20px var(--л-поле) 24px; }
  .л-kpi.вряд { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Нечётное число плиток на двух колонках оставляло такую же пустую
     половину, что и на десктопе: последняя занимает строку целиком. */
  .л-kpi.вряд > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .л-спеки section { padding: 22px 20px 24px; }
  .л-спеки .стр { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
  /* Миниатюры прокручиваются вбок, а не жмутся в пять колонок по 60px */
  .л-мини { display: flex; overflow-x: auto; gap: 1px; }
  .л-мини button { flex: 0 0 120px; height: 80px; }
  .л-версии button, .л-места-пилюли button, .л-цвета button { min-height: 44px; }
  .л-цвета button { width: 44px; }
}

/* ============ 2c — СРАВНЕНИЕ КОМПЛЕКТАЦИЙ ============ */
.л-сравн-обёртка { border-top: 1px solid var(--л-линия); }
.л-ср { display: grid; gap: 1px; background: var(--л-линия); grid-template-columns: var(--сетка); }
/* Без min-width: 0 ячейка грида не даёт колонке стать уже своего самого длинного
   слова, и на телефоне таблица вылезала за экран на восемь пикселей — правый
   столбец печатался впритык к краю. */
.л-ср > * { min-width: 0; }
/* Лента выбора: у Maverick X3 четырнадцать комплектаций, рядом их не поставить,
   поэтому состав колонок переключается здесь, а таблица всегда в ширину экрана. */
.л-ср-выбор {
  display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  padding: 18px var(--л-поле); border-top: 1px solid var(--л-линия);
}
.л-ср-выбор .метка {
  font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .14em;
  color: var(--л-метка); text-transform: uppercase;
}
.л-ср-подпись {
  background: var(--л-фон); display: flex; align-items: flex-end; padding: 22px 24px;
  font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .14em;
  color: var(--л-метка); text-transform: uppercase;
}
.л-ср-к { background: var(--л-фон); padding: 22px 24px 26px; display: flex; flex-direction: column; position: relative; min-width: 0; }
.л-ср-к.выбрана { outline: 2px solid var(--л-акцент); outline-offset: -2px; z-index: 1; }
.л-ср-к .бейдж-угол {
  position: absolute; right: 0; top: 0; background: var(--л-акцент); color: #fff;
  font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .1em; padding: 5px 9px;
  text-transform: uppercase;
}
.л-ср-к .медиа { height: 130px; position: relative; margin-bottom: 16px; }
.л-ср-к .медиа img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.л-ср-к h3 { font-size: 24px; font-weight: 600; margin-bottom: 5px; }
.л-ср-к .под { font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .12em; color: var(--л-метка); text-transform: uppercase; }
.л-ср-к .ц { font-family: 'Oswald', sans-serif; font-size: 30px; font-weight: 600; margin: 14px 0 16px; }
.л-ср-к .л-кн { margin-top: auto; width: 100%; padding: 13px; }
/* Липкая строка версий. Таблица у Maverick X3 идёт на два экрана, и на
   середине уже не помнишь, где какая колонка: подписи параметров слева видно,
   а имена версий уехали вверх. Строка повторяет их узкой полосой и прилипает
   под шапкой сайта (высота шапки — 71px, поэтому top ровно под ней). */
.л-ср-липкая, .л-ср-липкая-п {
  position: sticky; top: 71px; z-index: 6; background: var(--л-фон);
  padding: 10px 24px; border-bottom: 1px solid var(--л-линия);
  display: flex; align-items: baseline; gap: 10px; min-width: 0;
}
.л-ср-липкая-п {
  font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .14em;
  color: var(--л-метка); text-transform: uppercase;
}
.л-ср-липкая b { font-family: 'Oswald', sans-serif; font-size: 15px; font-weight: 600; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.л-ср-липкая .ц { font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 600; color: var(--л-метка); margin-left: auto; white-space: nowrap; }
.л-ср-липкая.выбрана { box-shadow: inset 3px 0 0 var(--л-акцент); }
.л-ср-группа {
  grid-column: 1 / -1; background: var(--л-подложка); padding: 12px 24px;
  font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .16em;
  color: var(--л-метка); text-transform: uppercase;
}
.л-ср-п { background: var(--л-фон); padding: 15px 24px; font-size: 14px; color: var(--л-метка); }
.л-ср-з { background: var(--л-фон); padding: 15px 24px; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.л-ср-з.нет { color: var(--л-метка); font-weight: 400; }
/* Доступность: Отличие от базовой помечено не только цветом,
   но и маркером «▲» слева и более плотным начертанием. */
.л-ср-з.плюс { color: var(--л-акцент); font-weight: 700; }
.л-ср-з.плюс::before { content: '▲ '; font-size: 10px; vertical-align: 1px; }
.л-ср-итог-п, .л-ср-итог { background: var(--л-подложка); padding: 22px 24px; }
.л-ср-итог-п { font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 600; text-transform: uppercase; }
.л-ср-итог { font-family: 'Oswald', sans-serif; font-size: 26px; font-weight: 600; }
.л-ср-итог.выбран { color: var(--л-акцент); }
.л-ср-к .ц .руб { font-size: 18px; margin-top: 4px; }
.л-ср-итог .руб { font-size: 16px; margin-top: 4px; }
@media (max-width: 1023px) {
  .л-ср-п, .л-ср-з { padding: 13px 14px; font-size: 13px; }
  .л-ср-к { padding: 18px 14px 20px; }
  .л-ср-к h3 { font-size: 20px; }
  .л-ср-к .ц { font-size: 24px; }
  .л-ср-подпись, .л-ср-группа, .л-ср-итог-п, .л-ср-итог { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 767px) {
  /* Название параметра — строкой во всю ширину, значения под ним в две колонки:
     иначе на 390 px подпись и два значения превращаются в три нечитаемых столбика. */
  .л-ср { grid-template-columns: 1fr 1fr; }
  .л-ср-подпись, .л-ср-п, .л-ср-итог-п { grid-column: 1 / -1; }
  .л-ср-подпись { padding: 16px 14px; }
  .л-ср-п { background: var(--л-подложка); color: var(--л-текст); font-size: 12px; padding: 10px 14px; }
  /* Поля уже: длинные слова вроде «высокопроизводительный» в колонку не влезают,
     поэтому просим браузер переносить их по слогам (lang="ru" у документа есть),
     а если словаря переносов нет — рвать по букве, но не вылезать за колонку. */
  .л-ср-з { font-size: 13px; padding: 12px 11px; overflow-wrap: break-word; hyphens: auto; }
  .л-ср-п { padding-left: 11px; padding-right: 11px; }
  .л-ср-к .медиа { height: 104px; }
  .л-ср-итог-п { font-size: 17px; padding: 14px; }
  .л-ср-итог { font-size: 22px; padding: 14px; }
  .л-ср-выбор { padding: 16px var(--л-поле); }
  /* Липкая строка версий на телефоне (16.09.2026, дизайн-ревью): ячейка «Параметр» занимала первую
     колонку, и версии сдвигались — над левой колонкой Adrenaline стояло EDGE. Подпись параметров
     здесь и так идёт строкой во всю ширину, поэтому ячейка не нужна. Шапка сайта на телефоне 45 px,
     а не 71 — строка прилипала ниже, и между ними просвечивала таблица. */
  .л-ср-липкая-п { display: none; }
  .л-ср-липкая { top: 45px; padding: 10px 11px; }
}
/* Экран несуществующего адреса. Отдельная секция, а не подмена главной:
   человеку нужно понять, что он никуда не попал, а роботу — увидеть noindex. */
.л-пусто { padding: 80px var(--л-поле) 120px; max-width: 720px; }
.л-пусто h1 { font-family: 'Oswald', sans-serif; font-size: 44px; font-weight: 600; line-height: 1;
  text-transform: uppercase; margin: 0 0 12px; }
.л-пусто .лид { color: var(--л-текст); margin: 0 0 26px; }
.л-пусто .кнопки { display: flex; gap: 12px; flex-wrap: wrap; }

.л-подвал-действий {
  padding: 32px var(--л-поле); display: flex; justify-content: space-between;
  align-items: center; gap: 20px; flex-wrap: wrap;
}
.л-подвал-действий .кнопки { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============ 3a — КАТЕГОРИЯ ============ */
.л-герой-кат { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--л-линия); }
.л-герой-кат .текст { padding: 40px var(--л-поле) 48px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.л-герой-кат h1 { font-size: 64px; line-height: .98; font-weight: 700; letter-spacing: -.01em; margin-bottom: 18px; }
.л-герой-кат h1 .цвет { color: var(--л-акцент); display: block; }
.л-герой-кат p { font-size: 17px; line-height: 1.5; color: var(--л-текст); max-width: 470px; margin: 0 0 30px; }
.л-герой-кат .л-медиа { display: block; min-height: 480px; }
/* Герой ведёт на страницу той самой комплектации, что подписана снизу */
.л-герой-кат .л-медиа .подпись { transition: background-color .14s ease-out; }
.л-герой-кат .л-медиа:hover .подпись { background: var(--л-акцент); }
.л-задачи {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--л-линия);
  border-top: 1px solid var(--л-линия); border-bottom: 1px solid var(--л-линия);
}
.л-задачи article { background: var(--л-фон); padding: 28px 32px 30px; min-width: 0; }
.л-задачи h3 { font-size: 22px; font-weight: 600; margin-bottom: 12px; }
.л-задачи p { font-size: 15px; line-height: 1.55; color: var(--л-текст); margin: 0 0 16px; }
.л-задачи .модели { font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .1em; color: var(--л-метка); text-transform: uppercase; }
.л-строки { border-top: 1px solid var(--л-линия); }
/* Строка списка категории — целиком ссылка. Цена, чипы и кнопка стоят на одной
   вертикальной оси: список читается как таблица, а не как набор блоков. */
.л-строка {
  display: grid; grid-template-columns: 200px 1fr 190px; align-items: center;
  gap: 24px; padding: 20px var(--л-поле); border-bottom: 1px solid var(--л-линия);
  color: inherit; transition: background-color .14s ease-out;
}
.л-строка:hover { background: var(--л-подложка); }
.л-строка.хит { background: var(--л-подложка); }
.л-строка.хит:hover { background: #EDF0F1; }
.л-строка .медиа { position: relative; display: block; height: 143px; } /* было 124 с подложкой: без неё вырез крупнее на 15 % */
.л-строка .медиа:has(img[src=""]), .л-карта .фото:has(img[src=""]), .л-ср-к .медиа:has(img[src=""]) { background: var(--л-подложка); }
/* На ховере и у хита бокс остаётся прозрачным: белый прямоугольник на сером фоне
   строки читался как та же подложка (Артур, 21.08.2026) — отступление от хендоффа. */
.л-строка.хит .л-чип { background: var(--л-фон); }
.л-строка .медиа img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 0; }
.л-строка .опис { min-width: 0; display: block; }
.л-строка .шапочка { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.л-строка .имя {
  display: block; font-family: 'Oswald', sans-serif; font-size: 26px; font-weight: 600;
  text-transform: uppercase; margin-bottom: 8px;
}
.л-строка .текст { display: block; font-size: 15px; line-height: 1.5; color: var(--л-текст); max-width: 460px; }
.л-строка .право { text-align: right; min-width: 0; }
.л-строка .право .от {
  display: block; font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .14em;
  color: var(--л-метка); text-transform: uppercase; margin-bottom: 2px;
}
.л-строка .право .ц { display: block; font-family: 'Oswald', sans-serif; font-size: 28px; font-weight: 600; margin-bottom: 12px; }
.л-строка .право .ц + .руб { display: block; font-size: 17px; margin: -10px 0 12px; }
.л-строка .право .л-кн {
  display: inline-block; padding: 10px 18px; font-size: 11px; letter-spacing: .08em;
  border-color: var(--л-тёмный); color: var(--л-тёмный); background: none;
}
.л-строка:hover .право .л-кн { background: var(--л-тёмный); color: #fff; }

/* Чипы-ссылки в «под какую задачу»: ведут к своей строке списка */
.л-задачи .модели { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.л-задачи article { display: flex; flex-direction: column; }
.л-чип-ссылка {
  background: var(--л-подложка); border: 0; cursor: pointer; color: var(--л-текст);
  font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .06em;
  padding: 7px 10px; text-transform: uppercase; transition: background-color .14s ease-out, color .14s ease-out;
}
.л-чип-ссылка:hover { background: var(--л-тёмный); color: #fff; }

/* Подпись порядка сортировки: без неё непонятно, почему модели идут именно так */
.л-сортировка-подпись {
  font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .12em;
  color: var(--л-метка); text-transform: uppercase; margin-top: 8px; text-align: right;
}
.л-сортировка-подпись select {
  border: 0; background: none; font: inherit; color: var(--л-тёмный); cursor: pointer;
  text-transform: uppercase; letter-spacing: .12em;
}
.л-бейдж-мал {
  background: var(--л-сигнал-фон); color: var(--л-сигнал); font-family: 'PlexMono', monospace;
  font-size: 10px; font-weight: 600; letter-spacing: .12em; padding: 4px 7px; text-transform: uppercase;
}

/* Светлый таймлайн сделки. Тёмная секция на четыре шага занимала полтора экрана
   в середине страницы и отодвигала расчёт вниз — здесь она компактная. */
.л-тьма .л-шаги .срок {
  font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .12em;
  color: var(--л-метка); text-transform: uppercase; margin-top: auto; padding-top: 14px;
}

/* ============ 5a — КОНТАКТЫ ============ */
.л-контакты { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--л-линия); }
.л-контакты .текст { padding: 34px var(--л-поле) 44px; min-width: 0; }
.л-контакты h1 { font-size: 56px; line-height: .98; font-weight: 700; letter-spacing: -.01em; margin-bottom: 16px; }
.л-контакты h1 .цвет { color: var(--л-акцент); display: block; }
.л-контакты .лид { font-size: 17px; line-height: 1.5; color: var(--л-текст); max-width: 470px; margin: 0 0 30px; }
.л-конт-список { display: grid; gap: 1px; background: var(--л-линия); border: 1px solid var(--л-линия); }
.л-конт-список .стр {
  background: var(--л-фон); padding: 18px 22px; display: flex;
  justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.л-конт-список .метка {
  font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .14em;
  color: var(--л-метка); text-transform: uppercase; margin-bottom: 6px;
}
.л-конт-список .кр { font-family: 'Oswald', sans-serif; font-size: 26px; font-weight: 600; }
.л-конт-список .ср { font-size: 18px; font-weight: 600; }
.л-конт-список .прим { font-size: 14px; color: var(--л-метка); margin-top: 4px; }
.л-соцсети { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.л-соцсети a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--л-линия);
  color: var(--л-тёмный); transition: color .14s ease-out, border-color .14s ease-out;
}
.л-соцсети a:hover { color: var(--л-акцент); border-color: var(--л-акцент); }
.л-соцсети svg { width: 22px; height: 22px; display: block; }
.л-часы { display: grid; gap: 6px; width: 100%; }
.л-часы div { display: flex; justify-content: space-between; gap: 20px; font-size: 15px; }
.л-часы div span:last-child { font-weight: 600; }
.л-карта-места { position: relative; background: var(--л-подложка); border-left: 1px solid var(--л-линия); min-height: 560px; }
.л-карта-места img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.л-карта-места iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.л-карта-места .заглушка {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .12em;
  color: var(--л-метка); text-transform: uppercase; text-align: center; padding: 24px;
}
.л-карта-места .плашка {
  position: absolute; left: 0; bottom: 0; z-index: 2; background: var(--л-фон);
  border: 1px solid var(--л-линия); border-left: 0; border-bottom: 0;
  padding: 18px 22px; max-width: 320px;
}
.л-карта-места .плашка .адрес { font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 600; margin: 6px 0 14px; text-transform: uppercase; }
.л-команда {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--л-линия);
  border-top: 1px solid var(--л-линия); border-bottom: 1px solid var(--л-линия);
}
.л-команда article { background: var(--л-фон); padding: 26px 32px 30px; min-width: 0; display: flex; flex-direction: column; }
/* Один отдел: строка во всю ширину вместо узкой карточки */
.л-команда.одна article {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 10px 40px; padding: 28px var(--л-поле) 30px;
}
.л-команда.одна article .л-мета { grid-column: 1; }
.л-команда.одна article h3 { grid-column: 1; margin: 4px 0 0; }
.л-команда.одна article p { grid-column: 1; margin: 6px 0 0; max-width: 640px; }
.л-команда.одна article .тел {
  grid-column: 2; grid-row: 1 / -1; margin: 0; font-size: 26px; white-space: nowrap;
}
.л-команда h3 { font-size: 22px; font-weight: 600; margin: 6px 0 10px; }
.л-команда p { font-size: 15px; line-height: 1.55; color: var(--л-текст); margin: 0 0 16px; }
.л-команда .тел { font-family: 'Oswald', sans-serif; font-size: 19px; font-weight: 600; margin-top: auto; }
.л-форма textarea {
  width: 100%; background: var(--л-фон); border: 1px solid var(--л-линия); border-radius: 0;
  padding: 15px 16px; font: inherit; font-size: 15px; color: var(--л-тёмный);
  min-height: 96px; resize: vertical;
}
.л-форма textarea:focus { outline: none; border-color: var(--л-акцент); }
.л-форма textarea:focus-visible { outline: 2px solid var(--л-тёмный); outline-offset: 1px; }

@media (min-width: 768px) {
  .л-полоса { flex-wrap: nowrap; }
  .л-полоса .лево { min-width: 0; }
  .л-полоса .право { flex: none; }
}


/* ============ 5a — КОНТАКТЫ, ПРАВКА ХЕНДОФФА design_handoff_contacts ============ */

/* Номер один раз на странице: крупно, рядом мессенджеры и звонок */
.л-номер {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--л-линия);
}
.л-номер .метка {
  font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .14em;
  color: var(--л-метка); text-transform: uppercase; margin-bottom: 8px;
}
.л-номер .цифры { font-family: 'Oswald', sans-serif; font-size: 38px; font-weight: 600; line-height: 1; }
.л-номер .действия { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.л-номер .квадрат {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--л-линия); font-family: 'PlexMono', monospace; font-size: 11px;
  font-weight: 600; color: var(--л-текст); transition: color .14s ease-out, border-color .14s ease-out;
}
.л-номер .квадрат:hover { color: var(--л-тёмный); border-color: var(--л-тёмный); }
.л-номер .действия .л-кн { height: 44px; padding: 0 20px; display: inline-flex; align-items: center; }

/* Адрес, режим работы и «как доехать» */
.л-адрес {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--л-линия);
  border: 1px solid var(--л-линия); margin-bottom: 24px;
}
.л-адрес .ячейка { background: var(--л-фон); padding: 18px 20px; }
.л-адрес .широкая { grid-column: 1 / -1; }
.л-адрес .метка {
  font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .14em;
  color: var(--л-метка); text-transform: uppercase; margin-bottom: 8px;
}
.л-адрес .знач { font-size: 17px; font-weight: 600; }
.л-адрес .прим { font-size: 14px; color: var(--л-метка); margin-top: 4px; }
.л-адрес .путь { font-size: 15px; line-height: 1.5; display: flex; gap: 10px; margin-top: 6px; }
.л-адрес .путь b { color: var(--л-акцент); }
/* Магазин в Салехарде: телефон нажимается, «на карте» — ссылкой в пояснении */
.л-адрес a.знач { display: block; color: var(--л-тёмный); text-decoration: none; }
.л-адрес .прим a { color: var(--л-акцент); font-weight: 600; text-decoration: none; }

/* Филиалы на контактах (13.09.2026): карточки сеткой, линии — тенью карточек,
   поэтому пустая клетка в последнем ряду остаётся белой, а не серой.
   auto-fit растягивает две карточки на всю ширину, а не жмёт их влево.
   Шесть частей карточки (кикер, город, адрес, две строки, ссылки) — подсетка
   (subgrid): карточки одного ряда делят строки сетки, и линии стоят вровень,
   даже если у одной под адресом есть индекс, а у другой нет (Артур, 13.09.2026:
   «красиво расположи эти линии, чтобы они вровень были»). Поэтому у карточки
   всегда ровно две строки. Без subgrid (старый Safari) карточка просто
   складывается столбиком — линии не вровень, но ничего не ломается. */
.л-филиалы { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1px;
  padding: 1px var(--л-поле) 56px; }
.л-филиалы .карточка-филиала { box-shadow: 0 0 0 1px var(--л-линия); background: var(--л-фон);
  padding: 28px 32px 26px; min-width: 0;
  display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.карточка-филиала .город { font-family: 'Oswald', sans-serif; font-size: 34px; font-weight: 600; line-height: 1;
  text-transform: uppercase; margin: 2px 0 12px; }
/* Тип и регион — двумя строками: одной строкой регион рвался посреди «ЯМАЛО- / НЕНЕЦКИЙ»,
   и у каждой карточки перенос приходился на своё место (дизайн-ревью 16.09.2026) */
.карточка-филиала .л-кикер .разд { display: none; }
.карточка-филиала .л-кикер .регион { display: block; margin-top: 3px; }
.карточка-филиала .адрес { font-size: 17px; font-weight: 600; padding-bottom: 18px; }
.карточка-филиала .адрес span { display: block; font-size: 14px; font-weight: 400; color: var(--л-метка); margin-top: 4px; }
.карточка-филиала .строка { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 12px 0; border-bottom: 1px solid var(--л-линия); font-size: 15px; line-height: 1.5; }
.карточка-филиала .адрес + .строка { border-top: 1px solid var(--л-линия); }
.карточка-филиала .строка .метка { font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--л-метка); padding-top: 4px; }
/* выходные своей строкой: в одну строку рвалось «Сб и Вс — / выходные» */
.карточка-филиала .строка .разд { display: none; }
.карточка-филиала .строка .вых { display: block; }
.карточка-филиала .строка i { display: block; font-style: normal; font-size: 13px; color: var(--л-метка); }
.карточка-филиала .строка a { color: var(--л-тёмный); font-weight: 600; white-space: nowrap;
  padding-block: 11px; margin-block: -11px; }   /* область нажатия 44 px; ссылка — элемент сетки, отрицательное поле
  возвращает её на базовую линию подписи «Телефон» и высоту строки */
/* Действия — к верху своей строки: третья ссылка «В наличии» переносится на
   вторую строку, и при прижатии к низу первые строки ссылок у соседних
   карточек разъезжались на высоту строки (15.09.2026); с 16.09.2026 она у всех */
.карточка-филиала .действия { padding-top: 22px; display: flex; gap: 10px 28px; flex-wrap: wrap; align-self: start; }
.карточка-филиала .действия a { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--л-акцент); }
.карточка-филиала .действия a:hover { color: var(--л-тёмный); }
/* --- отзывы с Авито (14.09.2026): сетка как у филиалов — линии тенью в 1px, поэтому пустая ячейка
   в последнем ряду остаётся белой, а не серой. Длинный отзыв — семь строк и «Читать целиком». --- */
.л-отзывы { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1px; padding: 1px var(--л-поле) 0; }
.л-отзыв { margin: 0; box-shadow: 0 0 0 1px var(--л-линия); background: var(--л-фон); padding: 28px 32px 24px; min-width: 0;
  display: flex; flex-direction: column; gap: 14px; }
.л-отзыв .оценка { font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--л-метка); display: flex; align-items: center; gap: 10px; }
.л-отзыв .звёзды { color: var(--л-акцент); font-size: 16px; letter-spacing: 2px; }
.л-отзыв blockquote { margin: 0; }
.л-отзыв blockquote p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--л-текст); white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.л-отзыв.раскрыт blockquote p { display: block; -webkit-line-clamp: unset; overflow: visible; }
.л-отзыв .ещё { align-self: flex-start; background: none; border: 0; padding: 0; min-height: 32px; cursor: pointer;
  font: 600 12px/1 'Plex', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--л-акцент); }
.л-отзыв .ещё:hover { text-decoration: underline; text-underline-offset: 3px; }
.л-отзыв figcaption { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--л-линия);
  display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 1.45; color: var(--л-метка); }
.л-отзыв figcaption b { font-weight: 600; color: var(--л-текст); font-size: 13px; }
.л-отзывы-рейтинг { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.л-отзывы-рейтинг .число { display: flex; align-items: baseline; gap: 10px; }
.л-отзывы-рейтинг b { font-family: 'Oswald', sans-serif; font-size: 44px; font-weight: 600; line-height: 1; color: var(--л-текст); }
.л-отзывы-рейтинг span { font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--л-метка); }
/* на планшете шапка секции переносится — оценка и ссылка встают под заголовок, прижаты влево */
@media (max-width: 1023px) { .л-отзывы-рейтинг { align-items: flex-start; } }
.л-филиалы-счёт { font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--л-метка); }

/* Соцсети в подвале левой колонки — не главное действие страницы */
.л-подвал-колонки {
  margin-top: auto; padding-top: 22px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.л-соцсети-строка { display: flex; align-items: center; gap: 14px; }
.л-соцсети-строка .метка {
  font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .14em;
  color: var(--л-метка); text-transform: uppercase;
}
.л-подвал-колонки .подпись {
  font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .12em; color: var(--л-метка);
}
.л-соцсети { margin: 0; gap: 8px; }
.л-соцсети a { width: 36px; height: 36px; }
.л-соцсети svg { width: 18px; height: 18px; }

/* Своя метка поверх карты: карта не перетаскивается (pointer-events:none),
   поэтому центр кадра всегда совпадает с точкой, и метка не «уплывает».
   Кастомный маркер иначе требует JS API с ключом. */
.л-карта-места iframe { pointer-events: none; }
/* Не своя метка, а кольцо вокруг места: у Яндекса тут уже стоит собственная
   иконка организации с подписью «Ямал Мото», и капля поверх неё читалась как
   вторая точка (Артур, 02.09.2026). Кольцо ничего не загораживает —
   показывает, куда смотреть, и оставляет подпись Яндекса читаемой. */
.л-карта-места .метка-карты {
  position: absolute; left: 50%; top: 50%; width: 108px; height: 108px; margin: -54px 0 0 -60px;
  border: 2px solid var(--л-акцент); border-radius: 50%;
  background: rgba(13, 159, 136, .10); pointer-events: none; z-index: 1;
}
/* Кнопки плашки — столбиком, одной ширины и высоты (Артур, 14.09.2026: «кнопки разных размеров»):
   колонка по самой широкой кнопке, обе растянуты; высота — компактная ступень 44 px */
.л-карта-места .плашка .кнопки { display: grid; grid-template-columns: max-content; gap: 8px; }
.л-карта-места .плашка .л-кн { padding: 0 16px; font-size: 11px; min-height: 44px; width: 100%; }
.л-кн.светлый-контур {
  border: 1px solid var(--л-линия); background: none; color: var(--л-тёмный);
}
.л-кн.светлый-контур:hover { border-color: var(--л-тёмный); }

/* «Кто ответит» и «Другие вопросы» — две равные карточки */
.л-помощь {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--л-линия);
  border-top: 1px solid var(--л-линия); border-bottom: 1px solid var(--л-линия);
}
/* боковые поля — как у секций страницы (--л-поле): текст карточек стоял на 40 px, а кикеры и форма ниже — на 56 */
.л-помощь .карточка { background: var(--л-фон); padding: 36px var(--л-поле); display: flex; flex-direction: column; min-width: 0; }
.л-помощь h2 { font-size: 36px; font-weight: 600; line-height: 1; margin-bottom: 26px; }
.л-помощь .метка {
  font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .16em;
  color: var(--л-метка); text-transform: uppercase; margin-bottom: 14px;
}
.л-помощь .человек { display: flex; flex-direction: column; gap: 20px; }
.л-помощь .человек img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center;
  background: var(--л-подложка); display: block;
}
.л-помощь .человек .имя { font-family: 'Oswald', sans-serif; font-size: 24px; font-weight: 600; text-transform: uppercase; line-height: 1.1; }
.л-помощь .человек .имя + .л-мета { margin-top: 8px; }   /* подпись роли стояла вплотную к имени */
.л-помощь .человек p { font-size: 15px; line-height: 1.55; color: var(--л-текст); margin: 10px 0 16px; }
.л-помощь .строка-действий { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.л-помощь .строка-действий .л-кн { padding: 14px 22px; }
.л-темы { display: grid; gap: 1px; background: var(--л-линия); border: 1px solid var(--л-линия); }
.л-темы .стр {
  background: var(--л-фон); padding: 16px 18px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
}
.л-темы .имя { font-size: 16px; font-weight: 600; }
.л-темы .прим { font-size: 14px; color: var(--л-метка); margin-top: 2px; }
.л-темы .доб { font-family: 'Oswald', sans-serif; font-size: 19px; font-weight: 600; white-space: nowrap; }
.л-помощь .итог { font-size: 15px; line-height: 1.55; color: var(--л-текст); margin: 20px 0 0; padding-top: 0; }

/* Форма: поля не растягиваются на всю колонку */
.л-форма .поля { max-width: 520px; }
.л-форма .строка-отправки { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.л-форма .строка-отправки .л-кн { width: auto; margin-top: 0; padding: 16px 30px; }
.л-форма .строка-отправки .согласие { flex: 1; min-width: 220px; }
.л-форма textarea { min-height: 104px; }

@media (max-width: 1279px) {
  .л-карта-места { min-height: 520px; }
  .л-помощь .карточка { padding: 30px var(--л-поле); }
  .л-помощь h2 { font-size: 30px; }
}
@media (max-width: 1023px) {
  .л-помощь { grid-template-columns: 1fr; }
  .л-карта-места { min-height: 360px; }
  /* Плашка адреса уходит под карту обычным блоком */
  .л-карта-места .плашка { position: static; max-width: none; border: 0; border-top: 1px solid var(--л-линия); }
  .л-карта-места { display: flex; flex-direction: column; }
  .л-карта-места iframe, .л-карта-места .метка-карты { position: absolute; }
}
@media (max-width: 767px) {
  .л-номер { flex-direction: column; align-items: flex-start; gap: 16px; }
  .л-номер .цифры { font-size: 30px; }
  .л-номер .действия { width: 100%; }
  .л-номер .действия .л-кн { flex: 1; justify-content: center; }
  .л-адрес { grid-template-columns: 1fr; }
  .л-помощь .карточка { padding: 24px var(--л-поле) 28px; }   /* край текста — как у остальных секций */
  .л-помощь h2 { font-size: 28px; }
  .л-помощь .человек { gap: 16px; }
  .л-темы .стр { flex-wrap: wrap; }
  .л-подвал-колонки { align-items: flex-start; }
  .л-чип-ссылка { min-height: 44px; }
  .л-сортировка-подпись select { min-height: 44px; }
  .л-карта-места .плашка .л-кн { min-height: 44px; }
}

/* ============ АДАПТИВ ВНУТРЕННИХ ЭКРАНОВ (ступени из README) ============ */
@media (max-width: 1279px) {
  .л-каталог { grid-template-columns: 220px 1fr; }
  .л-сетка.три { grid-template-columns: repeat(2, 1fr); }
  .л-результаты, .л-каталог > .право > .л-подвал-секции { padding-inline: 24px; }
  .л-сетка.три { grid-template-columns: repeat(2, 1fr); }
  .л-заг h1, .л-герой-кат h1 { font-size: 56px; }
  .л-панель-покупки h1 { font-size: 44px; }
  .л-покупка { grid-template-columns: 1fr 400px; }
  .л-строка { grid-template-columns: 170px 1fr 170px; gap: 20px; }
}
/* Промежуток, где пунктов уже шесть, а места ещё мало: ужимаем навигацию,
   чтобы шапка оставалась в одну строку. Замер 31.08.2026 показал, что и с этим
   правилом меню наезжало на телефон: на 1366 — на 41 px, на 1150 — на 69, на
   1024 — на 159. Поэтому сжатие идёт тремя ступенями, а на самой тесной из них
   уходит подпись часов работы под номером — она короче всего живёт. */
@media (min-width: 1300px) and (max-width: 1439px) {
  .л-нав { gap: 18px; padding: 0 18px; letter-spacing: .05em; }
  .л-лого { padding: 0 18px; }

}
@media (min-width: 1180px) and (max-width: 1299px) {
  .л-нав { gap: 14px; padding: 0 14px; font-size: 12px; letter-spacing: .04em; }
  .л-лого { padding: 0 16px; }
  .л-шапка .л-право { padding-right: 16px; gap: 14px; }
  .л-шапка .л-право .л-кн { font-size: 17px; padding: 0 16px; max-width: 170px; }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  .л-нав { gap: 10px; padding: 0 10px; font-size: 11px; letter-spacing: .01em; }
  .л-лого { padding: 0 12px; }
  .л-лого b { font-size: 16px; letter-spacing: .08em; }
  .л-шапка .л-право { padding-right: 12px; gap: 10px; }
  .л-шапка .л-право .л-кн { font-size: 15px; padding: 0 12px; max-width: 128px; }
  .л-тел span { display: none; }
  .л-тел b { font-size: 15px; }
}

@media (max-width: 1023px) {
  .л-нав { display: none; }
  .л-моб-кнопки, .л-моб-кнопки .л-бургер { display: flex; }
  .л-шапка { position: sticky; }
  .л-шапка .лево { position: static; }

  .л-каталог { grid-template-columns: 1fr; }
  .л-фильтры { display: none; }
  .л-фильтры.открыты {
    display: block; position: fixed; inset: 0; z-index: 50; background: var(--л-фон);
    overflow-y: auto; border-right: 0; padding: 20px 20px 40px;
  }
  .л-кн-фильтры { display: inline-flex; }
  .л-закрыть-фильтры {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--л-линия);
  }
  .л-покупка { grid-template-columns: 1fr; }
  .л-покупка > .лево { border-right: 0; }
  .л-панель-покупки { position: static; border-top: 1px solid var(--л-линия); padding: 28px var(--л-поле) 36px; }
  .л-главфото { min-height: 420px; flex: none; height: 420px; }
  .л-спеки { grid-template-columns: 1fr; }
  .л-задачи { grid-template-columns: 1fr; }
  .л-герой-кат { grid-template-columns: 1fr; }
  .л-герой-кат .л-медиа { min-height: 380px; border-left: 0; border-top: 1px solid var(--л-линия); }
  .л-контакты { grid-template-columns: 1fr; }
  .л-карта-места { min-height: 320px; border-left: 0; border-top: 1px solid var(--л-линия); }
  /* Плашка закрывает кнопку виджета слева, но не растягивается на всю ширину:
     копирайт Яндекса справа внизу закрывать нельзя. */
  .л-карта-места .плашка { left: 0; right: auto; bottom: 0; max-width: 265px; padding: 14px 18px; }
  .л-команда { grid-template-columns: 1fr; }
  .л-команда.одна article { grid-template-columns: 1fr; }
  .л-команда.одна article .тел { grid-column: 1; grid-row: auto; margin-top: 14px; }
  /* Строки категории складываются в карточки */
  .л-строка { grid-template-columns: 150px 1fr; gap: 20px; row-gap: 16px; }
  .л-строка .право { grid-column: 1 / -1; }
  .л-строка .право { text-align: left; }
  .л-строка .право .кнопки { justify-content: flex-start; }
}
@media (max-width: 767px) {
  .л-заг { padding: 24px var(--л-поле) 22px; }
  .л-заг h1, .л-герой-кат h1, .л-контакты h1 { font-size: 34px; line-height: 1; }
  /* Три ячейки KPI в 390 px влезают только уменьшенными: иначе «30–40»
     переносится посреди числа */
  .л-kpi div { padding: 12px 10px; }
  /* nowrap рассчитан на «82» и «1001»; у снегоходов в плитке стоит имя
     гусеницы и платформы, и на 390 оно уезжало за край карточки. */
  .л-kpi b { font-size: 22px; white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
  .л-kpi.вряд b { font-size: 18px; line-height: 1.15; }
  .л-kpi div > span { font-size: 9px; letter-spacing: .08em; overflow-wrap: anywhere; }
  .л-заг h1 .строка, .л-герой-кат h1 .строка { white-space: normal; }
  /* «SUMMIT · / 5 КОМПЛЕКТАЦИЙ»: точка висела в конце строки — на телефоне число версий своей строкой */
  .л-заг h1 .разд { display: none; }
  .л-заг h1 .цвет { display: block; }
  .л-панель-покупки h1 { font-size: 34px; }
  .л-сетка.три { grid-template-columns: 1fr; }
  .л-главфото { min-height: 300px; height: 300px; }
  .л-главфото img { padding: 14px; }
  .л-мини button { height: 74px; }
  .л-покупка > .лево > .л-крошки { padding: 20px var(--л-поле) 14px; }
  .л-строка { grid-template-columns: 1fr; padding: 20px var(--л-поле); }
  .л-строка .медиа { height: 160px; }
  .л-цена-блок .кнопки { flex-direction: column; }
  .л-цена-блок .кнопки .л-кн { width: 100%; }
  /* Две кнопки в ряд по 170 px переносили надписи в две строки («НАЗАД К / МОДЕЛИ»):
     на телефоне столбиком во всю ширину, главное действие сверху (дизайн-ревью 16.09.2026) */
  .л-подвал-действий .кнопки { width: 100%; flex-direction: column-reverse; }
  /* В колонке сравнения 130–170 px «ОФОРМИТЬ / ПРЕДЗАКАЗ» шло в две строки — оставляем одно слово */
  .л-ср-к .л-кн .полн { display: none; }
  .л-подвал-действий .кнопки .л-кн { width: 100%; min-height: 52px; }
  .л-команда article, .л-задачи article, .л-спеки section { padding: 22px 20px 26px; }
  .л-конт-список .кр { font-size: 22px; }
  .л-соцсети a { width: 44px; height: 44px; }
  /* Тач-цели */
  .л-типы button, .л-компл button, .л-места button, .л-чек, .л-сброс { min-height: 44px; }
  .л-цвета button { width: 44px; height: 44px; }
  .л-мини button { min-height: 44px; }
  .л-результаты select { min-height: 44px; }
  .л-бургер { min-height: 44px; }
  .л-строка .право .л-кн, .л-пара-кн .л-кн, .л-ср-к .л-кн { min-height: 44px; }
  .л-кн-фильтры { min-height: 44px; }
  .л-поделиться { min-height: 44px; display: inline-flex; align-items: center; }
}


@media (max-width: 767px) {
  /* ============ МАКЕТ 390 (design_handoff_mobile) ============
     Телефон — основной макет, а не схлопнутый десктоп: 90% трафика приходит
     с него. Поля 16, тач-цели от 44, текст не мельче 13. */
  .сайт { --л-поле: 16px; }

  /* --- шапка 44px: логотип, звонок, бургер --- */
  .л-шапка { min-height: 44px; }
  .л-лого { padding: 0 14px; min-height: 44px; }
  .л-лого b { font-size: 15px; letter-spacing: .1em; margin-right: -.1em; }
  .л-лого span { font-size: 8px; letter-spacing: .2em; margin-top: 2px; margin-right: -.2em; }
  .л-моб-кнопки { align-items: center; gap: 6px; padding-right: 10px; }
  .л-звонок {
    display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border: 1px solid var(--л-линия); color: var(--л-тёмный);
  }
  .л-звонок svg { width: 20px; height: 20px; fill: currentColor; }
  .л-бургер {
    width: 44px; height: 44px; min-height: 44px; padding: 0; background: var(--л-тёмный); color: #fff;
    justify-content: center; align-self: center;
  }
  .л-бургер svg { width: 16px; height: 12px; stroke-width: 1.5; }

  /* --- меню слоем поверх всего --- */
  .л-меню-моб {
    position: fixed; inset: 0; z-index: 60; background: var(--л-тёмный); color: #fff;
    display: flex; flex-direction: column; overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .л-меню-моб[hidden] { display: none; }
  .л-меню-моб .верх { display: flex; align-items: stretch; justify-content: space-between; }
  .л-меню-моб .закрыть {
    width: 44px; height: 44px; align-self: center; margin-right: 10px; padding: 0; cursor: pointer;
    background: none; border: 1px solid #2A3037; color: #fff; display: flex; align-items: center; justify-content: center;
  }
  .л-меню-моб .закрыть svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; }
  .л-меню-моб nav { display: flex; flex-direction: column; padding: 10px 16px 0; }
  .л-меню-моб nav a {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 17px 0; border-bottom: 1px solid #2A3037;
    font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600; text-transform: uppercase;
  }
  .л-меню-моб nav i {
    font-family: 'PlexMono', monospace; font-size: 11px; font-style: normal; color: var(--л-метка);
  }
  .л-меню-моб .связь { margin-top: auto; padding: 26px 16px 20px; }
  .л-меню-моб .часы {
    font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .14em;
    color: var(--л-метка); text-transform: uppercase; margin-bottom: 6px;
  }
  .л-меню-моб .тел {
    display: block; font-family: 'Oswald', sans-serif; font-size: 26px; font-weight: 600; margin-bottom: 16px;
  }
  .л-меню-моб .связь .л-кн { width: 100%; min-height: 50px; }
  .л-меню-моб .мессенджеры { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
  /* один мессенджер (MAX спрятан) — во всю ширину */
  .л-меню-моб .мессенджеры a:only-child { grid-column: 1 / -1; }
  .л-меню-моб .мессенджеры a {
    display: flex; align-items: center; justify-content: center; min-height: 46px;
    border: 1px solid #2A3037; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  }

  /* --- 14a: каталог --- */
  .л-моб-панель {
    display: block; padding: 14px var(--л-поле) 0; border-bottom: 1px solid var(--л-линия);
  }
  .л-моб-панель .ряд { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .л-моб-панель .ряд .л-кн {
    min-height: 44px; padding: 10px 14px; font-size: 12px; gap: 8px;
    border-color: var(--л-тёмный); color: var(--л-тёмный);
  }
  .л-моб-панель .ряд .л-кн i {
    font-style: normal; background: var(--л-акцент); color: #fff; font-family: 'PlexMono', monospace;
    font-size: 11px; padding: 2px 6px; line-height: 1.4;
  }
  /* Сортировка — родной select: на телефоне он открывается системным листом,
     который привычнее и доступнее самодельного шита. */
  .л-моб-панель .сорт { display: block; position: relative; }
  .л-моб-панель .сорт::after {
    content: '▾'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    pointer-events: none; color: var(--л-метка); font-size: 12px;
  }
  .л-моб-панель .сорт select {
    width: 100%; min-height: 44px; padding: 10px 32px 10px 14px; font: inherit; font-size: 13px;
    border: 1px solid var(--л-линия); border-radius: 0; background: var(--л-фон); color: var(--л-тёмный);
    appearance: none; -webkit-appearance: none;
  }
  .л-лента-типов {
    display: flex; gap: 8px; margin-top: 12px; overflow-x: auto;
    scroll-snap-type: x proximity; scrollbar-width: none;
    padding-bottom: 12px; margin-inline: calc(var(--л-поле) * -1); padding-inline: var(--л-поле);
  }
  .л-лента-типов::-webkit-scrollbar { display: none; }
  /* Начертание — как у .л-пилюли на главной, в разделе и в сравнении (16.09.2026, дизайн-ревью):
     здесь было 13 px / 500 тёмным, там 12 px / 600 с разрядкой — одна и та же лента выглядела по-разному */
  .л-лента-типов button {
    flex: 0 0 auto; scroll-snap-align: start; min-height: 44px; padding: 12px 20px;
    border: 1px solid var(--л-линия); border-radius: 100px; background: var(--л-фон);
    font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--л-текст); cursor: pointer; white-space: nowrap;
  }
  .л-лента-типов button.on { background: var(--л-тёмный); border-color: var(--л-тёмный); color: #fff; }
  .л-моб-панель .счёт {
    font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .14em;
    color: var(--л-метка); text-transform: uppercase; padding-bottom: 12px;
  }
  /* Строка результатов уехала в панель — второй раз её показывать незачем */
  .л-результаты { display: none; }

  /* Карточки в одну колонку, фото 180 */
  .л-сетка.три { grid-template-columns: 1fr; }
  .л-карта.каталожная { padding: 14px var(--л-поле) 16px; }
  .л-карта.каталожная .фото { height: 180px; }
  .л-карта.каталожная .имя { font-size: 21px; }
  .л-карта.каталожная .л-кн { min-height: 44px; }
  .л-подвал-секции { flex-direction: column-reverse; gap: 14px; padding: 18px var(--л-поле) 28px; }
  .л-подвал-секции .л-кн { width: 100%; min-height: 56px; }
  .л-подвал-секции .мет { text-align: center; line-height: 1.7; }

  /* --- 14c: фильтры шитом снизу --- */
  .л-фильтры.открыты {
    position: fixed; inset: auto 0 0 0; z-index: 55; max-height: 86vh; overflow-y: auto;
    background: var(--л-фон); border-top: 1px solid var(--л-линия); padding: 0 var(--л-поле) 0;
    box-shadow: 0 -8px 24px rgba(16, 20, 24, .16);
  }
  body.шит-открыт { overflow: hidden; }
  body.шит-открыт .л-затемнение {
    display: block; position: fixed; inset: 0; z-index: 54; background: rgba(16, 20, 24, .45);
  }
  .л-закрыть-фильтры {
    position: sticky; top: 0; z-index: 2; background: var(--л-фон);
    display: flex; align-items: center; gap: 12px; padding: 16px 0 14px;
    border-bottom: 1px solid var(--л-линия); margin-bottom: 18px;
  }
  .л-закрыть-фильтры .л-фзаг { font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 600; text-transform: uppercase; }
  .л-сброс-шит {
    margin-left: auto; background: none; border: 0; padding: 0 6px; cursor: pointer;
    font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .12em;
    color: var(--л-акцент); text-transform: uppercase; min-height: 44px;
  }
  .л-закрыть-шит {
    width: 44px; height: 44px; padding: 0; background: none; border: 1px solid var(--л-линия);
    color: var(--л-тёмный); display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .л-закрыть-шит svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; fill: none; }
  .л-низ-шита {
    display: block; position: sticky; bottom: 0; background: var(--л-фон); padding: 14px 0 calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--л-линия); margin-top: 8px;
  }
  .л-низ-шита .л-кн { width: 100%; min-height: 56px; }
  /* В шите не нужны ни кнопка сброса из рельса, ни блок помощи: сброс уехал
     в шапку шита, а помощь перекрывала бы кнопку «Показать N моделей». */
  .л-фильтры.открыты .л-сброс, .л-фильтры.открыты .л-помощь-фильтров { display: none; }
  /* Тип техники уже стоит пилюлями над списком — в шите он был бы вторым
     таким же переключателем на одном экране. */
  .л-фильтры.открыты [data-фильтр="тип"] { display: none; }
  /* Назначение — пилюлями: чекбоксы на телефоне мелкие и мажут мимо */
  .л-фильтры.открыты [data-фильтр="назначение"] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .л-фильтры.открыты [data-фильтр="назначение"] .л-фзаг { flex: 0 0 100%; margin-bottom: 2px; }
  .л-фильтры.открыты .л-чек {
    display: inline-flex; width: auto; flex: 0 0 auto; justify-content: center;
    border: 1px solid var(--л-линия); border-radius: 100px; padding: 11px 16px; min-height: 44px;
    font-size: 13px; margin: 0; gap: 0;
  }
  .л-фильтры.открыты .л-чек .кв, .л-фильтры.открыты .л-чек .счёт { display: none; }
  .л-фильтры.открыты .л-чек.on { background: var(--л-тёмный); border-color: var(--л-тёмный); color: #fff; }
  /* Ручки слайдера крупнее десктопных: пальцем в 12 px не попасть */
  .л-фильтры.открыты .л-слайдер input::-webkit-slider-thumb { width: 22px; height: 22px; }
  .л-фильтры.открыты .л-слайдер input::-moz-range-thumb { width: 22px; height: 22px; }
  .л-фильтры.открыты [data-фильтр="места"] .л-места { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .л-фильтры.открыты .л-места button { min-height: 44px; width: auto; }


  /* --- 14b: страница модели --- */
  .только-моб { display: grid; }
  .только-десктоп { display: none; }

  /* Галерея свайпом; лента миниатюр на телефоне не нужна */
  .л-главфото, .л-мини { display: none; }
  .л-галерея-моб { display: block; position: relative; background: var(--л-подложка); }
  .л-галерея-моб .лента {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .л-галерея-моб .лента::-webkit-scrollbar { display: none; }
  .л-галерея-моб .кадр { flex: 0 0 100%; scroll-snap-align: center; position: relative; height: 260px; }
  .л-галерея-моб .кадр img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10px;
  }
  .л-галерея-моб .счётчик {
    position: absolute; top: 12px; right: 12px; background: var(--л-фон); border: 1px solid var(--л-линия);
    font-family: 'PlexMono', monospace; font-size: 11px; padding: 5px 9px; pointer-events: none;
  }
  .л-галерея-моб .полоски {
    position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 5px;
    pointer-events: none;
  }
  .л-галерея-моб .полоски i { width: 18px; height: 2px; background: var(--л-линия); }
  .л-галерея-моб .полоски i.on { background: var(--л-тёмный); }

  /* KPI 2×2 сразу под названием */
  .л-панель-покупки .л-kpi.вряд { grid-template-columns: 1fr 1fr; margin-top: 16px; }
  .л-панель-покупки .л-kpi.вряд b { font-size: 24px; }

  /* Версии и цвет — по макету 390 */
  .л-версии button { min-height: 48px; }
  .л-цвета button { width: 44px; height: 44px; }
  .л-цвета button.on { outline: 2px solid var(--л-акцент); outline-offset: 2px; }

  /* Четыре главные строки и вход в полный список */
  .л-спеки-моб { display: block; padding: 20px var(--л-поле) 24px; border-top: 1px solid var(--л-линия); }
  .л-спеки-моб .метка {
    font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .16em;
    color: var(--л-метка); text-transform: uppercase; margin-bottom: 10px;
  }
  .л-спеки-моб .строки > div {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 11px 0; border-bottom: 1px solid var(--л-линия); font-size: 14px;
  }
  .л-спеки-моб .строки span { color: var(--л-метка); }
  .л-спеки-моб .строки b { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
  .л-спеки-моб .л-кн { width: 100%; min-height: 44px; margin-top: 16px; border-color: var(--л-линия); }

  /* Полный список характеристик открывается кнопкой выше */
  #характеристики, .л-спеки { display: none; }
  .сайт.спеки-все #характеристики, .сайт.спеки-все .л-спеки { display: block; }

  /* Расчёт доставки прямо со страницы модели */

  /* Порядок блоков на телефоне: галерея → название и покупка → описание.
     На десктопе описание с KPI стоит под фото в левой колонке, но на 390 оно
     оказывалось раньше названия модели — сначала текст, потом «что это». 
     display:contents вынимает детей левой колонки в общий поток, и их можно
     переставить порядком, не трогая разметку. */
  .л-покупка { display: flex; flex-direction: column; }
  .л-покупка > .лево { display: contents; }
  .л-покупка > .лево > .л-крошки { order: 1; }
  .л-галерея-моб { order: 2; }
  .л-панель-покупки { order: 3; }
  .л-коротко { order: 4; }
  /* Цена и «Оформить предзаказ» уже стоят в липкой панели — второй раз подряд
     они не нужны, а «Сравнить» нужна. */
  .л-кнопки-покупки .л-кн.акцент { display: none; }
  .л-кнопки-покупки .л-кн { flex: 1; min-height: 56px; }
  .л-панель-покупки .л-к-спекам { display: none; }

  /* Липкая панель покупки: цена слева, действие справа */
  .л-низ-покупки { gap: 12px; }


  /* --- 14e: категория --- */
  /* Фото машины идёт первым: на телефоне заголовок «Квадроциклы Can-Am 2027»
     без картинки над ним — просто строка текста в пустом экране. */
  .л-герой-кат { display: flex; flex-direction: column; }
  .л-герой-кат .л-медиа { order: 1; min-height: 210px; height: 210px; border-top: 0; }
  .л-герой-кат .л-медиа img { padding: 8px; }
  .л-герой-кат .текст { order: 2; padding: 20px var(--л-поле) 24px; }
  .л-герой-кат .л-медиа .подпись { font-size: 10px; padding: 9px 14px; }
  .л-задачи article { background: var(--л-подложка); padding: 14px; }
  .л-задачи h3 { font-size: 17px; }
  .л-задачи p { font-size: 13px; line-height: 1.5; }
  .л-чип-ссылка { background: var(--л-фон); min-height: 44px; }

  /* Строка списка: фото слева, текст справа — карточка в столбик занимала
     пол-экрана на модель, и список переставал читаться как список. */
  .л-строка {
    grid-template-columns: 104px 1fr; gap: 13px; row-gap: 8px; padding: 14px var(--л-поле);
    align-items: start;
  }
  .л-строка .медиа { height: 76px; }
  .л-строка .опис { grid-column: 2; }
  .л-строка .имя { font-size: 19px; margin-bottom: 6px; }
  .л-строка .текст { font-size: 13px; }
  .л-строка .право { grid-column: 2; text-align: left; }
  .л-строка .право .ц { font-size: 21px; margin-bottom: 0; }
  .л-строка .право .ц + .руб { font-size: 15px; margin: 2px 0 0; }
  .л-строка .право .от { display: inline; margin-right: 6px; }
  .л-строка .право .л-кн { display: none; }
  .л-строка.хит .медиа { background: var(--л-фон); }

  /* --- 14f: контакты --- */
  .л-контакты .текст { padding: 20px var(--л-поле) 26px; }
  .л-контакты h1 .цвет { display: inline; }
  .л-контакты .лид { font-size: 14px; margin-bottom: 22px; }
  /* Связь — первым экраном: до карты, до текста, до всего остального */
  .л-номер { display: block; border: 0; padding: 0; }
  .л-номер > div:first-child { display: none; }
  .л-номер .действия { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .л-номер .действия .л-кн {
    grid-column: 1 / -1; order: -1; width: 100%; min-height: 56px;
    background: var(--л-акцент); color: #fff; border-color: var(--л-акцент);
  }
  .л-номер .действия .квадрат .кратко { display: none; }
  .л-номер .действия .квадрат .полно { display: inline; }
  /* мессенджер один (MAX спрятан, пока нет ссылки профиля) — кнопка на всю ширину, без дыры справа */
  .л-номер .действия.один .квадрат { grid-column: 1 / -1; }
  .л-номер .действия .квадрат {
    width: auto; height: auto; min-height: 56px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--л-тёмный); font-size: 12px; font-weight: 700; letter-spacing: .1em;
  }
  /* Номер на контактах — крупно и кликабельно (Артур, 22.08.2026): мелкая
     моно-строка терялась между кнопками и адресом */
  .л-подпись-связи {
    display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none;
    margin: 18px 0 24px; color: var(--л-тёмный);   /* низ: часы стояли вплотную к рамке адреса */
  }
  .л-подпись-связи b { font-family: 'Oswald', sans-serif; font-size: 30px; font-weight: 600; letter-spacing: .02em; line-height: 1; }
  .л-подпись-связи span {
    font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .1em; color: var(--л-метка); text-transform: uppercase;
  }
  .л-карта-места { min-height: 364px; height: 364px; /* 200 было полоской: метка, плашка Яндекса и кнопка геолокации не помещались (Артур, 22.08.2026); +44 под кнопку плашки столбиком (16.09.2026) — карте остаётся прежняя высота */ }
  /* Плашка адреса над картой — столбиком (16.09.2026, дизайн-ревью): в одну строку подпись, адрес
     и кнопка делили 390 px на три узкие колонки — «Шоу-рум, площадка и сервис» в три строки, адрес
     в две, а на 360 px плашка распирала блок до 386 px и кнопка уходила за край экрана */
  .л-карта-места .плашка {
    left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 14px 16px 16px;
    display: block; min-width: 0;
  }
  .л-карта-места .плашка .кнопки { margin: 0; display: block; }
  .л-карта-места .плашка .кнопки .л-кн.светлый-контур { display: none; }
  .л-карта-места .плашка .адрес { font-size: 18px; margin: 4px 0 12px; }
  .л-карта-места .плашка .кнопки .л-кн { min-height: 44px; padding: 10px 14px; font-size: 11px; width: 100%; display: flex; align-items: center; justify-content: center; }
  /* Поля формы: 16px обязательны — на меньшем размере iOS зумит страницу при фокусе */
  .л-форма input, .л-форма select, .л-форма textarea { font-size: 16px; min-height: 50px; }
  .л-форма textarea { min-height: 88px; }
  .л-форма .строка-отправки .л-кн { width: 100%; min-height: 56px; }



  /* Тач-цели: всё, по чему можно ткнуть пальцем, не ниже 44 px.
     Оставались мелкими крошки, телефон в полосе CTA и ссылка на таблицу версий. */
  .л-крошки a, .л-полоса .тел, .л-подпись-версий a, .л-меню-моб .тел, .л-к-списку {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* Строкой, а не flex: во flex текст между ссылками становится отдельным элементом, обычные пробелы
     по краям схлопываются (их заменял gap), а неразрывный от типографа оставался — «SUMMIT  · КОМПЛЕКТАЦИИ».
     Ссылки inline-flex с min-height 44 px стоят в строке по базовой линии текста. */
  .л-крошки { display: block; }
  body.меню-открыто { overflow: hidden; }
}

/* Узкие телефоны: поля и заголовки поджимаются, чтобы не было переносов посреди слова */
@media (max-width: 389px) {
  .сайт { --л-поле: 12px; }
  .л-низ-моб { padding-inline: 12px; }
  .л-заг h1, .л-герой-кат h1, .л-контакты h1 { font-size: 30px; }
}


/* Полноэкранный просмотр кадра по тапу в мобильной галерее (макет 14b: «тап по
   галерее открывает полноэкранный просмотр с зумом»). Лента тех же кадров на
   светлом мате — фон был тёмный, и вырезанные кадры (техника без фона, часто
   чёрная) на нём сливались с экраном (Артур, 27.08.2026). Светло-серый повторяет
   студийный мат BRP, водным кадрам гидроциклов рамкой тоже идёт. Свайп между
   кадрами, двойной тап — 2,5×, щипок — до 4×; панорама
   за счёт обычной прокрутки кадра. Закрытие: крестик, Esc, BackButton в Telegram. */
.л-зум { position: fixed; inset: 0; z-index: 100; background: #F1F3F5; display: flex; flex-direction: column; }
.л-зум .верх { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; flex: 0 0 auto; }
.л-зум .верх .сч { font-family: 'PlexMono', monospace; font-size: 12px; letter-spacing: .12em; color: #6B7178; }
.л-зум .верх button { width: 44px; height: 44px; background: none; border: 0; color: #101418; font-size: 22px; cursor: pointer; }
.л-зум .лента { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.л-зум .лента::-webkit-scrollbar { display: none; }
.л-зум .кадр { flex: 0 0 100%; height: 100%; scroll-snap-align: center; overflow: auto; display: flex; align-items: center; justify-content: center; touch-action: pan-x pan-y; }
.л-зум .кадр img { width: 100%; max-width: none; height: auto; display: block; user-select: none; -webkit-user-drag: none; transition: width .15s; }
.л-зум .кадр.крупно { display: block; }
.л-зум .подсказка { text-align: center; font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .12em; color: #6B7178; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); flex: 0 0 auto; text-transform: uppercase; }
body.зум-открыт { overflow: hidden; }
  @media (max-width: 639px) {
    .л-миниформа { align-items: flex-end; padding: 0; }
    .л-миниформа .окно { max-width: none; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); max-height: 92vh; }
    .л-миниформа .пара { grid-template-columns: 1fr; }
    .л-миниформа input { font-size: 16px; }
  }


/* ============ ШОУРУМ (design_handoff_showroom, 01.09.2026) ============
   Страница снимает один вопрос — «а вы вообще существуете?». Поэтому здесь
   только проверяемое: адрес, зал с техникой, владелец в кадре, команда,
   реквизиты. Читается сверху вниз, без каруселей и появлений на прокрутке.

   Два тяжёлых блока — зал и ролик — построены одинаково: колонка 420 слева,
   медиа справа. Это ритм страницы, ломать его в других блоках нельзя. Текст
   никогда не лежит поверх фотографии, только соседней колонкой. */

/* Верх страницы — тёмный блок: заголовок, лид, маршрут и цифры на одном
   чёрном поле (Артур, 02.09.2026 — прислал скриншот прежней версии: «вот так
   сделай»). Белый заголовок на тёмном держит первый экран сам, а фотография
   зала под ним начинается сразу, без светлой прослойки. */
.л-шоу-герой { background: var(--л-тёмный); color: #fff; padding: 44px var(--л-поле) 44px; }
/* Фотография зала подложкой. Затемнение — отдельным слоем поверх картинки, а
   не полупрозрачностью самого фона: так текст и цифры остаются на полной
   яркости, а темнеет только снимок. Проверять контраст замером, а не на глаз:
   белый текст на светлом пятне фотографии перестаёт читаться.
   Кадр смещён вниз (80%) намеренно: в верхней части снимка стоят вывески
   соседей по площадке — чужие марки на нашей странице не нужны. */
.л-шоу-герой.с-фото { position: relative; background-size: cover; background-position: center 80%; }
/* Затемнение неравномерное: слева, где стоит текст, почти глухое, справа
   слабее — там фотография и должна быть видна. Замер по снимку: под заголовком
   светлых пятен (ярче 90) было 11–18%, белый текст на них терял контраст. */
.л-шоу-герой.с-фото::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(16,20,24,.88) 0%, rgba(16,20,24,.72) 42%, rgba(16,20,24,.30) 100%),
    linear-gradient(180deg, rgba(16,20,24,.22) 0%, rgba(16,20,24,.12) 55%, rgba(16,20,24,.38) 100%);
}
.л-шоу-герой.с-фото > * { position: relative; z-index: 1; }
/* Лид на фотографии светлее обычного: серый #A8AEB6 хорош на глухом чёрном,
   а поверх снимка теряется. */
.л-шоу-герой.с-фото .лид { color: #D5DAE0; }
/* На узких экранах текст занимает всю ширину и заходит на светлую часть кадра,
   поэтому там затемнение равномерное и сильнее: замер показывал контраст лида
   1,4:1 при боковом градиенте. */
@media (max-width: 1023px) {
  .л-шоу-герой.с-фото::before {
    background:
      linear-gradient(90deg, rgba(16,20,24,.88) 0%, rgba(16,20,24,.84) 100%),
      linear-gradient(180deg, rgba(16,20,24,.32) 0%, rgba(16,20,24,.28) 55%, rgba(16,20,24,.45) 100%);
  }
}
.л-шоу-герой .верх { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px; align-items: end; padding-bottom: 40px; }
.л-шоу-герой .л-крошки, .л-шоу-герой .л-крошки a { color: var(--л-текст-тёмный-фон); }
.л-шоу-герой .л-крошки a:hover { color: var(--л-акцент); }
.л-шоу-герой h1 { font-family: 'Oswald', sans-serif; font-size: clamp(40px, 5vw, 72px);
  font-weight: 700; line-height: .94; letter-spacing: -.015em; text-transform: uppercase; margin: 14px 0 0; }
.л-шоу-герой h1 .цвет { color: var(--л-акцент); }
.л-шоу-герой .лид { font-size: 17px; line-height: 1.55; color: var(--л-текст-тёмный-фон);
  max-width: 560px; margin: 20px 0 0; }
.л-шоу-герой .кнопки { display: flex; gap: 12px; flex-wrap: wrap; }
.л-кн.контур-светлый { border-color: rgba(255,255,255,.28); color: #fff; background: none; padding: 17px 30px; }
.л-кн.контур-светлый:hover { background: rgba(255,255,255,.08); }
/* Полоса цифр — белая плашка на тёмном поле (Артур, 02.09.2026). Так факты
   читаются как отдельный документ поверх фона, а не как продолжение чёрного,
   и линии между ячейками наконец видно. */
/* Разделители здесь толще и темнее остальных линий сайта — 2 px вместо 1 и
   #8A9099 вместо #DCDFE3. Причина: белая плашка лежит на чёрном поле, а
   однопиксельный просвет между ячейками грида попадает на дробную координату
   и сглаживается в белый — у Артура из трёх разделителей оставался один
   средний (02.09.2026). Два пикселя переживают любое округление. */
.л-шоу-герой .цифры { display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--л-фон); border: 2px solid #8A9099; }
/* Разделитель — левая граница самой ячейки, а не просвет между ячейками.
   Просвет грида ложится на дробную координату и округляется каждый раз
   по-своему: линии выходили разной толщины. Границу блока браузер выравнивает
   тем же правилом, что и сам блок, поэтому все три получаются одинаковыми. */
.л-шоу-герой .цифры > div { background: var(--л-фон); color: var(--л-тёмный); padding: 22px 24px 24px; min-width: 0; }
.л-шоу-герой .цифры > div + div { border-left: 2px solid #8A9099; }
.л-шоу-герой .цифры b { display: block; font-family: 'Oswald', sans-serif; font-size: 36px;
  font-weight: 600; line-height: 1; }
/* Подпись того же тёмного цвета, что и цифра: строка читается целиком —
   «работаем с 2013», а не числом с блёклым пояснением под ним. */
.л-шоу-герой .цифры span { display: block; font-family: 'PlexMono', monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--л-тёмный); margin-top: 8px; }

/* --- 01 · Зал: кадр слева, слово справа. Фотография идёт первой намеренно:
   она и есть доказательство, а текст объясняет, зачем ехать. --- */
.л-шоу-зал, .л-шоу-ролик, .л-шоу-люди {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px; background: var(--л-линия); border-bottom: 1px solid var(--л-линия);
}
.л-шоу-зал .слово, .л-шоу-ролик .слово, .л-шоу-люди .слово {
  background: var(--л-фон); padding: 44px 40px; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.л-шоу-зал h2, .л-шоу-ролик h2, .л-шоу-люди h2 {
  font-family: 'Oswald', sans-serif; font-size: 38px; font-weight: 600; line-height: 1.05;
  text-transform: uppercase; margin: 0 0 18px;
}
.л-шоу-зал .слово > p, .л-шоу-ролик .слово > p, .л-шоу-люди .слово > p {
  font-size: 17px; line-height: 1.6; color: var(--л-текст); margin: 0 0 30px; max-width: 620px;
}
/* Кадр зала вертикальный: в нём видна глубина — ряды техники до дальней стены,
   на низком кадре главный аргумент блока пропадает. */
.л-шоу-зал .кадр { margin: 0; position: relative; background: var(--л-тёмный); min-height: 720px; min-width: 0; }
/* Точка кадрирования ниже середины: при 42% морды передних снегоходов
   срезались нижним краем — в кадре оставался в основном потолок и дальняя
   стена (Артур, 02.09.2026: «сильно задрал кадр вверх»). */
.л-шоу-зал .кадр img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 70%; }
.л-шоу-зал .кадр figcaption { position: absolute; left: 0; bottom: 0; background: var(--л-тёмный); color: #fff;
  font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  padding: 11px 16px; pointer-events: none; }
.л-шоу-зал .подзаг { font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--л-метка); padding-bottom: 14px; border-bottom: 1px solid var(--л-линия); }
/* Четыре ответа на «зачем ехать»: пары в два столбца, между ними воздух, а не
   рамки — рамка вокруг каждого пункта дробила бы блок на восемь ячеек. */
/* Кегль поднят: колонка высотой 720 стояла заполненной наполовину, и текст
   в ней выглядел мелким для своего места (Артур, 02.09.2026). */
.л-шоу-зал .что { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 40px; margin-top: 26px; }
.л-шоу-зал .что .имя { font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--л-акцент); margin-bottom: 9px; }
.л-шоу-зал .что p { font-size: 16px; line-height: 1.55; color: var(--л-текст); margin: 0; }
.л-шоу-зал .подзаг { font-size: 11px; }

/* Что стоит в зале прямо сейчас — из складского учёта. Строка: имя типа,
   шкала и число. Шкала считается от самого большого типа, поэтому у снегоходов
   она полная, а не «сколько-то процентов от выдуманной сотни». */
.л-склад { margin-top: 4px; border-top: 1px solid var(--л-линия); padding-top: 16px; }
.л-склад .шапка { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--л-метка); margin-bottom: 10px; }
.л-склад .строка { display: grid; grid-template-columns: minmax(0, 1fr) 160px 44px; align-items: center;
  gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--л-линия); }
.л-склад .строка:first-child { border-top: 1px solid var(--л-линия); }
.л-склад .строка .имя { font-size: 16px; font-weight: 600; color: var(--л-тёмный); }
.л-склад .строка .имя i { font-family: 'PlexMono', monospace; font-style: normal; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--л-метка); margin-left: 8px; }
.л-склад .шкала { height: 6px; background: var(--л-подложка); }
.л-склад .шкала span { display: block; height: 100%; background: var(--л-тёмный); }
.л-склад .строка b { font-family: 'Oswald', sans-serif; font-size: 26px; font-weight: 600;
  line-height: 1; text-align: right; }
.л-склад .низ { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 22px; }
/* Пилюли городов над списком (15.09.2026) — стиль фильтров каталога, свой только отступ */
.л-склад .л-пилюли { margin-bottom: 18px; }
.л-склад .низ p { font-size: 14px; color: var(--л-метка); margin: 0; max-width: 380px; }

/* Четыре ответа на «зачем ехать» — полосой под блоком зала, а не в его колонке:
   в колонке они делили место со списком наличия и оба блока становились тесными
   (макет Артура, 07.09.2026). */
.л-шоу-что { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--л-линия); border-bottom: 1px solid var(--л-линия); }
.л-шоу-что > div { background: var(--л-фон); padding: 34px 40px; }
.л-шоу-что .имя { font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 9px; }
.л-шоу-что p { font-size: 15px; line-height: 1.55; color: var(--л-текст); margin: 0; }

/* --- 02 · Собственник: слово слева, ролик справа --- */
/* Имя крупнее подписи блока: в колонке рядом с роликом место есть, а «Дима»
   здесь — то же по весу, что и заголовок (Артур, 02.09.2026). */
.л-шоу-ролик .кто { margin-bottom: 24px; }
.л-шоу-ролик .кто .имя { font-family: 'Oswald', sans-serif; font-size: 32px; font-weight: 600; line-height: 1.1; }
.л-шоу-ролик .кто .роль { font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--л-метка); margin-top: 6px; }
.л-шоу-ролик .вывод { color: var(--л-метка); }
/* Кнопка со значком воспроизведения: прижата влево и по содержимому — рядом
   стоит сам ролик, широкая плашка спорила бы с ним за внимание. */
.л-шоу-ролик .слово .играть {
  align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; gap: 10px;
}
.л-шоу-ролик .слово .играть svg { width: 13px; height: 13px; fill: currentColor; display: block; }
/* align-self: stretch тут ставить нельзя: с aspect-ratio браузер считает ширину
   от высоты строки, и на 1024 рамка вылезала из своей колонки на текст. */
/* Рамка 16:9 по центру колонки ниже текста: сверху и снизу просвечивал серый фон сетки — полосы
   выглядели сбоем. Фон секции тёмный, полосы читаются как поля кадра (дизайн-ревью 16.09.2026) */
@media (min-width: 1024px) { .л-шоу-ролик { background: var(--л-тёмный); } }
.л-шоу-ролик .рамка { position: relative; background: var(--л-тёмный) center/cover no-repeat;
  aspect-ratio: 16 / 9; min-width: 0; align-self: center; width: 100%; }
.л-шоу-ролик video { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: contain; background: transparent; }

/* --- 03 · Команда: общий кадр слева, разбивка по отделам справа --- */
.л-шоу-люди { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.л-шоу-люди .кадр { margin: 0; position: relative; background: var(--л-подложка); min-height: 340px; min-width: 0; }
.л-шоу-люди .кадр img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%; }
.л-шоу-люди .слово { padding: 40px 40px 36px; justify-content: flex-start; }
.л-шоу-люди h2 { font-size: 34px; }
.л-шоу-люди .отделы { display: grid; gap: 1px; background: var(--л-линия); border: 1px solid var(--л-линия); }
.л-шоу-люди .отделы > div { background: var(--л-фон); padding: 15px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.л-шоу-люди .отделы .имя { font-size: 15px; font-weight: 600; }
.л-шоу-люди .отделы .что { font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--л-метка); margin-top: 3px; }
.л-шоу-люди .отделы .сколько { font-family: 'Oswald', sans-serif; font-size: 24px; font-weight: 600; }

/* --- Реквизиты: три ячейки с действием в каждой. Карты здесь нет — она на
   странице контактов, и дублировать её незачем (Артур, 01.09.2026). --- */
.л-шоу-реквизиты { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--л-линия); border-bottom: 1px solid var(--л-линия); }
/* поля — --л-поле: на 1440 текст ячеек стоял на 32 px, а кикер и заголовок филиала над ними — на 56 */
.л-шоу-реквизиты > div { background: var(--л-фон); padding: 28px var(--л-поле); min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; }
.л-шоу-реквизиты .метка { font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--л-метка); margin-bottom: 10px; }
.л-шоу-реквизиты .знач { font-family: 'Oswald', sans-serif; font-size: 24px; font-weight: 600;
  line-height: 1.1; margin-bottom: 8px; }
.л-шоу-реквизиты .прим { font-size: 14px; color: var(--л-метка); margin-bottom: 18px; }
.л-шоу-реквизиты a, .л-шоу-реквизиты button {
  margin-top: auto; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--л-акцент); background: none; border: 0; padding: 0; cursor: pointer;
}
.л-шоу-реквизиты a:hover, .л-шоу-реквизиты button:hover { color: var(--л-тёмный); }
/* Магазин в Салехарде — те же три ячейки под своим заголовком; сверху линия,
   иначе ячейки сливаются с белым фоном заголовка (13.09.2026) */
.л-шоу-реквизиты.второй { border-top: 1px solid var(--л-линия); }

@media (max-width: 1279px) {
  .л-шоу-зал .слово, .л-шоу-ролик .слово, .л-шоу-люди .слово { padding: 32px; }
  .л-шоу-зал h2, .л-шоу-ролик h2, .л-шоу-люди h2 { font-size: 30px; }
  .л-шоу-зал .слово > p, .л-шоу-ролик .слово > p, .л-шоу-люди .слово > p { font-size: 15px; }
  .л-шоу-зал .что .имя { font-size: 16px; }
  .л-шоу-зал .что p { font-size: 15px; }
  .л-шоу-зал .кадр { min-height: 620px; }
  /* Четыре пункта в узкой колонке ложатся в один столбец: пара по 150 px
     ширины даёт по три слова в строке. */
  .л-шоу-зал .что { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 1023px) {
  /* Сначала медиа, под ним текст: на планшете узкая колонка рядом с фото
     превращается в лапшу из переносов. */
  .л-шоу-герой { padding: 32px var(--л-поле) 32px; }
  .л-шоу-герой .верх { grid-template-columns: 1fr; gap: 22px; align-items: start; padding-bottom: 28px; }
  .л-шоу-герой .цифры { grid-template-columns: repeat(2, 1fr); }
  /* Два ряда по две: левая граница у первой ячейки второго ряда ложилась на рамку двойной линией,
     а между рядами линии не было вовсе (дизайн-ревью 16.09.2026) */
  .л-шоу-герой .цифры > div:nth-child(odd) { border-left: 0; }
  .л-шоу-герой .цифры > div:nth-child(n+3) { border-top: 2px solid #8A9099; }
  .л-шоу-зал, .л-шоу-ролик, .л-шоу-люди { grid-template-columns: 1fr; }
  /* Ролик поднимаем над текстом: у зала и команды кадр и так стоит первым */
  .л-шоу-ролик .рамка { order: -1; }
  .л-шоу-зал .кадр { min-height: 520px; }
  .л-шоу-зал .что { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .л-шоу-люди .кадр { min-height: 300px; }
  .л-шоу-реквизиты { grid-template-columns: 1fr; }
}


/* ============ ШОУРУМ на телефоне ============
   Правила лежат в конце таблицы стилей намеренно: медиазапрос, записанный
   выше базовых классов, при равной специфичности проигрывает им и молча
   не применяется. */
@media (max-width: 767px) {
  .л-шоу-герой { padding: 26px var(--л-поле) 28px; }
  .л-шоу-герой h1 { font-size: 40px; line-height: 1; }
  .л-шоу-герой .лид { font-size: 15px; }
  /* Кнопки в столбик, а не в ряд: вдвоём по половине ширины номер телефона
     разрывался посреди цифр — «+7 922 280-» и «69-93» на второй строке. */
  .л-шоу-герой .кнопки { width: 100%; flex-direction: column; gap: 10px; }
  .л-шоу-герой .кнопки .л-кн { width: 100%; min-height: 56px; display: inline-flex;
    align-items: center; justify-content: center; white-space: nowrap; }
  .л-шоу-герой .цифры > div { padding: 16px 16px 18px; }
  .л-шоу-герой .цифры b { font-size: 28px; }
  .л-шоу-зал .слово, .л-шоу-ролик .слово, .л-шоу-люди .слово { padding: 26px var(--л-поле) 30px; }
  .л-шоу-зал h2, .л-шоу-ролик h2, .л-шоу-люди h2 { font-size: 27px; }
  /* Вертикальный кадр на телефоне работает лучше всего: зал виден целиком */
  .л-шоу-зал .кадр { min-height: 380px; }
  .л-шоу-зал .что { grid-template-columns: 1fr; gap: 18px; }
  .л-шоу-ролик .кто .имя { font-size: 24px; }
  /* Под роликом — как у соседних секций: кикер и заголовок, потом имя. Было «02 · ОСНОВАТЕЛЬ»,
     имя, «ОСНОВАТЕЛЬ · ЯМАЛ МОТО» и только потом «ЗНАКОМСТВО» — подпись повторялась, заголовок
     терялся в середине. Кнопка во всю ширину, как остальные действия на телефоне */
  .л-шоу-ролик .слово .л-кикер { order: -2; }
  .л-шоу-ролик .слово h2 { order: -1; }
  .л-шоу-ролик .кто { margin-bottom: 18px; }
  .л-шоу-ролик .слово .играть { align-self: stretch; justify-content: center; min-height: 56px; }
  .л-шоу-ролик .слово > p { margin-bottom: 14px; }
  .л-шоу-ролик .слово > p.вывод { margin-bottom: 22px; }
  .л-шоу-зал .кадр figcaption { font-size: 9px; padding: 9px 12px; }
  .л-шоу-люди .кадр { min-height: 230px; }
  .л-кн.широкая { min-height: 56px; display: flex; align-items: center; justify-content: center; }
  .л-шоу-зал .что li, .л-шоу-ролик .о li { font-size: 14px; }
  .л-шоу-реквизиты > div { padding: 22px var(--л-поле) 24px; }
  .л-шоу-реквизиты .знач { font-size: 21px; }
  /* Тач-цели: ссылка-действие в реквизитах — единственное, по чему тут тыкают */
  .л-шоу-реквизиты a, .л-шоу-реквизиты button { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ============ ПЛАШКА COOKIE ============
   Стоит внизу, но выше липкой панели телефона: перекрыть кнопку «Оформить
   предзаказ» она не должна. Не модальная — сайт под ней работает, потому что
   это уведомление, а не согласие, которое нужно вырвать до просмотра. */
.л-cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--л-тёмный); color: #fff; border-top: 1px solid var(--л-линия-тёмная);
  padding: 16px max(20px, (100% - 1440px) / 2 + 20px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.л-cookie p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--л-текст-тёмный-фон); max-width: 820px; }
.л-cookie a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.л-cookie a:hover { color: var(--л-акцент); }
.л-cookie .л-кн { flex: 0 0 auto; min-height: 44px; padding: 12px 30px; }

@media (max-width: 767px) {
  /* Над липкой панелью: у неё своя высота, поэтому плашка поднята на неё же */
  .л-cookie { bottom: 72px; padding: 14px var(--л-поле); gap: 12px; }
  .л-cookie p { font-size: 12px; }
  .л-cookie .л-кн { width: 100%; min-height: 48px; }

  /* Полоса с призывом: телефон строкой, кнопка под ним во всю ширину. В ряд с телефоном кнопка
     сжималась, текст «Оформить предзаказ» уходил в две строки и кнопка вырастала до 70–75 px */
  .л-полоса .право { width: 100%; flex-wrap: wrap; gap: 12px 18px; }
  .л-полоса .право .л-кн { flex: 1 1 100%; white-space: nowrap; }

  .л-склад .строка { grid-template-columns: minmax(0, 1fr) 64px 40px; gap: 10px; }
  .л-склад .строка .имя { font-size: 15px; }
  .л-склад .строка .имя i { display: block; margin: 3px 0 0; }
  .л-склад .строка b { font-size: 22px; }
  .л-склад .низ { gap: 12px; }
  .л-склад .низ .л-кн { width: 100%; }
  .л-склад .низ p { font-size: 13px; }
  .л-шоу-что { grid-template-columns: 1fr; }
  .л-шоу-что > div { padding: 24px var(--л-поле); }
  .л-пусто { padding: 46px var(--л-поле) 70px; }
  .л-пусто h1 { font-size: 30px; }
  /* Филиалы на контактах — столбиком */
  .л-филиалы { grid-template-columns: 1fr; padding-bottom: 36px; }
  .л-филиалы .карточка-филиала { padding: 22px 20px 20px; }
  .карточка-филиала .город { font-size: 28px; }
  .карточка-филиала .строка { grid-template-columns: 76px minmax(0, 1fr); }
  .карточка-филиала .действия a { min-height: 44px; display: inline-flex; align-items: center; }
  /* Отзывы — столбиком */
  .л-отзывы { grid-template-columns: 1fr; }
  .л-отзыв { padding: 22px 20px 20px; }
  .л-отзыв .ещё { min-height: 44px; }
  .л-отзывы-рейтинг { align-items: flex-start; }
  .л-отзывы-рейтинг b { font-size: 34px; }
}

/* Пилюли выбора лентой на телефоне (16.09.2026, дизайн-ревью): на главной, в разделе и в сравнении
   пять-четырнадцать пилюль разной ширины ложились рваными рядами (3+2, у Maverick X3 — пять рядов).
   Лента как у типов в каталоге: одна строка, листается пальцем, отступ от края сохраняется и при
   прокрутке к началу (scroll-padding — без него первая пилюля прилипала к краю экрана). */
@media (max-width: 767px) {
  .л-пилюли.лента {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
    margin-inline: calc(var(--л-поле) * -1); padding-inline: var(--л-поле); scroll-padding-inline: var(--л-поле);
    max-width: none; width: auto;
  }
  .л-пилюли.лента::-webkit-scrollbar { display: none; }
  .л-пилюли.лента button { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
  .л-ср-выбор .л-пилюли.лента { flex: 1 1 100%; min-width: 0; }
  /* в шапке раздела лента стоит в обёртке рядом с сортировкой — без min-width: 0 содержимое ленты
     распирало обёртку до 557 px на 360 */
  .л-шапка-секции > .с-лентой { min-width: 0; max-width: 100%; flex: 1 1 100%; }
  .л-лента-типов { scroll-padding-inline: var(--л-поле); }
}

/* Подпись под списком версий на телефоне (16.09.2026, дизайн-ревью): ссылка «Все N в таблице →» не
   влезала в строку, и разделитель «·» висел в конце первой строки. На телефоне ссылка — своей строкой */
@media (max-width: 767px) {
  .л-подпись-версий .разд { display: none; }
  .л-подпись-версий a { display: flex; width: max-content; margin-top: 2px; }
}

/* «О каталоге» внизу главной (22.09.2026, аудит SEO: без скриптов роботы видели главную почти пустой).
   Текст собирает опубликовать.mjs и кладёт в HTML под заглушку загрузки, приложение ставит тот же блок
   перед подвалом главной. */
.л-о-каталоге { padding: 44px var(--л-поле) 48px; border-top: 1px solid var(--л-линия); }
.л-о-каталоге h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; margin: 12px 0 14px; }
.л-о-каталоге p { max-width: 75ch; font-size: 16px; line-height: 1.65; color: var(--л-текст); margin: 0 0 14px; }
.л-о-каталоге .ссылки { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 6px; }
.л-о-каталоге .ссылки a { font-family: 'PlexMono', monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--л-акцент); font-weight: 600; }
@media (max-width: 767px) {
  .л-о-каталоге { padding: 36px var(--л-поле) 40px; }
  .л-о-каталоге .ссылки { row-gap: 0; }
  .л-о-каталоге .ссылки a { padding-block: 13px; }
}

/* ===== статические страницы (опубликовать.mjs, 13.09.2026) ===== */
.статика [id] { scroll-margin-top: 84px; }
.статика .нп { white-space: nowrap; }
.статика .л-панель-покупки h1 { line-height: 1; }
.статика .л-панель-покупки h1 .тип { display: block; font-family: 'PlexMono', monospace; font-size: 11px; font-weight: 500;
  letter-spacing: .14em; color: var(--л-метка); margin-bottom: 8px; }
.статика .л-кнопки-покупки { display: flex; gap: 10px; flex-wrap: wrap; }
.статика .л-кнопки-покупки .л-кн { flex: 1 1 auto; text-align: center; justify-content: center; }
.статика .л-версии a { background: var(--л-фон); width: 100%; text-align: left; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 11px 14px; font-size: 14px; color: var(--л-тёмный); }
.статика .л-версии a:hover { background: var(--л-подложка); }
.статика .л-версии a .разница { font-family: 'PlexMono', monospace; font-size: 12px; color: var(--л-метка); white-space: nowrap; }
.статика .л-версии a.on { background: var(--л-тёмный); color: #fff; font-weight: 600; }
.статика .л-версии a.on .разница { font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: 600; color: #fff; }
.статика .л-цвета .свотч { display: inline-block; width: 34px; height: 34px; border: 1px solid var(--л-линия); }
.статика .л-подпись-версий + .л-подпись-версий { margin-top: 4px; }
.статика .свотч { flex: 0 0 auto; }
.статика .л-карта.каталожная .фото { position: relative; }
.статика .л-карта.каталожная.текущая { background: var(--л-подложка); }
.статика .л-карта.каталожная .руб { display: block; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 18px; }
.с-сетка { padding: 0 var(--л-поле) 48px; }
/* Линии сетки — тенью карточек: клетка без карточки остаётся белой, а не серой */
.с-сетка .л-сетка { gap: 1px; padding: 1px; background: transparent; border: 0; }
.с-сетка .л-сетка > * { box-shadow: 0 0 0 1px var(--л-линия); }
.с-сетка .л-карта.каталожная { background: var(--л-фон); }
.с-сетка .л-карта.каталожная:hover, .с-сетка .л-карта.каталожная.текущая { background: var(--л-подложка); }
/* таблица версий */
.с-версии { padding: 0 var(--л-поле) 48px; }
.с-версии .пояс { color: var(--л-текст); font-size: 15px; line-height: 1.6; margin: 0 0 18px; max-width: 80ch; }
.с-версии .строки { border-top: 1px solid var(--л-тёмный); }
.с-версии .строка { display: grid; grid-template-columns: minmax(170px, 1.2fr) 3fr minmax(130px, auto); gap: 6px 28px;
  padding: 14px 0; border-bottom: 1px solid var(--л-линия); align-items: baseline; }
.с-версии .шапка-строк { font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--л-метка); padding: 12px 0 10px; }
.с-версии .шапка-строк span:last-child { text-align: right; }
.с-версии .цвет { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--л-тёмный); font-size: 15px; }
.с-версии .свотч, .с-цвета .свотч { display: inline-block; width: 16px; height: 16px; border: 1px solid var(--л-линия); }
.с-версии .отличия { color: var(--л-текст); font-size: 14px; line-height: 1.5; }
.с-версии .ц { font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600; text-align: right; white-space: nowrap; color: var(--л-тёмный); }
.с-версии .ц .руб { display: block; font-size: 15px; font-weight: 500; color: var(--л-текст); margin-top: 2px; }
.с-цвета { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1px; padding: 1px; margin-top: 28px; }
.с-цвета figure { box-shadow: 0 0 0 1px var(--л-линия); }
.с-цвета figure { margin: 0; background: var(--л-фон); padding: 14px 14px 12px; }
.с-цвета img { display: block; width: 100%; height: auto; }
.с-цвета figcaption { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--л-тёмный); margin-top: 8px; }
/* заявка */
.с-заявка { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--л-линия); border-bottom: 1px solid var(--л-линия); }
.с-заявка .текст { padding: 56px var(--л-поле); }
.с-заявка .текст h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1; margin: 12px 0 16px; }
.с-заявка .текст p { color: var(--л-текст); font-size: 16px; line-height: 1.6; max-width: 52ch; margin: 0; }
.с-заявка .контакты { display: grid; gap: 8px; margin-top: 22px; font-size: 15px; color: var(--л-текст); }
.с-заявка .контакты a { color: var(--л-тёмный); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* крупный — только телефон, прямая первая ссылка блока: «a:first-child» цеплял и ссылки внутри строк (22.09.2026) */
.с-заявка .контакты > a:first-child { font-family: 'Oswald', sans-serif; font-size: 26px; text-decoration: none; }
.с-заявка .нп { white-space: nowrap; }
.с-заявка .л-форма .ответ { font-size: 14px; line-height: 1.5; color: var(--л-тёмный); min-height: 1.2em; }
.с-заявка .л-форма .ответ a { color: var(--л-тёмный); font-weight: 600; }
/* шапка раздела категории */
.с-раздел { padding: 24px var(--л-поле) 44px; border-bottom: 1px solid var(--л-линия); }
.с-раздел .л-крошки { margin: 0 0 22px; }
.с-раздел h1 { font-size: clamp(38px, 6vw, 76px); line-height: .95; margin: 12px 0 18px; }
.с-раздел .лид { max-width: 72ch; font-size: 16px; line-height: 1.65; color: var(--л-текст); margin: 0; }
.с-раздел .цифры { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 26px; font-family: 'PlexMono', monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--л-метка); }
.с-раздел .цифры b { display: block; font-family: 'Oswald', sans-serif; font-size: 30px; font-weight: 600; letter-spacing: 0; color: var(--л-тёмный); margin-bottom: 2px; }
.с-раздел .кнопки { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
/* текстовые блоки */
.с-текст { padding: 44px var(--л-поле) 48px; border-top: 1px solid var(--л-линия); }
.с-текст h2 { font-size: clamp(24px, 2.6vw, 34px); margin: 0 0 14px; }
.с-текст p { max-width: 75ch; font-size: 16px; line-height: 1.65; color: var(--л-текст); margin: 0 0 14px; }
.с-ссылки { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 6px; }
/* фото здания филиала на городской странице (16.09.2026) */
.с-фото-места { margin: 26px 0 0; max-width: 880px; }
.с-фото-места figcaption { font-size: 13px; line-height: 1.5; color: var(--л-метка); margin-top: 10px; }
.с-после-сетки { margin-top: 18px; }
.с-ссылки a { font-family: 'PlexMono', monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--л-акцент); font-weight: 600; }
/* доставка по России и городские страницы (13.09.2026): ячейки фактов — как
   реквизиты шоурума, прайс — строками, города — сеткой ссылок */
.с-факты { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--л-линия);
  border-bottom: 1px solid var(--л-линия); }
.с-факты > div { background: var(--л-фон); padding: 26px var(--л-поле) 24px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.с-факты .метка { font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--л-метка); margin-bottom: 10px; }
.с-факты .знач { font-family: 'Oswald', sans-serif; font-size: 24px; font-weight: 600; line-height: 1.1; margin-bottom: 8px; color: var(--л-тёмный); }
.с-факты .прим { font-size: 14px; line-height: 1.5; color: var(--л-текст); margin-bottom: 16px; }
.с-факты .прим a { color: var(--л-тёмный); font-weight: 600; white-space: nowrap; }
.с-факты > div > a { margin-top: auto; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--л-акцент); }
.с-факты > div > a:hover { color: var(--л-тёмный); }
/* регион в кикере — капсом через CSS: в тексте «Республика Саха (Якутия)», иначе
   «(ЯКУТИЯ)» ловит проверка служебных пометок склада */
.с-раздел.доставка .л-кикер { text-transform: uppercase; }
.с-пояс-цен { font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--л-метка); max-width: 44ch; }
.с-прайс { padding: 0 var(--л-поле) 40px; }
.с-прайс .строка { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, auto) minmax(100px, auto); gap: 4px 28px;
  padding: 14px 0; border-bottom: 1px solid var(--л-линия); align-items: baseline; color: var(--л-тёмный); }
.с-прайс .шапка-строк { border-top: 1px solid var(--л-тёмный); font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--л-метка); padding: 12px 0 10px; }
.с-прайс .шапка-строк span:not(:first-child) { text-align: right; }
.с-прайс a.строка:hover .имя { color: var(--л-акцент); }
.с-прайс .имя { font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 600; line-height: 1.15; }
.с-прайс .имя i { display: block; font-style: normal; font-family: 'PlexMono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--л-метка); margin-top: 4px; }
.с-прайс .руб { font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600; text-align: right; white-space: nowrap; }
.с-прайс .долл { font-size: 14px; color: var(--л-текст); text-align: right; white-space: nowrap; }
.с-города { padding: 0 var(--л-поле) 48px; }
/* дата пересчёта цен, списки цен и частые вопросы (22.09.2026) */
.с-обновлено { font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--л-метка); margin: 18px 0 0; }
.с-строки { list-style: none; margin: 0; padding: 0; }
.с-строки > li { display: contents; }
.с-вопросы { padding: 0 var(--л-поле) 48px; }
.с-вопросы .ст-вопрос { max-width: 900px; }
.с-вопросы .ст-вопрос:last-child { border-bottom: 1px solid var(--л-линия); }
.с-спрос { max-width: 75ch; margin: 0 0 14px; padding-left: 20px; }
.с-спрос li { font-size: 16px; line-height: 1.65; color: var(--л-текст); margin: 0 0 6px; }
.с-спрос li b { color: var(--л-тёмный); font-weight: 600; }
.с-текст .с-мелко-примечание { font-size: 13px; color: var(--л-метка); }
.с-о-компании { padding: 0 var(--л-поле) 48px; }
.с-о-компании > p { max-width: 75ch; font-size: 16px; line-height: 1.65; color: var(--л-текст); margin: 0; }
.с-о-компании ul { max-width: 75ch; margin: 0 0 14px; padding-left: 20px; }
.с-о-компании li { font-size: 16px; line-height: 1.65; color: var(--л-текст); margin: 0 0 10px; }
.с-о-компании li b { color: var(--л-тёмный); }
.с-о-компании a { color: var(--л-тёмный); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.с-вопросы .ст-вопрос p a { color: var(--л-тёмный); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* статья (14.09.2026): текст колонкой для чтения, таблицы — строками .с-прайс */
.с-статья { padding: 12px var(--л-поле) 56px; }
.с-статья > h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; margin: 44px 0 14px; max-width: 32ch; }
.с-статья > h3 { font-family: 'Oswald', sans-serif; font-size: 21px; font-weight: 600; text-transform: uppercase; margin: 26px 0 8px; }
.с-статья > p { max-width: 75ch; font-size: 16px; line-height: 1.7; color: var(--л-текст); margin: 0 0 14px; }
.с-статья > p a { color: var(--л-акцент); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.с-статья .с-прайс { padding: 0; margin: 18px 0 10px; }
/* --- статьи из статейника (15.09.2026): блоки движка (TldrSection, Steps, Callout, FAQ, Sources…) в стиле сайта.
   Радиус 0, теней нет; тип заметки назван словом («Совет», «Внимание») — цвет не единственный носитель смысла. --- */
.ст-мета { font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--л-метка); margin: 16px 0 0; }
.ст-узнаете { margin: 20px 0 0; padding: 18px 22px; background: var(--л-подложка); max-width: 75ch; }
.ст-узнаете b, .ст-оглавление b, .ст-коротко .ст-метка, .ст-заметка > b { display: block; font-family: 'PlexMono', monospace; font-size: 11px;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--л-метка); margin: 0 0 8px; }
.ст-узнаете ul, .ст-коротко ul { margin: 0; padding-left: 20px; }
.ст-узнаете li, .ст-коротко li { font-size: 15px; line-height: 1.55; margin: 0 0 4px; color: var(--л-текст); }
.ст-оглавление { padding: 22px var(--л-поле) 0; }
.ст-оглавление ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 40px; max-width: 900px; }
.ст-оглавление li { font-size: 14px; line-height: 1.5; margin: 0 0 6px; break-inside: avoid; }
.ст-оглавление a { color: var(--л-текст); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--л-линия); }
.ст-оглавление a:hover { color: var(--л-акцент); }
.ст-статья > ul, .ст-статья > ol { max-width: 75ch; font-size: 16px; line-height: 1.7; color: var(--л-текст); padding-left: 22px; margin: 0 0 14px; }
.ст-статья li > p { margin: 0; }
.ст-статья a { color: var(--л-акцент); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Строка таблицы моделей в статье — ссылка целиком: подчёркивание ссылок статьи ложилось на название,
   моноширинные подписи и обе цены, и серые строки выглядели зачёркнутыми (16.09.2026, дизайн-ревью).
   Строка оформляется как в разделах и подборках: без подчёркивания и акцентного цвета */
.ст-статья a.строка { color: inherit; font-weight: inherit; text-decoration: none; }
.ст-статья > h2 { scroll-margin-top: 90px; }
.ст-коротко { max-width: 75ch; border-left: 3px solid var(--л-акцент); background: var(--л-подложка); padding: 14px 20px 12px; margin: 0 0 18px; }
.ст-шаги { list-style: none; counter-reset: шаг; padding: 0; margin: 6px 0 18px; max-width: 75ch; }
.ст-шаги > li { counter-increment: шаг; position: relative; padding: 2px 0 0 46px; margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: var(--л-текст); }
.ст-шаги > li::before { content: counter(шаг, decimal-leading-zero); position: absolute; left: 0; top: 0; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center; background: var(--л-тёмный); color: #fff; font-family: 'Oswald', sans-serif; font-size: 14px; }
.ст-шаги > li > b { display: block; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 18px; text-transform: uppercase; margin: 0 0 4px; }
.ст-шаги p { margin: 0 0 6px; }
.ст-заметка { max-width: 75ch; border: 1px solid var(--л-линия); padding: 14px 20px 10px; margin: 0 0 18px; }
.ст-заметка.ст-warning, .ст-заметка.ст-danger { border-color: var(--л-сигнал); background: var(--л-сигнал-фон); }
.ст-заметка.ст-warning > b, .ст-заметка.ст-danger > b { color: var(--л-сигнал); }
.ст-заметка p, .ст-коротко p { margin: 0 0 6px; font-size: 15px; line-height: 1.6; color: var(--л-текст); }
.ст-вопросы, .ст-источники { max-width: 75ch; margin: 44px 0 0; }
.ст-вопросы > h2, .ст-источники > h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; margin: 0 0 14px; scroll-margin-top: 90px; }
.ст-вопрос { border-top: 1px solid var(--л-линия); padding: 16px 0 6px; }
.ст-вопрос h3 { font-family: 'Oswald', sans-serif; font-size: 19px; font-weight: 600; margin: 0 0 8px; }
.ст-вопрос p { margin: 0 0 10px; font-size: 16px; line-height: 1.65; color: var(--л-текст); }
.ст-источники ul, .ст-источники ol { padding-left: 20px; margin: 0; }
.ст-источники li { font-size: 14px; line-height: 1.6; margin: 0 0 6px; color: var(--л-текст); }
.ст-цитата { max-width: 75ch; margin: 6px 0 18px; padding: 4px 0 4px 20px; border-left: 3px solid var(--л-тёмный); }
.ст-цитата blockquote { margin: 0; font-size: 17px; line-height: 1.6; font-style: italic; color: var(--л-текст); }
.ст-цитата blockquote p { margin: 0 0 6px; }
.ст-цитата figcaption { font-size: 13px; color: var(--л-метка); margin-top: 6px; }
.ст-цифра { display: inline-flex; flex-direction: column; gap: 2px; border: 1px solid var(--л-линия); padding: 14px 20px; margin: 4px 12px 16px 0; min-width: 180px; }
.ст-цифра b { font-family: 'Oswald', sans-serif; font-size: 34px; font-weight: 600; line-height: 1; }
.ст-цифра span { font-size: 14px; color: var(--л-текст); }
.ст-цифра small { font-size: 12px; color: var(--л-метка); }
.ст-сравнение { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--л-линия); border: 1px solid var(--л-линия); max-width: 900px; margin: 6px 0 18px; }
.ст-сравнение > div { background: var(--л-фон); padding: 14px 18px; font-size: 15px; line-height: 1.6; }
.ст-сравнение > div > b { display: block; font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--л-метка); margin-bottom: 6px; }
.ст-фото { margin: 10px 0 20px; max-width: 900px; }
.ст-фото img { width: 100%; height: auto; display: block; background: var(--л-подложка); }
.ст-фото figcaption { font-size: 13px; color: var(--л-метка); margin-top: 6px; }
/* таблица — по ширине колонки текста (75ch при 16px, как у абзацев) и на весь экран телефона: текст в ячейках
   переносится. Было min-width 520px — на телефоне правая колонка (цена) уезжала за край (15.09.2026) */
.ст-таблица { overflow-x: auto; max-width: 75ch; font-size: 16px; margin: 6px 0 18px; }
.ст-таблица table { border-collapse: collapse; font-size: 14px; width: 100%; }
.ст-таблица th, .ст-таблица td { border: 1px solid var(--л-линия); padding: 9px 12px; text-align: left; vertical-align: top; line-height: 1.45; }
.ст-таблица th { background: var(--л-подложка); font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.ст-призыв { max-width: 75ch; background: var(--л-тёмный); color: #fff; padding: 20px 24px; margin: 10px 0 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ст-призыв > b { font-family: 'Oswald', sans-serif; font-size: 22px; text-transform: uppercase; }
.ст-призыв p { margin: 0; color: var(--л-текст-тёмный-фон); font-size: 15px; line-height: 1.6; }
.ст-статья .ст-призыв a.л-кн { color: #fff; text-decoration: none; }
@media (max-width: 767px) {
  .ст-оглавление ol { columns: 1; }
  .ст-сравнение { grid-template-columns: 1fr; }
  .ст-шаги > li { padding-left: 42px; }
  .ст-таблица table { font-size: 13px; }
  .ст-таблица th, .ст-таблица td { padding: 8px 9px; }
}
/* таблица моторов: две колонки — мотор и модели текстом; на телефоне модели под мотором */
.с-прайс.моторы .строка { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.с-прайс .с-мелко { font-size: 15px; line-height: 1.5; color: var(--л-текст); text-align: right; }
.с-города .округ + .округ { margin-top: 28px; }
.с-города .имя-округа { font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--л-метка); margin-bottom: 10px; }
.с-города .сетка { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1px; padding: 1px; }
.с-города .сетка a { box-shadow: 0 0 0 1px var(--л-линия); background: var(--л-фон); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; color: var(--л-тёмный); }
.с-города .сетка a:hover { background: var(--л-подложка); }
.с-города .сетка b { font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600; line-height: 1.1; }
.с-города .сетка span { font-size: 13px; line-height: 1.4; color: var(--л-текст); }
.с-города .сетка i { font-style: normal; font-family: 'PlexMono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--л-метка); margin-top: auto; padding-top: 6px; }
.с-города .нет-города { font-size: 15px; line-height: 1.6; color: var(--л-текст); margin: 22px 0 0; max-width: 75ch; }
@media (max-width: 1023px) {
  .с-заявка { grid-template-columns: 1fr; }
  .с-заявка .л-форма { border-left: 0; border-top: 1px solid var(--л-линия); }
  .с-факты { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* нечётная последняя ячейка — на всю строку: иначе рядом виден фон сетки серым */
  .с-факты > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .с-версии .строка { grid-template-columns: 1fr auto; gap: 4px 16px; }
  .с-версии .отличия { grid-column: 1 / -1; grid-row: 2; }
  .с-версии .шапка-строк span:nth-child(2) { display: none; }
  .с-заявка .текст { padding: 36px var(--л-поле) 28px; }
  .с-заявка .контакты > a:first-child { font-size: 22px; }
  .с-раздел h1 { font-size: 40px; }
  /* 320–359 px: «НИЖНЕВАРТОВСК» и «ПЕТРОПАВЛОВСК-» в 40 px шире строки (302 и 308 при 296) —
     заголовок чуть мельче, чтобы длинное название города не вылезало (16.09.2026, дизайн-ревью) */
  @media (max-width: 359px) { .с-раздел h1 { font-size: 36px; } }
  .с-цвета { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .статика .л-кнопки-покупки { flex-direction: column; }
  .статика .л-кнопки-покупки .л-кн, .статика .л-кнопки-покупки .л-кн.акцент { display: flex; width: 100%; }
  .с-факты { grid-template-columns: 1fr; }
  .с-факты > div { padding: 20px var(--л-поле); }
  .с-факты .знач { font-size: 21px; }
  .с-факты > div > a { min-height: 44px; display: inline-flex; align-items: center; }
  /* Тач-цели не ниже 44 px (16.09.2026, дизайн-ревью): списки ссылок стояли строками по 18 px
     с зазором 10 — пальцем попадали в соседнюю. Ссылки внутри текста раскладку не меняют:
     вертикальный отступ у строчной ссылки расширяет только область нажатия */
  .с-ссылки { row-gap: 0; }
  .с-ссылки a { padding-block: 13px; }   /* не inline-flex: внутри <x-nb>, и во flex пробел перед ним схлопывался — «БАГГИCAN-AM» */
  .с-заявка .контакты { gap: 2px; }
  .с-заявка .контакты > a { display: flex; align-items: center; min-height: 44px; }
  .с-факты .прим a, .ст-статья p > a, .с-вопросы p a, .с-о-компании a { padding-block: 12px; }
  .ст-оглавление li { margin: 0; }
  .ст-оглавление a { display: block; padding: 11px 0; }
  .с-прайс .строка { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; }
  .с-прайс .строка .имя { grid-row: 1 / 3; }
  .с-прайс .строка .руб { font-size: 19px; }
  .с-прайс .шапка-строк span:nth-child(3) { display: none; }
  .с-прайс.моторы .строка { grid-template-columns: 1fr; gap: 6px; }
  .с-прайс.моторы .строка .имя { grid-row: auto; }
  .с-прайс.моторы .с-мелко { text-align: left; }
  .с-прайс.моторы .шапка-строк span:nth-child(2) { display: none; }
  .с-города .сетка { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .с-города .сетка a { padding: 14px; min-height: 44px; }
  .с-города .сетка b { font-size: 18px; }
  /* кнопки первого экрана на телефоне — во всю ширину на всех статических страницах: столбиком они
     стояли разной ширины («Каталог с фильтрами» 244, «Позвонить» 153 px), design review 14.09.2026 */
  .с-раздел .кнопки .л-кн { flex: 1 1 100%; justify-content: center; text-align: center; }
}

.кар { position:relative; min-width:0; }
.кар > .кар-кадр { display:block; width:100%; height:auto; background:#F4F6F7; }
.кар-окно { position:relative; }
.кар-лента { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  overscroll-behavior-x:contain; background:#F4F6F7; outline:none; }
.кар-лента::-webkit-scrollbar { display:none; }
.кар-лента .кар-кадр { flex:0 0 100%; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover;
  scroll-snap-align:start; scroll-snap-stop:always; display:block; }
.кар-стрелка { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px;
  display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer;
  background:rgba(255,255,255,.92); border:1px solid #DCDFE3; color:#101418; font-size:20px; line-height:1; }
.кар-стрелка:hover { background:#fff; border-color:#101418; }
.кар-стрелка.назад { left:12px; }
.кар-стрелка.вперёд { right:12px; }
.кар-низ { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:8px; }
.кар-счёт { font-family:'PlexMono',monospace; font-size:11px; letter-spacing:.12em; color:#8A9099;
  white-space:nowrap; flex:none; }
/* Точки всегда в одну строку: при 17 кадрах на 390 px ряд уходил во вторую строку, а «1 / 17»
   ломался надвое. Кнопки ужимаются до 12 px, на широком экране остаются по 24. */
.кар-точки { display:flex; justify-content:flex-end; min-width:0; }
.кар-точки button { width:24px; min-width:12px; height:24px; padding:0; border:0; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center; }
.кар-точки button::before { content:''; width:8px; height:8px; border-radius:50%; background:#DCDFE3; }
.кар-точки button[aria-current]::before { background:#101418; }
@media (max-width:767px) {
  .кар-стрелка { font-size:18px; }   /* 44 px, как на компьютере: 38 было ниже тач-цели */
  .кар-стрелка.назад { left:8px; }
  .кар-стрелка.вперёд { right:8px; }
}