/* =========================================================================
   供应商协作平台 · 统一「类目导航」（三处共用这一份）
   -------------------------------------------------------------------------
   蔡老板 2026-09-30：
     ① 「电脑端 1 两个产品库的类目展示，统一为模拟页首页的类目展示」
     ② 「2 模拟页首页类目展示需要展开二级及三级类目，目前没有展开」

   用到它的三处（**DOM 结构必须保持一致**，各页面的渲染函数见括号）：
     · 国铁商城模拟页**首页**左栏          —— mall-mock.html  renderNav()
     · 门户「国铁产品库」商城视图左栏      —— index.html     plibTreeHtml()
     · 门户「公司产品库」同上（与国铁产品库**共用**同一个渲染函数）

   ⚠️ 这是**共用文件**（两张页面各自 <link> 引入）——别在页面里再各写一份，
      否则「统一」迟早跑偏。**改这里的数值，三处一起变。**
   ⚠️ 结构契约（改渲染函数时必须同步）：
        .catnav > .catnav-hd  （标题，可省）
        .catnav > ul.catnav-tree > li.catnav-item
            .catnav-row  [ .catnav-tg | .catnav-a ]
            ul.catnav-sub > li.catnav-item （二级，可再嵌一层 = 三级）
        三级用 .catnav-a.catnav-l3（不再有三角）。
   ⚠️ 交互约定（三处一致）：**三角 = 展开/收起（不改变筛选）**；**点类目名 = 筛选**。
   ⚠️ 配色取国铁商城首页左栏那套：蓝底白字，悬停 / 选中变白底蓝字。
   ========================================================================= */
.catnav{width:250px;flex:none;background:#3399ff;color:#fff}

/* 侧栏用法（门户产品库）：跟着窗口粘住 + 自己滚，别把整页撑长 */
.catnav-sticky{position:sticky;top:8px;max-height:calc(100vh - 170px);overflow:auto}

.catnav-hd{height:44px;line-height:44px;padding:0 16px;font-size:16px;font-weight:600;
  background:rgba(0,0,0,.06);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catnav-hd em{font-style:normal;font-size:12px;font-weight:400;opacity:.85;margin-left:4px}

.catnav ul{list-style:none;margin:0;padding:0}
.catnav-row{display:flex;align-items:center;height:38px;cursor:pointer}

/* 三角：展开 / 收起。没有子级时用 .catnav-tg-x 占位（**保留占位**，
   否则同一层的类目名会参差不齐 —— 这个坑在「三级分类」树上踩过） */
.catnav-tg{flex:none;width:22px;height:38px;border:0;background:none;padding:0;cursor:pointer;
  color:rgba(255,255,255,.75);font-size:11px;line-height:38px;font-family:inherit}
.catnav-tg:hover{color:#fff}
.catnav-tg-x{visibility:hidden;cursor:default}

.catnav-a{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;
  height:38px;padding:0 14px 0 0;border:0;background:none;cursor:pointer;font-family:inherit;
  font-size:13px;color:#fff;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catnav-a i{font-style:normal;flex:none;font-size:11px;color:rgba(255,255,255,.7);
  font-variant-numeric:tabular-nums}

/* 悬停 / 选中：整行变白底蓝字（「选中」只认行上的 .on，点三角不算选中） */
.catnav-row:hover,.catnav-row.on{background:#fff}
.catnav-row:hover .catnav-a,.catnav-row:hover .catnav-tg,
.catnav-row.on .catnav-a,.catnav-row.on .catnav-tg{color:#3399ff}
.catnav-row:hover .catnav-a i,.catnav-row.on .catnav-a i{color:#8fb8e8}

/* 二级：整块压暗 + 行矮一点 + **右缩进**（蔡老板 2026-10-01：
   「二级三级类目往右边展开，不要左边齐展开」）+ 左侧一条竖线跟一级明确分开
   ⚠️ 压暗值实测调过：`.07` 在蓝底上几乎看不出来（2026-09-30 截图对比后改到 .14）。 */
.catnav-sub{background:rgba(0,0,0,.14);box-shadow:inset 2px 0 0 rgba(255,255,255,.35)}
.catnav-sub .catnav-row{height:33px;padding-left:18px}
.catnav-sub .catnav-tg{height:33px;line-height:33px}
.catnav-sub .catnav-a{height:33px;font-size:12.5px;padding-right:12px}
.catnav-sub .catnav-a i{font-size:10.5px}
/* 三级：再矮一档、**再往右缩进一档**（18+22=40px），两级叠起来层级一眼可辨 */
.catnav-sub .catnav-sub{background:rgba(0,0,0,.14)}
.catnav-sub .catnav-sub .catnav-row{padding-left:40px}
.catnav-sub .catnav-sub .catnav-a{font-size:12px}

/* 没有商品的类目：淡化，但仍可点（点了就是「该类目暂无商品」） */
/* 零数量的类目：**置灰且不可点**（蔡老板 2026-09-30 按建议优化）——
   点进去只会看到「共 0 件商品」的死胡同。只禁「类目名」（.catnav-a）；
   有子级的父类目三角（.catnav-tg）仍可点（展开看看里面有什么是允许的）。 */
.catnav-zero .catnav-a,.catnav-zero .catnav-tg{opacity:.55}
.catnav-zero .catnav-a{pointer-events:none;cursor:default}

.catnav-none{font-size:12.5px;padding:9px 16px;color:rgba(255,255,255,.85)}