/* pdp-polish.v1.css —— 官网产品详情页统一视觉打磨（2026-09-21 PDP_POLISH_V1）
   只加样式，不动任何结构：所有产品页共享这一份，改一次全站生效。
   覆盖：主图与主图右边那一列、规格表、下面的各段落节奏、卡片、面包屑、小屏。
   回滚：删掉页面里的 <link rel="stylesheet" href="/assets/pdp-polish.v1.css..."> 即可。 */

/* ── 1. 主图 + 主图右侧 ───────────────────────────────── */
.pdp-hero-grid { gap: clamp(24px, 4vw, 56px); margin-top: 22px; }
/* 2026-09-21 修：站点顶栏是 sticky 的（高约 75px），而模板里主图/右栏写的是 top:24px ——
   滚起来主图上半截会被顶栏压住。桌面端把吸附位置压到顶栏之下。 */
@media (min-width: 881px) {
  .pdp-hero-gallery, .pdp-hero-info { top: 92px; }
}
/* 2026-09-21：右栏比主图高一截时，pdp-hero-info.v1.js 的 layoutSpecs() 把规格表挪到
   **整个 hero 网格之后**（网格里面放哪都会被 sticky 的主图+缩略图盖住）。
   这里只管留白与宽度：跟正文段同宽（800–980），不要拉成整屏。 */
.pdp-spec-row { margin-top: 22px; }
.pdp-spec-row-inner { max-width: 980px; }
.pdp-spec-row .pdp-spec { margin-top: 6px; }
.pdp-hero-main {
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 34px -22px rgba(16, 24, 40, .35);
  transition: box-shadow .18s ease;
}
.pdp-hero-thumbs { gap: 12px; margin-top: 14px; }
.pdp-hero-thumbs img {
  width: 84px; height: 84px; border-radius: 10px;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.pdp-hero-thumbs img:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -14px rgba(16, 24, 40, .5); }

.pdp-hero-info h1 { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.012em; margin-bottom: 12px; }
.pdp-hero-info .cs-lede { font-size: 16px; line-height: 1.72; margin-bottom: 18px; }
.pdp-hero-bullets li { font-size: 15px; line-height: 1.55; }
.pdp-trust {
  gap: 14px; font-size: 12.5px; padding: 11px 0; margin-bottom: 20px;
  border-top: 1px dashed var(--line, #e5e8ee); border-bottom: 1px dashed var(--line, #e5e8ee);
}
.pdp-hero-actions { gap: 14px; }
.pdp-hero-actions .btn { padding: 13px 28px; border-radius: 10px; font-weight: 600; }
.pdp-hero-actions .btn-primary { box-shadow: 0 8px 20px -12px rgba(176, 112, 60, .9); }

/* ── 2. 规格表（名称 — 内容）──────────────────────────── */
.pdp-spec { border: 1px solid var(--line, #e5e8ee); border-radius: 12px; overflow: hidden; }
.pdp-spec th, .pdp-spec td { padding: 10px 13px; font-size: 13.5px; }
.pdp-spec th { width: 32%; }
.pdp-spec tr:nth-child(odd) th, .pdp-spec tr:nth-child(odd) td { background: rgba(248, 249, 251, .75); }
.pdp-spec tr:last-child th, .pdp-spec tr:last-child td { border-bottom: 0; }

/* 经典版式的四格参数（Material / Size / MOQ / Price）*/
.cs-facts { gap: 10px; }
.cs-fact { border-radius: 10px; }
.cs-fact dd { font-weight: 600; }

/* ── 3. 下面各段的节奏与标题 ─────────────────────────── */
main .section { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }
main .section-head { max-width: 800px; }
main .section-head h2 { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.012em; margin-bottom: 12px; }
main .section-head p { line-height: 1.75; }
main .section + .section { border-top: 1px solid var(--line, #eef1f5); }

/* ── 4. 卡片（工序 / 产品 / 材质）──────────────────────── */
.pdp-step, .pdp-prod-card { transition: transform .14s ease, box-shadow .14s ease; }
.pdp-step:hover, .pdp-prod-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px -20px rgba(16, 24, 40, .45); }

/* ── 5. 面包屑 & 顶部小节标签 ─────────────────────────── */
.crumbs { font-size: 12.5px; color: var(--muted, #6b7a8d); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--copper, #b0703c); }
.crumbs .here { color: var(--ink, #16202e); font-weight: 500; }
main .eyebrow { letter-spacing: .12em; }

/* ── 6. 小屏 ─────────────────────────────────────────── */
@media (max-width: 880px) {
  .pdp-hero-grid { gap: 20px; margin-top: 14px; }
  .pdp-hero-actions .btn { flex: 1 1 auto; text-align: center; }
  .pdp-spec th, .pdp-spec td { padding: 9px 10px; font-size: 13px; }
  main .section { padding-top: 36px; padding-bottom: 36px; }
}