/**
 * components.css —— 第 3 层：组件
 * 只引用语义 token；这里的每一块都对应模板里真实存在的 class。
 */

/* ============================ 品牌 / LOGO ============================ */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 800;
  letter-spacing: .04em;
  font-size: var(--fs-lg);
}
.brand__mark { inline-size: 34px; block-size: 34px; }
.brand__name { line-height: 1; }
.brand__name small {
  display: block;
  font-size: .58em;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--text-muted);
  margin-block-start: 2px;
}

/* ============================ 图标 ============================ */
.ico {
  inline-size: 1.15em;
  block-size: 1.15em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================ 按钮 ============================ */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text-primary);
  --btn-bd: var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: 44px;                /* 触摸目标 ≥ 44px */
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--accent-brand);
  --btn-fg: var(--accent-on-brand);
  --btn-bd: transparent;
  box-shadow: var(--glow-brand);
}
.btn--primary:hover {
  --btn-bg: var(--accent-brand-hover);
  --btn-fg: var(--text-inverse);
}

.btn--ghost {
  --btn-bg: var(--bg-card);
  --btn-bd: var(--border-strong);
}
.btn--ghost:hover {
  --btn-bd: var(--accent-brand);
  color: var(--text-brand);
}

.btn--dark {
  --btn-bg: var(--text-primary);
  --btn-fg: var(--text-inverse);
  --btn-bd: transparent;
}
.btn--dark:hover { --btn-bg: var(--bg-deep-2); }

.btn--wa {
  --btn-bg: var(--accent-brand);
  --btn-fg: var(--accent-on-brand);
  --btn-bd: transparent;
}
.btn--wa:hover { --btn-bg: var(--accent-brand-hover); --btn-fg: var(--text-inverse); }

.btn--sm { min-block-size: 36px; padding: var(--s-2) var(--s-4); font-size: var(--fs-xs); }
.btn--lg { min-block-size: 54px; padding: var(--s-4) var(--s-6); font-size: var(--fs-base); }
.btn--block { inline-size: 100%; }

/* 只给键盘用户的隐藏文字 */
.btn__hint { position: absolute; clip-path: inset(50%); }

/* ============================ 徽章 ============================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid var(--border-subtle);
  background: var(--bg-sunken);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* 中性品控徽章（C24：取代已删除的 badge--own / badge--partner） */
.badge--qc {
  position: relative;
  background: var(--bg-card);
  color: var(--text-brand);
  border: 0;
  padding: 4px 12px;
}
.badge--qc::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--grad-iridescent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.badge--new { background: var(--bg-brand-soft); color: var(--text-brand); border-color: transparent; }
.badge--mto { background: var(--bg-inset); color: var(--text-secondary); }

/* ============================ 导航 ============================ */
.nav-desktop { display: none; }
@media (min-width: 1024px) { .nav-desktop { display: block; } }

.nav-desktop > ul {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-desktop li { margin: 0; }

.nav-desktop a,
.nav-desktop .mega > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--s-3) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;   /* 「About Us」这类两项词组不许折成两行 */
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
/* 类目变多后导航项也变多：1280px 以下收紧内边距，宁可窄一点也不折行 */
@media (max-width: 1279px) {
  .nav-desktop a,
  .nav-desktop .mega > summary {
    padding-inline: var(--s-2);
  }
}
.nav-desktop .mega > summary::-webkit-details-marker { display: none; }
.nav-desktop a:hover,
.nav-desktop .mega > summary:hover,
.nav-desktop [aria-current="page"] {
  background: var(--bg-sunken);
  color: var(--text-brand);
}
.nav-desktop .mega[open] > summary { background: var(--bg-sunken); color: var(--text-brand); }

/* 巨型菜单：用原生 <details>，无 JS 也能开 */
.mega { position: relative; }
.megapanel {
  /* 原来相对菜单项居中：面板 1240 宽挂在「Products」上会往左顶穿视口，
     左列类名直接被切掉半个字。改成相对视口居中，两侧留 16px 呼吸。 */
  position: fixed;
  inset-block-start: 80px;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: min(1240px, calc(100vw - 32px));
  padding: var(--s-5);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-header);
}
.megapanel::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 3px;
  border-start-start-radius: var(--r-md);
  border-start-end-radius: var(--r-md);
  background: var(--grad-iridescent);
}
.megapanel {
  /* 10 个一级品类 + 子类目在 1440×1000 下量到 827px，820 的旧上限会切掉底部
     入口行；这里放到 860，小屏再用视口高度收。 */
  max-block-size: min(calc(100vh - 96px), 860px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.megapanel__grid {
  display: grid;
  gap: var(--s-4);
  /* 品类区独占整行，导航链接与信任语统一沉到面板底部 ——
     9 个一级品类 + 25 个子类目如果和侧栏并排，右侧永远留一条空柱子。 */
  grid-template-columns: minmax(0, 1fr);
}
/* 面板右上角常驻入口：不占垂直空间，也不参与滚动 ——
   9 个一级品类 + 25 个子类目已经占满一屏，底部再压一行链接就会溢出。 */
.megapanel__foot {
  position: absolute;
  inset-block-start: var(--s-4);
  inset-inline-end: var(--s-5);
  display: flex;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  border: 0;
}
.megapanel__foot .mega__link {
  padding: 3px var(--s-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--fs-xs);
}
/* 品类列按 3 × 3 排：9 个一级品类的顺序正好是
   紧固件/喷雾/农机 → 园林/耗材/宠物 → 酒店/汽配/二手车 */
.mega__col.mega__col--cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3) var(--s-5);
  align-items: start;
}
.mega__col--cats > .mega__title { grid-column: 1 / -1; }
.mega__col { display: flex; flex-direction: column; gap: var(--s-1); }
.mega__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 0 var(--s-2);
  text-decoration: none;
}
.mega__link {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: 3px var(--s-2);
  border-radius: var(--r-xs);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.mega__link:hover { background: var(--bg-sunken); color: var(--text-brand); }
.mega__link small { color: var(--text-muted); font-size: var(--fs-xs); }

/* 超级菜单里的二级品类：小字一行，用「·」串起来随宽度自动换行。
   不再用两列 grid —— 列宽不足时名称会被 ellipsis 截断（…and Tul）。 */
.mega__group { display: grid; gap: 2px; }
.mega__sub {
  display: block;
  margin: 0 0 2px var(--s-2);
  font-size: .7rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.mega__sub a { color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.mega__sub a::after { content: "·"; margin: 0 .35em; color: var(--border-strong, #c9d1d9); }
.mega__sub a:last-child::after { content: none; margin: 0; }
.mega__sub a:hover { color: var(--text-brand); text-decoration: underline; }

/* 语言切换器（页头紧凑态） */
.lang { position: relative; }
.lang > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  list-style: none;
  background: var(--bg-card);
}
.lang > summary::-webkit-details-marker { display: none; }
.lang[open] > summary { border-color: var(--accent-brand); color: var(--text-brand); }

.langpanel {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  inline-size: min(380px, calc(100vw - 24px));
  max-block-size: min(70vh, 520px);
  overflow: auto;
  padding: var(--s-3);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-header);
}
.langpanel__head { display: flex; gap: var(--s-2); padding-block-end: var(--s-2); }
.langpanel__body { padding-block-start: var(--s-2); }
.langlist { margin: 0; padding: 0; list-style: none; }
.langlist__item { margin: 0; }
.langlist__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-block-size: 44px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-xs);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--fs-sm);
}
.langlist__link:hover { background: var(--bg-sunken); }
.langlist__code { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: .06em; }
.langlist__link.is-current,
.langlist__link[aria-current="true"] {
  background: var(--bg-brand-soft);
  color: var(--text-brand);
}
.empty { color: var(--text-muted); font-size: var(--fs-sm); padding: var(--s-3); }

/* 移动端抽屉：原生 <details>，无 JS 可开 */
.nav-mobile { display: block; }
@media (min-width: 1024px) { .nav-mobile { display: none; } }
.nav-mobile > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  list-style: none;
  cursor: pointer;
  background: var(--bg-card);
}
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-drawer {
  position: fixed;
  inset: 68px 0 auto 0;
  max-block-size: calc(100dvh - 68px);
  overflow: auto;
  padding: var(--s-4);
  background: var(--bg-base);
  border-block-end: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  z-index: var(--z-drawer);
}
.nav-drawer__group { padding-block: var(--s-3); border-block-end: 1px solid var(--border-subtle); }
.nav-drawer__group:last-child { border-block-end: 0; }
.nav-drawer__title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-block-end: var(--s-2);
}
.nav-drawer a {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-sm);
}
.nav-drawer a:hover { color: var(--text-brand); }

/* ============================ 卡片 ============================ */
.card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--s-5);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card--hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
/* 渐变描边（伪元素 + mask，不占布局） */
.card--prism::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--grad-iridescent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .55;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.card--prism:hover::after { opacity: 1; }

.card__title { font-size: var(--fs-md); margin-block-end: var(--s-2); }
.card__text { font-size: var(--fs-sm); color: var(--text-secondary); }
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 42px;
  block-size: 42px;
  border-radius: var(--r-sm);
  background: var(--grad-iridescent-soft);
  color: var(--text-brand);
  margin-block-end: var(--s-3);
}
.card__icon .ico { inline-size: 22px; block-size: 22px; }

/* 产品卡 */
.pcard {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  text-decoration: none;
  color: inherit;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.pcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.pcard__media {
  aspect-ratio: 8 / 5;
  background: var(--bg-inset);
  overflow: hidden;
}
.pcard__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.pcard__body { padding: 0 var(--s-4) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.pcard__code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  color: var(--text-muted);
}
.pcard__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-primary);
  /* 两行截断，卡片等高不塌 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard__meta {
  margin-block-start: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* 品类卡 */
.catcard {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-block-size: 168px;
  padding: var(--s-4);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--text-inverse);
  background: var(--bg-deep);
  isolation: isolate;
}
.catcard img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform var(--dur-slow) var(--ease);
}
.catcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-image);
}
.catcard:hover img { transform: scale(1.04); }
.catcard__name { font-size: var(--fs-md); font-weight: 700; }
.catcard__count { font-size: var(--fs-xs); opacity: .8; }
/* 两个 span 必须成块，否则名称与数量会挤在同一行 */
.catcard__name,
.catcard__count { display: block; }

/* ============================ 表单 ============================ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: var(--fs-sm); font-weight: 600; }
.field__hint { font-size: var(--fs-xs); color: var(--text-muted); }
.req { color: var(--text-brand); }

.input, .select, .textarea {
  inline-size: 100%;
  min-block-size: 44px;
  padding: var(--s-3);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  border-color: var(--accent-brand);
  box-shadow: 0 0 0 3px var(--bg-brand-soft);
}
.textarea { min-block-size: 120px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }

.chipset { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; border: 0; }
.chip { display: inline-flex; align-items: center; }
.chip input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.chip > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 36px;
  padding: 6px var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  background: var(--bg-card);
}
.chip input:checked + span {
  border-color: transparent;
  background: var(--accent-brand);
  color: var(--accent-on-brand);
}
.chip input:focus-visible + span { outline: 2px solid var(--accent-ring); outline-offset: 2px; }

/* 品类切换胶囊：链接形态（服务端渲染，爬虫可跟），与表单 chip 视觉一致 */
.chip--link {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  padding: 6px var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-card);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip--link:hover { border-color: var(--accent-brand); color: var(--text-primary); }
.chip--link[aria-current="page"] {
  border-color: transparent;
  background: var(--accent-brand);
  color: var(--accent-on-brand);
}

/* 品类页的二级品类墙：把「同系列还有什么」摆到买家眼前，形成类目之间的横向串联 */
.subcats {
  margin-block: 0 var(--s-4);
  display: grid;
  gap: var(--s-2);
}
.subcats__title {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.subcats__list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.subcats__n {
  margin-inline-start: 6px;
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  opacity: .55;
}
.subcats__up {
  border-style: dashed;
  background: transparent;
  gap: 4px;
}

/* 表单容器（Fluent Forms 会注入自己的 form，这里只约束外壳与兜底表单） */
.form { display: grid; gap: var(--s-4); }
.form__row { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 640px) { .form__row--3 { grid-template-columns: 1fr 1fr 1fr; } }
.form__foot { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.form__fallback {
  margin-block-start: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.form__note { font-size: var(--fs-xs); color: var(--text-muted); }
.form-status[data-state="error"] { color: var(--text-primary); }

/* ============================ 表格 ============================ */
.table-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.table { inline-size: 100%; font-size: var(--fs-sm); min-inline-size: 520px; }
.table caption {
  caption-side: top;
  text-align: start;
  padding: var(--s-3) var(--s-4);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  background: var(--bg-sunken);
  border-block-end: 1px solid var(--border-subtle);
}
.table th, .table td {
  padding: var(--s-3) var(--s-4);
  text-align: start;
  border-block-end: 1px solid var(--border-subtle);
  vertical-align: top;
}
.table thead th { background: var(--bg-sunken); font-weight: 700; white-space: nowrap; }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-block-end: 0; }
.table tbody th { font-weight: 600; color: var(--text-secondary); inline-size: 34%; }
.table--zebra tbody tr:nth-child(even) { background: var(--bg-sunken); }

/* 规格表（产品详情） */
.spec-table th { inline-size: 38%; }

/* ============================ 面包屑 ============================ */
.crumb { padding-block: var(--s-3); font-size: var(--fs-xs); color: var(--text-muted); }
.crumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.crumb__item { display: inline-flex; align-items: center; gap: var(--s-2); }
.crumb__item + .crumb__item::before { content: "/"; color: var(--border-strong); }
.crumb a { color: var(--text-secondary); text-decoration: none; }
.crumb a:hover { color: var(--text-brand); text-decoration: underline; }
.crumb [aria-current="page"] { color: var(--text-primary); }

/* ============================ 分页 ============================ */
.pagination { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; margin-block-start: var(--s-6); }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  background: var(--bg-card);
}
.pagination .current { background: var(--accent-brand); color: var(--accent-on-brand); border-color: transparent; font-weight: 700; }

/* ============================ 信任条（C17 改造后） ============================ */
.trust-strip {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust-strip__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
}
.trust-strip__item .ico { color: var(--text-brand); }
.trust-strip__item bdi { white-space: nowrap; }

/* ============================ CTA band ============================ */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--text-inverse);
  border-radius: var(--r-lg);
  padding: clamp(var(--s-5), 4vw, var(--s-7));
}
.cta-band__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity var(--dur-slow, 600ms) var(--ease, ease);
}
html[data-fx="L0"] .cta-band__scene,
html[data-fx="L1"] .cta-band__scene,
html[data-fx="L2"] .cta-band__scene { opacity: 1; }
.cta-band__scene canvas { display: block; }
.cta-band__inner { position: relative; z-index: 1; }
.cta-band::before {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -10%;
  inline-size: 60%;
  block-size: 180%;
  background: var(--grad-iridescent);
  opacity: .22;
  filter: blur(40px);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--text-inverse); }
.cta-band p { color: var(--text-inverse-dim); max-inline-size: 56ch; }

/* ============================ 浮动联系 ============================ */
/* 三个入口分两级：站内聊天是主 CTA（渐变色胶囊 + 文案），
   WhatsApp / 邮件是次级圆形图标。外贸询盘渠道不能替客户做选择，
   但视觉上必须有主次，否则三个一样大的按钮等于没有按钮。 */
.float-contact {
  position: fixed;
  inset-block-end: var(--s-4);
  inset-inline-end: var(--s-4);
  z-index: var(--z-float);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: flex-end;
}

.float-contact__row {
  display: flex;
  gap: var(--s-2);
}

.float-contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.float-contact__icon:hover {
  border-color: var(--accent-brand);
  color: var(--text-brand);
}
.float-contact__icon .ico { inline-size: 20px; block-size: 20px; }

/* 移动端：与底部询价条互斥（sticky bar 在时隐藏悬浮按钮，避免叠两层） */
@media (max-width: 719px) {
  .float-contact { inset-block-end: 84px; }
  .float-contact[data-merged="true"] { display: none; }
}

/* ============================ 站内聊天 ============================ */
/* 面板用 absolute 锚在启动按钮正上方（不是 fixed 贴视口底），
   这样移动端 .float-contact 的 inset-block-end 变化时面板会跟着走，不会错位。 */
.nv-chat {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.nv-chat__launcher {
  display: none; /* chat.js 加上 .is-ready 才出现，避免无 JS 时留下点不动的死按钮 */
  position: relative;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 52px;
  padding-inline: var(--s-5);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--grad-cta);
  color: var(--text-inverse);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-prism);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.nv-chat.is-ready .nv-chat__launcher { display: inline-flex; }
.nv-chat__launcher:hover { transform: translateY(-1px); filter: brightness(1.05); }
.nv-chat__launcher:active { transform: translateY(0); }
.nv-chat__launcher .ico { inline-size: 20px; block-size: 20px; }

/* 未读小圆点：面板关着时收到回复才亮，避免访客漏看 */
.nv-chat__dot {
  position: absolute;
  inset-block-start: -1px;
  inset-inline-end: -1px;
  inline-size: 11px;
  block-size: 11px;
  border-radius: 50%;
  background: var(--accent-alert);
  box-shadow: 0 0 0 2px var(--bg-base);
}

.nv-chat__panel {
  display: none;
  position: absolute;
  inset-block-end: calc(100% + var(--s-2));
  inset-inline-end: 0;
  inline-size: 336px;
  max-inline-size: calc(100vw - var(--s-4) * 2);
  block-size: min(520px, calc(100vh - 200px));
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.nv-chat[data-open="true"] .nv-chat__panel { display: flex; }
/* class 选择器会盖掉 [hidden] 的 UA display:none，这里显式压回去 */
.nv-chat__ident[hidden],
.nv-chat__composer[hidden] { display: none !important; }

.nv-chat__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--grad-iridescent-soft);
  border-block-end: 1px solid var(--border-subtle);
}
.nv-chat__head-txt { display: flex; flex-direction: column; gap: 3px; }
.nv-chat__title { font-size: var(--fs-base); line-height: 1.3; }
.nv-chat__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}
.nv-chat__status i {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--text-muted);
}
.nv-chat__status[data-state="online"] i {
  background: var(--accent-brand);
  box-shadow: 0 0 0 3px var(--bg-brand-soft);
}

.nv-chat__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.nv-chat__x:hover { background: var(--bg-inset); color: var(--text-primary); }

.nv-chat__log {
  flex: 1 1 auto;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-4);
  background: var(--bg-sunken);
}
.nv-chat__hello {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--text-muted);
}
.nv-chat__msg {
  max-inline-size: 84%;
  padding: var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
}
.nv-chat__msg--visitor {
  align-self: flex-start;
  border-start-start-radius: var(--r-xs);
}
.nv-chat__msg--staff {
  align-self: flex-end;
  background: var(--bg-brand-soft);
  border-color: transparent;
  border-start-end-radius: var(--r-xs);
}
.nv-chat__msg-body {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.nv-chat__msg-time {
  display: block;
  margin-block-start: 2px;
  font-size: 10px;
  color: var(--text-muted);
}

/* ==========================================================================
 * AI 销售助理
 *
 * 视觉原则：AI 的消息必须「一眼看出是机器」，但**不能显得廉价**。
 * 所以不用灰色系统字体、不用机器人图标，而是沿用品牌青蓝（--accent-brand）
 * 做一条左侧竖线 + 一枚小标签，跟老板本人发的实心气泡区分开。
 * ========================================================================== */

/* 面板顶部的身份声明条：这是合规信息，不是装饰，必须常驻可见 */
.nv-chat__ai-note {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 0;
  padding: 6px var(--s-4);
  border-block-end: 1px solid var(--border-subtle);
  background: var(--bg-brand-soft);
  color: var(--text-secondary);
  font-size: 10.5px;
  line-height: 1.45;
}
.nv-chat__ai-note .ico {
  inline-size: 12px;
  block-size: 12px;
  flex: 0 0 auto;
  margin-block-start: 1px;
  color: var(--accent-brand);
}

/* AI 气泡：和 staff 同侧，但白底 + 左侧竖线，视觉上「轻」一档 */
.nv-chat__msg--ai {
  background: var(--bg-card);
  border-color: var(--border-subtle);
  border-inline-start: 2px solid var(--accent-brand);
  border-start-end-radius: var(--r-md);
}
.nv-chat__msg-badge {
  display: inline-block;
  margin-block-end: 4px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--bg-brand-soft);
  color: var(--accent-brand);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* 「正在输入」：虚线圈 + 呼吸动画。这 3–8 秒是模型在生成，不提示就会被当成没人理 */
.nv-chat__msg--typing {
  display: flex;
  align-items: center;
  padding-block: 7px;
  background: var(--bg-card);
  border-style: dashed;
}
.nv-chat__typing {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  animation: nv-typing-pulse 1.4s ease-in-out infinite;
}
@keyframes nv-typing-pulse {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nv-chat__typing { animation: none; }
}

/* 需求确认单：访客和老板看的是同一份，所以排版要像单据，不像聊天 */
.nv-chat__rfq {
  align-self: stretch;
  margin-block-start: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--accent-brand);
  border-radius: var(--r-md);
  background: var(--bg-card);
}
.nv-chat__rfq strong {
  display: block;
  margin-block-end: 6px;
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  color: var(--accent-brand);
}
.nv-chat__rfq pre {
  margin: 0;
  /* 继承正文字体：需求单不是代码块，等宽字体在这里显得廉价 */
  font-family: inherit;
  font-size: var(--fs-xs);
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
}

.nv-chat__ident,
.nv-chat__composer {
  flex: 0 0 auto;
  border-block-start: 1px solid var(--border-subtle);
  background: var(--bg-card);
}
.nv-chat__ident {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
}
.nv-chat__input {
  min-block-size: 44px;
  padding-inline: var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-sm);
}
.nv-chat__input:focus,
.nv-chat__text:focus {
  outline: 2px solid var(--accent-ring);
  outline-offset: 1px;
  border-color: var(--accent-brand);
}
.nv-chat__hint,
.nv-chat__privacy {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-muted);
}
.nv-chat__privacy a { color: var(--text-brand); }

.nv-chat__composer {
  display: flex;
  align-items: flex-end;
  gap: var(--s-2);
  padding: var(--s-3);
}
.nv-chat__text {
  flex: 1 1 auto;
  min-block-size: 44px;
  max-block-size: 96px;
  padding: var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.45;
  resize: none;
}
.nv-chat__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent-brand);
  color: var(--accent-on-brand);
  cursor: pointer;
}
.nv-chat__send:hover { background: var(--accent-brand-hover); color: var(--text-inverse); }
.nv-chat__send .ico { inline-size: 18px; block-size: 18px; }

.nv-chat__foot {
  padding: 0 var(--s-4) var(--s-3);
  background: var(--bg-card);
}
.nv-chat__foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-brand);
  text-decoration: none;
}
.nv-chat__foot a:hover { text-decoration: underline; }
.nv-chat__foot .ico { inline-size: 15px; block-size: 15px; }

@media (max-width: 719px) {
  .nv-chat__panel {
    inline-size: calc(100vw - var(--s-4) * 2);
    block-size: min(74vh, 560px);
  }
}


/* ============================ FAQ 手风琴 ============================ */
.faq { display: grid; gap: var(--s-3); }
.acc {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.acc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-block-size: 52px;
  padding: var(--s-3) var(--s-4);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
  list-style: none;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after {
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-muted);
  transition: transform var(--dur) var(--ease);
}
.acc[open] > summary::after { transform: rotate(45deg); }
.acc[open] > summary { border-block-end: 1px solid var(--border-subtle); }
.acc__body { padding: var(--s-4); font-size: var(--fs-sm); color: var(--text-secondary); }

/* ============================ 图库 ============================ */
.gallery { display: grid; gap: var(--s-3); }
.gallery__main {
  aspect-ratio: 8 / 5;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-inset);
}
.gallery__main img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.gallery__thumbs { display: flex; gap: var(--s-2); overflow-x: auto; padding-block-end: 4px; }
/* 缩略图是 <button><img></button>：可键盘聚焦，aria-pressed 放在按钮上 */
.gallery__thumbs button {
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xs);
  background: var(--bg-card);
  line-height: 0;
  overflow: hidden;
  cursor: zoom-in;
}
.gallery__thumbs button:hover { border-color: var(--accent-brand); }
.gallery__thumbs button[aria-pressed="true"] {
  border-color: var(--accent-brand);
  box-shadow: 0 0 0 2px var(--bg-brand-soft);
}
.gallery__thumbs button:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.gallery__thumbs img {
  inline-size: 88px;
  block-size: 66px;
  object-fit: cover;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xs);
  cursor: zoom-in;
}
.gallery__thumbs img:hover { border-color: var(--accent-brand); }
.gallery__thumbs img[aria-pressed="true"] { border-color: var(--accent-brand); box-shadow: 0 0 0 2px var(--bg-brand-soft); }

/* ============================ 其他小件 ============================ */
.muted { color: var(--text-secondary); }
.small { font-size: var(--fs-sm); }
.mono { font-family: var(--font-mono); letter-spacing: .02em; }
.divider { block-size: 1px; background: var(--border-subtle); border: 0; margin-block: var(--s-5); }
.price-note { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; color: var(--text-brand); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-4); margin: 0; font-size: var(--fs-sm); }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; }

/* 主题自带的「无 JS」提示条 */
.noscript {
  padding: var(--s-3) var(--s-4);
  background: var(--bg-brand-soft);
  color: var(--text-brand);
  font-size: var(--fs-sm);
  text-align: center;
}

/* 后台登录态提示（方案 B 时给客户的自查提示，不输出给匿名访客） */
.preview-flag {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-skip);
  padding: 4px;
  background: var(--accent-ring);
  color: var(--bg-deep);
  font-size: var(--fs-xs);
  text-align: center;
}

/* ============================ 站内搜索框 ============================ */
/* 平时只是一个放大镜，聚焦才向右展开。纯 CSS（:focus-within），无 JS 依赖，
   键盘 Tab 进去自动展开，屏幕阅读器也有 sr-only 标签。 */
.hsearch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  transition: inline-size var(--dur) var(--ease), background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.hsearch:hover { background: var(--bg-sunken); }
.hsearch:focus-within {
  inline-size: 232px;
  background: var(--bg-card);
  border-color: var(--border-strong);
}
.hsearch__input {
  inline-size: 0;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-sm);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.hsearch:focus-within .hsearch__input {
  inline-size: 184px;
  padding-inline-start: var(--s-4);
  opacity: 1;
}
.hsearch__input:focus { outline: none; }
.hsearch__input::placeholder { color: var(--text-muted); }
.hsearch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 38px;
  block-size: 38px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.hsearch__btn:hover { color: var(--text-brand); }

/* 搜索结果页里的搜索框：常驻展开态，不再是图标 */
.searchbar-inline .hsearch {
  inline-size: 100%;
  max-inline-size: 520px;
  border-color: var(--border-strong);
  background: var(--bg-card);
}
.searchbar-inline .hsearch .hsearch__input {
  inline-size: 100%;
  padding-inline-start: var(--s-4);
  opacity: 1;
}

/* 搜索结果：产品与内容分组标题 */
.search-group {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-block: var(--s-6) var(--s-4);
  font-size: var(--fs-lg);
}

.search-list {
  display: grid;
  gap: var(--s-2);
}
.search-list__item {
  display: grid;
  gap: 2px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}
.search-list__item:hover { border-color: var(--accent-brand); }
.search-list__title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--fs-sm);
}
.search-list__text {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

/* ============================ 社交账号 ============================ */
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-start: var(--s-4);
}
.socials__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 38px;
  block-size: 38px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  color: inherit;
  opacity: .68;
  text-decoration: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.socials__item:hover { opacity: 1; transform: translateY(-1px); }
.socials__item .ico { inline-size: 18px; block-size: 18px; }

/* ============================ 首页弹窗（底部滑入条） ============================ */
/* 刻意不做居中遮罩：Google 对移动端侵入式插屏降权。
   这里是贴底的条状提示，不遮挡主内容，随手可关。 */
.popup {
  position: fixed;
  inset-inline: var(--s-4);
  inset-block-end: var(--s-4);
  z-index: var(--z-float);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  max-inline-size: 720px;
  margin-inline: auto;
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
  transform: translateY(calc(100% + var(--s-6)));
  opacity: 0;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.popup.is-in { transform: translateY(0); opacity: 1; }
.popup[hidden] { display: none !important; }

/* 弹窗出现时浮层整体上移避让。
   原来是整块 opacity:0 + 禁点击，但聊天面板也在这个容器里——
   客户正打字时弹窗一出来，对话窗口会凭空消失，看起来像掉线。
   改成上移一行的高度，两个浮层各占各的位置。 */
.popup.is-in ~ .float-contact {
  inset-block-end: calc(var(--s-4) + 78px);
}
/* 面板已打开时弹窗直接让位（JS 打开面板时也会收，这里双保险） */
body:has(.nv-chat[data-open="true"]) .popup { display: none !important; }

.popup__body { min-inline-size: 0; }
.popup__title {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.popup__text {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-secondary);
}
.popup__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 0 0 auto;
}
.popup__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.popup__close:hover { background: var(--bg-inset); color: var(--text-primary); }

@media (max-width: 719px) {
  .popup {
    inset-inline: var(--s-3);
    inset-block-end: var(--s-3);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
  }
  .popup__actions { inline-size: 100%; justify-content: space-between; }
}

/* ============================ 移动端页头 ============================ */
/*
 * 390px 上真实发生过的事：品牌标语把页头撑成 4 行高，
 * 汉堡按钮被挤出视口 —— 手机上根本没有导航入口。
 * 这里按重要性做减法，顺序是：品牌名 > 搜索 > 语言 > 菜单 > WhatsApp 文字。
 *   · 标语（小字副标题）只在 ≥1024px 显示；它是给大屏看的品牌说明，不是导航
 *   · 页头的 WhatsApp 按钮在移动端收起文字只留图标 —— 右下角还有悬浮入口，不丢渠道
 *   · 品牌名超长时省略，任何情况下都不许把菜单按钮顶出去
 */
@media (max-width: 1023px) {
  .site-header__bar {
    gap: var(--s-2);
    min-block-size: 60px;
  }
  .brand {
    min-inline-size: 0;
    font-size: var(--fs-md);
  }
  .brand__name {
    max-inline-size: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .brand__name small { display: none; }

  /* 页头 CTA 只留图标 */
  .site-header__bar > .btn--primary {
    padding-inline: var(--s-3);
    -webkit-padding-inline: var(--s-3);
  }
  .site-header__bar > .btn--primary .ico {
    inline-size: 20px;
    block-size: 20px;
  }
  .site-header__bar > .btn--primary {
    /* 文字节点用 font-size:0 收掉，图标自己带尺寸 */
    font-size: 0;
    gap: 0;
  }

  .nav-mobile { flex: 0 0 auto; }
}

/* 悬浮客服 + 底部弹窗会盖住页面最后一块内容，给正文留出让位高度 */
@media (max-width: 1023px) {
  .site-main { padding-block-end: var(--s-6); }
}

/* 超窄屏（≤480px）：品牌名不够位置时，先撤页头那颗重复的 WhatsApp 图标。
   右下角悬浮客服里一直有 WhatsApp，渠道没丢；而公司名被切成 "NUOW…" 是不能接受的。 */
@media (max-width: 480px) {
  .site-header__bar > .btn--primary { display: none; }
  .site-header__bar { gap: 6px; }
  .brand__name { max-inline-size: 52vw; }
}

/* 抽屉打开时收起悬浮客服与首页弹窗。
   悬浮层 z-index 高于抽屉，不收起来就会压住菜单最后一条 WhatsApp 按钮，点都点不到。
   用 :has 做条件样式；不支持的浏览器退化成现状，不影响菜单可用。 */
body:has(.nav-mobile[open]) .float-contact,
body:has(.nav-mobile[open]) .popup { display: none; }

/* ==========================================================================
   品类清单表（五金建材 12 大类 / 144 项）
   这一块替代了「空品类 → 无商品」的死胡同：用表格交付材质、规格、
   连接方式与核样要点，让买家在一屏内判断要不要询盘。
   ========================================================================== */

.catlist {
  margin-block: var(--s-7) var(--s-6);
  padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--border-subtle);
}

.catlist__head {
  max-inline-size: 68ch;
  margin-block-end: var(--s-5);
}

.catlist__head h2 {
  font-size: var(--fs-xl);
  margin-block-end: var(--s-2);
}

.catlist__lede {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  margin: 0;
}

.catlist__table {
  min-inline-size: 760px;
}

.catlist__table thead th {
  font-size: var(--fs-xs);
  letter-spacing: .02em;
}

.catlist__table th[scope="row"] {
  inline-size: 20%;
  vertical-align: top;
  padding-block: var(--s-3);
}

.catlist__table td {
  vertical-align: top;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-secondary);
  padding-block: var(--s-3);
}

.catlist__name {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}

.catlist__alt {
  display: block;
  margin-block-start: 3px;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-muted);
}

.catlist__notes {
  margin-block-start: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-sunken);
  border-radius: var(--r-md);
}

.catlist__notes dl {
  display: grid;
  gap: var(--s-3);
  margin: 0;
}

@media (min-width: 760px) {
  .catlist__notes dl { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
}

.catlist__notes div { min-inline-size: 0; }

.catlist__notes dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-block-end: 3px;
}

.catlist__notes dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.catlist__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block-start: var(--s-4);
}

.catlist__foot .muted {
  margin: 0;
  max-inline-size: 62ch;
}

/* ==========================================================================
 * 真人形象与主动招呼
 *
 * 用户反馈两件事：「AI 没有弹窗」「要模拟真人的外貌来沟通」。
 * 处理方式：面板头部换成真人头像 + 姓名 + 职务，另外加一张主动浮出的
 * 招呼卡（停留 9 秒后出现），点开即进对话。身份声明条保留 —— 用脸拉近距离，
 * 用声明守合规，两者不冲突。
 * ========================================================================== */

.nv-chat__ava {
  inline-size: 44px;
  block-size: 44px;
  flex: 0 0 auto;
  align-self: center;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
  border: 2px solid var(--bg-card);
  box-shadow: 0 2px 10px rgba(11, 27, 51, .16);
}

.nv-chat__head { align-items: center; }
.nv-chat__head-txt { gap: 1px; }
.nv-chat__role {
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--text-muted);
}
.nv-chat__status { margin-block-start: 2px; }

/* ---- 主动招呼卡 ---- */
.nv-chat__teaser {
  position: absolute;
  inset-block-end: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  inline-size: min(304px, calc(100vw - var(--s-4) * 2));
  padding: 12px 30px 12px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  animation: nvTeaserIn .34s var(--ease) both;
}
/* display:flex 会盖掉 [hidden] 的 UA 样式，必须显式写回 */
.nv-chat__teaser[hidden] { display: none; }
.nv-chat[data-open="true"] .nv-chat__teaser { display: none; }

.nv-chat__teaser-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
}
.nv-chat__teaser-ava {
  inline-size: 36px;
  block-size: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
}
.nv-chat__teaser-txt { display: flex; flex-direction: column; gap: 3px; }
.nv-chat__teaser-txt strong {
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--text-primary);
}
.nv-chat__teaser-txt > span {
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--text-secondary);
}

.nv-chat__teaser-x {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 22px;
  block-size: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.nv-chat__teaser-x:hover { background: var(--bg-mist-2); color: var(--text-primary); }
.nv-chat__teaser-x .ico { inline-size: 12px; block-size: 12px; }

@keyframes nvTeaserIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nv-chat__teaser { animation: none; }
}