/* ==========================================================================
   p-product-detail.css — 产品详情页专属（几何数值取自 02_产品详情.psd）
   内容区 240-1680（版心 1440），1rem = 100 设计 px
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 外壳校正（与 p-product.css 同一套：本页比全站 1604 版心窄，二级导航也更矮）
      只在本页生效，不动 sub.css，避免影响其余内页
   -------------------------------------------------------------------------- */
#main .container {
  width: min(14.4rem, calc(100% - 0.4rem));
}

/* banner：标题 80px，红色斜块压在首字左侧（PSD 斜块 x=790 / 文字 x=802） *//* banner 标题块（80px + 红斜块压在字后）统一由 sub.css 定义，本页不再覆写 */

/* 二级导航：本页没有左侧分类链接，只有右侧面包屑（.subnav-list 为空时
   sub.css 里的 flex:1 会把它顶到右边），条高与底线全站统一 */

/* --------------------------------------------------------------------------
   1. 内容区：819~3247，左右 240~1680
   -------------------------------------------------------------------------- */
.pd {
  padding-block: 1.18rem 1.2rem; /* 701→819 / 3245→3366 */
  background: var(--c-white);
}
.pd-wrap {
  width: min(14.4rem, calc(100% - 0.4rem));
  margin-inline: auto;
}

/* ---------- 概览：左图集 742 + 右简介 604 ---------- */
.pd-top { display: flex; }

.pd-gallery {
  flex: none;
  width: 7.42rem;
}
.pd-main {
  display: grid;
  place-items: start start;
  height: 5rem;
  background: var(--c-card);
  overflow: hidden;
}
.pd-main img {
  width: 4.45rem;
  height: 4.45rem;
  /* PSD：图左上角 (388,838)，灰框 (240,819)。写死整数位避免半像素缩放发虚 */
  margin: 0.19rem 0 0 1.48rem;
  object-fit: contain;
}
.pd-thumbs {
  position: relative;
  display: flex;
  align-items: center;
  height: 1.32rem;
  margin-top: 0.3rem;
  padding-inline: 0.4rem;
}
.pd-thumbs__list {
  display: flex;
  flex: 1;
  min-width: 0;
  height: 100%;
}
.pd-thumb {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  transition: background-color 0.2s ease;
}
.pd-thumb.is-active { background: var(--c-card); }
/* PSD 里三张缩略图按原尺寸（108/155/188）居中，超出 132 高的小格也不裁剪；
   未选中的是 60% 淡化（白底上叠 40% 白），点选后恢复满对比 */
.pd-thumb img {
  display: block;
  /* width: auto;
  height: auto; */
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.pd-thumb.is-active img { opacity: 1; }
/* 第 3 张图在原稿里比小格中心高 4px */
.pd-thumb:nth-child(3) img { position: relative; top: -0.04rem; }
.pd-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.3rem;
  height: 0.3rem;
  display: grid;
  place-items: center;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.pd-arrow:hover { opacity: 1; }
.pd-arrow--prev { left: 0; }
.pd-arrow--next { right: 0; }
.pd-arrow img { filter: brightness(0) opacity(0.6); }

.pd-intro {
  flex: 1;
  min-width: 0;
  padding-top: 0.98rem;  /* 标题字顶 924 → 区块顶 819 */
  padding-left: 0.97rem; /* 图集右沿 982 → 文字左沿 1079 */
}
.pd-title {
  font-family: var(--ff-en);
  font-size: 0.52rem;
  line-height: 1;
  font-weight: 600;
  color: var(--c-ink);
}
.pd-model {
  margin-top: 0.34rem;
  font-size: 0.24rem;
  line-height: 1;
  color: var(--c-ink);   /* 原稿「采用Micro-ATX板型」是 #333，不是说明灰 */
}
.pd-rule {
  position: relative;
  margin-top: 0.4rem;
  height: 0.03rem;
  background: var(--c-line);
}
.pd-rule span {
  position: absolute;
  left: 0.03rem;
  top: -0.015rem;
  width: 0.36rem;
  height: 0.04rem;
  background: var(--c-accent);
}
.pd-desc {
  margin-top: 0.43rem;
  font-size: 0.16rem;
  line-height: 0.28rem;
  color: var(--c-ink-2);
}

/* ---------- 区块标题（居中 + 红短块） ---------- */
.pd-hr {
  height: 0.01rem;          /* 原稿渲染就是 1px 细线 */
  margin-top: 0.59rem;      /* 概览底 1481 → 分隔线 1540 */
  background: var(--c-line);
}
.pd-h2 {
  margin-top: 0.78rem;
  text-align: center;
  font-size: var(--fs-h2);
  line-height: 1;
  font-weight: 400;
  color: var(--c-ink);
}
.pd-h2--files { margin-top: 0.79rem; }
.pd-h2--files .pd-mark { margin-top: 0.28rem; }
.pd-mark {
  display: block;
  width: 0.36rem;           /* 原稿渲染 36x4（层尺寸 42x6 含描边内缩） */
  height: 0.04rem;
  margin: 0.29rem auto 0;
  background: var(--c-accent);
}

/* ---------- 规格表 ---------- */
.pd-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 0.51rem; /* 红块底 1700 → 表头顶 1751 */
}
.pd-row2 .pd-table { margin-top: 0; }
.pd-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 设计稿里左右两张表是贴着的（左 239~963、右 958~1682，并集正好 1443），
     中间只有一条 1px 竖线，没有留白。原先 gap:0.05rem 会露出一条白缝 */
  gap: 0;
  margin-top: 0.39rem; /* 上表底 2192 → 下表顶 2231 */
}
/* 交界处那条竖线：画在右表每行「第一格」的左边框上，逐行接起来才是连续的。
   只认 first-child —— 写成所有 td 的话会把「板载针头」表内部那条列分隔线一起改掉。
   也不直接给 <table> 加 border：border-collapse 下未必画得出来 */
.pd-row2 > .pd-table + .pd-table > thead > tr > th:first-child,
.pd-row2 > .pd-table + .pd-table > tbody > tr > td:first-child {
  border-left: 1px solid var(--c-line);
}
.pd-table th,
.pd-table td {
  border-bottom: 1px solid var(--c-line);
  padding: 0; /* 覆盖 UA 默认 1px，保证行高精确 */
  font-weight: 400;
  color: var(--c-ink-2);
}
.pd-table thead th {
  background: var(--c-card);
  /* 原稿表头上沿 #eaeaea 描边、下沿与数据行同色分隔线，表头合计 55 高 */
  border-top: 1px solid #eaeaea;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.18rem;
  /* 表头 56 = 1 上描边 + 54 行 + 1 下边线；内文比盒中心低 2.5px，用 padding-top 找平 */
  line-height: 0.49rem;
  padding-top: 0.05rem;
  color: var(--c-ink);
}
.pd-table thead th,
.pd-table tbody th,
.pd-table tbody td { padding-inline: 0.2rem; }

/* 系统规格：左标签列 302，左对齐（行距 55 = 0.54 行高 + 1px 边线）
   列宽写在 <col> 上而不是 <th> 上：table-layout:fixed 只认 col，
   写成行内 style 的话媒体查询里的窄屏值永远压不住（现在就踩过这个坑） */
.pd-col-label { width: 3.02rem; }
.pd-table--sys tbody th {
  text-align: left;
  padding-left: 0.51rem;
  font-size: 0.16rem;
  line-height: 0.54rem;
}
.pd-table--sys tbody td {
  text-align: left;
  padding-left: 0.49rem;
  font-size: 0.16rem;
  line-height: 0.54rem;
}

/* 中部小表：行居中 */
.pd-table--mid tbody td {
  text-align: center;
  font-size: 0.16rem;
  line-height: 0.54rem;
  padding-inline: 0.3rem;
}
/* 板载针头：两列，中间竖线 */
.pd-table--split tbody td + td { border-left: 1px solid var(--c-line); }
/* 主板规格：单行高格 */
.pd-table--mid tbody td.pd-tall { line-height: 1.09rem; }  /* 与左侧两行 110 对齐 */

/* ---------- 附件 ---------- */
.pd-files {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem;
  margin-top: 0.6rem; /* 红块底 3036 → 卡片 3096 */
}
.pd-file {
  position: relative;
  display: block;
  height: 1.5rem;
  padding: 0.37rem 0.3rem 0 1.34rem;
  border: 1px solid #eaeaea;
  border-radius: var(--radius-card);
  background: var(--c-card);
  transition: box-shadow 0.28s ease, transform 0.28s ease;
}
.pd-file:hover {
  transform: translateY(-0.04rem);
  box-shadow: 0 0.1rem 0.24rem rgba(0, 0, 0, 0.08);
}
.pd-file__icon {
  position: absolute;
  left: 0.5rem;
  top: 0.37rem;
  width: 0.44rem;
  height: 0.47rem;
}
.pd-file__name {
  display: block;
  font-size: 0.24rem;
  line-height: 0.27rem;
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-file__meta {
  display: flex;
  align-items: center;
  margin-top: 0.27rem;
  font-size: 0.18rem;
  line-height: 1;
  font-style: normal;
  color: var(--c-ink-2);
}
.pd-file__meta time { font-family: var(--ff-en); }
.pd-file__meta span { margin-left: 0.28rem; }
.pd-file__read {
  margin-left: 0.58rem;
  font-style: normal;
  transition: color 0.2s ease;
}
.pd-file:hover .pd-file__read { color: var(--c-primary); }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .pd { padding-block: 0.8rem 0.9rem; }
  .pd-wrap { width: auto; padding-inline: 0.3rem; }
  .pd-gallery { width: 46%; }
  .pd-main { place-items: center; height: 3.4rem; }
  /* 宽度变了，1280 稿的写死偏置作废，回到居中 */
  .pd-main img { width: 3rem; height: 3rem; margin: 0; }
  .pd-intro { padding-left: 0.4rem; }
  .pd-thumbs { height: 1.1rem; margin-top: 0.2rem; padding-inline: 0.3rem; }
  /* 小屏小格变窄，缩略图按格缩放，不再溢出到相邻格 */
  .pd-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
  .pd-thumb:nth-child(3) img { top: 0; }
  .pd-intro { padding-top: 0.4rem; }
  .pd-title { font-size: 0.42rem; }
  .pd-desc { margin-top: 0.3rem; }
  .pd-hr { margin-top: 0.5rem; }
  .pd-h2 { margin-top: 0.6rem; }
  .pd-h2--files { margin-top: 0.6rem; }
  .pd-files { margin-top: 0.4rem; }
}

@media (max-width: 768px) {
  .pd { padding-block: 0.5rem 0.6rem; }
  .pd-top { flex-direction: column; gap: 0.5rem; }
  .pd-gallery { width: 100%; }
  .pd-main { height: 4rem; }
  .pd-main img { width: 3rem; height: 3rem; }
  .pd-intro { padding: 0; }
  .pd-thumbs { height: 1rem; padding-inline: 0.2rem; }
  .pd-thumb img { max-height: 0.86rem; max-width: 92%; }
  .pd-table--mid tbody td.pd-tall { line-height: 1.2rem; }
  .pd-table thead th { padding-top: 0; line-height: 0.5rem; }
  .pd-title { font-size: 0.5rem; }
  .pd-model { font-size: 0.3rem; }
  .pd-desc { font-size: 0.24rem; line-height: 0.42rem; }
  .pd-h2 { font-size: 0.4rem; }
  .pd-row2 { grid-template-columns: 1fr; gap: 0.3rem; }
  /* 单列堆叠后两张表上下排，「交界竖线」会变成贴着左边框的一条线，撤掉；
     只撤 first-child，别碰「板载针头」表内部的列分隔线 */
  .pd-row2 > .pd-table + .pd-table > thead > tr > th:first-child,
  .pd-row2 > .pd-table + .pd-table > tbody > tr > td:first-child {
    border-left: 0;
  }
  /* 手机：标签列收到「5 个汉字刚好一行」的宽度（12px × 5 + 左右内距），
     剩下的 265px 全给值列。320 宽时 1.7rem 只有 73px，用 80px 兜底 */
  .pd-col-label { width: max(1.7rem, 80px); }
  .pd-table--sys tbody th { padding-left: 0.2rem; }
  .pd-table--sys tbody td { padding-left: 0.2rem; }
  .pd-table--sys tbody th,
  .pd-table--sys tbody td,
  .pd-table--mid tbody td { font-size: 0.18rem; line-height: 0.32rem; padding-block: 0.1rem; }
  .pd-table thead th { font-size: 0.22rem; }
  .pd-files { grid-template-columns: 1fr; }
  .pd-file { height: auto; padding: 0.3rem 0.3rem 0.3rem 1rem; }
  .pd-file__icon { left: 0.24rem; top: 0.36rem; width: 0.52rem; height: 0.56rem; }
  .pd-file__name { font-size: 0.28rem; line-height: 0.4rem; white-space: normal; }
  .pd-file__meta { font-size: 0.22rem; margin-top: 0.2rem; }
  .pd-file__read { margin-left: 0.2rem; }
}