/* ============================================================
   VS-CAR Megamenu Theme 2026 — v1.0.0 (2026-09-21)
   Дизайн-система синхронизирована с:
   - VS-CAR Mobile Header 2026 (красный бренд #cc2229, радиус 12,
     ease cubic-bezier(0.22,0.61,0.36,1), тексты #1d1d1f/#6e6e73)
   - Filter UI 2026 (синий акцент ссылок #0a3d91, радиус 10,
     подложка выбранного #eef3fb)
   Классы пунктов (поле «Класс элемента меню» в 2OC Megamenu):
   - верхний пункт  → класс попадает на <li> топ-бара
   - подпункт       → класс попадает на колонку <div.col-sm-*> дропдауна
   Селекторы заякорены на #column-oc-headers (ID перебивает
   специфичность .oc_mm-цепочек модуля без !important-гонки).
   ============================================================ */

.oc_mm {
  --vsm-primary: #cc2229;                 /* бренд-красный (vhc) */
  --vsm-primary-dark: #b51e24;
  --vsm-primary-soft: rgba(204, 34, 41, 0.07);
  --vsm-accent: #0a3d91;                  /* акцент ссылок (fvu) */
  --vsm-accent-dark: #082f70;
  --vsm-accent-soft: #eef3fb;
  --vsm-bg: #ffffff;
  --vsm-bg-elev: #ffffff;
  --vsm-fg: #1d1d1f;                      /* основной текст (vhc) */
  --vsm-fg-soft: #374151;                 /* текст ссылок списков */
  --vsm-muted: #6e6e73;                   /* вторичный текст (vhc) */
  --vsm-line: #e5e7eb;                    /* нейтральная рамка (fvu) */
  --vsm-line-soft: rgba(0, 0, 0, 0.08);
  --vsm-hover: rgba(10, 61, 145, 0.06);
  --vsm-radius: 12px;                     /* крупные панели (vhc) */
  --vsm-radius-sm: 10px;                  /* чипы/карточки (fvu) */
  --vsm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --vsm-dur: 180ms;
  --vsm-shadow-panel: 0 12px 32px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
  --vsm-shadow-card: 0 4px 12px rgba(10, 61, 145, 0.10);
}

@media (prefers-color-scheme: dark) {
  .oc_mm {
    --vsm-accent: #7cabff;
    --vsm-accent-dark: #a5c3ff;
    --vsm-accent-soft: rgba(124, 171, 255, 0.12);
    --vsm-bg: #1c1c1e;
    --vsm-bg-elev: #2c2c2e;
    --vsm-fg: #f5f5f7;
    --vsm-fg-soft: #d6d6da;
    --vsm-muted: #98989d;
    --vsm-line: rgba(255, 255, 255, 0.14);
    --vsm-line-soft: rgba(255, 255, 255, 0.10);
    --vsm-hover: rgba(255, 255, 255, 0.06);
    --vsm-primary-soft: rgba(204, 34, 41, 0.18);
    --vsm-shadow-panel: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.30);
    --vsm-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.35);
  }
}

/* ============================================================
   1. Десктоп — верхняя панель (топ-пункты)
   ============================================================ */

#column-oc-headers .oc_mm ul.mm > li > a.clearfix {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 13px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--vsm-fg);
  border-radius: var(--vsm-radius-sm);
  transition: background var(--vsm-dur) var(--vsm-ease),
              color var(--vsm-dur) var(--vsm-ease);
}
#column-oc-headers .oc_mm ul.mm > li > a.clearfix:hover,
#column-oc-headers .oc_mm ul.mm > li.hover > a.clearfix {
  background: var(--vsm-hover);
  color: var(--vsm-accent-dark);
  text-decoration: none;
}

/* активный раздел */
#column-oc-headers .oc_mm ul.mm > li.mm-active > a.clearfix {
  color: var(--vsm-primary);
  font-weight: 600;
}

/* «...» (переполнение) */
#column-oc-headers .oc_mm ul.mm > li.more > a.clearfix {
  color: var(--vsm-muted);
  font-weight: 400;
}

/* ---- акцентный пункт «Подбор» (красная пилюля + иконка авто) ---- */
#column-oc-headers .oc_mm ul.mm > li.vsm-top-podbor > a.clearfix {
  background: var(--vsm-primary);
  color: #fff;
  font-weight: 600;
  padding: 8px 15px 8px 13px;
}
#column-oc-headers .oc_mm ul.mm > li.vsm-top-podbor > a.clearfix:hover {
  background: var(--vsm-primary-dark);
  color: #fff;
}
#column-oc-headers .oc_mm ul.mm > li.vsm-top-podbor > a.clearfix::before {
  content: "\f1b9"; /* fa-car, Font Awesome 4.7 */
  font-family: FontAwesome;
  font-size: 15px;
  margin-right: 8px;
}

/* ---- мягкий акцент подбора (для 2-го и 3-го подбора, чтобы не было
   трёх сплошных красных пилюль подряд) ---- */
#column-oc-headers .oc_mm ul.mm > li.vsm-top-podbor-soft > a.clearfix {
  color: var(--vsm-primary);
  font-weight: 600;
  background: var(--vsm-primary-soft);
}
#column-oc-headers .oc_mm ul.mm > li.vsm-top-podbor-soft > a.clearfix:hover {
  background: var(--vsm-primary);
  color: #fff;
}

/* ---- тихие пункты длинного хвоста (Коллекторы, Трубы, Резонаторы…) ---- */
#column-oc-headers .oc_mm ul.mm > li.vsm-top-quiet > a.clearfix {
  color: var(--vsm-muted);
  font-weight: 400;
}
#column-oc-headers .oc_mm ul.mm > li.vsm-top-quiet > a.clearfix:hover {
  color: var(--vsm-fg);
}

/* ============================================================
   2. Десктоп — панель дропдауна
   ============================================================ */

#column-oc-headers .oc_mm .mm-submenu {
  background: var(--vsm-bg-elev);
  border: 1px solid var(--vsm-line);
  border-radius: var(--vsm-radius);
  box-shadow: var(--vsm-shadow-panel);
  overflow: hidden;
}
#column-oc-headers .oc_mm .mm-submenu .content {
  padding: 14px 10px;
}
#column-oc-headers .oc_mm .mm-submenu .row {
  margin-left: -6px;
  margin-right: -6px;
}
#column-oc-headers .oc_mm .mm-submenu .row > [class*="col-"] {
  padding-left: 6px;
  padding-right: 6px;
}

/* ---- сброс списков ---- */
#column-oc-headers .oc_mm .mm-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#column-oc-headers .oc_mm .mm-menu ul li {
  margin: 0;
}

/* ---- заголовки групп (a.mm-submenu-main БЕЗ href — «Глушители», «Пламегасители»…) ---- */
#column-oc-headers .oc_mm .mm-menu ul > li > a.mm-submenu-main:not([href]) {
  display: block;
  padding: 6px 10px 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--vsm-muted);
  border-radius: 8px;
}

/* ---- листовые ссылки: mm-submenu-main с href ИЛИ вложенные ul a (без класса) ---- */
#column-oc-headers .oc_mm .mm-menu a.mm-submenu-main[href],
#column-oc-headers .oc_mm .mm-menu ul li ul a {
  display: block;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--vsm-fg-soft);
  border-radius: 8px;
  transition: background var(--vsm-dur) var(--vsm-ease),
              color var(--vsm-dur) var(--vsm-ease);
}
#column-oc-headers .oc_mm .mm-menu a.mm-submenu-main[href]:hover,
#column-oc-headers .oc_mm .mm-menu ul li ul a:hover {
  background: var(--vsm-accent-soft);
  color: var(--vsm-accent-dark);
  text-decoration: none;
}

/* ============================================================
   3. Десктоп — варианты колонок (класс подпункта)
   ============================================================ */

/* vsm-col-list — обычная колонка ссылок: чуть плотнее и мягче */
#column-oc-headers .oc_mm .vsm-col-list .mm-menu a[href] {
  padding: 8px 10px;
  font-size: 14px;
}

/* vsm-col-brands — сетка чипов брендов (Подбор → марки) */
#column-oc-headers .oc_mm .vsm-col-brands .mm-categories .row {
  display: block;
  margin: 0;
}
#column-oc-headers .oc_mm .vsm-col-brands .col-sm-12 {
  width: 100%;
  padding: 0;
}
#column-oc-headers .oc_mm .vsm-col-brands .mm-menu ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
/* ровная плитка: li занимает всю ячейку, чип растягивается в ней —
   соседи по строке всегда на одинаковой высоте */
#column-oc-headers .oc_mm .vsm-col-brands .mm-menu ul li {
  display: flex;
  align-items: stretch;
}
#column-oc-headers .oc_mm .vsm-col-brands .mm-menu ul li a {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 40px;
  padding: 8px 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--vsm-fg);
  background: var(--vsm-bg);
  border: 1px solid var(--vsm-line);
  border-radius: var(--vsm-radius-sm);
}
#column-oc-headers .oc_mm .vsm-col-brands .mm-menu a[href]:hover {
  background: var(--vsm-accent-soft);
  border-color: var(--vsm-accent);
  color: var(--vsm-accent-dark);
}

/* vsm-col-featured — карточки ключевых подразделов */
#column-oc-headers .oc_mm .vsm-col-featured .mm-menu a[href] {
  padding: 11px 12px;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--vsm-fg);
  background: var(--vsm-bg);
  border: 1px solid var(--vsm-line);
  border-radius: var(--vsm-radius);
}
#column-oc-headers .oc_mm .vsm-col-featured .mm-menu a[href]:hover {
  background: var(--vsm-bg);
  border-color: var(--vsm-accent);
  color: var(--vsm-accent-dark);
  box-shadow: var(--vsm-shadow-card);
}

/* vsm-col-action — промо-колонка (градиент бренда) */
#column-oc-headers .oc_mm .vsm-col-action .mm-categories {
  background: linear-gradient(135deg, var(--vsm-primary), #e23c33);
  border-radius: var(--vsm-radius);
  padding: 14px 8px;
}
#column-oc-headers .oc_mm .vsm-col-action .mm-menu a[href] {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
#column-oc-headers .oc_mm .vsm-col-action .mm-menu a[href]:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* vsm-col-info — компактная инфо-колонка (гайды, помощь) */
#column-oc-headers .oc_mm .vsm-col-info .mm-menu a[href] {
  padding: 5px 10px;
  font-size: 13px;
  color: var(--vsm-muted);
}
#column-oc-headers .oc_mm .vsm-col-info .mm-menu a[href]:hover {
  background: transparent;
  color: var(--vsm-fg);
}

/* ============================================================
   4. Мобильная панель (аккордеон 2OC, ≤991px)
   Стили в духе vhc-drawer: крупные таргеты ≥44px, шрифт 16px
   (анти-зум iOS), безопасные отступы.
   ============================================================ */

@media (max-width: 991px) {
  #column-oc-headers .oc_mm .mm-wrapper-horizontal {
    width: min(86vw, 320px);
    background: var(--vsm-bg);
    border-right: 1px solid var(--vsm-line);
    padding: 10px 10px calc(14px + env(safe-area-inset-bottom));
    box-shadow: var(--vsm-shadow-panel);
  }

  /* кнопка-закрыть */
  #column-oc-headers .oc_mm .mm-remove-horizontal {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vsm-bg-elev);
    border: 1px solid var(--vsm-line);
    border-radius: 50%;
    color: var(--vsm-muted);
    font-size: 16px;
    z-index: 5;
  }

  /* строка «Все категории» (кнопка открытия) */
  #column-oc-headers .oc_mm .navbar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 2px 10px;
    margin: 0;
  }
  #column-oc-headers .oc_mm .navbar-header .navbar-toggle {
    margin: 0;
    padding: 10px;
    border: 1px solid var(--vsm-line);
    border-radius: var(--vsm-radius-sm);
    background: var(--vsm-bg-elev);
  }
  #column-oc-headers .oc_mm .navbar-header .navbar-toggle .icon-bar {
    background: var(--vsm-fg);
  }
  #column-oc-headers .oc_mm .oc2nh-title {
    float: none;
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--vsm-fg);
  }

  /* верхний уровень аккордеона */
  #column-oc-headers .oc_mm .mm-wrapper-horizontal li.mm-vertical-item {
    margin: 1px 0;
  }
  #column-oc-headers .oc_mm .mm-wrapper-horizontal a.oc2-aitem {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 14px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--vsm-fg);
    border-radius: var(--vsm-radius);
  }
  #column-oc-headers .oc_mm .mm-wrapper-horizontal li.mm-active > a.oc2-aitem {
    color: var(--vsm-primary);
    background: var(--vsm-primary-soft);
  }

  /* вложенные уровни: oc2-asubitem И безклассовые листы (a href без
     класса — так рендерятся марки/дети в аккордеоне и слайдере) */
  #column-oc-headers .oc_mm .mm-wrapper-horizontal li li {
    margin: 0;
  }
  #column-oc-headers .oc_mm .mm-wrapper-horizontal li li ul {
    list-style: none;
    padding: 0 0 0 14px;
    margin: 0;
  }
  #column-oc-headers .oc_mm .mm-wrapper-horizontal li li a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--vsm-muted);
    border-radius: var(--vsm-radius-sm);
  }
  #column-oc-headers .oc_mm .mm-wrapper-horizontal li li a:hover {
    color: var(--vsm-fg);
    text-decoration: none;
  }
  /* группа/заголовок внутри аккордеона (a.has-arrow) — жирнее и темнее */
  #column-oc-headers .oc_mm .mm-wrapper-horizontal li li a.has-arrow {
    font-weight: 600;
    color: var(--vsm-fg);
  }

  /* стрелки аккордеона (metisMenu) */
  #column-oc-headers .oc_mm .mm-wrapper-horizontal .arrow {
    color: var(--vsm-muted);
  }
  #column-oc-headers .oc_mm .mm-wrapper-horizontal .has-arrow::after,
  #column-oc-headers .oc_mm .mm-wrapper-horizontal .mm-angle-down > a::after,
  #column-oc-headers .oc_mm .mm-wrapper-horizontal .mm-angle-right > a::after {
    color: var(--vsm-muted);
    background: transparent;
  }

  /* акцентный пункт «Подбор» в аккордеоне */
  #column-oc-headers .oc_mm .mm-wrapper-horizontal li.vsm-top-podbor {
    margin: 2px 0 8px;
  }
  #column-oc-headers .oc_mm .mm-wrapper-horizontal li.vsm-top-podbor > a.oc2-aitem {
    background: var(--vsm-primary);
    color: #fff;
  }
  #column-oc-headers .oc_mm .mm-wrapper-horizontal li.vsm-top-podbor > a.oc2-aitem::before {
    content: "\f1b9";
    font-family: FontAwesome;
    font-size: 16px;
    margin-right: 10px;
  }
  #column-oc-headers .oc_mm .mm-wrapper-horizontal li.vsm-top-podbor > a.oc2-aitem::after {
    color: rgba(255, 255, 255, 0.75);
  }

  /* мягкий акцент подбора (мобильная панель) */
  #column-oc-headers .oc_mm .mm-wrapper-horizontal li.vsm-top-podbor-soft > a.oc2-aitem {
    color: var(--vsm-primary);
    background: var(--vsm-primary-soft);
  }
  #column-oc-headers .oc_mm .mm-wrapper-horizontal li.vsm-top-podbor-soft > a.oc2-aitem::before {
    content: "\f1b9";
    font-family: FontAwesome;
    font-size: 16px;
    margin-right: 10px;
  }
}

/* ============================================================
   4.5. Семантические хуки верхних пунктов
   Классы существуют для точечных правок по пунктам в будущем
   (иконка, цвет, скрытие). Пока дают одну полезную вещь —
   убирают серую вспышку тапа на iOS.
   vsm-top-glushiteli, vsm-top-kollektory, vsm-top-gofry,
   vsm-top-katalizatory, vsm-top-obmanki, vsm-top-plamegasiteli,
   vsm-top-truby, vsm-top-rezonatory, vsm-top-strongery
   ============================================================ */

#column-oc-headers .oc_mm ul.mm > li[class*="vsm-top-"] > a.clearfix {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ============================================================
   5. Утилиты видимости (по желанию на любом пункте)
   ============================================================ */

@media (max-width: 991px) {
  #column-oc-headers .oc_mm .vsm-hide-mobile {
    display: none !important;
  }
}
@media (min-width: 992px) {
  #column-oc-headers .oc_mm .vsm-hide-desktop {
    display: none !important;
  }
}