/* ============================================================================
 * site.css —— 全站组件与布局样式
 *
 * 只消费 tokens.css 的语义层变量（--color-* / --text-* / --space-* …），
 * 不直接写死色值；修改观感请改 design-tokens.json 后重新生成。
 *
 * 类名清单来自 Views 全量扫描（148 个），按区块组织：
 *   base → 布局骨架 → 通用组件（按钮/徽章/表格/卡片）→ 首页各区块
 *   → 列表/详情页 → 交互页（搜索/询价/账户）→ 工具类
 * ========================================================================== */

/* ---------------------------------------------------------------- 基础 ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* .band 用 50vw 抵消容器内边距，而 50vw 含滚动条宽度 —— 会溢出几个像素，这里裁掉。
     用 clip 而非 hidden：clip 不建立滚动容器，页面顶部的 sticky header 依旧以视口为滚动口。 */
  overflow-x: clip;
}

body.page {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  color: var(--color-text);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-5) var(--container-gutter) var(--space-8);
}

h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  font-weight: var(--text-h1-weight);
  letter-spacing: var(--text-h1-tracking);
  color: var(--color-text-strong);
  margin: var(--space-2) 0 var(--space-3);
}

h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  font-weight: var(--text-h2-weight);
  letter-spacing: var(--text-h2-tracking);
  color: var(--color-text-strong);
  margin: var(--space-6) 0 var(--space-3);
}

h3 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  font-weight: var(--text-h3-weight);
  color: var(--color-text-strong);
  margin: var(--space-5) 0 var(--space-2);
}

p {
  margin: 0 0 var(--space-3);
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul,
ol {
  margin: 0 0 var(--space-3);
  padding-inline-start: var(--space-5);
}

code,
kbd {
  font-family: var(--font-mono);
  font-size: var(--text-mono-size);
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------ 骨架/工具 ---- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  top: -48px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-brand-primary-600);
  color: var(--color-neutral-0);
  border-radius: var(--radius-md);
  transition: top var(--duration-fast) var(--easing-standard);
}

.skip-link:focus {
  top: var(--space-2);
  text-decoration: none;
}

.mono,
.mono-lg {
  font-family: var(--font-mono);
}

.mono {
  font-size: var(--text-mono-size);
  font-weight: var(--text-mono-weight);
  line-height: var(--text-mono-line-height);
}

.mono-lg {
  font-size: var(--text-mono-lg-size);
  font-weight: var(--text-mono-lg-weight);
  line-height: var(--text-mono-lg-line-height);
  color: var(--color-text-strong);
}

.page-summary {
  max-width: var(--container-content-narrow);
  color: var(--color-text-muted);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  margin: 0 0 var(--space-5);
}

/* ------------------------------------------------------------ 布局原语 ---- */
/* 容器：内容收窄 + 左右留白。Header/Footer 用它；<main> 自带等价内联规则，
   于是 17 个既有模板一个都不用改。 */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

/*
 * .band —— 全幅铺底带（首页深色首屏/页脚书挡靠它）。
 * <main> 是「居中 + 带内边距」的容器，区块要铺满视口同时内容仍对齐容器，只能反向抵消：
 *   margin-inline:  calc(50% - 50vw)  → 左右各外扩到视口边缘
 *   padding-inline: calc(50vw - 50%)  → 再把内容推回容器内容框
 * 两式恒等，故任意视口宽度下带内内容与 .container 精确对齐（容器未达 max-width 时亦然）。
 */
.band {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  padding-block: var(--space-8);
}

.band--tight {
  padding-block: var(--space-6);
}

.band--sunken {
  background: var(--color-surface-sunken);
}

/* 深色带：中段数据区保持白底承担密度，首尾深色带只提供仪式感 —— 不用渐变 */
.band--dark {
  background: var(--color-brand-primary-700);
  color: var(--color-neutral-0);
}

.band--dark a {
  color: var(--color-brand-primary-100);
}

/* 区块 + 区块头：全站统一语法「标题 · 说明 · 右侧查看全部」 */
.section {
  margin-block: var(--space-7);
}

.section__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.section__title {
  margin: 0;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  font-weight: var(--text-h2-weight);
  letter-spacing: var(--text-h2-tracking);
  color: var(--color-text-strong);
}

.section__meta {
  font-size: var(--text-caption-size);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.section__more {
  margin-inline-start: auto;
  font-size: var(--text-small-size);
  white-space: nowrap;
}

/* 数字：等宽 + 表格数字 —— 工程师站里数字是主角，对齐比修饰重要 */
.stat__value {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--text-mono-lg-weight);
  font-variant-numeric: tabular-nums;
}

/*
 * .page-head —— 索引/详情页通用页头（band--sunken 浅凹带）。
 * 与首页深色 hero 同一「书挡」语法但更轻：H1 + 导语 + 数据统计条。
 * 面包屑可选放带内顶部（分类详情页用）。
 */
.page-head {
  margin-block: calc(-1 * var(--space-5)) var(--space-6);
  padding-block: var(--space-6) var(--space-7);
}

.page-head__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  font-weight: var(--text-h1-weight);
  letter-spacing: var(--text-h1-tracking);
  color: var(--color-text-strong);
}

.page-head__summary {
  max-width: var(--container-content-narrow);
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
}

/* .stat-strip —— 页头数据统计条：dt 小标签在上，dd mono 数字在下。
   数据优先原则：页面一开口先给规模，不靠形容词。 */
.stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-7);
  margin: 0;
}

.stat-strip dt {
  font-size: var(--text-caption-size);
  color: var(--color-text-muted);
}

.stat-strip dd {
  margin: var(--space-1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-h3-size);
  font-weight: var(--text-mono-lg-weight);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-strong);
}

/* chip：快捷入口/筛选标签的胶囊底座。颜色随上下文（深色带内由 .band--dark a 提亮）。 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--text-small-size);
  color: var(--color-text);
  background: var(--color-surface);
}

.chip:hover {
  border-color: var(--color-brand-primary-300);
  text-decoration: none;
  color: var(--color-link);
}

.band--dark .chip {
  border-color: var(--color-brand-primary-600);
  background: transparent;
  color: var(--color-brand-primary-100);
}

.band--dark .chip:hover {
  border-color: var(--color-brand-primary-100);
  color: var(--color-neutral-0);
}

/* --------------------------------------------------------------- 头部 ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* 网格命名区：桌面单行「品牌 · 导航 · 搜索 · 语言」，窄屏自动折成三行 */
.site-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 320px) auto;
  grid-template-areas: "brand nav search lang";
  align-items: center;
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  min-height: 64px;
  padding-block: var(--space-2);
}

@media (max-width: 899px) {
  .site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand lang"
      "search search"
      "nav nav";
  }
}

.site-header__brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.site-header__brand:hover {
  text-decoration: none;
}

/* 站点 Logo：RCL wwwroot/images/（页头正色 logo.svg / 页脚反白 logo-reverse.svg）。
   比例 4.395:1（viewBox 534.66×121.65），宽=高×4.395；尺寸与 _Layout 的宽高属性保持一致。 */
.site-header__logo {
  display: block;
  width: 132px;
  height: 30px;
}

.site-footer__logo {
  display: block;
  margin-bottom: var(--space-3);
  width: 123px;
  height: 28px;
}

.site-nav {
  grid-area: nav;
  min-width: 0;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.site-nav__list::-webkit-scrollbar {
  display: none;
}

.site-nav__list a {
  display: inline-block;
  padding-block: var(--space-2);
  color: var(--color-text-strong);
  font-size: var(--text-body-size);
  font-weight: var(--text-h4-weight);
  white-space: nowrap;
}

.site-nav__list a:hover {
  color: var(--color-brand-primary-600);
  text-decoration: none;
}

.site-header__search {
  grid-area: search;
  display: flex;
  align-items: center;
  padding-inline-start: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
}

.site-header__search:focus-within {
  border-color: var(--color-brand-primary-500);
  background: var(--color-surface);
  box-shadow: var(--shadow-focus);
}

.site-header__search-icon {
  flex: 0 0 auto;
  fill: var(--color-text-muted);
}

.site-header__search input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: var(--space-2);
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-small-size);
}

.site-header__search input[type="search"]:focus {
  outline: none;
}

.site-header__search button {
  flex: 0 0 auto;
  margin: 3px;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-brand-primary-600);
  color: var(--color-neutral-0);
  font-size: var(--text-small-size);
  font-weight: var(--text-h4-weight);
  cursor: pointer;
}

.site-header__search button:hover {
  background: var(--color-brand-primary-700);
}

/* 语言切换器：纯 <details>，静态导出无 JS 也能用 */
.lang-switch {
  grid-area: lang;
  position: relative;
  justify-self: end;
}

.lang-switch__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-strong);
  font-size: var(--text-small-size);
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.lang-switch__summary::-webkit-details-marker {
  display: none;
}

.lang-switch__summary:hover {
  border-color: var(--color-brand-primary-300);
}

.lang-switch__icon,
.lang-switch__chevron {
  fill: var(--color-text-muted);
}

.lang-switch__chevron {
  transition: transform var(--duration-fast) var(--easing-standard);
}

.lang-switch[open] .lang-switch__chevron {
  transform: rotate(180deg);
}

.lang-switch__list {
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline-end: 0;
  z-index: 60;
  min-width: 176px;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.lang-switch__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-small-size);
  white-space: nowrap;
}

.lang-switch__item:hover {
  background: var(--color-brand-primary-50);
  text-decoration: none;
}

.lang-switch__item[aria-current="true"] {
  color: var(--color-brand-primary-600);
  font-weight: var(--text-h4-weight);
}

.lang-switch__item svg {
  fill: var(--color-brand-primary-500);
}

/* --------------------------------------------------------------- 尾部 ---- */
.site-footer {
  margin-top: var(--space-8);
  background: var(--color-brand-primary-900);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-small-size);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  padding-block: var(--space-7) var(--space-6);
}

.site-footer__brand {
  max-width: 36ch;
}

.site-footer__blurb {
  margin: 0 0 var(--space-3);
  line-height: 1.75;
}

.site-footer__contact {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
}

.site-footer__contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.site-footer__contact-actions a {
  color: var(--color-neutral-0);
  font-weight: var(--text-h4-weight);
}

.site-footer__contact-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

.site-footer__contact-list > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

.site-footer__contact-list dt {
  color: rgba(255, 255, 255, 0.55);
}

.site-footer__contact-list a {
  color: var(--color-neutral-0);
}

.site-footer__contact-list a:hover {
  text-decoration: underline;
}

.site-footer__wechat {
  display: inline-block;
}

.site-footer__wechat summary {
  color: var(--color-neutral-0);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.site-footer__wechat summary::-webkit-details-marker {
  display: none;
}

.site-footer__wechat img {
  display: block;
  width: 120px;
  height: 120px;
  margin-top: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-neutral-0);
  object-fit: contain;
}

.site-footer__col-title {
  margin: 0 0 var(--space-3);
  color: var(--color-neutral-0);
  font-size: var(--text-caption-size);
  font-weight: var(--text-h4-weight);
  letter-spacing: 0.02em;
}

.site-footer__col ul {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__col a {
  color: inherit;
}

.site-footer__col a:hover {
  color: var(--color-neutral-0);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--text-caption-size);
}

.site-footer__legal p {
  margin: 0;
}

.site-footer__note {
  margin-inline-start: auto;
}

@media (max-width: 899px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .site-footer__brand {
    grid-column: 1 / -1;
    max-width: none;
  }
}

/* --------------------------------------------------------------- 按钮 ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  font-weight: var(--text-h4-weight);
  line-height: var(--text-body-lg-line-height);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard);
}

.btn:hover {
  text-decoration: none;
}

.btn--primary {
  background: var(--color-brand-primary-600);
  border-color: var(--color-brand-primary-600);
  color: var(--color-neutral-0);
}

.btn--primary:hover {
  background: var(--color-brand-primary-700);
  border-color: var(--color-brand-primary-700);
}

.btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-strong);
}

.btn--secondary:hover {
  border-color: var(--color-brand-primary-500);
  color: var(--color-brand-primary-600);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-link);
}

.btn--ghost:hover {
  background: var(--color-brand-primary-50);
}

/* ------------------------------------------------------------- 面包屑 ---- */
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

.breadcrumb li + li::before {
  content: "/";
  margin-inline-end: var(--space-2);
  color: var(--color-neutral-300);
}

.breadcrumb [aria-current="page"] {
  color: var(--color-text);
}

/* --------------------------------------------------------- 库存徽章 ---- */
.stock-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  white-space: nowrap;
}

.stock-badge svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
  flex: none;
}

.stock-badge.stock-in {
  color: var(--color-semantic-stock-in);
  background: var(--color-semantic-stock-in-bg);
}

.stock-badge.stock-future {
  color: #B57300;
  background: var(--color-semantic-stock-future-bg);
}

.stock-badge.stock-out {
  color: var(--color-semantic-stock-out);
  background: var(--color-semantic-stock-out-bg);
}

.stock-badge.stock-unknown {
  color: var(--color-text-muted);
  background: var(--color-neutral-100);
}

/* --------------------------------------------------------------- 表格 ---- */
/* 表格默认不换行（th 有 white-space: nowrap）⇒ 列一多必然比容器宽。
   ★ 窄屏绝不能让它把 <body> 撑出横向滚动条：表格自身变成可横向滚动的盒子
     （overscroll-behavior-inline: contain 防滚动传给整页，特宽表也拖不动页面）。
   ★ 只有 <table> 能拿滚动容器 —— <thead>/<tbody> 不是独立盒子，给它们 overflow 无效。 */
.table-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  /* 滚动条不叠在最后一行上（Firefox/Chromium 支持，不支持时留白无害） */
  scrollbar-gutter: stable;
}

/* 窄屏提示：表格可左右滑动看全（滚动容器本身是滚动祖先，这个提示条不会跟着横滚） */
.table-scroll__hint {
  margin: 0 0 var(--space-2);
  font-size: var(--text-caption-size);
  color: var(--color-text-muted);
}

.result-table,
.spec-table,
.price-tier-table,
.stock-board__table,
.download-index__table,
.inquiry-cart__table,
.wiki-detail__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small-size);
}

.result-table th,
.spec-table th,
.price-tier-table th,
.stock-board__table th,
.download-index__table th,
.inquiry-cart__table th,
.wiki-detail__table th {
  text-align: start;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-weight: var(--text-caption-weight);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.result-table td,
.spec-table td,
.price-tier-table td,
.stock-board__table td,
.download-index__table td,
.inquiry-cart__table td,
.wiki-detail__table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.result-table tbody tr:hover,
.stock-board__table tbody tr:hover {
  background: var(--color-surface-raised);
}

.result-table .mono,
.spec-table .mono,
.download-index__table .mono {
  color: var(--color-text-strong);
}

.price-amount {
  font-family: var(--font-mono);
  font-weight: var(--text-mono-weight);
  color: var(--color-text-strong);
  white-space: nowrap;
}

.price-inquiry,
.price-empty {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
}

.price-tier-table__note {
  margin-top: var(--space-2);
  font-size: var(--text-caption-size);
  color: var(--color-text-muted);
}

.spec-table {
  max-width: 720px;
}

.spec-table .value {
  font-family: var(--font-mono);
  color: var(--color-text-strong);
}

.unit {
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------- 文章卡片 ---- */
.article-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.article-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard);
}

.article-card:hover {
  border-color: var(--color-brand-primary-300);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.article-card__tag {
  align-self: flex-start;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-brand-primary-50);
  color: var(--color-brand-primary-700);
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
}

.article-card__title {
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  color: var(--color-text-strong);
  margin: 0;
}

.article-card__summary {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card__meta {
  margin-top: auto;
  font-size: var(--text-caption-size);
  color: var(--color-text-muted);
}

.article-card__image {
  display: none;
}

/* --------------------------------------------------------------- 首页 ---- */
/* hero：全幅深色带（.band--dark 铺底）。H1 是全页唯一大字，
   搜索框白底浮在深色上 —— Arrow 式的工业可信感。
   负 margin 抵消 main 的 padding-block-start，带面紧贴页头（书挡）。内容整体居中。 */
.hero {
  margin-block-start: calc(-1 * var(--space-5));
  padding-block: var(--space-7) var(--space-6);
  text-align: center;
  position: relative; /* canvas 粒子地球的定位基准 */
}

/* hero 星空背景：装饰 canvas 铺满 hero 底层，在粒子地球之下、内容之下。
   只加定位属性，不碰 .band 的 margin/padding 公式（band 底座禁全简写的纪律）。 */
.hero__stars,
.hero__globe {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero > :not(.hero__stars):not(.hero__globe) {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  /* 窄屏：地球让位于内容，只留淡淡的一角；星空同样压暗，避免小屏上糊成噪点 */
  .hero__globe { opacity: 0.45; }
  .hero__stars { opacity: 0.7; }
}

.hero__title {
  font-size: var(--text-display-size);
  line-height: var(--text-display-line-height);
  font-weight: var(--text-display-weight);
  letter-spacing: var(--text-display-tracking);
  color: var(--color-neutral-0);
  margin: 0 auto var(--space-3);
}

.hero__sub {
  font-size: var(--text-body-lg-size);
  color: var(--color-brand-primary-100);
  max-width: 640px;
  margin: 0 auto var(--space-5);
}

/* hero 大按钮：BOM 配单是主转化路径 —— 白底大按钮在深色带上是第二视觉焦点（H1 之后）。
   选择器带 a 提升特异度到 (0,1,1)：否则被前面的 .band--dark a 浅色链接规则压过，
   白底上渲染浅蓝文字（对比度灾难，实测踩坑）。 */
a.hero__bom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 56px;
  padding: var(--space-3) var(--space-7);
  margin: 0 auto var(--space-4);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  background: var(--color-neutral-0);
  color: var(--color-brand-primary-900);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.hero__bom-btn:hover {
  background: var(--color-brand-primary-50);
  color: var(--color-brand-primary-900);
  text-decoration: none;
}

.hero__bom-btn:focus-visible {
  outline: 2px solid var(--color-brand-primary-100);
  outline-offset: 2px;
}

.hero__quicklinks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding: 0;
}

/* 信任数字格：并入 hero 带底，border-top 与搜索区分隔；
   dd 大号 mono + tabular-nums —— 数字是主角。 */
.trust-bar {
  border-top: 1px solid var(--color-brand-primary-600);
  padding-top: var(--space-5);
}

.trust-bar__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
}

.trust-bar__item dt {
  font-size: var(--text-small-size);
  color: var(--color-brand-primary-100);
  margin: 0 0 var(--space-1);
}

.trust-bar__item dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-h2-size);
  font-weight: var(--text-mono-lg-weight);
  font-variant-numeric: tabular-nums;
  line-height: var(--text-h2-line-height);
  color: var(--color-neutral-0);
}

.stock-board {
  margin-bottom: var(--space-6);
}

.stock-board__table {
  width: 100%;
  /* ★ 不设 min-width：桌面上宽度够，让列自适应铺满；
     窄屏下由外层 .table-scroll 接管横向滚动，表格按内容撑开即可。 */
}

.stock-board__empty {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
}

/* ★ 一个无法用 CSS 表达的表格事实：表体被移出 <table>/<thead>/<tbody> 之后，
   列宽不再由浏览器按「整表」统一计算 ⇒ 各组列宽（尤其「型号」这种内容长短悬殊的列）
   会各自漂移，表头与数据对不上。唯一可靠的修法是按「最长型号」钉死该列宽度：
   继承固有宽度 = max-content，并给它一个下限。副作用：表格总宽随之变大（长型号那行本来就这么宽），
   < 768px 时交给 .table-scroll 横向滚动，≥ 768px 桌面容器够宽、无滚动条。
   实测最长的几个型号：CIR013106T01031819SCNP0406(31) / LSZH1.5MM-BK-500MT(19) / AT32F435ZGT7(12)。 */
@media (min-width: 768px) {
  .stock-board__table th:first-child,
  .stock-board__table td:first-child {
    width: 19ch;
  }
}

/* 服务能力：5 张卡（名称 + 一句描述），零图标零装饰 */
.services__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

/* 窄屏：两列 —— 与「按品类浏览」「代理与授权品牌」同一口径（minmax(0,1fr) 防长词撑破列） */
@media (max-width: 767px) {
  .services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }
}

.service-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 96px;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-strong);
}

/* ★ 必须写在 `.service-tile` 基础规则之后：同优先级下后写的赢，媒体查询不加权。 */
@media (max-width: 767px) {
  .service-tile {
    min-height: 0;
    padding: var(--space-3);
  }
}

.service-tile:hover {
  border-color: var(--color-brand-primary-300);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
}

.service-tile__name {
  font-weight: var(--text-h4-weight);
}

.service-tile__desc {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  line-height: var(--text-body-line-height);
}

/* 优势库存：图片卡片墙 —— 图片 + 型号 + 更新时间。
   ★ 原站这栏把图裁成 114×114 硬拉伸，而遗留原图实测宽中位仅 144px、部分不足 100px
     ⇒ 这里用 object-fit: contain + 固定图框：**只按原尺寸以内显示，绝不放大**（放大只会糊）。
     图框背景用 sunken，让尺寸不一的图在网格里仍有整齐的视觉边界。 */
.featured-stock__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 窄屏：钉死两列 —— 与另外三栏（按品类浏览/代理品牌/服务能力）同一口径。
   不钉死的话 minmax(150px,1fr) 在 320px 视口下算不出两列（2×150+12 = 312 > 288 可用宽）
   ⇒ 退化成单列，只有这一栏与其余三栏不一致。 */
@media (max-width: 767px) {
  .featured-stock__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .featured-card {
    padding: var(--space-2);
  }

  .featured-card__img {
    height: 72px;
  }
}

.featured-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard);
}

.featured-card:hover {
  border-color: var(--color-brand-primary-300);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.featured-card__img {
  width: 100%;
  height: 96px;
  object-fit: contain;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
}

.featured-card__pn {
  font-size: var(--text-small-size);
  font-weight: var(--text-h4-weight);
  color: var(--color-text-strong);
  /* 型号长短差异极大（GA10K3MBD1 ↔ CIR013106T01031819SCNP0406）：
     超出两行截断，避免长型号把卡片撑成不同高度（网格会跟着歪） */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.featured-card__date {
  margin-top: auto;
  font-size: var(--text-caption-size);
  color: var(--color-text-muted);
}

/* 品类/品牌：tile 网格 —— 名称 + mono 型号数，悬停描边（不做假图标） */
.category-nav__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ★ 栅格项（<li>）与卡片本身也要能收缩：grid/flex 项默认 min-width:auto，
   长词卡片会把它顶宽（列轨道用了 minmax(0,…) 挡住轨道，但 <li> 自己会溢出）。
   与 .brand-tile__name 的 overflow-wrap 配套，缺一不可。 */
.category-nav__grid > li,
.brand-wall__grid > li,
.services__grid > li,
.featured-stock__grid > li {
  min-width: 0;
}

.category-tile,
.brand-tile,
.brand-wall__tile,
.service-tile,
.featured-card {
  min-width: 0;
}

/* 窄屏：两列 —— 与「服务能力」「优势库存」同一口径，避免单列全宽、右侧大量空白 */
@media (max-width: 767px) {
  .category-nav__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .category-tile {
    padding: var(--space-3);
  }
}

/* ★ 品牌墙的窄屏覆盖**必须写在 `.brand-wall__grid` 基础规则之后**（见下方 1285 行附近）。
   媒体查询本身**不增加优先级**：选择器同为单类时，后出现的基础规则会反过来盖掉
   写在它前面的窄屏规则 —— 这里曾经踩过：把 brand-wall 的覆盖和 category 写在一起，
   结果 category 生效（基础规则在前）、brand 静默失效（基础规则在后，仍是 358px 单列）。 */

/* 品牌索引：首字母分组 */
.brand-index__group {
  margin-bottom: var(--space-5);
}

.brand-index__group h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-h3-size);
  color: var(--color-text-muted);
}

.brand-index__group .category-nav__grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* 品牌索引/名录页在窄屏也走两列（与首页品牌墙同一口径） */
@media (max-width: 767px) {
  .brand-index__group .category-nav__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 品牌详情/搜索引导：品类 chip 列表（与相关品类同一形态） */
.brand-detail__categories,
.search-start__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-tile,
.brand-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-strong);
}

.category-tile:hover,
.brand-tile:hover {
  border-color: var(--color-brand-primary-300);
  text-decoration: none;
}

.category-tile__name,
.brand-tile__name {
  font-weight: var(--text-h4-weight);
  /* ★ 品牌/品类名是「不可断的长词」（MORS SMITT / AB CONNECTORS / CONNECTORS…）：
     flex 子项默认 min-width:auto，长词不肯断 ⇒ 撑破 tile（实测 /manufacturers/ 390px 下
     tile 173px、名字要 183px），逐级把 li 顶到 200px、栅格 383px，最终整页 473px 横滚。
     flex 项要允许被压缩，必须显式 min-width:0；再把长词按任意位置断行。 */
  min-width: 0;
  overflow-wrap: anywhere;
}

.category-tile__count,
.brand-tile__count {
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
  font-variant-numeric: tabular-nums;
}

.brand-wall__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

/* 窄屏：两列 —— 与「按品类浏览」「服务能力」同一口径。
   ★ 位置强制：必须在上面这条基础规则**之后**（同优先级时后写的赢）。 */
@media (max-width: 767px) {
  .brand-wall__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .brand-wall__tile {
    padding: var(--space-3);
    min-height: 0;
  }

  .brand-wall__logo {
    max-height: 34px;
  }

  .brand-wall__name {
    font-size: var(--text-caption-size);
  }
}

.brand-wall__grid a {
  color: var(--color-text-strong);
}

/* 品牌墙首字母：chip 形态可点（复用 .chip 底座，单字符） */
.brand-wall__letters {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  padding: 0;
}

.brand-wall__letters a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-small-size);
  color: var(--color-text);
}

.brand-wall__letters a:hover {
  border-color: var(--color-brand-primary-300);
  color: var(--color-link);
  text-decoration: none;
}

/* 品牌墙：Logo 网格。定高容器 ⇒ 有 Logo 与无 Logo 的格子不会把网格撑歪；
   无 Logo 时回落纯文字，绝不渲染坏图（遗留 /UpLoadFiles 路径已 404）。 */
.brand-wall__item {
  margin: 0;
}

.brand-wall__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--space-7);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-strong);
  text-align: center;
}

.brand-wall__tile:hover {
  border-color: var(--color-brand-primary-300);
  text-decoration: none;
}

/* 授权 Logo 多为横版、长宽比不一 —— 统一高度 + contain，避免大小厂商视觉权重失衡 */
.brand-wall__logo {
  max-width: 100%;
  max-height: 44px;
  height: auto;
  object-fit: contain;
}

.brand-wall__name {
  font-size: var(--text-small-size);
  font-weight: var(--text-h4-weight);
  letter-spacing: 0.02em;
}

.brand-wall__empty {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
}

/* 名录页：带 Logo 的即代理与授权品牌（标记类名便于后续加提示，不改视觉层级） */
.brand-tile__logo {
  align-self: flex-start;
  max-width: 100%;
  max-height: 34px;
  height: auto;
  margin-bottom: var(--space-1);
  object-fit: contain;
}

/* 品牌详情页头 Logo —— 标题之前，作视觉锚点 */
.page-head__brand-logo {
  display: block;
  max-width: 100%;
  max-height: 52px;
  height: auto;
  margin-bottom: var(--space-3);
  object-fit: contain;
}

/* 资讯：主次布局 —— 左主推卡，右紧凑列表 */
.home-news__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 899px) {
  .home-news__layout {
    grid-template-columns: 1fr;
  }
}

.home-news__featured {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.home-news__featured-title {
  margin: var(--space-2) 0 var(--space-2);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  font-weight: var(--text-h3-weight);
}

.home-news__featured-summary {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
}

.home-news__featured time,
.home-news__featured .article-card__tag {
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
}

.home-news__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.home-news__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-strong);
}

.home-news__list li:last-child .home-news__item {
  border-bottom: 0;
}

.home-news__item:hover {
  color: var(--color-link);
  text-decoration: none;
}

.home-news__item-title {
  min-width: 0;
}

.home-news__item-date {
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
  font-variant-numeric: tabular-nums;
}

/* 底部转化：沉底全幅带（去渐变 —— 零装饰原则）；左文案右双 CTA。
   负 margin 抵消 main 的 padding-block-end，带面紧贴页脚（书挡）。
   ★ 只许用 margin-block：margin 简写会把 .band 的 margin-inline
   （全幅外扩）覆盖成 0，而 .band 的 padding-inline（内缩）仍在 ——
   结果内容宽 = 2×容器宽 − 100vw，视口越宽内容越窄直至塌成 min-content。 */
.cta-band {
  margin-block: var(--space-8) calc(-1 * var(--space-8));
}

.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-5);
  flex-wrap: wrap;
}

/* 文本列弹性伸展：吃掉按钮之外的整行富余 —— 否则 p 被封顶后
   中窄视口/大字体下文字列被压窄、按钮掉行，扁带里挤成多行。 */
.cta-band__text {
  flex: 1 1 420px;
  min-width: 0;
}

.cta-band__text h2 {
  margin: 0 0 var(--space-2);
}

.cta-band__text p {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 720px;
}

.cta-band__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* 堆叠档（按钮落到文案下方）：左对齐成为有意形态，而不是"掉下来"。
   ★ 必须同时改 justify-content：桌面端 space-between 在 column 下会把
     文字块顶到带上缘、按钮推到底缘，中间产生大片真空（移动端截图可见）。
     改为 flex-start + 显式 gap，让按钮紧跟文案下方。 */
@media (max-width: 767px) {
  .cta-band__inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-4);
  }

  .cta-band__text {
    flex: 0 0 auto;
  }
}

/* ----------------------------------------------------- 索引/列表通用 ---- */
.wiki-index__list,
.services {
  margin-bottom: var(--space-5);
}

.letter-nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
}

.letter-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}

.letter-nav a:hover {
  border-color: var(--color-brand-primary-500);
  text-decoration: none;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

.pagination__pages {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
}

.pagination__pages a,
.pagination__pages [aria-current="page"],
.pagination__pages .page-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}

.pagination__pages [aria-current="page"],
.pagination__pages .page-current {
  background: var(--color-brand-primary-600);
  border-color: var(--color-brand-primary-600);
  color: var(--color-neutral-0);
}

.pagination__status {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
}

/* ----------------------------------------------------------- 产品详情 ---- */
.part {
  max-width: 960px;
}

.part-identity__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.part-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  list-style: none;
}

.part-facts strong {
  color: var(--color-text-strong);
}

.part-availability {
  margin: var(--space-4) 0;
}

.part-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.part-brand__logo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
}

.part-brand__name {
  font-weight: var(--text-h4-weight);
  color: var(--color-text-strong);
}

/* 产品图 —— 数据源是原站遗留上传目录（Products.ImgUrl）。
   原图很小（抽样宽中位 144px），所以：
   ① 图本身只约束上限、绝不放大 —— 把小图拉大只会更糊；
   ② 固定一个「图位」尺寸并在其中居中，使小图与大图的版式占位一致。 */
.part-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(280px, 100%);
  min-height: 160px;
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.part-media__img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.part-cta {
  /* 主按钮包在 <form> 里、其余是 <a> —— form 默认块级会独占一行导致断成两截，
     这里让整条 CTA 一行 flex 排列，form 只是其中一个收缩为内容宽的条目。 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
}

.part-cta__form {
  display: flex;
  margin: 0;
}

/* 产品详情两栏：左侧内容 + 右侧 sticky 联系卡片（仅 PC 端） */
.part-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--space-7);
  align-items: start;
}

.part-sidebar {
  position: sticky;
  top: var(--space-5);
}

/* 详情页联系卡片 —— 参考旧站右侧悬浮“联系我们”面板 */
.contact-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.contact-card__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-brand-primary-600);
  color: var(--color-neutral-0);
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  line-height: 1.2;
}

.contact-card__sub {
  font-size: var(--text-caption-size);
  font-weight: var(--text-body-weight);
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.contact-card__body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  font-size: var(--text-small-size);
}

.contact-card__item {
  display: grid;
  gap: 2px;
}

.contact-card__item--block {
  gap: var(--space-1);
}

.contact-card__label {
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
}

.contact-card__value {
  color: var(--color-brand-primary-600);
  font-weight: var(--text-h4-weight);
  word-break: break-all;
}

.contact-card__value:hover {
  text-decoration: underline;
}

.contact-card__qr {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding-top: var(--space-2);
  text-align: center;
}

.contact-card__qr img {
  width: 160px;
  height: 160px;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  object-fit: contain;
}

.contact-card__qr p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
  line-height: 1.4;
}

@media (max-width: 991px) {
  .part-layout {
    grid-template-columns: 1fr;
  }

  .part-sidebar {
    display: none;
  }
}

/* ------------------------------------------------------------- 搜索 ---- */
.search-results__count {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  margin-bottom: var(--space-4);
}

.suggestion-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
}

.suggestion-list__item .mono {
  display: inline-flex;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-raised);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.filters__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-small-size);
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 180px;
}

.filters__group legend {
  font-size: var(--text-caption-size);
  color: var(--color-text-muted);
  padding: 0;
  margin-bottom: var(--space-1);
}

.filters__group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.filters__group label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  color: var(--color-text);
}

/* 已选条件：chip 形态可点移除（× 有 visually-hidden 文案兜底） */
.filters__applied {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}

.filters__applied a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-brand-primary-200);
  border-radius: 999px;
  background: var(--color-brand-primary-50);
  font-size: var(--text-small-size);
  color: var(--color-brand-primary-700);
}

.filters__applied a:hover {
  text-decoration: none;
  border-color: var(--color-brand-primary-300);
}

/* --------------------------------------------------------- 空状态 ---- */
.empty-state {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  margin-bottom: var(--space-5);
}

.empty-state__title {
  font-size: var(--text-h3-size);
  color: var(--color-text-strong);
  margin-bottom: var(--space-2);
}

.empty-state__lead {
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto var(--space-4);
}

.empty-state__suggestions {
  text-align: start;
  display: inline-block;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* ------------------------------------------------------------- FAQ ---- */
.faq__list {
  max-width: var(--container-content-narrow);
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq__item {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.faq__item h3,
.faq__item h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-h4-size);
}

.faq__answer {
  color: var(--color-text);
  white-space: pre-line;
}

/* ------------------------------------------------------- 交互页表单 ---- */
.sourcing-form,
.inquiry-cart__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 640px;
}

.sourcing-form label,
.inquiry-cart__form label {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

.sourcing-form input,
.sourcing-form textarea,
.inquiry-cart__form input,
.inquiry-cart__form textarea {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-body-size);
  font-family: var(--font-sans);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  width: 100%;
}

.inquiry-cart__hint {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
}

/* 清空询价单 —— 次要操作，贴在主表单下方左对齐 */
.inquiry-cart__clear {
  margin-block-start: var(--space-3);
  max-width: 640px;
}

/* 快速询价（/inquiry/quote、/inquiry/bom）—— 表单形态与 .sourcing-form 共用 */
.inquiry-quote__context {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-inline-start: 3px solid var(--color-brand-primary-300);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
}

.inquiry-quote__error {
  margin: 0;
  color: var(--color-semantic-danger);
  font-size: var(--text-small-size);
}

.inquiry-quote__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
}

.inquiry-quote__done {
  max-width: 640px;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
}

.inquiry-quote__done h2 {
  margin-top: 0;
}

.account__panel {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

/* -------------------------------------------------------- 新闻/百科详情 -- */
.news-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  margin-bottom: var(--space-4);
}

.news-detail__tag {
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-brand-primary-50);
  color: var(--color-brand-primary-700);
  font-size: var(--text-caption-size);
}

.news-detail__body {
  max-width: var(--container-content-narrow);
  font-size: var(--text-body-lg-size);
  line-height: 1.8;
}

.news-detail__body h2 {
  font-size: var(--text-h3-size);
}

.news-detail__related {
  margin-top: var(--space-6);
}

.wiki-detail__selection,
.wiki-detail__params,
.wiki-detail__parts,
.wiki-detail__related {
  margin: var(--space-5) 0;
}

/* ----------------------------------------------------------- 关于/站点地图 -- */
.about__facts,
.about__qualifications,
.about__contact-list {
  color: var(--color-text);
}

.about__contact {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-lg);
}

.about__contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.about__contact-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.about__contact-list > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

.about__contact-list dt {
  color: var(--color-text-muted);
}

.about__contact-list a {
  color: var(--color-brand-primary-600);
}

.about__contact-list a:hover {
  text-decoration: underline;
}

.about__wechat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.about__wechat p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
}

.about__wechat img {
  width: 160px;
  height: 160px;
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  object-fit: contain;
}

@media (max-width: 767px) {
  .about__contact-grid {
    grid-template-columns: 1fr;
  }
}

.html-sitemap__section {
  margin-bottom: var(--space-5);
}

.html-sitemap__section ul {
  columns: 3;
  column-gap: var(--space-6);
  font-size: var(--text-small-size);
}

@media (max-width: 767px) {
  .html-sitemap__section ul {
    columns: 1;
  }

  .hero__title {
    font-size: var(--text-h1-size);
  }

  main {
    padding: var(--space-4) var(--container-gutter-mobile) var(--space-7);
  }
}

/* ---------------------------------------------------------- 分类 SEO ---- */
.category-seo {
  max-width: var(--container-content-narrow);
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  margin-top: var(--space-6);
}

.category-seo__related {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin-top: var(--space-3);
  padding: 0;
}

.category-detail__intro {
  max-width: var(--container-content-narrow);
  color: var(--color-text);
}

.category-results {
  margin-bottom: var(--space-5);
}