/* =========================================================
   产品展示（Product Showcase）
   三种展示模式：pdp-1 Apple 极简 / pdp-2 发布叙事 / pdp-3 画廊网格
   设计对齐苹果风格：浅色留白、系统字体、柔和阴影、大圆角、克制动效。
   移动优先，PC 在移动端基础上做适度增强。
   所有图片均约束 max-width:100%，容器不出现横向溢出。
   ========================================================= */
.pdp {
  --pdp-accent: #c2a06a;
  --pdp-bg: #fbfbfd;
  --pdp-ink: #1d1d1f;
  --pdp-ink2: #6e6e73;
  --pdp-line: #e8e8ed;
  --pdp-soft: #f5f5f7;
  --pdp-radius: 20px;
  --pdp-shadow: 0 30px 60px -34px rgba(0, 0, 0, .22);
  --pdp-shadow-sm: 0 18px 40px -28px rgba(0, 0, 0, .25);
  background: var(--pdp-bg);
  color: var(--pdp-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC",
    "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pdp *, .pdp *::before, .pdp *::after { box-sizing: border-box; }
/* 全局兜底：图片绝不撑破容器 */
.pdp img { max-width: 100%; }
.pdp .wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.pdp .eyebrow, .pdp .pdp-eyebrow {
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--pdp-accent); font-weight: 600; margin-bottom: 14px;
}
.pdp .pdp-title {
  font-weight: 700; letter-spacing: -.02em; line-height: 1.14;
  color: var(--pdp-ink); margin: 0;
  text-wrap: balance;   /* 长产品名两行时排得均衡，不会出现「…制氧 / 机」这种断法 */
}
.pdp .pdp-sub { font-size: clamp(16px, 2.2vw, 20px); color: var(--pdp-ink2); margin-top: 14px; }
.pdp .pdp-lead { font-size: clamp(18px, 2.4vw, 26px); line-height: 1.65; color: #2a2e35; margin: 0; }
.pdp .sec-t { text-align: center; margin-bottom: 8px; }
.pdp .sec-t .sec-h { font-size: clamp(28px, 4vw, 46px); font-weight: 700; margin: 4px 0 0; color: var(--pdp-ink); }

/* 进场动画（与站点 .rv 解耦，独立观察 .pdp-rv） */
.pdp-rv { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1); }
.pdp-rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pdp-rv { opacity: 1; transform: none; transition: none; } }

/* ============ 返回条（详情页顶部，Apple 风格轻量导航） ============ */
.pdp-backbar {
  /* ⚠️ 顶部必须留出固定站点头部的高度（--head-h 由 site.css 定义：80px，≤1180px 时 68px）。
     本页是唯一「首屏内容为浅色」的页面，不用 .page-hero，若不补这段留白，
     返回条会被 position:fixed 的头部盖住（内容起点在 y=0）。 */
  padding: calc(var(--head-h, 80px) + 12px) 0 14px;
  background: rgba(251, 251, 253, .78);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(0, 0, 0, .055);
}
.pdp-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; letter-spacing: .01em;
  color: var(--pdp-ink2, #6e6e73); text-decoration: none;
  padding: 5px 10px 5px 6px; margin-left: -6px; border-radius: 999px;
  transition: color .28s cubic-bezier(.22, .61, .36, 1), background-color .28s cubic-bezier(.22, .61, .36, 1);
}
.pdp-back .ic { width: 15px; height: 15px; transform: rotate(180deg); transition: transform .28s cubic-bezier(.22, .61, .36, 1); }
.pdp-back:hover { color: var(--pdp-ink, #1d1d1f); background: rgba(0, 0, 0, .045); }
.pdp-back:hover .ic { transform: rotate(180deg) translateX(3px); }
.pdp-back:focus-visible { outline: 2px solid var(--pdp-accent); outline-offset: 2px; }

/* 站点头部：详情页是全站唯一「首屏浅色」的页面（其它页首屏都是 .page-hero 深色横幅），
   而 .site-head 只在 scrollY>40 才加 .solid，于是页面顶部会出现一条深色渐变压在浅色页面上，
   白色导航文字对比也不足。这里让详情页的头部直接进入实底状态（与滚动后完全一致的状态，
   所以滚动时不会跳变）。:has() 不被支持的老浏览器会退化成原行为，不影响可用性。 */
body:has(.pdp-backbar) .site-head { height: var(--head-h-s); color: var(--ink); }
body:has(.pdp-backbar) .site-head::before {
  background: rgba(247, 245, 239, .88);
  box-shadow: 0 1px 0 rgba(16, 16, 20, .06), 0 12px 30px rgba(16, 16, 20, .04);
}
body:has(.pdp-backbar) .site-head::after { opacity: 0; }
body:has(.pdp-backbar) .site-head .brand-logo { max-height: 40px; }
body:has(.pdp-backbar) .site-head .head-cta .tel .ic { color: var(--gold-d); }

/* 产品卡片网格（列表页 & 相关产品）
   PC：自适应网格，参考 meiye.art 白卡柔影风格
   移动端：column-count 瀑布流（不等高卡片自然错落）
*/
.pdp-grid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-top: 36px; }
.pdp-card {
  display: block; background: #fff; border: 1px solid #eee; border-radius: 16px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s, border-color .35s;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.pdp-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -12px rgba(0,0,0,.14); border-color: #e8e4dc; }
.pdp-card-img {
  padding: 16px 16px 0; background: #fafafa;
}
.pdp-card-img img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 10px; display: block;
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.pdp-card:hover .pdp-card-img img { transform: scale(1.04); }
.pdp-card-body { padding: 14px 18px 20px; }
/* 「展示风格名称」标签已全面下线：产品列表页与详情页「相关产品」均不再输出该节点，
   故此处不再保留 .pdp-card-mode 样式。 */
.pdp-card-body h3 { margin: 0; font-size: 17px; font-weight: 650; color: var(--pdp-ink, #1d1d1f); line-height: 1.35; }
.pdp-card-sub { margin: 6px 0 0; color: var(--pdp-ink2, #6e6e73); font-size: 13px; line-height: 1.5; }
.empty-tip { margin-top: 40px; color: #8a8f98; text-align: center; padding: 60px 0; }

/* ============ 底部分页（页码数值 + 左右切换按钮） ============ */
/* 翻页锚点（视图里 <section class="sec" id="plist">）：翻页后落点是列表区顶部，
   需让开 position:fixed 的站点头部（--head-h 由 site.css 定义），否则分类筛选条被压住。
   仅用 scroll-margin，不引入 scroll-behavior，避免影响站点其它锚点行为。 */
#plist { scroll-margin-top: calc(var(--head-h, 80px) + 18px); }

.pdp-pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; margin: 46px 0 0;
}
/* 页码与左右按钮同一套几何：胶囊 + 白底 + 1px 描边，与分类筛选条同语言 */
.pdp-pg-num, .pdp-pg-nav {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 13px;
  border-radius: 999px; border: 1px solid var(--pdp-line, #e8e8ed); background: #fff;
  color: #3c3c41; text-decoration: none;
  font-size: 15px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;   /* 页码等宽，翻页时数字不跳动 */
  transition: color .25s, background-color .25s, border-color .25s, box-shadow .25s, transform .25s;
}
.pdp-pg-nav .ic { width: 16px; height: 16px; transform: rotate(180deg); }  /* 图元箭头朝右 → 上一页翻转 */
.pdp-pg-nav.is-next .ic { transform: none; }
.pdp-pg-num:hover, .pdp-pg-nav:hover {
  color: #b0894a; border-color: #ded5c4; transform: translateY(-2px);
  box-shadow: 0 12px 22px -16px rgba(0, 0, 0, .5);
}
.pdp-pg-num:focus-visible, .pdp-pg-nav:focus-visible { outline: 2px solid var(--pdp-accent, #c2a06a); outline-offset: 2px; }
/* 当前页高亮：主色浅金渐变 + 白字，与分类筛选条的选中态同一套视觉语言 */
.pdp-pg-num.is-on {
  color: #fff; cursor: default;
  background: linear-gradient(120deg, #e0c795, var(--pdp-accent, #c2a06a));
  border-color: transparent;
  box-shadow: 0 12px 24px -14px rgba(194, 160, 106, .85);
}
.pdp-pg-num.is-on:hover { transform: none; color: #fff; }
/* 首/末页边界：该侧按钮置灰且不可交互（视图用 span 渲染，天然不可聚焦、无跳转） */
.pdp-pg-nav.is-off { color: #c6c6cc; background: #fafafa; cursor: not-allowed; }
.pdp-pg-nav.is-off:hover { transform: none; color: #c6c6cc; border-color: var(--pdp-line, #e8e8ed); box-shadow: none; }
/* 省略号「…」：长列表页码窗口的占位（不可点） */
.pdp-pg-gap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 42px; color: #b9b9c0; font-size: 15px; user-select: none;
}
/* 页码说明：第 N / M 页 · 每页 X 款 · 共 Y 款 */
.pdp-pager-tip { margin: 16px 0 0; text-align: center; color: var(--pdp-ink2, #6e6e73); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .pdp-pg-num, .pdp-pg-nav { transition: none; }
  .pdp-pg-num:hover, .pdp-pg-nav:hover { transform: none; }
}

/* ============ 产品分类筛选条（两级层级） ============
   第一行 = 父分类（含「全部」）；第二行 = 当前父分类下的子分类。
   父分类带下拉小三角 → 表示还有子分类；点父分类按「父 + 全部子分类」过滤（后端算子树）。 */
.pdp-cats { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.pdp-cats-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pdp-cat {
  display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none; color: #5c5c66;
  background: #fff; border: 1px solid var(--pdp-line, #e8e8ed); transition: all .3s cubic-bezier(.22, .61, .36, 1);
}
.pdp-cat:hover { border-color: #e0d9c8; color: #b0894a; }
.pdp-cat.is-on {
  color: #fff; background: linear-gradient(120deg, #e0c795, var(--pdp-accent, #c2a06a));
  border-color: transparent; box-shadow: 0 10px 22px -12px rgba(194, 160, 106, .6);
}
/* 父分类的下拉小三角（纯 CSS，避免额外 DOM） */
.pdp-cat-parent { padding-right: 15px; }
.pdp-cat-parent.has-sub::after {
  content: ""; width: 0; height: 0; margin-left: 8px; flex: 0 0 auto;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transform: rotate(90deg); opacity: .42; transition: opacity .28s, transform .28s;
}
.pdp-cat-parent.has-sub:hover::after { opacity: .85; }
.pdp-cat-parent.has-sub.is-on::after,
.pdp-cat-parent.has-sub.is-section::after { opacity: .95; transform: rotate(270deg); }
/* 子分类行正在展开、但父分类本身未被精确选中：淡金底提示「当前浏览的分组」 */
.pdp-cat-parent.is-section {
  color: #b0894a; background: rgba(194, 160, 106, .12); border-color: rgba(194, 160, 106, .38);
}

/* 子分类行：每个父分类一组，只有当前生效的一组显示（其余靠 JS 预览切换） */
.pdp-subs { display: none; }
.pdp-subs.has-on { display: block; }
.pdp-subs-group {
  display: none; align-items: center; flex-wrap: wrap; gap: 10px 12px;
  padding: 12px 16px; border-radius: 16px;
  background: rgba(194, 160, 106, .07); border: 1px solid rgba(194, 160, 106, .16);
}
.pdp-subs-group.is-on { display: flex; }
.pdp-subs-label {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 30px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #b0894a;
  padding-right: 12px; margin-right: 2px; border-right: 1px solid rgba(194, 160, 106, .3);
}
.pdp-subs-list { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
/* 子分类胶囊：类名用 .pdp-cat-sub —— 产品详情页的副标题已占用 .pdp-sub，别复用 */
.pdp-cat-sub {
  display: inline-flex; align-items: center; padding: 6px 15px; border-radius: 999px;
  font-size: 13px; font-weight: 500; text-decoration: none; color: #6a6a74;
  background: #fff; border: 1px solid rgba(194, 160, 106, .22);
  transition: all .26s cubic-bezier(.22, .61, .36, 1);
}
.pdp-cat-sub:hover { color: #b0894a; border-color: #e0d9c8; transform: translateY(-1px); }
.pdp-cat-sub.is-on {
  color: #fff; background: linear-gradient(120deg, #e0c795, var(--pdp-accent, #c2a06a));
  border-color: transparent; box-shadow: 0 8px 18px -12px rgba(194, 160, 106, .7);
}
@media (prefers-reduced-motion: reduce) {
  .pdp-cat, .pdp-cat-parent.has-sub::after, .pdp-cat-sub { transition: none; }
  .pdp-cat-sub:hover { transform: none; }
}

/* 分类图横幅：选中某分类且后台配了「分类图」时展示 */
.pdp-cat-hero {
  position: relative; margin-top: 24px; border-radius: 20px; overflow: hidden;
  background: var(--pdp-soft, #f5f5f7); box-shadow: 0 20px 44px -28px rgba(0, 0, 0, .32);
}
.pdp-cat-hero img { display: block; width: 100%; height: clamp(180px, 26vw, 320px); object-fit: cover; }
.pdp-cat-hero-mask {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .05) 62%);
}
.pdp-cat-hero-txt {
  position: absolute; left: clamp(20px, 3vw, 40px); bottom: clamp(18px, 3vw, 34px); color: #fff;
}
.pdp-cat-hero-txt h2 { margin: 0; font-size: clamp(22px, 3.4vw, 36px); font-weight: 700; letter-spacing: -.01em; }
.pdp-cat-hero-txt p { margin: 6px 0 0; font-size: clamp(13px, 1.4vw, 15px); opacity: .85; }

/* ============ 模式 1：Apple 极简 ============ */
/* PC 端优化重点：
   ① 文字收到 editorial 尺度（原标题最大 62px 过猛，像海报不像产品页）；
   ② 图片加柔和「展台」边框 + 分层阴影 + 渐变底，更精致、不扁平；
   ③ 各区块统一内容宽度 980px，左右留白一致协调（原 760/860/1040 跳变显乱）；
   ④ 收紧过大的垂直留白节奏，去掉「稀疏粗糙」感。 */
/* 统一 Apple 模式内容宽度，让 hero / 简介 / 图集 / 参数 的左右边界对齐 */
.pdp-1 .wrap { max-width: 980px; }
.pdp-hero-apple { padding: clamp(26px, 4vh, 46px) 0 clamp(16px, 2.6vh, 28px); }
.pdp-hero-apple .pdp-hero-in { text-align: center; }
.pdp-hero-apple .pdp-eyebrow { letter-spacing: .16em; margin-bottom: 10px; }
.pdp-hero-apple .pdp-title { font-size: clamp(26px, 3.4vw, 46px); margin: 0 auto; max-width: 22ch; }
.pdp-hero-apple .pdp-hero-img {
  margin: 30px auto 0; max-width: min(920px, 100%); width: 100%;
  border-radius: 22px; border: 1px solid rgba(0, 0, 0, .05);
  background: linear-gradient(165deg, #ffffff, #eef0f3);
  padding: clamp(14px, 2.2vw, 30px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 40px 84px -42px rgba(0, 0, 0, .28);
  max-height: 660px; object-fit: contain;
}
.pdp-intro-apple { padding: clamp(48px, 7vh, 84px) 24px; }
.pdp-intro-apple .wrap { max-width: 980px; text-align: center; }
.pdp-intro-apple .pdp-lead {
  font-size: clamp(18px, 2vw, 25px); font-weight: 500; line-height: 1.55;
  color: var(--pdp-ink); letter-spacing: -.01em; max-width: 680px; margin: 0 auto;
}
.pdp-slides-apple { padding: clamp(8px, 2vh, 20px) 0 clamp(64px, 9vh, 104px); }
.pdp-slide-apple { margin: 0 auto clamp(40px, 6vh, 72px); max-width: 980px; padding: 0 24px; text-align: center; }
.pdp-slide-apple img {
  width: 100%; border-radius: 22px; border: 1px solid rgba(0, 0, 0, .05);
  background: linear-gradient(165deg, #ffffff, #eef0f3);
  padding: clamp(14px, 2.2vw, 30px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 34px 72px -38px rgba(0, 0, 0, .24);
  max-height: 660px; object-fit: contain;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1), box-shadow .6s;
}
.pdp-slide-apple:hover img { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 44px 90px -38px rgba(0, 0, 0, .3); }
.pdp-slide-apple figcaption { margin-top: 16px; color: #86868b; font-size: 14px; letter-spacing: .04em; }

.pdp-specs-apple { padding: clamp(56px, 9vh, 104px) 24px; }
.pdp-specs-apple .wrap { max-width: 980px; }
.pdp-specs-h { font-size: clamp(24px, 3vw, 34px); font-weight: 700; margin: 6px 0 36px; }
.pdp-spec-rows { max-width: 720px; margin: 0 auto; }
.pdp-spec-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 18px 4px; border-bottom: 1px solid var(--pdp-line);
}
.pdp-spec-row:first-child { border-top: 1px solid var(--pdp-line); }
.pdp-spec-k { color: var(--pdp-ink2); font-size: 15px; }
.pdp-spec-v { color: var(--pdp-ink); font-size: 18px; font-weight: 600; text-align: right; }

/* ============ 模式 2：发布叙事 ============ */
.pdp-hero-launch {
  padding: clamp(36px, 6vh, 74px) 0 clamp(32px, 5vh, 62px); text-align: center;
  background: radial-gradient(120% 80% at 50% 0%, rgba(194, 160, 106, .1), var(--pdp-bg) 60%);
}
.pdp-hero-launch .pdp-title { font-size: clamp(27px, 4vw, 58px); }
/* 封面图高度兜底：后台传竖版图时，width:100% 会把它算成远超一屏的高度（同 .article-cover 的问题）。
   object-fit:contain → 限高时按等比缩小 + 居中留白，绝不拉伸变形（与模式 1 的 hero 图同一套处理）。 */
.pdp-hero-launch .pdp-hero-img { margin: 36px auto 0; max-width: min(880px, 94%); width: 100%; max-height: min(70vh, 660px); object-fit: contain; background: #fff; border-radius: 22px; box-shadow: 0 44px 92px -54px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .035); }
.pdp-intro-launch { padding: clamp(54px, 8vh, 100px) 24px; }
.pdp-intro-launch .wrap { max-width: 860px; text-align: center; }

.pdp-features { padding: clamp(36px, 6vh, 70px) 0; }
.pdp-feature {
  display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
  max-width: 1080px; margin: 0 auto clamp(48px, 8vh, 96px);
}
.pdp-feature.rev .pdp-feature-img { order: -1; }
.pdp-feature-img img { width: 100%; max-height: min(64vh, 560px); object-fit: contain; border-radius: 18px; box-shadow: var(--pdp-shadow-sm); display: block; }
.pdp-feature-txt h3 { font-size: clamp(24px, 3vw, 36px); margin: 0 0 14px; font-weight: 700; }
.pdp-feature-txt p {
  color: var(--pdp-ink2); font-size: clamp(15px, 1.8vw, 17px); line-height: 1.7; margin: 0;
  /* 文案由后台自由编辑：保留编辑框里的换行，并防止超长不换行串撑破布局 */
  white-space: pre-line; overflow-wrap: anywhere;
}

/* 叙事图集：响应式网格（不再横向滚动溢出） */
.pdp-gallery-sec { padding: clamp(36px, 6vh, 70px) 0 clamp(60px, 10vh, 120px); }
.pdp-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px; margin-top: 30px;
}
.pdp-gallery-item { margin: 0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--pdp-shadow-sm); }
.pdp-gallery-item img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.pdp-gallery-item:hover img { transform: scale(1.04); }
.pdp-gallery-item figcaption { padding: 12px 16px; color: #86868b; font-size: 14px; }

.pdp-specs-launch { padding: clamp(40px, 7vh, 90px) 0 clamp(60px, 10vh, 120px); }
.pdp-spec-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; margin-top: 34px; }
.pdp-spec-card { border: 1px solid var(--pdp-line); border-radius: 16px; padding: 26px 24px; background: #fff; transition: border-color .3s, transform .3s; }
.pdp-spec-card:hover { border-color: rgba(194, 160, 106, .5); transform: translateY(-4px); }
.pdp-spec-card h4 { margin: 0 0 16px; font-size: 17px; color: var(--pdp-accent); letter-spacing: .04em; }
.pdp-spec-card ul { list-style: none; margin: 0; padding: 0; }
.pdp-spec-card li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px dashed #eee; font-size: 15px; }
.pdp-spec-card li:last-child { border-bottom: 0; }
.pdp-spec-card li span { color: var(--pdp-ink2); }
.pdp-spec-card li b { color: var(--pdp-ink); font-weight: 600; }

/* ============ 模式 3：画廊网格（主图 + 缩略图 + 灯箱） ============ */
.pdp-hero-grid { padding: clamp(32px, 5vh, 62px) 0 clamp(30px, 4.5vh, 54px); }
.pdp-hero-grid-in { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.pdp-hero-grid-img img { width: 100%; max-height: min(70vh, 660px); object-fit: contain; background: #fff; border-radius: 22px; box-shadow: 0 44px 92px -54px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .035); display: block; }
.pdp-hero-grid-txt .pdp-title { font-size: clamp(25px, 3.4vw, 46px); }
.pdp-hero-grid-txt .pdp-lead { margin-top: 18px; }

.pdp-carousel-sec { padding: clamp(30px, 5vh, 60px) 0 clamp(60px, 10vh, 120px); }

/* 相册：主图（可点开灯箱）+ 缩略图条 */
.pdp-album { display: grid; gap: 18px; }
.pdp-album-main {
  position: relative; border-radius: var(--pdp-radius); overflow: hidden;
  background: #fff; box-shadow: var(--pdp-shadow);
}
.pdp-album-big {
  display: block; width: 100%; max-height: 560px; object-fit: contain;
  background: var(--pdp-soft); cursor: zoom-in;
}
.pdp-album-zoom {
  position: absolute; right: 16px; bottom: 16px; width: 44px; height: 44px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(20, 22, 26, .6); color: #fff; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, transform .25s; backdrop-filter: blur(4px);
}
.pdp-album-zoom:hover { background: var(--pdp-accent); transform: scale(1.06); }
.pdp-album-thumbs { display: flex; flex-wrap: wrap; gap: 12px; }
.pdp-thumb {
  width: 92px; height: 70px; border-radius: 12px; overflow: hidden; padding: 0; cursor: pointer;
  border: 2px solid transparent; background: var(--pdp-soft);
  transition: border-color .25s, transform .25s; flex: 0 0 auto;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb:hover { transform: translateY(-2px); }
.pdp-thumb.is-on { border-color: var(--pdp-accent); }

/* 相册当前图的「图片说明 + 正文」（内容来自后台幻灯片的「图片说明」与「正文 / 描述」） */
.pdp-album-info { display: flex; flex-direction: column; gap: 8px; padding: 2px 4px 0; }
/* ⚠️ 上面写了 display:flex 会盖掉 UA 的 [hidden]{display:none}，必须显式补回来，否则 JS 收起无效 */
.pdp-album-info[hidden] { display: none; }
/* 说明或正文缺失时，对应元素自身不占位（避免多出 8px 间距） */
.pdp-album-info > :empty { display: none; }
.pdp-album-cap {
  margin: 0; text-align: center; font-weight: 650;
  font-size: clamp(17px, 2vw, 21px); color: var(--pdp-ink, #1d1d1f);
}
.pdp-album-text {
  margin: 0 auto; max-width: 760px; text-align: center;
  color: var(--pdp-ink2, #6e6e73); font-size: clamp(14px, 1.6vw, 16px); line-height: 1.75;
  /* 自由输入文案：保留编辑框里的换行 + 防超长不换行串撑破 */
  white-space: pre-line; overflow-wrap: anywhere;
}

/* 灯箱（全屏大图预览） */
.pdp-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0, 0, 0, .92);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; opacity: 0; transition: opacity .3s ease;
}
.pdp-lightbox:not([hidden]) { opacity: 1; }
.pdp-lightbox[hidden] { display: none; }
.pdp-lb-stage { margin: 0; max-width: 92vw; max-height: 84vh; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pdp-lb-img { max-width: 92vw; max-height: 78vh; width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.pdp-lb-cap { color: #fff; font-size: 15px; opacity: .82; text-align: center; }
/* 灯箱正文（幻灯片「正文 / 描述」）：为空则整行不占位 */
.pdp-lb-text {
  margin: 0 auto; max-width: 720px; text-align: center;
  color: #fff; font-size: 14px; opacity: .72; line-height: 1.7;
  white-space: pre-line; overflow-wrap: anywhere;
}
.pdp-lb-cap:empty, .pdp-lb-text:empty { display: none; }
.pdp-lb-count { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; opacity: .7; }
.pdp-lb-close, .pdp-lb-prev, .pdp-lb-next {
  position: absolute; border: 0; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .14); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, transform .25s;
}
.pdp-lb-close { top: 18px; right: 18px; width: 44px; height: 44px; font-size: 26px; }
.pdp-lb-prev, .pdp-lb-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 30px; }
.pdp-lb-prev { left: 18px; }
.pdp-lb-next { right: 18px; }
.pdp-lb-close:hover, .pdp-lb-prev:hover, .pdp-lb-next:hover { background: rgba(255, 255, 255, .28); }

.pdp-specs-grid-sec { padding: clamp(30px, 5vh, 60px) 0 clamp(60px, 10vh, 120px); }
.pdp-spec-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; margin-top: 34px; }
.pdp-spec-group { background: #fff; border: 1px solid var(--pdp-line); border-radius: 16px; padding: 24px; }
.pdp-spec-group h4 { margin: 0 0 14px; font-size: 16px; color: var(--pdp-accent); }
.pdp-spec-group dl { margin: 0; }
.pdp-spec-dl { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 15px; }
.pdp-spec-dl:last-child { border-bottom: 0; }
.pdp-spec-dl dt { color: var(--pdp-ink2); margin: 0; } .pdp-spec-dl dd { color: var(--pdp-ink); font-weight: 600; margin: 0; }

/* ============ 通用 CTA ============ */
.pdp-cta { padding: clamp(70px, 11vh, 130px) 24px; text-align: center; background: radial-gradient(120% 90% at 50% 100%, rgba(194, 160, 106, .12), var(--pdp-bg) 60%); }
.pdp-cta h2 {
  font-size: clamp(24px, 3.4vw, 40px); margin: 0 0 30px; font-weight: 700; line-height: 1.35;
  text-wrap: balance;          /* 支持时自动把两行排得均衡，避免尾行只剩两三个字 */
  overflow-wrap: anywhere;     /* 产品名含超长英文/无空格串时不撑破 */
}
/* 「更多细节？」整块不断行；PC 不强制换行，移动端才启用 <br>（见移动端媒体查询） */
.pdp-cta-tail { white-space: nowrap; }
.pdp-cta-br { display: none; }
.pdp-cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============ PC 端增强（移动端优先，此处只做适度放大） ============ */
@media (min-width: 861px) {
  .pdp-feature { grid-template-columns: 1.05fr 1fr; gap: 56px; }
  .pdp-feature.rev .pdp-feature-img { order: 2; }
  .pdp-hero-grid-in { grid-template-columns: 1fr 1fr; gap: 56px; }
  /* 相册：PC 上主图更大、缩略图居中一行 */
  .pdp-album-main { max-width: 900px; margin: 0 auto; }
  .pdp-album-thumbs { justify-content: center; }
  .pdp-thumb { width: 104px; height: 78px; }
}

/* ============ 移动端微调 ============ */
@media (max-width: 860px) {
  .pdp .wrap { padding: 0 18px; }
  /* 返回条 + hero：移动端同一套收字号、压留白（原来 40px 起的标题在手机上更显笨重） */
  .pdp-backbar { padding: calc(var(--head-h, 68px) + 8px) 0 10px; }
  .pdp-back { font-size: 13px; }
  .pdp-hero-apple { padding: 20px 0 6px; }
  .pdp-hero-apple .pdp-title { font-size: clamp(26px, 7.4vw, 32px); max-width: none; }
  .pdp-hero-apple .pdp-hero-img { margin-top: 22px; border-radius: 16px; }
  .pdp-hero-launch { padding: 24px 0 26px; }
  .pdp-hero-launch .pdp-title { font-size: clamp(24px, 6.8vw, 30px); }
  .pdp-hero-launch .pdp-hero-img { margin-top: 20px; border-radius: 16px; }
  .pdp-hero-grid { padding: 20px 0 24px; }
  .pdp-hero-grid-txt .pdp-title { font-size: clamp(23px, 6.4vw, 28px); }
  .pdp-hero-grid-img img { border-radius: 14px; }
  /* 产品列表：移动端瀑布流（column-count masonry，卡片按真实高度错落） */
  .pdp-grid-list {
    display: block; column-count: 2; column-gap: 12px; margin-top: 22px;
  }
  .pdp-card {
    break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
    margin: 0 0 12px; border-radius: 12px; box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
    transform: none;   /* 关掉 hover 位移，避免多列分片抖动 */
  }
  .pdp-card:hover { transform: none; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .16); }
  .pdp-card-img { padding: 8px 8px 0; }
  /* 封面固定 4:3 + object-fit:cover（继承基础规则）：后台传图长宽比再乱，
     封面框也一致——不再按图片原始比例撑高，避免瀑布流里卡片封面大小不一。 */
  .pdp-card-img img { border-radius: 8px; aspect-ratio: 4 / 3; }
  .pdp-card:hover .pdp-card-img img { transform: none; }
  .pdp-card-body { padding: 9px 11px 13px; }
  .pdp-card-body h3 { font-size: 14px; line-height: 1.4; }
  .pdp-card-sub { font-size: 12px; margin-top: 4px; }
  .pdp-cat-hero { margin-top: 18px; border-radius: 14px; }
  /* 分类筛选条：手机上一行放不下就折行（不做横向滚动，避免拖动整页的错觉），
     触控区保持 ≥40px；子分类组的父名单独占一行，窄屏下不跟标签抢空间。 */
  .pdp-cats { gap: 10px; margin-top: 22px; }
  .pdp-cats-row { gap: 8px; }
  .pdp-cat { padding: 10px 16px; font-size: 13.5px; min-height: 40px; }
  .pdp-cat-parent { padding-right: 13px; }
  .pdp-subs-group { gap: 8px 10px; padding: 11px 13px; border-radius: 14px; }
  .pdp-subs-label {
    width: 100%; height: auto; padding: 0 0 8px; margin: 0 0 2px;
    border-right: 0; border-bottom: 1px solid rgba(194, 160, 106, .28);
  }
  .pdp-subs-list { gap: 8px; }
  .pdp-cat-sub { padding: 9px 15px; font-size: 13px; min-height: 40px; }
  /* 分页：手机上收窄按钮，长列表的省略号窗口允许折成两行（flex-wrap），绝不横向溢出 */
  .pdp-pager { gap: 6px; margin-top: 30px; }
  .pdp-pg-num, .pdp-pg-nav { min-width: 36px; height: 36px; padding: 0 10px; font-size: 14px; }
  .pdp-pg-nav .ic { width: 14px; height: 14px; }
  .pdp-pg-gap { height: 36px; min-width: 16px; font-size: 14px; }
  .pdp-pager-tip { margin-top: 12px; font-size: 12px; }
  .pdp-gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .pdp-gallery-item img { height: 150px; }
  .pdp-spec-card li, .pdp-spec-dl { font-size: 14px; }
  /* 行动召唤：标题收小并在「更多细节？」前主动断行，避免在「细节」两字之间断开 */
  .pdp-cta { padding: 54px 18px; }
  .pdp-cta h2 { font-size: clamp(19px, 5.4vw, 24px); line-height: 1.45; margin-bottom: 22px; }
  .pdp-cta-br { display: inline; }
  .pdp-cta-row { gap: 12px; }
  .pdp-lb-prev { left: 8px; width: 44px; height: 44px; font-size: 26px; }
  .pdp-lb-next { right: 8px; width: 44px; height: 44px; font-size: 26px; }
  .pdp-lb-img { max-height: 70vh; }
}