/* =========================================================
   SHURUIPU 数睿谱 · 产品详情页（精简版）
   依赖 main.css 的设计变量
   ========================================================= */

/* ---------- 面包屑 ---------- */
.pd-breadcrumb {
  background:#fff;
  padding:16px 0; font-size:14px; color:var(--text-3);
}
.pd-breadcrumb .container { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pd-breadcrumb a:hover { color:var(--brand); }
.pd-breadcrumb .sep { opacity:.5; }
.pd-breadcrumb .cur { color:var(--text-2); font-weight:600; }

/* ---------- 顶部主视觉 ---------- */
.pd-hero { padding:60px 0 56px; }
.pd-hero-grid {
  display:grid; grid-template-columns:.82fr 1.18fr; gap:48px; align-items:center;
}
.pd-hero-info h1 { font-size:clamp(26px,3.4vw,40px); font-weight:800; line-height:1.25; margin-bottom:14px; }
.pd-hero-short { font-size:16px; color:var(--brand); font-weight:600; margin-bottom:18px; }
.pd-hero-desc { font-size:15px; color:var(--text-2); line-height:1.9; margin-bottom:28px; }
.pd-hero-actions { display:flex; gap:12px; flex-wrap:wrap; }

.pd-hero-media {
  position:relative; border-radius:16px; overflow:hidden;
  background:#fff;
}
.pd-hero-media img { width:100%; height:auto; display:block; }

/* 主图可点击放大：button 重置为媒体容器本身，高度随图片自身比例撑开 */
.pd-hero-zoom {
  position:relative; display:block; width:100%; padding:0;
  border:0; background:transparent; cursor:zoom-in;
  -webkit-tap-highlight-color:transparent;
}
.pd-hero-zoom img { display:block; transition:transform .35s ease; }
@media (hover:hover) {
  .pd-hero-zoom:hover img { transform:scale(1.03); }
  .pd-zoom-hint { opacity:0; transition:opacity .25s ease; }
  .pd-hero-zoom:hover .pd-zoom-hint,
  .pd-hero-zoom:focus-visible .pd-zoom-hint { opacity:1; }
}
.pd-zoom-hint {
  position:absolute; right:14px; bottom:14px;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,79,176,.82); color:#fff;
  pointer-events:none;
}
.pd-hero-zoom:focus-visible { outline:2px solid var(--brand); outline-offset:3px; border-radius:12px; }

/* ---------- 图片放大查看（lightbox） ---------- */
.img-lightbox {
  position:fixed; inset:0; z-index:1300;
  background:rgba(8,16,30,.86);
  display:flex; align-items:center; justify-content:center;
  padding:32px;
  opacity:0; transition:opacity .22s ease;
}
.img-lightbox.is-open { opacity:1; }
.img-lightbox[hidden] { display:none; }
.img-lightbox-img {
  max-width:min(1100px, 92vw); max-height:88vh;
  object-fit:contain; border-radius:8px; background:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  transform:scale(.97); transition:transform .22s ease;
}
.img-lightbox.is-open .img-lightbox-img { transform:scale(1); }
.img-lightbox-close {
  position:absolute; top:22px; right:26px;
  width:42px; height:42px; border-radius:50%;
  border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.img-lightbox-close:hover { background:rgba(255,255,255,.28); }
@media (max-width:768px) {
  .img-lightbox { padding:16px; }
  .img-lightbox-close { top:14px; right:14px; }
}

/* ---------- 区块：纯白分区，纯靠留白，无底色无分隔线 ---------- */
.pd-section { padding:64px 0; }
.pd-section-alt { background:#fff; }
.pd-section-head { margin-bottom:34px; }
.pd-section-head h2 {
  font-size:clamp(22px,2.6vw,28px); font-weight:800; margin-bottom:0;
  display:flex; align-items:center; gap:12px;
}
.pd-section-head h2::before {
  content:""; width:5px; height:24px; border-radius:3px; background:var(--grad);
}

/* ---------- 核心特点（简洁编号列表） ---------- */
.pd-feature-simple { display:flex; flex-direction:column; gap:26px; }
.pd-point { display:flex; gap:20px; align-items:flex-start; }
.pd-point-num {
  flex:none; font-family:var(--font-mono); font-size:15px; font-weight:700;
  color:var(--brand); letter-spacing:.06em; padding-top:3px;
  min-width:30px;
}
.pd-point p { font-size:15px; line-height:1.95; color:var(--text-2); }

/* ---------- 规格 / 量程表（无底色，仅发丝线） ---------- */
.pd-spec-table { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; }
.pd-spec-row {
  display:grid; grid-template-columns:260px 1fr;
  border-bottom:1px solid var(--line);
}
.pd-spec-row:last-child { border-bottom:0; }
.pd-spec-row > dt {
  padding:16px 22px; background:#fff;
  font-size:14px; color:var(--text-2); font-weight:600;
  border-right:1px solid var(--line);
}
.pd-spec-row > dd { padding:16px 22px; font-size:14px; color:var(--text); }

/* ---------- 咨询 CTA（无底色卡片，分区线由 section 提供） ---------- */
.pd-cta {
  background:#fff;
  padding:8px 0 4px; display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.pd-cta h3 { font-size:22px; margin-bottom:8px; }
.pd-cta p { color:var(--text-2); font-size:15px; }
.pd-cta-actions { display:flex; gap:12px; flex-wrap:wrap; flex:none; }

/* ---------- 未找到 ---------- */
.pd-notfound { padding:110px 0; text-align:center; }
.pd-notfound h1 { font-size:30px; margin-bottom:12px; }
.pd-notfound p { color:var(--text-2); margin-bottom:26px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .pd-hero-grid { grid-template-columns:1fr; gap:36px; }
  .pd-hero-media { max-width:680px; }
}
@media (max-width: 768px) {
  .pd-section { padding:48px 0; }
  .pd-hero { padding:40px 0; }
  .pd-spec-row { grid-template-columns:1fr; }
  .pd-spec-row > dt { padding-bottom:6px; border-right:0; }
  .pd-cta { padding:0; }
  .pd-cta-actions { width:100%; }
  .pd-cta-actions .btn { flex:1; }
}