/* AndgeBearing SKU detail page styles (phase-3 extracted).
   Originally inlined in sku.html <style>; extracting saves ~6.8KB per page
   across 120k static snapshots and lets the browser cache one copy.
   Shared by the JS sku.html template and every static snapshot. */
/* ===== PDP 2026-10：对标主流工业品电商详情页（大图左栏 + 信息右栏 + 规格卡 + 相关推荐）===== */
.crumbs{font-size:13px;color:var(--muted);padding:16px 0 0;}
.crumbs a{color:var(--blue-d);text-decoration:none;}
.crumbs a:hover{color:var(--blue-l);text-decoration:underline;}
.pdp{display:grid;grid-template-columns:minmax(340px,460px) minmax(0,1fr);gap:clamp(20px,2.4vw,38px);padding:18px 0 10px;align-items:start;}

/* --- 左栏：媒体卡（桌面端吸顶） --- */
.pdp-media{position:sticky;top:84px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 4px 18px rgba(18,60,120,.06);}
.pm-stage{position:relative;min-height:340px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--blue-t2);
  background-color:#fbfdff;
  background-image:linear-gradient(rgba(27,79,143,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(27,79,143,.06) 1px,transparent 1px);
  background-size:26px 26px;overflow:hidden;}
.pm-stage img{max-width:100%;max-height:400px;object-fit:contain;}
/* 参数化工程图 SVG 是固定 width 属性，必须允许收缩，否则窄视口横向溢出 */
.pm-stage svg,.relgrid .m-img svg{max-width:100%;height:auto;}
.pm-stage>div{width:100%;display:flex;align-items:center;justify-content:center;padding:12px 0;}
.pm-badge{position:absolute;top:12px;left:12px;z-index:2;font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--blue-d);background:rgba(232,239,248,.92);border:1px solid var(--blue-t2);border-radius:12px;padding:3px 11px;}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;}
.thumbs img{width:58px;height:58px;object-fit:cover;border:1px solid var(--line);border-radius:8px;cursor:pointer;opacity:.7;transition:.15s;background:#fff;}
.thumbs img:hover{opacity:1;}
.thumbs img.on{border-color:var(--blue);opacity:1;box-shadow:0 0 0 2px var(--blue-t);}

/* --- 右栏：信息区 --- */
.pdp-info{min-width:0;}
.pdp-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px;}
.pdp-info h1{margin:0 0 8px;font-size:clamp(23px,2.5vw,34px);line-height:1.22;letter-spacing:-.3px;color:var(--blue-dd);word-break:break-word;}
.pdp-sub{font-size:14px;color:var(--muted);margin:0 0 16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.pdp-sub b{color:var(--blue-d);font-family:Consolas,monospace;font-weight:700;font-size:14.5px;}
.pdp-sub .dot{color:var(--line-d);}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(116px,1fr));gap:10px;margin:0 0 16px;}
.kv div{background:#fff;border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:10px;padding:10px 10px 9px;text-align:center;box-shadow:0 2px 8px rgba(18,60,120,.05);}
.kv b{display:block;font-size:20px;line-height:1.25;color:var(--blue-d);font-family:Consolas,monospace;}
.kv span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;}
.pdp-feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:7px 16px;margin:0 0 18px;padding:13px 16px;background:var(--blue-t);border:1px solid var(--blue-t2);border-radius:10px;}
.pdp-feat span{font-size:13px;color:#2c3a4c;display:flex;align-items:center;gap:8px;min-width:0;}
.pdp-feat i{flex:none;width:17px;height:17px;border-radius:50%;background:var(--blue);color:#fff;font-size:10.5px;font-style:normal;font-weight:700;display:inline-flex;align-items:center;justify-content:center;}
.dcta{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px;}
.dcta .btn-s{font-size:15px;padding:12px 30px;border-radius:8px;box-shadow:0 6px 16px rgba(18,60,120,.2);}
.btn-wa{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line-d);color:#2c3a4c;font-weight:700;font-size:14px;padding:11px 20px;border-radius:8px;transition:.15s;cursor:pointer;}
.btn-wa svg{width:17px;height:17px;fill:var(--blue);}
.btn-wa:hover{border-color:var(--blue-l);color:var(--blue-d);background:var(--blue-t);}
.pdp-sup{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#fff;flex-wrap:wrap;}
.pdp-sup .ava{width:42px;height:42px;flex:none;border-radius:10px;background:var(--blue-t);display:flex;align-items:center;justify-content:center;}
.pdp-sup .ava svg{width:28px;height:28px;}
.pdp-sup .who{flex:1;min-width:180px;line-height:1.4;}
.pdp-sup .who b{display:block;font-size:13.5px;color:var(--blue-dd);}
.pdp-sup .who span{font-size:12px;color:var(--muted);}
.pdp-sup .rsp{font-size:11.5px;font-weight:700;color:var(--blue-d);background:var(--blue-t);border:1px solid var(--blue-t2);border-radius:12px;padding:4px 11px;white-space:nowrap;}
.pdp-msg{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:10px;padding:14px 16px;font-size:14px;line-height:1.7;margin:4px 0 6px;}
.pdp-msg a{color:var(--blue);font-weight:700;}

/* --- 区块标题（左侧蓝色竖条） --- */
.sec-h{display:flex;align-items:center;gap:10px;margin:30px 0 14px;flex-wrap:wrap;}
.sec-h::before{content:"";flex:none;width:4px;height:22px;border-radius:2px;background:var(--blue);}
.sec-h h2{font-size:clamp(18px,1.8vw,22px);color:var(--blue-dd);margin:0;}
.sec-h .cnt{font-size:12.5px;color:var(--muted);}
.sec-h .more{margin-left:auto;font-size:13px;font-weight:700;color:var(--blue);}
.sec-h .more:hover{color:var(--blue-l);text-decoration:underline;}

/* --- 规格表卡片 --- */
.spec-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;max-width:1100px;box-shadow:0 4px 18px rgba(18,60,120,.05);}
.spec{width:100%;border-collapse:collapse;font-size:14px;}
.spec th,.spec td{padding:10px 16px;border-top:1px solid var(--line);text-align:left;vertical-align:top;}
.spec tr:first-child th,.spec tr:first-child td{border-top:none;}
.spec th{width:250px;font-weight:700;color:#2c3a4c;background:#f7f9fc;}
.spec td{color:var(--txt);}
.spec tbody tr:hover th{background:#eef3fa;}
.spec tbody tr:hover td{background:#fbfcfe;}

/* --- 相关型号 --- */
.relgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:14px;padding:0 0 44px;}
.relgrid .m-card{border-radius:12px;}
.relgrid .m-img{height:128px;background:#f8fafc;}

/* --- 响应式 --- */
@media(max-width:960px){
  .pdp{grid-template-columns:1fr;gap:16px;}
  .pdp-media{position:static;}
  .pm-stage{min-height:260px;}
  .pm-stage img{max-height:300px;}
}
@media(max-width:600px){
  .pdp-media{padding:12px;}
  .pm-stage{min-height:220px;}
  .dcta .btn-s,.btn-wa,.dcta .btn-ghost{flex:1 1 100%;justify-content:center;text-align:center;}
  .dcta .btn-s{display:flex;align-items:center;justify-content:center;}
  .spec th{width:44%;}
  .spec th,.spec td{padding:8px 12px;font-size:13px;}
  .kv{grid-template-columns:repeat(3,1fr);}
  .kv div:last-child:nth-child(odd){grid-column:1 / -1;}
  .relgrid{grid-template-columns:repeat(2,1fr);gap:10px;}
}

/* --- 无实拍图型号的占位块（第四阶段：长尾全量覆盖） ---
   不加这段会命中 .pm-stage>div 的 flex 居中规则，文案会挤成一行。 */
.pm-stage>div.noimg{flex-direction:column;gap:10px;padding:26px 18px;text-align:center;}
.pm-stage .ni-t{font-size:15px;font-weight:700;color:var(--blue-d);}
.pm-stage .ni-s{font-size:13px;line-height:1.65;color:var(--muted);max-width:330px;margin:0 auto;}
.pm-stage .noimg .btn-s{align-self:center;}
.thumbs:empty{display:none;}

/* --- 文本版相关型号（无图邻居降级，单页省约 11KB，内链价值不变） --- */
.relgrid>.relrow{grid-column:1 / -1;}
.relrow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:13.5px;transition:.15s;}
.relrow:hover{border-color:var(--blue);background:#f7faff;}
.relrow b{color:var(--blue-d);font-family:Consolas,monospace;font-size:14px;}
.relrow .rb{color:var(--muted);font-size:12px;}
.relrow .rd{margin-left:auto;color:#2c3a4c;font-family:Consolas,monospace;font-size:12.5px;}