/* ══════════════════════════════════════
   page-product.css — 产品详情页专属组件（只在产品页加载）
   .pd-list / .p-badge-row / .oem-split / .moq-grid / .faq-container /
   .contact-grid / .meta-tag / .photo-slot 等在别处已全局定义，这里不重复。
══════════════════════════════════════ */

/* Hero：左图右文 */
.p-hero { padding:96px 0 0; }
.p-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.p-model { font-size:12.5px; color:var(--ink-soft); display:block; margin-bottom:10px; }
.p-title { font-family:var(--font-d); font-size:32px; font-weight:800; line-height:1.2; margin:6px 0 16px; color:var(--ink); }
.p-intro { font-size:15px; color:var(--orange-deep); line-height:1.7; margin-bottom:22px; background:var(--orange-tint); border-left:3px solid var(--orange); padding:14px 16px; border-radius:0 var(--rs) var(--rs) 0; }
.p-bullets { list-style:none; display:flex; flex-direction:column; gap:0; margin-bottom:24px; }
.p-bullets li { font-size:14px; color:var(--ink-soft); line-height:1.65; padding:10px 0; border-bottom:1px solid var(--line); }
.p-bullets li:first-child { padding-top:0; }
.p-bullets li strong { color:var(--ink); }

.gallery-main { width:100%; aspect-ratio:1/1; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--mist); display:flex; align-items:center; justify-content:center; padding:24px; }
.gallery-main img { width:100%; height:100%; object-fit:contain; }
.thumb-row { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:12px; }
.thumb { aspect-ratio:1/1; border-radius:var(--rs); overflow:hidden; border:1.5px solid var(--line); cursor:pointer; transition:border-color .2s; background:var(--mist,#f6f6f4); padding:4px; box-sizing:border-box; }
.thumb.active, .thumb:hover { border-color:var(--orange); }
.thumb img { width:100%; height:100%; object-fit:contain; }
.img-credit { font-size:11px; color:var(--slate); margin-top:10px; text-align:center; }

.price-box { background:var(--mist); border:1px solid var(--line); border-radius:var(--r); padding:24px; margin-top:8px; }
.price-box h3 { font-family:var(--font-d); font-size:17px; font-weight:800; margin-bottom:8px; color:var(--ink); }
.price-box p { font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:16px; }
.price-cta-row { display:flex; gap:10px; flex-wrap:wrap; }

/* Jump Nav：吸顶跳转条 */
.jump-nav { position:sticky; top:68px; z-index:90; background:rgba(255,255,255,.95); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); margin-top:36px; }
.jump-row { display:flex; gap:26px; overflow-x:auto; padding:14px 0; white-space:nowrap; }
.jump-row a { font-size:13px; font-weight:600; color:var(--ink-soft); flex-shrink:0; }
.jump-row a:hover { color:var(--orange-deep); }

/* Product Details：双栏 + 参数表 */
.pd-intro { max-width:640px; margin:0 auto 32px; text-align:center; }
.pd-intro h2 { font-family:var(--font-d); font-size:28px; font-weight:800; margin:10px 0 12px; color:var(--ink); }
.pd-intro p { font-size:14.5px; color:var(--ink-soft); line-height:1.7; }
.pd-cols { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:40px; }
.pd-block { background:var(--mist); border:1px solid var(--line); border-radius:var(--r); padding:26px; }
.pd-block h3 { font-family:var(--font-d); font-size:16px; font-weight:800; margin-bottom:16px; color:var(--ink); }

.spec-dark-wrap { border-radius:var(--r); overflow:hidden; }
.spec-dark { width:100%; border-collapse:collapse; }
.spec-dark thead td { color:var(--orange); font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.12); }
.spec-dark tbody td { color:rgba(255,255,255,.85); font-size:13.5px; padding:13px 20px; border-bottom:1px solid rgba(255,255,255,.08); }
.spec-dark tbody td:first-child { color:#fff; font-weight:600; width:38%; }

/* Detail Images：纵向堆叠大图 */
.detail-stack { display:flex; flex-direction:column; gap:20px; max-width:1200px; margin:0 auto; }
.detail-stack .photo-slot { aspect-ratio:16/9; border-radius:var(--r); }
.detail-stack img { border:1px solid var(--line); }

/* Bonus：5种模式网格 */
.mode-grid5 { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.mode-card { text-align:center; padding:24px 16px; background:var(--mist); border:1px solid var(--line); border-radius:var(--r); }
.mode-dot { width:36px; height:36px; border-radius:50%; background:var(--orange); color:#fff; font-family:var(--font-d); font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.mode-card h4 { font-family:var(--font-d); font-size:14.5px; font-weight:800; margin-bottom:6px; color:var(--ink); }
.mode-card p { font-size:12px; color:var(--ink-soft); line-height:1.55; }

/* Bonus：痛点+优势（牙齿抛光机类） */
.benefit-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.benefit-card { background:var(--mist); border:1px solid var(--line); border-radius:var(--r); padding:24px; }
.benefit-card h4 { font-family:var(--font-d); font-size:15.5px; font-weight:800; margin-bottom:8px; color:var(--ink); }
.benefit-card p { font-size:13.5px; color:var(--ink-soft); line-height:1.65; }
.benefit-extra { color:var(--orange-deep) !important; font-weight:600; font-size:12.5px !important; margin-top:8px; }

/* Bonus：使用步骤（防窒息器械类） */
.step-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.step-card { text-align:center; padding:22px 16px; }
.step-num { width:38px; height:38px; border-radius:50%; background:var(--orange-sub); border:1.5px solid var(--orange); color:var(--orange-deep); font-family:var(--font-d); font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.step-card h4 { font-family:var(--font-d); font-size:14.5px; font-weight:800; margin-bottom:6px; color:var(--ink); }
.step-card p { font-size:12.5px; color:var(--ink-soft); line-height:1.55; }

/* 对比表 */
.cmp-table { width:100%; border-collapse:collapse; background:#fff; border-radius:var(--r); overflow:hidden; }
.cmp-table-wrap { position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* 手机端窄屏下表格要横向滑动才能看全，加一个右侧渐隐提示条 + 底部文字提示，
   告诉用户"这里还能往右滑"，避免用户以为表格内容就这么多、直接划走了 */
@media (max-width:640px) {
  .cmp-table-wrap { border-radius:var(--r); }
  .cmp-table-wrap::after { content:''; position:absolute; top:0; right:0; bottom:0; width:28px; background:linear-gradient(to right, transparent, rgba(20,24,31,.10)); pointer-events:none; }
  .cmp-table-hint { display:block; text-align:center; font-size:12px; color:var(--ink-soft); margin-top:10px; }
  .cmp-table-hint::before { content:'← '; }
  .cmp-table-hint::after { content:' →'; }
}
.cmp-table-hint { display:none; }
.cmp-table th, .cmp-table td { padding:14px 18px; text-align:center; font-size:13.5px; border-bottom:1px solid var(--line); }
.cmp-table th:first-child, .cmp-table td:first-child { text-align:left; }
.cmp-table thead th { color:var(--ink-soft); font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.cmp-table thead th.hi { color:var(--orange-deep); }
.cmp-table td.no { color:var(--slate); }
.cmp-table td.hi { color:var(--orange-deep); font-weight:700; background:var(--orange-tint); }

/* 相关产品 */
.related-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.related-card { display:flex; gap:18px; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px; transition:border-color .2s, box-shadow .2s; }
.related-card:hover { border-color:var(--orange); box-shadow:0 12px 28px rgba(20,24,31,.08); }
.related-thumb { width:88px; height:88px; flex-shrink:0; border-radius:var(--rs); overflow:hidden; }
.related-thumb img { width:100%; height:100%; object-fit:cover; }
.related-body h4 { font-family:var(--font-d); font-size:15.5px; font-weight:800; margin-bottom:6px; color:var(--ink); }
.related-body p { font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin-bottom:8px; }
.related-link { font-size:12.5px; font-weight:700; color:var(--orange-deep); }

@media(max-width:1000px){
  .p-hero-grid { grid-template-columns:1fr; }
  .pd-cols, .benefit-grid { grid-template-columns:1fr; }
  .mode-grid5 { grid-template-columns:repeat(3,1fr); }
  .step-grid { grid-template-columns:1fr 1fr; }
  .related-grid { grid-template-columns:1fr; }
}
@media(max-width:640px){
  .mode-grid5, .thumb-row { grid-template-columns:repeat(2,1fr); }
  .step-grid { grid-template-columns:1fr; }
  .p-title { font-size:26px; }
}

/* Bonus：痛点版下方的"适用头型"标签条(牙齿抛光机类) */
.head-strip { margin-top:28px; background:var(--orange-tint); border:1px solid rgba(255,106,19,.25); border-radius:var(--r); padding:20px 24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.head-strip-label { font-size:13px; font-weight:700; color:var(--ink); }
.head-strip-tags { display:flex; gap:8px; flex-wrap:wrap; }
.head-tag { font-size:12px; font-weight:700; color:var(--orange-deep); background:#fff; border:1px solid rgba(255,106,19,.3); border-radius:100px; padding:5px 12px; }

/* Compare：表格前的问题引入卡片(牙齿抛光机类) */
.problem-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.problem-card { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px; text-align:center; }
.pc-media { width:100%; aspect-ratio:16/9; margin-bottom:14px; }
.pc-media .photo-slot { min-height:0; height:100%; }
.problem-card h4 { font-family:var(--font-d); font-size:14.5px; font-weight:800; margin-bottom:6px; color:var(--ink); }
.problem-card p { font-size:12.5px; color:var(--ink-soft); line-height:1.55; }

@media(max-width:1000px){ .problem-grid { grid-template-columns:1fr; } }

/* Safety Notice：安全须知横条(防窒息器械类，可选) */
.safety-band { background:#FFF8E8; border-top:1px solid #F5D98A; border-bottom:1px solid #F5D98A; padding:16px 0; margin-top:68px; }
.safety-row { display:flex; align-items:flex-start; gap:14px; }
.safety-icon { flex-shrink:0; width:22px; height:22px; color:#B8860B; margin-top:2px; }
.safety-icon svg { width:100%; height:100%; }
.safety-copy p { font-size:12.5px; color:#6B5410; line-height:1.65; }
.safety-copy strong { color:#4A3A0A; }

/* Audience：适用人群卡片(防窒息器械类) */
.audience-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.audience-card { text-align:center; padding:24px 16px; background:#fff; border:1px solid var(--line); border-radius:var(--r); }
.audience-icon { width:40px; height:40px; margin:0 auto 14px; color:var(--orange-deep); display:block; }
.audience-icon svg { width:100%; height:100%; }
.audience-card h4 { font-family:var(--font-d); font-size:14px; font-weight:800; margin-bottom:6px; color:var(--ink); }
.audience-card p { font-size:12px; color:var(--ink-soft); line-height:1.55; }

@media(max-width:1000px){ .audience-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:640px){ .audience-grid { grid-template-columns:1fr; } }