/* =============================================================
   材质分类总览 · categories.css
   23 个材质大类 / 59 个品牌原厂（依据原官网分类树）
   ============================================================= */

.tax{padding:0 0 var(--sec-y)}

/* 页头导语控制在配图左侧，避免文字压到实景图上 */
.page-head .lede{max-width:52ch}

/* ---------- 工具栏 ---------- */
.tax-bar{
  position:sticky;top:64px;z-index:30;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  margin-inline:calc(var(--pad) * -1);
  padding:14px var(--pad);
}
.tax-tools{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

.tax-search{
  display:flex;align-items:center;gap:9px;
  height:42px;padding:0 16px;min-width:280px;flex:1;max-width:400px;
  border:1px solid var(--border);border-radius:999px;background:#fff;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.tax-search:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(28,28,30,.06)}
.tax-search svg{color:var(--muted);flex-shrink:0}
.tax-search input{
  border:0;outline:0;background:none;width:100%;
  font:inherit;font-size:13.5px;color:var(--ink);
}
.tax-search input::placeholder{color:#B4B7C2}

.tax-chips{display:flex;gap:8px;flex-wrap:wrap}
.tax-chips button{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;
  border:1px solid var(--border);background:#fff;
  font-size:13px;color:var(--text);white-space:nowrap;
  transition:background .2s var(--ease),color .2s,border-color .2s;
}
.tax-chips button b{
  font-family:"Inter",system-ui,sans-serif;font-size:11px;font-weight:600;
  color:var(--muted);transition:color .2s;
}
.tax-chips button:hover{border-color:#C9CCD5;color:var(--ink)}
.tax-chips button.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.tax-chips button.is-on b{color:rgba(255,255,255,.6)}

.tax-count{
  margin-left:auto;font-size:12.5px;color:var(--muted);white-space:nowrap;
}
.tax-count b{font-family:"Inter",system-ui,sans-serif;color:var(--ink);font-weight:600}

/* ---------- 速查条 ---------- */
.tax-index{
  display:flex;gap:6px;overflow-x:auto;padding:12px 0 2px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.tax-index::-webkit-scrollbar{display:none}
.tax-index a{
  flex-shrink:0;padding:5px 10px;border-radius:8px;
  font-family:"Inter",system-ui,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.2px;color:var(--text);background:var(--bg);
  border:1px solid transparent;
  transition:background .18s,color .18s,border-color .18s;
}
.tax-index a:hover{background:#fff;border-color:var(--border);color:var(--ink)}

/* ---------- 分组 ---------- */
.txgroup{padding-top:clamp(34px,4vw,52px)}
.txgroup[hidden]{display:none}
.txgroup__head{
  display:flex;align-items:flex-end;gap:14px;
  padding-bottom:16px;margin-bottom:22px;
  border-bottom:1px solid var(--line);
}
.txgroup__t{display:grid;gap:2px}
.txgroup__head h2{
  font-size:clamp(19px,1.7vw,23px);font-weight:600;letter-spacing:-.2px;line-height:1.2;
}
.txgroup__head small{
  font-family:"Inter",system-ui,sans-serif;font-size:10px;
  letter-spacing:1.7px;color:var(--muted);font-weight:500;line-height:1;
}
.txgroup__head em{
  margin-left:auto;font-style:normal;font-size:12.5px;color:var(--muted);
  font-family:"Inter",system-ui,sans-serif;
}

/* ---------- 卡片 ---------- */
/* 同排卡片等高，页脚条对齐；品牌数差异带来的留白收在卡片内部 */
.txgrid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  align-items:stretch;
}

.txcard{
  display:flex;flex-direction:column;height:100%;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;padding:20px 20px 14px;
  transition:border-color .26s var(--ease),box-shadow .26s var(--ease),transform .26s var(--ease);
  scroll-margin-top:150px;
}
.txcard:hover{
  border-color:#D6D9E0;transform:translateY(-2px);
  box-shadow:0 20px 38px -30px rgba(17,17,26,.7);
}
.txcard.is-dim{display:none}

.txcard__top{display:flex;align-items:center;gap:12px}
.txcard__code{
  position:relative;flex-shrink:0;
  min-width:58px;padding:6px 9px 7px;
  border-radius:10px;background:var(--bg);
  font-family:"Inter",system-ui,sans-serif;
  font-size:15px;font-weight:700;letter-spacing:-.3px;color:var(--ink);
  text-align:center;line-height:1.2;
}
.txcard__code span{
  position:absolute;top:-1px;right:-1px;
  font-size:8.5px;font-weight:600;color:var(--muted);
  letter-spacing:0;transform:translate(0,-40%);
}
.txcard__names{min-width:0}
.txcard__names b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.1px;line-height:1.35}
.txcard__names small{
  display:block;font-family:"Inter",system-ui,sans-serif;
  font-size:10.5px;color:var(--muted);letter-spacing:.1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.txcard__desc{
  margin:11px 0 14px;font-size:12.5px;line-height:1.65;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.txbrands{display:flex;flex-direction:column;gap:2px;margin:0 0 12px}
.txbrands li{
  display:flex;align-items:center;gap:9px;
  padding:5px 0;
}
.txbrands li + li{border-top:1px dashed #F2F4F7}

.txlogo{
  width:50px;height:30px;flex-shrink:0;
  display:grid;place-items:center;
  border-radius:6px;background:#fff;border:1px solid var(--line);
  overflow:hidden;
}
.txlogo img{max-width:42px;max-height:19px;width:auto;object-fit:contain}
.txlogo--mono{
  font-family:"Inter",system-ui,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:-.2px;color:#9A9DA9;background:var(--bg);border-color:transparent;
}

.txb{display:flex;align-items:baseline;gap:7px;min-width:0;flex-wrap:wrap}
.txb b{font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap}
.txb small{
  font-family:"Inter",system-ui,sans-serif;
  font-size:10.5px;color:var(--muted);letter-spacing:.1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.txb small i{font-style:normal;color:#C4C7D0}

.txcard__foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-top:auto;padding-top:11px;
  border-top:1px solid var(--line);
}
.txcard__foot span{
  font-family:"Inter",system-ui,sans-serif;font-size:11px;color:var(--muted);
}
.txcard__foot a{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;color:var(--ink);font-weight:500;
  transition:gap .2s var(--ease),opacity .2s;
}
.txcard__foot a:hover{gap:8px}
.txcard__foot a svg{transition:transform .2s var(--ease)}
.txcard__foot a:hover svg{transform:translateX(2px)}

/* 搜索高亮 */
.txmark{background:rgba(255,208,47,.42);color:inherit;border-radius:2px;padding:0 1px}

/* 空态 */
.tax-empty{
  display:none;padding:72px 0;text-align:center;
}
.tax-empty.is-on{display:block}
.tax-empty b{display:block;font-size:16px;font-weight:600;margin-bottom:6px}
.tax-empty span{font-size:13px;color:var(--muted)}

/* ---------- 说明条 ---------- */
.tax-note{
  margin-top:clamp(36px,4vw,56px);
  padding:20px 22px;border-radius:var(--r-md);
  background:var(--bg);border:1px solid var(--line);
  display:flex;gap:16px;align-items:flex-start;
}
.tax-note__k{
  flex-shrink:0;font-size:11px;letter-spacing:1.2px;color:var(--muted);
  font-family:"Inter",system-ui,sans-serif;padding-top:2px;
}
.tax-note p{font-size:12.5px;line-height:1.75;color:var(--text);margin:0}
.tax-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#C9CCD5}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .tax-bar{top:56px}
  .tax-search{max-width:none}
  .txgrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}

@media (max-width:720px){
  /* 手机上空图会压到导语，直接隐藏页头配图 */
  .page-head__bg{display:none}
  .tax-bar{position:static;padding:12px 0;margin-inline:0;border-bottom:0}
  .tax-tools{gap:10px}
  .tax-search{min-width:0;width:100%;max-width:none;height:40px}
  .tax-chips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;width:100%;
    scrollbar-width:none;-ms-overflow-style:none}
  .tax-chips::-webkit-scrollbar{display:none}
  .tax-chips button{flex-shrink:0;padding:7px 12px;font-size:12.5px}
  .tax-count{margin-left:0;width:100%;font-size:12px}
  .txgrid{grid-template-columns:1fr;gap:12px}
  .txcard{padding:16px 16px 12px}
  .txcard__desc{-webkit-line-clamp:3}
  .tax-note{flex-direction:column;gap:8px;padding:16px}
}