/* ======================================================================
   СКРОЛЛБАР ДЛЯ nav-items (кроме x-track) 
   ====================================================================== */
.nav-items::-webkit-scrollbar-thumb {
  background: #f4f5f5;
  border-radius: 5px;
  border: 0;
}
.nav-items::-webkit-scrollbar-track {
  background: transparent;
}


/* Общие правила для header_catalog */
.header_catalog.active {
display: flex;}
@media (min-width: 1025px) {
  .nav-drill {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 30;
    max-height: 628px;
    filter: drop-shadow(0 12px 20px rgba(16,16,16,0.08));
    background-color: #fff;
    border-radius: 16px;
    display: none;
    transition: 250ms ease;
  }
  .nav-drill.active {
    display: flex;
  }

  /* --- 2) Скрываем старое дерево --- */
  #categories_block_left .vertical ul ul { display: none !important; }

  /* --- 3) Уровень 1 --- */
  .nav-drill .nav-items.nav-level-1 {
    padding: 8px;
    display: flex;
    flex-direction: column;
    background: #f4f5f6;
    border-radius: 16px;
    max-width: 340px;
    height: auto;
    overflow-x: hidden;
  }

  .nav-drill ul.nav-level-3 {
    overflow-x: hidden;
  }
  .nav-drill .nav-level-1 .nav-link {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    font-size: 16px;
    color: #000;
    border-radius: 16px;
    transition: background 250ms;
  }
  .nav-drill .nav-level-1:hover > .nav-link,
  .nav-drill .nav-level-1.active .nav-link,
  .nav-drill .nav-level-1 .nav-link:hover,
  .nav-drill .nav-level-1 .nav-link.active {
    background-color: #ffdc29;
  }

  /* --- 4) Уровни 2 и 3 --- */
  .nav-drill .nav-level-2,
  .nav-drill .nav-level-3 {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    background: #fff;
    max-height: 628px;
    padding: 8px;
  }
  .nav-drill ul.nav-level-2 {
    /* overflow-y: auto; */
    /* overflow-x: visible; */
  }
  .nav-drill .nav-level-2::-webkit-scrollbar,
  .nav-drill .nav-level-3::-webkit-scrollbar {
    width: 4px;
  }
  .nav-drill .nav-level-2::-webkit-scrollbar-thumb,
  .nav-drill .nav-level-3::-webkit-scrollbar-thumb {
    background: #f4f5f5;
    border-radius: 10px;
  }
  .nav-drill .nav-level-2 li,
  .nav-drill .nav-level-3 li {
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
  }
  .nav-drill .nav-level-2 li:last-child,
  .nav-drill .nav-level-3 li:last-child {
    margin-bottom: 0;
  }
  .nav-drill .nav-level-2 .nav-link,
  .nav-drill .nav-level-3 .nav-link {
    padding: 16px 24px;
    font-size: 16px;
    color: #000;
    border-radius: 16px;
    transition: background 250ms;
  }
  .nav-drill .nav-level-2:hover > .nav-link,
  .nav-drill .nav-level-2 .nav-link:hover,
  .nav-drill .nav-level-2 .nav-link.active,
  .nav-drill .nav-level-3 .nav-link:hover,
  .nav-drill .nav-level-3 .nav-link.active {
    background-color: #eaecee;
  }

  /* --- 5) Drill-down hover для вложенных --- */
  .nav-expand-content {
    position: absolute;
    top: 0;
    left: 100%;
    width: 280px;
    height: 100%;
    background: #f0f8f7;
    visibility: hidden;
    opacity: 0;
    transform: translateX(10px);
    transition: visibility 0.2s, opacity 0.2s, transform 0.2s;
    z-index: 1;
  }
  .nav-expand:hover > .nav-expand-content {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
  }

  /* Цветовые оттенки */
  .nav-level-2 > .nav-expand-content { background: #fff; }
  .nav-level-3 > .nav-expand-content { background: #fff; }
  .nav-level-4 > .nav-expand-content { background: #fff; }
  .nav-level-5 > .nav-expand-content { background: #fff; }

  /* Пряча «Назад» */
  .nav-back-link { display: none !important; }

 .header_catalog{
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 30;
    max-height: 628px;
    -webkit-filter: drop-shadow(0px 12px 20px rgba(16, 16, 16, 0.08));
    filter: drop-shadow(0px 12px 20px rgba(16, 16, 16, 0.08));
    background-color: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: none;
    -webkit-transition: 250ms ease;
    -o-transition: 250ms ease;
    transition: 250ms ease;

}
.header_catalog ul li {
  position: relative;
}
.header_catalog ul li .before,
.header_catalog ul li .after {
  display: none;
}

/* === Десктоп: показываем колонки 2 и 3 всегда === */

  .header_catalog .menu-id-2 { display: block; }
  .header_catalog .menu-id-3 { display: block; }




/* === Колонки меню 1/2/3: базовая вёрстка === */
.header_catalog .menu-id-1 {
  padding: 8px;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background-color: #f4f5f6;
  max-width: 340px;
  max-height: 628px;
  overflow-x:hidden;
}

.header_catalog .menu-id-1 li a {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  font-size: 16px;
  color: #000;
  transition: 250ms ease;
  border-radius: 16px;
}
 
  .header_catalog .menu-id-1 li:hover a,
  .header_catalog .menu-id-1 li a.active,
  .header_catalog .menu-id-1 li a:hover {
    background-color: #ffdc29;
  }


.header_catalog .menu-id-2,
.header_catalog .menu-id-3 {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  max-height: 628px;
  padding: 8px;
}

.header_catalog .menu-id-2.active,
.header_catalog .menu-id-3.active {
  display: flex;
}


  .header_catalog .menu-id-2,
  .header_catalog .menu-id-3 {
    overflow-y: auto;
  }
  .header_catalog .menu-id-2::-webkit-scrollbar,
  .header_catalog .menu-id-3::-webkit-scrollbar {
    width: 4px;
  }
  .header_catalog .menu-id-2::-webkit-scrollbar-track,
  .header_catalog .menu-id-3::-webkit-scrollbar-track {
    background: transparent;
  }
  .header_catalog .menu-id-2::-webkit-scrollbar-thumb,
  .header_catalog .menu-id-3::-webkit-scrollbar-thumb {
    background: #f4f5f5;
    border-radius: 10px;
    border: 0;
  }


.header_catalog .menu-id-2 li,
.header_catalog .menu-id-3 li {
  display: flex;
  flex-direction: column;
}
.header_catalog .menu-id-2 li:not(:last-child),
.header_catalog .menu-id-3 li:not(:last-child) {
  margin-bottom: 4px;
}
.header_catalog .menu-id-2 li a,
.header_catalog .menu-id-3 li a {
  font-size: 16px;
  color: #000;
  padding: 16px 24px;
  transition: 250ms ease;
  border-radius: 16px;
}
.header_catalog .menu-id-2 li a:hover,
.header_catalog .menu-id-2 li a.active,
.header_catalog .menu-id-3 li a:hover,
.header_catalog .menu-id-3 li a.active {
  background-color: #eaecee;
}

/* ======================================================================
   ПРАВИЛА СОКРЫТИЯ/ПОКАЗА ДЛЯ menu-id-2 / menu-id-3
   ====================================================================== */
/* скрываем UL второго уровня по умолчанию */
.header_catalog .menu-id-2 {
  display: none;
}
/* если открыт 2-й уровень (например, кликнули по бургеру или сделали hover) */
.header_catalog.level2-open .menu-id-2 {
  display: block;
}

/* скрываем UL третьего уровня по умолчанию */
.header_catalog .menu-id-3 {
  display: none;
}
/* если открыт 3-й уровень */
.header_catalog.level3-open .menu-id-3 {
  display: block;
}

.header_catalog {
  display: none;
}
.smart-menu-label,
.smart-menu-header{
	display: none;
}
.nav-drill {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 30;
    max-height: 628px;   
    filter: drop-shadow(0 12px 20px rgba(16,16,16,0.08));
    background-color: #fff;
    border-radius: 16px;   
    display: none;
    transition: 250ms ease;
  }
  .nav-drill.active {
    display: flex;
  }

  /* --- 2) Скрываем старое дерево --- */
  #categories_block_left .vertical ul ul { display: none !important; }

  /* --- 3) Уровень 1 --- */
  .nav-drill .nav-items.nav-level-1 {
    padding: 8px;
    display: flex;
    flex-direction: column;
    background: #f4f5f6;
    border-radius: 16px;
    max-width: 340px;    
	height: auto;
    overflow-x: hidden;
  }
  
  .nav-drill ul.nav-level-3{	
    overflow-x: hidden; 
  } 
  .nav-drill .nav-level-1 .nav-link {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    font-size: 16px;
    color: #000;
    border-radius: 16px;
    transition: background 250ms;
  }
  .nav-drill .nav-level-1:hover>.nav-link,
  .nav-drill .nav-level-1.active .nav-link,
  .nav-drill .nav-level-1 .nav-link:hover,
  .nav-drill .nav-level-1 .nav-link.active {
    background-color: #ffdc29;
  }

  /* --- 4) Уровни 2 и 3 --- */
  .nav-drill .nav-level-2,
  .nav-drill .nav-level-3 {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    background: #fff;
    max-height: 628px;
    padding: 8px;   
  }
    .nav-drill ul.nav-level-2{
	//overflow-y: auto;          
    //overflow-x: visible; 
	}
  .nav-drill .nav-level-2::-webkit-scrollbar,
  .nav-drill .nav-level-3::-webkit-scrollbar {
    width: 4px;
  }
  .nav-drill .nav-level-2::-webkit-scrollbar-thumb,
  .nav-drill .nav-level-3::-webkit-scrollbar-thumb {
    background: #f4f5f5;
    border-radius: 10px;
  }
  .nav-drill .nav-level-2 li,
  .nav-drill .nav-level-3 li {
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
  }
  .nav-drill .nav-level-2 li:last-child,
  .nav-drill .nav-level-3 li:last-child {
    margin-bottom: 0;
  }
  .nav-drill .nav-level-2 .nav-link,
  .nav-drill .nav-level-3 .nav-link {
    padding: 16px 24px;
    font-size: 16px;
    color: #000;
    border-radius: 16px;
    transition: background 250ms;
  }
  .nav-drill .nav-level-2:hover>.nav-link,  
  .nav-drill .nav-level-2 .nav-link:hover,
  .nav-drill .nav-level-2 .nav-link.active,
  .nav-drill .nav-level-3 .nav-link:hover,
  .nav-drill .nav-level-3 .nav-link.active {
    background-color: #eaecee;
  }

  /* --- 5) Drill-down hover для вложенных --- */
  .nav-expand-content {
    position: absolute;
    top: 0;
    left: 100%;
    width: 280px;
    height: 100%;
    background: #f0f8f7;
    visibility: hidden;
    opacity: 0;
    transform: translateX(10px);
    transition: visibility 0.2s, opacity 0.2s, transform 0.2s;
    z-index: 1;
  }
  .nav-expand:hover > .nav-expand-content {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
  }

  /* Цветовые оттенки */
  .nav-level-2 > .nav-expand-content { background: #fff; }
  .nav-level-3 > .nav-expand-content { background: #fff; }
  .nav-level-4 > .nav-expand-content { background: #fff; }
  .nav-level-5 > .nav-expand-content { background: #fff; }

  /* Пряча «Назад» */
  .nav-back-link { display: none !important; }

.nav-items::-webkit-scrollbar-thumb{
    background: #f4f5f5;
    border-radius: 4px;
    border: 0;
}
.nav-items::-webkit-scrollbar-track {
    background: transparent;
}
}
/* ========================================================================== 
   MOBILE (≤1024px): «Stacked Panels» – Плавное выезжание панелей
   ========================================================================== */
@media (max-width: 1024px) {

  /* 1) Корневой контейнер .header_catalog:
        – фиксируется под шапкой (top: 60px)
        – ширина 350px (можно легко поменять на 100% при желании)
        – высота: полный экран минус 60px шапки
        – скрывает всё, что выезжает за рамки (overflow: hidden)
        – без скруглений, без фонового оверлея
        – по умолчанию display: none; при .active → display: block
        – самый высокий z-index, чтобы быть над всем контентом
  */
  .header_catalog {
    position: fixed;
    top: 60px;
    right: 0;
    width: 350px; /* при желании можно заменить на width: 100%; */
    height: calc(100vh - 60px);
    overflow: hidden;
    background-color: #fff;
    border-radius: 0;
    display: none;
    z-index: 999;
  }
  .header_catalog.active {
    display: block;
  }

  /* 2) Каждая панель внутри .header_catalog:
       – абсолютно позиционируется внутри контейнера
       – имеет ту же высоту, что и контейнер (calc(100vh - 60px))
       – фиксированная ширина 350px
       – вертикальный скролл (overflow-y: auto), горизонтальный не обрезается
       – плавный переход transform .35s ease
       – тонкая тень для разделения между панелями
  */
  .header_catalog .menu-level-1,
  .header_catalog .menu-level-2,
  .header_catalog .menu-level-3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    height: calc(100vh - 60px);
    background-color: #fff;
    overflow-y: auto;
    overflow-x: visible !important;
    transition: transform 0.35s ease;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.06);
  }

  /* 3) Начальные позиции панелей:
       – первая панель видна сразу (translateX(0), z-index: 1)
       – вторая находится справа (translateX(100%), z-index: 2)
       – третья ещё правее (translateX(200%), z-index: 3)
  */
  .header_catalog .menu-level-1 {
    transform: translateX(0);
    z-index: 1;
  }
  .header_catalog .menu-level-2 {
    transform: translateX(100%);
    z-index: 2;
  }
  .header_catalog .menu-level-3 {
    transform: translateX(200%);
    z-index: 3;
  }

  /* 4) Открытие 2-го уровня:
       – при наличии класса .level2-open:
         • первая панель съезжает влево (translateX(-100%))
         • вторая панель выезжает (translateX(0))
  */
  .header_catalog.level2-open .menu-level-1 {
    transform: translateX(-100%);
  }
  .header_catalog.level2-open .menu-level-2 {
    transform: translateX(0);
  }

  /* 5) Открытие 3-го уровня:
       – при наличии класса .level3-open:
         • вторая панель съезжает влево (translateX(-100%))
         • третья панель выезжает (translateX(0))
  */
  .header_catalog.level3-open .menu-level-2 {
    transform: translateX(-100%);
  }
  .header_catalog.level3-open .menu-level-3 {
    transform: translateX(0);
  }

  /* 6) Стрелки «›» у пунктов, у которых есть вложенная панель (data-id-menu) */
  .header_catalog .menu-id-1 li[data-id-menu] > a::after,
  .header_catalog .menu-id-2 li[data-id-menu] > a::after {
    content: "›";
    float: right;
    font-size: 20px;
    color: #000;
    line-height: 1;
  }

  /* 7) Кнопка «Назад» (вставляется JS-выполнением):
       – выглядит как жёлтый бар вверху каждой вложенной панели
       – стрелка влево (‹)
  */
  .nav-back-link {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    background-color: #ffdc29 !important;
    color: #fff !important;
    font-weight: 500;
    text-decoration: none;
  }
  .nav-back-link span{
	  margin-left:5px;
  }
 

  /* 8) Первая панель (.menu-id-1) – не обрезает «выезжающие» панели справа:
       – overflow-x: visible
       – высота – подкреплена, чтобы вместить контент
       – при желании можно задать margin-bottom: 20px для отступа снизу
  */
  .header_catalog .menu-id-1 {
    padding: 10px 0px;
    width: 350px;
    height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: visible !important;
  }

  /* 9) Немного сглаживаем скроллы и убираем избыточные линии */
  .header_catalog .menu-id-1::-webkit-scrollbar,
  .header_catalog .menu-id-2::-webkit-scrollbar,
  .header_catalog .menu-id-3::-webkit-scrollbar {
    width: 4px;
  }
  .header_catalog .menu-id-1::-webkit-scrollbar-track,
  .header_catalog .menu-id-2::-webkit-scrollbar-track,
  .header_catalog .menu-id-3::-webkit-scrollbar-track {
    background: transparent;
  }
  .header_catalog .menu-id-1::-webkit-scrollbar-thumb,
  .header_catalog .menu-id-2::-webkit-scrollbar-thumb,
  .header_catalog .menu-id-3::-webkit-scrollbar-thumb {
    background: #f4f5f5;
    border-radius: 5px;
    border: 0;
  }
  .smart-menu-label{
	 font-weight: 500;
    font-size: 19px;
  }
 .header_catalog .menu-id-2, .header_catalog .menu-id-3 {
        height: 200vh;        
    }
	.menu-level-1 li,
	.header_catalog .menu-id-2 li, .header_catalog .menu-id-3 li{
		padding: 10px;
		border-bottom: 1px solid #eee;
	}
}