/* ============================================================
   Vygoda — 分类页 (cat.css) v2 — 全面 UI 统一
   设计语言：白色主体 + 浅灰背景 + 主题蓝强调
   字体：统一 400/500/600，无多余粗细
   间距系统：4/8/12/16/20/24
   ============================================================ */
body[data-page="cat"]{
  --cat-blue:#1e56c0;
  --cat-blue-2:#2f6bff;
  --cat-bg:#f4f6fa;
  --cat-line:#e8edf4;
  --cat-text:#1b2436;
  --cat-muted:#8a8f99;
  background:var(--cat-bg);
  font-family:var(--font);
}

/* ---------- 顶部搜索（吸顶：Header 正下方） ---------- */
.cat-search{
  position:-webkit-sticky;position:sticky;
  top:calc(var(--header-h) + 6px);
  z-index:50;
  background:var(--cat-bg);
  padding:8px 12px 4px;
  border-bottom:1px solid var(--cat-line);
  box-shadow:0 2px 8px rgba(30,86,192,.04);
}
.cat-search-box{
  display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--cat-line);border-radius:22px;
  padding:7px 8px 7px 14px;
  box-shadow:0 2px 10px rgba(30,86,192,.05);
}
.cat-search-box .cs-ic{font-size:15px;color:var(--cat-muted)}
.cat-search-box input{
  flex:1;min-width:0;border:0;outline:none;background:transparent;
  font-size:14px;font-weight:400;color:var(--cat-text);height:22px;
}
.cat-search-box .cs-btn{
  flex:none;background:linear-gradient(135deg,var(--cat-blue),var(--cat-blue-2));color:#fff;
  border:0;border-radius:16px;font-size:12.5px;font-weight:600;padding:6px 14px;cursor:pointer;
}
.cat-hotwords{
  display:flex;flex-wrap:wrap;gap:6px;padding:8px 4px 2px;align-items:center;
}
.cat-hotwords b{font-size:11px;color:var(--cat-muted);font-weight:500;margin-right:2px}
.cat-hotwords a{
  font-size:11.5px;font-weight:400;color:#5b6b85;background:#fff;border:1px solid var(--cat-line);
  border-radius:999px;padding:3px 10px;text-decoration:none;line-height:1.4;
}
.cat-hotwords a:active{background:#f0f4fb}

/* ---------- 左右布局：左一级(24%) + 右二级(76%) ---------- */
.cat-body{
  display:flex;align-items:stretch;margin-top:10px;
  gap:0;
}

/* 左侧一级分类：浅灰背景，无粗边框 */
.cat-side{
  width:24%;min-width:84px;max-width:120px;flex:none;
  background:#eef1f6;              /* 浅灰，与右侧区分 */
  border-radius:12px 0 0 12px;
  overflow:hidden;
  padding:8px 0 12px;
}
.cat-side .cs-item{
  display:flex;align-items:center;justify-content:flex-start;gap:8px;
  padding:12px 8px;cursor:pointer;
  font-size:13px;font-weight:500;color:#4a5568;position:relative;
  border-left:3px solid transparent;
  line-height:1.35;
  text-decoration:none;
  min-height:44px;
  box-sizing:border-box;
  transition:background .12s;
}
/* 一级分类图标：统一 24px 容器 + 20px SVG */
.cat-side .cs-item .s-ic{
  width:24px;height:24px;flex:none;
  display:grid;place-items:center;
  font-size:0;                  /* Emoji 兜底禁用 */
}
.cat-side .cs-item .s-ic svg{
  width:20px;height:20px;
  stroke:#7a8699;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .12s;
}
.cat-side .cs-item .s-txt{
  flex:1;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word;
}
/* 选中态：浅主题蓝背景 + 蓝字 + 左侧指示条 + 图标主题色 */
.cat-side .cs-item.on{
  background:linear-gradient(90deg,#e6edfb,#f2f6fe);
  color:var(--cat-blue);
  border-left-color:var(--cat-blue);
  font-weight:600;
}
.cat-side .cs-item.on .s-ic svg{stroke:var(--cat-blue)}
.cat-side .cs-item:active{background:#e3e9f4}

/* 右侧二级分类宫格：白色背景 */
.cat-main{
  flex:1;min-width:0;background:#fff;
  border-radius:0 12px 12px 0;
  padding:14px 12px 18px;
}
.cat-main .cm-title{
  font-size:15px;font-weight:600;color:var(--cat-text);
  margin:0 2px 12px;display:flex;align-items:center;gap:6px;
  line-height:1.4;
}
.cat-main .cm-title .t-ic{width:22px;height:22px;display:grid;place-items:center}
.cat-main .cm-title .t-ic svg{width:18px;height:18px;stroke:var(--cat-blue);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* 二级宫格：每行 3 个，卡片尺寸完全一致 */
.cat-grid2{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px 10px;
}
.cat-grid2 .cg2-item{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  text-decoration:none;color:var(--cat-text);min-width:0;
}
/* 二级分类图片：统一 72px 圆角图，object-fit:cover，比例协调 */
.cat-grid2 .cg2-ic{
  width:100%;aspect-ratio:1/1;max-width:84px;
  border-radius:12px;overflow:hidden;
  background:#f3f6fb;
  display:grid;place-items:center;
  border:1px solid var(--cat-line);
}
.cat-grid2 .cg2-ic img{width:100%;height:100%;object-fit:cover;display:block}
/* 无图占位：统一 SVG 图标，居中，浅色描边 */
.cat-grid2 .cg2-ic .ph{width:30px;height:30px;stroke:#b9c2d4;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cat-grid2 .cg2-item span{
  font-size:12px;font-weight:500;text-align:center;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word;
  min-height:32px;             /* 两行文字区高度一致 */
  width:100%;
}
.cat-grid2 .cg2-empty{grid-column:1/-1;text-align:center;color:var(--cat-muted);font-size:12px;padding:26px 0}

/* ---------- 热门商品（随当前一级分类） ---------- */
.cat-goods{
  margin:14px 12px 0;background:#fff;
  border-radius:12px;
  padding:14px 12px 4px;
}
.cat-goods .cg-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;
}
.cat-goods .cg-head h3{
  font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px;color:var(--cat-text);
}
.cat-goods .cg-head a{font-size:12px;color:var(--cat-blue);text-decoration:none;font-weight:500}
.cat-goods .p-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
.cat-goods .p-card{box-shadow:none;border:1px solid var(--cat-line)}
.cat-goods .cg-empty{text-align:center;color:var(--cat-muted);font-size:12.5px;padding:24px 0}

/* ---------- 商品列表模式 ---------- */
.list-mode{padding:0 0 24px}
.list-mode .chipbar{padding:10px 12px 4px}

/* ---------- 响应式 ---------- */
@media(min-width:768px){
  .cat-side{width:24%;max-width:150px}
  .cat-grid2{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 14px}
  .cat-goods .p-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(min-width:1024px){
  .cat-page{max-width:1100px;margin:0 auto;padding:0 16px}
  .cat-side{width:22%;max-width:180px}
  .cat-grid2{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 14px}
  .cat-goods .p-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .cat-hotwords a{font-size:12px}
}
@media(max-width:380px){
  .cat-side{width:25%;min-width:80px}
  .cat-side .cs-item{padding:11px 6px;font-size:12.5px;gap:6px}
  .cat-grid2{gap:12px 8px}
}