/* ================================================================
   PRODUCTS DETAIL — 产品详情页
     · 头部：返回 + 产品标题（左）+ 六边形图（右）
     · 规格表（5 列：编号/名称/牌号/特点及用途/性能数据）
     · 性能数据矩阵（性能/单位/6 个牌号/测试方法）
   依赖：products-common.css
   ================================================================ */

.pdetail {
  position: relative; z-index: 11;
  /* 上拉 1px 覆盖 hero 与本区之间的发丝缝：.page-hero 的 overflow:hidden 把 V mask
     ::before 的 inset:-1px 防缝裕量裁掉了，dpr2 下 hero 底色会透出一条细线。 */
  margin-top: -1px;
  background: #fff;
  overflow: hidden;
  padding: clamp(40px, 6vh, 78px) 0 clamp(48px, 7vh, 92px);
}
.pdetail__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 72px);
}
.pdetail__back { margin-bottom: clamp(22px, 3.4vh, 40px); }

/* 头部：标题（左）+ 六边形（右） */
.pdetail__header {
  display: grid;
  grid-template-columns: 1fr clamp(210px, 21vw, 290px);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-bottom: clamp(30px, 4.5vh, 58px);
}
.pdetail__title { min-width: 0; }
.pdetail__hex { width: 100%; }

/* 表格通用滚动容器（窄屏横向滚动） */
.ptable-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ptable-scroll::-webkit-scrollbar { height: 8px; }
.ptable-scroll::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 8px; }

/* ── 规格表（5 列） ───────────────────────────────────────────── */
.spec {
  width: 100%; border-collapse: collapse;
  min-width: 780px;
  font-family: var(--font-cn);
  margin-bottom: clamp(40px, 6vh, 76px);
}
.spec thead th {
  text-align: left;
  padding: clamp(12px, 1.2vw, 18px) clamp(14px, 1.4vw, 22px);
  color: #5a5a5a;
  font-weight: 700;
  font-size: clamp(14px, 1.1vw, 17px);
  letter-spacing: .04em;
  border-bottom: 2px solid var(--green);
}
.spec tbody td {
  padding: clamp(15px, 1.5vw, 22px) clamp(14px, 1.4vw, 22px);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
  vertical-align: middle;
}
.spec tbody tr:hover td { background: #F7FAF8; }
.spec .s-code { color: var(--ink); font-weight: 700; font-family: var(--font-en); letter-spacing: .03em; white-space: nowrap; }
.spec .s-grade { font-family: var(--font-en); color: var(--green-deep); font-weight: 600; white-space: nowrap; }
.spec .s-data a { color: var(--green); font-weight: 600; white-space: nowrap; }
.spec .s-data a:hover { color: var(--red); }

/* ── 性能数据矩阵 ─────────────────────────────────────────────── */
.perf {
  width: 100%; border-collapse: collapse;
  min-width: 960px;
  font-family: var(--font-cn);
}
.perf th, .perf td {
  padding: clamp(12px, 1.2vw, 18px) clamp(8px, .8vw, 14px);
  text-align: center;
  font-size: clamp(12px, .95vw, 14px);
  vertical-align: middle;
}
.perf thead th {
  border-bottom: 2px solid var(--green);
  vertical-align: bottom;
  line-height: 1.4;
}
.perf .h-prop, .perf .h-unit { color: var(--ink); font-weight: 700; }
.perf .h-grade { font-family: var(--font-en); color: var(--green); font-weight: 700; font-size: clamp(12px, 1vw, 14.5px); }
.perf .h-grade small { display: block; margin-top: 4px; color: var(--red); font-weight: 700; font-size: 12px; }
.perf .h-method { color: var(--ink); font-weight: 700; }

.perf tbody td { border-bottom: 1px solid var(--rule); color: var(--ink-soft); }
.perf .p-name { text-align: left; min-width: 150px; }
.perf .p-name .cn { color: var(--ink); font-weight: 600; font-size: clamp(13px, 1vw, 15px); }
.perf .p-name .en { display: block; margin-top: 2px; color: #A5A5A5; font-family: var(--font-en); font-size: 11px; line-height: 1.4; }
.perf .p-unit { color: var(--ink-soft); white-space: nowrap; }
.perf .p-val { font-family: var(--font-en); white-space: nowrap; }
.perf .p-method {
  text-align: left;
  border-left: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--font-en);
  font-size: 11.5px; line-height: 1.55;
  min-width: 150px;
}
/* 分组上分隔（性能按测试方法成组） */
.perf tr.grp td { border-top: 1px solid rgba(47, 131, 78, 0.28); }

/* ================================================================
   响应式
   ================================================================ */
@media (max-width: 880px) {
  .pdetail__header { grid-template-columns: 1fr; gap: clamp(20px, 5vw, 32px); }
  .pdetail__hex { max-width: 240px; order: -1; justify-self: center; }   /* 移动端：六边形在标题上方并居中 */
  .pdetail__back { text-align: center; }   /* 移动端：返回按钮（inline-flex）居中 */
}

/* 来自列表页「行点击」?q=型号 的定位高亮（products-detail.js buildLocate 加 .pd-located） */
.pd-located > td, .pd-located > th { background: rgba(220, 24, 24, .10) !important; transition: background .4s ease; }