/* ===========================================================
   raogao.com — 产品详情页（「车间图纸」深色工业）
   与首页/分类页同一套变量与节奏：等宽数字、行式分隔线、橙色唯一强调色。
   =========================================================== */

.pm{padding-top:clamp(20px,2.4vw,34px);padding-bottom:clamp(60px,7vw,104px)}

/* 面包屑 */
.crumb{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-dim);letter-spacing:.04em;
  padding-bottom:22px;border-bottom:1px solid var(--line);
}
.crumb a{transition:color .25s}
.crumb a:hover{color:var(--accent)}
.crumb i{font-style:normal;color:rgba(255,255,255,.22)}
.crumb span{color:var(--ink-dim)}

/* 头部：左文右图 */
.ph{
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,64px);
  align-items:center;padding:clamp(26px,3vw,40px) 0 clamp(28px,3.2vw,44px);
  border-bottom:1px solid var(--line);
}
.pk{
  display:inline-block;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:20px;
}
.ph h1{
  font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.1;font-weight:800;letter-spacing:-.03em;
  text-wrap:balance;
}
.pl{margin-top:20px;font-size:16px;line-height:1.9;color:var(--ink-dim);max-width:34em}
.pmt{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(26px,3vw,38px);
}
.pmt div{background:var(--bg);padding:14px 16px}
.pmt span{display:block;font-size:11px;letter-spacing:.16em;color:var(--ink-faint);margin-bottom:7px}
.pmt b{font-size:15px;font-weight:600}

.pfig{position:relative;margin:0;border:1px solid var(--line);background:var(--surface);overflow:hidden}
.pfig img{width:100%;height:clamp(280px,30vw,430px);object-fit:cover;object-position:50% 34%}
.pfig figcaption{
  position:absolute;left:0;bottom:0;padding:9px 14px;background:rgba(12,14,17,.82);
  font-size:11.5px;letter-spacing:.1em;color:var(--ink-dim);backdrop-filter:blur(4px);
}

/* 主体两栏 */
.pg{display:grid;grid-template-columns:1.45fr .75fr;gap:clamp(28px,4vw,68px);padding-top:clamp(38px,4.6vw,62px)}
.ps + .ps{margin-top:clamp(34px,4vw,52px)}
.ps h2{
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);
  font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--line);
}
.ps p{font-size:15px;line-height:1.95;color:var(--ink-dim);margin-bottom:15px;max-width:44em}
.ps p:last-child{margin-bottom:0}

/* 参数表 */
.pspec{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.pspec div{background:var(--surface);padding:14px 16px;display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.pspec dt{font-size:12.5px;color:var(--ink-faint)}
.pspec dd{font-size:13.5px;font-weight:600;text-align:right;color:var(--ink)}

/* 侧栏 */
.pgs{display:flex;flex-direction:column;gap:24px}
.pq{margin-top:0;border:1px solid rgba(255,107,26,.34);background:linear-gradient(180deg,rgba(255,107,26,.09),rgba(255,107,26,.02));padding:24px 22px}
.pq b{display:block;font-size:16.5px;font-weight:700;margin-bottom:10px}
.pq p{font-size:13px;line-height:1.85;color:var(--ink-dim);margin-bottom:18px}
.pbtn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:13px 16px;background:var(--accent);color:#0c0e11;font-weight:700;font-size:14px;
  transition:transform .3s var(--ease),box-shadow .3s;
}
.pbtn:hover{transform:translateY(-2px);box-shadow:0 14px 28px -16px rgba(255,107,26,.8)}
.pbtn + .pbtn{margin-top:9px}
.pbtn.ghost{background:transparent;border:1px solid var(--line-strong);color:var(--ink)}
.pbtn.ghost:hover{border-color:var(--ink-dim);box-shadow:none}

.psib{border:1px solid var(--line);background:var(--surface)}
.psib b{display:block;padding:15px 18px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);border-bottom:1px solid var(--line)}
.sibs{display:flex;flex-direction:column}
.sibs a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line);transition:.25s}
.sibs a:last-child{border-bottom:0}
.sibs a:hover{background:var(--surface-2);padding-left:22px}
.sibs span{font-size:13.5px}
.sibs i{font-style:normal;font-size:11px;color:var(--ink-faint);font-variant-numeric:tabular-nums}

@media(max-width:1080px){
  .ph{grid-template-columns:1fr;gap:26px}
  .pfig img{aspect-ratio:16/10}
  .pg{grid-template-columns:1fr;gap:36px}
  .pgs{order:2}
}
@media(max-width:640px){
  .pmt{grid-template-columns:1fr 1fr}
  .pspec{grid-template-columns:1fr}
  .ph h1{font-size:1.85rem}
}