/* ============================================================
   【新文件】左分类树 + 右货架（templates/cat-tree.css）
   三套首页与分类页/搜索页共用。全部选择器都带 .ct- 前缀，不碰站内任何既有类名，
   颜色/宽度一律走 --ct-* 变量并给好兜底值，所以每套首页只改变量就能换皮：
     默认首页      用这里的兜底值（跟站内 #0071e3 / #1d1d1f 一套色）
     magazine.css  .tpl-mag{--ct-w:250px;--ct-gap:32px;...}
     video.css     .tpl-video{--ct-w:250px;--ct-gap:32px;...}
   --ct-stick 的 126px ＝新页头吸顶后的实际高度（导航行 56 + 搜索行 58 ＋ 一点余量，实测 122），
   侧栏往下滚时正好贴在页头下沿，不会被压住。
   注意：宿主如果给外层写了 overflow-x:hidden，overflow-y 会被算成 auto，外层就成了滚动容器，
   这里的 sticky 只对那层生效、对窗口失效。杂志风/视频风两处已改成 overflow-x:clip。
   ============================================================ */
.ct-shop{display:grid;grid-template-columns:var(--ct-w,230px) minmax(0,1fr);gap:var(--ct-gap,26px);align-items:start}
.ct-main{min-width:0}
.ct-side{position:sticky;top:var(--ct-stick,126px);background:var(--ct-card,#fff);
  border:1px solid var(--ct-line,#e8e8ed);border-radius:var(--ct-r,14px);overflow:hidden;
  box-shadow:0 1px 3px rgba(16,24,40,.05);font-size:14px;color:var(--ct-ink,#1d1d1f);line-height:1.5}
.ct-h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--ct-line,#e8e8ed);font-weight:700}
.ct-h em{font-style:normal;font-size:12px;font-weight:500;color:var(--ct-mut,#86868b);
  background:var(--ct-hov,#f3f4f6);border-radius:999px;padding:2px 9px}
.ct-b{padding:8px}
/* 行链接的基础色写成 .ct-side .ct-i（两级）：杂志风/视频风的样式表里各有一条
   .tpl-mag a、.tpl-video a{color:inherit}（一级类 + 元素），单级 .ct-i 会被它压掉，
   选中态的蓝色就看不见了。提升一级才在三套首页里都站稳。 */
.ct-side .ct-i{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;margin-bottom:2px;border-radius:9px;text-decoration:none;
  color:var(--ct-ink2,#374151);transition:background .16s ease,color .16s ease}
.ct-i:last-child{margin-bottom:0}
.ct-i:hover{background:var(--ct-hov,#f3f4f6);color:var(--ct-ink,#1d1d1f)}
.ct-i.on{background:var(--ct-on,rgba(0,113,227,.1));color:var(--ct-blue,#0071e3);font-weight:700}
.ct-i small{flex:none;font-size:12px;font-weight:500;color:var(--ct-mut,#9ca3af)}
.ct-i.on small{color:var(--ct-blue,#0071e3)}
.ct-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-en{display:block;font-size:11px;font-weight:400;line-height:1.4;margin-top:2px;
  color:var(--ct-mut,#9ca3af);overflow:hidden;text-overflow:ellipsis}
.ct-i.on .ct-en{color:var(--ct-blue,#0071e3)}
.ct-all{border:1px dashed var(--ct-line,#e5e7eb)}
.ct-all.on{border-style:solid}

/* 窄一点的屏（含手机）：侧栏不再占一列，分类横着滑，跟设计稿的降级一致 */
@media(max-width:1080px){
  .ct-shop{display:block}
  .ct-side{position:static;margin:0 0 20px}
  .ct-h em{display:none}
  .ct-b{display:flex;gap:8px;overflow-x:auto;padding:12px 14px;-webkit-overflow-scrolling:touch}
  .ct-i{flex:none;margin-bottom:0;white-space:nowrap;border:1px solid var(--ct-line,#e8e8ed)}
  .ct-i.on{border-color:transparent}
  .ct-n{overflow:visible;text-overflow:none}
  .ct-en{display:none}
}
@media(max-width:768px){
  .ct-side{border-radius:12px}
  .ct-i{padding:8px 12px;font-size:13px}
  .ct-i small{display:none}
}