/* ============================================================================
   nd-navdrop.css — компактные выпадашки пунктов шапки («Авто из Кореи», «Авто из Китая»)
   15.09.2026 (Ivan: «верхнее меню не умещается, а туда ещё Япония — сократи пункты»).

   Шесть плоских пунктов сжаты до четырёх с группировкой по странам:
     Авто из Кореи ▾ (весь каталог · новые · AutoHub · мотоциклы) · Новые авто ▾ · Авто из Китая ▾ · В наличии

   ⛔ Панель — ПРЯМОЙ ребёнок <header class="header">, внутрь пункта класть нельзя:
      у .main-nav стоит overflow:hidden (new-tokens.css:108) — абсолютная панель внутри
      строки не видна вообще. Та же причина, по которой так сделана панель моделей (.cnm).
   ⛔ Стрелка (.ndg-caret) нарисована БЕЗ прироста ширины пункта — абсолютом справа от
      подписи, строка меню и так переполнена. Приём взят у .cnm-caret (nd-cnmenu.css).
   Позиционирование по горизонтали ставит js/nd-navdrop.js — панель прижимается к своему
   пункту, а не к краю шапки.
   ========================================================================== */

.ndg-nav { position: relative; display: inline-flex; }

/* стрелка у пункта с подменю */
/* 15.09.2026 (Ivan, скриншот: «стрелка прилипает к чёрной обводке к краю, надо больше
   пространства — у нас сейчас есть место»). У активного пункта фон тёмной плашкой
   (.main-nav a.active { background: var(--ink) }, new-catalog.css:253), и стрелка на
   прежних 2px упиралась в её скруглённый край. После сокращения меню место в строке
   освободилось, поэтому правый отступ увеличен с 15 до 30 px, стрелка отодвинута до 13 px. */
.ndg-nav > a { position: relative; padding-right: 30px !important; }
.ndg-caret {
  position: absolute; right: 13px; top: 50%; width: 8px; height: 8px;
  margin-top: -5px; pointer-events: none;
  border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
  transform: rotate(45deg); opacity: .45;
  transition: opacity .15s ease, transform .15s ease;
}
.ndg-nav:hover > a .ndg-caret,
.ndg-nav.ndg-on > a .ndg-caret { opacity: .95; }
.ndg-nav.ndg-on > a .ndg-caret { transform: rotate(225deg); margin-top: -2px; }

/* сама панель */
.ndg-pop {
  position: absolute; z-index: 60; top: 100%; left: 0;
  min-width: 264px; padding: 8px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 18px 44px rgba(17, 17, 17, .17), 0 2px 8px rgba(17, 17, 17, .07);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.ndg-pop.ndg-open { opacity: 1; visibility: visible; transform: translateY(0); }

.ndg-pop a {
  display: block; padding: 10px 12px; border-radius: 9px;
  color: #111; text-decoration: none; line-height: 1.25;
  font-size: 15px; font-weight: 500; white-space: nowrap;
}
.ndg-pop a:hover,
.ndg-pop a:focus-visible { background: #f4f4f6; color: #111; }
.ndg-pop a.active { color: #e11d2e; }
.ndg-pop .ndg-sub {
  display: block; margin-top: 2px;
  font-size: 12.5px; font-weight: 400; color: #8a8a8a;
}
.ndg-pop a:hover .ndg-sub { color: #6f6f6f; }
.ndg-pop .ndg-sep { height: 1px; margin: 6px 10px; background: #efeff1; }

/* ⛔ ниже 1100 px строка меню прячется целиком (работает мобильная шторка) —
   панель не должна всплыть поверх страницы, если курсор попал на пункт до скрытия */
@media (max-width: 1100px) { .ndg-pop { display: none; } }

/* ============================================================================
   Мобильная шторка: вложенные подпункты Кореи и Китая.
   Выпадашек на телефоне нет — подразделы стоят строками с отступом, всегда на виду.
   Отступ равен ширине флага в строке верхнего уровня (20px) плюс её зазор, чтобы
   подписи выстроились по одной вертикали с подписями родителей.
   ========================================================================== */
.mnav-nav a.mnav-sub {
  padding-left: 46px;
  font-size: 15px;
  color: #4a4a4a;
}
.mnav-nav a.mnav-sub.active { color: #e11d2e; }
.mnav-nav a.mnav-sub::before {
  content: "";
  position: absolute; left: 30px; top: 50%;
  width: 6px; height: 1px; margin-top: -1px;
  background: #d0d0d3;
}
.mnav-nav a.mnav-sub { position: relative; }

/* ============================================================================
   16.09.2026 (Ivan, приёмка сгруппированного меню): логотип крупнее, строка меню
   отодвинута от него вправо. Правки живут в этом файле намеренно — он подключается
   только при ndnav=1, поэтому обычные посетители видят прежнюю шапку.
   Логотип 108x61 -> 117x66 (+8%); width/height заданы инлайном в new-header-catalog.php
   и !important-правилом new-catalog.css:310, поэтому здесь тоже !important.
   Сдвиг меню — padding-left у .main-nav: в сгруппированном виде пункты занимают ~700 px
   из 1001, запас есть. ⛔ Ниже 1366 запас тает — там сдвиг уменьшен.
   ========================================================================== */
/* Логотип: в файле logo-new.svg пропорции 246x72, поэтому бокс 108x61 вписывал картинку
   как 117x34 и сверху-снизу оставалось по 16 px пустоты — отсюда ощущение «мелкого» лого.
   Задаём размер ПО пропорции (ширина / 3.417 = высота), тогда логотип занимает бокс целиком.
   Ниже 1440 логотип уменьшается ступенями: он растёт за счёт колонки меню, и на 1366 пункты
   наезжали на телефон, а на 1280 «В наличии» уезжало в кнопку «…». */
.header .logo-img { width: 165px !important; height: 48px !important; }
.header .main-nav { padding-left: 100px; }
@media (max-width: 1440px) {
  .header .logo-img { width: 150px !important; height: 44px !important; }
  .header .main-nav { padding-left: 50px; }
}
@media (max-width: 1366px) {
  .header .logo-img { width: 140px !important; height: 41px !important; }
  .header .main-nav { padding-left: 36px; }
}
@media (max-width: 1280px) {
  .header .logo-img { width: 130px !important; height: 38px !important; }
  .header .main-nav { padding-left: 10px; }
}
@media (max-width: 1099px) { .header .main-nav { padding-left: 0; } }

/* ============================================================================
   16.09.2026 (Ivan): пункт «Новые авто» -> «Новые авто под заказ».
   Подпись длиннее на ~71 px, поэтому сдвиг меню на широких уменьшен со 100 до 40 px,
   а ниже 1367 включается короткая «Новые авто» — там строке уже не хватает.
   ⛔ Селекторы с лишним `a` — чтобы перебить брейкпоинт 1499 px из nd-fix-b.css,
   не трогая сам бандл (он общий с обычной шапкой).
   ========================================================================== */
@media (min-width: 1367px) {
  html body .header .main-nav a .nav-cn-long { display: inline; }
  html body .header .main-nav a .nav-cn-short { display: none; }
  .header .main-nav { padding-left: 40px; }
}
@media (min-width: 1367px) and (max-width: 1440px) { .header .main-nav { padding-left: 20px; } }
@media (max-width: 1366px) {
  html body .header .main-nav a .nav-cn-long { display: none; }
  html body .header .main-nav a .nav-cn-short { display: inline; }
}
