/* ============================================================
   Трубокомплект — мега-меню «Каталог» (только десктоп ≥992px)
   Файл: /bitrix/templates/main/css/tk-mega-menu.css
   Подключён в header.php только для www.trubocomplekt.ru (23.10.2026).
   Откат: убрать блок «tk-mega-menu» из header.php
   или вернуть header_backup_20261023.php.
   ============================================================ */
/* Кнопка «Весь каталог» нужна только в десктопном мега-меню */
.tk-all { display: none !important; }

@media (min-width: 992px) {

  #main-menu { position: relative; }
  #main-menu > li.root-item:first-child { position: static; }

  /* Стрелка у пункта «Каталог» */
  #main-menu > li.root-item:first-child > a .menu__item-show { display: none; }
  #main-menu > li.root-item:first-child > a:after {
    content: ""; display: inline-block; margin-left: 7px; vertical-align: 2px;
    border: 4px solid transparent; border-top-color: #fff; border-bottom: 0;
    transition: transform .2s;
  }
  #main-menu > li.root-item:first-child.tk-open > a,
  #main-menu > li.root-item:first-child.tk-open > a:hover { background: #008242 !important; color: #fff !important; }
  #main-menu > li.root-item:first-child.tk-open > a:after { transform: rotate(180deg); }

  /* Панель мега-меню на всю ширину контейнера */
  #main-menu > li.root-item:first-child > ul {
    display: block !important;
    visibility: hidden; opacity: 0; transform: translateY(6px);
    transition: opacity .18s, transform .18s, visibility 0s .18s;
    position: absolute; left: 0; right: 0; top: 100%;
    width: auto !important; z-index: 1000; margin: 0;
    padding: 24px 28px 20px !important;
    background: #fff;
    border-top: 4px solid #008242;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
    column-count: 4; column-gap: 28px;
    text-align: left;
  }
  #main-menu > li.root-item:first-child.tk-open > ul {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity .18s, transform .18s;
  }

  /* 2-й уровень — заголовки групп (как плашки в левом сайдбаре) */
  #main-menu > li.root-item:first-child > ul > li {
    display: block; float: none; width: auto; position: static;
    break-inside: avoid; page-break-inside: avoid;
    margin: 0 0 18px;
  }
  #main-menu > li.root-item:first-child > ul > li > a {
    display: block; padding: 0 0 7px !important; margin-bottom: 6px;
    border-bottom: 2px solid #27ae61; background: none !important;
    color: #008242 !important; font-weight: 700; font-size: 13px;
    text-transform: uppercase; letter-spacing: .02em; line-height: 1.3;
  }
  #main-menu > li.root-item:first-child > ul > li > a:hover { color: #27ae61 !important; }
  #main-menu > li.root-item:first-child > ul > li > a .menu__item-show { display: none; }

  /* 3-й уровень — всегда раскрыт внутри колонки */
  #main-menu > li.root-item:first-child > ul > li > ul {
    display: block !important; position: static !important;
    width: auto !important; margin: 0; padding: 0 !important;
    background: none; border: 0; box-shadow: none !important;
  }
  #main-menu > li.root-item:first-child > ul > li > ul > li { display: block; float: none; width: auto; }
  #main-menu > li.root-item:first-child > ul > li > ul > li > a {
    display: block; position: relative; white-space: normal;
    padding: 4px 0 4px 14px !important; background: none !important;
    color: #636363 !important; font-size: 13.5px; line-height: 1.35;
    font-weight: 400; text-transform: none;
  }
  #main-menu > li.root-item:first-child > ul > li > ul > li > a:before {
    content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px;
    border-top: 2px solid #27ae61; border-right: 2px solid #27ae61;
    transform: rotate(45deg);
  }
  #main-menu > li.root-item:first-child > ul > li > ul > li > a:hover { color: #008242 !important; text-decoration: none; }
  #main-menu > li.root-item:first-child > ul > li > ul > li > a:hover:before { border-color: #f1c40f; }

  /* Кнопка «Весь каталог» */
  #main-menu > li.root-item:first-child > ul > li.tk-all {
    display: block !important; column-span: all; margin: 4px 0 0 !important;
    padding-top: 14px; border-top: 1px solid #e6e6e6;
  }
  #main-menu > li.root-item:first-child > ul > li.tk-all > a {
    display: inline-block; margin: 0; border: 0 !important; border-radius: 3px;
    padding: 8px 18px !important; background: #f1c40f !important;
    color: #222 !important; font-weight: 700; font-size: 13px; text-transform: none;
  }
  #main-menu > li.root-item:first-child > ul > li.tk-all > a:hover { background: #e0b50c !important; }
}