/* ---- nd-quiz.css ---- */
/* 04.09.2026 - п.30 списка Никиты «токены почти не используются, 3359 хардкодов цвета».
   Точные совпадения канона заменены на var(--токен, #значение); фолбэк оставлен намеренно -
   если переменная потеряется, цвет останется прежним. Соответствие:
   #0E0E12 --ink · #1E1E24 --ink-2 · #3D3D48 --ink-3 · #6E6E76 --muted · #ECECF0 --line ·
   #F0F0F3 --line-2 · #F7F7F9 --bg · #E11D2E --accent · #B8152B --accent-2 · #1E8C4A --success ·
   #FAEDD1 --warn-soft · #FFFFFF --bg-card (фоны) либо --ink-invert (текст, иконки, обводки).
   Намеренно НЕ трогали #5A5A66, #9C9CA8, #C07A00: их токены (--ink-4, --muted-2, --warn)
   new-catalog-after.css переопределяет внутри .how/.faq/.adv/.viewed/.seo/.contacts-section
   на другие значения - подстановка var() там сменила бы цвет. Заменено в файле: 39. */
/* 04.09.2026 — всплывающий квиз подбора (includes/nd-quiz.php, js/nd-quiz.js).
   Стиль взят у страницы /forma/ (.ndf-*) и карточек нового дизайна: те же радиусы, тот же красный,
   Montserrat. На телефоне окно — лист снизу на всю ширину, на компьютере — окно по центру. */

html.ndq-lock, html.ndq-lock body { overflow: hidden; }

.ndq { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ndq[hidden] { display: none !important; }
.ndq-back { position: absolute; inset: 0; background: rgba(14, 14, 18, .55); opacity: 0; transition: opacity .22s; }
.ndq.is-open .ndq-back { opacity: 1; }

.ndq-win {
  /* 07.09.2026, аудит п.13: единица vh на телефоне считает экран БЕЗ учёта адресной строки,
     поэтому лист вылезал за нижний край. dvh считает реально видимую высоту; строка с vh
     оставлена первой как фолбэк для старых браузеров. */
  position: relative; width: 100%; max-width: 560px; overflow-y: auto;
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  background: var(--bg-card, #FFFFFF); border-radius: 22px; padding: 26px 26px 20px;
  box-shadow: 0 24px 70px rgba(14, 14, 18, .28);
  font-family: Montserrat, Inter, system-ui, sans-serif; color: var(--ink, #0E0E12);
  transform: translateY(14px) scale(.985); opacity: 0; transition: transform .22s, opacity .22s;
}
.ndq.is-open .ndq-win { transform: none; opacity: 1; }

.ndq-x {
  position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: #F1F2F5; color: var(--muted, #6E6E76); cursor: pointer; transition: background .15s, color .15s;
}
.ndq-x:hover { background: #E7E8EC; color: var(--ink, #0E0E12); }

.ndq-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent, #E11D2E); }
.ndq-title { font-size: 22px; font-weight: 800; line-height: 1.2; margin: 6px 0 14px; padding-right: 34px; }

.ndq-prog { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ndq-prog-bar { flex: 1; height: 5px; border-radius: 999px; background: var(--line, #ECECF0); overflow: hidden; }
.ndq-prog-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent, #E11D2E); transition: width .25s; }
.ndq-prog-t { font-size: 12.5px; font-weight: 600; color: var(--muted, #6E6E76); white-space: nowrap; }
.ndq-prog-t b { color: var(--ink, #0E0E12); }

.ndq-step { display: none; }
.ndq-step.is-on { display: block; animation: ndq-in .22s ease both; }
@keyframes ndq-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ndq-step.is-on { animation: none; } .ndq-win, .ndq-back { transition: none; } }

.ndq-q { font-size: 17px; font-weight: 700; line-height: 1.3; margin-bottom: 14px; }
.ndq-sub { font-size: 12.5px; font-weight: 700; color: var(--muted, #6E6E76); margin: 16px 0 8px; }
.ndq-hint { font-size: 12.5px; line-height: 1.5; color: var(--muted, #6E6E76); margin-top: 10px; }

/* плитки-варианты */
.ndq-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ndq-tiles-sm { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.ndq-tile { position: relative; cursor: pointer; }
.ndq-tile input { position: absolute; opacity: 0; width: 0; height: 0; }
.ndq-tile-b {
  display: block; padding: 13px 14px; border: 1px solid #E3E5EA; border-radius: 14px; background: var(--bg-card, #FFFFFF);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ndq-tile-b b { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; }
.ndq-tile-b i { display: block; font-style: normal; font-size: 12px; color: var(--muted, #6E6E76); margin-top: 3px; }
.ndq-tile:hover .ndq-tile-b { border-color: var(--ink, #0E0E12); }
.ndq-tile input:checked + .ndq-tile-b { border-color: var(--accent, #E11D2E); background: rgba(225, 29, 46, .05); box-shadow: inset 0 0 0 1px var(--accent, #E11D2E); }
.ndq-tile input:focus-visible + .ndq-tile-b { outline: 2px solid var(--accent, #E11D2E); outline-offset: 2px; }
.ndq-tile-sm .ndq-tile-b { padding: 10px 12px; }
.ndq-tile-sm .ndq-tile-b b { font-size: 13px; font-weight: 600; }
/* 25.09.2026 (задача 23): «выберите вариант» — js/nd-quiz.js вешает is-bad на блок плиток (как .ndqi-tiles
   во врезанном квизе, css/pages/nd-quiz-inline.css). Раньше правила не было: радио всегда было отмечено заранее. */
.ndq-tiles.is-bad .ndq-tile-b { border-color: var(--accent, #E11D2E); }
.ndq-tiles.is-bad { animation: ndq-shake .3s; }

/* поля */
.ndq-field { position: relative; display: block; margin-top: 10px; }
.ndq-field input, .ndq-field textarea {
  width: 100%; padding: 20px 14px 8px; border: 1px solid #E3E5EA; border-radius: 14px; background: var(--bg-card, #FFFFFF);
  font: 500 15px/1.3 Montserrat, Inter, system-ui, sans-serif; color: var(--ink, #0E0E12); transition: border-color .15s;
}
.ndq-field textarea { padding-top: 22px; resize: vertical; min-height: 84px; }
.ndq-field input:focus, .ndq-field textarea:focus { outline: none; border-color: var(--ink, #0E0E12); }
.ndq-field-l {
  position: absolute; left: 15px; top: 15px; font-size: 14px; color: #8A8A94; pointer-events: none;
  transition: transform .15s, font-size .15s, color .15s; transform-origin: left top;
}
.ndq-field-l i { color: var(--accent, #E11D2E); font-style: normal; }
.ndq-field input:focus + .ndq-field-l,
.ndq-field input:not(:placeholder-shown) + .ndq-field-l,
.ndq-field textarea:focus + .ndq-field-l,
.ndq-field textarea:not(:placeholder-shown) + .ndq-field-l { transform: translateY(-8px) scale(.78); color: var(--muted, #6E6E76); }
.ndq-field input.is-bad, .ndq-field textarea.is-bad { border-color: var(--accent, #E11D2E); animation: ndq-shake .3s; }
@keyframes ndq-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.ndq-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ndq-two .ndq-field { margin-top: 0; }

.ndq-more { margin-top: 14px; }
.ndq-more > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink, #0E0E12); list-style: none; }
.ndq-more > summary::-webkit-details-marker { display: none; }
.ndq-more > summary::before { content: '+ '; color: var(--accent, #E11D2E); font-weight: 800; }
.ndq-more[open] > summary::before { content: '– '; }
.ndq-more > summary span { font-weight: 400; color: #8A8A94; }

.ndq-policy { display: flex; gap: 9px; align-items: flex-start; margin-top: 16px; font-size: 12px; line-height: 1.45; color: var(--muted, #6E6E76); cursor: pointer; }
.ndq-policy input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent, #E11D2E); flex: none; }
.ndq-policy a { color: var(--ink, #0E0E12); }
.ndq-policy input.is-bad { outline: 2px solid var(--accent, #E11D2E); outline-offset: 2px; }

/* навигация */
/* Форме оставлен класс .request-form-wrapper — его требует общий обработчик отправки,
   но вместе с ним прилетают стили карточки со страницы /forma/ (белый фон, паддинг 34/40,
   радиус 24, тень), и внутри окна получалась вторая карточка. Сбрасываем. */
.ndq .ndq-form { background: none; padding: 0; border-radius: 0; box-shadow: none; border: 0; max-width: none; margin: 0; }

.ndq-nav { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.ndq .ndq-back-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 13px 16px; border: 1px solid #E3E5EA; border-radius: 999px;
  background: var(--bg-card, #FFFFFF); font: 600 14px/1 Montserrat, Inter, system-ui, sans-serif; color: var(--ink, #0E0E12); cursor: pointer; transition: border-color .15s;
}
.ndq .ndq-back-btn:hover { border-color: var(--ink, #0E0E12); }
/* .ndq перед классом кнопки намеренно: у сайта есть общий сброс для button (прозрачный фон,
   нулевой паддинг), одиночного класса не хватало — кнопка выходила текстом без плашки. */
.ndq .ndq-next, .ndq .ndq-submit {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 14px 22px; border: 0; border-radius: 999px; background: var(--accent, #E11D2E); color: var(--ink-invert, #FFFFFF);
  font: 700 15px/1 Montserrat, Inter, system-ui, sans-serif; cursor: pointer; transition: background .15s;
}
.ndq .ndq-next:hover, .ndq .ndq-submit:hover { background: var(--accent-2, #B8152B); }
/* 17.09.2026 (Ivan: «на последнем этапе кнопка становится полуквадратной»): у формы квиза
   класс .request-form-wrapper, и общее правило
   `body.nd-hybrid .request-form-wrapper button[type="submit"]` (0,2,2) било .ndq .ndq-submit
   (0,2,0) — радиус падал с 999 до 12 px. Поднимаем специфичность до (0,3,2). */
.ndq .request-form-wrapper button.ndq-submit[type="submit"],
body .ndq .ndq-form button.ndq-submit { border-radius: 999px; }
.ndq .ndq-next[hidden], .ndq .ndq-submit[hidden], .ndq .ndq-back-btn[hidden] { display: none !important; }

.ndq-under { font-size: 12px; line-height: 1.5; color: #8A8A94; margin-top: 12px; text-align: center; }
.ndq-wait { padding: 20px 0; text-align: center; font-weight: 600; }

/* подвал окна */
.ndq-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid #F1F2F5; }
.ndq-foot-t { display: block; font-size: 12px; color: var(--muted, #6E6E76); margin-bottom: 8px; }
.ndq-foot-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ndq-ch {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #E3E5EA; border-radius: 10px;
  font: 600 12.5px/1 Montserrat, Inter, system-ui, sans-serif; color: var(--ink, #0E0E12); text-decoration: none; transition: border-color .15s;
}
.ndq-ch:hover { border-color: var(--ink, #0E0E12); }

/* успех: скрываем шаги и навигацию, оставляем сообщение */
.ndq-form.is-sent .ndq-step,
.ndq-form.is-sent .ndq-nav,
.ndq-form.is-sent .ndq-under { display: none; }

@media (max-width: 700px) {
  /* лист снизу: большим пальцем дотягиваешься до кнопок, окно не прыгает при появлении клавиатуры */
  .ndq { padding: 0; align-items: flex-end; }
  .ndq-win {
    max-width: none; border-radius: 20px 20px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
    transform: translateY(30px);
    max-height: 92vh; max-height: 92dvh;   /* 07.09.2026, аудит п.13 — см. комментарий выше */
  }
  .ndq-title { font-size: 19px; margin-bottom: 12px; }
  .ndq-q { font-size: 16px; }
  .ndq-tiles { grid-template-columns: 1fr; }
  .ndq-tiles-sm { grid-template-columns: 1fr 1fr; }
  .ndq-two { grid-template-columns: 1fr; }
  .ndq-nav { position: sticky; bottom: 0; background: var(--bg-card, #FFFFFF); padding-top: 12px; margin-top: 16px; }
  .ndq .ndq-next, .ndq .ndq-submit { min-height: 52px; }
}

/* ---------- п.28 списка Никиты: «форму подбора на телефоне убрать, вместо неё окно» ----------
   На телефоне единственная встроенная форма подбора на главной — в правой панели блока
   «Как проходит заказ» (шаг 1, .ndh-media[data-media="form"], 433 px высоты). Теперь её роль
   играет всплывающий квиз, поэтому на телефоне форму не показываем: остаются пояснения к шагу
   и кнопка «Начать подбор бесплатно» — она этот квиз и открывает. На компьютере всё как было. */
@media (max-width: 700px) {
  body[class*="new-design"] .ndh-media[data-media="form"] { display: none !important; }
}

/* ---------- поверх окна не должно висеть ничего чужого ----------
   Круглая кнопка связи (#enc-fab-callback) и её пузырь-приветствие (#enc-fab-greet) сидят
   на z-index 999999 — выше окна квиза, и на телефоне кнопка попадала ровно в зону шага
   с телефоном и согласиями. Пока окно открыто, прячем оба. */
html.ndq-lock #enc-fab-callback,
html.ndq-lock #enc-fab-greet,
html.ndq-lock #enc-fab-msgs { display: none !important; }

/* ---------- п.28, вторая половина: встроенная форма подбора в каталоге ----------
   На /korea/ на телефоне блок-помощник с формой занимает около 1 400 px — почти два экрана.
   Его роль теперь у всплывающего квиза: кнопки подбора на той же странице открывают окно.
   На компьютере блок остаётся. */
@media (max-width: 700px) {
  body.new-design-catalog .helper-section { display: none !important; }
}

/* ---------- 07.09.2026, аудит п.13: низкие экраны (375x667, 360x780) ----------
   Ряд быстрых контактов (.ndq-foot: 8 800…, MAX, Telegram, WhatsApp) и дисклеймер лежат
   в разметке ПОСЛЕ кнопки «Далее», а кнопка на телефоне липкая (position: sticky; bottom: 0).
   На экране ниже ~740 px содержимое окна не помещается целиком, и прокрученный до конца
   подвал оказывался ровно под липкой кнопкой — до контактов было не добраться.
   На таких экранах кнопку не липним: окно прокручивается обычным порядком, видно всё.
   Выше 740 px содержимое помещается без прокрутки, и липкая кнопка ничего не перекрывает. */
@media (max-width: 700px) and (max-height: 740px) {
  .ndq-nav { position: static; }
  .ndq-win { max-height: calc(100vh - 8px); max-height: calc(100dvh - 8px); }
}


/* ---- nd-mob-fix.css ---- */
/* 04.09.2026 — доводка мобильной версии по замечаниям Ivan'а (замеры на 375 px).
   Подключается последним, поэтому перебивает прежние правила при равной силе. */

@media (max-width: 700px) {

  /* 1. Меню упиралось в правый край экрана: у верхней строки мобильной шапки не было
        внешнего отступа справа (замер на 375: до края 0 px). */
  body[class*="new-design"] .nd-mhdr-top,
  body.nd-hybrid .nd-mhdr-top { padding-right: 12px; }
  body[class*="new-design"] .nd-mhdr-mid,
  body.nd-hybrid .nd-mhdr-mid { padding-right: 12px; }

  /* 2. «Готовая подборка»: правила однострочной плитки со спрятанным счётчиком сняты
        08.09.2026 вместе с переходом на утверждённый макет B3. Там всё наоборот — число
        стало главным элементом плитки и на телефоне тоже. Мобильная витрина задана
        в css/pages/nd-qpicks-b3.css (файл подключает сам блок). */

  /* 3. Ссылка «Показать все» над лентой на телефоне не нужна: сразу под лентой стоит
        крупная кнопка перехода в каталог, две одинаковые по смыслу ссылки подряд лишние. */
  body.new-design-home #h2FeedAll { display: none; }

  /* 4. Кнопка под лентой должна укладываться в одну строку — длинные подписи вроде
        «Перейти в каталог авто из Китая» переносились на две. */
  body.new-design-home .h2-fresh-all .h2-btn-pri {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; padding-left: 16px; padding-right: 16px;
  }

  /* 5. В открытой панели фильтра на главной было две одинаковые кнопки «Показать N авто»:
        одна в самой панели (.h2-fpanel-foot), вторая — в липкой полосе внизу экрана
        (#ndFpanelBar). На телефоне оставляем липкую: она всегда под рукой. */
  body.new-design-home.nd-filters-shown .h2-fpanel-foot .fshow { display: none; }
  body.new-design-home .h2-fpanel-foot { justify-content: center; }

  /* 6. Карточки «Trade-In / Для дилеров / Кредит»: на телефоне иконка стоит слева и режет
        ширину заголовка — «Работаем с официальными дилерами» налезало на неё. Иконку убираем,
        текст занимает всю карточку. */
  body.new-design-home .sbs-card .sbs-ic { display: none; }
  body.new-design-home .sbs-card { padding-left: 18px; }
  body.new-design-home .sbs-card .sbs-t,
  body.new-design-home .sbs-card .sbs-d,
  body.new-design-home .sbs-card .sbs-eyebrow { padding-left: 0; margin-left: 0; }

  /* 7. Между блоком «Что мы гарантируем» и «Как проходит заказ» пропал зазор — секции
        слиплись, потому что у обеих белый фон и одинаковые внутренние отступы. */
  html body.new-design-home main.content > section.how.ndh,
  html body.new-design-home section.how.ndh { border-top: 1px solid #F1F2F5; padding-top: 34px; }
}

/* ============================================================================
   04.09.2026 — вторая порция замечаний Ivan'а. Первые четыре блока действуют
   на любой ширине (замечания были и про ПК), мобильные — ниже, в медиазапросе.
   ============================================================================ */

/* 8. Значок Drive2 в блоке «Подписаться на нас» выглядел мельче соседних.
      Причина не в размере картинки (26px против 22px у остальных), а в подложке:
      у Telegram, YouTube, ВКонтакте и Авито знак нарисован белым на цветном
      квадрате 46x46 — работает вся плашка. У Drive2 плашка была белой с рамкой,
      и цветного пятна оставалось лишь 30px по центру. Логотип Drive2 сам круглый
      и красный, то есть сам себе плашка: убираем белую подложку и растягиваем
      знак на всю ячейку — площадь цвета сравнивается с соседями. */
body.new-design-home .h2bs-d2 .h2bs-ic {
  background: transparent;
  border: 0;
  padding: 0;
  overflow: hidden;
}
body.new-design-home .h2bs-d2 .h2bs-ic img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
/* на наведении у соседей подложка светлеет, у круглого знака светлеть нечему */
body.new-design-home .h2bs-d2:hover .h2bs-ic { background: transparent !important; }

/* 06.09.2026. Пункты 9, 12, 13, 18 и 25 (городской блок «Вопрос-ответ»: поля вложенных
   обёрток компонента, мобильные кегли, вид карточек, скрытие хвоста, липкая колонка и
   фиксированный кегль заголовка) отсюда убраны. Причина: по просьбе Ivan'а («блок вопрос
   ответ на главной сделай такой же как на стр кореи по дизайну и функционалу») городской
   блок больше не печатает легаси-компонент bitrix:news.list с шаблоном faq — обе главные,
   обычная и с выбранным городом, печатают общий блок includes/nd-faq-block.php с классами
   .ndfq*. Правила по .nd-city-faq .faq__item / .title_h2 / .box-slider цепляться больше
   не за что. Результат тех правок не потерян: заголовок стоит на одной вертикали с
   остальными заголовками страницы (левая колонка блока начинается от поля .shell),
   кегль фиксирован классом .sec-h2 (Montserrat 800, 34px, на ≤860 — 26px) и от ширины
   окна не «плавает», левая колонка липкая (position: sticky, top 96px), хвоста компонента
   («Мы работаем строго по договору…» и кнопка) в новой разметке нет вовсе.
   Стили блока — css/pages/nd-faq-home.css. */

@media (max-width: 700px) {

  /* 10. Значки площадок в отзывах: подпись и число налезали друг на друга.
         Чипы стояли в три колонки по 105px, из которых 60px уходило на поля,
         значок и зазоры — «ВКонтакте» и «Яндекс» в остаток не помещались, а сжаться
         им было некуда (flex-shrink у подписи есть, перенос запрещён), поэтому
         текст выходил за свою рамку прямо на число. Ставим две колонки: подписи
         хватает места целиком. */
  html body.new-design-home .h2b-rv-srcs { grid-template-columns: 1fr 1fr; gap: 8px; }
  /* страховка на случай ещё более длинной подписи: обрезаем многоточием, а число
     не даём сжимать — оно короткое и должно читаться целиком */
  html body.new-design-home .h2b-rv-src > b {
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html body.new-design-home .h2b-rv-src > span { flex: 0 0 auto; }

  /* 11. Карточки связи (MAX, Telegram, WhatsApp, почта) стояли в две колонки
         по 159px. В такую ширину не влезает ни «Написать в Telegram», ни адрес
         бота: заголовок ломался на две строки, а @encarrus_manager_bot и
         info@encarrus.ru рвались посреди слова. Ставим одну колонку — все подписи
         укладываются в строку, рваных слов не остаётся. */
  html body.new-design-home .h2b-ct-row { grid-template-columns: minmax(0, 1fr); }
  html body.new-design-home .h2b-ct-chip > span > b,
  html body.new-design-home .h2b-ct-chip > span > em { overflow-wrap: normal; }
  html body.new-design-home .h2b-ct-chip { padding-top: 11px; padding-bottom: 11px; }

}

/* 14. Блок «Выберите направление» на телефоне (Ivan выбрал третий из трёх показанных
       вариантов: две колонки без описаний). Прежний занимал 862px: обложка во всю высоту
       плитки, описание на 4-6 строк, названия в две-три строки, «Смотреть каталог» тоже
       в две. Плашку «С пробегом» убираем: число под ней говорит то же самое, а на узкой
       колонке она налезала на цифры и обрезалась справа. Короткие названия подставляет
       скрипт блока по атрибуту data-short. */
@media (max-width: 700px) {
  html body[class*="new-design"] .ndcc-grid { gap: 10px; }
  html body[class*="new-design"] .ndcc-cover { aspect-ratio: auto; height: 92px; }
  html body[class*="new-design"] .ndcc-photo { height: 92px; object-fit: cover; }
  html body[class*="new-design"] .ndcc-kind { display: none; }
  html body[class*="new-design"] .ndcc-num b { font-size: 17px; }
  html body[class*="new-design"] .ndcc-num i { font-size: 12px; }
  html body[class*="new-design"] .ndcc-body { padding: 10px 12px 12px; gap: 4px; }
  html body[class*="new-design"] .ndcc-title { font-size: 15px; line-height: 1.2; white-space: nowrap; }
  html body[class*="new-design"] .ndcc-lead { display: none; }
  html body[class*="new-design"] .ndcc-go { font-size: 12.5px; white-space: nowrap; }
}

/* 15. Пилюли направлений (Ivan: «пилюли сделай одинаковые не высокие у всех»).
       В быстром подборе первые две стояли в своей строке высотой 43px, а «Новые из Китая»
       и «В наличии» — ссылками по 32px, каждая в отдельной строке: четыре пилюли трёх разных
       габаритов на 123px высоты. Ставим все четыре в одну сетку 2x2 одинаковой высоты.
       Вложенные контейнеры убираем из потока через display: contents — разметку не трогаем. */
@media (max-width: 700px) {
  /* 08.09.2026 (макет B3): половина этого пункта — про ряд направлений в быстром подборе
     (.qpb-mode) — переехала в css/pages/nd-qpicks-b3.css вместе со всем блоком: сетка 2x2
     там та же, поменялись только цвета (плашка блока больше не чёрная). Здесь остаётся
     ряд вкладок «Как проходит заказ» — он живёт в чужом блоке и не менялся. */
  html body[class*="new-design"] .ndh-tabs .nd-dirtab {
    min-height: 36px; height: 36px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 12.5px; white-space: nowrap; width: auto;
  }
  html body[class*="new-design"] .ndh-tabs .nd-dirtab img { width: 18px; height: 13px; flex: none; }
  html body[class*="new-design"] .ndh-tabs { gap: 8px; }
}

/* 16. Стык «Что мы гарантируем» и «Как проходит заказ» (Ivan: «тут все еще слипается с фоном
       блок»). У секции гарантий белый фон и нулевое поле снизу, у следующей — прозрачный:
       белое полотно обрывалось ровно под последней карточкой, и линии в 1px было мало.
       Даём воздух с обеих сторон и убираем линию — граница читается сменой фона. */
@media (max-width: 700px) {
  html body.new-design-home main.content > section.h2-guar,
  html body.new-design-home section.h2-guar { padding-bottom: 26px; }
  html body.new-design-home main.content > section.how.ndh,
  html body.new-design-home section.how.ndh { border-top: 0; padding-top: 30px; }
}

/* 17. Карточки Trade-In, «Для дилеров» и «Кредит» (Ivan: «тут ты не исправил»). Иконку
       на телефоне скрыли, но карточка осталась сеткой «42px под значок + 221px под текст»,
       поэтому заголовок по-прежнему жался в 221px из 327 и ломался на три строки.
       Убираем колонку значка — текст занимает всю ширину карточки. */
@media (max-width: 700px) {
  html body.new-design-home .sbs-card { grid-template-columns: 1fr; padding: 20px 18px; }
  html body.new-design-home .sbs-card .sbs-ic,
  html body.new-design-home .sbs-card .sbs-eyebrow,
  html body.new-design-home .sbs-card .sbs-t,
  html body.new-design-home .sbs-card .sbs-d,
  html body.new-design-home .sbs-card .sbs-list,
  html body.new-design-home .sbs-card .sbs-cta { grid-column: 1 / -1; }
  html body.new-design-home .sbs-card .sbs-t { font-size: 23px; line-height: 1.15; }
}

/* 19. Флаги в шапке (Никита: «мне сильно нравилось с флагами, сразу было понятно»).
       Утром их скрыли, когда в строку добавился шестой пункт — не помещалось.
       Возвращаем, а место освобождаем короткими подписями у аукциона и мотоциклов:
       по замеру на 1440 длинные подписи занимали 197 и 167 px, короткие — около 115 и 100. */
@media (min-width: 861px) {
  html body .header .main-nav .flag,
  html body .header .main-nav .flag-img { display: inline-flex; align-items: center; }
  html body .header .main-nav a { gap: 7px; padding-left: 8px; padding-right: 8px; }
  html body .header .main-nav .flag-img img { display: block; width: 20px; height: 14px; }
}

/* Подписи пунктов: на широких экранах полные, ниже 1700 px — короткие. Правило продублировано
   здесь намеренно: на гибридных страницах (/sklad/) файл nd-fix-b.css не подключается, и там
   печатались обе формы сразу — меню выглядело иначе, чем на остальных страницах. */
html body .header .main-nav .nav-short,
html body .header .main-nav .nav-cn-short,
html body .header .main-nav .nav-jp-short,
html body .header .main-nav .nav-bike-short { display: none; }

/* 16.09.2026: подпункт шторки («Цены японских аукционов»). Правила .mnav-sub живут в
   nd-navdrop.css, а он подключается только при сгруппированном меню (кука ndnav=1) —
   на боевых страницах подпункт стоял без отступа и читался как раздел верхнего уровня.
   Дублируем минимум: отступ под ширину флага и та же короткая риска слева. */
html body .mnav-nav a.mnav-sub {
  position: relative;
  padding-left: 46px;
  font-size: 15px;
  color: #4a4a4a;
}
html body .mnav-nav a.mnav-sub.active { color: #e11d2e; }
html body .mnav-nav a.mnav-sub::before {
  content: "";
  position: absolute; left: 30px; top: 50%;
  width: 6px; height: 1px; margin-top: -1px;
  background: #d0d0d3;
}

/* 16.09.2026: в мобильной шторке ширина не ограничена — там всегда ПОЛНАЯ подпись.
   Без этого печатались обе формы подряд: пункт аукциона читался как
   «Аукцион AutoHubАукцион AutoHub» (обе подписи у него совпадают по тексту). */
html body #mnavDrawer .nav-short,
html body #mnavDrawer .nav-cn-short,
html body #mnavDrawer .nav-jp-short,
html body #mnavDrawer .nav-bike-short { display: none !important; }
html body #mnavDrawer .nav-long,
html body #mnavDrawer .nav-cn-long,
html body #mnavDrawer .nav-jp-long,
html body #mnavDrawer .nav-bike-long { display: inline !important; }

/* 07.09.2026 (Ivan): «пункт про мотоциклы не влезает». На экранах шире 1700 px все подписи
   были полными, и строка меню переполнялась: на 1920 не хватало 96 px, «Мотоциклы из Кореи»
   обрезались до «Мотоцик». Сокращение кнопки шапки («Бесплатный подбор» -> «Подбор авто»)
   отыграло 64 px, остаток добираем короткой подписью у мотоциклов — она и так показывалась
   на всех ширинах ниже 1700. Остальные пункты на широких экранах остаются полными. */
@media (min-width: 1700px) {
  html body .header .main-nav .nav-bike-long { display: none; }
  html body .header .main-nav .nav-bike-short { display: inline; }
}

@media (min-width: 861px) and (max-width: 1699px) {
  html body .header .main-nav .nav-long,
  html body .header .main-nav .nav-cn-long,
  html body .header .main-nav .nav-jp-long,
  html body .header .main-nav .nav-bike-long { display: none; }
  html body .header .main-nav .nav-short,
  html body .header .main-nav .nav-cn-short,
  html body .header .main-nav .nav-jp-short,
  html body .header .main-nav .nav-bike-short { display: inline; }
}

/* 20. Заголовок первого экрана (Ivan: «на ПК верни как было, урезать нужно было только
       в мобильной»). В разметке он один и полный: «Авто из Кореи под заказ с выгодой
       от 500 000 ₽ за 15–45 дней — привозим с доставкой в <Город>». На телефоне прячем
       «под заказ» и хвост со сроком и городом — их показывает строка под заголовком,
       где на компьютере они, наоборот, скрыты. Копий текста в разметке нет. */
html body.new-design-home .hero-lead .lead-mob { display: none; }

@media (max-width: 700px) {
  html body.new-design-home .hero-h1 .h1-pc { display: none; }
  html body.new-design-home .hero-lead .lead-mob { display: inline; }
}

/* 21. Кнопка «Показать фильтр» на /sklad/ (Ivan: «сделаем кнопку, под которой будет спрятан
       фильтр»). Ряды «Быстро», «Марка», «Цена», «Статус» занимали до первой машины около
       330 px — теперь они под кнопкой того же вида, что на /korea/ и /bikes/. */
html body.nd-hybrid #ndSkTop .nd-sk-fhead { margin: 2px 0 12px; }
html body.nd-hybrid #ndSkTop .ftoggle .ft-chev { transform: rotate(0); }
html body.nd-hybrid #ndSkTop.is-open .ftoggle .ft-chev { transform: rotate(180deg); }
html body.nd-hybrid #ndSkTop .filters-section[hidden] { display: none !important; }

/* 22. Кнопка «Показать фильтр» на /china-new/ (Ivan: «скрой фильтр под кнопку, как на странице
       в наличии»). Кнопка стоит в одной строке с «Найдено N моделей» и «Сбросить», ряды под ней.
       Шеврон вниз в свёрнутом виде, вверх — в раскрытом. */
html body[class*="new-design"] #ndcnFilters .ndcn-nf-fhead .fhead-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
html body[class*="new-design"] #ndcnFilters .ftoggle .ft-chev { transform: rotate(0); transition: transform .15s ease; }
html body[class*="new-design"] #ndcnFilters.is-open .ftoggle .ft-chev { transform: rotate(180deg); }
html body[class*="new-design"] #ndcnFilters .ndcn-nf-body[hidden] { display: none !important; }
html body[class*="new-design"] #ndcnFilters .ndcn-nf-body { margin-top: 14px; }

/* 23. /sklad/: заголовок в .hero-row и подзаголовок p.nd-sk-lede.
       05.09.2026 (A8b): правила ПЕРЕЕХАЛИ в <style> файла /sklad/index.php (под nd_live()).
       Причина: этот файл подключается из footer.php, приходит после первой отрисовки, и лид
       перескакивал с 16px на 13.5px уже на экране — весь список карточек сдвигался
       (CLS 0.149 на 1440). В теле страницы стиль есть до отрисовки — сдвига нет. */

/* 24. Логотип Dongchedi в баннере /china/ на телефоне: знак вчетверо шире своей высоты, при
       высоте бокса 40px занимал 123px и ломал заголовок баннера в четыре строки. Ужимаем бокс. */
@media (max-width: 700px) {
  html body[class*="new-design"] .nd-explain-i--dcd { height: 32px; min-width: 0; padding: 5px 8px; }
}

/* 26. Объединённый SEO-блок в самом низу городской страницы: городской заголовок, лид и два общих
       абзаца теперь идут одним куском после вопросов (см. includes/nd-city-seo.php). Раньше это
       были две несвязанные секции с провалами 94 и 115px между ними. */
html body.new-design-home .nd-city-seo .nd-city-seo__p {
  margin: 12px 0 0;
  max-width: 900px;
}


/* ============================================================================
   27. 07.09.2026 (аудит, п. 15). Цели нажатия в мобильной шапке были заметно меньше
   нормы 44px: город 73x14, телефон 93x16, рейтинг 89x16, избранное 25x23 — по высоте
   это высота самой надписи. Внешний вид не меняем: каждой ссылке добавляем невидимую
   зону нажатия через ::after (высота 44px, немного шире самой надписи). Тёмная строка
   шапки всего 34px, поэтому зона на несколько пикселей заходит на соседнюю белую
   строку — там она проигрывает: белая строка идёт в разметке позже и перекрывает.
   Зазор в тёмной строке подняли с 10 до 12px, чтобы соседние зоны почти не наезжали.
   ============================================================================ */
@media (max-width: 860px) {
  body[class*="new-design"] .nd-mhdr-top,
  body.nd-hybrid .nd-mhdr-top { gap: 12px; }

  body[class*="new-design"] .nd-mhdr .nd-mh-city,
  body[class*="new-design"] .nd-mhdr .nd-mh-fav,
  body[class*="new-design"] .nd-mhdr .nd-mh-tel,
  body[class*="new-design"] .nd-mhdr .nd-mh-rate,
  body.nd-hybrid .nd-mhdr .nd-mh-city,
  body.nd-hybrid .nd-mhdr .nd-mh-fav,
  body.nd-hybrid .nd-mhdr .nd-mh-tel,
  body.nd-hybrid .nd-mhdr .nd-mh-rate { position: relative; }

  body[class*="new-design"] .nd-mhdr .nd-mh-city::after,
  body[class*="new-design"] .nd-mhdr .nd-mh-fav::after,
  body[class*="new-design"] .nd-mhdr .nd-mh-tel::after,
  body[class*="new-design"] .nd-mhdr .nd-mh-rate::after,
  body.nd-hybrid .nd-mhdr .nd-mh-city::after,
  body.nd-hybrid .nd-mhdr .nd-mh-fav::after,
  body.nd-hybrid .nd-mhdr .nd-mh-tel::after,
  body.nd-hybrid .nd-mhdr .nd-mh-rate::after {
    content: ""; position: absolute; left: -6px; right: -6px;
    top: 50%; transform: translateY(-50%); height: 44px;
  }
  /* у сердечка своя ширина всего 25px — растягиваем зону сильнее */
  body[class*="new-design"] .nd-mhdr .nd-mh-fav::after,
  body.nd-hybrid .nd-mhdr .nd-mh-fav::after { left: -9px; right: -9px; }

  /* чипы фильтра стояли в 6px друг от друга — норма от 8px */
  body[class*="new-design"] .chips-row .chips-scroll,
  body.nd-hybrid .chips-row .chips-scroll { gap: 8px; }
}

/* ============================================================================
   07.09.2026 — мобильные доводки по списку Никиты, пункты 1, 5, 21, 22, 23
   (группа 2, главная). Файл подключается из footer.php в самом конце страницы,
   поэтому перебивает nd-fix-*.css при равной силе селекторов.
   ============================================================================ */
@media (max-width: 700px) {

  /* --- П.1. «Что вы ищете?»: мобильная раскладка блока (колонки друг под другом,
         ужатая карточка квиза, сетка подборок) снята 08.09.2026 — блок переверстан
         по утверждённому макету B3 и целиком оформляется одним файлом
         css/pages/nd-qpicks-b3.css, который подключает сам блок. Там же поменялся
         порядок: на телефоне витрина подборок идёт ПЕРЕД квизом. --- */

  /* --- П.5. Сегментный переключатель вкладок. На телефоне четыре вкладки в одну
         строку не влезают и переносятся на две — трек остаётся цельной плашкой.
         ⛔ Боковую прокрутку трека (overflow-x) здесь делать нельзя: overflow
         обрезает абсолютную подпись-намёк под треком, и она просто исчезает
         (проверено 07.09 скриншотом на 390px). --- */
  html body.new-design-home .nd-dirtabs { flex-wrap: wrap; }
  html body.new-design-home .nd-dirtabs .nd-dirtab { flex: 0 0 auto; }
  html body.new-design-home #h2FeedTabs,
  html body.new-design-home #ndHowTabs { margin-bottom: 30px; }
  html body.new-design-home #h2FeedTabs::after,
  html body.new-design-home #ndHowTabs::after {
    left: 2px; margin-top: 6px; font-size: 12px;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* подписи короче — длинные на 375px обрезались бы многоточием */
  html body.new-design-home #h2FeedTabs::after { content: "Нажмите — сменится каталог"; }
  html body.new-design-home #ndHowTabs::after { content: "Нажмите — сменится направление"; }

  /* --- П.22. Ряд кнопок площадок в отзывах не был растянут на всю ширину:
         .h2b-rv-srcs — это элемент flex-строки .sec-head-row, поэтому сетка
         занимала ширину по содержимому (замер 07.09 на 390px: 292px при
         доступных 342px, справа висело 50px пустоты, на 375px — больше). --- */
  html body.new-design-home .h2b-rv-srcs { width: 100%; }

  /* --- П.23. «Проложить маршрут» лежала поверх карты и закрывала штатную подпись
         Яндекса в левом нижнем углу (замер 07.09 на 390px: строка кнопок висела в 28px
         от низа карты, поверх её левого угла). Выносим обе ссылки наружу: строка
         перестаёт быть абсолютной и встаёт двумя отдельными кнопками ПОД картой,
         в один столбик и во всю ширину — так на кнопках помещаются полные подписи
         («Построить маршрут», «Все офисы и схемы проезда»), которые прятались, пока
         кнопки лежали на карте, и палец попадает по ним не глядя. --- */
  html body.new-design-home .h2b-map { overflow: visible; }
  html body.new-design-home .h2b-map iframe { border-radius: 16px; }
  html body.new-design-home .h2b-map-acts {
    position: static; left: auto; right: auto; bottom: auto;
    margin-top: 10px; pointer-events: auto;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
  }
  html body.new-design-home .h2b-map-acts .h2b-map-link {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 46px; padding: 11px 14px; font-size: 14px; white-space: nowrap;
    border: 1px solid var(--line, #ECECF0); border-radius: 12px; box-shadow: none;
  }
  html body.new-design-home .h2b-map-acts .h2b-map-route {
    background: var(--ink, #0E0E12); color: #FFFFFF; border-color: var(--ink, #0E0E12);
  }
  html body.new-design-home .h2b-map-acts .h2b-map-route:hover { background: var(--ink-2, #1E1E24); color: #FFFFFF; }
  /* полные подписи возвращаются: место под картой есть */
  html body.new-design-home .h2b-map-route-x { display: inline; }
  html body.new-design-home .h2b-map-route-w { text-transform: none; }
  html body.new-design-home .h2b-map-link-x { display: inline; }

  /* --- П.4. Секция «Свежие подборки менеджеров» в новом месте, у SEO-текста. --- */
  html body.new-design-home main.content > section.h2-colls-tail { padding-top: 16px; padding-bottom: 0; }
}

/* ============================================================================
   07.09.2026, вечер — возврат конструктора «Ищу … до … с доставкой в …» на прежнее
   место (Ivan: «верни блок ищу как был, а под ним надо сделать квиз и блоки с
   быстрыми подборками»). На телефоне порядок сверху вниз ровно как в разметке:
   конструктор .qpb → квиз .qpq → подборки .qp-pills; колонок нет, всё в один столбик
   (правила п.1 выше по файлу). Ниже — только то, что добавилось вместе с возвратом.
   ============================================================================ */
@media (max-width: 700px) {
  /* 08.09.2026 (макет B3): подпись-намёк и вид пилюль направления на телефоне заданы
     в css/pages/nd-qpicks-b3.css — блок стал светлым, белые полупрозрачные подложки
     из прежней редакции на нём не читались бы вовсе.
     Кусок подписи «, список кузовов» — по-прежнему только на компьютере: с ним намёк
     переносится на две строки (замер на 390px: 306px ширины, две строки по 15px). */
  html body[class*="new-design"] .qpb-mh-more { display: none; }
}

/* ============================================================================
   11.09.2026 — мобильные доводки по списку Ivan'а (скриншоты с телефона).
   Файл подключается из footer.php последним, поэтому перебивает nd-fix-*.css
   и nd-faq-home.css при равной силе селекторов.
   ============================================================================ */
@media (max-width: 700px) {

  /* --- 1. Блок вопросов: MAX / Telegram / WhatsApp стояли тремя полосами во всю
         ширину (nd-faq-home.css:219 разворачивает ряд в столбик с порога 1024px)
         и занимали три экранных строки под заголовком. Ставим их в один ряд
         равными долями: иконка + подпись, кегль 12px. --- */
  html body[class*="new-design"] .ndfq-mes,
  html body.nd-hybrid .ndfq-mes {
    flex-direction: row; flex-wrap: nowrap; gap: 6px;
  }
  html body[class*="new-design"] .ndfq-mes .ndfq-chat,
  html body.nd-hybrid .ndfq-mes .ndfq-chat {
    flex: 1 1 0; width: auto; min-width: 0;
    padding: 9px 4px; gap: 6px;
    font-size: 12px; white-space: nowrap;
  }
  html body[class*="new-design"] .ndfq-mes .ndfq-chat img,
  html body.nd-hybrid .ndfq-mes .ndfq-chat img { width: 16px; height: 16px; }

  /* --- 2. Сегментный переключатель направлений (#ndHowTabs в «Как проходит заказ»
         и #h2FeedTabs в ленте машин). Четыре вкладки в строку не влезают и
         переносились на две — серый трек с радиусом 999px превращался в большую
         неаккуратную плашку вокруг двух рядов чипов. На телефоне трек убираем
         совсем: остаётся сетка 2×2 из самостоятельных кнопок.
         ⛔ Подпись-намёк под треком — это ::after самого трека (nd-fix-i.css:268),
         поэтому у трека остаётся position: relative и margin-bottom под неё. --- */
  html body.new-design-home .nd-dirtabs,
  html body.new-design-home #ndHowTabs,
  html body.new-design-home #h2FeedTabs {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px;
    width: 100%; padding: 0;
    background: none; border: 0; border-radius: 0;
  }
  html body.new-design-home .nd-dirtabs .nd-dirtab,
  html body.new-design-home #ndHowTabs .nd-dirtab,
  html body.new-design-home #h2FeedTabs .nd-dirtab {
    width: 100%; min-height: 40px; justify-content: center;
    padding: 8px 5px; gap: 6px; font-size: 12px; text-align: center;
    /* «Новые авто под заказ» в одну строку не умещается даже кеглем 11.5px
       (замер на 360px: 154px текста при 150px поля) — разрешаем перенос,
       ряд подстраивается по высоте. */
    white-space: normal; line-height: 1.2;
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--line, #ECECF0);
    border-radius: 10px;
    color: var(--ink-3, #3D3D48);
  }
  html body.new-design-home .nd-dirtabs .nd-dirtab.is-on,
  html body.new-design-home #ndHowTabs .nd-dirtab.is-on,
  html body.new-design-home #h2FeedTabs .nd-dirtab.is-on {
    background: var(--ink, #0E0E12); border-color: var(--ink, #0E0E12);
    color: var(--ink-invert, #FFFFFF);
  }

  /* --- 3. Красная плашка подвала «Остались вопросы по выбору авто?». Правка
         01.08.2026 (new-catalog.css:4670) закрыта селектором body[class*="new-design"],
         а страницы вроде /reviews/ идут с классом body.nd-hybrid — на них номер
         телефона рвался на две строки («8 800 505-18-» / «12»), а кнопка
         «Заказать звонок» съезжала под него. Повторяем тот же набор для nd-hybrid
         и раскладываем правую часть в столбик на всю ширину. --- */
  html body.nd-hybrid .ft-cta-in { gap: 16px; }
  html body.nd-hybrid .ft-cta-phone { font-size: 19px; white-space: nowrap; }
  html body[class*="new-design"] .ft-cta-right,
  html body.nd-hybrid .ft-cta-right {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 10px; width: 100%;
  }
  html body[class*="new-design"] .ft-cta-btn,
  html body.nd-hybrid .ft-cta-btn {
    justify-content: center; text-align: center;
    padding: 12px 16px; font-size: 13.5px;
    color: var(--accent, #E11D2E); background: #fff;
    font-weight: 700; white-space: nowrap;
  }

  /* --- 4. Белая полоса под подвалом. `body { padding-bottom: 80px }`
         (new-catalog.css:3089, порог 720px) — запас под плавающую кнопку подбора,
         но красится он фоном страницы (#F7F7F9) и под чёрным подвалом читался
         светлой полосой. Запас переносим внутрь самого подвала: высота та же,
         цвет — подвальный. Страницам с открытой панелью фильтров
         (body.nd-filters-shown, new-catalog.css:1354) запас оставляем как был. --- */
  html body[class*="new-design"]:not(.nd-filters-shown),
  html body.nd-hybrid:not(.nd-filters-shown) { padding-bottom: 0; }
  html body[class*="new-design"] footer.footer,
  html body.nd-hybrid footer.footer { padding-bottom: 80px; }
}


/* ---- nd-fix-fonts.css ---- */
/* ============================================================
   07.09.2026 — АНТИКВА В ДЕКОРАТИВНЫХ ЦИФРАХ УБРАНА (пп. 12 и 18 списка Никиты).

   Решение Ivan'а от 07.09: серифный шрифт (Instrument Serif) в декоративных цифрах
   убрать ВЕЗДЕ. Это отменяет прежнюю оговорку от 31.08 в new-catalog.css:7270
   («Декоративные цифры серифом (.st-num, .adv-n, .faq-num, .pdk-compare .v) —
   не заголовки, остаются как были»): тогда антикву сняли только с заголовков,
   а цифры оставили — теперь снимаем и с них.

   Что попадает под правило:
     .st-num          — «01 / 02 / 03» в блоке шагов; на /calculator/ это
                        «Три платежа на границе» (п. 12), тот же класс работает
                        в блоке «Как это работает» каталога;
     .adv-n           — «01…11» в плитках «Почему Корея» на /korea/;
     .faq-num         — номер вопроса в FAQ (сейчас почти везде уже перебит
                        гротеском, правим базовое объявление, чтобы сериф
                        не вернулся на новой странице);
     .pdc-score-val   — оценка «4.0/5» в кольце скоринга карточки авто (п. 18);
     .pd-ins-n        — цифры блока страховой истории карточки авто (п. 18);
     .pdk-compare .v  — крупная цифра выгоды в блоке расчёта карточки авто.

   Чего правило НЕ касается (намеренно):
   ⛔ Моноширинные технические подписи карточки авто ('JetBrains Mono' —
      .pd-tab .n, .pd-spec .sp-sub, .pdc-score-val .m, .pds-* и т.д.). Заведены
      24.08 ради «технического» вида, Ivan про них не просил. Подпись «ENCAR+»
      под оценкой ниже переобъявлена моноширинной явно, чтобы её не задело
      наследование от контейнера .pdc-score-val.
   ⛔ Заголовки. H2 набраны по канону (см. блок 31.08 в new-catalog.css) и живут
      своими правилами; здесь ни одного селектора заголовка нет.
   ⛔ Китайские лендинги /china-new/* (34 страницы). Они стоят на своей
      переменной --ndcb-serif (css/pages/nd-china-new-b.css) — и на ней же
      набран курсивный акцент H1 («2026»). Правило написано строго по классам
      декоративных цифр, ни один из которых на этих лендингах не встречается
      (проверено на /china-new/geely-monjaro/), поэтому антиква там остаётся.

   Почему подключается из footer.php, а не из header.php: файлы nd-fix-*.css
   и постраничные new-*.css печатаются в <head>, и оттуда наш файл проиграл бы
   им каскад при равной силе селекторов (грабля 04.09). Из футера он идёт
   последним в документе и выигрывает без !important.

   Кегли и размеры НЕ трогаем — только гарнитура, начертание и вид цифр:
   у .st-num размер переопределён в мобильном медиазапросе (new-catalog.css),
   и правило с !important здесь его бы сломало.
   ============================================================ */

/* Начертание: 800 вместо серифных 400 — иначе крупная цифра гротеском
   выглядит бледнее подписи под ней (подписи .st-title / .pd-ins-l — 700).
   Тот же набор (800 / -.02em / tabular-nums) уже используется для крупных
   цифр гротеском в блоке «Как это работает» главной — nd-how-c.css .hzc-fact b. */
.st-num,
.adv-n,
.pd-ins-n,
.pdk-compare .v,
.pdc-score-val,
.pdc-score-val .v {
  font-family: 'Montserrat', 'Montserrat Fallback', system-ui, sans-serif;
  font-style: normal;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* Подпись «ENCAR+» под оценкой — моноширинная, как была (см. ⛔ выше).
   Переобъявляем явно: она лежит внутри .pdc-score-val и иначе унаследовала бы
   гротеск от правила выше. */
.pdc-score-val .m {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 400;
  letter-spacing: .12em;
  font-variant-numeric: normal;
}

/* «/5» рядом с оценкой — приглушённый хвост, ему тяжёлое начертание не нужно. */
.pdc-score-val .v span { font-weight: 600; }

/* Знак «−» / «₽» рядом с цифрой выгоды — оставляем полегче основной цифры. */
.pdk-compare .v .sym { font-weight: 600; }

/* Номер вопроса в FAQ — только гарнитура, без !important: кегль, цвет и
   моноширинный вариант карточки авто (body.new-design-product .faq-right .faq-num)
   заданы более сильными селекторами и должны продолжать выигрывать. */
.faq-num {
  font-family: 'Montserrat', 'Montserrat Fallback', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}


/* ---- nd-fix-hdr991.css ---- */
/* ============================================================================
   nd-fix-hdr991.css — окно ширин 861–991 px: возвращаем шапку нового дизайна.
   07.09.2026, приёмка (находка: «в полосе 861–991 px нет ни одной кликабельной
   ссылки „Контакты" в шапке и вообще нет работающего меню»).

   ЧТО БЫЛО СЛОМАНО
   Легаси-правило шаблона (template_styles.css, @media (max-width: 991px)) превращает
   любой .header в невидимую мобильную шторку:
       .header { position:absolute; height:100dvh; scale:.5; opacity:0;
                 pointer-events:none; overflow:auto; border:.2rem solid #E11D2E }
   Новая шапка нового дизайна тоже носит класс .header, поэтому под правило попадает и
   она. Новая МОБИЛЬНАЯ шапка (.nd-mhdr) включается только до 860 px. В зазоре 861–991 px
   не видно ни той, ни другой: на странице оставалась только старая битриксовая полоса
   .mobile-menu-fixed (она в этой полосе как раз display:block), а .wrapper держал
   зарезервированные под неё 9.2rem ≈ 100 px пустоты.
   Замер до правки (свой headless Chrome, /korea/ при 900 px): видимых шапок — одна,
   и та легаси; header.header — opacity 0, scale .5, pointer-events none, высота 900 px;
   h1 начинался на y≈1104 px вместо 182 px, как на 992 px.

   ЧТО ДЕЛАЕМ
   Ровно то же, что 07.09 уже сделали для КАРТОЧКИ АВТО в new-product.css (там правка
   помечена «п.1 (блокер)»): в полосе 861–991 px возвращаем обычную шапку нового дизайна —
   ту же самую, что видна на 992 и 1024 px, — и убираем легаси-полосу с зарезервированным
   под неё отступом. Здесь то же решение распространено на ВСЕ страницы нового дизайна:
   главную и городские лендинги (.new-design-home), каталоги Кореи и Китая и «Избранное»
   (.new-design-catalog), карточку авто (.new-design-product), и на гибридные страницы —
   /sklad/, /faq/*, /calculator*, статьи блога, /collections/, /auction/, /bikes/ и т.д.
   (.nd-hybrid).

   ⛔ 07.09.2026, вторая приёмка: `scale: 1` заменён на `scale: none` — см. комментарий
      у самой строки. Единица не «нейтральна»: она создавала контекст наложения, из-за
      которого список кнопки «…» на карточке авто рисовался под содержимым.

   ⛔ position здесь НЕ трогаем. Вопреки легаси-правилу шапка нового дизайна и в этой полосе
      уже вычисляется как position: sticky (правило нового дизайна выигрывает каскад), то
      есть ровно как на 992 px. Написать static — значит потерять прилипание, которое на
      992 px есть. На карточке авто своё static из new-product.css: оно идёт первым и здесь
      не переопределяется намеренно, чтобы не менять уже принятое поведение карточки.

   ⛔ Полосу ширин трогаем только 861–991. На 992 px и выше, как и на телефоне (≤860 px),
      ни одно правило отсюда не действует.

   Класс .nd-mhdr-live оставлен как предохранитель (его ставит js/new-product.js): если
   мобильную шапку когда-нибудь покажут и в этой полосе, правило само отступит и двух
   шапок разом не будет.

   Связанное: js/nd-navmore.js — там нижняя граница кнопки «…» опущена с 1000 до 861 px,
   иначе в этой полосе строка меню обрезалась бы по overflow:hidden без всякого признака,
   что часть разделов спрятана (и вместе с ними — «Контакты», «Избранное» и выбор города,
   которые кнопка «…» подбирает из скрытой тёмной полосы).

   Файл подключается из footer.php под nd_live() — самым последним, после nd-fix-*.css и
   nd-mob-fix.css: при равной силе селекторов должен выигрывать он.
   ============================================================================ */

@media (min-width: 861px) and (max-width: 991px) {

  /* 1. Возвращаем шапку нового дизайна: снимаем всё, чем легаси-правило превращало её
        в невидимую шторку. Значения — те, что вычисляются на 992 px (снято замером). */
  html body[class*="new-design"]:not(.nd-mhdr-live) .header,
  html body.nd-hybrid:not(.nd-mhdr-live) .header {
    height: auto !important;
    left: auto !important;
    /* ⛔ Именно `none`, а не `1`. Легаси пишет `scale: .5`, и отменять его надо начальным
       значением: любое ЧИСЛО в `scale` (в том числе единица) делает элемент containing
       block'ом для абсолютных потомков И отдельным контекстом наложения. Контекст этот
       с z-index:auto, то есть нулевого уровня, а шапка в разметке идёт ПЕРЕД содержимым —
       поэтому 07.09 выпадающий список кнопки «…» (z-index:61) на карточке авто уходил
       ПОД фотографию, крошки и h1, и «Контакты» последней строкой не нажимались
       (замер elementFromPoint по центрам пунктов: IMG, H1.pd-h1, ASIDE.pd-order).
       На страницах, где шапка sticky, разницы нет — она и так контекст наложения
       с z-index:50; разница видна только там, где шапку выводят из sticky. */
    scale: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    border: 0 !important;
  }

  /* 2. Старая битриксовая полоса (город + телефон + бургер + рейтинг Яндекса) в этой
        полосе ширин больше не нужна: иначе шапки будет две сразу — новая и легаси.
        На гибридных страницах её и так гасит инлайновое правило из header.php
        (@media (min-width: 861px)), здесь дублируем для страниц нового дизайна. */
  html body[class*="new-design"]:not(.nd-mhdr-live) .mobile-menu-fixed,
  html body.nd-hybrid:not(.nd-mhdr-live) .mobile-menu-fixed {
    display: none !important;
  }

  /* 3. Отступ под легаси-полосу (.wrapper { padding-top: 9.2rem }) без неё оставлял
        пустую белую ленту над содержимым. */
  html body[class*="new-design"]:not(.nd-mhdr-live) .wrapper,
  html body.nd-hybrid:not(.nd-mhdr-live) .wrapper {
    padding-top: 0 !important;
  }
}


/* ---- nd-rail.css ---- */
/* ============================================================================
   css/pages/nd-rail.css — аккуратная прокрутка горизонтальных лент нового дизайна.

   07.09.2026 (Ivan, со скриншотом блока «Видео-отзывы наших клиентов»:
   «у видео отзывов прокрутка не красивая»).

   БЫЛО: лента .h2b-vrev-rail (главная и городские лендинги /avto-iz-korei-*)
   прокручивалась системной полосой браузера. На Маке с мышью и на Windows такая
   полоса показывается постоянно — под карточками во всю ширину секции лежала
   серая черта. Единственное, что её сдерживало, — `scrollbar-width: thin`
   (css/pages/nd-split-home.css:643), то есть полоса просто становилась уже.

   СТАЛО: системной полосы нет совсем, вместо неё —
     • на компьютере: круглые стрелки влево/вправо поверх ленты (появляются при
       наведении и при переходе табом, у краёв ленты пропадают) и тонкая
       скруглённая полоска-индикатор под лентой в красном цвете дизайна;
       за полоску можно тянуть мышью;
     • на телефоне: ни стрелок, ни полоски — только свайп; то, что лента
       продолжается, видно по краю следующей карточки (на 390px это 106px
       следующей карточки, на 414px — 116px).

   Обвязку (.nd-rail / .nd-rail-vp / стрелки / индикатор) строит js/nd-rail.js
   вокруг самой ленты — разметка блоков не тронута. Если скрипт не выполнился,
   лента листается как прежде: колесом с Shift, трекпадом, свайпом и табом по
   карточкам (они ссылки, браузер сам подкручивает ленту к карточке в фокусе).

   ⛔ ПРО ВЕС СЕЛЕКТОРОВ. Все правила ниже начинаются с `html body[class]` — это
   вес (0,2,2), и он нужен по двум причинам, обе проверены живьём на стенде:
     • `body.new-design-home .h2b-vrev-rail` (0,2,1) из nd-split-home.css:643
       ставит `scrollbar-width: thin` — короткое `html body .h2b-vrev-rail`
       (0,1,2) ему проигрывает (сначала сравниваются классы: 1 против 2), и
       системная полоса оставалась на месте;
     • `body[class*="new-design"] button { border: none; background: none; }`
       (0,2,1) из new-catalog.css съедал у стрелок белый круг, рамку и тень —
       на снимке от кнопки оставалась одна голая «галочка».

   Список лент — в SELECTORS в js/nd-rail.js; здесь тот же список повторён в
   правиле, убирающем системную полосу.
   ============================================================================ */

/* --- 1. Системная полоса прокрутки --------------------------------------- */
html body[class] .h2b-vrev-rail {
  scrollbar-width: none;      /* Firefox и Chrome 121+ */
  -ms-overflow-style: none;   /* старый Edge */
}
html body[class] .h2b-vrev-rail::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* --- 2. Обвязка ленты ----------------------------------------------------- */
html body[class] .nd-rail { position: relative; }

/* .nd-rail-vp обнимает ровно саму ленту: стрелки центрируются по карточкам,
   а не по «лента + индикатор». --nd-rail-mid ставит скрипт по первой карточке. */
html body[class] .nd-rail-vp { position: relative; --nd-rail-mid: 50%; }

/* --- 3. Стрелки ----------------------------------------------------------- */
html body[class] .nd-rail-nav {
  position: absolute;
  top: var(--nd-rail-mid, 50%);
  transform: translateY(-50%);
  z-index: 4;
  width: 44px; height: 44px; padding: 0; margin: 0;
  display: grid; place-items: center;
  /* белый круг с тонкой рамкой — канон карточек нового дизайна.
     Тень НЕ ставим: 21.08.2026 по прямой просьбе Ivan'а («тень же есть еще,
     проверяй все заново чтобы было без теней») содержимое страницы обесшумлено
     правилом `body[class*="new-design"] main.content :where(… button …)
     { box-shadow: none !important }` (new-catalog.css:5551). Кнопку от фото
     отделяет рамка. */
  border: 1px solid rgba(14, 14, 18, .16);
  border-radius: 50%;
  background: #FFF;
  color: var(--ink, #0E0E12);
  cursor: pointer;
  /* ⛔ Прячем ТОЛЬКО прозрачностью, без visibility: hidden. Скрытая по
     visibility кнопка выпадает из порядка обхода табом — проверено живьём:
     `button.focus()` не срабатывал, и обещание «стрелка появляется, когда до
     неё дошли клавиатурой» не выполнялось. С opacity: 0 кнопка остаётся
     фокусируемой, а нажать её мимо наведения нельзя: как только курсор
     заходит на ленту, .nd-rail:hover уже показывает обе стрелки. */
  opacity: 0;
  transition: opacity .18s ease, background-color .16s ease,
              border-color .16s ease, color .16s ease;
}
html body[class] .nd-rail-nav svg { display: block; width: 18px; height: 18px; }
html body[class] .nd-rail-prev { left: 10px; }
html body[class] .nd-rail-next { right: 10px; }

/* показываем по наведению на ленту и когда до стрелки дошли клавиатурой */
html body[class] .nd-rail:hover .nd-rail-nav,
html body[class] .nd-rail:focus-within .nd-rail-nav { opacity: 1; }

html body[class] .nd-rail-nav:hover {
  background: var(--accent, #E11D2E);
  border-color: var(--accent, #E11D2E);
  color: #FFF;
}
html body[class] .nd-rail-nav:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent, #E11D2E);
  outline-offset: 2px;
}
/* У края ленты стрелка не «серая и мёртвая», а просто исчезает.
   ⛔ Селектор длиннее, чем кажется нужным: правило показа выше — это
   `… .nd-rail:hover .nd-rail-nav` (0,4,2), и короткое `… .nd-rail-nav[disabled]`
   (0,3,2) ему проигрывает. Проверено живьём: на первой карточке при наведении
   вылезала стрелка «назад», которая никуда не ведёт. */
html body[class] .nd-rail .nd-rail-nav[disabled],
html body[class] .nd-rail:hover .nd-rail-nav[disabled],
html body[class] .nd-rail:focus-within .nd-rail-nav[disabled] {
  opacity: 0; pointer-events: none;
}

/* --- 4. Полоска-индикатор ------------------------------------------------- */
html body[class] .nd-rail-bar {
  position: relative;
  width: min(340px, 100%);
  height: 4px;
  margin: 2px auto 0;
  border-radius: 999px;
  background: var(--line, #ECECF0);
  cursor: pointer;
  touch-action: none;   /* чтобы перетаскивание не уходило в прокрутку страницы */
}
html body[class] .nd-rail-bar-thumb {
  position: absolute; top: 0; left: 0;
  height: 100%;
  min-width: 26px;
  border-radius: 999px;
  background: var(--accent, #E11D2E);
  transform: translateX(0);
  transition: transform .12s linear;
  will-change: transform;
}
html body[class] .nd-rail.is-dragging .nd-rail-bar-thumb { transition: none; }

/* лента целиком помещается на экран — ни стрелок, ни полоски */
html body[class] .nd-rail.is-static .nd-rail-nav,
html body[class] .nd-rail.is-static .nd-rail-bar { display: none; }

/* --- 5. Телефон и сенсорные экраны: только свайп --------------------------- */
@media (max-width: 860px) {
  html body[class] .nd-rail-nav,
  html body[class] .nd-rail-bar { display: none; }
}
@media (hover: none) and (pointer: coarse) {
  html body[class] .nd-rail-nav,
  html body[class] .nd-rail-bar { display: none; }
}

/* --- 6. «Меньше движения» -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html body[class] .nd-rail-nav { transition: none; }
  html body[class] .nd-rail-bar-thumb { transition: none; }
}