@charset "UTF-8";
/* ============================================================
   优钢宝 UGB — 内页专用样式表 pages.css
   ------------------------------------------------------------
   依赖：css/site.css（设计变量 :root 与公共组件均在其中）
   原则：
     1. 颜色/圆角/阴影一律取 var(--*) 令牌，不写死色值；
     2. 只新增内页需要的组件（页头、面包屑、侧栏、表格、
        手风琴、分页、时间线、图库、文档列表 …）；
     3. 列表类组件（.prod/.app/.case-card/.news-card/.cert-card）
        直接复用 site.css，内页不重复实现。

   ★★ 已知的「同一选择器两个文件各定义一次」（2026-10-20 审计，14 个）★★
   ------------------------------------------------------------
   本文件在页面里**后加载**，所以下面这些选择器以本文件为准，
   去 site.css 里改它们**不会有任何效果**（浏览器用后出现的声明覆盖）：

     body、a、.wrap、.page-hero、.page-hero h1
     .prod-card h3
     .prod-card .prod-spec / li / li b / li span
     .note、.side-card、.rfq-del、.rfq-del:hover

   约定（避免再踩）：
     · 想改上面这些的样式 → 只改本文件；
     · 其它组件 → 只改 site.css，本文件不再新增同名规则；
     · 新增规则前先 grep 一下 site.css，别复制粘贴出第二份。

   ★ 为什么没有把两份彻底合并：
     .prod-card 系列在首页（site.css 版本，卡片更小）与产品目录页（本文件版本，
     含规格表）**本就是两套不同尺寸**，盲目合并会把首页卡片撑大。
     真要合并需要先拆分出 .prod-card--home / .prod-card--catalog 两个修饰类，
     属于独立的重构，不该混在样式修补里做。
   ============================================================ */

/* ============================================================
   1. 内页页头 Banner
   ============================================================ */
/* ★★ 内页 hero 的**最终样式在本文件**。site.css 里也有同名 `.page-hero` 规则，
   但本文件在页面里后加载 ⇒ 覆盖前面的。改外观请只改这里（2026-10-19 踩过：
   在 site.css 里加了背景图却完全看不出变化，因为被这一份的 background 整体盖掉）。 */
.page-hero{
  position:relative;overflow:hidden;color:#fff;
  /* 背景层（从上到下）：
     ① 遮罩：左侧 .88 压住标题区，中间降到 .30、右侧 .46 —— 既能看清钢板，又不糊字；
     ② 两团装饰光（橙/蓝），压在照片**上面**才有存在感；
     ③ 实景照片：1600×620 JPEG，center/cover 不变形；
     ④ 兜底渐变：照片没加载时的底色。 */
  background:
    linear-gradient(100deg,rgba(6,16,26,.88) 0%,rgba(6,16,26,.66) 30%,rgba(6,16,26,.30) 66%,rgba(6,16,26,.46) 100%),
    radial-gradient(760px 420px at 84% 8%, rgba(255,122,24,.22), transparent 62%),
    radial-gradient(680px 460px at 4% 96%, rgba(45,110,180,.24), transparent 66%),
    url('/images/hero/page-hero.jpg') center/cover no-repeat,
    linear-gradient(150deg,var(--navy2),var(--navy));
  padding:34px 0 30px;
}
.page-hero::before{
  /* 网格纹理：原来 .5 不透明度，压在纯色上是"科技感"；压在照片上会糊成噪点，降到 .26 */
  content:"";position:absolute;inset:0;opacity:.26;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(circle at 60% 40%, #000 12%, transparent 82%);
          mask-image:radial-gradient(circle at 60% 40%, #000 12%, transparent 82%);
}
.page-hero > .wrap{position:relative;z-index:2}
.page-hero .ph-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:800;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--accent2);font-family:Arial,sans-serif;margin-bottom:8px;
}
.page-hero .ph-eyebrow::before{content:"";width:20px;height:2.5px;border-radius:2px;background:var(--accent)}
.page-hero h1{
  font-size:clamp(23px,2.9vw,34px);font-weight:800;letter-spacing:-.5px;
  line-height:1.2;margin-bottom:10px;
  text-shadow:0 2px 14px rgba(3,10,18,.55);   /* 背景是照片，靠暗影保证可读 */
}
.page-hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--accent),#ffc46b);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.page-hero .ph-lead{
  font-size:14.5px;line-height:1.7;color:#dbe6f0;max-width:720px;
  text-shadow:0 1px 10px rgba(3,10,18,.5);
}
.page-hero .ph-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.page-hero .ph-kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;max-width:900px;margin-top:20px;
}
.page-hero .ph-kpi{
  padding:12px 14px;border-radius:var(--r);
  /* 底图换成实景照片后，原来的 .10/.04 白几乎看不见 —— 卡片和钢板糊在一起，
     数字虽然还读得出，但"四块卡"的结构消失了。这里加一档：
     更实的白色（.22→.09）+ 毛玻璃 + 更亮的描边 + 一点投影，
     让它从照片上"浮起来"而不是贴在上面。 */
  background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.09));
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 10px 26px rgba(4,12,20,.22);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:.3s var(--ease);
}
.page-hero .ph-kpi:hover{border-color:rgba(255,122,24,.42);transform:translateY(-4px)}
.page-hero .ph-kpi b{display:block;font-size:24px;font-weight:800;color:var(--accent2);line-height:1;font-family:Arial,sans-serif}
.page-hero .ph-kpi b i{font-style:normal;font-size:12.5px;margin-left:3px}
.page-hero .ph-kpi span{display:block;font-size:12px;color:#9db4cc;margin-top:8px}

/* 面包屑 */
.crumb{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:12.5px;color:#8ba3ba;margin-bottom:16px;
}
.crumb a{color:#a9bed3;transition:color .22s}
.crumb a:hover{color:var(--accent2)}
.crumb svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;opacity:.6;stroke-linecap:round;stroke-linejoin:round}
.crumb .cur{color:#fff;font-weight:600}

/* ============================================================
   2. 页面骨架：主区 + 侧栏
   ============================================================ */
.page-main{padding:64px 0 72px;background:#fff}
.page-main.tight{padding:48px 0 56px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 306px;gap:44px;align-items:start}
/* 与 .layout 的两列配套：主列必须 min-width:0，长表格/长代码块才不会撑破栅格 */
.layout-main{min-width:0}
.layout-wide{grid-template-columns:minmax(0,1fr)}
.layout-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px}

.sec-block{margin-bottom:52px}
.sec-block:last-child{margin-bottom:0}
.sec-block > h2{
  font-size:clamp(20px,2.3vw,27px);font-weight:800;color:var(--navy);
  letter-spacing:-.3px;line-height:1.35;margin-bottom:14px;
}
.sec-block > h3{font-size:19px;font-weight:800;color:var(--navy);margin-bottom:12px}
.sec-block > p{font-size:14.5px;color:var(--muted);line-height:1.9;margin-bottom:14px}
.sec-block > p:last-child{margin-bottom:0}
.sec-block ul.dot{display:flex;flex-direction:column;gap:9px;margin:6px 0 14px}
.sec-block ul.dot li{position:relative;padding-left:20px;font-size:14.5px;color:#3d5570;line-height:1.8}
.sec-block ul.dot li::before{
  content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;
  border-radius:50%;background:var(--accent);
}
.sec-block ul.num{display:flex;flex-direction:column;gap:12px;counter-reset:n}
.sec-block ul.num li{
  position:relative;padding-left:38px;font-size:14.5px;color:#3d5570;line-height:1.8;counter-increment:n;
}
.sec-block ul.num li::before{
  content:counter(n,decimal-leading-zero);position:absolute;left:0;top:2px;
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:var(--accent3);color:var(--accent);font-size:11.5px;font-weight:800;font-family:Arial,sans-serif;
}

/* 标题行（左标题 + 右操作） */
.block-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-bottom:22px;
}
.block-head h2{font-size:clamp(19px,2.2vw,25px);font-weight:800;color:var(--navy);letter-spacing:-.3px}
.block-head p{font-size:13.5px;color:var(--muted);margin-top:6px}

/* ============================================================
   3. 侧栏：子导航 + 卡片
   ============================================================ */
.side{display:flex;flex-direction:column;gap:18px;position:sticky;top:96px}
.side-nav{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;
  box-shadow:var(--shadow);
}
.side-nav h4{
  font-size:13.5px;font-weight:800;color:#fff;padding:14px 18px;
  background:linear-gradient(135deg,var(--navy2),var(--navy));letter-spacing:.4px;
}
.side-nav ul{display:flex;flex-direction:column}
.side-nav li{border-bottom:1px solid #eef3f8}
.side-nav li:last-child{border-bottom:none}
.side-nav a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 18px;font-size:13.5px;font-weight:600;color:#3d5570;transition:.24s;
}
.side-nav a:hover{background:var(--accent3);color:var(--accent);padding-left:22px}
.side-nav a.on{background:var(--accent3);color:var(--accent);font-weight:800;box-shadow:inset 3px 0 0 var(--accent)}
.side-nav a svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;opacity:.45;stroke-linecap:round;stroke-linejoin:round}
.side-nav a:hover svg,.side-nav a.on svg{opacity:1}

.side-card{
  border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;background:#fff;
  box-shadow:var(--shadow);
}
.side-card.dark{
  border:none;color:#fff;
  background:
    radial-gradient(320px 180px at 88% 6%, rgba(255,122,24,.28), transparent 66%),
    linear-gradient(150deg,var(--navy2),var(--navy));
}
.side-card h4{font-size:15px;font-weight:800;color:var(--navy);margin-bottom:8px}
.side-card.dark h4{color:#fff}
.side-card p{font-size:13px;color:var(--muted);line-height:1.8;margin-bottom:14px}
.side-card.dark p{color:#a9bed3}
.side-card .btn{width:100%}
.side-card .side-line{
  display:flex;align-items:center;gap:10px;padding:9px 0;font-size:13px;color:#3d5570;
  border-bottom:1px dashed #e3ebf4;
}
.side-card .side-line:last-child{border-bottom:none}
.side-card.dark .side-line{color:#cfe0f0;border-color:rgba(255,255,255,.12)}
.side-card .side-line svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:2;flex:none;stroke-linecap:round;stroke-linejoin:round}
.side-card .side-line b{font-weight:700}

/* 侧栏文档下载 */
.doc-list{display:flex;flex-direction:column;gap:8px}
.doc-list a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  background:#f4f8fc;border:1px solid #e6eef7;font-size:13px;font-weight:600;color:#33475c;transition:.24s;
}
.doc-list a:hover{background:var(--accent3);border-color:rgba(255,122,24,.35);color:var(--accent);transform:translateX(3px)}
.doc-list a svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;flex:none;stroke-linecap:round;stroke-linejoin:round}
.doc-list a em{font-style:normal;margin-left:auto;font-size:11px;color:var(--muted2);font-family:Arial,sans-serif}

/* ============================================================
   4. 图片占位块（无真实素材时的统一视觉，避免外链图挂掉）
   ============================================================ */
.ph-photo{
  position:relative;overflow:hidden;border-radius:var(--r);min-height:190px;
  display:grid;place-items:center;border:1px solid var(--line);
  background:linear-gradient(140deg,#e7eff8,#d6e4f2);
}
.ph-photo::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(45,74,107,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(45,74,107,.07) 1px,transparent 1px);
  background-size:34px 34px;
}
.ph-photo svg{width:54px;height:54px;stroke:rgba(45,74,107,.5);fill:none;stroke-width:1.4;position:relative;z-index:1}
.ph-photo .ph-tag{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-size:11.5px;font-weight:700;color:#33475c;background:rgba(255,255,255,.85);
  padding:4px 10px;border-radius:6px;letter-spacing:.3px;
}
.ph-photo.dark{background:linear-gradient(150deg,#123, #0b1c2e);border-color:rgba(255,255,255,.1)}
.ph-photo.dark::before{background-image:
  linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);}
.ph-photo.dark svg{stroke:rgba(255,122,24,.75)}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}

/* ============================================================
   5. 键值 / 参数表
   ============================================================ */
.kv-list{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;
}
.kv-list .kv{
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;
  padding:12px 18px;font-size:13.5px;border-bottom:1px solid #eef3f8;
}
.kv-list .kv:last-child{border-bottom:none}
.kv-list .kv:nth-child(odd){background:#fafcfe}
.kv-list .kv dt{color:var(--muted2);font-weight:600}
.kv-list .kv dd{color:#2f455c;font-weight:600;line-height:1.7}

.tb-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
table.tb{width:100%;border-collapse:collapse;min-width:620px;font-size:13.5px}
table.tb thead th{
  background:linear-gradient(180deg,#f6fafd,#eef4fa);color:var(--navy);font-weight:800;
  text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);white-space:nowrap;
}
table.tb tbody td{padding:12px 16px;border-bottom:1px solid #eef3f8;color:#3d5570;line-height:1.7}
table.tb tbody tr:nth-child(even){background:#fafcfe}
table.tb tbody tr:hover{background:var(--accent3)}
table.tb tbody tr:last-child td{border-bottom:none}
table.tb td b{color:var(--navy)}
table.tb .num{font-family:Arial,sans-serif;font-weight:700;color:var(--accent)}

/* ============================================================
   6. Tabs / 手风琴 / 步骤条
   ============================================================ */
.tabs{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;
  padding:7px;background:#f2f7fc;border:1px solid var(--line);border-radius:12px;
}
.tabs button{
  padding:9px 18px;border-radius:9px;font-size:13.5px;font-weight:700;color:#42586f;transition:.24s;
}
.tabs button:hover{color:var(--accent);background:#fff}
.tabs button.on{background:var(--navy);color:#fff}
.tab-panel{display:none}
.tab-panel.on{display:block;animation:fadeUp .38s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.accordion{display:flex;flex-direction:column;gap:10px}
.acc-item{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;transition:.28s}
.acc-item:hover{border-color:#d6e3f0}
.acc-item.open{border-color:rgba(255,122,24,.4);box-shadow:var(--shadow)}
.acc-head{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  padding:16px 20px;font-size:14.5px;font-weight:700;color:var(--navy);cursor:pointer;
}
.acc-head .q{
  width:24px;height:24px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:var(--accent3);color:var(--accent);font-size:12px;font-weight:800;font-family:Arial,sans-serif;
}
.acc-head span{flex:1;min-width:0}
.acc-head .caret{width:14px;height:14px;stroke:var(--muted2);fill:none;stroke-width:2.4;flex:none;transition:transform .3s;stroke-linecap:round;stroke-linejoin:round}
.acc-item.open .acc-head .caret{transform:rotate(180deg);stroke:var(--accent)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .36s var(--ease)}
.acc-body-in{padding:0 20px 18px 56px;font-size:14px;color:var(--muted);line-height:1.9}

.steps{display:flex;flex-direction:column;gap:0;counter-reset:s}
.steps .step{position:relative;padding:0 0 26px 46px;counter-increment:s;border-left:2px dashed #dde7f2;margin-left:15px}
.steps .step:last-child{border-left-color:transparent;padding-bottom:0}
.steps .step::before{
  content:counter(s);position:absolute;left:-16px;top:-2px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#ff5e00);color:#fff;
  font-size:12.5px;font-weight:800;font-family:Arial,sans-serif;box-shadow:0 4px 12px rgba(255,122,24,.36);
}
.steps .step h4{font-size:15px;font-weight:800;color:var(--navy);margin-bottom:6px}
.steps .step p{font-size:13.5px;color:var(--muted);line-height:1.8}

/* ============================================================
   7. 时间线（发展历程）
   —— 2026-10-19 改版：年份独立成左栏、内容在右，轴线居中。
      原来年份是内容上面的一个小胶囊，整条时间轴挤在左边 30px 内，
      在 1200px 宽的正文里既没有"时间轴"的形态、正文也拉成一行很长。
      用**逻辑属性**（inset-inline-start / text-align:end）写，阿拉伯语站（dir=rtl）自动镜像。
   ============================================================ */
.timeline{position:relative;max-width:920px;padding-inline-start:96px}
.timeline::before{content:"";position:absolute;inset-inline-start:38px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--accent),#dde7f2)}
.timeline .tl{position:relative;padding:0 0 30px}
.timeline .tl:last-child{padding-bottom:0}
.timeline .tl::before{
  content:"";position:absolute;inset-inline-start:-65px;top:5px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:3px solid var(--accent);box-shadow:0 0 0 4px #fff;
}
.timeline .tl b{
  position:absolute;inset-inline-start:-96px;top:1px;width:56px;text-align:end;
  font-family:Arial,sans-serif;font-size:15px;font-weight:800;color:var(--accent);
  background:none;padding:0;margin:0;
}
.timeline .tl h4{font-size:16px;font-weight:800;color:var(--navy);margin-bottom:6px}
.timeline .tl p{font-size:13.5px;color:var(--muted);line-height:1.85;max-width:640px}
@media (max-width:640px){
  /* 手机上左栏放不下 96px：年份回到标题上方，轴线贴左 */
  .timeline{padding-inline-start:64px}
  .timeline::before{inset-inline-start:7px}
  .timeline .tl::before{inset-inline-start:-64px}
  .timeline .tl b{position:static;display:inline-block;width:auto;text-align:start;margin-bottom:7px;
    background:var(--accent3);padding:2px 10px;border-radius:6px}
  .timeline .tl p{max-width:none}
}

/* ============================================================
   8. 询价条 / 提示框 / 徽标
   ============================================================ */
.quote-strip{
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  padding:26px 28px;border-radius:var(--r-lg);color:#fff;position:relative;overflow:hidden;
  background:
    radial-gradient(420px 220px at 90% 10%, rgba(255,122,24,.26), transparent 64%),
    linear-gradient(150deg,var(--navy2),var(--navy));
}
.quote-strip h3{font-size:19px;font-weight:800;margin-bottom:6px}
.quote-strip p{font-size:13.5px;color:#a9bed3}
.quote-strip .qs-actions{display:flex;gap:10px;flex-wrap:wrap}

.note{
  display:flex;gap:12px;padding:14px 16px;border-radius:12px;font-size:13.5px;line-height:1.8;
  background:#f2f7fc;border:1px solid #e2ecf6;color:#3d5570;
}
.note svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:2;flex:none;margin-top:3px;stroke-linecap:round;stroke-linejoin:round}
.note.warn{background:#fff8f2;border-color:#ffdfc4;color:#8a4a10}
.note.warn svg{stroke:#e0761a}
.note.ok{background:#f1faf4;border-color:#cfead9;color:#146b3a}
.note.ok svg{stroke:#12a150}
.note b{font-weight:800}

.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:7px;
  font-size:11.5px;font-weight:800;letter-spacing:.3px;
  background:#eef4fa;color:#3d5570;
}
.badge.accent{background:var(--accent3);color:#b14000}
.badge.green{background:#e8f7ef;color:#0f7a44}
.badge.navy{background:var(--navy);color:#fff}
.badge.line{background:#fff;border:1px solid var(--line)}

/* 迷你数据块 */
.stat-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.stat-mini .sm{padding:18px;border-radius:var(--r);border:1px solid var(--line);background:#fafcfe;text-align:center}
.stat-mini .sm b{display:block;font-size:23px;font-weight:800;color:var(--accent);font-family:Arial,sans-serif;line-height:1}
.stat-mini .sm b i{font-style:normal;font-size:12px;margin-left:3px}
.stat-mini .sm span{display:block;font-size:12.5px;color:var(--muted);margin-top:8px}

/* ============================================================
   9. 图文两栏 / 相关推荐 / 办事处 / 分页
   ============================================================ */
.media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:center}
.media.rev .media-tx{order:2}
.media .media-tx h3{font-size:19px;font-weight:800;color:var(--navy);margin-bottom:12px}
.media .media-tx p{font-size:14px;color:var(--muted);line-height:1.9;margin-bottom:12px}
/* 图文两栏里的图片侧（.media 原本只写了文字侧样式）。
   之前正文块里的实景照没有容器类，直接放 <img> 会按原始尺寸铺满、
   把两栏挤成一栏 —— 也让「关于我们」四个子页长期一张图都没有。 */
.media-fig{margin:0;border-radius:14px;overflow:hidden;background:#eef3f8;
  box-shadow:0 16px 38px rgba(8,19,31,.10)}
.media-fig img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.media-fig figcaption{padding:10px 14px;font-size:12px;line-height:1.6;color:var(--muted2);
  background:#fff;border-top:1px solid var(--line)}

/* ============================================================
   联系我们（/contact.html）
   三通道快捷区 + 左信息 / 右表单。
   原来的版式是「信息 | 假地图 | 表单跨两列」——地图是占位图标，
   表单被挤到下面一整行，手机上要滚很久才看到输入框。
   ============================================================ */
.ct-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ct-quick-item{
  display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:14px;
  border:1px solid var(--line);background:#fff;text-decoration:none;transition:.3s var(--ease);
}
.ct-quick-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.ct-q-ic{
  width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,#eef4fa,#dfe9f5);color:var(--steel);transition:.3s;
}
.ct-quick-item:hover .ct-q-ic{background:linear-gradient(140deg,var(--accent),#ff5e00);color:#fff}
.ct-q-ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.ct-quick-item b{display:block;font-size:11.5px;color:var(--muted2);font-weight:700;letter-spacing:.5px;margin-bottom:3px}
.ct-quick-item em{display:block;font-style:normal;font-size:15px;font-weight:800;color:var(--navy);line-height:1.4}
.ct-quick-item small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.5}

.ct-layout{display:grid;grid-template-columns:0.82fr 1.18fr;gap:36px;align-items:start}
.ct-side{display:flex;flex-direction:column;gap:18px}
.ct-card{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:24px 26px}
.ct-card h3{font-size:16px;font-weight:800;color:var(--navy);margin:0 0 8px}
.ct-line{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px dashed #eef2f6}
.ct-line:last-child{border-bottom:0;padding-bottom:0}
.ct-line .ct-ic{flex:none;margin-top:2px;color:var(--accent)}
.ct-line .ct-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ct-line b{display:block;font-size:11.5px;color:var(--muted2);font-weight:700;letter-spacing:.4px;margin-bottom:2px}
.ct-line span,.ct-line a{font-size:14px;color:var(--navy);font-weight:600;line-height:1.7;
  word-break:break-word;text-decoration:none}
.ct-line a:hover{color:var(--accent)}
.ct-figure{margin:0;border-radius:var(--r-lg);overflow:hidden;background:#eef3f8;
  box-shadow:0 14px 34px rgba(8,19,31,.10)}
.ct-figure img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.ct-figure figcaption{padding:10px 14px;font-size:12px;line-height:1.6;color:var(--muted2);
  background:#fff;border-top:1px solid var(--line)}

@media (max-width:1024px){
  .ct-quick{grid-template-columns:1fr}
  .ct-layout{grid-template-columns:1fr;gap:26px}
}

.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:18px}
.related{
  display:flex;align-items:center;gap:13px;padding:16px 18px;border-radius:var(--r);
  border:1px solid var(--line);background:#fff;transition:.3s var(--ease);
}
.related:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.related .r-ic{
  width:42px;height:42px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,#eef4fa,#dfe9f5);color:var(--steel);transition:.3s;
}
.related:hover .r-ic{background:linear-gradient(140deg,var(--accent),#ff5e00);color:#fff}
.related .r-ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.related b{display:block;font-size:14px;font-weight:700;color:var(--navy);margin-bottom:3px}
.related small{display:block;font-size:11.5px;color:var(--muted2);font-family:Arial,sans-serif;letter-spacing:.4px}

.offices{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:18px}
.office{padding:20px;border-radius:var(--r);border:1px solid var(--line);background:#fff;transition:.3s var(--ease)}
.office:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.office .of-flag{
  display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:1.2px;color:var(--accent);
  background:var(--accent3);padding:4px 9px;border-radius:6px;margin-bottom:11px;font-family:Arial,sans-serif;
}
.office h4{font-size:15px;font-weight:800;color:var(--navy);margin-bottom:9px}
.office p{font-size:13px;color:var(--muted);line-height:1.8}
.office .of-line{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#3d5570;margin-top:8px}
.office .of-line svg{width:14px;height:14px;stroke:var(--accent);fill:none;stroke-width:2;flex:none;stroke-linecap:round;stroke-linejoin:round}

.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:38px;flex-wrap:wrap}
.pager a,.pager span{
  min-width:38px;height:38px;padding:0 12px;border-radius:10px;display:grid;place-items:center;
  font-size:13.5px;font-weight:700;color:#42586f;background:#f2f7fc;border:1px solid var(--line);transition:.24s;
}
.pager a:hover{background:var(--accent3);color:var(--accent);border-color:rgba(255,122,24,.35)}
.pager .on{background:var(--navy);color:#fff;border-color:var(--navy)}
.pager .dis{opacity:.45;cursor:not-allowed}
.pager .pg-info{min-width:auto;background:none;border:none;color:var(--muted2);font-weight:600;padding:0 6px}

/* 列表条目（新闻 / 文档 / 公告的横向排布） */
.nl{display:flex;flex-direction:column;gap:14px}
.nl-item{
  display:flex;gap:18px;padding:20px 22px;border-radius:var(--r);border:1px solid var(--line);
  background:#fff;transition:.3s var(--ease);
}
.nl-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.nl-date{
  flex:none;width:76px;text-align:center;border-right:1px dashed #e3ebf4;padding-right:16px;
}
.nl-date b{display:block;font-size:21px;font-weight:800;color:var(--accent);font-family:Arial,sans-serif;line-height:1.1}
.nl-date span{display:block;font-size:11.5px;color:var(--muted2);margin-top:4px;font-family:Arial,sans-serif}
.nl-tx{flex:1;min-width:0}
.nl-tx h3{font-size:15.5px;font-weight:700;color:var(--navy);line-height:1.6;margin-bottom:7px;transition:.24s}
.nl-item:hover .nl-tx h3{color:var(--accent)}
.nl-tx p{font-size:13.5px;color:var(--muted);line-height:1.8}
.nl-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--muted2)}
.nl-meta span{display:inline-flex;align-items:center;gap:6px}
.nl-meta svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 文章正文 */
.article{max-width:860px}
/* ★ 正文标题同时匹配 h1/h2：新闻正文原来的二级标题被误写成 h1（一页两个 h1 会稀释主题），
   已统一降为 h2；这里让 h2 沿用同样的字号，视觉不变、语义正确。 */
.article h1,.article h2{font-size:clamp(22px,2.7vw,32px);font-weight:800;color:var(--navy);line-height:1.35;margin-bottom:16px}
.article .art-meta{
  display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted2);
  padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:24px;font-family:Arial,sans-serif;
}
.article .art-meta span{display:inline-flex;align-items:center;gap:6px}
.article .art-meta svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.article p{font-size:15px;color:#33475c;line-height:2;margin-bottom:16px}
.article h2{font-size:19px;font-weight:800;color:var(--navy);margin:28px 0 12px}
.article h3{font-size:16.5px;font-weight:800;color:var(--navy);margin:22px 0 10px}
.article blockquote{
  margin:20px 0;padding:16px 20px;border-left:3px solid var(--accent);
  background:#fafcfe;border-radius:0 12px 12px 0;font-size:14.5px;color:#3d5570;line-height:1.9;
}
.article img,.article .art-img{border-radius:var(--r);margin:20px 0}

/* ============================================================
   10. 搜索页 / 空状态
   ============================================================ */
.search-lg{display:flex;gap:10px;max-width:620px}
.search-lg input{
  flex:1;height:50px;padding:0 20px;border-radius:12px;
  border:1.5px solid var(--line);background:#fff;outline:none;font-size:14.5px;transition:.25s;
}
.search-lg input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,122,24,.12)}
.search-lg button{
  height:50px;padding:0 26px;border-radius:12px;font-size:14.5px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--accent),#ff5e00);transition:.28s;
}
.search-lg button:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,122,24,.4)}
.search-hint{font-size:13px;color:var(--muted);margin-top:14px}
.search-hint a{color:var(--accent);font-weight:700;margin-right:14px}

.empty{
  text-align:center;padding:62px 24px;border:1px dashed var(--line);border-radius:var(--r-lg);
  background:#fafcfe;color:var(--muted);
}
.empty svg{width:44px;height:44px;stroke:var(--muted2);fill:none;stroke-width:1.6;margin:0 auto 14px}
.empty b{display:block;font-size:16px;font-weight:800;color:var(--navy);margin-bottom:8px}
.empty p{font-size:13.5px;line-height:1.8}

/* 询价单页 */
.rfq-table input{
  width:88px;height:36px;padding:0 10px;border-radius:9px;border:1.5px solid var(--line);
  background:#fff;outline:none;font-size:13.5px;font-family:Arial,sans-serif;text-align:center;
}
.rfq-table input:focus{border-color:var(--accent)}
.rfq-del{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--muted);transition:.24s;
}
.rfq-del:hover{border-color:#e0554b;color:#e0554b;background:#fff5f4}
.rfq-del svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rfq-total{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 22px;border-radius:var(--r);background:#f4f8fc;border:1px solid #e6eef7;margin-top:18px;
}
.rfq-total b{font-size:16px;font-weight:800;color:var(--navy)}
.rfq-total b i{font-style:normal;color:var(--accent);font-family:Arial,sans-serif;margin-left:6px}

/* ============================================================
   11. 表单（内页复用咨询表单，样式与首页一致）
   ============================================================ */
.form-card.light{border:1px solid var(--line);box-shadow:var(--shadow)}

/* ============================================================
   12. 响应式
   ============================================================ */
@media (max-width:1180px){
  .layout{grid-template-columns:minmax(0,1fr) 272px;gap:32px}
}
@media (max-width:1024px){
  .layout{grid-template-columns:minmax(0,1fr);gap:26px}
  .side{position:static;flex-direction:row;flex-wrap:wrap}
  .side > *{flex:1 1 280px}
  .media{grid-template-columns:minmax(0,1fr)}
  .media.rev .media-tx{order:0}
}
@media (max-width:640px){
  .page-hero{padding:32px 0 40px}
  .page-main{padding:44px 0 52px}
  .kv-list .kv{grid-template-columns:1fr;gap:4px}
  .nl-item{flex-direction:column;gap:12px}
  .nl-date{width:auto;text-align:left;border-right:none;border-bottom:1px dashed #e3ebf4;padding:0 0 10px;display:flex;align-items:baseline;gap:8px}
  .nl-date b{font-size:17px}
  .nl-date span{margin-top:0}
  .quote-strip{padding:22px 20px}
  .search-lg{flex-direction:column}
  .search-lg button{width:100%}
  .acc-body-in{padding-left:20px}
  .side{flex-direction:column}
}

/* ============================================================
   关于我们主页（/about/）
   —— 与"能力/质量/新闻"都不同的版式：**左右交替的长条**，
      像一本企业画册（左图右文 / 左文右图），而不是卡片墙。
   ============================================================ */
.ab-section{background:#fbfaf7;padding:52px 0 64px;border-top:1px solid #f0ece4}
.ab-intro{max-width:700px;margin-bottom:28px}
.ab-eyebrow{font:800 10.5px/1 Arial,sans-serif;letter-spacing:2.4px;color:var(--accent)}
.ab-intro h2{font-size:clamp(20px,2.2vw,27px);font-weight:800;color:var(--navy);margin:10px 0 8px}
.ab-intro p{font-size:13.5px;line-height:1.8;color:var(--muted);margin:0}
.ab-list{display:grid;gap:22px}
.ab-item{
  display:grid;grid-template-columns:0.85fr 1.15fr;text-decoration:none;
  background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.ab-item.is-flip{grid-template-columns:1.15fr 0.85fr}
.ab-item.is-flip .ab-media{order:2}
.ab-item:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(8,19,31,.10);border-color:transparent}
.ab-media{margin:0;overflow:hidden;background:#eef3f8}
.ab-media img{display:block;width:100%;height:100%;min-height:230px;object-fit:cover;
  transition:transform .6s var(--ease)}
.ab-item:hover .ab-media img{transform:scale(1.04)}
.ab-body{display:flex;flex-direction:column;padding:30px 34px}
.ab-no{font:800 12px/1 Arial,sans-serif;letter-spacing:1.4px;color:var(--accent);margin-bottom:10px}
.ab-body h3{font-size:20px;font-weight:800;color:var(--navy);margin:0 0 10px;letter-spacing:-.2px}
.ab-body p{font-size:13.5px;line-height:1.8;color:var(--muted);margin:0 0 16px}
.ab-facts{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:0}
.ab-facts li{display:flex;align-items:baseline;gap:10px;padding:8px 0;
  border-bottom:1px dashed #eef2f6;font-size:13px;color:#2f455c}
.ab-facts li:last-child{border-bottom:0}
.ab-facts li span{color:var(--muted2);min-width:66px;flex:none}
.ab-facts li b{font-weight:800;color:var(--navy)}
.ab-go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:800;color:var(--accent)}
.ab-go svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.ab-item:hover .ab-go svg{transform:translateX(4px)}
.ab-cta{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:26px;padding:24px 26px;border-radius:16px;
  background:linear-gradient(120deg,#0f2338,#1d3b57);color:#fff;
}
.ab-cta-txt b{display:block;font-size:16px;font-weight:800;margin-bottom:4px}
.ab-cta-txt span{font-size:12.5px;color:#c7d7e6;line-height:1.7}
.ab-cta-btns{display:flex;gap:10px;flex:none}
@media (max-width:860px){
  .ab-item,.ab-item.is-flip{grid-template-columns:1fr}
  .ab-item.is-flip .ab-media{order:0}
  .ab-media img{min-height:190px}
  .ab-body{padding:22px 20px}
}

/* ============================================================
   新闻中心（/news.html、/news/<栏目>/、/news/<code>/）
   —— 卡片沿用站内 `.news-card`，这里补"有照片"时的显示与详情页版式。
   ============================================================ */
.news-thumb img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  transition:transform .55s var(--ease);
}
.news-card:hover .news-thumb img{transform:scale(1.05)}
/* 有照片时，原来那层网格底纹会从图片边缘透出来，压掉 */
.news-thumb img + .news-cat{position:absolute}

.news-doc{background:#fff;padding:44px 0 64px}
.news-cover{
  position:relative;margin:0 0 26px;border-radius:16px;overflow:hidden;
  aspect-ratio:21/9;background:#eef3f8;
}
.news-cover img{display:block;width:100%;height:100%;object-fit:cover}
.news-cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 50%,rgba(6,20,34,.5) 100%);
}
.news-cover figcaption{
  position:absolute;left:18px;bottom:14px;z-index:2;color:#fff;
  font:800 11.5px/1 Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;
  background:rgba(8,22,36,.55);border:1px solid rgba(255,255,255,.26);
  padding:6px 10px;border-radius:6px;backdrop-filter:blur(4px);
}
.news-article{max-width:820px}
.news-article p{font-size:15px;line-height:1.95;color:#33475b;margin:0 0 16px}
.news-article ul{margin:0 0 16px;padding-left:20px;display:grid;gap:8px}
.news-article li{font-size:14.5px;line-height:1.85;color:#33475b}
.news-article b{color:var(--navy)}
.news-related{margin-top:34px}
.news-related > h2{font-size:18px;font-weight:800;color:var(--navy);margin:0 0 16px}
@media (max-width:760px){
  .news-cover{aspect-ratio:16/9}
  .news-article p{font-size:14.5px}
}

/* ============================================================
   质量认证（/quality/ 与 /quality/<环节>/）
   —— 刻意与"加工能力"拉开：那边是橙色编号 + 深色 CTA（生产感），
      这边用**青绿 + 盾牌对勾 + 证书内框**（合规、可核验感）。
      两套样式互不覆盖：类名前缀 qc-，不参与 cap- / mat- 的继承。
   ============================================================ */
.page-hero.qc-hero{
  background:
    linear-gradient(100deg,rgba(4,22,34,.95) 0%,rgba(6,44,58,.84) 42%,rgba(9,66,68,.40) 74%,rgba(5,34,44,.58) 100%),
    url('/images/hero/page-hero.jpg') center/cover no-repeat,
    linear-gradient(150deg,#0a2b3a,#0f4a4a);
}
.qc-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:22px}
.qc-trust-item{
  display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:12px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.qc-trust-item .qc-ic{width:18px;height:18px;stroke:#7fe0c8;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.qc-trust-item b{font-size:13.5px;color:#fff;font-weight:800;letter-spacing:.2px}
.qc-trust-item span{font-size:11.5px;color:#b9d6d6}

.qc-home{background:#f2f8f7;border-top:1px solid #dfeceb;padding:52px 0 64px}
.qc-head{max-width:720px;margin-bottom:26px}
.qc-stamp{
  display:inline-block;font:800 10.5px/1 Arial,sans-serif;letter-spacing:2.2px;
  color:#0f7a6c;background:#fff;border:1px solid #cfe6e2;border-radius:4px;
  padding:5px 8px;margin-bottom:12px;
}
.qc-head h2{font-size:clamp(20px,2.2vw,27px);font-weight:800;color:var(--navy);margin:0 0 8px}
.qc-head p{font-size:13.5px;color:var(--muted);line-height:1.75;margin:0}

/* 主页固定**每行 2 个**：4 个环节正好两行，卡片宽度翻倍、照片更有画面感。
   原来用 auto-fill(340px) 在 1200px 下会挤成 3 列，第 4 张孤零零落在第二行。 */
.qc-home .qc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
/* 详情页底部的"其他质量环节"仍按可用宽度自适应（3 个小卡一行更紧凑） */
.qc-home .qc-grid.is-mini{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
@media (max-width:820px){
  .qc-home .qc-grid{grid-template-columns:1fr}
}
/* 卡片改成"照片在上、内容在下"：质量环节本身是**看得见的东西**（产线/仪器/证书/包装），
   用图标和纯文字撑不起"专业"，照片比任何排版技巧都直接。 */
.qc-card{
  position:relative;display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  background:#fff;border:1px solid #dfeae9;border-top:3px solid #0f8f7a;border-radius:14px;
  padding:0;transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s;
}
.qc-card:hover{transform:translateY(-3px);border-color:#0f8f7a;box-shadow:0 16px 34px rgba(9,60,55,.14)}
.qc-card-media{position:relative;aspect-ratio:16/9;background:#eaf2f1;overflow:hidden}
.qc-card-media img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .55s var(--ease)}
.qc-card:hover .qc-card-media img{transform:scale(1.05)}
/* 编号徽标压在照片下沿，像证件上的编号位 */
.qc-card-media .qc-seal{
  position:absolute;left:16px;bottom:-18px;width:44px;height:44px;background:#fff;
  box-shadow:0 8px 18px rgba(9,60,55,.18);
}
.qc-card-body{display:flex;flex-direction:column;flex:1;padding:26px 22px 20px}
.qc-card-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.qc-seal{
  flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid #0f8f7a;color:#0f7a6c;background:#f2fbf9;
  font:800 12.5px/1 Arial,sans-serif;letter-spacing:.5px;
}
.qc-card h3{font-size:16px;font-weight:800;color:var(--navy);margin:0;line-height:1.35}
.qc-card p{font-size:12.8px;line-height:1.75;color:var(--muted);margin:0 0 12px}
.qc-check{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:0}
.qc-check li{
  display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:baseline;gap:8px;
  padding:8px 0;border-bottom:1px dashed #e7f0ef;font-size:12.5px;color:#2f455c;
}
.qc-check li:last-child{border-bottom:0}
.qc-check i{
  font-style:normal;font-size:11px;font-weight:800;color:#0f8f7a;
  background:#e8f7f3;border-radius:50%;width:18px;height:18px;display:grid;place-items:center;
}
.qc-check li span{color:var(--muted)}
.qc-check li b{font-weight:800;color:var(--navy);text-align:right}
.qc-more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:10px;
  font-size:12.5px;font-weight:800;color:#0f7a6c}
.qc-more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.qc-card:hover .qc-more svg{transform:translateX(3px)}

/* 证书版式：双线内框 + 四角刻线，像一份可核验的文件 */
.qc-sheet{
  position:relative;background:#fff;border:1px solid #d7e6e4;border-radius:14px;
  padding:26px 30px 22px;margin-bottom:22px;
  box-shadow:0 2px 0 #fff, inset 0 0 0 1px #fff, inset 0 0 0 2px #eef6f5, 0 12px 30px rgba(9,60,55,.06);
}
.qc-sheet::before,.qc-sheet::after{
  content:"";position:absolute;width:14px;height:14px;border:2px solid #0f8f7a;border-radius:2px;
}
.qc-sheet::before{left:12px;top:12px;border-right:0;border-bottom:0}
.qc-sheet::after{right:12px;bottom:12px;border-left:0;border-top:0}
.qc-sheet-head{display:flex;align-items:center;gap:14px;padding-bottom:16px;margin-bottom:6px;
  border-bottom:1px solid #edf4f3}
.qc-sheet-title{flex:1;min-width:0}
.qc-sheet-title h2{font-size:19px;font-weight:800;color:var(--navy);margin:0 0 3px}
.qc-sheet-title em{font-style:normal;font-size:12px;color:var(--muted2)}
.qc-sheet .qc-stamp{margin:0;background:#f2fbf9;border-color:#cfe6e2}
.qc-check.is-doc li{padding:11px 0;font-size:13.5px}
.qc-check.is-doc li b{font-size:14.5px}
.qc-sheet-foot{padding-top:16px;margin-top:10px;border-top:1px solid #edf4f3}
.qc-sheet-foot p{font-size:13.5px;line-height:1.85;color:#42586f;margin:0 0 8px}
.qc-sheet-foot .note{font-size:12.5px;color:var(--muted2)}

.qc-others > h2{font-size:17px;font-weight:800;color:var(--navy);margin:26px 0 14px}
/* 详情页顶部的整幅照片：21:9，标题压在图上 */
.qc-banner{
  position:relative;margin:0 0 20px;border-radius:16px;overflow:hidden;
  aspect-ratio:21/9;background:#e9f1f0;
}
.qc-banner img{display:block;width:100%;height:100%;object-fit:cover}
.qc-banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(5,28,30,.55) 100%);
}
.qc-banner figcaption{
  position:absolute;left:20px;bottom:16px;z-index:2;
  font:800 11.5px/1 Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;color:#fff;
  background:rgba(6,40,44,.55);border:1px solid rgba(255,255,255,.28);
  padding:7px 11px;border-radius:6px;backdrop-filter:blur(4px);
}
.qc-card.is-mini{padding:16px 18px;border-top-width:0;border-left:3px solid #0f8f7a}
.qc-card.is-mini .qc-card-top{margin-bottom:10px}
.qc-card.is-mini .qc-seal{width:32px;height:32px;font-size:11.5px;position:static;
  box-shadow:none;background:#f2fbf9}

.qc-cta{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:26px;padding:20px 24px;border-radius:14px;
  background:linear-gradient(120deg,#0f5c55,#0f8f7a);color:#fff;
}
.qc-cta-txt b{display:block;font-size:16px;font-weight:800;margin-bottom:4px}
.qc-cta-txt span{font-size:12.5px;color:#d7efe9;line-height:1.7}
.qc-cta .btn-primary{flex:none;background:#fff;color:#0f5c55;box-shadow:none}
.qc-cta .btn-primary:hover{background:#eafaf5;color:#0b4a44}
@media (max-width:760px){
  .qc-grid{grid-template-columns:1fr}
  .qc-sheet{padding:20px 18px}
}

/* ============================================================
   加工能力（/capabilities/ 与 /capabilities/<工艺>/）
   —— 卡片数据来自 ugbsteel_content.capability，这里只管长相。
   ============================================================ */
.cap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.cap-card{
  display:flex;flex-direction:column;text-decoration:none;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s;
}
.cap-card:hover{transform:translateY(-3px);border-color:var(--accent2);box-shadow:0 14px 34px rgba(8,19,31,.1)}
.cap-card-top{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.cap-no{
  flex:none;font:800 11px/1 Arial,sans-serif;color:var(--accent);background:#fff2e6;
  border:1px solid #ffd9b8;border-radius:6px;padding:4px 7px;letter-spacing:.5px;
}
.cap-card h3{font-size:16px;font-weight:800;color:var(--navy);margin:0;line-height:1.35}
.cap-card p{font-size:12.8px;line-height:1.75;color:var(--muted);margin:0 0 12px}
.cap-mini{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:5px}
.cap-mini li{display:flex;gap:8px;align-items:baseline;font-size:12.5px;color:#2f455c}
.cap-mini li span{color:var(--muted2);min-width:74px;flex:none}
.cap-mini li b{font-weight:700}
.cap-card .prod-go{margin-top:auto;padding-top:0;border-top:0}
/* 详情页底部的"其他加工能力"：小一号 */
.cap-others{margin-top:26px}
.cap-others > h2{font-size:17px;font-weight:800;color:var(--navy);margin:0 0 14px}
.cap-card.is-mini{padding:16px 18px}
.cap-card.is-mini .cap-card-top{margin-bottom:10px}

/* ============================================================
   材质详情页（/stainless-steel-304/ 等，`<main class="mat-page">`）
   —— 正文是按 ①…⑥ 编号排的"技术文档"，原来所有块平铺直排：
      h3 用浏览器默认字号、表格与段落之间没有呼吸，整页像没加载样式。
      这里补的是**阅读型排版**，不改内容结构。
   ============================================================ */
.mat-page .section{padding:48px 0 64px}
/* 栏宽不再单独声明：直接沿用全站 `.wrap`（1200px），少一条覆盖就少一处"到底谁生效"的疑问 */
.mat-page h3{
  position:relative;font-size:16.5px;font-weight:800;color:var(--navy);
  letter-spacing:-.2px;margin:34px 0 14px;padding-left:13px;line-height:1.4;
}
.mat-page h3:first-of-type{margin-top:0}
.mat-page h3::before{
  content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent),#ffb968);
}
.mat-page .spec-table{margin-bottom:20px;font-size:13.5px}
.mat-page .spec-table thead th,
.mat-page .spec-table tbody td{padding:10px 14px}
.mat-page ul{margin:0 0 6px;padding-left:20px;display:grid;gap:6px}
.mat-page ul li{font-size:13.5px;line-height:1.75;color:#42586f}
.mat-page p{font-size:13.5px;line-height:1.8;color:#42586f;margin:0 0 10px}
.mat-page .note{font-size:12.5px;color:var(--muted2);margin-top:14px}
/* 化学成分条形图：单独成卡，与下面的表格拉开层次 */
.mat-page .chem-bars{
  background:#f7fafc;border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin-bottom:18px;
}
/* 末尾的"获取报价"按钮与正文分开 */
.mat-page .wrap > p:last-child{margin-top:22px;margin-bottom:0}

/* ---- 材质页的卡片化版面（2026-10-19 重做）----
   原来 ①…⑥ 是平铺的 h3+表格，像一份 Word 文档；现在按"卡片"组织：
   每块有编号徽标 + 标题 + 说明，两块并排成一行，扫读时一眼能定位。 */
.mat-doc{background:#f6f9fc;border-top:1px solid var(--line);padding:44px 0 40px}
.mat-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:22px 24px;margin-bottom:18px;box-shadow:0 2px 10px rgba(8,19,31,.04);
}
.mat-2col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mat-2col .mat-card{margin-bottom:0}
.mat-2col + .mat-2col{margin-top:18px}
.mch{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.mch .mno{
  font:800 11px/1 Arial,sans-serif;color:var(--accent);background:#fff2e6;
  border:1px solid #ffd9b8;border-radius:6px;padding:4px 7px;letter-spacing:.5px;
}
.mch h2{font-size:17px;font-weight:800;color:var(--navy);margin:0;letter-spacing:-.2px}
.mch em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--muted2)}
.mat-kv{list-style:none;padding:0;margin:0;display:grid;gap:0}
.mat-kv li{
  display:flex;align-items:baseline;gap:8px;padding:9px 0;
  border-bottom:1px dashed #eef2f6;font-size:13.5px;line-height:1.6;
}
.mat-kv li:last-child{border-bottom:0}
.mat-kv span{color:var(--muted);min-width:118px;flex:none}
.mat-kv b{color:var(--navy);font-weight:800;font-size:15px}
.mat-kv i{font-style:normal;font-size:11.5px;color:var(--muted2)}
.mat-std{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.mat-std li{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mat-std b{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  color:var(--navy);background:#f3f8fd;border:1px solid #e4edf6;border-radius:6px;
  padding:3px 8px;white-space:nowrap;font-weight:700;
}
.mat-std span{font-size:12.5px;color:var(--muted)}
.mat-tags{display:flex;flex-wrap:wrap;gap:8px}
.mat-tags span{
  font-size:12.5px;color:#2f455c;background:#f4f8fc;border:1px solid #e6eef7;
  border-radius:999px;padding:5px 11px;
}
/* 选材建议块：上下各留 24px —— 它夹在"双栏卡片"和"深色 CTA"之间，
   两侧都是强对比块，间距不够会显得挤在一起。 */
.mat-note{
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:14px;padding:18px 22px;margin:24px 0;
}
.mat-note .mch{margin-bottom:8px}
.mat-note p{margin:0;font-size:13.5px;line-height:1.85}
.mat-cta{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:linear-gradient(120deg,var(--navy),#12324f);color:#fff;
  border-radius:16px;padding:20px 24px;margin-bottom:16px;
}
.mat-cta-txt b{display:block;font-size:16px;font-weight:800;margin-bottom:4px}
.mat-cta-txt span{font-size:12.5px;color:#c7d7e6;line-height:1.7}
.mat-cta .btn-primary{flex:none}
@media (max-width:820px){
  .mat-2col{grid-template-columns:1fr}
  .mat-2col + .mat-2col{margin-top:0}
  .mat-2col .mat-card{margin-bottom:18px}
}

/* ============================================================
   分类落地页（/stainless-steel-*/，2026-10-19 重做）
   —— 子分类从"3 张带插画的大卡"压成一行胶囊；主角让给产品照片。
   ============================================================ */
/* ★ 分类页的"标题 + 细分胶囊 + 筛选"原来各占一大块：section 上下各 80px 内边距、
   sec-head 下 26px、筛选条三行各带虚线与内边距 —— 产品还没出现，已经用掉近 400px。
   现在整条压成**一条信息带**：内边距减半、标题与筛选并排、筛选组横向排列。 */
/* 分类页紧跟 hero，不需要全站 `.section` 那种 80px 的分段留白 */
.section-cat{padding:16px 0 56px}
/* 标题 + 规格数 + 细分胶囊同一行：这一条原来被拆成"胶囊一行 / 大标题两行 / 描述一段"，
   产品要往下滚才出现。现在只有一行，产品紧接其后。 */
.cat-toolbar{display:flex;align-items:center;justify-content:space-between;
  gap:10px 24px;flex-wrap:wrap;margin-bottom:12px}
.ct-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ct-title h2{font-size:20px;font-weight:800;color:var(--navy);letter-spacing:-.3px;margin:0}
.ct-title span{font-size:12.5px;color:var(--muted)}
.cat-toolbar .cat-chipbar{margin:0}
.section-cat .cat-filter{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;
  padding:10px 14px;margin:0 0 18px;border-radius:12px;
}
.section-cat .cf-head{margin:0}
.section-cat .cf-head b{font-size:12px}
/* 条数已经在区块标题里写了，这里不再重复 */
.section-cat .cf-count{display:none}
.section-cat .cf-group{border-top:none;padding:0;gap:6px;flex:0 0 auto}
.section-cat .cf-group > b{min-width:0;margin-right:2px;font-size:11.5px}
.section-cat .cf-chip{padding:5px 11px;font-size:12px}
.cat-chipbar .cc-label{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.4px;margin-right:4px}
.cat-chipbar .cat-tab{font-size:13px;padding:8px 15px}
.cat-chipbar .cat-tab i{font-style:normal;font-size:11px;font-weight:800;color:var(--muted);margin-left:6px}

/* 产品卡：照片版。缩略图固定 16:9，避免有图/无图两种卡高度不一 */
.prod-card .prod-thumb{aspect-ratio:16/9;background:#f7fafc}
.prod-card .prod-thumb img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .45s var(--ease)}
.prod-card:hover .prod-thumb img{transform:scale(1.04)}
.prod-body{display:flex;flex-direction:column;flex:1}
/* 分类卡上的编号：做成**醒目的等宽标签**（2026-10-19 调整）
   之前是 11.5px 的浅灰小字，扫一眼几乎看不到；而编号是客户询价、我们开单的唯一凭据，
   在卡片上应该和标题一样容易找到。 */
.prod-code{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  font-size:12.5px;font-weight:800;letter-spacing:.3px;color:var(--navy);
  background:#eef5fc;border:1px solid #d5e6f7;border-radius:6px;
  padding:2px 8px;margin:0 0 10px;
}
.prod-code span{
  font-family:inherit;font-size:12.5px;font-weight:800;color:#8298ad;
  letter-spacing:.6px;
}
.prod-card h3{font-size:15.5px;font-weight:800;color:var(--navy);line-height:1.35;margin:0 0 4px}
.prod-go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:10px;
  border-top:1px solid #eef3f8;
  font-size:12.5px;font-weight:800;color:var(--accent)}
.prod-go svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.prod-card:hover .prod-go svg{transform:translateX(3px)}

/* ---- 规格区：从"贴边表格块"改成一行属性胶囊 ----
 * 之前 `.prod-card .prod-spec` 只覆盖了 padding/margin，**没盖住** site.css 里通用
 * `.prod-spec` 的浅蓝底 + 描边，于是文字紧贴边框，看着像一个没有内边距的表格。
 * 现在：去掉底框、改成可换行的胶囊，4 个属性两行装下，卡片矮 50px 左右，
 * 也顺带和上方筛选条的胶囊语言统一。
 */
.prod-card .prod-spec{
  list-style:none;display:flex;flex-wrap:wrap;gap:6px;
  /* ★ 必须显式写 row：通用 `.prod-spec` 是 `flex-direction:column`，
     只覆盖 display 的话每个 li 会被拉成整行宽、堆成四行 —— 就是"看起来像表格"的原因。 */
  flex-direction:row;
  margin:0 0 12px;padding:0;
  background:none;border:0;border-radius:0;flex:0 0 auto;
}
.prod-card .prod-spec li{
  display:inline-flex;align-items:baseline;gap:5px;
  padding:3px 9px;border-radius:999px;
  background:#f4f8fc;border:1px solid #e6eef7;
  font-size:11.5px;line-height:1.5;color:#2f455c;
}
.prod-card .prod-spec li b{
  flex:none;min-width:0;font-size:10.5px;font-weight:700;
  color:#94a3b8;letter-spacing:.2px;
}
.prod-card .prod-spec li span{font-weight:700;color:#1f3a52}

/* ============================================================
   询盘进度查询（/track.html，2026-10-20）
   ============================================================ */
.track-box{
  max-width:760px;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:24px;box-shadow:0 10px 30px rgba(8,19,31,.06);
}
.tk-form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}
.tk-form label{display:flex;flex-direction:column;gap:5px}
.tk-form label span{font-size:11.5px;font-weight:800;color:#5b7290}
.tk-form input{
  width:100%;padding:10px 12px;border:1px solid #d8e2ec;border-radius:10px;
  font-size:14px;font-family:inherit;color:var(--ink);background:#fbfdff;
}
.tk-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,122,24,.12)}
.tk-form .btn{height:42px;white-space:nowrap}
.tk-msg{
  margin:16px 0 0;padding:11px 14px;border-radius:10px;font-size:13px;
  background:#fff6ef;border:1px solid #ffdcc4;color:#8a4a15;font-weight:700;
}
.tk-result{margin-top:22px;border-top:1px solid var(--line);padding-top:20px}
.tk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tk-label{display:block;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted2)}
.tk-head b{font-size:17px;color:var(--navy);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.tk-badge{
  padding:5px 13px;border-radius:99px;font-size:12.5px;font-weight:800;
  background:#eef4fa;color:#3d5a76;
}
.tk-badge.is-new{background:#eef4fa;color:#3d5a76}
.tk-badge.is-contacted{background:#fff4e6;color:#a3600f}
.tk-badge.is-quoted{background:#e8f4ff;color:#1c5f9e}
.tk-badge.is-won{background:#e9f8ef;color:#137a3c}
.tk-badge.is-lost{background:#f2f4f6;color:#77828c}
.tk-desc{margin:12px 0 0;font-size:13.5px;line-height:1.65;color:#3c5872}
.tk-steps{display:flex;gap:0;margin:18px 0 0;padding:0;list-style:none;flex-wrap:wrap}
.tk-step{
  flex:1;min-width:120px;position:relative;padding-left:0;font-size:12px;color:var(--muted);
}
.tk-step i{
  display:block;width:11px;height:11px;border-radius:50%;background:#dbe6f0;margin-bottom:7px;
  transition:.2s;
}
.tk-step::before{
  content:"";position:absolute;left:11px;top:5px;right:0;height:1.5px;background:#e5edf5;
}
.tk-step:last-child::before{display:none}
.tk-step.is-done i{background:var(--accent)}
.tk-step.is-done::before{background:var(--accent)}
.tk-step.is-done b{color:#25445f}
.tk-step.is-cur i{box-shadow:0 0 0 4px rgba(255,122,24,.18)}
.tk-step b{display:block;font-weight:800;color:inherit;font-size:12px;line-height:1.4}
.tk-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:22px 0 0}
.tk-meta div{background:#f7fbfe;border:1px solid #e6eff7;border-radius:10px;padding:10px 12px}
.tk-meta dt{font-size:11px;font-weight:800;color:var(--muted2);letter-spacing:.3px;text-transform:uppercase}
.tk-meta dd{margin:4px 0 0;font-size:13.5px;font-weight:700;color:#25445f;word-break:break-word}
.tk-hint{margin:18px 0 0;font-size:11.5px;line-height:1.6;color:var(--muted)}
@media (max-width:640px){
  .track-box{padding:16px}
  .tk-form{grid-template-columns:1fr}
  .tk-form .btn{width:100%}
}

/* ============================================================
   订阅块（文章页，2026-10-20）
   ------------------------------------------------------------
   放在技术文章末尾：读者已经证明对选材/标准有兴趣，
   这时的订阅意愿远高于首页访客。承诺只写"每月一封、可随时退订"。
   ============================================================ */
.sub-box{
  display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:linear-gradient(120deg,#f4f9fe,#eef6fd);
  border:1px solid #dde9f5;border-radius:14px;padding:22px 24px;
}
.sub-box .sb-text{flex:1 1 320px}
.sub-box h3{margin:0 0 6px;font-size:16px;color:var(--navy)}
.sub-box p{margin:0;font-size:13px;line-height:1.7;color:#4a6580}
.sb-form{display:flex;gap:9px;align-items:center;flex-wrap:wrap;flex:0 1 auto}
.sb-form input[type=email]{
  width:230px;padding:10px 13px;border:1px solid #d3e2f0;border-radius:10px;
  font-size:13.5px;font-family:inherit;background:#fff;color:var(--ink);
}
.sb-form input[type=email]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,122,24,.12)}
.sb-msg{font-size:12.5px;font-weight:700;min-height:1em}
.sb-msg.is-ok{color:#137a3c}
.sb-msg.is-err{color:#b4322b}
@media (max-width:640px){
  .sub-box{padding:18px;gap:14px}
  .sb-form{width:100%}
  .sb-form input[type=email]{flex:1 1 160px;width:auto}
}

/* ============================================================
   选材助手（/selector.html，2026-10-20）
   ------------------------------------------------------------
   一次只问一个问题、点一下就往下走 —— 移动端尤其明显：
   四步之内就能拿到结论，比一个十字段的表单留存率高得多。
   ============================================================ */
#selectorApp{max-width:820px}
.sel-step{margin-bottom:18px}
.sel-step-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.sel-step-head i{
  width:26px;height:26px;flex:none;border-radius:50%;
  background:var(--accent);color:#fff;font-style:normal;
  display:grid;place-items:center;font-size:13px;font-weight:800;
}
.sel-step-head em{
  display:block;font-style:normal;font-size:11px;font-weight:800;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--muted2);margin-bottom:3px;
}
.sel-step-head h3{margin:0;font-size:18px;color:var(--navy);line-height:1.4}
.sel-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.sel-chip{
  text-align:left;cursor:pointer;font-family:inherit;
  padding:13px 15px;border:1px solid #dbe6f0;border-radius:12px;background:#fff;
  transition:.18s var(--ease);display:flex;flex-direction:column;gap:3px;
}
.sel-chip b{font-size:14px;font-weight:800;color:#1f3a52}
.sel-chip span{font-size:11.5px;line-height:1.5;color:var(--muted)}
.sel-chip:hover{border-color:var(--accent);background:#fff8f2;transform:translateY(-2px);box-shadow:0 10px 24px rgba(8,19,31,.08)}
.sel-chip:hover b{color:var(--accent)}

/* 结果卡 */
.sel-result{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px;box-shadow:0 12px 34px rgba(8,19,31,.07);
}
.sr-grade{display:flex;align-items:baseline;gap:14px;padding-bottom:16px;border-bottom:1px dashed #dbe6f0;margin-bottom:18px}
.sr-grade span{font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted2)}
.sr-grade b{font-size:40px;line-height:1;color:var(--accent);font-family:Arial,sans-serif;letter-spacing:-1px}
.sr-block{margin-bottom:16px}
.sr-block h4{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.4px;color:#5b7290;text-transform:uppercase}
.sr-block p{margin:0;font-size:13.5px;line-height:1.75;color:#33475b}
.sr-not{background:#f7fafd;border-left:3px solid #c9dcee;padding:12px 14px;border-radius:0 10px 10px 0}
.sr-risk{background:#fff8f2;border-left:3px solid #ffcaa0;padding:12px 14px;border-radius:0 10px 10px 0}
.sr-risk h4{color:#a3600f}
.sr-links{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.sr-links a{
  padding:8px 14px;border-radius:99px;background:var(--accent3);
  color:var(--accent);font-size:12.5px;font-weight:800;text-decoration:none;transition:.18s;
}
.sr-links a:hover{background:var(--accent);color:#fff}
.sr-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

.sel-disclaimer{
  display:flex;gap:11px;margin-top:22px;padding:14px 16px;
  background:#f6f9fc;border:1px solid #e2ecf6;border-radius:12px;
  font-size:12.5px;line-height:1.7;color:#4a6580;max-width:820px;
}
.sel-disclaimer svg{width:17px;height:17px;flex:none;margin-top:2px;stroke:#7b91a8;fill:none;stroke-width:1.8}
.sel-disclaimer b{color:#1f3a52}
@media (max-width:640px){
  .sel-opts{grid-template-columns:1fr}
  .sel-result{padding:18px;border-radius:13px}
  .sr-grade b{font-size:32px}
}

/* ============================================================
   文章页「相关产品与下一步」（2026-10-20）
   ------------------------------------------------------------
   12 篇文章原来是孤岛：读者看完没有下一步，权重也不流向产品页。
   这里做成胶囊链接，最后一颗永远是"快速询价"，给明确的下一步。
   ============================================================ */
.rel-next{margin-top:8px}
.rel-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.rel-list li{margin:0}
.rel-list a{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border:1px solid #d8e2ec;border-radius:99px;
  font-size:13px;font-weight:700;color:#2f4b66;text-decoration:none;
  background:#fff;transition:.18s;
}
.rel-list a:hover{border-color:var(--accent);color:var(--accent);background:#fff8f2}
.rel-list a svg{
  width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.6;
}
.rel-list a:hover svg{opacity:1;transform:translateX(2px)}

/* ============================================================
   产品详情页优化（2026-10-20）
   ------------------------------------------------------------
   原来这一页的观感问题很具体：
     · 主图是一张 4:3 的平铺图，周围没有层次，看起来像"贴上去的"；
     · 规格表右侧信息一路堆到底，中途没有视觉停顿；
     · 同类产品卡片只有标题 + 两行字，整排看像表格，不像产品。
   下面分别对应：媒体区加悬浮与投影、信息区做成分段、卡片补缩略图。
   ============================================================ */

/* ① 主图：加一层极浅的渐变背景垫底，图与容器之间有"承托感" */
.pdp-media{
  background:linear-gradient(180deg,#ffffff,#f7fafd);
  box-shadow:0 10px 30px rgba(8,19,31,.06);
  transition:box-shadow .3s var(--ease);
}
.pdp-media:hover{box-shadow:0 16px 40px rgba(8,19,31,.10)}
.pdp-media img{transition:transform .5s var(--ease)}
.pdp-media:hover img{transform:scale(1.03)}

/* ② 规格区：表头与"询价事实卡"连成一组，视觉上收成一个信息块 */
.pdp-info h2{
  font-size:17px;margin:0 0 12px;color:var(--navy);
  display:flex;align-items:center;gap:8px;
}
.pdp-info h2::before{
  content:"";width:3px;height:16px;border-radius:2px;background:var(--accent);flex:none;
}
.pdp-info .spec-table{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pdp-info .spec-table tbody tr:nth-child(odd){background:#fbfdff}

/* 询价事实卡：回答客户看规格时真正在意的四件事 */
.pdp-facts{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
  margin:14px 0 16px;
}
.pdp-facts .pf-item{
  background:#f5f9fd;border:1px solid #e4eef8;border-radius:10px;
  padding:9px 11px;display:flex;flex-direction:column;gap:2px;
}
.pdp-facts .pf-item span{
  font-size:11px;font-weight:700;color:#7b91a8;letter-spacing:.2px;
}
.pdp-facts .pf-item b{
  font-size:13px;font-weight:800;color:#1f3a52;line-height:1.3;
}

/* ③ 同类产品卡片：补缩略图，整排从"像表格"变成"像产品" */
.prod-card .prod-thumb{
  position:relative;overflow:hidden;border-radius:10px;
  aspect-ratio:3/2;margin-bottom:10px;background:#eef3f8;
}
.prod-card .prod-thumb img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
.prod-card:hover .prod-thumb img{transform:scale(1.05)}

@media (max-width:900px){
  .pdp-facts{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .pdp-facts{grid-template-columns:1fr}
}

/* ============================================================
   产品页「典型用途 + 选材常见问题」（2026-10-20）
   ------------------------------------------------------------
   ★ 这两块是**追加**到页面正文末尾的，必须自带栅格容器，
     否则会落在 .wrap 外面：文字贴浏览器左边缘、列表铺满整个视口
     （材质页 / 品类页 / 文章页都踩过，产品详情页因为有 sec-head 反而看不出）。
     包裹逻辑在 SiteLayoutFragmentController.inWrap()。
   ============================================================ */

/* 追加区块的外层：与页面主体同宽同内边距，上下留白但比 .section 的 80px 轻 */
.uc-band{padding:42px 0 50px;background:#fff;border-top:1px solid #eef3f8}
.uc-band .sec-block{margin-bottom:30px}
.uc-band .sec-block:last-child{margin-bottom:0}

.usecases .uc-lead{
  font-size:14px;line-height:1.8;color:#4a6580;
  margin:0 0 18px;max-width:820px;
}
.usecases .uc-lead strong{color:#1f3a52;font-weight:800}

/* 用途清单：桌面两列（原来 auto-fit 会铺成三列，短句被拉得很散） */
.uc-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px 36px;
}
.uc-list li{
  position:relative;padding-left:17px;
  font-size:14px;line-height:1.7;color:#2a4560;
}
.uc-list li::before{
  content:"";position:absolute;left:0;top:9px;
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px rgba(255,122,24,.13);
}

/* 问答：每对之间拉开距离，答案缩进与问题文字对齐（不是与 Q 徽标对齐） */
.uc-faq{margin:0;display:flex;flex-direction:column;gap:16px}
.uc-faq dt{
  font-size:14.5px;font-weight:800;color:#12222f;
  margin:0;line-height:1.55;
}
.uc-faq dt::before{
  content:"Q";display:inline-grid;place-items:center;
  width:19px;height:19px;margin-right:9px;border-radius:6px;
  background:var(--accent3);color:var(--accent);
  font-size:11px;font-weight:900;vertical-align:1px;
}
.uc-faq dd{
  margin:7px 0 0 28px;font-size:14px;line-height:1.8;color:#3c5872;
}

/* 末尾交叉引流：做成一颗胶囊按钮，比一行带下划线的文字更容易被点 */
.uc-next{
  margin:22px 0 0;padding-top:18px;border-top:1px dashed #e4edf6;
  font-size:13px;color:var(--muted);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.uc-next a{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 15px;border-radius:99px;background:var(--accent3);
  font-weight:800;color:var(--accent);text-decoration:none;
  transition:.18s var(--ease);
}
.uc-next a:hover{background:var(--accent);color:#fff}
.uc-next a svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:820px){
  .uc-list{grid-template-columns:1fr;gap:10px}
  .uc-band{padding:30px 0 36px}
}
@media (max-width:640px){
  .uc-faq dd{margin-left:0}
}
@media (max-width:640px){
  .uc-list{grid-template-columns:1fr;gap:8px}
  .uc-faq dd{margin-left:0}
}

/* ============================================================
   产品规格总表（/catalog.html，2026-10-20）
   ------------------------------------------------------------
   屏幕上是普通表格；打印时去掉导航/页脚/CTA，换成 A4 友好的排版，
   这样"下载 PDF"得到的是一份能直接给采购看的规格表，而不是网页截图。
   ============================================================ */
.cat-note{font-size:12px;color:var(--muted);line-height:1.65;margin:14px 0 0;max-width:820px}
.cat-block{margin-bottom:34px}
.cat-block h2{
  display:flex;align-items:center;gap:9px;font-size:18px;font-weight:800;color:var(--navy);margin:0 0 12px;
}
.cat-block h2 em{
  font-style:normal;font-size:12px;font-weight:800;color:var(--accent);
  background:var(--accent3);padding:2px 9px;border-radius:99px;
}
.cat-table{width:100%;font-size:13px}
.cat-table th{font-size:11.5px;letter-spacing:.3px;text-transform:uppercase;color:var(--muted2)}
.cat-table td{padding:10px 12px;vertical-align:top}
.cat-table .cat-no{width:38px;text-align:center;color:var(--muted2);font-weight:700}
.cat-code{display:block;font-size:11px;color:var(--muted2);font-weight:600;margin-top:2px}
@media print{
  /* 打印：只留内容，其余全部隐藏 */
  .topbar,header,nav.menu,.nav-mask,.contact-fab,.chat-widget,.drawer,.mask,.cookie,.toast,footer,
  .page-hero .ph-actions,.cat-note,.no-print,.crumb,.top-btn{display:none !important}
  body{background:#fff !important;color:#000 !important}
  .page-hero{padding:0 0 10px !important;background:#fff !important}
  .page-hero h1{font-size:20pt !important;color:#000 !important;margin:0 0 4px}
  .page-hero .ph-lead{font-size:9pt !important;color:#333 !important;max-width:none}
  .wrap{max-width:100% !important;padding:0 !important}
  .page-main{padding:0 !important}
  .cat-block{margin-bottom:14px;page-break-inside:avoid}
  .cat-block h2{font-size:11pt;margin:0 0 4px;color:#000}
  .cat-table{font-size:8.4pt;border-collapse:collapse}
  .cat-table th,.cat-table td{border:1px solid #bbb !important;padding:3px 5px !important}
  .cat-table th{background:#eee !important;color:#000 !important;text-transform:none;letter-spacing:0}
  .cat-code{display:inline;margin-left:6px;color:#666}
  .tb-scroll{overflow:visible !important}
  a{text-decoration:none;color:#000 !important}
  @page{size:A4;margin:12mm}
}

/* ============================================================
   配置化快速询价（/quote.html，2026-10-20）
   ------------------------------------------------------------
   刻意做成"步骤 + 选项"而不是一个大表单：
   客户在手机上每屏只看到一件事，填完率明显高于 10 个输入框的网格。
   ============================================================ */
.quote-builder{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px 26px 20px;box-shadow:0 10px 30px rgba(8,19,31,.06);
}
.qb-step{display:flex;align-items:center;gap:9px;margin:18px 0 10px}
.qb-step:first-child{margin-top:0}
.qb-step b{font-size:14.5px;color:var(--navy);font-weight:800}
.qb-no{
  width:22px;height:22px;flex:none;border-radius:50%;
  background:var(--accent3);color:var(--accent);
  font-size:12px;font-weight:800;display:grid;place-items:center;
}
.qb-chips{display:flex;flex-wrap:wrap;gap:8px}
.qb-chip{
  padding:9px 15px;border:1px solid #d8e2ec;border-radius:999px;background:#fff;
  font-size:13.5px;font-weight:700;color:#3c5872;cursor:pointer;font-family:inherit;
  transition:.18s;
}
.qb-chip:hover{border-color:var(--accent);color:var(--accent);background:#fff8f2}
.qb-chip.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.qb-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qb-grid label{display:flex;flex-direction:column;gap:5px}
.qb-grid label span{font-size:11.5px;font-weight:800;color:#5b7290;letter-spacing:.2px}
.qb-grid input{
  width:100%;padding:10px 12px;border:1px solid #d8e2ec;border-radius:10px;
  font-size:14px;font-family:inherit;color:var(--ink);background:#fbfdff;
}
.qb-grid input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,122,24,.12)}
.qb-full{display:flex;flex-direction:column;gap:5px;margin-top:12px}
.qb-full span{font-size:11.5px;font-weight:800;color:#5b7290}
.qb-full textarea{
  width:100%;padding:10px 12px;border:1px solid #d8e2ec;border-radius:10px;
  font-size:14px;font-family:inherit;color:var(--ink);background:#fbfdff;resize:vertical;
}
.qb-full textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,122,24,.12)}
.qb-summary{
  margin-top:16px;padding:13px 15px;border-radius:11px;
  background:#f3f8fd;border:1px dashed #c9dcee;color:#25445f;
  font-size:13.5px;font-weight:700;line-height:1.55;
}
.qb-sum-label{
  display:block;font-size:11px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted2);margin-bottom:5px;
}
.qb-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.qb-hint{margin:12px 0 0;font-size:11.5px;line-height:1.6;color:var(--muted)}
@media (max-width:640px){
  .quote-builder{padding:18px 16px 16px;border-radius:13px}
  .qb-grid{grid-template-columns:1fr}
  .qb-chip{padding:8px 12px;font-size:12.5px}
}

/* ============================================================
   12. 行业应用页（《全行业应用总册》数据驱动）

   ★ 为什么新增这几组：63 个行业页共用同一套模板，正文由
     tools/gen-industry-pages.mjs 从总册生成。清单表直接复用
     已有的 .tb-scroll / table.tb（不重复造表样式），这里只补
     "选材要点 / FAQ / 关联卡片"三块 —— 它们此前全站都没有。
   ★ 都用既有 CSS 变量（--line/--r/--accent/--navy/--muted2），
     不引入新的硬编码色值，换主题时跟着一起变。
   ============================================================ */
.bullets{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.bullets li{
  position:relative;padding:12px 16px 12px 42px;border:1px solid var(--line);
  border-radius:var(--r);background:#fff;font-size:13.8px;line-height:1.75;color:#3d5570;
}
.bullets li::before{content:"";position:absolute;left:16px;top:19px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.bullets li b{color:var(--navy)}

.faq{display:grid;gap:10px}
.faq-item{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.faq-item>summary{
  cursor:pointer;padding:14px 18px;font-weight:700;color:var(--navy);font-size:14px;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary::after{content:"+";color:var(--accent);font-weight:800;font-size:18px;line-height:1}
.faq-item[open]>summary::after{content:"−"}
.faq-a{padding:0 18px 16px;font-size:13.8px;line-height:1.85;color:#3d5570}

.ph-card{
  display:block;padding:18px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s;
}
.ph-card:hover{border-color:rgba(255,122,24,.45);transform:translateY(-2px);box-shadow:0 8px 20px rgba(12,34,58,.06)}
.ph-card b{display:block;color:var(--navy);font-size:15px;margin-bottom:6px}
.ph-card span{font-size:12.5px;color:var(--muted2)}
/* 案例卡（非链接）：标题 + 产品/数量 + 摘要 */
.ph-card{color:inherit}
.ph-card-desc{margin:10px 0 0;font-size:12.8px;line-height:1.7;color:#4a6076}

/* 行业页配图：图片本身就是内容的一部分（alt/title 承载关键词），不放进轮播 */
.app-fig{margin:0 0 22px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
/* ★ max-height + cover：3:2 的插图在 900px 容器里会撑到 600px 高，把首屏内容挤下去；
   限高后保持"图在内容区最上面"的统一观感，同时不占满一屏（裁切以中心为准）。 */
.app-fig img{display:block;width:100%;height:auto;max-height:440px;object-fit:cover;object-position:center}
.app-fig figcaption{padding:10px 16px;font-size:12.5px;line-height:1.6;color:var(--muted2);background:#fafcfe;border-top:1px solid var(--line)}

/* 首页「应用领域」：卡片从 article 改成链接（a.app），需要显式去掉下划线/继承色 */
a.app{display:block;text-decoration:none;color:inherit}
.app-all{display:flex;justify-content:center;margin-top:26px}
.sec-head h2 a{text-decoration:none;color:inherit}
.sec-head h2 a:hover{color:var(--accent)}