/* 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:14px; font-weight:750; line-height:1; padding:7px 14px; 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; }

.category-nav .catnav-drawer[hidden]{ display:none; }
.category-nav .catnav-drawer{
  position:absolute;
  z-index:260;
  left:8px;
  top:calc(100% + 4px);
  width:max-content;
  min-width:108px;
  max-width:168px;
  margin:0;
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:4px;
  border:1px solid var(--th-border, var(--border, rgba(148, 163, 184, .45)));
  border-radius:8px;
  background:var(--th-card, var(--bg-header, var(--bg-card, #fff)));
  box-shadow:0 10px 24px rgba(0,0,0,.26);
}
.category-nav .catnav-drawer-link{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:26px;
  width:100%;
  padding:5px 8px;
  border:0;
  border-radius:5px;
  color:var(--th-text, var(--text, inherit));
  background:transparent;
  font-size:12px;
  font-weight:500;
  line-height:1.2;
  white-space:nowrap;
}
.category-nav .catnav-drawer-link:hover{
  color:var(--th-primary, var(--accent, inherit));
  background:rgba(148,163,184,.12);
}

/* ── 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)); }
}