/* ═══════════════════════════════════════════════════════════════
   coyle.biz — 全站样式
   :root 的 token 由 scripts/tokens.py 生成、经 base.html 注入，
   本文件里不出现裸色值（除图片图板底色 --shot-bg，那是数据的一部分）。

   设计方向 D「VIER MARKEN」：四个代理品牌各占一个满幅色场，
   导航是四品牌色等分拼接，品牌色只标识品牌，企业色只标识我们自己的动作。
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   D · VIER MARKEN — 四品牌样本封面
   世界：德文原厂样本册封面画廊。四个品牌各占一个满幅色场，
   各用自己原厂色（取自真实 logo / 素材），滚动像依次翻书。
   拒绝：四张等大 logo 卡 + 统一品牌色。
   声量控制：色场内部靠留白和少量文字，入场安静，不堆动效。
   ───────────────────────────────────────────────────────────── */

*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{margin:0;font-family:var(--cond);font-weight:700;line-height:1.06;letter-spacing:-0.015em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* ── 导航：四个品牌色等分拼接 ─────────────────────────── */
/* 上行放品牌与操作，下行是四等分色带，每个品牌名落在自己那格颜色里 ——
   配色本身就是导航，颜色和品牌的对应关系不用解释。
   白字在四色上实测 14.0 / 19.7 / 5.66 / 7.23:1，全部达 AA 正文级。 */
header.nav{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--rule)}
/* 单行：公司名 | 四品牌色带 | 语言与操作。三段同高，四色在中间直接拼成一条。 */
.nav-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:stretch;min-height:56px}
.nav-utils{display:flex;align-items:center;gap:12px;background:var(--paper);padding-inline:clamp(14px,2.2vw,30px)}
.wordmark{
  display:flex;align-items:center;gap:9px;background:var(--paper);
  padding-inline:clamp(14px,2.2vw,30px);
  font-family:var(--cond);font-weight:800;font-size:23px;letter-spacing:-0.02em;
}
.wordmark small{font-family:var(--sans);font-weight:500;font-size:9.5px;letter-spacing:.24em;color:var(--mute);text-transform:uppercase}
.lang{display:flex;font-size:11.5px;letter-spacing:.12em;font-weight:600;border:1px solid var(--rule)}
.lang span,.lang a{padding:5px 9px;color:var(--mute);text-decoration:none}
.lang span[data-on]{background:var(--ink);color:#fff}
.lang a:hover{background:var(--paper-2);color:var(--ink)}
.cta-mini{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;background:var(--ink);color:#fff;font-weight:600;font-size:13.5px;padding:10px 17px;transition:background .2s}
.cta-mini:hover{background:var(--coyle-ink)}

.nav-brands{display:grid;grid-template-columns:repeat(4,1fr)}
.nav-brands a{
  position:relative;display:flex;align-items:center;justify-content:center;
  background:var(--sc);color:#fff;
  font-family:var(--cond);font-weight:600;font-size:clamp(10.5px,1.05vw,14px);
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  box-shadow:inset -1px 0 0 var(--on-dark-line);
  transition:filter .2s;
}
.nav-brands a:last-child{box-shadow:none}
.nav-brands a:hover{filter:brightness(1.16)}
.nav-brands a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#fff;
  transform:scaleX(0);transition:transform .28s cubic-bezier(.16,1,.3,1);
}
.nav-brands a:hover::after{transform:scaleX(1)}
.nav-brands a[data-m="schlegel"]{--sc:var(--mk-schlegel)}
.nav-brands a[data-m="abl"]{--sc:var(--mk-abl)}
.nav-brands a[data-m="sontheimer"]{--sc:var(--mk-sontheimer)}
.nav-brands a[data-m="doepke"]{--sc:var(--mk-doepke)}
@media(max-width:1000px){.nav-brands a span{display:none}}
@media(max-width:620px){
  .wordmark small{display:none}
  .cta-mini .txt-full{display:none}      /* 窄屏换短标签，而不是把按钮掏空 */
  .cta-mini{padding:10px 13px}
}
@media(min-width:621px){.cta-mini .txt-short{display:none}}

/* ── 书脊导航 ─────────────────────────────────────────── */
.spine{display:none}
/* 只留颜色，不放文字；宽度收到原来的 1/4（44px → 11px），
   起点压在导航栏下沿，不再和导航重叠。--navh 由脚本实测后写入。 */
@media(min-width:1100px){
  .spine{
    display:flex;flex-direction:column;position:fixed;right:0;
    top:var(--navh,98px);bottom:0;width:11px;z-index:35;
    transition:top .15s linear;
  }
  .spine a{flex:1;background:var(--sc);transition:flex-grow .5s cubic-bezier(.16,1,.3,1)}
  .spine a.on{flex-grow:1.5}
  .spine a[data-m="schlegel"]{--sc:var(--mk-schlegel)}
  .spine a[data-m="abl"]{--sc:var(--mk-abl)}
  .spine a[data-m="sontheimer"]{--sc:var(--mk-sontheimer)}
  .spine a[data-m="doepke"]{--sc:var(--mk-doepke)}
  main{padding-right:11px}
}

/* ── 首屏 ─────────────────────────────────────────────── */
.hero{padding-block:clamp(46px,6vw,88px) clamp(30px,3.6vw,46px)}
.hero h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:800;letter-spacing:-0.035em;text-wrap:balance}
.hero .lede{margin-top:24px;font-size:clamp(15px,1.2vw,17px);color:var(--ink-2);max-width:60ch}
.hero .lede strong{color:var(--ink);font-weight:600}
.hero-acts{display:flex;flex-wrap:wrap;gap:11px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;padding:14px 24px;font-weight:600;font-size:14.5px;border:1.5px solid var(--ink);transition:background .2s,color .2s,border-color .2s}
.btn--fill{background:var(--ink);color:#fff}
.btn--fill:hover{background:var(--mk-sontheimer);border-color:var(--mk-sontheimer)}
.btn--line:hover{background:var(--ink);color:#fff}
.btn svg{width:15px;height:15px;flex:none}

/* 书脊条：四色 */
.stripes{display:grid;grid-template-columns:repeat(4,1fr);height:10px;margin-top:clamp(36px,4.4vw,60px)}
.stripes i:nth-child(1){background:var(--mk-schlegel)}
.stripes i:nth-child(2){background:var(--mk-abl)}
.stripes i:nth-child(3){background:var(--mk-sontheimer)}
.stripes i:nth-child(4){background:var(--mk-doepke)}

/* ── 品牌封面 ─────────────────────────────────────────── */
.cover{
  position:relative;color:#fff;overflow:hidden;
  padding-block:clamp(52px,7vw,104px);
  background:var(--mc);
}

.cover-top{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,56px);align-items:end}
@media(min-width:900px){.cover-top{grid-template-columns:7fr 4fr}}

.cover-kicker{
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:var(--soft);margin-bottom:18px;
}
.cover h2{
  font-size:clamp(2rem,5.2vw,4.2rem);font-weight:800;letter-spacing:-0.035em;
  line-height:1.02;text-wrap:balance;
}
.cover h2 small{
  display:block;font-family:var(--sans);font-size:clamp(.82rem,1.2vw,1rem);
  font-weight:500;letter-spacing:.02em;color:var(--soft);margin-top:16px;
  line-height:1.5;max-width:44ch;
}
.cover-logo{display:flex;justify-content:flex-start}
@media(min-width:900px){.cover-logo{justify-content:flex-end}}
.cover-logo .plate{background:#fff;padding:16px 22px;display:flex;align-items:center;min-height:74px}
.cover-logo .plate img{height:30px;width:auto;max-width:190px;object-fit:contain}
.cover-logo .plate .txt{font-family:var(--cond);font-size:26px;font-weight:800;letter-spacing:-0.01em}

.cover-body{
  margin-top:clamp(34px,4vw,56px);display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--line);
}
@media(min-width:820px){.cover-body{grid-template-columns:repeat(3,1fr)}}
.cb{padding:22px 0;border-bottom:1px solid var(--line)}
@media(min-width:820px){
  .cb{border-bottom:0;border-right:1px solid var(--line);padding:26px 26px 0 0}
  .cb + .cb{padding-left:26px}
  .cb:last-child{border-right:0;padding-right:0}
}
.cb dt{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);font-weight:600;margin-bottom:11px}
.cb dd{margin:0;font-size:15px;font-weight:600;line-height:1.5}
.cb dd .s{color:var(--soft);font-weight:400;margin-inline:6px}

.cover-shot{margin-top:clamp(30px,3.6vw,46px);border:1px solid var(--line)}
.cover-shot img{width:100%;aspect-ratio:21/8;object-fit:cover;object-position:center}
@media(max-width:760px){.cover-shot img{aspect-ratio:16/10}}
.cover-shot.empty{
  aspect-ratio:21/8;display:flex;align-items:center;justify-content:center;
  border-style:dashed;
}
@media(max-width:760px){.cover-shot.empty{aspect-ratio:16/10}}
.cover-shot.empty span{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);
  border:1px solid var(--line);padding:7px 14px;
}

/* 品牌封面图：四家原厂各自的拍摄习惯不同，暗底/白底按素材本身给底，
   这正是多品牌样本册真实的样子，不做强行统一。
   图板宽度贴合图片本身，不再撑满整行留出大片死空间。 */
/* 图板底色直接取自图片自身的底色，所以左右留白是看不见的 ——
   而不是给图片套一个跟照片打架的框。 */
/* 每家的产品图排成三联。每格底色取自该张图自身的底色，所以格子宽窄一致、
   图片各自居中，看起来像样本册上的产品条而不像三张被裁过的图。 */
.cover-shots{
  margin-top:clamp(28px,3.4vw,44px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,14px);
}
.cover-shots .cover-shot{margin-top:0}
.cover-shot--contain{
  aspect-ratio:auto;height:clamp(150px,19vw,272px);
  padding:clamp(10px,1.4vw,22px);background:var(--shot-bg,#fff);
  display:flex;align-items:center;justify-content:center;
}
.cover-shot--contain img{
  width:auto;height:100%;max-width:100%;object-fit:contain;aspect-ratio:auto;
}
.cover-cap{margin:12px 0 0;font-size:11.5px;letter-spacing:.06em;color:var(--soft)}

/* ── 四层（白区收束） ─────────────────────────────────── */
.sec{padding-block:clamp(52px,6.4vw,92px)}
.sec-head{max-width:64ch;margin-bottom:clamp(28px,3.4vw,44px)}
.sec-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:800;letter-spacing:-0.03em;text-wrap:balance}
.sec-head p{margin:16px 0 0;color:var(--ink-2);font-size:15.5px}

.layers{display:grid;grid-template-columns:1fr;gap:0;border-top:2px solid var(--ink)}
@media(min-width:780px){.layers{grid-template-columns:repeat(4,1fr)}}
.layer{padding:26px 0;border-bottom:1px solid var(--rule);position:relative}
@media(min-width:780px){
  .layer{border-bottom:0;border-right:1px solid var(--rule);padding:28px 24px}
  .layer:first-child{padding-left:0}
  .layer:last-child{border-right:0;padding-right:0}
}
.layer::before{content:"";position:absolute;left:0;right:0;top:-2px;height:4px;background:var(--lc)}
.layer:first-child::before{left:0}
@media(min-width:780px){.layer::before{right:24px}}
.layer[data-c="op"]{--lc:var(--mk-schlegel)}
.layer[data-c="if"]{--lc:var(--mk-sontheimer)}
.layer[data-c="pw"]{--lc:var(--mk-abl)}
.layer[data-c="pr"]{--lc:var(--mk-doepke)}
.layer .mn{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);font-weight:600}
.layer h3{font-size:1.15rem;margin-top:10px}
.layer .who{font-size:12.5px;font-weight:600;color:var(--lc);margin-top:6px;letter-spacing:.01em}
.layer p{margin:12px 0 0;font-size:13.5px;color:var(--ink-2)}

/* ── 授权 ─────────────────────────────────────────────── */
.auth{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper-2)}
.auth .wrap{padding-block:clamp(38px,4.4vw,58px);display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:900px){.auth .wrap{grid-template-columns:auto 1fr;gap:44px;align-items:center}}
.auth .seal{display:flex;align-items:center;gap:14px}
.auth .seal i{width:9px;height:44px;background:var(--coyle)}
.auth .seal b{font-family:var(--cond);font-size:clamp(1.1rem,2vw,1.5rem);font-weight:700;letter-spacing:-0.01em;display:block}
.auth .seal span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-weight:600}
.auth p{margin:0;color:var(--ink-2);font-size:15px;max-width:70ch}

/* ── 询盘 ─────────────────────────────────────────────── */
.enq{background:var(--ink);color:#fff}
.enq .wrap{padding-block:clamp(48px,5.6vw,78px)}
.enq-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px)}
@media(min-width:980px){.enq-grid{grid-template-columns:5fr 6fr}}
.enq h2{font-size:clamp(1.6rem,3vw,2.35rem);color:#fff;font-weight:800;text-wrap:balance}
.enq p{color:var(--on-dark-ink-2);font-size:15px;max-width:46ch}
.enq .contact{margin-top:26px;border-top:1px solid var(--on-dark-rule)}
.enq .contact div{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--on-dark-rule);font-size:14px}
.enq .contact span:first-child{color:var(--on-dark-mute);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding-top:3px;font-weight:600}
.enq .contact a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
.enq .contact a:hover{text-decoration-color:#fff}
form{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--on-dark-rule);border:1px solid var(--on-dark-rule)}
.f{background:var(--ink);padding:15px 17px;display:flex;flex-direction:column;gap:6px}
.f.full{grid-column:1/-1}
.f label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-mute);font-weight:600}
.f input,.f select,.f textarea{background:none;border:0;color:#fff;font:inherit;font-size:14.5px;padding:0;outline:none;width:100%}
.f input::placeholder,.f textarea::placeholder{color:var(--on-dark-mute-2)}
.f textarea{resize:vertical;min-height:60px}
.f:focus-within{background:var(--on-dark-surface);box-shadow:inset 3px 0 0 var(--coyle)}
.submit{grid-column:1/-1;background:var(--coyle-ink);color:#fff;font-weight:700;font-size:15px;padding:18px;letter-spacing:.03em;transition:background .2s}
.submit:hover{background:var(--coyle-ink-h)}
@media(max-width:640px){form{grid-template-columns:1fr}}

/* ── 页脚 ─────────────────────────────────────────────── */
footer{border-top:1px solid var(--rule)}
footer .wrap{padding-block:clamp(34px,4vw,52px)}
.foot{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:820px){.foot{grid-template-columns:4fr 2fr 2fr 3fr}}
footer h4{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-weight:600;margin:0 0 12px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;color:var(--ink-2);font-size:13.5px}
footer ul a:hover{color:var(--coyle-ink)}
.foot-bar{
  margin-top:34px;padding-top:16px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:8px 24px;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);
}
.foot-bar .sp{flex:1}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:focus-visible{outline:2px solid var(--coyle);outline-offset:3px}

/* hidden 属性走的是 UA 样式表的 display:none，任何 author 的 display 规则都会压过它。
   搜索收起浏览区就是靠 hidden，这里必须兜住。 */
[hidden]{display:none!important}

/* ═══════════════════════════════════════════════════════════════
   产品页
   沿用首页的色场语言：品牌色块 + 表格化排版。
   采购工程师是来扫型号和参数的，所以这里的密度比首页高，
   留白让位给表格。
   ═══════════════════════════════════════════════════════════════ */

/* ── 页头 ──────────────────────────────────────────────── */
.phead{padding-block:clamp(34px,4.4vw,58px) clamp(22px,2.6vw,32px);border-bottom:1px solid var(--rule)}
.phead h1{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-0.03em;text-wrap:balance}
.phead .lede{margin-top:16px;color:var(--ink-2);font-size:15.5px;max-width:66ch}
.crumb{font-size:12px;letter-spacing:.06em;color:var(--mute);margin-bottom:16px;display:flex;gap:9px;flex-wrap:wrap}
.crumb a:hover{color:var(--coyle-ink)}

/* ── 产品总览：四个品牌色卡 ─────────────────────────────── */
.pcards{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border-block:1px solid var(--rule)}
@media(min-width:760px){.pcards{grid-template-columns:1fr 1fr}}
.pcard{background:var(--paper);display:flex;flex-direction:column;text-decoration:none;color:inherit;position:relative;transition:background .2s}
.pcard:hover{background:var(--paper-2)}
.pcard .band{height:8px;background:var(--mc)}
.pcard .inner{padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;gap:12px;flex:1}
.pcard .crdtop{display:flex;align-items:center;justify-content:space-between;gap:14px}
.pcard .crdlogo{width:74px;height:34px;display:flex;align-items:center;justify-content:flex-end;flex:none}
.pcard .crdlogo img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s}
.pcard:hover .crdlogo img{filter:none;opacity:1}
.pcard .nm{font-family:var(--cond);font-size:clamp(1.2rem,2.1vw,1.6rem);font-weight:700;letter-spacing:-0.015em}
.pcard .lyr{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mc);font-weight:700}
.pcard .meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--mute)}
.pcard .meta b{color:var(--ink);font-weight:600}
.pcard .go{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink)}
.pcard .go svg{width:14px;height:14px;transition:transform .2s}
.pcard:hover .go svg{transform:translateX(4px)}
.pcard--pending .lyr{color:var(--mute)}

/* ── 品牌产品页头 ──────────────────────────────────────── */
.bhead{background:var(--mc);color:#fff;padding-block:clamp(30px,3.8vw,50px)}
.bhead .top{display:grid;grid-template-columns:1fr;gap:22px;align-items:end}
@media(min-width:820px){.bhead .top{grid-template-columns:1fr auto}}
.bhead h1{font-family:var(--cond);font-size:clamp(1.6rem,3.6vw,2.6rem);font-weight:800;letter-spacing:-0.03em}
.bhead .sub{color:var(--soft);font-size:13px;letter-spacing:.02em;margin-top:10px}
.bhead .plate{background:#fff;padding:14px 20px;display:inline-flex;align-items:center;min-height:62px}
.bhead .plate img{height:26px;width:auto;max-width:180px;object-fit:contain}
.bhead .stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--soft)}
.bhead .stats b{color:#fff;font-weight:600;font-size:15px;display:block;margin-bottom:3px}

/* ── 系列 + 型号表 ─────────────────────────────────────── */
.series{padding-block:clamp(30px,3.6vw,48px);border-top:1px solid var(--rule)}
.series:first-of-type{border-top:0}
.series-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.series-head h2{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:700;letter-spacing:-0.02em}
.series-head .n{font-size:12px;color:var(--mute);letter-spacing:.04em}
.tscroll{overflow-x:auto;border:1px solid var(--rule)}
table.ptable{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.ptable thead th{
  text-align:left;padding:11px 14px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);font-weight:600;background:var(--paper-2);border-bottom:1px solid var(--rule);white-space:nowrap;
}
.ptable tbody td{padding:12px 14px;border-bottom:1px solid var(--rule);vertical-align:middle}
.ptable tbody tr:last-child td{border-bottom:0}
.ptable tbody tr:hover{background:var(--paper-2)}
.ptable .item,.ptable .name{font-family:var(--mono);font-size:12.5px;letter-spacing:.01em}
.ptable .item{font-weight:500;white-space:nowrap}
.ptable .name{color:var(--ink-2)}
.ptable .dim{color:var(--mute)}
.ptable .na{color:var(--rule)}   /* N/A 占位符：看得见但退到背景里 */
.ptable .dl{white-space:nowrap;text-align:right}
.ptable .dl a{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--coyle-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
.ptable .dl a:hover{text-decoration-color:currentColor}
.ptable .dl svg{width:13px;height:13px;flex:none}

/* ── 数据待补状态 ──────────────────────────────────────── */
.pending{border:1px solid var(--rule);background:var(--paper-2);padding:clamp(22px,2.8vw,32px);margin-block:clamp(28px,3.4vw,44px)}
.pending .k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-weight:600}
.pending p{margin:12px 0 0;color:var(--ink-2);font-size:15px;max-width:70ch}
.pending .acts{margin-top:20px;display:flex;gap:11px;flex-wrap:wrap}

/* ── 询盘表单状态 ──────────────────────────────────────── */
/* 蜜罐字段：对真人不可见，但不用 display:none —— 部分机器人会跳过隐藏元素 */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f label .req{color:var(--coyle);font-weight:500;letter-spacing:0;text-transform:none;font-size:10px;margin-left:4px}
.form-status{grid-column:1/-1;margin:0;padding:0 17px;font-size:13.5px;min-height:0}
.form-status:not(:empty){padding-block:12px}
.form-status[data-kind="error"]{color:var(--coyle);background:var(--on-dark-surface)}
.form-done{
  grid-column:1/-1;margin:0;padding:22px 18px;background:var(--coyle-ink);color:#fff;
  font-size:15px;font-weight:600;line-height:1.6;
}
.submit:disabled{opacity:.7;cursor:progress}

/* ═══════════════════════════════════════════════════════════════
   型号详情页
   客户是搜型号进来的，所以型号本身要最大、最像「零件号」。
   参数表照原厂数据表全上，不挑不删 —— 采购要的就是完整。
   ═══════════════════════════════════════════════════════════════ */

/* 型号统一用等宽字：Barlow 的 O 与 0 同形，型号会读错 */
.pn{font-family:var(--mono);font-size:.94em;letter-spacing:.01em;font-weight:500}

.bhead h1.pn{font-size:clamp(1.5rem,3.4vw,2.4rem);font-weight:600;letter-spacing:-.01em}

.item-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,3.6vw,52px);padding-block:clamp(30px,3.6vw,48px)}
@media(min-width:940px){.item-grid{grid-template-columns:1fr minmax(280px,340px);align-items:start}}

.blk{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;margin:0 0 14px;padding-bottom:10px;border-bottom:1.5px solid var(--ink)}
.blk + *{margin-top:0}
h2.blk:not(:first-child){margin-top:clamp(28px,3.2vw,40px)}

/* 参数表：标签窄、值宽，行间细线 */
.spectable{width:100%;border-collapse:collapse;font-size:14px}
.spectable th,.spectable td{text-align:left;padding:12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.spectable th{font-weight:500;color:var(--mute);width:34%;font-size:13px;padding-right:20px}
.spectable td{font-weight:600}

/* 资料下载 */
.dlrow{display:flex;flex-direction:column;gap:10px}
.dlbtn{
  display:flex;align-items:center;gap:14px;padding:15px 18px;
  border:1px solid var(--rule);background:var(--paper-2);color:inherit;text-decoration:none;
  transition:border-color .2s,background .2s;
}
.dlbtn:hover{border-color:var(--ink);background:var(--paper)}
.dlbtn svg{width:18px;height:18px;flex:none;color:var(--coyle-ink)}
.dlbtn b{display:block;font-size:14px;font-weight:600}
.dlbtn small{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.muted{color:var(--mute);font-size:14px;margin:0}

/* 侧栏询价盒 */
.item-aside{position:sticky;top:calc(var(--navh,57px) + 22px)}
@media(max-width:939px){.item-aside{position:static}}
.enqbox{border:1px solid var(--rule);padding:clamp(20px,2.4vw,26px);background:var(--paper-2)}
.enqbox h2{margin:0;font-size:1.05rem;font-weight:700}
.enqbox p{margin:10px 0 0;font-size:13.5px;color:var(--ink-2)}
.enqbox-model{
  margin:16px 0;padding:12px 14px;background:var(--ink);color:#fff;
  font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:.02em;text-align:center;
  word-break:break-all;
}
.plain{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.plain li{display:flex;justify-content:space-between;gap:14px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.plain span{color:var(--mute);font-size:12px;letter-spacing:.02em}
.plain a{font-weight:600;text-decoration:none}
.plain a:hover{color:var(--coyle-ink)}
.enqbox .btn{width:100%;justify-content:center}

/* 列表页的型号链到详情页 */
.ptable .item a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
.ptable .item a:hover{color:var(--coyle-ink);text-decoration-color:currentColor}

/* ═══════════════════════════════════════════════════════════════
   产品搜索
   访客手上常常只有一个型号，不该逼他一层层翻系列表。
   ═══════════════════════════════════════════════════════════════ */
.psearch{margin-block:clamp(20px,2.6vw,32px)}
.ps-box{
  display:flex;align-items:center;gap:12px;
  border:1.5px solid var(--ink);background:var(--paper);
  padding:0 16px;max-width:640px;
  transition:box-shadow .2s;
}
.ps-box:focus-within{box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.ps-box svg{width:17px;height:17px;flex:none;color:var(--mute)}
.ps-box input{
  flex:1;border:0;outline:none;background:none;font:inherit;
  font-family:var(--mono);font-size:14.5px;padding:14px 0;color:var(--ink);min-width:0;
}
.ps-box input::placeholder{font-family:var(--sans);color:var(--mute)}
/* 用自己那个清除按钮（它还要把浏览区恢复回来），隐藏浏览器原生的，
   否则会出现两个 × */
.ps-box input::-webkit-search-cancel-button,
.ps-box input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.ps-clear{
  border:0;background:none;cursor:pointer;font-size:20px;line-height:1;
  color:var(--mute);padding:4px 6px;
}
.ps-clear:hover{color:var(--ink)}

.ps-count{margin:12px 0 0;font-size:12.5px;color:var(--mute);letter-spacing:.02em}
.ps-count:empty{display:none}

.ps-results{margin-top:10px;border:1px solid var(--rule);max-height:min(60vh,560px);overflow-y:auto}
.ps-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:4px 18px;align-items:baseline;
  padding:13px 16px;border-bottom:1px solid var(--rule);color:inherit;text-decoration:none;
  transition:background .15s;
}
.ps-row:last-child{border-bottom:0}
.ps-row:hover{background:var(--paper-2)}
.ps-i{font-family:var(--mono);font-size:14px;font-weight:600;white-space:nowrap}
.ps-m{font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.ps-s{font-size:11.5px;color:var(--mute);text-align:right;white-space:nowrap}
.ps-d{grid-column:2/-1;display:flex;gap:10px;flex-wrap:wrap;margin-top:5px}
.ps-d span{
  font-size:11.5px;color:var(--mute);border:1px solid var(--rule);
  padding:2px 7px;background:var(--paper);
}
@media(max-width:620px){
  .ps-row{grid-template-columns:1fr auto}
  .ps-i{grid-column:1}
  .ps-m{grid-column:1;grid-row:2}
  .ps-s{grid-column:2;grid-row:1}
  .ps-d{grid-column:1/-1}
}

.ps-empty{margin:12px 0 0;font-size:14px;color:var(--ink-2)}
.ps-empty a{color:var(--coyle-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ── 系列列表（品牌页 / 系列页底部）────────────────────── */
.serieslist{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:700px){.serieslist{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.serieslist{grid-template-columns:1fr 1fr 1fr}}
.seriesitem{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:14px 18px;background:var(--paper);color:inherit;text-decoration:none;
  transition:background .15s;
}
.seriesitem:hover{background:var(--paper-2)}
.seriesitem .sn{font-size:14px;font-weight:600;line-height:1.35}
.seriesitem .sc{font-family:var(--mono);font-size:12px;color:var(--mute);flex:none}
.seriesitem:hover .sc{color:var(--coyle-ink)}

/* 只列部分型号时的说明。必须显眼 —— 客户看到 11 行会以为这个系列就这么点货 */
/* 只列部分型号时的说明。
   刻意不用「单边色条」——那是 AI 生成 UI 最典型的痕迹之一。
   重点靠把数字放大来承载，不靠装饰。 */
.capnote{
  margin:0 0 clamp(18px,2.2vw,26px);padding:16px 20px;
  background:var(--paper-2);border:1px solid var(--rule);
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
}
.capnote .big{
  font-family:var(--mono);font-size:26px;font-weight:600;line-height:1;
  color:var(--ink);flex:none;
}
.capnote .big small{display:block;font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.08em;color:var(--mute);margin-top:6px}
.capnote p{margin:0;font-size:13.5px;color:var(--ink-2);max-width:62ch;flex:1;min-width:260px}
.capnote strong{color:var(--ink);font-weight:600}

/* 搜索结果里没有独立页面的型号：标记出来并说明点了会去哪 */
.ps-row .ps-rel{font-size:11px;color:var(--mute);border:1px solid var(--rule);padding:1px 6px;margin-left:8px;white-space:nowrap}
.ps-row--rel .ps-i{color:var(--ink-2)}

/* ── 404 ───────────────────────────────────────────────── */
.nf{display:flex;align-items:center;gap:clamp(20px,3vw,40px);flex-wrap:wrap}
.nf-code{
  font-family:var(--mono);font-size:clamp(3.4rem,9vw,6rem);font-weight:600;line-height:.9;
  color:var(--rule);flex:none;
}
.nf-body{flex:1;min-width:260px}
.nf-body h1{font-size:clamp(1.4rem,2.8vw,2rem);font-weight:800;letter-spacing:-0.03em}
.nf-body p{margin:12px 0 0;color:var(--ink-2);font-size:15px;max-width:56ch}
/* 404 上的小节是「第一步 / 第二步」级别的主信息，比商品页的子标题高一级 */
.nf-step{
  font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:700;letter-spacing:-0.02em;
  margin:clamp(30px,3.6vw,46px) 0 16px;padding-bottom:12px;border-bottom:1.5px solid var(--ink);
}
.nf-step:first-of-type{margin-top:clamp(22px,2.6vw,32px)}
.nf-cta{
  margin-top:clamp(30px,3.6vw,46px);padding:clamp(20px,2.6vw,28px);
  background:var(--ink);color:#fff;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between;
}
.nf-cta p{margin:0;font-size:15.5px;max-width:52ch;line-height:1.6}
.nf-cta .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);flex:none}
.nf-cta .btn:hover{background:var(--coyle);border-color:var(--coyle);color:#fff}

/* ── 产品图与参数介绍 ─────────────────────────────────── */
/* 产品图 + 参数介绍：图左、文字右。
   图铺满整行的话，两侧会空出一大片，白占横向空间。 */
.pitem-top{
  display:flex;gap:clamp(20px,2.6vw,34px);align-items:flex-start;
  margin:0 0 clamp(26px,3.2vw,40px);flex-wrap:wrap;
}
.pitem-fig{
  margin:0;flex:none;width:clamp(200px,26vw,300px);
  background:var(--paper-2);border:1px solid var(--rule);
  padding:clamp(14px,1.8vw,22px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.pitem-fig img{max-height:240px;width:auto;max-width:100%;object-fit:contain}
.pitem-fig figcaption{
  margin-top:12px;font-size:11px;line-height:1.5;color:var(--mute);text-align:center;
}
.pitem-top .pitem-text{flex:1;min-width:260px}
.pitem-desc{
  margin:0 0 clamp(16px,2vw,22px);font-size:16px;line-height:1.72;
  color:var(--ink);max-width:56ch;
}
.pitem-desc b{font-family:var(--mono);font-weight:600;font-size:.94em}