/* =========================================================
   HSYWIRE brand.css — 品牌令牌 + 修正层（最后一个加载，压过旧规则）
   用途：
     1) 定义唯一一套设计令牌（颜色 / 字号 / 字距 / 圆角）——所有改动只看这里
     2) 修正旧站遗留问题：Tailwind 默认灰、hero 对比度、卡片裁图、页脚对比度、
        按钮三套并行、AI 味动效（玻璃态/渐变/旋转/上浮）
   维护规则：新增组件先在这里取令牌，不要写死颜色和字号。
   ========================================================= */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 品牌色（唯一来源：老板站基线） */
  --color-primary: #003666;
  --color-secondary: #00509e;

  /* 品牌中性阶：从 navy 派生（带极轻微蓝相），替换 Tailwind 默认灰 */
  --brand-n-050: #f7f8fa;
  --brand-n-100: #eef0f4;
  --brand-n-200: #dde1e7;
  --brand-n-300: #c3c9d3;
  --brand-n-400: #9aa3b0;
  --brand-n-500: #6b7480;
  --brand-n-600: #4c5561;
  --brand-n-800: #1e2734;
  --brand-ink: #16233a;          /* 页脚底色：由 #003666 压暗派生 */

  /* 旧的 surface / border 统一到中性阶 */
  --color-surface: var(--brand-n-050);
  --color-border: var(--brand-n-200);
  --color-text: #2b3340;
  --color-text-light: var(--brand-n-500);

  /* 页脚（深色区）*/
  --color-footer-bg: var(--brand-ink);
  --color-footer-text: rgba(255, 255, 255, 0.72);
  --color-footer-link: rgba(255, 255, 255, 0.72);
  --color-footer-head: #e6ecf4;

  /* 字号阶梯（8 级，不再有 35 种） */
  --fs-2xs: 0.75rem;    /* 12px 小标签 */
  --fs-xs: 0.8125rem;   /* 13px 表头/按钮 */
  --fs-sm: 0.875rem;    /* 14px 次要正文 */
  --fs-md: 1rem;        /* 16px 正文 */
  --fs-lg: 1.25rem;     /* 20px 卡片标题 */
  --fs-xl: 1.75rem;     /* 28px 区块标题 */
  --fs-2xl: 2.25rem;    /* 36px 页面标题 */
  --fs-3xl: 2.75rem;    /* 44px 首屏标题 */

  /* 字距阶梯（3 级） */
  --ls-label: 0.12em;   /* 大写小标签统一用它 */
  --ls-body: 0;
  --ls-head: -0.01em;

  /* 字重阶梯（3 级） */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;

  /* 圆角：工业风全站直角 */
  --radius: 0;

  --heading-lh: 1.15;
  --body-lh: 1.65;
}

/* ---------- 2. 排版基线 ---------- */
h1, h2, h3, h4 { line-height: var(--heading-lh); letter-spacing: var(--ls-head); }
p, li { line-height: var(--body-lh); }

/* 大写小标签统一一种字距（原来有 12 种） */
.subgroup-title,
.spec-summary-title,
.spec-matrix-table thead th,
.fact-label,
.rfq-form label,
.cat-count,
.footer h2,
.footer h3,
.footer h4 {
  letter-spacing: var(--ls-label);
}
/* 页面主标题 */
.cat-hero h1 {
  font-size: clamp(1.9rem, 3.2vw, var(--fs-2xl));
  font-weight: var(--fw-light);
  line-height: var(--heading-lh);
  margin-bottom: 0.6rem;
}
.product-info h1 {
  font-size: clamp(1.6rem, 2.6vw, var(--fs-xl));
  font-weight: var(--fw-light);
  line-height: var(--heading-lh);
}
.section-title { font-size: var(--fs-xl); font-weight: var(--fw-light); line-height: var(--heading-lh); }
/* 区块 h2 与 h1 拉开层级：h2 用 400 而非 300，避免只差 4px 的"看不清层级" */
.cta-band h2, .related-section .section-title { font-weight: var(--fw-normal); }

/* 分组标题降级为"标签"，不再和卡片标题抢层级 */
.subgroup-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-primary);
  border-bottom: 1px solid var(--brand-n-200);
  padding-bottom: 0.55rem;
  margin-bottom: 1.4rem;
}

/* ---------- 3. 页头 / 导航 ---------- */
/* 旧注释说 Products 是第 2 项，实际已是第 1 项 —— 这个左偏 1.5rem 让整个菜单偏离内容中心 */
.nav-menu .nav-has-dropdown { margin-left: 0; }

/* Products 触发器改成按钮（原来是 href="#" 死链）：样式对齐其它导航项 */
.nav-dropdown-trigger {
  background: none;
  border: 0;
  padding: 0.3rem 0;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: var(--fw-normal);
  letter-spacing: 0.02em;
  color: var(--color-text);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  position: relative;
  z-index: 1004;
}
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger[aria-expanded="true"] { color: var(--color-primary); }
.nav-dropdown-trigger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* 下拉面板：直角 + 品牌中性描边 */
.nav-dropdown,
.nav-dropdown.nav-dropdown-horizontal {
  border-radius: var(--radius);
  border: 1px solid var(--brand-n-200);
  box-shadow: 0 18px 40px rgba(0, 31, 61, 0.12);
}
/* 键盘可达：由内联脚本的 focusin → show() 负责，这里不再用 CSS 覆盖。
   （原来的 :focus-within 规则会压过内联样式，造成"ARIA 说关了、面板还看得见"） */
/* 四列标题等高：把下划线画在伪元素上，避免"标题两行 → 整列下沉" */
.nav-dropdown .dropdown-header {
  height: 2.6em;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 0;
  position: relative;
  padding-bottom: 0;
  margin-bottom: 0.6rem;
}
.nav-dropdown .dropdown-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-primary);
}
/* 列分隔线原来用 #edf2f7（对比度 1.07:1，等于看不见）——要么做实，要么去掉 */
.dropdown-col { border-right: 1px solid var(--brand-n-100); }
.dropdown-col:last-child { border-right: 0; }

/* ---------- 4. 汉堡按钮（≤1024px 唯一导航入口，原来只有 4×4px） ---------- */
.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-primary);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1024px) {
  .hamburger { display: flex; }
}

/* ---------- 5. 首页 hero ---------- */
/* 老板要求：加一层**很浅的罩色**让画面柔和、四张照片色调统一。
   用极淡的品牌蓝（像一次统一的调色，不是压对比度的厚罩），照片仍然明亮。 */
.hero-half::before {
  background: linear-gradient(180deg,
      rgba(0, 54, 102, 0.10) 0%,
      rgba(0, 54, 102, 0.12) 45%,
      rgba(0, 54, 102, 0.18) 100%);
  transition: background 0.3s ease;
}
.hero-half:hover::before {
  background: linear-gradient(180deg,
      rgba(0, 54, 102, 0.06) 0%,
      rgba(0, 54, 102, 0.08) 45%,
      rgba(0, 54, 102, 0.13) 100%);
}
/* 内容垂直居中（老板要求），靠固定高度的标题/正文块维持四格对齐；
   整体上移到照片的统一亮区（照片上部是窗光、下部是深色物件） */
.hero-half-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  max-width: none;
  padding: 2rem 1.4rem;
  transform: translateY(-14%);
}
.hero-half-content::before {
  content: none;
}
.hero-half-content {
  color: var(--color-primary);
}
.hero-half-content h1,
.hero-half-content h2 {
  color: var(--color-primary);
  /* 光晕降到几乎看不见（之前太明显的白边） */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(255, 255, 255, 0.35);
}
.hero-half-content p {
  color: var(--color-primary);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 5px rgba(255, 255, 255, 0.35);
}
.hero-half-content h1,
.hero-half-content h2 {
  font-weight: var(--fw-medium);
  min-height: 2.5em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 0.8rem;
}
.hero-half-content p {
  min-height: 4.2em;
  margin-bottom: 1.5rem;
}
.hero-half-content .btn-ghost {
  width: 100%;
  max-width: 250px;
  margin: 0 auto;
  white-space: nowrap;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  /* 轻微白底：小面积、只提亮不压暗，保证按钮文字对比稳定 */
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  color: var(--color-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  padding: 0.75rem 1rem;
}
.hero-half:hover .btn-ghost {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: none;
}
.hero-half:hover .hero-half-content { transform: none; }   /* 去掉上浮动效 */

/* ---------- 6. 卡片：图片不裁切、按钮同边、去上浮 ---------- */
.product-card,
.related-card { border-radius: var(--radius); }

.product-card-img {
  aspect-ratio: 1 / 1;
  height: auto;          /* 压过旧站写死的 190px（那让声明变成 1.76:1） */
  padding: 14px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--brand-n-100);
}
.product-card-img img {
  object-fit: contain;   /* 工厂产品形态在边缘，不能裁 */
  width: 100%;
  height: 100%;
}
.product-card:hover {
  transform: none;                  /* 去掉上浮 3px */
  box-shadow: none;
  border-color: var(--color-primary);
}
.product-card:hover .product-card-img img { transform: none; }

.product-card-body .card-view {
  align-self: stretch;              /* 原来居中 → 与卡片/文字三条左边缘不齐 */
  justify-content: center;
  margin-top: 1.1rem;
  min-height: 44px;                 /* 触控目标 */
  border-radius: var(--radius);
  font-size: var(--fs-xs);
}
.product-card:hover .card-view .arrow { transform: none; }

/* ---------- 7. 按钮体系：全站统一一套 ---------- */
.btn,
.btn-primary,
.btn-outline,
.nav-cta,
.nav-cta-mobile,
.product-info .btn-primary,
.cta-band .btn-primary,
.rfq-form .btn-primary {
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  letter-spacing: 0.02em;   /* 全站按钮统一一种字距（此前有 5 种） */
  text-transform: none;
  padding: 0.7rem 1.5rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 移动端 CTA 原来是渐变（AI 味），改纯色，与桌面一致 */
.nav-cta-mobile { background: var(--color-primary); }
/* 触觉反馈保留，但去掉缩放（工业风不做弹性） */
.btn-primary:active,
.nav-cta:active,
button[type="submit"]:active { transform: none; }

/* ---------- 8. 规格矩阵 ---------- */
.spec-matrix { border-radius: var(--radius); }
.spec-matrix-table thead th {
  color: var(--brand-n-600);
  border-bottom: 1px solid var(--color-primary);
  letter-spacing: var(--ls-label);
  font-size: var(--fs-xs);        /* 原来 11.52px 游离值 → 令牌 13px */
  font-weight: var(--fw-medium);  /* 原来 700 → 令牌 500 */
}
/* 空值不再是一个个横杠：稀疏列已在构建期丢弃，剩下的空位用极浅底表示"未提供" */
.spec-matrix-table tbody td.is-empty {
  background: var(--brand-n-050);
  background-image: repeating-linear-gradient(45deg,
      transparent 0, transparent 5px,
      rgba(0, 54, 102, 0.04) 5px, rgba(0, 54, 102, 0.04) 6px);
}
.spec-matrix-table .col-inquire a {
  min-height: 44px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius);
  font-size: var(--fs-xs);        /* 原来 11.52px → 令牌 13px */
}
.spec-filter input,
.spec-filter select,
.spec-filter button { min-height: 44px; border-radius: var(--radius); }

/* ---------- 9. 推荐产品：横向滚动栏（可暂停的自动滚动） ---------- */
.related-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.related-head .section-title { margin-bottom: 0; }
.related-controls { display: flex; align-items: center; gap: 0.5rem; }
.related-btn {
  min-width: 44px;
  height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-primary);
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.related-btn:hover:not([disabled]) { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.related-btn[disabled] { color: var(--brand-n-400); cursor: default; }
.related-prev, .related-next { font-size: 1.25rem; }

.related-strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-n-400) var(--brand-n-100);
  /* 注意：不要用 scroll-snap-type —— 它会把逐像素自动滚动每帧吸附回起点 */
}
.related-strip::-webkit-scrollbar { height: 8px; }
.related-strip::-webkit-scrollbar-thumb { background: var(--brand-n-400); }
.related-strip::-webkit-scrollbar-track { background: var(--brand-n-100); }
.related-strip:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.related-card { flex: 0 0 240px; }
.related-card-img {
  aspect-ratio: 1 / 1;
  border-bottom: 1px solid var(--brand-n-100);
}
.related-card-img img { object-fit: contain; padding: 12px; box-sizing: border-box; }
.related-card-name { font-size: var(--fs-sm); font-weight: var(--fw-medium); }

/* ---------- 10. 图片占位块：安静的设计留白（不再写 "photo pending"） ---------- */
.img-ph {
  color: var(--brand-n-300);
  background: var(--color-surface);
  font-weight: var(--fw-normal);
  letter-spacing: 0;
}
/* 构建期已确认文件不存在时直接渲染的占位块（不是靠 onerror 兜底） */
.img-ph.is-static { display: flex; }
.img-ph small { display: none; }

/* ---------- 11. 页脚 ---------- */
/* 版权行原来是 12.5px / 字重 200 / 对比度 2.89:1（AA 不通过） */
.footer-bottom {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.8rem;
  font-weight: var(--fw-light);
  letter-spacing: 0.04em;
}
.footer a { color: var(--color-footer-link); }
.footer a:hover { color: #fff; }
.footer h2, .footer h3, .footer h4 { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.footer p { color: var(--color-footer-text); }
/* 页脚恢复品牌图标（新的透明/白色 logo 放深底不再出现白方块） */
.footer .logo-icon { display: block; width: 40px; height: 40px; }
.footer .logo { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }

/* ---------- 12. 触控目标（≥44px） ---------- */
.zoom-btn { width: 48px; height: 48px; border-radius: var(--radius); }
.breadcrumb a { padding: 0.35rem 0; display: inline-block; }

/* ---------- 13. 动效克制 ---------- */
/* 旋转/位移类动效已在 style.css 中删除，这里只保留减少动效的系统偏好支持 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }   /* 平滑滚动也要跟着停 */
}

/* ---------- 14. 移动端 hero：2×2 网格（原来要滑 1.8 屏看完 4 个入口） ---------- */
@media (max-width: 640px) {
  .hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .hero-half { min-height: 44vh; }
  /* 移动端同样：无蒙版、无底板，深蓝文字压亮照片 */
  .hero-half::before {
    background: none;
  }
  .hero-half-content h1,
  .hero-half-content h2 {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65), 0 0 10px rgba(255, 255, 255, 0.45);
  }
  .hero-half-content { padding: 1.2rem 0.9rem; }
  .hero-half-content h1,
  .hero-half-content h2 { font-size: 1rem; min-height: 2.6em; }
  .hero-half-content p { display: none; }        /* 小格子里正文只会挤，信息留给类目页 */
  .hero-half-content .btn-ghost {
    max-width: none;
    font-size: var(--fs-2xs);
    padding: 0.6rem 0.5rem;
    white-space: normal;
  }
  .hero-split:hover .hero-half,
  .hero-split:hover .hero-half:hover { flex: none; }
}

/* ---------- 15. 焦点可见（原来兜底色 #1e3a5f 与品牌蓝并列显脏） ---------- */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---------- 16. 移动端抽屉导航（≤1024px） ---------- */
.drawer[hidden],
.drawer-scrim[hidden] { display: none; }

.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 20, 40, 0.5);
  opacity: 0;
  transition: opacity 0.26s ease;
  z-index: 4000;
  -webkit-tap-highlight-color: transparent;
}
.drawer-scrim.is-open { opacity: 1; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  height: 100dvh;
  width: min(88vw, 380px);
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-left: 1px solid var(--brand-n-200);
  box-shadow: -18px 0 40px rgba(0, 31, 61, 0.16);
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 4100;
  overflow: hidden;
}
.drawer.is-open { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem 0.5rem 1.25rem;
  border-bottom: 1px solid var(--brand-n-200);
  flex-shrink: 0;
}
.drawer-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-primary);
}
.drawer-close {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.drawer-list { list-style: none; margin: 0; padding: 0; }

.drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 52px;
  padding: 0.9rem 1.25rem;
  border: 0;
  border-bottom: 1px solid var(--brand-n-100);
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  font-weight: var(--fw-normal);
  letter-spacing: 0.01em;
  color: var(--color-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.drawer-link:active { background: var(--brand-n-050); }

/* 折叠指示：细线条 chevron（工业风，不用实心图标） */
.drawer-chevron,
.drawer-cat-toggle span {
  display: block;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--color-primary);
  border-bottom: 1.5px solid var(--color-primary);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.drawer-products-toggle[aria-expanded="true"] .drawer-chevron,
.drawer-cat-toggle[aria-expanded="true"] span { transform: rotate(-135deg); }

.drawer-products { list-style: none; margin: 0; padding: 0; background: var(--brand-n-050); }
.drawer-products[hidden] { display: none; }
.drawer-cat { border-bottom: 1px solid var(--brand-n-100); }
.drawer-cat-link {
  display: inline-block;
  padding: 0.85rem 0.5rem 0.85rem 1.6rem;
  font-size: 0.95rem;
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  text-decoration: none;
  min-height: 48px;
}
.drawer-cat-toggle {
  float: right;
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drawer-sub { list-style: none; margin: 0; padding: 0 0 0.5rem 0; }
.drawer-sub[hidden] { display: none; }
.drawer-sublink {
  display: block;
  min-height: 46px;
  padding: 0.75rem 1.25rem 0.75rem 2.5rem;
  font-size: 0.9rem;
  font-weight: var(--fw-normal);
  color: var(--brand-n-600);
  text-decoration: none;
  border-bottom: 1px solid var(--brand-n-100);
}
.drawer-sublink:active { background: var(--brand-n-100); }
.drawer-sublink-all { color: var(--color-primary); font-weight: var(--fw-medium); }

.drawer-foot {
  flex-shrink: 0;
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--brand-n-200);
  background: var(--color-bg);
}
.drawer-cta { width: 100%; }
.drawer-contact {
  margin: 0.75rem 0 0;
  font-size: var(--fs-2xs);
  line-height: 1.6;
  color: var(--color-text-light);
}

body.drawer-locked { overflow: hidden; }

/* 抽屉只服务窄屏；桌面端用顶部菜单 */
@media (min-width: 1025px) {
  .drawer,
  .drawer-scrim { display: none; }
}

/* ---------- 17. 无障碍整改补充（2026-10-01 无障碍合规审议） ---------- */

/* L-7 跳到主内容：键盘用户第一个 Tab 就能跳过整个页头 */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 5000;
  padding: 0.75rem 1.25rem;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.5rem; color: #fff; }

/* B-1 规格表窄屏可横向滚动（原表格 912px 被 body overflow-x:hidden 直接裁掉） */
.spec-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.spec-table-scroll:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* M-3 规格摘要由表格改为列表（单列文字表格没有语义价值） */
.spec-summary { margin: 1.5rem 0 2rem; }
.spec-summary-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 0.6rem;
}
.spec-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.spec-summary-list li {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
  color: var(--color-text);
}
.spec-summary-list li:nth-child(even) { background: var(--color-surface); }

/* H-4 深色区域的焦点环：品牌蓝在页脚/灯箱上只有 1.2:1，改用白色（15.4:1） */
.footer :focus-visible,
.lightbox :focus-visible {
  outline-color: #fff;
  box-shadow: none;
}
.lightbox .lb-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* L-1 表单控件的焦点环（补等特异性规则，压过 style-extra 的 outline:none） */
.rfq-form input:focus-visible,
.rfq-form select:focus-visible,
.rfq-form textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}

/* H-5 表单反馈与必填标记 */
.req { color: var(--color-primary); }
.form-status {
  min-height: 1.2em;
  margin-top: 0.75rem;
  font-size: var(--fs-sm);
  color: var(--color-primary);
}
.form-status.is-error { color: #a4262c; }   /* 4.5:1 on white */