/* theme-catnav.css · 分类导航四种布局模式(由 theme.js 加 .catnav[data-cat-mode]) */

/* 切换按钮(通用) */
.catnav-toggle{
  cursor:pointer; border:1px solid var(--th-border, currentColor); background:var(--th-card, transparent);
  color:inherit; font:inherit; font-size:12px; line-height:1; padding:5px 12px; border-radius:14px;
  white-space:nowrap; flex-shrink:0; opacity:.9;
}
.catnav-toggle:hover{ opacity:1; border-color:var(--th-primary, currentColor); color:var(--th-primary, inherit); }

/* ── 1. tabs_expandable:横向单行 ↔ 多行展开 ── */
.catnav[data-cat-mode=tabs_expandable]{
  flex-wrap:nowrap; overflow:hidden; position:relative;
}
.catnav[data-cat-mode=tabs_expandable] .catnav-toggle{
  position:sticky; right:0; margin-left:auto;
  background:var(--th-card, var(--bg-header, var(--bg-card, #fff)));
  box-shadow:-12px 0 12px -6px var(--th-card, rgba(0,0,0,.4));
}
.catnav[data-cat-mode=tabs_expandable].expanded{
  flex-wrap:wrap; overflow:visible; height:auto !important; max-height:none !important;
  align-content:flex-start; row-gap:6px;
}
.catnav[data-cat-mode=tabs_expandable].expanded .catnav-toggle{ position:static; box-shadow:none; }

/* ── 2. accordion:竖向分组折叠 ── */
.catnav[data-cat-mode=accordion]{
  flex-direction:column !important; align-items:stretch !important; overflow:visible; height:auto !important;
  gap:2px;
}
.catnav[data-cat-mode=accordion].collapsed{ display:none !important; }
/* accordion 切换条 */
.catnav-toggle + .catnav[data-cat-mode=accordion]{ margin-top:4px; }

/* ── 3. dropdown:收成单按钮 + 浮层 ── */
.catnav[data-cat-mode=dropdown].dropdown-panel{
  position:absolute; z-index:400; top:100%; left:0; margin-top:4px;
  flex-direction:column; align-items:stretch; gap:2px;
  background:var(--th-card, #fff); border:1px solid var(--th-border, #e3eaf2);
  border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.18); padding:8px;
  min-width:200px; max-height:64vh; overflow:auto; display:none;
}
.catnav[data-cat-mode=dropdown].dropdown-panel.open{ display:flex; }

/* ── 4. grid:分类网格 ── */
.catnav[data-cat-mode=grid]{
  display:grid !important; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr));
  gap:8px; overflow:visible; height:auto !important; max-height:none !important;
}
.catnav[data-cat-mode=grid] > a{
  text-align:center; justify-content:center; padding:10px 6px !important;
  border:1px solid var(--th-border, #2a2a2e); border-radius:10px;
}
@media(max-width:760px){
  .catnav[data-cat-mode=grid]{ grid-template-columns:repeat(auto-fill, minmax(72px,1fr)); }
}