:root{
  --blue:#1b4f8f;       /* primary brand blue */
  --blue-d:#123c78;     /* dark blue: bands, footer */
  --blue-dd:#0e2c58;    /* deepest blue (topbar) */
  --blue-l:#2f6cb4;     /* hover / light accent */
  --blue-t:#e8eff8;     /* blue tint surface */
  --blue-t2:#d3e0f0;    /* blue tint border */
  --ink:#111418;        /* text / neutral dark */
  --bg:#f4f6f9;         /* neutral canvas */
  --bg-2:#ebeef3;       /* deeper grey */
  --line:#d7dde5;       /* border */
  --line-d:#c0c8d4;
  --txt:#1a1e24;
  --muted:#636c78;
  --muted-2:#8b939c;
  --white:#fff;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:"Segoe UI",Arial,"Helvetica Neue",sans-serif;color:var(--txt);background:var(--white);line-height:1.6;font-size:15px;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1800px;margin:0 auto;padding:0 clamp(18px,2.5vw,48px);}
/* topbar（深于渐变起点，与头部横幅连体） */
.topbar{background:#050f1e;color:#9db4d4;font-size:11.5px;line-height:1;padding:6px 0;position:relative;z-index:2;}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;min-height:18px;}
.topbar .l{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.topbar a{color:#d8e4f4;transition:color .2s;}
.topbar a:hover{color:#fff;}
.topbar .sep{color:#4d6b93;opacity:.7;}
.topbar .r{color:#7e97b8;font-size:11px;letter-spacing:.2px;}
.tb-ico{width:12px;height:12px;fill:currentColor;vertical-align:-1px;margin-right:3px;opacity:.85;}
.btn-quote{background:var(--blue);color:#fff!important;padding:3px 14px;border-radius:14px;font-weight:600;border:1px solid rgba(255,255,255,.25);white-space:nowrap;}
.btn-quote:hover{background:var(--blue-l);}
.header-quote{background:var(--blue);color:#fff;padding:8px 18px;border-radius:16px;font-weight:700;font-size:13.5px;}
/* header */
header.site{background:#fff;position:sticky;top:0;z-index:50;}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:68px;}
.logo{display:flex;align-items:center;gap:9px;font-size:21px;font-weight:800;color:var(--blue-d);letter-spacing:.2px;}
.logo svg{width:34px;height:34px;}
.logo span em{color:var(--blue-l);font-style:normal;}
nav.main{display:flex;justify-content:center;align-items:center;gap:2px;flex:1;}
nav.main>a,nav.main .drop>a{padding:9px 13px;font-size:14px;font-weight:600;color:#2c3a4c;border-radius:6px;}
nav.main>a:hover,nav.main .drop:hover>a{color:var(--blue-d);background:var(--blue-t);}
.drop{position:relative;}
.drop .menu{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(18,60,120,.15);padding:8px;min-width:260px;max-height:420px;overflow:auto;z-index:60;}
.drop:hover .menu{display:grid;grid-template-columns:1fr;}
.drop .menu a{padding:7px 12px;font-size:13px;border-radius:6px;color:#33465a;}
.drop .menu a:hover{background:var(--blue-t);color:var(--blue-d);}
/* search card (shared by the floating hero variant) */
.sw{background:#fff;border-radius:10px;padding:16px 18px;box-shadow:0 10px 30px rgba(0,0,0,.28);}

/* ===== HERO with floating search card (left) + slides (right) =====
   Layout: the band keeps its blue gradient background; the search card floats
   on the LEFT half, the slide image + text occupy the RIGHT half.        */
.hero-wrap{position:relative;background:linear-gradient(135deg,#0a1f3c 0%,#0e2a52 46%,#1d5fb0 100%);overflow:hidden;}
.hero-wrap>.wrap{position:relative;padding-top:clamp(22px,3vw,34px);padding-bottom:clamp(22px,3vw,34px);}
.hero-grid{display:grid;grid-template-columns:minmax(430px,44%) 1fr;gap:clamp(22px,3vw,46px);align-items:stretch;}
/* left column: the floating search card */
.hero-search{position:relative;z-index:6;display:flex;flex-direction:column;justify-content:center;}
.hero-search .sw{background:#fff;border-radius:12px;padding:clamp(14px,1.3vw,20px);box-shadow:0 18px 44px rgba(4,20,44,.34);}
/* 6 search fields laid out in TWO columns; Search Mode + buttons span full width */
.hero-search .sw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px;align-items:end;}
.hero-search .fg{width:100%;min-width:0;}
.hero-search .fg-full{grid-column:1 / -1;}
.hero-search .fg input,.hero-search .fg select{width:100%;}
.hero-search .fg-btn-row{display:flex;gap:8px;width:100%;}
.hero-search .fg-btn-row .btn-s{flex:1;}
.hero-search .fg-actions .fg-btn-row{margin-top:2px;}
.hero-search .hot{margin-top:12px;font-size:12px;color:#c3d5ea;}
.hero-search .demo-note{margin-top:6px;}
/* right column: image banner */
.hero{position:relative;min-height:clamp(266px,23vw,346px);border-radius:12px;overflow:hidden;background:#123c78;
  box-shadow:0 18px 44px rgba(4,20,44,.34);}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .8s;background-size:cover;background-position:center;display:flex;align-items:flex-end;}
.slide.on{opacity:1;}
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,32,64,.9) 0%,rgba(10,32,64,.6) 46%,rgba(10,32,64,.34) 100%);}
.slide .txt{position:relative;width:100%;padding:clamp(20px,2.4vw,34px);color:#fff;opacity:0;}
.slide.on .txt{opacity:1;animation:txtIn .5s ease;}
@keyframes txtIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.slide h2,.slide h1{font-size:clamp(19px,2.1vw,29px);font-weight:800;line-height:1.25;max-width:560px;letter-spacing:-.3px;}
.slide p{margin-top:9px;font-size:clamp(12.5px,1.1vw,15px);color:#cfdff2;max-width:480px;}
.slide .btn-s{display:inline-block;margin-top:16px;background:#fff;color:var(--blue-d);}
.slide .btn-s:hover{background:var(--blue-t);color:var(--blue-dd);}
.dots{position:absolute;bottom:14px;right:clamp(16px,2vw,28px);display:flex;gap:8px;z-index:5;}
.dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.42);cursor:pointer;}
.dots i.on{background:#fff;}
.sw-title{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--blue-d);font-size:16px;margin-bottom:12px;}
.sw-title .ico{width:20px;height:20px;fill:var(--blue);}
.sw-grid{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end;}
.fg label{display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:4px;letter-spacing:.4px;text-transform:uppercase;}
.fg input,.fg select{border:1px solid var(--line-d);border-radius:6px;padding:8px 10px;font-size:14px;width:130px;outline:none;background:#fff;color:var(--txt);}
.fg input:focus,.fg select:focus{border-color:var(--blue-l);box-shadow:0 0 0 2px rgba(27,79,143,.15);}
.fg.wide input{width:170px;}
.radio{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13.5px;color:#33465a;padding-bottom:8px;}
.radio span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.radio input{accent-color:var(--blue);width:20px;height:20px;}
.btn-s{background:var(--blue);border:none;color:#fff;font-weight:700;font-size:14.5px;padding:10px 26px;border-radius:6px;cursor:pointer;}
.btn-s:hover{background:var(--blue-d);}
.btn-ghost{background:#fff;border:1px solid var(--line-d);color:#46586e;font-weight:600;font-size:14px;padding:9px 18px;border-radius:6px;cursor:pointer;}
.btn-ghost:hover{border-color:var(--blue-l);color:var(--blue-d);}
.hot{margin-top:10px;font-size:12.5px;color:#c3d5ea;display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.hot b{color:#fff;font-weight:600;}
.hot>span#hotchips{display:flex;flex-wrap:wrap;gap:8px;min-width:0;}
.hot a{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);color:#fff;border-radius:14px;padding:2px 12px;font-size:12px;white-space:nowrap;}
.hot a:hover{background:rgba(255,255,255,.24);}
.demo-note{font-size:11px;color:rgba(255,255,255,.5);margin-top:8px;}
/* bridge from the model-number search to the guided Bearing Selector */
.sel-bridge{margin-top:11px;padding:10px 13px;border-radius:10px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.2);display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:12.5px;line-height:1.4;}
.sel-bridge .sb-t{color:#dbe7f5;font-weight:600;}
.sel-bridge a{color:#9cc6f2;font-weight:800;text-decoration:none;white-space:nowrap;border-bottom:1px solid rgba(156,198,242,.5);padding-bottom:1px;}
.sel-bridge a:hover{color:#fff;border-bottom-color:#fff;}
.sel-bridge .sb-s{color:#a9c2dc;font-size:11.5px;flex:1 1 100%;}
@media(max-width:640px){.sel-bridge{font-size:12px;padding:9px 11px;}}
/* sections */
section.sec{padding:46px 0 20px;}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px;gap:12px;flex-wrap:wrap;}
.sec-head h2{font-size:24px;color:var(--blue-d);}
.sec-head h2 em{font-style:normal;color:var(--blue-l);font-weight:600;}
.sec-head .sub{color:var(--muted);font-size:13.5px;}
/* categories */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;}
.cat-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;transition:.2s;}
/* the homepage tiles are real <a> elements now (see index.html): keep the card look */
a.cat-card{display:block;text-decoration:none;color:inherit;}
a.brand-tile{color:inherit;}.cat-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(18,60,120,.14);border-color:var(--blue-l);}
.cat-card .im{height:130px;display:flex;align-items:center;justify-content:center;background:#fff;padding:10px;}
.cat-card img{max-height:110px;object-fit:contain;}
.cat-card .nm{padding:11px 14px;font-size:13.5px;font-weight:700;color:var(--blue-d);line-height:1.35;background:var(--bg);border-top:1px solid var(--line);}
.cat-card .ct{padding:0 14px 12px;font-size:11.5px;color:var(--muted);background:var(--bg);}
/* brands */
.brands{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.brand-tile{background:#fff;border:1px solid var(--line);border-radius:12px;height:96px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;cursor:pointer;transition:.2s;padding:12px 14px;overflow:hidden;text-decoration:none;}
.brand-tile:hover{border-color:var(--blue-l);box-shadow:0 8px 20px rgba(18,60,120,.14);background:var(--blue-t);transform:translateY(-3px);}
.brand-tile img{max-width:100%;max-height:52px;width:auto;height:auto;object-fit:contain;display:block;}
.brand-tile span{font-size:11.5px;color:var(--blue-dd);font-weight:800;letter-spacing:.6px;text-transform:uppercase;}

/* ===== TOOL TABS (interchange / bom) ===== */
.tooltabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.tooltab{background:#fff;border:1px solid var(--line-d);color:#46586e;font-weight:700;font-size:13.5px;
  padding:9px 18px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.15s;}
.tooltab:hover{border-color:var(--blue-l);color:var(--blue-d);}
.tooltab.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(18,60,120,.22);}
.tooltab .n{font-size:11px;opacity:.72;font-weight:600;}
.toolpanel{display:none;}
.toolpanel.on{display:block;}

/* --- interchange --- */
.xref{background:#fff;border:1px solid var(--line);border-radius:12px;padding:clamp(16px,1.6vw,22px);}
.xref-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.xref-row .fx{flex:1 1 300px;min-width:0;}
.xref-row .fx label{display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:5px;
  letter-spacing:.4px;text-transform:uppercase;}
.xref-row .fx input,.xref-row .fx select{border:1px solid var(--line-d);border-radius:6px;padding:10px 12px;
  font-size:14px;width:100%;outline:none;background:#fff;color:var(--txt);}
.xref-row .fx input:focus,.xref-row .fx select:focus{border-color:var(--blue-l);box-shadow:0 0 0 2px rgba(27,79,143,.15);}
.xref-row .act{display:flex;gap:8px;}
.xref-mode{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:13px;color:#33465a;margin-bottom:12px;}
.xref-mode span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.xref-mode input{accent-color:var(--blue);width:18px;height:18px;}
.xref-hint{font-size:12px;color:var(--muted);margin-top:10px;}
.xref-res{margin-top:18px;display:none;}
.xref-res.on{display:block;}
.xr-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:12px;}
.xr-head b{font-size:15px;color:var(--blue-d);}
.xr-head .sub{font-size:12.5px;color:var(--muted);}
table.xr{width:100%;border-collapse:collapse;font-size:13px;}
table.xr th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);
  font-weight:700;padding:7px 9px;border-bottom:1px solid var(--line-d);white-space:nowrap;}
table.xr td{padding:9px;border-bottom:1px solid #eef1f6;color:var(--txt);vertical-align:middle;}
table.xr tr:last-child td{border-bottom:none;}
table.xr tbody tr:hover{background:var(--blue-t);}
table.xr .model{font-weight:700;color:var(--blue-d);}
.badge{display:inline-block;font-size:10.5px;font-weight:700;border-radius:10px;padding:1px 9px;white-space:nowrap;}
.badge.exact{background:#e8f5ec;color:#1c7a45;border:1px solid #bde0c9;}
.badge.size{background:#fdf3e3;color:#8a5a10;border:1px solid #f0dcb8;}
.badge.src{background:var(--blue-t);color:var(--blue-d);border:1px solid var(--blue-t2);}
.suffix-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.suffix-item{background:var(--blue-t);border:1px solid var(--blue-t2);border-radius:8px;padding:7px 11px;max-width:100%;}
.suffix-item b{color:var(--blue-d);font-size:12.5px;display:block;}
.suffix-item span{font-size:11.5px;color:#46586e;}

/* --- bom --- */
.bom{background:#fff;border:1px solid var(--line);border-radius:12px;padding:clamp(16px,1.6vw,22px);}
.bom-ta-wrap{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;}
.bom-ta{flex:1 1 300px;min-width:0;}
.bom-ta textarea{width:100%;min-height:190px;border:1px solid var(--line-d);border-radius:8px;padding:11px 13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.7;resize:vertical;
  outline:none;color:var(--txt);background:#fff;}
.bom-ta textarea:focus{border-color:var(--blue-l);box-shadow:0 0 0 2px rgba(27,79,143,.15);}
.bom-side{flex:0 1 240px;min-width:200px;display:flex;flex-direction:column;gap:9px;}
.bom-side .btn-s,.bom-side .btn-ghost{width:100%;text-align:center;padding:11px 14px;}
.bom-note{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:11px 13px;font-size:12px;
  color:var(--muted);line-height:1.7;}
.bom-note b{color:var(--blue-d);}
.bom-sum{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 12px;}
.bom-kpi{flex:1 1 110px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 13px;min-width:0;}
.bom-kpi b{display:block;font-size:20px;color:var(--blue-d);line-height:1.2;}
.bom-kpi span{font-size:11.5px;color:var(--muted);}
.bom-kpi.ok b{color:#1c7a45;}
.bom-kpi.warn b{color:#8a5a10;}
.bom-res{display:none;}
.bom-res.on{display:block;}
.bom-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px;}
.bom-actions .btn-s,.bom-actions .btn-ghost{padding:10px 20px;}
table.bom-t{width:100%;border-collapse:collapse;font-size:13px;}
table.bom-t th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);
  font-weight:700;padding:7px 9px;border-bottom:1px solid var(--line-d);white-space:nowrap;}
table.bom-t td{padding:9px;border-bottom:1px solid #eef1f6;vertical-align:middle;}
table.bom-t tr:last-child td{border-bottom:none;}
table.bom-t .qty{width:96px;}
table.bom-t input.q{width:100%;border:1px solid var(--line-d);border-radius:6px;padding:5px 8px;font-size:13px;
  outline:none;color:var(--txt);background:#fff;}
table.bom-t input.q:focus{border-color:var(--blue-l);}
table.bom-t input.mi{width:100%;border:1px solid transparent;border-radius:6px;padding:5px 8px;font-size:13px;
  outline:none;color:var(--txt);background:transparent;font-weight:600;font-family:inherit;}
table.bom-t input.mi:hover{border-color:var(--line-d);background:#fff;}
table.bom-t input.mi:focus{border-color:var(--blue-l);background:#fff;}
table.bom-t input.mi::placeholder{font-weight:400;color:#a6b0bb;}
.bom-del{background:none;border:1px solid var(--line-d);color:#8a949f;border-radius:6px;width:28px;height:28px;
  cursor:pointer;font-size:14px;line-height:1;}
.bom-del:hover{border-color:#d08a8a;color:#b34141;}
/* model results */
#results{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:46px 0 50px;}
.res-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px;}
.res-bar h2{font-size:22px;color:var(--blue-d);}
.res-bar .cnt{font-size:13px;color:var(--muted);}
.models{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px;}
.m-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:.2s;}
.m-card:hover{box-shadow:0 10px 22px rgba(18,60,120,.14);transform:translateY(-2px);border-color:var(--blue-l);}
.m-img{height:140px;background:#fff;display:flex;align-items:center;justify-content:center;padding:12px;border-bottom:1px solid #eef1f6;}
.m-img img{max-height:112px;object-fit:contain;}
.m-body{padding:12px 14px 6px;flex:1;}
.m-body h3{font-size:16.5px;color:var(--blue-d);}
.m-meta{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap;}
.chip{font-size:10.5px;font-weight:700;border-radius:10px;padding:1px 9px;background:var(--blue-t);color:var(--blue-d);border:1px solid var(--blue-t2);}
.chip.b{background:var(--blue-d);color:#fff;border-color:var(--blue-d);}
.chip.sub{background:#fff;color:var(--muted);border-color:var(--line-d);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle;}
.dims{font-size:12.5px;color:#4c5c6e;margin-top:8px;font-family:Consolas,monospace;}
.m-actions{display:flex;gap:8px;padding:10px 14px 14px;}
.m-actions a{flex:1;text-align:center;font-size:12.5px;font-weight:700;border-radius:6px;padding:7px 0;}
.m-actions .d{background:var(--bg);color:var(--blue-d);border:1px solid var(--line);}
.m-actions .d:hover{border-color:var(--blue-l);background:var(--blue-t);}
.m-actions .q{background:var(--blue);color:#fff;}
.m-actions .q:hover{background:var(--blue-d);}
.empty{padding:34px;text-align:center;color:var(--muted);background:#fff;border:1px dashed var(--line-d);border-radius:10px;}
/* ---- 分页器补充（shared.js:pagerHTML，category/brand/search 共用）----
   按钮本体样式仍在各页面内联 .pager 规则中，这里只补新增的三类元素 */
.pager .pg-gap{color:var(--muted);padding:0 2px;user-select:none;line-height:34px;}
.pager button.pg-nav{min-width:78px;white-space:nowrap;}
.pager .pg-jump{margin-left:10px;padding:7px 8px;border:1px solid var(--line-d);border-radius:8px;font:inherit;font-weight:600;color:var(--blue-dd);background:#fff;cursor:pointer;}
.pager .pg-jump:focus{outline:2px solid var(--blue-l);outline-offset:1px;}
/* why */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;}
.why .w{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px;border-top:3px solid var(--blue);}
.why .ico{font-size:26px;opacity:.9;}
.why h3{font-size:15px;color:var(--blue-d);margin:8px 0 4px;}
.why p{font-size:13px;color:var(--muted);}
/* content preview */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.panel h3{font-size:18px;color:var(--blue-d);margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--blue);}
.p-card{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px;transition:.2s;}
.p-card:hover{border-color:var(--blue-l);background:var(--blue-t);}
.p-card .dt{flex:0 0 54px;text-align:center;background:var(--blue-t);border:1px solid var(--blue-t2);border-radius:8px;padding:6px 0;height:fit-content;}
.p-card .dt b{display:block;font-size:17px;color:var(--blue-d);}
.p-card .dt span{font-size:10px;color:var(--muted);text-transform:uppercase;}
.p-card h4{font-size:14px;color:var(--blue-d);line-height:1.4;}
.p-card p{font-size:12.5px;color:var(--muted);margin-top:3px;}
.p-card .tag{display:inline-block;font-size:10px;background:#fff;border:1px solid var(--blue-t2);color:var(--blue);border-radius:8px;padding:0 8px;margin-top:6px;text-transform:uppercase;letter-spacing:.3px;}
/* cta */
.cta{background:linear-gradient(120deg,#123c78,#1b4f8f);border-radius:14px;color:#fff;padding:34px 38px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin:40px 0;}
.cta h2{font-size:23px;letter-spacing:-.2px;}
.cta p{color:#c8dcf3;font-size:14px;margin-top:4px;}
.cta .btn-s{background:#fff;color:var(--blue-d);font-size:15px;padding:12px 30px;border-radius:6px;}
.cta .btn-s:hover{background:var(--blue-t);color:var(--blue-dd);}
/* footer */
footer{background:var(--blue-dd);color:#a4bcd8;margin-top:40px;}
footer .cols{display:grid;grid-template-columns:2fr 1.4fr 1.4fr 1.6fr;gap:30px;padding:44px 0 30px;}
footer h4{color:#fff;font-size:14px;margin-bottom:12px;letter-spacing:.5px;}
footer a{display:block;font-size:12.5px;padding:3px 0;color:#a4bcd8;}
footer a:hover{color:#fff;}
footer .about p{font-size:12.5px;line-height:1.8;margin-top:10px;}
footer .contact p{font-size:12.5px;line-height:1.9;}
/* footer "explore" quick links to the portal tools/reference sections
   (injected by shared.js initSiteChrome, or written directly on index.html) */
footer .fexplore{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  padding:26px 0 0;border-bottom:0;}
footer .fexplore>span{color:#fff;font-size:11.5px;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;white-space:nowrap;}
footer .fexplore nav{display:flex;flex-wrap:wrap;gap:4px 16px;}
footer .fexplore nav a{display:inline-block;font-size:12.5px;padding:0;color:#a4bcd8;}
footer .fexplore nav a:hover{color:#fff;}
@media(max-width:640px){
  footer .fexplore{padding:20px 0 0;gap:4px 12px;}
  footer .fexplore nav{gap:2px 14px;}
}
.copy{border-top:1px solid rgba(255,255,255,.14);padding:16px 0;text-align:center;font-size:12px;color:#7d94b1;}
#quote{scroll-margin-top:80px;}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:6px;font-size:19px;line-height:1;padding:6px 11px;cursor:pointer;color:var(--blue-d);}

/* ===== floating action buttons (bottom-right) ===== */
.fabs{position:fixed;right:clamp(12px,1.6vw,26px);bottom:clamp(14px,2vw,30px);z-index:80;
  display:flex;flex-direction:column;gap:10px;align-items:flex-end;}
.fab{width:50px;height:50px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;position:relative;
  box-shadow:0 4px 14px rgba(14,44,88,.28);transition:transform .2s,box-shadow .2s,background .2s;}
.fab svg{width:24px;height:24px;fill:#fff;}
.fab:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(14,44,88,.36);}
.fab-contact{background:var(--blue);}
.fab-contact:hover{background:var(--blue-l);}
.fab-top{background:var(--blue-d);opacity:0;visibility:hidden;transform:translateY(10px);}
.fab-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.fab-top:hover{background:var(--blue);}
/* tooltip label on hover — pure CSS ::after bubble (no DOM node, no layout impact) */
.fab::after{content:attr(data-tip);position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);
  background:var(--blue-dd);color:#fff;font-size:12px;font-weight:600;white-space:nowrap;
  padding:5px 11px;border-radius:6px;opacity:0;visibility:hidden;transition:opacity .2s;pointer-events:none;}
.fab::before{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%);
  border:5px solid transparent;border-left-color:var(--blue-dd);opacity:0;visibility:hidden;transition:opacity .2s;pointer-events:none;}
.fab:hover::after,.fab:hover::before{opacity:1;visibility:visible;}

/* contact flyout panel — slides out to the left */
.contact-panel{position:fixed;right:calc(clamp(12px,1.6vw,26px) + 62px);bottom:clamp(14px,2vw,30px);z-index:81;
  width:min(310px,calc(100vw - 90px));background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 40px rgba(14,44,88,.22);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateX(14px);transition:opacity .25s,transform .25s,visibility .25s;}
.contact-panel.open{opacity:1;visibility:visible;transform:translateX(0);}
.cp-head{background:linear-gradient(120deg,#123c78,#1b4f8f);color:#fff;padding:13px 16px;
  display:flex;justify-content:space-between;align-items:center;}
.cp-head h4{font-size:15px;font-weight:700;margin:0;}
.cp-head .cp-close{background:rgba(255,255,255,.18);border:none;color:#fff;width:24px;height:24px;border-radius:50%;
  cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;}
.cp-head .cp-close:hover{background:rgba(255,255,255,.34);}
.cp-body{padding:8px 0;}
.cp-item{display:flex;align-items:flex-start;gap:11px;padding:11px 16px;color:var(--txt);transition:background .18s;}
.cp-item:hover{background:var(--blue-t);}
.cp-item .cp-ico{flex:0 0 32px;height:32px;border-radius:8px;background:var(--blue-t);display:flex;align-items:center;justify-content:center;}
.cp-item .cp-ico svg{width:17px;height:17px;fill:var(--blue);}
.cp-item .cp-txt{min-width:0;}
.cp-item .cp-lb{display:block;font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;}
.cp-item .cp-val{display:block;font-size:13.5px;font-weight:700;color:var(--blue-d);word-break:break-all;line-height:1.4;}
.cp-item:hover .cp-val{color:var(--blue);}
.cp-foot{border-top:1px solid var(--line);padding:10px 16px;font-size:11.5px;color:var(--muted);background:var(--bg);text-align:center;}

/* responsive: smaller FABs on phones */
@media(max-width:576px){
  .fab{width:44px;height:44px;}
  .fab svg{width:21px;height:21px;}
  .fab::after,.fab::before{display:none;}
  .contact-panel{right:clamp(12px,1.6vw,26px);bottom:calc(clamp(14px,2vw,30px) + 102px);width:min(300px,calc(100vw - 24px));}
}
@media(max-width:576px){.fabs{gap:8px;}}

/* ============================================================
   RESPONSIVE — fluid first, then 6 breakpoint layers
   xl ≥1600  ·  lg 1200–1599  ·  md 993–1199
   sm 769–992  ·  xs 481–768  ·  xxs ≤480  ·  micro ≤360
   ============================================================ */

/* fluid typography & spacing (all screens) — NOTE: excludes .topbar .wrap
   (the topbar strip must stay compact; see its own rule) */
.wrap{padding:clamp(14px,3vw,24px);}
.topbar>.wrap{padding:0 clamp(18px,2.5vw,48px);}
.slide h2,.slide h1{font-size:clamp(21px,4.2vw,34px);}
.slide p{font-size:clamp(13px,1.6vw,16px);}
.sec-head h2{font-size:clamp(19px,2.6vw,24px);}
.cta h2{font-size:clamp(18px,2.4vw,23px);}
.logo{font-size:clamp(17px,1.9vw,21px);}
.cta{padding:clamp(22px,3vw,34px) clamp(20px,3vw,38px);}
.sec-head .sub{font-size:clamp(12px,1.4vw,13.5px);}
/* search field sizing inside the floating card */
.hero-search .fg label{font-size:11px;}
.hero-search .sw-title{margin-bottom:14px;}

/* very large / ultrawide displays */
@media(min-width:1600px){
  body{font-size:16px;}
  .cats{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));}
  .models{grid-template-columns:repeat(auto-fill,minmax(245px,1fr));}
  .hero{min-height:clamp(306px,22vw,384px);}
  .hero-grid{grid-template-columns:minmax(430px,42%) 1fr;}
  .sw-title{font-size:17px;}
  .logo{font-size:23px;}
  .logo svg{width:38px;height:38px;}
  .fg input,.fg select{width:150px;}
  .fg.wide input{width:200px;}
  .hero-search .fg input,.hero-search .fg select,.hero-search .fg.wide input{width:100%;}
  .why .w{padding:24px;}
}
/* large desktop */
@media(min-width:1200px){
  .cats{grid-template-columns:repeat(auto-fill,minmax(215px,1fr));}
  .models{grid-template-columns:repeat(auto-fill,minmax(225px,1fr));}
}
@media(max-width:1199px){
  .cats{grid-template-columns:repeat(auto-fill,minmax(195px,1fr));}
}
/* 14 张分类卡：宽屏固定 7 列 × 2 行正好排满（auto-fill 在 1440 下是 6 列，末行只剩 2 张；
   放在 1200/1600 两个块之后以赢得级联） */
@media(min-width:1360px){
  .cats{grid-template-columns:repeat(7,1fr);}
}
/* small desktop / large tablet landscape */
@media(max-width:1024px){
  header.site .wrap{height:60px;gap:12px;}
  nav.main{display:none;}
  nav.main.open{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    border-bottom:1px solid var(--line);border-top:1px solid var(--line);padding:10px clamp(14px,3vw,24px) 18px;
    z-index:70;box-shadow:0 14px 26px rgba(18,60,120,.16);max-height:calc(100vh - 100px);overflow:auto;}
  nav.main.open>a,nav.main.open .drop>a{padding:13px 12px;border-bottom:1px solid #eef1f6;font-size:15px;}
  nav.main.open .drop{width:100%;}
  nav.main.open .drop .menu{display:grid!important;position:static;box-shadow:none;border:none;
    border-left:3px solid var(--blue-t2);border-radius:0;margin:2px 0 6px 12px;min-width:0;max-height:none;padding:0 0 0 6px;}
  nav.main.open .drop .menu a{padding:9px 12px;font-size:14px;}
  .burger{display:block;order:-1;}
  header.site .wrap{justify-content:flex-start;}
  header.site .logo{margin-right:auto;}
  .header-quote{padding:7px 13px;font-size:12.5px;border-radius:14px;}
  .cats{grid-template-columns:repeat(4,1fr);}
  .models{grid-template-columns:repeat(auto-fill,minmax(195px,1fr));}
  .why{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
  .duo{grid-template-columns:1fr;gap:20px;}
  footer .cols{grid-template-columns:1fr 1fr;gap:26px;}
  /* hero: search card moves above the banner; fields stay 2-up (edge-to-edge at this width) */
  .hero-grid{grid-template-columns:1fr;gap:16px;}
  .hero{min-height:236px;}
  .cta{flex-direction:column;align-items:flex-start;text-align:left;}
  .cta .btn-s{width:100%;text-align:center;}
  /* filter fields go 2-up */
  .sw-grid{gap:10px 14px;}
  .fg{flex:1 1 calc(50% - 14px);min-width:150px;}
  .fg input,.fg select,.fg.wide input{width:100%;}
  .fg.wide{flex:1 1 calc(50% - 14px);}
  .fg .fg-btn-row{display:flex;gap:8px;}
  .fg .fg-btn-row .btn-s{flex:1;}
  /* engineering tools */
  .tooltab{font-size:12.5px;padding:8px 13px;flex:1 1 auto;justify-content:center;}
  .tooltab .n{display:none;}
  .xref-row .fx{flex:1 1 100%;}
  .xref-row .act{width:100%;}
  .xref-row .act .btn-s,.xref-row .act .btn-ghost{flex:1;}
  .bom-ta{flex:1 1 100%;}
  .bom-side{flex:1 1 100%;min-width:0;}
  .bom-kpi{flex:1 1 calc(50% - 10px);}
}
/* phone landscape / large phone */
@media(max-width:768px){
  .hero{min-height:212px;}
  .cats{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px;}
  .cat-card .im{height:105px;}
  .cat-card img{max-height:88px;}
  .cat-card .nm{padding:9px 11px;font-size:12.5px;}
  .cat-card .ct{padding:0 11px 10px;font-size:11px;}
  .models{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:11px;}
  .m-img{height:118px;}
  .m-img img{max-height:92px;}
  .m-body h3{font-size:15px;}
  .brands{grid-template-columns:repeat(5,1fr);gap:10px;}
  .brand-tile{height:80px;padding:9px 10px;gap:4px;}
  .brand-tile img{max-height:42px;}
  .brand-tile span{font-size:10px;}
  .why{grid-template-columns:1fr 1fr;gap:11px;}
  .why .w{padding:15px;}
  .why .ico{font-size:22px;}
  section.sec{padding:34px 0 14px;}
  #results{padding:34px 0 38px;}
  .p-card{padding:12px;gap:11px;}
  .p-card .dt{flex:0 0 46px;}
  .hot{gap:6px;}
  .hot a{padding:2px 10px;font-size:11.5px;}
  .topbar{font-size:11.5px;}
  .topbar .r{display:none;}
  .topbar .wrap{justify-content:center;text-align:center;gap:8px;}
}
/* phone portrait */
@media(max-width:576px){
  .hero{min-height:192px;}
  .slide .txt{padding:18px clamp(14px,4vw,20px) 30px;}
  .slide .btn-s{padding:9px 20px;font-size:13.5px;}
  .dots{bottom:10px;right:14px;}
  .fg,.hero-search .fg{flex:1 1 100%;min-width:0;}
  .fg.wide,.hero-search .fg.wide{flex:1 1 100%;}
  .hero-search .fg-full{grid-column:1 / -1;}
  .sw{padding:14px;}
  .sw-title{font-size:15px;}
  .radio{padding-bottom:0;}
  .fg .fg-btn-row .btn-s,.fg .fg-btn-row .btn-ghost{width:100%;flex:1;}
  .cats{grid-template-columns:1fr 1fr;gap:9px;}
  .cat-card .im{height:96px;padding:8px;}
  .cat-card img{max-height:80px;}
  .cat-card .nm{font-size:12px;padding:8px 10px;}
  .cat-card .ct{display:none;}
  .models{grid-template-columns:1fr 1fr;gap:9px;}
  .m-img{height:106px;padding:9px;}
  .m-img img{max-height:84px;}
  .m-body{padding:10px 11px 4px;}
  .m-body h3{font-size:14px;}
  .chip{font-size:9.5px;padding:1px 7px;}
  .dims{font-size:11.5px;}
  .m-actions{padding:8px 11px 11px;gap:6px;}
  .m-actions a{font-size:11.5px;padding:7px 0;}
  .brands{grid-template-columns:repeat(2,1fr);gap:9px;}
  .brand-tile{height:74px;padding:8px 9px;gap:4px;}
  .brand-tile img{max-height:38px;}
  .brand-tile span{font-size:10px;}
  .why{grid-template-columns:1fr;}
  /* footer: About + Contact stack full width; Top Categories & Brands share one row */
  footer .cols{grid-template-columns:1fr 1fr;gap:20px 18px;padding:32px 0 22px;}
  footer .cols>.about,footer .cols>.contact{grid-column:1 / -1;}
  .res-bar h2{font-size:19px;}
  .cta{border-radius:12px;}
  .sec-head{flex-direction:column;align-items:flex-start;gap:5px;margin-bottom:16px;}
  /* tables become stacked cards on phones (no sideways scrolling) */
  .xref,.bom{padding:14px;}
  table.xr thead,table.bom-t thead{display:none;}
  table.xr,table.xr tbody,table.xr tr,table.xr td,
  table.bom-t,table.bom-t tbody,table.bom-t tr,table.bom-t td{display:block;width:100%;}
  table.xr tr,table.bom-t tr{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px;background:#fff;}
  table.xr tr:hover,table.bom-t tr:hover{background:#fff;}
  table.xr td,table.bom-t td{border-bottom:none;padding:5px 0;text-align:right;font-size:12.5px;overflow:hidden;}
  table.xr td::before,table.bom-t td::before{content:attr(data-lb);float:left;font-size:10.5px;font-weight:700;
    color:var(--muted);text-transform:uppercase;letter-spacing:.4px;line-height:inherit;}
  table.xr td:first-child,table.bom-t td:first-child{display:none;}
  table.bom-t td.qty{width:auto;}
  table.bom-t td.qty input.q{width:90px;display:inline-block;}
  .bom-del{float:right;}
  .bom-actions .btn-s,.bom-actions .btn-ghost{width:100%;}
  .xref-mode{gap:10px;}
  .xref-mode span{width:100%;}
}
/* very small / compact phones */
@media(max-width:400px){
  .hero{min-height:176px;}
  .slide h2,.slide h1{letter-spacing:-.2px;}
  .logo{font-size:16px;}
  .header-quote{display:none;}
  .cats,.models{grid-template-columns:1fr;}
  .cat-card .im{height:120px;}
  .cat-card img{max-height:100px;}
  .cat-card .ct{display:block;}
  .m-img{height:140px;}
  .m-img img{max-height:112px;}
  .brands{grid-template-columns:1fr 1fr;}
  .copy{font-size:11px;padding:13px 0;}
}
/* landscape short screens (phone rotated) */
@media(max-height:480px) and (orientation:landscape){
  .hero{min-height:170px;}
  .slide h2,.slide h1{font-size:20px;}
  .slide p{display:none;}
}
/* touch devices: no sticky hover states */
@media(hover:none){
  .cat-card:hover,.m-card:hover,.brand-tile:hover{transform:none;}
  .p-card:hover{background:inherit;}
}
/* accessibility / print */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
  .cat-card:hover,.m-card:hover,.brand-tile:hover{transform:none;}
}
@media print{
  .topbar,.hero-wrap,.dots,.burger,.cta,.m-actions,.hot{display:none!important;}
  body{font-size:11pt;}
  .m-card,.cat-card,.p-card{break-inside:avoid;}
}

/* ==========================================================================
   头部两行布局（2026-09-30 精修 v2 · 参照 mro.toprecision.cn 深蓝横幅语言）
   结构：topbar(深) → 深蓝渐变横幅[ 第一行 logo+搜索+报价 / 第二行导航 ]
   无灰线；行间用间距，导航行与品牌行之间用极淡半透明白线过渡
   ========================================================================== */
:root{--blue-a:#4a90d9;--blue-a2:#2f6cb4;--hd-grad:linear-gradient(135deg,#071a33 0%,#0e2a52 42%,#1d5fb0 100%);}
header.site{height:auto!important;position:sticky;top:0;border-bottom:none!important;
  background:var(--hd-grad)!important;color:#eaf1fc;
  box-shadow:0 10px 30px -14px rgba(7,26,51,.55);}
/* 注意：header.site 绝不能加 overflow:hidden —— 下拉菜单(.drop .menu)和
   搜索联想(.hd-sug)都是 absolute 定位、从 header 向下弹出，加了会被整体裁剪，
   只露出导航栏底部一条白边（线上 2026-09-30 实际发生过）。
   六边形暗纹 ::before 已用 inset:0 自限，无需 overflow 裁剪。 */
/* 六边形暗纹（与参考站同款 SVG 纹理） */
header.site::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.8;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 2 54 16v28L30 58 6 44V16Z' fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='2'/%3E%3C/svg%3E");}
header.site .wrap.hd{display:block!important;height:auto!important;padding:0;position:relative;z-index:1;}
.hd-row1{display:flex;align-items:center;gap:clamp(14px,2vw,30px);
  height:clamp(64px,4.8vw,80px);padding-left:clamp(14px,2.4vw,40px);padding-right:clamp(14px,2.4vw,40px);}
.hd-row1 .logo{flex:0 0 auto;color:#fff;}
/* 深蓝底上 logo SVG 描边转白 */
.hd-row1 .logo svg circle{stroke:#fff!important;}
.hd-row1 .logo svg circle[fill]:not([fill="none"]){fill:#c4ddf7!important;}
.hd-row1 .logo span{color:#fff;}
.hd-row1 .logo span em{color:#a9c6ea;font-style:normal;}
/* 中部整站搜索框：深色玻璃 + 琥珀按钮（参考站同款） */
.hd-search{flex:1 1 auto;max-width:620px;min-width:0;margin:0 auto;position:relative;}
.hd-search form{display:flex;align-items:center;background:rgba(9,38,74,.85);border:1px solid rgba(255,255,255,.24);
  border-radius:26px;padding:0 4px 0 16px;transition:border-color .2s,box-shadow .2s,background .2s;}
.hd-search form:hover{border-color:rgba(255,255,255,.4);}
.hd-search form:focus-within{background:rgba(12,46,90,.95);border-color:#6ea8ee;
  box-shadow:0 0 0 4px rgba(74,148,232,.18),0 10px 26px -14px rgba(0,0,0,.6);}
.hd-search svg{width:17px;height:17px;fill:#8fb2de;flex:0 0 auto;transition:fill .2s;}
.hd-search form:focus-within svg{fill:#c4ddf7;}
.hd-search input{flex:1 1 auto;border:0;background:transparent;outline:none;font:inherit;
  font-size:14px;padding:11px 10px;color:#fff;min-width:0;}
.hd-search input::placeholder{color:#8fb2de;}
.hd-search button{flex:0 0 auto;border:0;color:#fff;border-radius:22px;
  background:linear-gradient(135deg,var(--blue-a),var(--blue-a2));
  padding:9px 20px;font:inherit;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;
  box-shadow:0 4px 14px rgba(47,108,180,.45);transition:filter .2s,transform .12s;}
.hd-search button:hover{filter:brightness(1.07);}
.hd-search button:active{transform:translateY(1px);}
/* 搜索提示下拉：深底浮层 */
.hd-sug{position:absolute;left:0;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 22px 48px -18px rgba(7,26,51,.5);padding:7px;display:none;z-index:70;
  max-height:360px;overflow:auto;}
.hd-sug.on{display:block;}
.hd-sug a{display:block;padding:9px 13px;border-radius:10px;text-decoration:none;color:#33465a;font-size:13px;
  transition:background .15s;}
.hd-sug a:hover,.hd-sug a:focus{background:var(--blue-t);color:var(--blue-d);outline:none;}
.hd-sug a b{color:var(--blue-d);}
.hd-sug .hd-empty{padding:10px 13px;color:var(--muted);font-size:12.5px;}
/* 第二行：导航（同一渐变内，行间极淡半透明白线过渡） */
.hd-row2{background:transparent;border-top:1px solid rgba(255,255,255,.14);}
.hd-row2 .inner{display:flex;align-items:center;gap:4px;min-height:52px;flex-wrap:wrap;
  padding-left:clamp(14px,2.4vw,40px);padding-right:clamp(14px,2.4vw,40px);}
nav.main{display:flex;align-items:center;gap:4px;flex:0 0 auto;justify-content:flex-start;
  min-height:52px;flex-wrap:wrap;}
nav.main>a,nav.main .drop>a{position:relative;padding:9px 14px;border-radius:10px;
  font-size:14.5px;font-weight:500;color:#dbe7f7;text-decoration:none;white-space:nowrap;
  transition:background .18s,color .18s;}
nav.main>a:hover,nav.main .drop>a:hover{background:rgba(255,255,255,.1);color:#fff;}
/* 当前页：白玻璃底 + 琥珀底条（参考站同款） */
nav.main>a.on,nav.main .drop>a.on{background:rgba(255,255,255,.15);color:#fff;font-weight:700;}
nav.main>a.on::after,nav.main .drop>a.on::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;
  height:3px;border-radius:3px;background:linear-gradient(90deg,var(--blue-a2),var(--blue-a));}
/* 下拉菜单（深蓝底上的白卡片，保持可读） */
header.site .drop .menu{background:#fff;border:1px solid var(--line);box-shadow:0 18px 44px -16px rgba(7,26,51,.5);}
/* Get a Quote：琥珀主按钮（第一行视觉重心） */
.hd-row1 .btn-quote{flex:0 0 auto;padding:11px 24px;border-radius:10px;font-size:14px;font-weight:700;
  background:linear-gradient(135deg,var(--blue-a),var(--blue-a2));color:#fff;border:0;
  box-shadow:0 4px 14px rgba(47,108,180,.45);transition:filter .2s,transform .12s;}
.hd-row1 .btn-quote:hover{background:linear-gradient(135deg,var(--blue-a),var(--blue-a2));
  filter:brightness(1.1);transform:translateY(-1px);color:#fff;}
/* 头部右侧辅助小链接占位（可选） */

/* 窄屏：搜索框收窄、导航可横滑 */
@media(max-width:1024px){
  .hd-row1{height:62px;gap:12px;}
  .hd-search{max-width:none;}
  .hd-search button{padding:9px 15px;font-size:12.5px;}
  .hd-row2 .inner{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;
    scrollbar-width:none;}
  .hd-row2 .inner::-webkit-scrollbar{display:none;}
  nav.main{flex-wrap:nowrap;}
  nav.main>a,nav.main .drop>a{padding:8px 11px;font-size:13.5px;}
  .burger{display:none;}
}
@media(max-width:768px){
  .hd-row1{height:58px;gap:9px;}
  .hd-search form{padding-left:12px;}
  .hd-search input{font-size:13.5px;padding:10px 8px;}
  /* 中窄屏起隐藏 Get a Quote，把空间让给整站搜索框（导航第二行仍可横滑） */
  .hd-row1 .btn-quote.header-quote{display:none;}
  .hd-row1 .logo svg{width:30px;height:30px;}
  .hd-row1 .logo{font-size:18px;gap:7px;}
  .hd-row2 .inner{min-height:46px;}
  nav.main{min-height:46px;}
}
@media(max-width:576px){
  .hd-search button span.lb{display:none;}
  .hd-search button{padding:8px 12px;}
  .hd-row1{gap:8px;}
  .hd-row1 .logo{font-size:16.5px;gap:6px;}
  .hd-row1 .logo svg{width:27px;height:27px;}
  .hd-search form{border-radius:20px;padding-left:11px;}
  .hd-search input{font-size:13px;padding:9px 6px;}
  nav.main>a,nav.main .drop>a{padding:7px 10px;font-size:13px;}
  /* 极窄屏：搜索按钮收为纯图标圆钮 */
  .hd-search button{width:36px;height:36px;padding:0;border-radius:50%;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M10 2a8 8 0 105.3 14l4.3 4.3 1.4-1.4-4.3-4.3A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:center;background-size:16px 16px;font-size:0;}
}

/* =========================================================================
   同类型号对比 (Compare) — 勾选框 / 悬浮对比栏 / 角标 / toast
   ========================================================================= */
/* --- 卡片左上角勾选框 --- */
.m-card{position:relative;}
.cmp-box{position:absolute;left:9px;top:9px;z-index:4;width:26px;height:26px;display:inline-flex;
  align-items:center;justify-content:center;cursor:pointer;user-select:none;}
.cmp-box input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2;}
.cmp-box .cmp-tick{width:22px;height:22px;border-radius:6px;border:1.5px solid #c3cfdd;background:#fff;
  color:transparent;font-size:13px;font-weight:800;line-height:20px;text-align:center;
  box-shadow:0 1px 3px rgba(16,42,80,.12);transition:all .16s;}
.cmp-box:hover .cmp-tick{border-color:var(--blue,#1B4F8F);}
.cmp-box input:checked+.cmp-tick{background:linear-gradient(135deg,#1B4F8F,#2f6fc4);border-color:#1B4F8F;
  color:#fff;box-shadow:0 2px 8px -2px rgba(27,79,143,.6);}
.cmp-box input:focus-visible+.cmp-tick{outline:2px solid #6ea8ee;outline-offset:2px;}

/* --- 底部悬浮对比栏 --- */
.cmp-bar{position:fixed;left:0;right:0;bottom:0;z-index:1200;pointer-events:none;
  transform:translateY(120%);transition:transform .28s cubic-bezier(.2,.7,.2,1);}
.cmp-bar.show{transform:translateY(0);pointer-events:auto;}
.cmp-bar-in{max-width:1240px;margin:0 auto 14px;display:flex;align-items:center;gap:14px;
  padding:10px 16px;border-radius:14px;
  background:linear-gradient(135deg,#071a33 0%,#0e2a52 52%,#1d5fb0 100%);
  box-shadow:0 16px 40px -14px rgba(7,26,51,.6);border:1px solid rgba(255,255,255,.14);color:#eaf1fc;}
.cmp-bar-hd{font-size:13px;white-space:nowrap;color:#c9dcf5;}
.cmp-bar-hd b{color:#fff;font-size:15px;}
.cmp-bar-cat{display:block;font-size:11px;color:#8fb2de;margin-top:1px;max-width:220px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cmp-bar-items{flex:1;display:flex;gap:8px;overflow-x:auto;padding:2px 0;min-width:0;}
.cmp-chip{position:relative;display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:10px;
  padding:5px 22px 5px 7px;font-size:12.5px;color:#eaf1fc;max-width:240px;}
.cmp-chip img{width:26px;height:26px;object-fit:contain;background:#fff;border-radius:6px;flex:0 0 auto;}
.cmp-chip b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cmp-chip i{font-style:normal;color:#8fb2de;font-size:10.5px;flex:0 0 auto;}
.cmp-x{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:16px;height:16px;
  border:0;background:rgba(255,255,255,.16);color:#fff;border-radius:50%;cursor:pointer;
  font-size:12px;line-height:1;padding:0;}
.cmp-x:hover{background:var(--blue-a2,#2f6cb4);color:#fff;}
.cmp-bar-act{display:flex;gap:8px;flex:0 0 auto;}
.cmp-clear{border:1px solid rgba(255,255,255,.3);background:transparent;color:#c9dcf5;cursor:pointer;
  padding:9px 14px;border-radius:10px;font-size:13px;font-weight:600;}
.cmp-clear:hover{background:rgba(255,255,255,.1);}
.cmp-go{border:0;cursor:pointer;padding:9px 16px;border-radius:10px;font-size:13.5px;font-weight:800;
  color:#fff;background:linear-gradient(135deg,var(--blue-a,#4a90d9),var(--blue-a2,#2f6cb4));
  box-shadow:0 6px 16px -6px rgba(74,144,217,.8);}
.cmp-go:hover{filter:brightness(1.06);}

/* --- 右上角对比角标 --- */
.cmp-badge{position:fixed;right:20px;bottom:96px;z-index:1199;display:none;align-items:center;gap:6px;
  border:0;cursor:pointer;padding:10px 14px;border-radius:999px;font-size:13px;font-weight:700;
  color:#fff;background:linear-gradient(135deg,#1B4F8F,#2f6fc4);
  box-shadow:0 10px 26px -10px rgba(27,79,143,.85);}
.cmp-badge.show{display:inline-flex;}
.cmp-badge b{background:#fff;color:#1B4F8F;border-radius:999px;min-width:19px;height:19px;
  line-height:19px;text-align:center;font-size:11.5px;padding:0 4px;}

/* --- toast --- */
.cmp-toast{position:fixed;left:50%;top:22px;transform:translate(-50%,-16px);z-index:2000;
  max-width:min(92vw,520px);padding:12px 18px;border-radius:11px;font-size:13.5px;line-height:1.5;
  background:#0e2a52;color:#eaf1fc;box-shadow:0 14px 34px -12px rgba(7,26,51,.6);
  border:1px solid rgba(255,255,255,.16);opacity:0;pointer-events:none;transition:all .22s;}
.cmp-toast.on{opacity:1;transform:translate(-50%,0);}
.cmp-toast.warn{background:#7a2626;border-color:rgba(255,255,255,.28);color:#ffe0e0;}
.cmp-toast b{color:#fff;}

@media(max-width:768px){
  .cmp-bar-in{flex-wrap:wrap;gap:9px;margin:0 8px 8px;padding:9px 12px;border-radius:12px;}
  .cmp-bar-items{order:3;width:100%;}
  .cmp-bar-hd{flex:1;}
  .cmp-chip{max-width:170px;}
  .cmp-badge{bottom:88px;right:14px;}
}

/* ===== 统一 SVG 图标基类（全站单色图标，currentColor 继承）===== */
.ic{width:1em;height:1em;fill:currentColor;vertical-align:-.125em;display:inline-block;flex:0 0 auto;}
.why .ico .ic{width:28px;height:28px;}
.why .ico{line-height:1;}
.dims .ic{width:13px;height:13px;vertical-align:-1.5px;opacity:.75;}