/* themes/ВАША_ТЕМА/assets/css/catalog-menu.css */

/* --------- базовые переменные --------- */
:root{
  --cat-yellow:#ffdc29;
  --cat-border:#e9e9e9;
  --cat-line:#eeeeee;
  --cat-text:#101010;
  --cat-hover:#f6f6f6;
  --cat-shadow:0 12px 20px rgba(16,16,16,.08);
  --cat-radius:0px;
  --cat-col1:250px;
  --cat-colN:250px;
  --cat-maxh:800px;
}
.catalog-col.catalog-col-1{
  border: 2px solid;
  border-color: var(--cat-yellow)}
/* блокируем прокрутку фона на мобиле */
.no-scroll{ overflow:hidden; }

/* оверлей (включается только на мобиле через .is-active) */
.catalog-overlay{
  display:none;
}
.catalog-overlay.is-active{
  display:block;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.25);
  z-index:9998;
}

/* --------- общий контейнер каталога --------- */
.header_catalog{
  display:none;
}
.header_catalog.is-open{
  display:block;
}

.header_catalog *{
  box-sizing:border-box;
}

.header_catalog__inner{
  background:#fff;
}

/* Списки */
.header_catalog ul{
  list-style:none;
  padding:0;
  margin:0;
}

/* Элемент меню */
.header_catalog .catalog-item > a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:14px 18px;
  color:var(--cat-text);
  text-decoration:none;
  font-size:15px;
  line-height:1.2;

  border-bottom:1px solid var(--cat-line);
}

/* Hover/active */
.header_catalog .catalog-item:hover > a,
.header_catalog .catalog-item.is-active > a{
  background:var(--cat-hover);
}

/* Последняя строка без бордера */
.header_catalog .catalog-menu > li:last-child > a{
  border-bottom:none;
}

/* Стрелка для тех, у кого есть вложенность */
.header_catalog .catalog-item.has-children > a::after{
  content:"›";
  font-size:22px;
  line-height:1;
  color:var(--cat-text);
}

/* Заголовки колонок */
.catalog-col__head{
  padding:12px 16px;
  border-bottom:1px solid var(--cat-border);
}
.catalog-col__head--root{
  /* на десктопе можно скрыть, но оставим — выглядит как в демо шапка списка */
  background:#fff;
}
.catalog-col__title{
  font-weight:600;
  font-size:16px;
  color:var(--cat-text);
}

/* Back кнопки (по умолчанию скрыты на десктопе) */
.catalog-back{
  display:none;
  width:100%;
  border:0;
  background:var(--cat-yellow);
  color:#111;
  padding:14px 16px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  align-items:center;
  gap:10px;
}
.catalog-back__icon{
  font-size:22px;
  line-height:1;
}

/* ======================================================================
   DESKTOP (≥1025px)
   - открыто на главной (is-home is-open)
   - на остальных открывается кнопкой (is-open)
   - колонки 2/3 появляются только при hover (классы is-l2/is-l3)
   ====================================================================== */
@media (min-width:1025px){

  .header_catalog{
    position:absolute;
    top:calc(100% + 60px);
    left:0;
    z-index:9999;
    max-height:var(--cat-maxh);
  }

  /* Меню должно сжиматься по активным колонкам: никаких width:980px */
  .header_catalog__inner{
    display:inline-flex;
    width:auto;
    max-width:calc(100vw - 40px);

    border:1px solid var(--cat-border);
    border-radius:var(--cat-radius);
    box-shadow:var(--cat-shadow);
    overflow:hidden;
    background:#fff;
  }

  .catalog-col{
    max-height:var(--cat-maxh);
    overflow-y:auto;
    background:#fff;
  }

  .catalog-col-1{
    width:var(--cat-col1);
  }

  .catalog-col-2,
  .catalog-col-3{
    width:var(--cat-colN);
    border-left:1px solid var(--cat-border);
  }

  /* ВАЖНО: по умолчанию показываем только 1 колонку */
  .catalog-col-2,
  .catalog-col-3{
    display:none;
  }

  /* При наведении на уровень1 -> включаем колонку2 */
  #header_catalog.is-l2 .catalog-col-2{
    display:block;
  }

  /* При наведении на уровень2 -> включаем колонку3 */
  #header_catalog.is-l3 .catalog-col-2,
  #header_catalog.is-l3 .catalog-col-3{
    display:block;
  }

  /* UL второго/третьего уровня показываем только активный */
  #header_catalog .menu-id-2,
  #header_catalog .menu-id-3{
    display:none;
  }
  #header_catalog .menu-id-2.is-active,
  #header_catalog .menu-id-3.is-active{
    display:block;
  }

  /* Скроллбар аккуратный */
  .catalog-col::-webkit-scrollbar{ width:4px; }
  .catalog-col::-webkit-scrollbar-track{ background:transparent; }
  .catalog-col::-webkit-scrollbar-thumb{
    background:#f4f5f5;
    border-radius:6px;
  }

  /* Back не нужен на десктопе */
  .catalog-back{ display:none; }
}

/* ======================================================================
   MOBILE (≤1024px)
   - offcanvas справа 350px
   - панели выезжают по is-l2 / is-l3
   ====================================================================== */
@media (max-width:1024px){

  .header_catalog{
    position:fixed;
    top:60px;
    right:0;
    width:350px;
    height:calc(100vh - 60px);
    z-index:9999;
    background:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    border-left:1px solid var(--cat-border);
  }

  .header_catalog__inner{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    border-radius:0;
    box-shadow:none;
    border:0;
  }

  .catalog-back{
    display:flex;
  }

  .catalog-col{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#fff;
    overflow-y:auto;
    transition:transform .35s ease;
  }

  /* стартовые позиции */
  .catalog-col-1{ transform:translateX(0); }
  .catalog-col-2{ transform:translateX(100%); }
  .catalog-col-3{ transform:translateX(200%); }

  /* открыли 2-й уровень */
  #header_catalog.is-l2 .catalog-col-1{ transform:translateX(-100%); }
  #header_catalog.is-l2 .catalog-col-2{ transform:translateX(0); }

  /* открыли 3-й уровень */
  #header_catalog.is-l3 .catalog-col-2{ transform:translateX(-100%); }
  #header_catalog.is-l3 .catalog-col-3{ transform:translateX(0); }

  /* на мобиле показываем только активные UL 2/3 (иначе будет “простыня”) */
  #header_catalog .menu-id-2,
  #header_catalog .menu-id-3{
    display:none;
  }
  #header_catalog .menu-id-2.is-active,
  #header_catalog .menu-id-3.is-active{
    display:block;
  }

  /* компактнее строки */
  .header_catalog .catalog-item > a{
    padding:14px 16px;
    font-size:15px;
  }

  .catalog-col::-webkit-scrollbar{ width:4px; }
  .catalog-col::-webkit-scrollbar-track{ background:transparent; }
  .catalog-col::-webkit-scrollbar-thumb{
    background:#f4f5f5;
    border-radius:6px;
  }
}