/* ==========================================================================
   TIANROU 品牌设计令牌 (Design Tokens)
   参照品牌视觉系统规范；本文件在所有基础样式之后加载，用于统一与覆盖。
   修改品牌色/字体/圆角，只改这一个文件。
   ========================================================================== */
:root{
  /* 品牌主色 */
  --tr-navy:#0E1013;
  --tr-blue:#C03A0E;
  --tr-cyan:#C03A0E;
  --tr-bg:#F4F4F1;
  --tr-ink:#14213D;

  /* 中性阶 */
  --tr-gray-50:#F4F4F1;
  --tr-gray-100:#EAEAE6;
  --tr-gray-200:#E4E4E0;
  --tr-gray-300:#CFCFC9;
  --tr-gray-400:#7E858D;
  --tr-gray-500:#6B7A90;
  --tr-gray-600:#51637C;

  /* 功能色 */
  --tr-success:#1E6A49;
  --tr-warning:#E0A008;
  --tr-danger:#D64545;

  /* 字体（Inter / Noto Sans SC 已本地化托管，无外链请求） */
  --tr-font-sans:'Inter','Noto Sans SC','Helvetica Neue',Helvetica,Arial,sans-serif;
  --tr-font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* 字号 */
  --tr-text-xs:12px;  --tr-text-sm:13px;  --tr-text-md:15px;  --tr-text-lg:17px;
  --tr-text-xl:20px;  --tr-text-2xl:28px; --tr-text-3xl:36px; --tr-text-4xl:48px;

  /* 圆角 */
  --tr-radius-sm:8px; --tr-radius-md:12px; --tr-radius-lg:16px; --tr-radius-pill:999px;

  /* 间距 */
  --tr-space-1:4px;  --tr-space-2:8px;   --tr-space-3:12px; --tr-space-4:16px;
  --tr-space-5:20px; --tr-space-6:24px;  --tr-space-8:32px; --tr-space-10:40px;
  --tr-space-12:48px; --tr-space-16:64px; --tr-space-20:80px;

  /* 阴影（克制，两档） */
  --tr-shadow-card:0 1px 2px rgba(11,31,58,.05),0 8px 24px rgba(11,31,58,.06);
  --tr-shadow-hover:0 2px 6px rgba(11,31,58,.07),0 16px 40px rgba(11,31,58,.10);
}

/* ---- 基础排版 ---- */
body{font-family:var(--tr-font-sans);color:var(--tr-ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--tr-font-sans);color:var(--tr-navy)}

/* ---- 对齐 metlab 既有变量 ---- */
:root{
  --ink-950:var(--tr-navy);
  --line:var(--tr-gray-200);
}

/* ---- Logo 尺寸守卫：固定高度 + 等比宽度，禁止拉伸 ---- */
.site-head .brand-logo{height:36px;width:auto;max-width:220px;display:block}
.foot-logo-img.brand-logo--white{height:36px;width:auto;max-width:220px;display:block}
@media (max-width:640px){
  .site-head .brand-logo{height:30px;max-width:180px}
  .foot-logo-img.brand-logo--white{height:32px}
}

/* ---- 链接与主按钮色系统一 ---- */
.btn-primary{background:var(--tr-blue);border-color:var(--tr-blue)}
.btn-primary:hover,.btn-primary:focus-visible{background:#C03A0E;border-color:#C03A0E}

/* ---- 首页区块变量对齐（home_v2.php 内部变量 → 品牌令牌） ---- */
.home-v2{
  --hv-ink:var(--tr-navy);
  --hv-blue:var(--tr-blue);
  --hv-line:rgba(11,31,58,.12);
  --hv-muted:var(--tr-gray-500);
}

/* ---- 焦点可见性（无障碍） ---- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--tr-blue);outline-offset:2px;border-radius:4px;
}

/* ---- 中文排版：优先 Noto Sans SC ---- */
html[lang="cn"] body,html[lang="zh"] body{font-family:'Noto Sans SC',var(--tr-font-sans)}

/* ==========================================================================
   Hero 组件（材料线标记 + 产品线面板）
   ========================================================================== */
.hv-matstrip{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.hv-matstrip li{padding:6px 12px;border:1px solid rgba(255,255,255,.2);border-radius:var(--tr-radius-pill);
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.92);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

.hv-lines{border:1px solid rgba(255,255,255,.18);background:rgba(5,17,38,.66);
  border-radius:var(--tr-radius-lg);overflow:hidden;backdrop-filter:blur(14px)}
.hv-lines__head{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.12);
  font-family:var(--tr-font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hv-lines__list{margin:0;padding:0;list-style:none}
.hv-lines__item{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.hv-lines__item:last-child{border-bottom:0}
.hv-lines__name{color:#fff;font-weight:650;font-size:15px}
.hv-lines__desc{color:rgba(255,255,255,.62);font-size:12px;text-align:right}
@media (max-width:640px){
  .hv-lines__item{padding:11px 14px}
  .hv-lines__name{font-size:14px}
  .hv-matstrip li{font-size:11px;padding:5px 10px}
}

/* ==========================================================================
   §9 Material Intelligence / §10 Built for Better Printing / §13 生产流程
   ========================================================================== */
.hv-mi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hv-mi-card{display:block;padding:22px;border:1px solid var(--hv-line);border-radius:var(--tr-radius-md);
  background:#fff;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.hv-mi-card:hover{transform:translateY(-3px);border-color:rgba(22,119,255,.32);box-shadow:var(--tr-shadow-hover)}
.hv-mi-card__icon{width:38px;height:38px;border-radius:10px;background:var(--tr-gray-100);color:var(--tr-blue);
  display:flex;align-items:center;justify-content:center}
.hv-mi-card h3{margin:14px 0 0;font-size:18px;color:var(--tr-navy)}
.hv-mi-card p{margin:8px 0 0;color:var(--tr-gray-500);font-size:13.5px;line-height:1.65}
.hv-mi-card__links{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.hv-mi-card__links span{padding:4px 9px;border:1px solid var(--tr-gray-200);border-radius:999px;
  font-size:11px;font-weight:600;color:var(--tr-gray-600)}

.hv-bfp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hv-bfp-card{padding:20px;border-radius:var(--tr-radius-md);background:#fff;border:1px solid var(--hv-line)}
.hv-bfp-card h3{margin:0;font-size:16px;color:var(--tr-navy)}
.hv-bfp-card p{margin:9px 0 0;color:var(--tr-gray-500);font-size:13.5px;line-height:1.65}

.hv-flow{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:0;counter-reset:flow}
.hv-flow__step{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.86);font-size:14px}
.hv-flow__idx{font-family:var(--tr-font-mono);font-size:11px;color:var(--tr-cyan);min-width:22px}

@media (max-width:960px){
  .hv-mi-grid,.hv-bfp-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   Blog 分类导航与分页器（Brief §27）
   ========================================================================== */
.blog-cats{display:flex;flex-wrap:wrap;gap:8px}
.blog-cat{display:inline-block;padding:6px 12px;border:1px solid var(--tr-gray-200);border-radius:var(--tr-radius-pill);
  font-size:12.5px;color:var(--tr-gray-600);text-decoration:none;background:#fff}
.blog-cat:hover{border-color:var(--tr-blue);color:var(--tr-blue)}
.blog-cat.is-active{background:var(--tr-navy);border-color:var(--tr-navy);color:#fff}
.blog-pager{display:flex;align-items:center;justify-content:center;gap:14px}

/* 相关文章（Brief §27） */
.news-related__list{margin:0;padding-left:18px;display:grid;gap:8px}
.news-related__list a{color:var(--tr-blue);text-decoration:none}
.news-related__list a:hover{text-decoration:underline}

/* ==========================================================================
   OEM / ODM 八步流程时间轴（Brief §22）
   ========================================================================== */
.oem-flow{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.oem-flow__step{position:relative;padding:18px;border:1px solid var(--tr-gray-200);border-radius:var(--tr-radius-md);background:#fff}
.oem-flow__idx{display:block;font-family:var(--tr-font-mono);font-size:11px;letter-spacing:.12em;color:var(--tr-blue);margin-bottom:8px}
.oem-flow__body strong{display:block;color:var(--tr-navy);font-size:15px}
.oem-flow__body span{display:block;margin-top:6px;color:var(--tr-gray-500);font-size:13px;line-height:1.6}
@media (max-width:960px){.oem-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.oem-flow{grid-template-columns:1fr}}

/* ==========================================================================
   盘重与包装选项（产品页，Brief §14）
   ========================================================================== */
.pd-spools{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:14px}
.pd-spool{margin:0;border:1px solid var(--tr-gray-200);border-radius:var(--tr-radius-md);background:#fff;overflow:hidden}
.pd-spool img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#fff}
.pd-spool figcaption{padding:10px 12px;border-top:1px solid var(--tr-gray-100)}
.pd-spool figcaption strong{display:block;color:var(--tr-navy);font-size:14px}
.pd-spool figcaption span{display:block;margin-top:3px;color:var(--tr-gray-600);font-size:11.5px;line-height:1.5}

/* ==========================================================================
   移动端导航展开修复
   --------------------------------------------------------------------------
   page_template.php 的页头结构是：input.nav-toggle-cb + <nav> + ul.nav-main
   （nav-main 嵌套在 nav 内部），而原生模板 head.php 是 input + ul.nav-main 同级。
   基础样式里的展开规则 `.nav-toggle-cb:checked ~ .nav-main` 只覆盖同级写法，
   导致自定义页面（首页 / 产品 / 博客 / 询盘等）在窄屏下点击汉堡按钮无反应、
   主导航完全打不开。这里补上后代选择器版本。
   ========================================================================== */
@media (max-width: 1180px) {
  .nav-toggle-cb:checked ~ nav .nav-main { display: flex; }
  .nav-toggle-cb:checked ~ nav .nav-main .drawer-only { display: block; }
}

/* ==========================================================================
   B 档差异化改造
   目标：与同源的 FilamentLab 站拉开视觉距离，但保持品牌色值不变（Brief §33）
   手段：① 形状语言（细描边 + 小圆角，替代柔和卡片阴影）
         ② 配色应用（亮色为主，深色只留页脚）
         ③ 首页 Hero 改为非对称双栏 + 线材视觉
   ========================================================================== */

/* ---- ① 形状语言：技术感，取代 SaaS 柔光卡片 ---- */
.home-v2 .hv-mat-card,
.home-v2 .hv-mi-card,
.home-v2 .hv-bfp-card,
.home-v2 .hv-app-card,
.home-v2 .hv-service,
.home-v2 .hv-lines,
.home-v2 .hv-range__table,
.pd-spool,
.blog-cat { border-radius: 3px; }

.home-v2 .hv-mat-card,
.home-v2 .hv-mi-card,
.home-v2 .hv-bfp-card { box-shadow: none; }

.home-v2 .hv-mat-card:hover,
.home-v2 .hv-mi-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--tr-cyan);
  background: #FFFFFF;
}

/* ---- ② 亮色优先：Hero 改为亮底 + 细网格纹理 ---- */
.hv-hero--light {
  background:
    linear-gradient(180deg, #FFFFFF 0%, var(--tr-bg) 100%),
    repeating-linear-gradient(90deg, rgba(11,31,58,.045) 0 1px, transparent 1px 64px);
  background-blend-mode: normal;
  color: var(--tr-ink);
  min-height: auto;
  border-bottom: 1px solid var(--tr-gray-200);
}
.hv-hero--light .hv-hero__inner { padding-block: clamp(48px, 6vw, 84px); }
.hv-hero__grid--asym {
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hv-hero--light .hv-kicker {
  border-color: var(--tr-gray-200);
  background: #fff;
  color: var(--tr-gray-600);
}
.hv-hero--light h1 { color: var(--tr-navy); }
.hv-hero--light h1 span { color: var(--tr-blue); }
.hv-hero--light .hv-hero__lead { color: var(--tr-gray-600); }
.hv-hero--light .btn-outline {
  color: var(--tr-navy);
  border-color: var(--tr-gray-300);
  background: #fff;
}
.hv-hero--light .btn-outline:hover { border-color: var(--tr-blue); color: var(--tr-blue); }
.hv-hero--light .btn-ghost { color: var(--tr-gray-600); }

/* 线材视觉：6 条并列细长条 */
.hv-strands {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 18px);
  min-height: 320px;
}
.hv-strand { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 1; }
.hv-strand__bar {
  display: block;
  width: 100%;
  max-width: 34px;
  height: clamp(180px, 22vw, 260px);
  border-radius: 2px;
}
.hv-strand__label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .04em;
  color: var(--tr-gray-600);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
}

/* ---- 签名模块：The TIANROU Range 矩阵 ---- */
.hv-range__table { border: 1px solid var(--tr-gray-200); background: #fff; overflow: hidden; }
.hv-range__row {
  display: grid;
  grid-template-columns: 1.4fr .9fr .8fr 1fr 1.2fr 40px;
  gap: 12px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--tr-gray-100);
  font-size: 13.5px;
  color: var(--tr-gray-600);
}
.hv-range__row:last-child { border-bottom: 0; }
.hv-range__row--head {
  background: var(--tr-gray-50);
  font-family: var(--tr-font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tr-gray-500);
}
.hv-range__name { color: var(--tr-navy); font-weight: 650; }
.hv-range__colors { text-transform: capitalize; }
.hv-range__row a { color: var(--tr-blue); text-decoration: none; font-weight: 700; }
/* QA-2026-09-16 contrast: was var(--tr-gray-400) = 2.59:1 on white */
.hv-range__note { margin: 12px 0 0; font-size: 12px; color: #565C64; }

@media (max-width: 960px) {
  .hv-hero__grid--asym { grid-template-columns: 1fr; }
  .hv-strands { min-height: 200px; order: 2; }
  .hv-range__row { grid-template-columns: 1.4fr 1fr 40px; }
  .hv-range__row > span:nth-child(3),
  .hv-range__row > span:nth-child(4),
  .hv-range__row > span:nth-child(5) { display: none; }
}

/* ---- ③ 末屏 CTA：亮底 + 青色强调（替换旧品牌的深蓝渐变，深色只留页脚） ---- */
.home-v2 .hv-final__card {
  background: #FFFFFF;
  border: 1px solid var(--tr-gray-200);
  border-top: 3px solid var(--tr-cyan);
  border-radius: 3px;
  color: var(--tr-ink);
  padding: clamp(30px, 4.4vw, 50px);
}
.home-v2 .hv-final__card h2 { color: var(--tr-navy); }
.home-v2 .hv-final__card p { color: var(--tr-gray-600); }

/* ==========================================================================
   整站换肤：重映射 metlab 模板变量
   --------------------------------------------------------------------------
   非首页页面（产品 / OEM / 博客 / 材料 / 询盘 / 关于…）全部依赖 metlab.css 的
   这一套变量，原值是 FilamentLab 的蓝色系（--brand-600: #2a4ae8）与偏黑深蓝
   （--ink-950: #070b16）。此处整体对齐 TIANROU 品牌规范（Brief §33/§34），
   并统一形状语言为「细描边 + 小圆角」，与同源站点拉开视觉距离。
   品牌色值本身未改动。
   ========================================================================== */
:root{
  /* 品牌蓝阶：以 #C03A0E 为 600 档 */
  --brand-50:#EEF6FF;  --brand-100:#DBEBFF; --brand-200:#BBD8FF; --brand-300:#8CBDFF;
  --brand-400:#4F9AFF; --brand-500:#2688FF; --brand-600:#C03A0E; --brand-700:#C03A0E;
  --brand-800:#0B4FAF; --brand-900:#0D438C; --brand-950:#0B2A55;

  /* 深色阶：以品牌深蓝 #0E1013 为基调 */
  --ink-950:#0E1013; --ink-900:#12294A; --ink-800:#1B3557; --ink-700:#274566;

  /* 中性阶：对齐品牌 Background / Text */
  --bg:#FFFFFF;        --bg-subtle:#F4F4F1;  --surface:#FFFFFF; --surface-2:#EAEAE6;
  --text:#14213D;      --text-2:#45566F;     --muted:#6B7A90;   --faint:#7E858D;
  --line:#E4E4E0;      --line-strong:#CFCFC9;

  /* 青色作为强调色（Brief 的 Cyan #C03A0E） */
  --accent:#C03A0E;    --accent-strong:#1E6A49;

  /* 形状语言：细描边 + 小圆角（替代 FilamentLab 的 6/10/14/20） */
  --r-sm:3px; --r-md:3px; --r-lg:4px; --r-xl:6px;
}

/* 链接与强调统一到品牌蓝 */
a{color:var(--brand-600)}

/* 卡片：去掉厚重阴影，改用细描边（整站） */
.card{box-shadow:none;border:1px solid var(--line)}
.card-hover:hover{border-color:var(--accent);box-shadow:none;transform:none}

/* 主按钮 hover 用品牌深蓝，次按钮 hover 用青色描边 */
.btn-primary{background:var(--brand-600);border-color:var(--brand-600)}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--brand-700);border-color:var(--brand-700)}
.btn-outline:hover,.btn-ghost:hover{border-color:var(--accent);color:var(--accent-strong)}

/* 徽标与高亮统一青色系 */
.badge-brand{background:rgba(0,200,151,.10);color:var(--accent-strong);border-color:rgba(0,200,151,.28)}

/* ==========================================================================
   硬编码旧色清理
   --------------------------------------------------------------------------
   metlab.min.css 里有若干**未走变量**的 FilamentLab 色值，变量重映射覆盖不到，
   会残留在导航 CTA、Cookie 按钮、页脚色条、悬浮联系条等可见位置。
   这里按选择器逐条对齐品牌色（高对比度无障碍块保持原样，不动）。
   ========================================================================== */

/* #2a4ae8 → 品牌蓝 */
html body .site-head .nav-main .nav-cta > a.nav-cta-link,
html body .site-head .nav-main .nav-cta > a.nav-cta-link:hover,
html body .site-head .nav-main .nav-cta > a.nav-cta-link:focus-visible,
html body .site-head .nav-main .nav-cta > a.nav-cta-link.active,
.cb-mail,
.sol-prototyping { background-color: var(--tr-blue) !important; }

.band-dark::after { background-color: var(--tr-blue) !important; }

/* #0A4A9B → 品牌深蓝 */
.cookie-bar .btn-acc,
.foot-legal .lang-mini a.active { background-color: var(--tr-navy) !important; }

.social-pill a:hover { background-color: var(--tr-blue) !important; }

.site-foot::before { background: var(--tr-cyan) !important; }

.foot-brand .logo-mark { background-color: var(--tr-navy) !important; }

/* #0b1120 → 品牌深蓝（深色区块与弹层） */
.band-dark,
.cb-wechat .qr-pop { background-color: var(--tr-navy) !important; }

/* ==========================================================================
   TIANROU Layout System v2 —— 整站重新排版
   --------------------------------------------------------------------------
   全站 35 个文件共用 .container、25 个共用 .card、18 个共用 .section，
   因此重写这套共享类即可整站换版式，无需逐个改模板标记。
   设计取向：更宽的画布、更大的纵向节奏、显示级标题、技术文档式区块头、
   扁平方正的组件 —— 与 FilamentLab（窄容器 + 柔和卡片 + 居中内页头）区分。
   ========================================================================== */

/* ---- 1. 画布与网格：加宽主容器，侧边留白随视口缩放 ---- */
.container        { max-width: 1320px; padding-inline: clamp(20px, 4vw, 44px); }
.container-narrow { max-width: 880px;  padding-inline: clamp(20px, 4vw, 44px); }

/* ---- 2. 纵向节奏：区块间距显著放大，形成呼吸感 ---- */
.section    { padding-block: clamp(64px, 8vw, 112px); }
.section-sm { padding-block: clamp(40px, 5vw, 72px); }

/* ---- 3. 标题层级：显示级大标题 + 更紧字距 ---- */
.h-hero { font-size: clamp(38px, 5.2vw, 64px); line-height: 1.04; letter-spacing: -.035em; font-weight: 700; }
.h-sec  { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.12; letter-spacing: -.028em; font-weight: 680; }
.h-card { font-size: clamp(17px, 1.3vw, 19px); letter-spacing: -.01em; }

.lead {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.72;
  color: var(--text-2);
  max-width: 68ch;              /* 控制行宽，长文更好读 */
}
.eyebrow {
  font-family: var(--font-mono); /* 等宽标签，技术文档感 */
  font-size: 11px;
  letter-spacing: .16em;
  font-weight: 600;
}
.h-sec + .lead { margin-top: 14px; }

/* ---- 4. 内页页头：左对齐 + 细线收口（原为居中） ---- */
.hero {
  padding-block: clamp(56px, 7vw, 96px);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-subtle) 100%);
}
.hero-sm {
  padding-block: clamp(36px, 4.5vw, 64px);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-subtle) 100%);
}
.hero > .container.center, .hero > .container-narrow.center,
.hero-sm > .container.center, .hero-sm > .container-narrow.center,
.hero .center, .hero-sm .center { text-align: left; }

/* ---- 5. 卡片：扁平、方正、内留白加大 ---- */
.card { border-radius: 4px; box-shadow: none; border: 1px solid var(--line); }
.card-pad { padding: clamp(20px, 2.2vw, 30px); }

/* ---- 6. 按钮：更大的点击区，方形感（与 Brief 的技术/工业调性一致） ---- */
.btn { border-radius: 3px; padding: 12px 22px; font-weight: 600; letter-spacing: .005em; }
.btn-sm { padding: 9px 16px; font-size: 13px; border-radius: 3px; }
.btn-lg { padding: 15px 28px; font-size: 16px; border-radius: 3px; }

/* ---- 7. 表格 / 表单：更宽松的行高与更大的输入框 ---- */
.table th, .table td { padding: 14px 16px; }
.input { padding: 12px 14px; border-radius: 3px; border: 1px solid var(--line); background: #fff; }
.field-label {
  display: block;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 6px;
}

/* ---- 8. 面包屑与徽标：更轻、更克制 ---- */
.breadcrumb { font-size: 12.5px; color: var(--faint); letter-spacing: .02em; }
.badge { border-radius: 2px; font-size: 11px; letter-spacing: .04em; padding: 3px 8px; }

/* ---- 9. 列表与详情：内容列更好读 ---- */
.article-body { font-size: 16.5px; line-height: 1.78; }
.article-body h2 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.02em; margin-top: 2em; }
.article-body h3 { font-size: clamp(18px, 1.6vw, 21px); margin-top: 1.7em; }
.article-body p, .article-body li { max-width: 72ch; }

/* ==========================================================================
   产品列表：两栏布局（左侧粘性筛选栏 + 右侧材料列表）
   ========================================================================== */
.prod-layout {
  display: grid;
  grid-template-columns: minmax(0, 232px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.prod-side {
  position: sticky;
  top: calc(var(--header-h, 64px) + 18px);
  display: grid;
  gap: 22px;
}
.prod-side__search { display: grid; gap: 8px; }
.prod-side__group { border-top: 1px solid var(--line); padding-top: 16px; }
.prod-side__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.prod-side__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.prod-side__list a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; border-radius: 3px;
  color: var(--text-2); text-decoration: none; font-size: 13.5px;
}
.prod-side__list a:hover { background: var(--bg-subtle); color: var(--brand-600); }
.prod-side__list em { font-style: normal; font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); }
.prod-side__link {
  display: block; padding: 8px 10px; border-radius: 3px;
  color: var(--text-2); text-decoration: none; font-size: 13.5px;
}
.prod-side__link:hover { background: var(--bg-subtle); color: var(--brand-600); }
.prod-main { min-width: 0; }

@media (max-width: 900px) {
  .prod-layout { grid-template-columns: 1fr; }
  .prod-side { position: static; }
}

/* ==========================================================================
   OEM / ODM 页：两栏布局（左侧粘性锚点导航 + 右侧内容）
   ========================================================================== */
.oem-layout {
  display: grid;
  grid-template-columns: minmax(0, 216px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.oem-nav { position: sticky; top: calc(var(--header-h, 64px) + 18px); display: grid; gap: 2px; }
.oem-nav__title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.oem-nav a {
  display: block; padding: 9px 12px; border-left: 2px solid transparent;
  color: var(--text-2); text-decoration: none; font-size: 13.5px;
}
.oem-nav a:hover { border-left-color: var(--brand-600); background: var(--bg-subtle); color: var(--brand-600); }
.oem-nav__divider { height: 1px; background: var(--line); margin: 10px 0; }
/* QA-2026-09-16 contrast: --faint (#9AA4B5) on a light panel was 2.44:1 */
.oem-nav__muted { color: #565C64 !important; font-size: 12.5px !important; }
.oem-content { min-width: 0; }

/* 内层 section 自带的 container 去掉左右内边距，避免与两栏栅格叠加 */
.oem-content > section > .container,
.oem-content > section > .container-narrow { padding-inline: 0; max-width: none; }

@media (max-width: 900px) {
  .oem-layout { grid-template-columns: 1fr; }
  .oem-nav { position: static; }
}

/* ==========================================================================
   材料对比：矩阵可视化（数值维度用归一化横条，文本维度用标签）
   ========================================================================== */
.cmp-matrix__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.cmp-matrix__cell { vertical-align: middle; min-width: 132px; }
.cmp-matrix__value { display: flex; align-items: baseline; gap: 5px; }
.cmp-matrix__value strong { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.cmp-matrix__unit { font-size: 11px; color: var(--faint); }
.cmp-matrix__track {
  margin-top: 7px;
  height: 3px;
  background: var(--surface-2);
  border-radius: 0;
  overflow: hidden;
}
.cmp-matrix__track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand-600), var(--accent));
}
.cmp-matrix__chip {
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 12px;
  color: var(--text-2);
  background: #fff;
}

/* ==========================================================================
   材料相关页面：把内联的固定列宽网格改为响应式
   --------------------------------------------------------------------------
   原先使用 style="grid-template-columns:260px 1fr" 等内联写法，
   在手机视口下固定列宽不收缩，导致横向溢出（iPhone 上实测溢出 76px）。
   ========================================================================== */
.m-grid { display: grid; gap: var(--sp-6); align-items: start; }
.m-grid--sidebar { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
.m-grid--aside   { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
.m-grid--2       { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.m-grid--3       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m-grid--compact { gap: var(--sp-4); margin-top: var(--sp-3); }

@media (max-width: 900px) {
  .m-grid--sidebar,
  .m-grid--aside,
  .m-grid--2,
  .m-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   移动端：Cookie 同意条与宽按钮不再撑破视口
   --------------------------------------------------------------------------
   问题：.cookie-bar 用 position:fixed + left/right 定位，但它被注入到带
   transform 的祖先容器内 —— transform 会成为 fixed 元素的包含块，导致
   left/right 相对那个更宽的容器计算（实测 588px > 390px 视口）。
   叠加 .btns{flex-shrink:0} 进一步阻止收缩，造成整页横向溢出。
   这里用 vw 兜底限宽，并允许按钮换行收缩。
   ========================================================================== */
@media (max-width: 560px) {
  .cookie-bar {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box;
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
  }
  .cookie-bar .ct { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  .cookie-bar .btns { flex-shrink: 1; flex-wrap: wrap; width: 100%; gap: 8px; }
  .cookie-bar .btns > * { flex: 1 1 44%; min-width: 0; text-align: center; }

  /* 通用：移动端按钮不超出视口，长文案允许换行 */
  .btn { max-width: 100%; }
  .btn { white-space: normal; overflow-wrap: anywhere; }
}

/* ==========================================================================
   博客文章：上一篇/下一篇在移动端不再撑破视口
   --------------------------------------------------------------------------
   两个 .btn 用 flex:1 平分，内部标题是 white-space:nowrap，
   导致按钮无法收缩到视口内（iPhone 实测溢出 67px）。
   ========================================================================== */
.post-nav .btn > div { min-width: 0; max-width: 100%; }
.post-nav .btn { min-width: 0; }

@media (max-width: 560px) {
  .post-nav { flex-wrap: wrap; }
  .post-nav > * { flex: 1 1 100% !important; min-width: 0; }
  .post-nav .btn { justify-content: flex-start; text-align: left !important; }
}

/* ==========================================================================
   QA-2026-09-16 — 头部 Logo 遮挡修复
   Bug: .brand 是 flex 项且 min-width:0，<picture> 内 img 为 block，导致
   .brand 计算宽度只有 2px，logo 溢出并盖住第一个导航项（Home）。
   修复：让品牌区按内容自适应并禁止收缩，导航与品牌之间留出间距。
   ========================================================================== */
.site-head .bar .brand{
  flex:0 0 auto;
  width:auto;
  max-width:none;
  min-width:0;
  display:flex;
  align-items:center;
}
.site-head .brand picture{display:block;line-height:0;flex:0 0 auto}
.site-head .brand .brand-logo{
  height:36px;
  width:auto;
  max-width:clamp(120px,13vw,190px);
  object-fit:contain;
  object-position:left center;
}
.site-head .nav-main{margin-inline:clamp(10px,1.4vw,26px)}
@media (max-width:1180px){
  .site-head .nav-main{margin-inline:0}
  .site-head .brand .brand-logo{max-width:clamp(110px,34vw,170px)}
}

/* ==========================================================================
   QA-2026-09-16 — 桌面端导航在 1181–1600px 的收缩策略
   Logo 恢复真实宽度后，1181–1600px 区间导航会顶出容器。此处收紧字号、
   内边距并隐藏导航项装饰图标，保证 1280/1366/1440 主流分辨率零横向溢出。
   ========================================================================== */
@media (max-width:1600px) and (min-width:1181px){
  .site-head .brand .brand-logo{max-width:clamp(130px,12vw,175px)}
  .site-head .nav-main.margin-inline,
  .site-head .nav-main{margin-inline:10px}
  .nav-main a{padding-inline:6px;font-size:13px}
  .nav-main > li > a > .i{display:none}
  .nav-main a .nav-caret{margin-left:2px}
  .head-actions{gap:8px}
}
@media (max-width:1320px) and (min-width:1181px){
  .nav-main a{padding-inline:5px;font-size:12.5px}
  .site-head .brand .brand-logo{max-width:150px}
}

/* ==========================================================================
   QA-2026-09-16 — 内页横幅尺寸统一
   问题：首页 hero 高约 570–790px（clamp(570px,72vh,790px)），而内页共用
   横幅只有 clamp(160px,22vw,320px)，两者比例差异过大；且横幅默认继承深色
   文字色，叠加在深蓝底上不可读。
   修复：内页横幅按首页 hero 同一公式取高；文字色改为白色；紧跟其后的页面
   标题区收紧内边距，使「横幅 + 标题」整体高度接近首页，不再出现空白长条。
   ========================================================================== */
.fl-page-banner{
  height:clamp(570px,72vh,790px);
  margin-bottom:0;
  color:#fff;
}
.fl-page-banner__gradient{
  background:linear-gradient(90deg,rgba(4,13,30,.96) 0%,rgba(5,20,43,.85) 44%,rgba(7,25,54,.46) 74%,rgba(7,25,54,.24) 100%),
             linear-gradient(180deg,rgba(4,13,30,.10),rgba(4,13,30,.52));
}
.fl-page-banner--image .fl-page-banner__gradient{
  background:linear-gradient(180deg,rgba(4,13,30,.16),rgba(4,13,30,.52));
}
/* 横幅之后的第一个内容区块：收紧上内边距，避免“长条 + 大留白” */
.fl-page-banner + .container > .hero,
.fl-page-banner + .container > .hero-sm,
.fl-page-banner + main > .hero,
.fl-page-banner + main > .hero-sm,
.fl-page-banner + section > .hero,
.fl-page-banner + section > .hero-sm{
  padding-block:clamp(30px,4.2vw,54px);
}
@media (max-width:1180px){
  .fl-page-banner{height:clamp(300px,42vh,460px)}
}
@media (max-width:720px){
  .fl-page-banner{height:clamp(200px,30vh,280px);margin-bottom:0}
}

/* ==========================================================================
   QA-2026-09-16 — 文字可读性（对比度）修复
   审计结果：全站小字号文案对比度不足，其中首页 hero 内的材料名
   （.hv-strand__label = #51637C on #07162D，2.95:1）与 OEM 侧栏
   （.oem-nav__muted 2.44:1）已属“看不清”。按 WCAG AA 调整：
     · 正文/次要文字   #6B7688 → #565C64
     · 蓝色文字与主按钮 #C03A0E → #C03A0E（白字按钮 ≥ 5:1）
     · 青色徽章        #1E6A49 → #00795B
     · 深底上的材料名   改为 72% 白
   ========================================================================== */
:root{
  --muted:#565C64;
  --text-2:#43506A;
}
.muted,.field-label,.prod-side__title,.oem-nav__muted,.oem-nav__title{color:#565C64}
.eyebrow,.text-brand,.card-title,.hv-eyebrow,.hv-family,.hv-arrow,.label,.all-link{color:#C03A0E}
.hv-arrow{color:#C03A0E}
.btn-primary{background:#C03A0E;border-color:#C03A0E}
.btn-primary:hover,.btn-primary:focus-visible{background:#A53209;border-color:#A53209}
.badge-brand{color:#00795B}
.hv-strand__label{color:rgba(255,255,255,.74)}
/* 深色区块内保持浅色文字（避免上面的蓝色覆盖到深底文案） */
.home-v2 .hv-cta .hv-eyebrow,
.home-v2 .hv-metrics .hv-eyebrow{color:#8ec5ff}

/* ── QA-2026-09-16 对比度补充（逐选择器兜底，之前用 --tr-gray-500 / --tr-blue） ── */
.hv-mi-card p,.hv-bfp-card p,.oem-flow__body span,.hv-range__row--head span{color:#565C64}
.product-spec-mini{color:#43506A}
.product-spec-mini strong{color:#A53209}
.step.active .label,.step .label{color:#C03A0E}
.oem-flow__idx{color:#C03A0E}
.news-related__list a,.blog-cat:hover{color:#C03A0E}
.hv-mi-card__icon{color:#C03A0E}

/* ==========================================================================
   QA-2026-09-16 — 深色工艺区块
   问题：生产流程区块（Raw materials … Shipping）文字为白色，但所在 section
   没有任何深色背景，最终落在白色 main 上 → 白字白底完全不可读。
   修复：给该 section 加 --dark 修饰类并提供深色底 + 浅色文字。
   ========================================================================== */
.home-v2 .hv-section--dark{
  background:linear-gradient(180deg,#06142B 0%,#041022 100%);
  color:#fff;
}
.home-v2 .hv-section--dark h1,
.home-v2 .hv-section--dark h2,
.home-v2 .hv-section--dark h3,
.home-v2 .hv-section--dark .hv-factory-copy h2{color:#fff}
.home-v2 .hv-section--dark p,
.home-v2 .hv-section--dark .hv-factory-copy p{color:rgba(255,255,255,.76)}
.home-v2 .hv-section--dark .hv-eyebrow{color:#8ec5ff}
.home-v2 .hv-section--dark .hv-flow__step{
  color:rgba(255,255,255,.88);
  border-bottom-color:rgba(255,255,255,.14);
}
.home-v2 .hv-section--dark .hv-flow__idx{color:#C03A0E}
.home-v2 .hv-section--dark .hv-cert strong{color:#fff}
.home-v2 .hv-section--dark .hv-cert span{color:rgba(255,255,255,.7)}
.home-v2 .hv-section--dark .hv-factory-media{border-color:rgba(255,255,255,.12)}

/* QA-2026-09-16: 首页/全站页头 Logo 略微左移（视觉对齐容器边缘） */
.site-head .bar .brand{margin-left:-8px}
@media (max-width:640px){ .site-head .bar .brand{margin-left:-4px} }

/* ==========================================================================
   QA-2026-09-20 — 产品列表工具栏移动端横向溢出
   问题：/products/pla/ 与 /products/tpu/ 在 390px 视口下
         scrollWidth 456 > clientWidth 390（溢出 +66px）。
         根因：工具栏 .flex-between 内既有「N products」标题，
         又有 200px 固定宽输入框 + 按钮 + “← All Types” 链接，
         单行无法容纳，把容器撑宽。
   修复：窄屏改为纵向堆叠，搜索框改为自适应宽度。
   ========================================================================== */
.prod-search-input{width:200px}
@media (max-width:780px){
  .prod-toolbar{flex-direction:column;align-items:stretch;gap:var(--sp-3)}
  .prod-toolbar>.flex{gap:var(--sp-2);flex-wrap:wrap;min-width:0}
  .prod-toolbar form{flex:1 1 100%;min-width:0}
  .prod-toolbar .prod-search-input{width:100%;min-width:0;flex:1 1 auto}
  .prod-toolbar form>button{flex:0 0 auto}
}

/* ==========================================================================
   QA-2026-09-20 (P3, a11y): footer legal links tap-target size
   --------------------------------------------------------------------------
   WCAG 2.5.8 (Target Size Minimum, AA) asks for >=24x24 CSS px. The legal
   links in .foot-legal render ~20px tall at 12.5px font, so on touch devices
   they were just under the minimum. Padding is vertical-only and the row is
   already flex/centred, so layout is unaffected.
   ========================================================================== */
@media (max-width: 900px) {
  .foot-legal .left > a,
  .foot-legal .left > button.lang-trigger {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .foot-legal .left > a { padding-left: 4px; padding-right: 4px; margin-left: -4px; }
}

/* ==========================================================================
   QA-2026-09-20: product detail page — printing tips, visible FAQ, mobile CTA
   --------------------------------------------------------------------------
   ① .pd-tips   — renders met_printing_guide.tips (already-managed CMS HTML)
   ② .pd-faq    — visible counterpart of the FAQPage JSON-LD. Google requires FAQ
                  structured data to match content a visitor can actually see;
                  this block renders the very same question/answer pairs.
   ③ .pd-sticky-cta — Quote / Sample bar for narrow screens only; desktop already
                  has the sticky "At a Glance" sidebar card with the same CTAs.
   ========================================================================== */
.pd-page .pd-tips {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--tr-cyan);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.pd-page .pd-tips > *:first-child { margin-top: 0; }
.pd-page .pd-tips > *:last-child { margin-bottom: 0; }
.pd-page .pd-tips ul, .pd-page .pd-tips ol { margin: var(--sp-2) 0 0; padding-left: 1.25em; }
.pd-page .pd-tips li { margin-bottom: 4px; }

.pd-faq { display: grid; gap: 10px; max-width: 900px; }
.pd-faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  padding: 0 var(--sp-4);
}
.pd-faq__item[open] { border-color: var(--brand-300, var(--line)); }
.pd-faq__item > summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 0;
  font-weight: 600;
  color: var(--ink-900);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 48px;
}
.pd-faq__item > summary::-webkit-details-marker { display: none; }
.pd-faq__item > summary::after {
  content: "+";
  margin-left: auto;
  font-weight: 400;
  color: var(--brand-500);
  flex: 0 0 auto;
}
.pd-faq__item[open] > summary::after { content: "–"; }
.pd-faq__a {
  padding: 0 0 16px;
  color: var(--tr-gray-600, #475569);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* Mobile / narrow-screen sticky conversion bar */
.pd-sticky-cta { display: none; }
@media (max-width: 900px) {
  .pd-sticky-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(8px);
  }
  .pd-sticky-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-900);
    font-weight: 650;
    font-size: var(--fs-sm);
    text-decoration: none;
  }
  .pd-sticky-cta__btn--primary {
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
  }
  /* keep page content clear of the fixed bar (no JS needed) */
  body:has(.pd-sticky-cta) { padding-bottom: 78px; }
  @supports not selector(:has(*)) { .pd-sticky-cta { position: static; } }
}

/* QA-2026-09-20: legal pages published in English only (pt/pl/tr/ko/ru).
   Clear, unobtrusive notice; the site's own legal text states English governs. */
.legal-fallback-note {
  margin: 0 0 var(--sp-4);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--tr-cyan);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  font-size: var(--fs-sm);
  color: var(--tr-gray-600, #475569);
}