/* ============================================================
   БИНЭКСТ — фирменный стиль меню каталога (поверх catalog.css).
   Белая карточка с фаской, моно-заголовок, строки с ховером,
   активная категория — синяя полоса на голубой подложке,
   счётчики — моно-бейджи, стрелки раскрытия — синие.
   Мобильный: лист меню с синей липкой строкой «СКРЫТЬ КАТЕГОРИИ».
   ============================================================ */

/* ---------- карточка меню ---------- */
#tree{
  background:#fff;
  border:1px solid var(--line,#e4e8ec);
  clip-path:var(--cham,polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%));
  padding:0 0 10px;
  margin:0 0 14px;
}
#tree::before{
  content:'КАТАЛОГ ТОВАРОВ';
  display:block;
  font-family:var(--mono,monospace);font-weight:700;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted,#6f7479);
  padding:12px 14px 10px;
  border-bottom:1px solid var(--line,#e4e8ec);
  margin:0 0 6px;
}

/* ---------- строки дерева ---------- */
#tree .t-row{
  display:flex;align-items:center;gap:4px;
  transition:background .12s ease;
}
#tree .t-row:hover{background:#f5f8fc}
#tree .t-row.active{
  background:#eef4fb;
  box-shadow:inset 3px 0 0 var(--navy,#004d99);
}

/* название категории */
#tree .t-name{
  flex:1;display:flex;align-items:center;gap:8px;
  border:none;background:none;cursor:pointer;text-align:left;
  font-weight:600;font-size:13px;line-height:1.35;color:var(--ink,#000);
  padding:9px 12px 9px 0;
}
#tree .t-row:hover .t-name{color:var(--navy,#004d99)}
#tree .t-row.active .t-name{color:var(--navy,#004d99);font-weight:700}

/* счётчик товаров — моно-бейдж */
#tree .t-name b{
  margin-left:auto;
  font-family:var(--mono,monospace);font-weight:700;font-size:10px;
  color:var(--muted,#6f7479);background:#eef2f7;
  padding:2px 6px;min-width:28px;text-align:center;
}
#tree .t-row:hover .t-name b{background:#e3ecf7;color:var(--navy,#004d99)}
#tree .t-row.active .t-name b{background:#dbe9fb;color:var(--navy,#004d99)}

/* стрелка раскрытия */
#tree .t-toggle{
  flex:0 0 22px;width:22px;height:22px;
  border:none;background:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--navy,#004d99);font-size:10px;
  transition:transform .15s ease;
}
#tree .t-node.open>.t-row>.t-toggle{transform:rotate(90deg)}
#tree .t-spacer{flex:0 0 22px}

/* вложенные списки */
#tree .t-children{list-style:none;margin:0;padding:0}

/* ---------- строка «ВСЕ ТОВАРЫ» ---------- */
#tree .t-all .t-name{
  font-family:var(--mono,monospace);font-weight:700;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--navy,#004d99);
  padding:10px 12px 10px 0;
}
#tree .t-all .t-name b{background:#eef2f7}
#tree .t-all.active{background:#eef4fb;box-shadow:inset 3px 0 0 var(--navy,#004d99)}

/* ---------- кнопка «Категории ▾» (мобильный тумблер) ---------- */
#treeToggle{
  border:1px solid var(--navy,#004d99);background:var(--navy,#004d99);color:#fff;
  font-family:var(--mono,monospace);font-weight:700;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;padding:10px 16px;cursor:pointer;
  clip-path:var(--cham,polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%));
}
#treeToggle:hover{background:var(--acc,#0066cc)}

/* ---------- кнопка закрытия мобильного листа ---------- */
.t-close{display:none}

@media(max-width:700px){
  .t-close{
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;border:none;cursor:pointer;
    background:var(--navy,#004d99);color:#fff;
    font-family:var(--mono,monospace);font-weight:700;font-size:11px;
    letter-spacing:.08em;text-transform:uppercase;
    padding:12px;margin:0 0 6px;
    position:sticky;top:0;z-index:5;
    clip-path:var(--cham,polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%));
  }
  .t-close:active{background:var(--acc,#0066cc)}
}

/* ---------- мобильная плотность и скрытие служебной шапки ---------- */
@media(max-width:700px){
  #tree::before{display:none!important}
  #tree .t-name{font-size:12.5px;padding:8px 10px 8px 0}
  #tree .t-name b{min-width:24px;padding:2px 5px}
  #tree .t-all .t-name{padding:9px 10px 9px 0}
}