@charset "UTF-8";
/* ============================================================
   VS-CAR Desktop Header 2026 — v1.1.0 (2026-10-01)
   Двухстрочная DNS-шапка:
   строка 1: город | Контакты, Покупателю | телефон справа
   строка 2: логотип | «Каталог» | длинный поиск | сравнить,
             закладки, корзина, войти
   Дизайн-система: Mobile Header 2026 (#cc2229, #1d1d1f/#6e6e73,
   радиус 12, стекло), Megamenu Theme (#0a3d91, #f4f5f7, панели
   0 12px 32px), Filter UI (#e5e7eb, радиус 10), карточки (r12).
   Раскладка: grid + display:contents на .navbar-header и
   .navbar-top-collapse — дети встают в ячейки сетки без
   перестановки PHP-разметки. Всё scoped на #top /
   .menu-header-box; мобильная шапка (≤991.98) не затрагивается.
   ============================================================ */

body {
  --vsd-primary: #cc2229;                  /* бренд-красный (vhc) */
  --vsd-primary-dark: #b51e24;
  --vsd-accent: #0a3d91;                   /* btn-primary магазина / кнопка «Каталог» */
  --vsd-accent-dark: #082f70;
  --vsd-accent-hover: #08357f;
  --vsd-neutral: #f4f5f7;                  /* вторичная подложка (vsm) */
  --vsd-neutral-hover: #e9eaee;
  --vsd-fg: #1d1d1f;                       /* основной текст (vhc) */
  --vsd-fg-soft: #374151;
  --vsd-muted: #6e6e73;                    /* вторичный текст (vhc) */
  --vsd-link: #4e4e4e;                     /* DNS-текст ссылок (vsm) */
  --vsd-line: #e5e7eb;                     /* нейтральная рамка (fvu) */
  --vsd-line-soft: rgba(0, 0, 0, 0.08);
  --vsd-radius: 12px;                      /* крупные панели/кнопки (vhc/vsm) */
  --vsd-radius-sm: 10px;                   /* строки-таргеты (vsm) */
  --vsd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --vsd-dur: 180ms;
  --vsd-shadow-panel: 0 12px 32px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
}

/* ============================================================
   1. Сетка двух строк (десктоп ≥ 992px)
   ============================================================ */
@media (min-width: 992px) {

  body > header {
    padding-bottom: 0;                     /* меню-ряд встаёт вплотную к полосе */
  }

  #top.navbar-default {
    background: #ffffff;                   /* было #f9fafb (stylesheet.custom) */
    border-bottom: 0;                      /* без линии: строка 2 сама стыкуется к меню-ряду */
    box-shadow: none;
    z-index: 1031;                         /* над панелями меню-ряда ниже */
  }

  #top .container {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-rows: 40px 78px;
    grid-template-areas:
      "geo   info  info   phone"
      "logo  cat   search actions";
    align-items: center;
    column-gap: 8px;
    padding-left: 15px !important;          /* тема срезает (.navbar-full .container{padding-left:0}) — без него полоса шире колонки контента на 15px слева */
  }
  /* ширину не трогаем: BS3-контейнер (1170/970) сам держит шапку
     в границах основной колонки контента, как у остальной страницы */

  /* промежуточные обёртки не рисуем — их дети = ячейки сетки */
  #top .navbar-header,
  #top .navbar-top-collapse {
    display: contents !important;
  }
  #top > .container > .hidden-xs:empty {
    display: none;                         /* пустой разделитель темы */
  }

  /* пустые иконки-заглушки темы (class fa--) не занимают место */
  #top i.fa-- {
    display: none !important;
  }

  /* у li навигации бывает посторонний margin-bottom (виден в DevTools
     как .nav>li{margin-bottom:10px}) — он поднимает пункты на 5px
     выше центра строки; обнуляем явно в любом окружении */
  #top .navbar-nav > li {
    margin: 0 !important;
  }

  /* тема красит синюю таб-полоску над открытыми/наведёнными пунктами
     (bootstrap-theme-colors: .open>a { border-top: 2px solid #0a3d91 }) —
     в DNS-шапке полосок нет, гасим во всех состояниях */
  #top .navbar-nav > li > a,
  #top .navbar-nav > .open > a,
  #top .navbar-nav > .open > a:hover,
  #top .navbar-nav > .open > a:focus {
    border-top: 0 !important;
  }

  /* ============================================================
     1.1. Строка 1 — город, инфо-ссылки, телефон
     ============================================================ */

  #top #geopoint {
    grid-area: geo;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
  }
  #top #geopoint .list-unstyled {
    margin: 0;
  }
  #top .vscar-ya-geopoint-badge {          /* бейджа Я.Карт в новой полосе нет */
    display: none !important;
  }
  #top .prmn-cmngr__title {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    color: var(--vsd-muted);
  }
  #top .prmn-cmngr__title-text:empty {
    display: none;
  }
  #top .prmn-cmngr__city {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 40px;
    padding: 0 8px;
    border-radius: var(--vsd-radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--vsd-fg);
    text-decoration: none;
    transition: background var(--vsd-dur) var(--vsd-ease),
                color var(--vsd-dur) var(--vsd-ease);
  }
  #top .prmn-cmngr__city .fa,
  #top .prmn-cmngr__city .glyphicon {
    color: var(--vsd-primary);
  }
  #top .prmn-cmngr__city:hover,
  #top .prmn-cmngr__city:focus {
    background: var(--vsd-neutral);
    color: var(--vsd-accent-dark);
    text-decoration: none;
  }

  /* ---- Подсказка «Ваш регион — …?» (prmn-cmngr__confirm): у прогромана
     absolute top:-18px от статичного родителя — в новой сетке уезжает
     за страницу. Переоформляем в поповер под селектором города ---- */
  #top .prmn-cmngr__content {
    position: relative;                     /* якорь для поповера */
  }
  #top .prmn-cmngr__confirm {
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    min-width: 240px;
    width: max-content;
    max-width: 320px;
    padding: 12px 14px;
    background: #ffffff;
    border: 0;
    border-radius: var(--vsd-radius);
    box-shadow: var(--vsd-shadow-panel);
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--vsd-fg);
    white-space: normal;
    z-index: 2;
    animation: vsd-drop 160ms var(--vsd-ease);
  }
  #top .prmn-cmngr__confirm::before {
    content: "";                            /* стрелочка к селектору */
    position: absolute;
    top: -5px;
    left: 18px;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 2px;
    transform: rotate(45deg);
  }
  #top .prmn-cmngr__confirm .prmn-cmngr__confirm-city {
    font-weight: 600;
  }
  #top .prmn-cmngr__confirm .prmn-cmngr__confirm-btns {
    display: flex;
    gap: 8px;
    margin-top: 10px;
  }
  #top .prmn-cmngr__confirm .prmn-cmngr__confirm-btn {
    height: 32px;
    padding: 0 18px;
    border: 0;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    line-height: 32px;
    cursor: pointer;
    transition: background var(--vsd-dur) var(--vsd-ease);
  }
  #top .prmn-cmngr__confirm .prmn-cmngr__confirm-btn.btn-primary {
    background: var(--vsd-accent) !important;  /* «Да» — синяя пилюля (кастом красит в красный) */
    color: #fff !important;
    text-shadow: none;
  }
  #top .prmn-cmngr__confirm .prmn-cmngr__confirm-btn.btn-primary:hover,
  #top .prmn-cmngr__confirm .prmn-cmngr__confirm-btn.btn-primary:focus {
    background: var(--vsd-accent-hover) !important;
    color: #fff;
  }
  #top .prmn-cmngr__confirm .prmn-cmngr__confirm-btn.btn:not(.btn-primary) {
    background: var(--vsd-neutral) !important; /* «Нет» — нейтральная */
    color: var(--vsd-fg) !important;
    text-shadow: none;
  }
  #top .prmn-cmngr__confirm .prmn-cmngr__confirm-btn.btn:not(.btn-primary):hover {
    background: var(--vsd-neutral-hover) !important;
  }

  /* ---- Панель выбора города: переоформленная (радиус/тень/список),
     но ПО ЦЕНТРУ ОКНА, как штатный модал (решение юзера 05.10) ---- */
  .prmn-cmngr-cities {
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);           /* центр окна */
    width: 480px;
    max-width: calc(100vw - 24px);
    height: auto;
    overflow: visible;
    background: transparent;
    transition: none !important;            /* без fade-анимации модала */
  }
  .prmn-cmngr-cities .modal-dialog {
    margin: 0;
    width: auto;
    transform: none !important;
    transition: none !important;
  }
  .prmn-cmngr-cities .modal-content {
    border: 0;
    border-radius: var(--vsd-radius);
    box-shadow: var(--vsd-shadow-panel);
    animation: vsd-drop 160ms var(--vsd-ease);
  }
  .prmn-cmngr-cities input.form-control {
    border-radius: var(--vsd-radius-sm);
    border-color: var(--vsd-line);
    box-shadow: none;
  }
  .prmn-cmngr-cities input.form-control:focus {
    border-color: var(--vsd-primary);
    box-shadow: 0 0 0 3px rgba(204, 34, 41, 0.10);
  }
  /* список городов: без бутстрап-дропдаун-бокса, со своим скроллом */
  .prmn-cmngr-cities .dropdown-menu {
    position: static;
    display: block;
    min-width: 0;
    width: 100%;
    max-height: 248px;
    overflow-y: auto;
    border: 0;
    box-shadow: none;
    background: transparent;
    float: none;
  }
  .prmn-cmngr-cities .dropdown-menu > li > a {
    padding: 7px 12px;
    border-radius: 8px;
    color: var(--vsd-fg-soft);
    transition: background 150ms var(--vsd-ease), color 150ms var(--vsd-ease);
  }
  .prmn-cmngr-cities .dropdown-menu > li > a:hover,
  .prmn-cmngr-cities .dropdown-menu > li > a:focus {
    background: var(--vsd-neutral);
    color: var(--vsd-accent-dark);
  }
  /* затемнение — штатное; форсируем явно (в части сред бекдроп
     оказывался скрытым), прыжок контента убираем: bootstrap прячет
     скроллбар и вешает на body инлайновый padding-right — контент
     сдвигался. Скролл не блокируем, компенсацию обнуляем */
  body:has(.prmn-cmngr-cities.in) .modal-backdrop {
    display: block !important;
    opacity: 0.4 !important;
  }
  body:has(.prmn-cmngr-cities.in) {
    overflow: auto !important;
    padding-right: 0 !important;
  }

  /* инфо-блок: «Контакты», «Покупателю» */
  #top .navbar-top-collapse > ul.navbar-nav:not(.navbar-right) {
    grid-area: info;
    display: flex;
    align-items: center;
    margin: 0 !important;                  /* кастом: margin-bottom 10px */
    height: 40px;                          /* строго в трек строки 1 */
    overflow: visible;
  }
  #top .navbar-top-collapse > ul.navbar-nav:not(.navbar-right) > li {
    display: flex;
    align-items: center;
  }
  #top .navbar-top-collapse > ul.navbar-nav:not(.navbar-right) > li > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: var(--vsd-radius-sm);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--vsd-link);                /* DNS-серый для мелких ссылок */
    background: transparent;
    transition: background var(--vsd-dur) var(--vsd-ease),
                color var(--vsd-dur) var(--vsd-ease);
  }
  #top .navbar-top-collapse > ul.navbar-nav:not(.navbar-right) > li > a:hover,
  #top .navbar-top-collapse > ul.navbar-nav:not(.navbar-right) > li > a:focus,
  #top .navbar-top-collapse > ul.navbar-nav:not(.navbar-right) > .open > a {
    background: var(--vsd-neutral);
    color: var(--vsd-accent-dark);
  }
  /* телефона в пункте «Контакты» больше нет — он справа строки 1 */
  #top #contacts > a .phone {
    display: none;
  }
  #top .navbar-top-collapse > ul.navbar-nav:not(.navbar-right) .fa-angle-down {
    color: var(--vsd-muted);
    font-size: 11px;
  }

  /* инфо-дропдауны строки 1: панель по ширине контента и вплотную
     к надписи (DNS-референс), а не растянутая под соседними пунктами */
  #top .navbar-top-collapse > ul.navbar-nav:not(.navbar-right) > li > .dropdown-menu {
    min-width: 0;
    width: max-content;
    max-width: 340px;
  }
  /* показ по классу .open: штатное открытие темы завязано на
     hover-velocity (мы его сняли — клик-режим), поэтому показываем
     панель сами при li.open. БРОНЯ: velocity темы при уходе мыши
     вешает на панель inline height/opacity/overflow — панель
     «открывалась» нулевой высотой; перебиваем инлайны */
  #top .navbar-top-collapse > ul.navbar-nav:not(.navbar-right) > li.open > .dropdown-menu {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    transform: none !important;
  }
  /* якорь панели — сам пункт: у темы li статичен (перебит bootstrap
     .nav>li{position:relative}), панель улетала к контейнеру и
     открывалась ниже строки поиска */
  #top .navbar-top-collapse > ul.navbar-nav:not(.navbar-right) > li.dropdown {
    position: relative !important;
  }
  /* DNS: шеврон пункта поворачивается при открытой панели */
  #top .navbar-top-collapse > ul.navbar-nav:not(.navbar-right) > li.dropdown > a .fa-angle-down {
    transition: transform var(--vsd-dur) var(--vsd-ease);
  }
  #top .navbar-top-collapse > ul.navbar-nav:not(.navbar-right) > li.open > a .fa-angle-down {
    transform: rotate(180deg);
  }
  /* без промаргивания: у темы на панели свои transition/velocity-
     механики — показ мгновенный, как у DNS, никакой переанимации */
  #top .navbar-top-collapse > ul.navbar-nav:not(.navbar-right) > li > .dropdown-menu {
    transition: none !important;
    animation: none !important;
  }

  /* телефон — правый край строки 1 */
  #top .vscar-dh-phone {
    grid-area: phone;
    justify-self: end;
  }
  #top .vscar-dh-phone a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: var(--vsd-radius-sm);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--vsd-fg);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--vsd-dur) var(--vsd-ease),
                color var(--vsd-dur) var(--vsd-ease);
  }
  #top .vscar-dh-phone a .fa {
    color: var(--vsd-primary);
    font-size: 15px;
  }
  #top .vscar-dh-phone a:hover,
  #top .vscar-dh-phone a:focus {
    background: var(--vsd-neutral);
    color: var(--vsd-accent-dark);
  }

  /* ============================================================
     1.2. Строка 2 — логотип, «Каталог», поиск, иконки
     ============================================================ */

  /* логотип */
  #top #logo {
    grid-area: logo;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    width: auto !important;                /* кастом: 178px×22px */
    height: auto !important;
    margin: 0 !important;
    padding: 8px 0;
  }
  #top #logo .fa-stack {
    display: none;                         /* серый круг-заглушка без иконки */
  }
  #top #logo .text-primary {
    display: inline-flex;                  /* иначе inline-картинка висит на baseline */
    align-items: center;
    position: static;                      /* тема: relative + bottom:6px поднимала лого */
    bottom: auto;
    font-size: 0;                          /* убирает строковый спуск под картинкой */
  }
  #top #logo .text-primary img {
    height: 20px !important;               /* прод-размер лого (базовая тема) */
    width: auto !important;
  }
  #top #logo small:empty {
    display: none;
  }

  /* кнопка «Каталог» — DNS-рецепт из vscar_megamenu_theme.css */
  #top .vscar-dh-cat {
    grid-area: cat;
  }
  #top .vscar-dh-cat > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 9px 20px;
    background: var(--vsd-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: var(--vsd-radius);
    cursor: pointer;
    transition: background var(--vsd-dur) var(--vsd-ease);
  }
  #top .vscar-dh-cat > a::before {
    content: "";
    flex: none;
    width: 16px;
    height: 2px;
    margin-right: 10px;
    background: #fff;
    border-radius: 1px;
    box-shadow: 0 -5px 0 #fff, 0 5px 0 #fff;   /* три полоски гамбургера */
  }
  #top .vscar-dh-cat > a:hover,
  #top .vscar-dh-cat > a:focus {
    background: var(--vsd-accent-hover);
    color: #fff;
  }
  /* кнопка «Каталог» видна ВСЕГДА: на макетах с 2OC открывает панель
     модуля (proxy-click, п.7 desktop-header.js; родную кнопку бара
     прячет vscar_megamenu_theme), без 2OC — ссылка на главную */

  /* иконочный кластер: сравнить, избранное, корзина, войти —
     каждая иконка с подписью снизу (DNS) */
  #top .navbar-top-collapse > .navbar-right {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-self: end;
    margin: 0;
  }
  #top .navbar-right > li {
    display: flex;
    align-items: center;
  }
  #top .navbar-right > li > a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 64px;
    min-height: 56px;
    padding: 6px 8px;
    border-radius: var(--vsd-radius-sm);
    color: var(--vsd-fg);
    background: transparent;
    transition: background var(--vsd-dur) var(--vsd-ease),
                color var(--vsd-dur) var(--vsd-ease);
  }
  #top .navbar-right > li > a:hover,
  #top .navbar-right > li > a:focus {
    background: var(--vsd-neutral);
    color: var(--vsd-accent-dark);
  }
  #top .navbar-right > li > a .fa {
    font-size: 20px;
    line-height: 1;
  }
  /* мини-счётчики сравнения/избранного (число заполняет JS из
     #compare-total / #wishlist-total, показ при count > 0) */
  #top .vscar-dh-icon > a {
    position: relative;
  }
  #top .vscar-dh-badge {
    position: absolute;
    top: 2px;
    left: calc(50% + 9px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--vsd-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    box-shadow: 0 0 0 2px #ffffff;         /* отрыв от иконки */
    display: none;
  }
  #top .vscar-dh-badge.is-on {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* подписи под иконками */
  #top .navbar-right .vscar-dh-cap,
  #top #cart > a::after {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--vsd-muted);
    white-space: nowrap;
  }
  #top .navbar-right > li > a:hover .vscar-dh-cap,
  #top .navbar-right > li > a:hover::after,
  #top .navbar-right > li > a:focus .vscar-dh-cap {
    color: var(--vsd-accent-dark);
  }

  /* ---- Корзина: просто иконка с подписью — без суммы и меню ---- */
  #top #cart > a {
    position: relative;
  }
  #top #cart > a > span {
    display: none !important;              /* сумма и каретка не нужны */
  }
  #top #cart > a::after {
    content: "Корзина";
  }
  #top #cart > .dropdown-menu {
    display: none !important;              /* меню выпилено (ссылку ведёт JS) */
  }
  /* счётчик: аккуратный красный круг, цифра строго по центру —
     вместо fa-stack-глифов, которые уводили её вверх */
  #top #cart > a > small.fa-stack {
    position: absolute;
    top: 0;
    left: calc(50% + 8px);
    width: 18px;
    height: 18px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: var(--vsd-primary);
    box-shadow: 0 0 0 2px #ffffff;         /* отрыв от иконки */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;                          /* глушим fa-глифы стека */
    color: #fff;
  }
  #top #cart > a > small.fa-stack > .fa-circle {
    display: none;
  }
  #top #cart > a > small.fa-stack > span.fa-stack-1x {
    position: static;
    width: auto;
    transform: none;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
  }

  /* ---- Войти: просто иконка с подписью — без меню (ссылку ведёт JS) ---- */
  #top #top-links > .dropdown-menu {
    display: none !important;
  }

  /* ---- Поиск: длинная таблетка на всю среднюю колонку ---- */
  #top #search.navbar-form {
    grid-area: search;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;                          /* иначе не сжимается и рвёт полосу */
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  #top #search .form-group,
  #top #search .keep-open.list-unstyled,
  #top #search .keep-open > li {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
  }
  #top #search .input-group {
    display: flex !important;              /* гасит .collapse, пока бар открыт */
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;                          /* разрешаем сжатие таблетки */
    width: 100%;
    height: 48px;
    padding: 0 6px 0 16px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid transparent;
    border-radius: 24px;
    box-shadow: none;
    transition: border-color 120ms var(--vsd-ease),
                background 120ms var(--vsd-ease),
                box-shadow 120ms var(--vsd-ease);
  }
  #top #search .input-group:focus-within {
    background: #ffffff;
    border-color: var(--vsd-primary);
    box-shadow: 0 0 0 3px rgba(204, 34, 41, 0.10);
  }
  #top #search .form-control {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 46px;
    background: transparent;
    border: 0;
    box-shadow: none;
    outline: 0;
    font-size: 15px;
    color: var(--vsd-fg);
  }
  #top #search .form-control:focus {
    border: 0;
    box-shadow: none;
  }
  #top #search .form-control::placeholder {
    color: var(--vsd-muted);
  }
  #top #search .input-group-btn {
    display: flex;
    flex: 0 0 auto;
    width: auto;
  }
  #top #search .input-group-btn .btn {
    height: 36px;
    padding: 0 22px;
    border: 0;
    border-radius: 18px;
    background: var(--vsd-primary);        /* «Найти» — бренд-красный, как в моб. шапке */
    color: #fff;
    font-size: 0;                          /* прячет <i>, текст ниже в ::after */
    box-shadow: none;
    transition: background var(--vsd-dur) var(--vsd-ease);
  }
  #top #search .input-group-btn .btn::after {
    content: "Найти";
    font-size: 14px;
    font-weight: 600;
  }
  #top #search .input-group-btn .btn .fa {
    display: none;
  }
  #top #search .input-group-btn .btn:hover,
  #top #search .input-group-btn .btn:focus {
    background: var(--vsd-primary-dark);
    color: #fff;
    outline: 0;
  }

  /* ---- Корзина: иконка (стили счётчика и подписи — в блоке кластера) ---- */
  #top #cart > a > .fa-shopping-cart,
  #top #cart > a > .fa-shopping-bag {
    font-size: 20px;
    color: var(--vsd-fg);
  }

  /* ============================================================
     1.3. Выпадающие панели — в тон панелям мегаменю
     ============================================================ */
  #top .navbar-nav > li > .dropdown-menu {
    margin-top: 4px;
    padding: 8px;
    min-width: 260px;
    border: 0;
    border-radius: var(--vsd-radius);
    box-shadow: var(--vsd-shadow-panel);
    background: #ffffff;
    animation: vsd-drop 160ms var(--vsd-ease);
  }
  /* корзина шире стандартной панели */
  #top #cart > .dropdown-menu {
    width: 420px;
    max-width: calc(100vw - 32px);
  }
  #top .navbar-nav > li > .dropdown-menu li > a,
  #top .navbar-nav > li > .dropdown-menu li > button,
  #top .navbar-nav > li > .dropdown-menu li.keep-open > span {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
    color: var(--vsd-fg-soft);
    background: transparent;
    transition: background 150ms var(--vsd-ease),
                color 150ms var(--vsd-ease);
  }
  #top .navbar-nav > li > .dropdown-menu li > a:hover,
  #top .navbar-nav > li > .dropdown-menu li > a:focus,
  #top .navbar-nav > li > .dropdown-menu li > button:hover,
  #top .navbar-nav > li > .dropdown-menu li > button:focus {
    background: var(--vsd-neutral);
    color: var(--vsd-accent-dark);
    text-decoration: none;
  }
  #top .navbar-nav > li > .dropdown-menu .dropdown-header {
    padding: 8px 12px 4px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vsd-muted);
  }
  #top .navbar-nav > li > .dropdown-menu .divider {
    height: 1px;
    margin: 6px 10px;
    background: var(--vsd-line);
  }

  /* ============================================================
     1.4. Закреплённая полоса при прокрутке (класс вешает JS):
     одна строка — логотип, «Каталог», поиск, иконки
     ============================================================ */
  body.vscar-dh-stuck #top.navbar-default {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1031;
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
    animation: vsd-drop 180ms var(--vsd-ease);
  }
  body.vscar-dh-stuck #top .container {
    grid-template-rows: 64px;
    grid-template-areas: "logo cat search actions";
  }
  body.vscar-dh-stuck #top #geopoint,
  body.vscar-dh-stuck #top .navbar-top-collapse > ul.navbar-nav:not(.navbar-right),
  body.vscar-dh-stuck #top .vscar-dh-phone {
    display: none !important;
  }
}

/* ============================================================
   2. Старое ns-меню (menu-header-box) — страницы без 2OC-мегаменю.
   Тёмную #24272D полосу (stylesheet.custom ставит !important)
   переводим в DNS-плоский вид тем же оружием: белый фон,
   крупные пункты, серый hover + глубокий синий (как бар мегаменю)
   ============================================================ */
@media (min-width: 992px) {

  .menu-header-box {
    margin: 0;
  }
  .menu-header-box #horizontal-menu {
    background-color: #ffffff !important;   /* кастом: #24272D !important */
    color: var(--vsd-fg);
    border-bottom: 1px solid var(--vsd-line-soft);
    min-height: 48px;
    margin-bottom: 0;
    border-radius: 0;
    z-index: 3;
  }
  .menu-header-box #horizontal-menu .nav > li > a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 14px !important;         /* кастом: 2px 8px !important */
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--vsd-fg) !important;       /* кастом красит в #fff */
    background: transparent;
    border-radius: 0;
    transition: background var(--vsd-dur) var(--vsd-ease),
                color var(--vsd-dur) var(--vsd-ease);
  }
  .menu-header-box #horizontal-menu .nav > li:hover > a,
  .menu-header-box #horizontal-menu .nav > li:focus > a,
  .menu-header-box #horizontal-menu .nav > li.active > a,
  .menu-header-box #horizontal-menu .nav > li.open > a {
    background: var(--vsd-neutral) !important;   /* кастом: #24272D !important */
    color: var(--vsd-accent-dark) !important;
  }
  .menu-header-box #horizontal-menu .arrow {
    color: var(--vsd-muted) !important;
    line-height: 1;
    padding-left: 6px;
    font-size: 14px;
  }
  .menu-header-box #horizontal-menu .nav > li:hover > a .arrow,
  .menu-header-box #horizontal-menu .nav > li.open > a .arrow {
    color: var(--vsd-accent-dark) !important;
  }
  .menu-header-box #horizontal-menu .dropdown-menu {
    min-width: 280px;
    padding: 10px !important;              /* кастом: 0 !important */
    margin-top: 1px;
    border: 0;
    border-radius: var(--vsd-radius);
    box-shadow: var(--vsd-shadow-panel);
    background: #ffffff;
    animation: vsd-drop 160ms var(--vsd-ease);
  }
  .menu-header-box #horizontal-menu .dropdown-menu li {
    border-bottom: 0;                      /* кастомные разделители #ECEEF2 */
  }
  .menu-header-box #horizontal-menu .dropdown-menu li a {
    display: block;
    padding: 8px 10px !important;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--vsd-link) !important;
    background: transparent !important;    /* кастом: #FFFFFF/#F5F7FA !important */
    transition: color 150ms var(--vsd-ease);
  }
  .menu-header-box #horizontal-menu .dropdown-menu li a:hover,
  .menu-header-box #horizontal-menu .dropdown-menu li a:focus {
    color: var(--vsd-accent) !important;
    background: var(--vsd-neutral) !important;
    text-decoration: none;
  }
}

/* ============================================================
   3. Доступность и мелочи
   ============================================================ */
#top a:focus-visible,
.menu-header-box #horizontal-menu a:focus-visible {
  outline: 2px solid var(--vsd-primary);
  outline-offset: -2px;
}

/* пустой слот 2OC-мегаменю не оставляет пиксельный зазор
   между полосой шапки и меню-рядом (класс вешает desktop-header.js) */
#column-oc-headers.vscar-dh-empty {
  display: none;
}

/* Полоса прокрутки — ВСЕГДА (зарезервированное место): при перезагрузке
   страницы (смена города, переходы) скроллбар исчезал и появлялся снова —
   ширина окна менялась на ~15px и центрированный контент «дёргался» вправо.
   Постоянный трек убирает этот прыжок и лишний CLS */
html {
  overflow-y: scroll;
}

@keyframes vsd-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #top .navbar-nav > li > .dropdown-menu,
  .menu-header-box #horizontal-menu .dropdown-menu,
  body.vscar-dh-stuck #top.navbar-default,
  #top .navbar-right > li > a,
  #top #search .input-group,
  #top #search .input-group-btn .btn {
    animation: none !important;
    transition: none !important;
  }
}