/* ==========================================================================
   FOB AUTO PARTS — Brake Pad Website
   Design system  (visual language referenced from ebcbrakes.com)
   --------------------------------------------------------------------------
   1. Tokens      2. Reset/base   3. Layout       4. Buttons
   5. Forms       6. Topbar/Header/Nav             7. Mega menu / Mobile
   8. Hero        9. Sections    10. Cards        11. Finder
   12. Products   13. Product detail              14. Content pages
   15. Footer     16. Utilities  17. Responsive
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */
:root{
  /* 工业风配色（2026-10 由红色系改为深蓝 + 银灰 + 橙）
     ==================================================================
     三个色各司其职，不要互相串用：
       --brand  深蓝 #1B3A5C   主色 —— 顶栏 / 导航 / 页脚 / 深色区块 / hero 底
       --silver 银灰 #8A9BA8   辅助 —— **只做结构色**（边框 / 分隔线 / 图标描边）
       --accent 橙   #E86A1A   强调 —— 按钮底 / 图形 / 装饰条 / 焦点环 / 卖点小标

     ⚠️ 两条硬约束（都验算过，别凭感觉改）：
     ① 银灰 #8A9BA8 压白底只有 2.86:1，**不能当正文或标签文字**；
        次要文字用 --muted #5F6E7D（白底 5.23:1 / 浅灰底 4.88:1）。
     ② 橙 #E86A1A 上压白字只有 3.23:1，达不到 AA；
        所以橙底一律配深藏青字（--accent-on #0E1F31，5.28:1）。
        橙色的**文字**用 --accent-ink #BE5210（白底 4.77:1）。

     白字压深蓝：主色 11.63:1 / 700 14.20:1 / 900 16.68:1，余量充足。 */
  --brand:#1B3A5C;          /* 主色 · 深蓝 */
  --brand-700:#142C46;
  --brand-900:#0E1F31;
  --brand-950:#091520;
  --brand-100:#EDF1F5;      /* 极浅蓝底：浅色卡片、引用块 */
  --brand-200:#D3DDE6;      /* 浅蓝：分隔线、浅边框 */

  --silver:#8A9BA8;         /* 辅助 · 银灰（结构色，别用来写字）*/
  --silver-100:#EEF1F4;
  --silver-200:#DCE3E9;

  --accent:#E86A1A;         /* 强调 · 橙：按钮底、图形、装饰条、焦点环 */
  --accent-700:#F07A2A;     /* 橙 hover —— 注意是**变亮**不是变暗：
                               橙底配的是深藏青字，底色越深对比度越低
                               （#C4560F 上深字只有 3.50:1，#F07A2A 是 6.00:1）。 */
  --accent-ink:#B54D0E;     /* 橙色**文字**专用。
                               取 #BE5210 时压白底是 4.77:1，但压浅灰底(#F5F7FA)
                               只有 4.44:1，差 0.06 不达 AA；再压暗一档后
                               白底 5.21:1 / 浅灰底 4.85:1，两种底都过。 */
  --accent-on:#0E1F31;      /* 橙底上的文字色（5.28:1，达 AA）*/
  --accent-100:#FDF0E6;     /* 极浅橙底 */
  --accent-200:#F8D6BC;

  /* 兼容旧变量名：外部脚本 / 旧模板里可能还在引用 */
  --red:var(--accent);
  --red-700:var(--accent-700);

  --ink:#10202E;
  --body:#3D4C5C;
  --muted:#5F6E7D;          /* 次要文字：白底 5.23:1 / 浅灰底 4.88:1 */
  --line:#E2E7EC;
  --line-2:#EFF2F5;
  --bg:#FFFFFF;
  --bg-soft:#F5F7FA;        /* 浅灰背景 */
  --bg-soft2:#EDF1F5;

  /* 语义色（不用绿 / 紫）*/
  --ok:#1B3A5C;             /* 正面语义 → 主色（原为绿 #1B3A5C）*/
  --warn:#8A9BA8;           /* 提示语义 → 银灰（原为琥珀 #8A9BA8）*/
  --danger:#9E2B25;         /* 仅后台「删除」小按钮用，面积可忽略 */

  --radius:4px;
  --radius-lg:8px;
  --shadow-sm:0 1px 2px rgba(16,32,46,.06), 0 2px 8px rgba(16,32,46,.05);
  --shadow:0 6px 22px rgba(16,32,46,.09);
  --shadow-lg:0 18px 46px rgba(16,32,46,.15);

  --sans:"Helvetica Neue",Helvetica,Arial,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --wrap:1320px;
  --head-h:132px;
}

/* ------------------------------------------------------- 2. Reset / base */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--body);font-family:var(--sans);
  font-size:15.5px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block;height:auto;}
a{color:var(--brand);text-decoration:none;transition:color .16s;}
a:hover{color:var(--accent-ink);}
h1,h2,h3,h4,h5{margin:0;color:var(--ink);font-weight:700;line-height:1.16;letter-spacing:-.012em;}
h1{font-size:clamp(30px,4.4vw,54px);}
h2{font-size:clamp(23px,2.9vw,36px);}
h3{font-size:clamp(18px,1.9vw,23px);}
h4{font-size:17px;}
p{margin:0 0 1em;}
ul,ol{margin:0 0 1em;padding-left:20px;}
li{margin-bottom:.4em;}
hr{border:0;border-top:1px solid var(--line);margin:34px 0;}
::selection{background:var(--brand);color:#fff;}
:focus-visible{outline:3px solid #E86A1A;outline-offset:2px;}

/* ---------------------------------------------------------------- 3. Layout */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:880px;}
.sec{padding:74px 0;}
.sec-sm{padding:48px 0;}
.sec-tight{padding:52px 0 26px;}
.sec-soft{background:var(--bg-soft);}
.sec-ink{background:var(--brand-900);color:#B7C4CF;}
.sec-ink h2,.sec-ink h3,.sec-ink h4{color:#fff;}
.grid{display:grid;gap:24px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.g6{grid-template-columns:repeat(3,1fr);}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;}
.split-wide{grid-template-columns:1.35fr 1fr;}
/* grid 子项默认 min-width:auto = 取内容 min-content，于是「一整张宽表/一条长公式」
   会把整列顶宽、进而把整页顶宽（哪怕外层已经折叠成单栏）。
   显式归零后，列宽只由容器决定，内部宽表交给 .tbl-scroll 自己横向滚动。 */
.split>*,.split-wide>*{min-width:0;}

/* section heading */
.eyebrow{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-ink);margin-bottom:12px;
}
.eyebrow.on-dark{color:#E86A1A;}
.sec-head{max-width:760px;margin-bottom:38px;}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.sec-head p{margin:12px 0 0;font-size:16px;color:var(--muted);}
.sec-head.on-dark p{color:#A9B8C4;}
.bar{width:58px;height:4px;background:var(--accent);border:0;margin:16px 0 0;}
.center .bar{margin:16px auto 0;}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:34px;}

/* --------------------------------------------------------------- 4. Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:14px 26px;border:2px solid transparent;
  border-radius:999px;cursor:pointer;transition:.18s;white-space:nowrap;line-height:1;
}
.btn svg{flex:0 0 auto;}
.btn-blue{background:var(--brand);border-color:var(--brand);color:#fff;}
.btn-blue:hover{background:var(--brand-700);border-color:var(--brand-700);color:#fff;}
.btn-red{background:var(--accent);border-color:var(--accent);color:var(--accent-on);}
.btn-red:hover{background:var(--accent-700);border-color:var(--accent-700);color:var(--accent-on);}
.btn-ghost{background:transparent;border-color:var(--brand);color:var(--brand);}
.btn-ghost:hover{background:var(--brand);color:#fff;}
.btn-white{background:#fff;border-color:#fff;color:var(--brand);}
.btn-white:hover{background:var(--bg-soft);border-color:var(--bg-soft);color:var(--brand);}
.btn-outline-w{background:transparent;border-color:rgba(255,255,255,.55);color:#fff;}
.btn-outline-w:hover{background:#fff;border-color:#fff;color:var(--brand);}
.btn-lg{padding:17px 34px;font-size:13.5px;}
.btn-sm{padding:10px 18px;font-size:12px;}
.btn-block{width:100%;}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.link-more{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--brand);
}
.link-more:hover{color:var(--accent-ink);}
.link-more svg{transition:transform .18s;}
.link-more:hover svg{transform:translateX(4px);}

/* ----------------------------------------------------------------- 5. Forms */
.field{margin-bottom:18px;}
.field label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);margin-bottom:7px;}
.field .hint{font-size:12.5px;color:var(--muted);margin:6px 0 0;}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=search],
select,textarea{
  width:100%;font-family:var(--sans);font-size:14.5px;color:var(--ink);
  background:#fff;border:1px solid #DCE3E9;border-radius:var(--radius);
  padding:12px 14px;transition:.16s;
}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231B3A5C' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(160,13,34,.13);}
textarea{min-height:120px;resize:vertical;}
.check{display:flex;gap:10px;font-size:13.5px;color:var(--body);align-items:flex-start;margin-bottom:16px;}
.check input{width:17px;height:17px;margin-top:3px;accent-color:var(--brand);flex:0 0 auto;}
.req{color:var(--accent-ink);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;}
.form-note{font-size:12.5px;color:var(--muted);margin-top:14px;}
.form-msg{display:none;padding:14px 16px;border-radius:var(--radius);font-size:14px;margin-bottom:18px;}
.form-msg.show{display:block;}
.form-msg.ok{background:#EDF1F5;border:1px solid #D3DDE6;color:#142C46;}

/* ------------------------------------------------- 6. Topbar / Header / Nav */
.topbar{background:var(--brand);color:#B7C4CF;font-size:12.5px;}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:38px;}
.topbar a{color:#B7C4CF;}
.topbar a:hover{color:#fff;}
.topbar .tb-l,.topbar .tb-r{display:flex;align-items:center;gap:18px;}
.topbar .tb-r{gap:14px;}
.topbar .sep{width:1px;height:14px;background:rgba(255,255,255,.22);}
.topbar .tb-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.topbar .tb-item svg{width:14px;height:14px;flex:0 0 auto;fill:currentColor;}
/* 顶栏常驻 OE / 件号查找框。
   本品类买家手上拿的是旧件上的 OE 号，不是产品分类，所以把查询入口
   放在第一屏常驻 —— 标杆站（SY-PARTS、GDST）都是这么做的。 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.tb-oe{display:flex;align-items:center;flex:0 1 380px;min-width:0;position:relative;}
.tb-oe input{width:100%;height:26px;padding:0 32px 0 12px;border:1px solid rgba(255,255,255,.28);
  border-radius:13px;background:rgba(255,255,255,.10);color:#fff;font:inherit;font-size:12.5px;}
.tb-oe input::placeholder{color:#C3CFD9;}
.tb-oe input:focus{outline:none;background:#fff;color:var(--ink);border-color:#fff;}
.tb-oe input:focus::placeholder{color:var(--muted);}
.tb-oe button{position:absolute;right:2px;top:1px;width:26px;height:24px;border:0;background:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:#B7C4CF;padding:0;}
.tb-oe button:hover{color:#fff;}
.tb-oe button svg{width:15px;height:15px;}
.tb-oe input:focus+button{color:var(--muted);}
@media (max-width:1100px){ .tb-oe{display:none;} }
.social{display:flex;align-items:center;gap:12px;}
.social a{display:inline-flex;opacity:.85;}
.social a:hover{opacity:1;}
.social svg{width:15px;height:15px;fill:currentColor;}
.lang{display:flex;align-items:center;gap:6px;}
.lang a{font-weight:700;}
.lang a.active{color:#fff;}
.lang a.active::after{content:"";display:block;height:2px;background:var(--accent);margin-top:2px;}

.site-head{position:sticky;top:0;z-index:70;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(16,32,46,.02);}
.site-head .wrap{display:flex;align-items:center;gap:26px;min-height:78px;}
.brand{flex:0 0 auto;display:flex;align-items:center;}
.brand img{height:46px;width:auto;}

.nav{display:flex;align-items:stretch;gap:4px;margin-left:auto;position:static;}
.nav>li{list-style:none;display:flex;}
.nav>li>a{
  display:flex;align-items:center;gap:6px;padding:26px 10px;color:var(--ink);
  font-size:11.8px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  border-bottom:3px solid transparent;white-space:nowrap;
}
.nav>li>a:hover,.nav>li.active>a{color:var(--brand);border-bottom-color:var(--accent);}
.nav>li>a .cv{width:9px;height:6px;transition:transform .2s;}
.nav>li>a .cv path{stroke:currentColor;stroke-width:2;fill:none;}
.nav>li:hover>a .cv{transform:rotate(180deg);}
.nav-actions{display:flex;align-items:center;gap:14px;margin-left:8px;flex:0 0 auto;}
.icon-btn{background:none;border:0;padding:8px;cursor:pointer;color:var(--ink);display:inline-flex;border-radius:50%;}
.icon-btn:hover{color:var(--accent-ink);background:var(--bg-soft);}
.burger{display:none;}

/* category strip */
.cat-strip{background:var(--brand-900);}
.cat-strip ul{display:flex;list-style:none;margin:0;padding:0;gap:0;overflow-x:auto;scrollbar-width:none;}
.cat-strip ul::-webkit-scrollbar{display:none;}
.cat-strip a{
  display:block;padding:12px 20px;color:#C3CFD9;font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;border-bottom:2px solid transparent;
}
.cat-strip a:hover{color:#fff;border-bottom-color:var(--accent);background:rgba(255,255,255,.05);}
.cat-strip .cs-label{
  display:flex;align-items:center;padding:12px 18px 12px 0;color:#fff;font-size:12px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
}

/* --------------------------------------------------------- 7. Mega menu */
.mega{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  width:min(1080px,calc(100vw - 40px));background:#fff;border:1px solid var(--line);
  border-top:3px solid var(--accent);border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:30px 34px;opacity:0;visibility:hidden;
  transition:.2s;z-index:80;
}
.nav>li:hover .mega,.nav>li:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.mega-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.15fr;gap:34px;}
.mega h5{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);
  margin:0 0 14px;font-weight:700;}
.mega ul{list-style:none;margin:0;padding:0;}
.mega li{margin:0;}
.mega li a{display:block;font-size:13.5px;color:var(--body);padding:6px 0;border-bottom:1px dashed var(--line-2);}
.mega li a:hover{color:var(--accent-ink);padding-left:4px;}
.mega-promo{background:var(--brand-900);border-radius:var(--radius-lg);padding:22px;color:#C3CFD9;}
.mega-promo h5{color:#E86A1A;}
.mega-promo h4{color:#fff;font-size:17px;margin-bottom:8px;}
.mega-promo p{font-size:13px;margin:0 0 16px;color:#A9B8C4;}
.mega-promo img{border-radius:var(--radius);margin-bottom:16px;}

/* search overlay */
.search-pop{position:fixed;inset:0;background:rgba(42,3,8,.62);z-index:120;display:none;padding-top:12vh;}
.search-pop.open{display:block;}
.search-pop .box{max-width:760px;margin:0 auto;background:#fff;border-radius:var(--radius-lg);
  padding:26px;box-shadow:var(--shadow-lg);}
.search-pop form{display:flex;gap:12px;}
.search-pop input{font-size:17px;padding:15px 18px;}
.quick-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.quick-tags a{font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:5px 13px;color:var(--body);}
.quick-tags a:hover{border-color:var(--brand);color:var(--brand);}

/* mobile drawer */
.drawer{position:fixed;inset:0 auto 0 0;width:min(360px,88vw);background:#fff;z-index:140;
  transform:translateX(-102%);transition:transform .26s;overflow-y:auto;box-shadow:var(--shadow-lg);}
.drawer.open{transform:none;}
.drawer .dh{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;
  border-bottom:1px solid var(--line);}
.drawer .dh img{height:38px;}
.drawer nav{padding:10px 0 40px;}
.drawer nav a{display:block;padding:13px 20px;color:var(--ink);font-size:14px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--line-2);}
.drawer nav .sub a{padding-left:34px;font-weight:400;text-transform:none;letter-spacing:0;
  font-size:13.5px;color:var(--body);}
.drawer .dcta{padding:20px;}
.scrim{position:fixed;inset:0;background:rgba(42,3,8,.5);z-index:130;opacity:0;visibility:hidden;
  transition:.24s;}
.scrim.open{opacity:1;visibility:visible;}

/* ------------------------------------------------------------------ 8. Hero */
.hero{position:relative;background:var(--brand-950);overflow:hidden;color:#fff;}
.hero-bg{position:absolute;inset:0;}
.hero-bg img{width:100%;height:100%;object-fit:cover;}
/* <picture> 默认 inline，会让内部 img 的 height:100% 失去参照高度，
   横幅底图直接塌成 0 高。必须先把它撑成块级并占满父容器。 */
.hero-bg picture,.page-hero .bg picture{display:block;width:100%;height:100%;}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(9,21,32,.92) 0%,rgba(20,44,70,.72) 46%,rgba(27,58,92,.34) 100%);}
.hero .wrap{position:relative;z-index:2;padding-top:104px;padding-bottom:132px;}
.hero-inner{max-width:720px;}
.hero h1{color:#fff;font-size:clamp(34px,5vw,62px);letter-spacing:-.02em;}
.hero h1 em{font-style:normal;color:#E86A1A;}
.hero .lead{font-size:17.5px;color:#C3CFD9;margin:20px 0 0;max-width:600px;}
.hero .btn-row{margin-top:34px;}
/* 首屏卖点条：放在正文与按钮之间，三个短语用中点分隔。
   颜色用 hero 上的浅灰蓝（--hero-ink，压深蓝底 8.2:1），不是纯白 —— 
   与正文拉开层次但不抢标题。 */
.hero-trust{margin:22px 0 0;font-size:14.5px;font-weight:600;letter-spacing:.02em;color:#A9B8C4;}
.hero-kicker{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#A9B8C4;font-weight:700;
  margin-bottom:16px;}
/* 四项数据条：用 grid 而不是 flex-wrap。
   ⚠️ 曾经是 `display:flex;gap:44px;flex-wrap:wrap`，在标签更长时**整项掉到第二行**：
   英文四项需 634px、容器（.hero-inner 上限 720px）放得下；
   西语四项需 731px，差 11px 就换行成「3 + 1」两排，很难看。
   grid + minmax(0,1fr) 让四项**结构上不可能换行**（四列等宽），
   万一某个标签还是过长，它只在**自己格内**折行，不会破坏整排的节奏。
   四列等宽还能让数字基线对齐，比 flex 的自然宽度更整齐。 */
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px 30px;margin-top:54px;padding-top:30px;
  border-top:1px solid rgba(255,255,255,.16);}
.hero-stats .s strong{display:block;font-size:32px;color:#fff;line-height:1;letter-spacing:-.02em;}
.hero-stats .s span{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#A9B8C4;
  display:block;line-height:1.35;}

/* hero overlap cards */
.hero-cards{margin-top:-72px;position:relative;z-index:5;}
.hero-cards .grid{gap:18px;}
.hcard{display:grid;grid-template-columns:1fr 1fr;background:var(--brand-900);min-height:230px;
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:.22s;}
.hcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}
.hcard .im{position:relative;}
.hcard .im img{width:100%;height:100%;object-fit:cover;}
.hcard .tx{padding:26px 24px;color:#fff;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(140deg,var(--brand) 0%,var(--brand-900) 100%);}
.hcard.red .tx{background:linear-gradient(140deg,var(--brand-700) 0%,var(--brand-950) 100%);
  border-top:3px solid var(--accent);}
/* 需求是「按钮和卖点用橙」，不是整块橙面板 —— 大面积橙既刺眼又过不了对比度，
   所以这张卡改成深蓝底 + 橙色顶边与橙色小标，橙色作为强调出现。 */
/* 第三张卡的小标签**不再单独上色** —— 曾经写成 .hcard.red .tx small{color:#F0A46A}
   （浅橙），用意是呼应强调色，但结果和另外两张的白字不一致，看起来像配错了。
   现在三张卡的小标签统一继承 .hcard .tx small（白字 80% 不透明度）。
   这张卡的「强调」由顶部的橙色描边承担，不需要小标签再上一次色。
   ⚠️ 改这里前先确认三张卡的 small 颜色一致 —— 对比度审计只查达标，查不出「不一致」。 */
.hcard .tx small{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;opacity:.8;}
.hcard .tx b{font-size:23px;line-height:1.14;margin:9px 0 14px;font-weight:700;letter-spacing:-.01em;}
.hcard .tx span{font-size:13.5px;color:#C3CFD9;}
.hcard .tx .go{margin-top:16px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;}

/* ------------------------------------------------------------- 9. Sections */
.svc3{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}
.svc3 .it{padding:0 14px;text-align:center;}
.svc3 .it .ic{width:62px;height:62px;margin:0 auto 18px;border-radius:50%;background:var(--brand-100);
  display:flex;align-items:center;justify-content:center;}
.svc3 .it .ic svg{width:29px;height:29px;stroke:var(--brand);fill:none;stroke-width:1.9;}
.svc3 h3{font-size:19px;text-transform:uppercase;letter-spacing:.02em;}
.svc3 p{font-size:14px;color:var(--muted);margin:10px 0 18px;}

/* category tiles */
/* 3 列：品类是 5 张（四类泵 + 缸修理包），3 列排成 3+2；
   4 列会剩一个孤立的第 5 张，2 列则排成 2+2+1 也难看。 */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media (max-width:1100px){ .tiles{grid-template-columns:repeat(2,1fr);} }
.tile{position:relative;border-radius:var(--radius-lg);overflow:hidden;display:block;color:#fff;}
.tile img{transition:transform .5s;}
.tile:hover img{transform:scale(1.05);}
.tile .ov{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(42,3,8,.88) 6%,rgba(42,3,8,.18) 62%);}
.tile .lb{position:absolute;left:0;right:0;bottom:0;padding:24px;color:#fff;}
.tile .lb b{display:block;font-size:20px;letter-spacing:.01em;}
.tile .lb i{display:block;width:44px;height:3px;background:var(--accent);margin-top:11px;}
.tile .lb span{display:block;font-size:13px;color:#C3CFD9;margin-top:11px;}
.tile:hover{color:#fff;}

/* trust strip */
.trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px;}
.badge{border:1px solid var(--line);border-radius:var(--radius);padding:10px 18px;background:#fff;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--brand);text-transform:uppercase;
  display:inline-flex;align-items:center;gap:9px;}

/* why us */
.why-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 26px;
  transition:.2s;}
.why-card:hover{border-color:var(--brand-200);box-shadow:var(--shadow);transform:translateY(-3px);}
.why-card .n{font-size:12px;font-weight:700;color:var(--accent-ink);letter-spacing:.14em;}
.why-card h4{margin:10px 0 9px;font-size:17.5px;}
.why-card p{margin:0;font-size:14px;color:var(--muted);}
.why-card .ic{width:48px;height:48px;border-radius:var(--radius);background:var(--brand-100);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.why-card .ic svg{width:24px;height:24px;stroke:var(--brand);fill:none;stroke-width:1.9;}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(255,255,255,.14);
  border-radius:var(--radius-lg);overflow:hidden;}
.stats .st{background:var(--brand-900);padding:32px 26px;text-align:center;}
.stats .st strong{display:block;font-size:38px;color:#fff;line-height:1;letter-spacing:-.02em;}
.stats .st span{display:block;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:#A9B8C4;margin-top:10px;}

/* testimonials */
.quotes{position:relative;}
.qtrack{display:flex;gap:24px;overflow:hidden;}
.qcard{flex:0 0 calc((100% - 48px)/3);background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:30px 28px;position:relative;}
.qcard .mark{font-size:56px;line-height:.7;color:var(--accent);font-family:Georgia,serif;}
.qcard blockquote{margin:12px 0 20px;font-size:15px;color:var(--ink);line-height:1.7;}
.qcard .who{display:flex;align-items:center;gap:13px;padding-top:18px;border-top:1px solid var(--line-2);}
.qcard .who .av{width:42px;height:42px;border-radius:50%;background:var(--brand-100);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex:0 0 auto;}
.qcard .who b{display:block;font-size:14px;color:var(--ink);}
.qcard .who span{font-size:12.5px;color:var(--muted);}
.qnav{display:flex;gap:10px;justify-content:center;margin-top:26px;align-items:center;}
.qnav button{width:11px;height:11px;border-radius:50%;border:0;background:#DCE3E9;cursor:pointer;padding:0;}
.qnav button.on{background:var(--accent);width:30px;border-radius:999px;}
.qarrows{display:flex;gap:10px;justify-content:center;margin-top:18px;}
.qarrows button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--brand);}
.qarrows button:hover{background:var(--brand);border-color:var(--brand);color:#fff;}

/* news */
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;height:100%;transition:.2s;}
.pcard:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:var(--brand-200);}
.pcard .im{position:relative;overflow:hidden;}
.pcard .im img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s;}
.pcard:hover .im img{transform:scale(1.04);}
.pcard .bd{padding:24px;display:flex;flex-direction:column;flex:1;}
.pcard .meta{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);
  font-weight:700;margin-bottom:10px;}
.pcard h4{font-size:17.5px;line-height:1.4;}
.pcard h4 a{color:var(--ink);}
.pcard h4 a:hover{color:var(--accent-ink);}
.pcard p{font-size:14px;color:var(--muted);margin:12px 0 0;}
.pcard .ft{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:10px;
  font-size:12px;color:var(--muted);}

/* cta band */
.cta-band{background:linear-gradient(120deg,var(--brand-950) 0%,var(--brand) 62%,#142C46 100%);
  color:#fff;position:relative;overflow:hidden;}
.cta-band::after{content:"";position:absolute;right:-90px;top:-90px;width:420px;height:420px;
  border-radius:50%;border:60px solid rgba(255,255,255,.05);}
.cta-band .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.4fr auto;gap:40px;
  align-items:center;padding:60px 24px;}
.cta-band h2{color:#fff;}
.cta-band p{color:#C3CFD9;margin:12px 0 0;}

/* ---------------------------------------------------------------- 11. Finder */
.finder{background:var(--brand-900);position:relative;overflow:hidden;color:#fff;}
.finder::before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(circle at 82% 18%,rgba(228,0,43,.75),transparent 55%);}
.finder .wrap{position:relative;z-index:2;padding:72px 24px;text-align:center;}
.finder h2{color:#fff;}
.finder .sub{color:#A9B8C4;margin:14px auto 0;max-width:660px;}
.finder .fbox{background:#fff;border-radius:var(--radius-lg);padding:22px;margin-top:36px;
  box-shadow:var(--shadow-lg);display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:12px;
  align-items:end;text-align:left;}
.finder .fbox .field{margin:0;}
.finder .fbox .field label{font-size:11.5px;color:var(--muted);}
.finder .fbox .field select,.finder .fbox .field input{padding:11px 12px;font-size:14px;}
.finder .fbox .btn{padding:12px 22px;height:44px;}
.finder .fnote{font-size:12.5px;color:#A9B8C4;margin:16px 0 0;}
.finder-result{margin-top:22px;background:rgba(255,255,255,.09);border:1px dashed rgba(255,255,255,.3);
  border-radius:var(--radius-lg);padding:22px;text-align:left;color:#C3CFD9;font-size:14px;display:none;}
.finder-result.show{display:block;}

/* -------------------------------------------------------------- 12. Products */
.page-hero{position:relative;background:var(--brand-900);overflow:hidden;color:#fff;}
.page-hero .bg{position:absolute;inset:0;}
.page-hero .bg img{width:100%;height:100%;object-fit:cover;opacity:.5;}
.page-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(9,21,32,.92),rgba(110,11,27,.62));}
.page-hero .wrap{position:relative;z-index:2;padding:66px 24px 62px;}
.page-hero h1{color:#fff;font-size:clamp(28px,3.8vw,46px);}
.page-hero p{color:#C3CFD9;max-width:720px;margin:14px 0 0;font-size:16px;}
.crumb{font-size:12.5px;color:#A9B8C4;letter-spacing:.05em;margin-bottom:16px;}
.crumb a{color:#A9B8C4;}
.crumb a:hover{color:#fff;}
.crumb span{opacity:.6;margin:0 8px;}
.crumb b{color:#fff;font-weight:600;}

.filterbar{border-bottom:1px solid var(--line);background:#fff;}
.filterbar .wrap{display:flex;flex-direction:column;align-items:stretch;gap:14px;
  padding-top:20px;padding-bottom:20px;}
.filterbar .lbl{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);white-space:nowrap;}
.filterbar .fb-line1{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.filterbar .fb-line2{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line-2);padding-top:14px;}
.filterbar .fb-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.filterbar form{display:flex;gap:10px;}
.filterbar form input{min-width:230px;}
.chips{display:flex;gap:10px;flex-wrap:wrap;}
.chip{font-size:13px;font-weight:600;padding:8px 16px;border-radius:999px;background:var(--brand-100);
  color:var(--brand);border:1px solid transparent;cursor:pointer;transition:.16s;font-family:var(--sans);}
.chip:hover{background:var(--brand-200);}
.chip.on{background:var(--accent);color:var(--accent-on);}
.filterbar select{max-width:200px;}

.shop{display:grid;grid-template-columns:255px 1fr;gap:44px;align-items:start;}
.side{border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;background:#fff;}
.side+.side{margin-top:20px;}
.side h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px;}
.side ul{list-style:none;margin:0;padding:0;}
.side li a{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--body);
  padding:8px 0;border-bottom:1px dashed var(--line-2);}
.side li a:hover{color:var(--accent-ink);}
.side li a .c{font-size:12px;color:var(--muted);}
/* facet 是筛选控件，语义上用 button；这里把它还原成和原来链接一模一样的外观 */
.side li button{display:flex;justify-content:space-between;gap:10px;width:100%;
  font:inherit;font-size:14px;color:var(--body);background:none;border:0;text-align:left;
  padding:8px 0;border-bottom:1px dashed var(--line-2);cursor:pointer;transition:color .16s;}
.side li button:hover{color:var(--accent-ink);}
.side li button .c{font-size:12px;color:var(--muted);}
.side li:last-child button{border-bottom:0;}
.side .sticky{position:sticky;top:150px;}
/* ⚠️ 这里原来写的是 `.side .card-help`（后代选择器，要求 .card-help 是 .side 的
   子元素），但 HTML 实际是 `<div class="side card-help">` —— 同一个元素上挂两个类。
   于是这三条规则**一条都没生效**：卡片没有深色背景，而模板里给邮箱和电话写了
   内联 `style="color:#fff"`，结果就是**白字压在白色页面上，两行联系方式完全看不见**。
   （改造前是 --blue-900 + #D3DDE6，同样匹配不到，所以这个 bug 一直存在。）
   现在两种结构都覆盖。 */
.side.card-help,.side .card-help{background:var(--brand-900);color:#C3CFD9;border-radius:var(--radius-lg);padding:24px;}
.side.card-help h4,.side .card-help h4{color:#fff;border-bottom-color:rgba(255,255,255,.16);}
.side.card-help p,.side .card-help p{font-size:13.5px;}

.plist{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.plist.two{grid-template-columns:repeat(2,1fr);}
.pitem{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:.2s;}
.pitem:hover{border-color:var(--brand-200);box-shadow:var(--shadow);transform:translateY(-3px);}
.pitem .pim{position:relative;background:var(--bg-soft);}
.pitem .pim img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.pitem .tags{position:absolute;top:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap;}
.tag{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--brand);color:#fff;border-radius:3px;padding:4px 9px;}
.tag.red{background:var(--accent);color:var(--accent-on);}
.tag.ok{background:var(--ok);color:#fff;}   /* 原 .tag.green：--ok 现为深蓝，改名避免误导 */
.pitem .pbd{padding:20px;display:flex;flex-direction:column;flex:1;}
.pitem .ptype{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);font-weight:700;}
.pitem h4{font-size:16.5px;margin:8px 0 0;line-height:1.4;}
.pitem h4 a{color:var(--ink);}
.pitem h4 a:hover{color:var(--accent-ink);}
.pitem .spec{list-style:none;margin:12px 0 0;padding:0;font-size:13px;color:var(--muted);}
.pitem .spec li{display:flex;gap:8px;border-bottom:1px dashed var(--line-2);padding:5px 0;margin:0;}
.pitem .spec li b{color:var(--ink);font-weight:600;min-width:78px;}
.pitem .pft{margin-top:auto;padding-top:16px;display:flex;gap:10px;align-items:center;
  border-top:1px solid var(--line-2);}

/* 空商品位（后续录入） */
.pslot{border:2px dashed #D3DDE6;border-radius:var(--radius-lg);background:
  repeating-linear-gradient(135deg,#F5F7FA,#F5F7FA 12px,#F5F7FA 12px,#F5F7FA 24px);
  min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:30px;text-align:center;}
.pslot .num{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--muted);}
.pslot .icn{width:54px;height:54px;border-radius:50%;background:#EEF1F4;display:flex;
  align-items:center;justify-content:center;}
.pslot .icn svg{width:26px;height:26px;stroke:#8A9BA8;fill:none;stroke-width:1.8;}
.pslot b{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;}
.pslot small{font-size:12.5px;color:var(--muted);max-width:230px;line-height:1.6;}
.pslot .tag-empty{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:#EEF1F4;color:#5F6E7D;border-radius:3px;padding:4px 10px;}

.empty-note{background:#F5F7FA;border:1px solid #DCE3E9;border-left:4px solid var(--warn);
  border-radius:var(--radius);padding:20px 24px;font-size:14px;color:#5F6E7D;}
.empty-note b{color:#142C46;}
.empty-note code{background:#fff;border:1px solid #DCE3E9;border-radius:3px;padding:1px 6px;
  font-family:ui-monospace,Consolas,monospace;font-size:13px;}

.pager{display:flex;gap:8px;justify-content:center;margin-top:44px;}
.pager a,.pager span{min-width:42px;height:42px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--line);border-radius:var(--radius);font-size:14px;
  color:var(--body);background:#fff;}
.pager a:hover{border-color:var(--brand);color:var(--brand);}
.pager .on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700;}

/* --------------------------------------------------------- 13. Product detail */
.pdp{display:grid;grid-template-columns:1.06fr 1fr;gap:52px;align-items:start;}
.gallery .main{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff;}
.gallery .main img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.gallery .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px;}
.gallery .thumbs button{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  padding:0;background:none;cursor:pointer;}
.gallery .thumbs button.on{border-color:var(--brand);box-shadow:0 0 0 2px rgba(160,13,34,.16);}
.gallery .thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.pdp-info .ptype{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);font-weight:700;}
.pdp-info h1{font-size:clamp(26px,3vw,38px);margin:12px 0 0;}
.pdp-info .sku{font-size:13px;color:var(--muted);margin-top:10px;font-family:ui-monospace,Consolas,monospace;}
.pdp-info .desc{font-size:15.5px;margin:20px 0;color:var(--body);}
.pdp-info .badges{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0;}
.pdp-info .price-line{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px 22px;margin:22px 0;}
.pdp-info .price-line .r{display:flex;justify-content:space-between;gap:16px;font-size:14px;padding:6px 0;}
.pdp-info .price-line .r b{color:var(--ink);}
.pdp-info .price-line .r.lead{border-top:1px dashed var(--line);margin-top:8px;padding-top:14px;
  font-size:16px;font-weight:700;color:var(--ink);}
.spec-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;}
.spec-table th,.spec-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top;}
.spec-table th{background:var(--bg-soft);font-weight:700;color:var(--ink);width:31%;font-size:13.5px;}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0;}
/* 窄屏下把宽表关在容器里横向滚动，避免整页被撑宽 */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
.tbl-scroll>.spec-table{margin:0;}
.spec-table.wide{min-width:620px;}
.tbl-scroll::-webkit-scrollbar{height:8px;}
.tbl-scroll::-webkit-scrollbar-track{background:var(--bg-soft);border-radius:4px;}
.tbl-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:26px;flex-wrap:wrap;}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:13px 20px;cursor:pointer;
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.tabs button.on{color:var(--brand);border-bottom-color:var(--accent);}
.tabpane{display:none;}
.tabpane.on{display:block;}

/* FAQ */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer;padding:20px 40px 20px 0;font-size:16px;font-weight:700;color:var(--ink);
  position:relative;list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:22px;color:var(--brand);font-weight:400;}
.faq details[open] summary::after{content:"–";}
.faq .ans{padding:0 40px 22px 0;font-size:14.5px;color:var(--body);}

/* --------------------------------------------------------------- 14. Content */
.prose{font-size:15.5px;line-height:1.78;color:var(--body);}
.prose h2{font-size:26px;margin:38px 0 14px;}
.prose h3{font-size:19px;margin:30px 0 12px;}
.prose ul,.prose ol{padding-left:22px;}
.prose img{border-radius:var(--radius-lg);margin:22px 0;}
.prose blockquote{margin:24px 0;padding:18px 24px;background:var(--brand-100);border-left:4px solid var(--brand);
  border-radius:0 var(--radius) var(--radius) 0;font-size:15px;}
.prose table{width:100%;border-collapse:collapse;font-size:14px;margin:22px 0;}
.prose th,.prose td{border:1px solid var(--line);padding:11px 14px;text-align:left;}
.prose th{background:var(--bg-soft);font-weight:700;color:var(--ink);}
.prose code{background:var(--bg-soft2);border-radius:3px;padding:2px 6px;
  font-family:ui-monospace,Consolas,monospace;font-size:13.5px;}

.timeline{position:relative;padding-left:30px;}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line);}
.timeline .ti{position:relative;padding-bottom:30px;}
.timeline .ti::before{content:"";position:absolute;left:-30px;top:5px;width:14px;height:14px;
  border-radius:50%;background:#fff;border:3px solid var(--accent);}
.timeline .ti b{display:block;font-size:13px;color:var(--accent-ink);letter-spacing:.08em;}
.timeline .ti h4{margin:5px 0 6px;font-size:17px;}
.timeline .ti p{margin:0;font-size:14.5px;color:var(--muted);}

.steps{display:grid;gap:0;}
.step-row{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:22px 0;border-bottom:1px solid var(--line);}
.step-row:last-child{border-bottom:0;}
.step-row .n{width:46px;height:46px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:16px;}
.step-row h4{margin-bottom:6px;font-size:17px;}
.step-row p{margin:0;font-size:14.5px;color:var(--muted);}

.boxes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.box{border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;background:#fff;}
.box h4{margin-bottom:10px;font-size:17px;}
.box p{margin:0;font-size:14.5px;color:var(--muted);}
.box ul{margin:10px 0 0;font-size:14.5px;color:var(--body);}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:52px;align-items:start;}
.info-card{background:var(--brand-900);border-radius:var(--radius-lg);padding:32px;color:#C3CFD9;}
.info-card h3{color:#fff;font-size:21px;margin-bottom:20px;}
.info-card .ir{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.13);}
.info-card .ir:last-of-type{border-bottom:0;}
.info-card .ir svg{width:19px;height:19px;stroke:#E86A1A;fill:none;stroke-width:1.9;flex:0 0 auto;margin-top:4px;}
.info-card .ir b{display:block;color:#fff;font-size:14px;margin-bottom:2px;}
.info-card .ir span,.info-card .ir a{font-size:13.5px;color:#C3CFD9;}
.info-card .ir a:hover{color:#fff;}
.map{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
.map img{width:100%;}

/* table list (catalogue / downloads) */
.dl-list{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
.dl-row{display:flex;align-items:center;gap:18px;padding:20px 24px;border-bottom:1px solid var(--line);
  background:#fff;}
.dl-row:last-child{border-bottom:0;}
.dl-row:hover{background:var(--bg-soft);}
.dl-row .ic{width:44px;height:44px;border-radius:var(--radius);background:var(--brand-100);display:flex;
  align-items:center;justify-content:center;flex:0 0 auto;}
.dl-row .ic svg{width:22px;height:22px;stroke:var(--brand);fill:none;stroke-width:1.8;}
.dl-row .tx{flex:1;}
.dl-row .tx b{display:block;font-size:15.5px;color:var(--ink);}
.dl-row .tx span{font-size:13px;color:var(--muted);}

/* --------------------------------------------------------------- 15. Footer */
.site-foot{background:var(--brand-950);color:#A9B8C4;font-size:14px;}
.site-foot .top{padding:60px 0 46px;border-bottom:1px solid rgba(255,255,255,.1);}
.site-foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:36px;}
.site-foot h5{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 18px;}
.site-foot ul{list-style:none;margin:0;padding:0;}
.site-foot li{margin-bottom:9px;}
.site-foot a{color:#A9B8C4;font-size:13.5px;}
.site-foot a:hover{color:#fff;}
.site-foot .fdesc{font-size:13.5px;margin:18px 0;color:#8A9BA8;max-width:290px;}
.site-foot .fbrand img{height:44px;}
.newsletter{display:flex;gap:0;margin-top:18px;max-width:320px;}
.newsletter input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;
  border-radius:var(--radius) 0 0 var(--radius);font-size:13.5px;padding:11px 14px;}
.newsletter input::placeholder{color:#8A9BA8;}
.newsletter button{border-radius:0 var(--radius) var(--radius) 0;padding:0 18px;border:0;
  background:var(--accent);color:var(--accent-on);cursor:pointer;font-weight:700;}
.newsletter button:hover{background:var(--accent-700);}
.site-foot .bottom{padding:22px 0;display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;font-size:12.5px;color:#8A9BA8;}
.site-foot .bottom .social a{color:#A9B8C4;}
.cert-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.cert-row span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px solid rgba(255,255,255,.22);
  border-radius:3px;padding:4px 10px;color:#C3CFD9;}

/* floating quote */
.float-quote{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;flex-direction:column;gap:10px;
  align-items:flex-end;}
.float-quote .fb{width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;display:flex;
  align-items:center;justify-content:center;box-shadow:var(--shadow-lg);transition:.18s;}
.float-quote .fb:hover{background:var(--accent-700);transform:scale(1.06);color:#fff;}
.float-quote .fl{background:var(--brand);color:#fff;border-radius:999px;padding:11px 20px;font-size:12.5px;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;box-shadow:var(--shadow-lg);}
.float-quote .fl:hover{color:#fff;background:var(--brand-700);}
.to-top{position:fixed;left:22px;bottom:22px;z-index:90;width:44px;height:44px;border-radius:50%;
  background:#fff;border:1px solid var(--line);display:none;align-items:center;justify-content:center;
  box-shadow:var(--shadow);color:var(--brand);cursor:pointer;}
.to-top.on{display:flex;}

/* ------------------------------------------------------------- 16. Utilities */
[id]{scroll-margin-top:150px;}
.tc{text-align:center;}
.mt0{margin-top:0;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
.mb0{margin-bottom:0;}
.mb20{margin-bottom:20px;}
.muted{color:var(--muted);}
.small{font-size:13px;}
.nowrap{white-space:nowrap;}
.hide{display:none !important;}
.divider{height:1px;background:var(--line);margin:44px 0;}
.pill-list{display:flex;gap:8px;flex-wrap:wrap;}
.pill{font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:6px 14px;color:var(--body);}
.figcap{font-size:12.5px;color:var(--muted);margin-top:10px;text-align:center;}

/* 西语版导航文案更长，单独收紧 */
html[lang="es"] .nav>li>a{font-size:11.6px;letter-spacing:.02em;padding:26px 10px;}

/* ------------------------------------------------------------ 17. Responsive */
@media (max-width:1500px){
  .nav>li>a{padding:24px 9px;font-size:11.5px;letter-spacing:.035em;}
  .nav-actions .btn-sm{padding:9px 16px;font-size:11.5px;}
}
@media (max-width:1220px){
  .nav>li[data-pid="types"],.nav>li[data-pid="serve"]{display:none;}
}
@media (max-width:1100px){
  .site-foot .cols{grid-template-columns:1.4fr 1fr 1fr;}
  .g6{grid-template-columns:repeat(2,1fr);}
  .plist{grid-template-columns:repeat(2,1fr);}
  .finder .fbox{grid-template-columns:1fr 1fr;align-items:stretch;}
  .finder .fbox .btn{grid-column:1/-1;}
  .shop{grid-template-columns:1fr;}
  .side .sticky{position:static;}
  .mega-grid{grid-template-columns:1fr 1fr;}
  .mega-promo{grid-column:1/-1;}
}
@media (max-width:980px){
  .nav,.cat-strip{display:none;}
  .burger{display:inline-flex;}
  .site-head .wrap{min-height:66px;}
  .brand img{height:40px;}
  .split,.split-wide,.pdp,.contact-grid,.cta-band .wrap{grid-template-columns:1fr;gap:34px;}
  .g3,.svc3,.tiles,.g4,.stats,.boxes,.g2{grid-template-columns:repeat(2,1fr);}
  .qcard{flex:0 0 calc((100% - 24px)/2);}
  .hero .wrap{padding-top:70px;padding-bottom:120px;}
  .sec{padding:56px 0;}
  /* 页脚 5 列栅格必须逐级收窄，否则窄屏会撑出横向滚动条 */
  .site-foot .cols{grid-template-columns:repeat(2,1fr);gap:30px;}
  .site-foot .fbrand{grid-column:1/-1;}
}
@media (max-width:820px){
  /* 数据条：容器开始被压窄前保持四列，到这里才降 2×2。
     820 这个值是按实测定的 —— .hero-inner 上限 720px，四列每列 158px，
     正好容纳最长的西语标签（COTIZACIÓN RÁPIDA）；低于此视口列宽开始不足。 */
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 26px;}
}
@media (max-width:700px){
  body{font-size:15px;}
  .wrap{padding:0 18px;}
  /* .split / .split-wide 是「左文右图」两栏容器，全站十多处在用。
     原先这里漏了它们 —— 手机端仍按 1.05fr/.95fr 强行两栏，只要某一栏的内容
     min-content 超过视口（例如一张长 spec-table），整页就被顶宽。
     2026-10 质量页加证书墙时暴露了这个潜在问题（390px 溢出 80px），一并修掉。 */
  .g3,.svc3,.tiles,.g4,.stats,.boxes,.g2,.g6,.plist,.plist.two,.form-grid,.qcard,
  .split,.split-wide{grid-template-columns:1fr;}
  .split,.split-wide{gap:28px;}
  /* .btn 是 white-space:nowrap —— 只要文案超过视口宽度，按钮就会顶宽整页
     （2026-10 质量页「Request the certificate for your part numbers」撑到 452px，
     在 390px 视口下溢出 80px）。窄屏允许折行并限宽，任何长度的文案都不会再顶宽。 */
  .btn{white-space:normal;max-width:100%;text-align:center;line-height:1.3;padding:13px 20px;}
  .qcard{flex:0 0 100%;}
  .hero-cards .grid{grid-template-columns:1fr;}
  .hcard{min-height:200px;}
  .topbar .tb-l .hide-sm{display:none;}
  .page-hero .wrap{padding:44px 18px 42px;}
  .hero-stats{gap:18px 22px;}
  .float-quote .fl{display:none;}
  .side{border:0;padding:0;}
  .dl-row{flex-wrap:wrap;}
  .site-head .nav-actions>.btn-red{display:none;}
  .brand img{height:36px;}
  /* 页脚收到单列，底部条改纵向堆叠（三个元素横排会溢出） */
  .site-foot .top{padding:44px 0 34px;}
  .site-foot .cols{grid-template-columns:1fr;gap:28px;}
  .site-foot .fdesc{max-width:none;}
  .site-foot .bottom{flex-direction:column;gap:12px;text-align:center;align-items:center;}
  .site-foot .newsletter{max-width:100%;}
}

/* [hidden] 必须真的隐藏。
   HTML 里 hidden 属性的默认样式是 display:none，但它的优先级低于任何
   类选择器 —— 只要元素身上有 .pcard{display:flex} 这类规则，hidden 就失效。
   资讯页筛选、评价区隐藏都依赖 hidden，所以这里显式兜底。 */
[hidden]{display:none !important;}

/* ==========================================================================
   文章静态页（GEO 优化的产物）
   --------------------------------------------------------------------------
   这些页面由 tools/_news_render.py 在构建时生成，正文直接写在 HTML 里
   （不再靠 JS 填充），所以 AI 爬虫能读到。样式复用 .prose，
   这里只补布局：主栏 + 右侧相关文章栏。
   ========================================================================== */
.art-meta{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  margin-top:14px;}
.art-meta time{color:inherit;}
.art-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:52px;align-items:start;}
.art-main{min-width:0;}
.art-cover{width:100%;border-radius:var(--radius-lg);margin-bottom:30px;}
/* 导语：AI 最喜欢抓的就是这种「开头即答案」的段落，单独放大一档 */
.art-lead{font-size:18px;line-height:1.7;color:var(--ink);font-weight:500;
  padding:22px 26px;background:var(--brand-100);border-left:4px solid var(--brand);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;margin-bottom:28px;}
.art-takeaway{margin-top:44px;padding:28px 30px;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:var(--radius-lg);}
.art-takeaway h2{font-size:20px;margin:0 0 12px;}
.art-takeaway p{font-size:14.5px;line-height:1.7;color:var(--body);}
.art-side{position:sticky;top:150px;display:flex;flex-direction:column;gap:20px;}
.nmini-list{display:flex;flex-direction:column;}
.nmini{display:block;padding:13px 0;border-bottom:1px dashed var(--line-2);}
.nmini:last-child{border-bottom:0;}
.nmini .c{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:5px;}
.nmini b{font-size:14.5px;line-height:1.45;font-weight:600;color:var(--ink);}
.nmini:hover b{color:var(--accent-ink);}
@media (max-width:980px){
  .art-layout{grid-template-columns:minmax(0,1fr);gap:36px;}
  .art-side{position:static;}
  .art-lead{font-size:16.5px;padding:18px 20px;}
}

/* ==========================================================================
   材质对比矩阵 / 收益矩阵 / 材质深度说明
   --------------------------------------------------------------------------
   2026-10 从《（B-产品信息）》资料包引入的对比内容。两个矩阵都是宽表，
   靠已有的 .tbl-scroll 横向滚动；这里补首列吸附、★ 高亮与评级列居中。
   ========================================================================== */
/* 首列（维度名）在横向滚动时保持可见，否则滑到右边就不知道在看哪一行 */
.spec-table.matrix{min-width:860px;font-size:13.5px;}
.spec-table.matrix th:first-child,
.spec-table.matrix td:first-child{position:sticky;left:0;z-index:1;
  background:#fff;box-shadow:1px 0 0 var(--line-2);}
.spec-table.matrix thead th:first-child{background:var(--bg-soft);}
.spec-table.matrix th,.spec-table.matrix td{padding:11px 14px;}
.spec-table.matrix thead th{font-size:12.5px;letter-spacing:.02em;white-space:nowrap;}
/* ★ 是"该维度同级最优"的标记，用品牌红点出来 */
.spec-table.matrix b{color:var(--brand);font-weight:700;}
/* 收益矩阵：数值列居中，读起来像一张评分表 */
.rate-table td.rate{text-align:center;font-size:15px;letter-spacing:.06em;
  color:var(--brand);white-space:nowrap;}
.rate-table thead th{white-space:normal;}

/* 材质的 Composition / How it behaves（定义列表） */
.mat-facts{margin:18px 0;padding:0;}
.mat-facts dt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-top:14px;}
.mat-facts dt:first-child{margin-top:0;}
.mat-facts dd{margin:5px 0 0;font-size:14.5px;line-height:1.65;color:var(--body);}

/* 优势 / 代价 两栏：诚实说明"什么时候不该选它"，这对专业买家反而更可信 */
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0 22px;}
.pc{padding:14px 16px;border-radius:var(--radius-lg);border:1px solid var(--line);font-size:13.5px;}
.pc b{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;}
.pc span{color:var(--body);line-height:1.6;}
.pc-pro{background:var(--bg-soft);}
.pc-pro b{color:var(--ok);}
.pc-con{background:#F5F7FA;border-color:#DCE3E9;}
/* 提示块走中性灰阶，不用琥珀色（换肤后 --warn 已是银灰 #8A9BA8，
   而银灰压 #F5F7FA 只有 2.67:1，当文字不合规）。
   这里用 --muted #5F6E7D：压 #F5F7FA 是 4.88:1，达 AA。
   全站「浅色提示块」统一走 .empty-note / .pc-con 这一套配色。 */
.pc-con b{color:var(--muted);}
@media (max-width:700px){
  .proscons{grid-template-columns:1fr;}
  .spec-table.matrix{min-width:720px;}
}

/* 买家对照表：三列里第 2、3 列是长句，需要更宽松的行距与列宽 */
.spec-table.buyer-table th:first-child{width:19%;}
.spec-table.buyer-table td{font-size:13.5px;line-height:1.6;}
.spec-table.buyer-table td:nth-child(2){color:var(--ink);}

/* print */
@media print{
  .site-head,.topbar,.cat-strip,.float-quote,.to-top,.site-foot{display:none;}
}

/* ------------------------------------------------------------ 证书墙（Quality 页）
   商标注册证是竖版文书，用两列网格平铺；点击在新标签打开原图，
   因为买家（尤其是合规岗）会放大去核对注册号与有效期。 */
.certwall{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;}
.certwall a{display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:#fff;transition:.18s;}
.certwall a:hover{border-color:var(--brand);box-shadow:var(--shadow);}
.certwall img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top center;display:block;
  background:var(--bg-soft);}
.certwall b{display:block;font-size:12.5px;color:var(--ink);padding:9px 11px 0;}
.certwall span{display:block;font-size:11.5px;color:var(--muted);padding:0 11px 11px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
@media (max-width:520px){ .certwall{grid-template-columns:1fr;} }

/* <video> 的回退文案（仅在浏览器不支持 video 时可见）。
   显式给浅色：默认继承正文色在深色视频底上对比度不足。 */
.vfallback{color:#fff;margin:0;padding:16px;font-size:13.5px;}
.vfallback a{color:#E86A1A;text-decoration:underline;}