/* ============================================================
文件：product-detail.css
说明：产品详情页版式增强（仅作用于 body.product-page）
      由 _archive/upgrade-product-pages.js 统一挂载到 524 个
      product-detail 页面
版本：3.6（2026-10-04）（★第 124 轮 A10：FAQ 尾部留白收敛；纯 CSS）沿承 3.5（2026-10-03）（★第 117 轮 B6：分类卡计数小标 .sub-count 样式）沿承 3.4（2026-10-03）（★第 116 轮 B4：相关产品卡片加分类小标 .rel-cat；分类文字取自目标页自身 .product-category）沿承 3.3（2026-10-03）（★第 114 轮 B1：首屏改版 —— 图区定 1:1 方框、角标改技术标签、分类行加左竖线、标题层级收紧、询价按钮加强；纯 CSS）沿承 3.2（2026-10-03）（★第 112 轮 S6：相关产品卡片样式收敛 —— 圆角统一 3px、图标框居中发丝方底、标题与副文案节奏、悬停同分类页语言）沿承 3.1（2026-10-03）（★第 110 轮：清掉两条死规则 .pd-anchor-nav 与 .pd-spec-section —— 元素已全站 0 残留；按行号精确删除）沿承 3.0（2026-10-03）（★第 107 轮：补齐三个缺失的灰阶变量 --color-gray-300/500/700 —— 此前被引用但未定义，导致正文文字色与占位卡虚线边框整条被静默丢弃）沿承 2.9（2026-10-02）（★第 106 轮：定义 --nav-height 默认值，修复左侧目录树 sticky 失效；目录树加 max-height 与内部滚动）沿承 2.8（2026-10-02）（★第 103 轮 S1/S2：区块留白节奏统一 + 正文标题节奏与行高锁定；纯 CSS、结构零改动）沿承 2.7（2026-10-02）（★第 102 轮 S3：规格块样式加强 —— .pd-spec 加左竖线与发丝线、值用等宽数字 tabular-nums；纯样式、结构零改动）沿承 2.6（2026-10-02）（第 101 轮：追加 pd-anchor-nav 章节锚点导航 与 pd-spec-disclaimer 规格说明）
      2.5（第 36 轮）关键参数条 .pd-specs 按项数收缩列数：4 项（482 页）沿用 4 列，
          3 项（34 页）/ 2 项（4 页）不再在右侧留出空格 —— ≥1025px 按项数收缩列数，
          ≤1024px 奇数项时末项整行。页面结构不变，纯样式。
      2.4（第 33 轮）首屏左栏侧栏瘦身：删掉卡内 4 条品质资质行 + 底部
          品质链接（全站重复口径 / 与页脚「技术文档」重复），只留标题 +
          4 条服务；余量改由「单列 + 行等分拉伸」摊到各条目之间，
          并清理 .pd-aside-trust / .pd-aside-link 死规则。
      2.3（第 32 轮）首屏左栏「采购与售后支持」侧栏 .pd-aside：
          容器改 align-items:stretch，左栏在图下补出采购支持卡 + 品质资质卡，
          左栏底边自动与右栏齐平（余量由品质资质卡吸收，底部链接随之贴底）。
      2.2（2026-09-23）
      2.1（第 26 轮）资料页卡片化：场景卡 / 行业清单 / 配套小卡 / 步骤卡 /
          维护分类卡 + 禁止事项带 + 线性 SVG 图标 + 列数类 .pd-c1~.pd-c4
      2.0（第 25 轮）概览参数条 + 信任行 + 独立规格区 + 左 sticky 目录 / 右章节
      1.2（占位卡对比度：.image-placeholder .filename 原 --color-gray-400 ×
           opacity:0.8 合成后仅 3.22:1（12px）→ 改 --color-gray-600 + opacity:1
           = 5.62:1。修在治理规则上，覆盖全部 product-page 占位卡）
      1.1（对比度：.page-hero--slim .breadcrumb 原 opacity:0.78 再叠链接
           alpha:0.6，实际仅 3.76:1 → 去掉容器 opacity，改由链接色表达）
      1.0（2026-09-22）

改造动机（基于整页截图走查 + 全站版式普查）：
  1. 首屏重复——深色头部已有产品名/副标题/引导段/标签，紧邻的
     信息栏又把产品名与副标题重复了一遍，整整一屏在说同一件事；
  2. 空图死区——产品图位在缺图时是一个 1:1 的大灰空盒，却是
     页面第一视觉焦点；
  3. 中文断行——关键参数两列栅格里，两字标签（"底座""立杆"）
     被挤成上下两行；
  4. 连续灰底——相关产品与 CTA 两段同为 gray-100，节奏平。

本文件不改动任何文案，只调整排布与视觉。
============================================================ */

/* ------------------------------------------------------------
1. 头部精简：深色条只留面包屑，产品名/副标题交回信息栏
------------------------------------------------------------ */
body.product-page .page-hero.page-hero--slim {
    position: relative;
    overflow: hidden;
    padding: calc(var(--nav-height) + 16px) 0 16px;
    text-align: left;
}
body.product-page .page-hero--slim .breadcrumb {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8rem;
}

/* ------------------------------------------------------------
2. 首屏两栏：图位收窄、信息位加宽、顶部对齐
------------------------------------------------------------ */
body.product-page .product-detail {
    padding: 38px 0 46px;
}
body.product-page .product-detail .container {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 46px;
    align-items: start;
}

/* ------------------------------------------------------------
3. 图位：从"空灰盒"改成有设计的占位卡
   （真实图片加载成功时由页面脚本隐藏占位层，此处不影响）
------------------------------------------------------------ */
body.product-page .product-image .main-image {
    aspect-ratio: 4 / 3;
    background: radial-gradient(115% 115% at 50% 0%, #ffffff 0%, #f5f8fb 52%, #eaeff5 100%);
    box-shadow: var(--shadow-sm);
}
body.product-page .product-image .main-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(10, 38, 71, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 38, 71, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(72% 72% at 50% 46%, #000 26%, transparent 100%);
    mask-image: radial-gradient(72% 72% at 50% 46%, #000 26%, transparent 100%);
    pointer-events: none;
}
body.product-page .product-image .main-image img {
    position: relative;
    z-index: 1;
    max-width: 84%;
    max-height: 84%;
}
body.product-page .product-image .image-placeholder {
    background: transparent;
    z-index: 1;
}
body.product-page .product-image .image-placeholder .icon {
    font-size: 3.2rem;
    color: var(--color-accent);
    opacity: 0.3;
    margin-bottom: 10px;
}
body.product-page .product-image .image-placeholder .title-text {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-gray-600);
    opacity: 1;
}
body.product-page .product-image .image-placeholder .filename {
    font-size: 0.72rem;
    color: var(--color-gray-600);
    opacity: 1;
}
body.product-page .product-image .badge {
    z-index: 2;
}

/* ------------------------------------------------------------
4. 信息栏：去重后的字号节奏
------------------------------------------------------------ */
body.product-page .product-info .product-category {
    margin-bottom: 8px;
}
body.product-page .product-info h1.product-title {
    font-size: 2.05rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin-bottom: 10px;
}
body.product-page .product-info .subtitle {
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 14px;
}

/* 由头部搬入的引导段 */
body.product-page .product-info .pd-lead {
    font-size: 0.95rem;
    color: var(--color-gray-600);
    line-height: 1.85;
    margin: 0 0 16px;
}

/* 由头部搬入的标签 → 芯片样式（原 page-hero 内无对应样式） */
body.product-page .product-info .hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 4px;
}
body.product-page .product-info .hero-tags span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--color-accent-light);
    color: var(--color-accent);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.5;
}
body.product-page .product-info .hero-tags span i {
    font-size: 0.72rem;
    opacity: 0.85;
}

/* ------------------------------------------------------------
5. 关键参数：修正中文两字标签断行 + 徽章飘位
   原实现用 flex 排 li，行内的 <span class="std-badge"> 会被当成
   独立 flex 项，文字换行后徽章就"飘"到文字块右侧；
   改为 block + 图标绝对定位，文字与徽章回归正常行内流。
------------------------------------------------------------ */
body.product-page .product-info .key-features li {
    display: block;
    position: relative;
    padding-left: 28px;
    line-height: 1.65;
}
body.product-page .product-info .key-features li i {
    position: absolute;
    left: 0;
    top: 0.32em;
    width: auto;
}
body.product-page .product-info .key-features li strong {
    white-space: nowrap;
}

/* ------------------------------------------------------------
6. 标签页：按钮命中区与悬停态
------------------------------------------------------------ */
body.product-page .product-tabs .tabs-nav button {
    padding: 13px 24px;
}
body.product-page .product-tabs .tabs-nav button:hover {
    color: var(--color-primary);
    background: var(--color-gray-100);
}

/* ------------------------------------------------------------
7. 底部节奏：打破"相关产品 + CTA"两段连续灰底
------------------------------------------------------------ */
body.product-page .related-products {
    border-top: 1px solid var(--color-gray-200);
}
body.product-page .related-card {
    box-shadow: var(--shadow-sm);
}
body.product-page .related-card:hover {
    box-shadow: var(--shadow-md);
}
body.product-page .sets-cta {
    background: var(--color-white) !important;
    border-top: 1px solid var(--color-gray-200);
}

/* ------------------------------------------------------------
8. 窄屏
------------------------------------------------------------ */
@media (max-width: 1024px) {
    body.product-page .product-detail .container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    body.product-page .product-image .main-image {
        aspect-ratio: 16 / 10;
    }
}
@media (max-width: 768px) {
    body.product-page .page-hero.page-hero--slim {
        padding: calc(var(--nav-height) + 10px) 0 12px;
    }
    body.product-page .product-info h1.product-title {
        font-size: 1.65rem;
    }
    /* 5 个标签按钮在窄屏放不下时自身横滚，避免撑出页面级横向溢出 */
    body.product-page .product-tabs .tabs-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    body.product-page .product-tabs .tabs-nav button {
        padding: 12px 14px;
        white-space: nowrap;
        flex: 0 0 auto;
    }
}

/* ============================================================
v2.0（2026-09-23）产品页「资料页」版式（第 25 轮）
  概览参数条 + 信任行 + 独立规格区 + 左 sticky 目录 / 右章节 + 维护与注意
  由 _archive/fix25-product-detail-restructure.js 把原「标签页」骨架改写为
  该结构；本文件只出样式，不改任何文案。
============================================================ */

/* ---- A. 概览：关键参数条（4 格） ---- */
body.product-page .pd-specs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 2px 0 20px;
    background: var(--color-gray-200);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-card);
    overflow: hidden;
}
body.product-page .pd-spec { padding: 14px 16px; background: #fff; }
body.product-page .pd-spec .v {
    display: block;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.32;
    letter-spacing: -0.01em;
    color: var(--color-primary);
}
body.product-page .pd-spec .k {
    display: block;
    margin-top: 4px;
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--color-gray-600);
}

/* ---- B. 概览：信任行 ---- */
body.product-page .pd-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 16px;
    font-size: 0.8rem;
    color: var(--color-gray-600);
}
body.product-page .pd-trust span { display: inline-flex; align-items: center; gap: 6px; }
body.product-page .pd-trust i { color: var(--color-accent); font-size: 0.78rem; }

/* ---- C. 独立规格区（白底） ---- */
body.product-page .pd-spec-head { position: relative; margin-bottom: 22px; }
body.product-page .pd-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-accent);
}
body.product-page .pd-kicker::before {
    content: "";
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-accent);
}
body.product-page .pd-spec-head h2 {
    margin: 10px 0 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-primary);
}
body.product-page .pd-spec-head > p {
    margin-top: 10px;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--color-gray-600);
}
body.product-page .pd-spec-link {
    position: absolute;
    right: 0;
    bottom: 3px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}
body.product-page .pd-spec-link:hover { color: var(--color-primary); }
body.product-page .pd-spec-foot {
    margin-top: 14px;
    font-size: 0.82rem;
    line-height: 1.9;
    color: var(--color-gray-600);
}

/* ---- D. 内容区：左 sticky 目录 + 右章节（浅灰底） ---- */
body.product-page .pd-content { padding: 54px 0; background: #f5f8fb; }
body.product-page .pd-content-inner {
    display: grid;
    grid-template-columns: minmax(0, 232px) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}
body.product-page .pd-toc {
    position: sticky;
    top: calc(var(--nav-height) + 18px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
body.product-page .pd-toc-head {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-gray-600);
}
body.product-page .pd-toc-list { display: flex; flex-direction: column; gap: 2px; }
body.product-page .pd-toc-list a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 2px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-gray-700);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
body.product-page .pd-toc-list a .no {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-gray-600);
}
body.product-page .pd-toc-list a:hover { background: #fff; color: var(--color-accent); }
body.product-page .pd-toc-list a.active {
    background: #fff;
    color: var(--color-accent);
    box-shadow: var(--shadow-sm);
}
body.product-page .pd-toc-list a.active .no { color: var(--color-accent); }
body.product-page .pd-consult {
    padding: 18px;
    border-radius: var(--radius-card);
    background: linear-gradient(150deg, #0a2647 0%, #14538f 100%);
    color: #fff;
}
body.product-page .pd-consult strong { display: block; font-size: 0.95rem; }
body.product-page .pd-consult p {
    margin: 8px 0 12px;
    font-size: 0.82rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.74);
}
body.product-page .pd-consult a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    font-weight: 600;
    color: #8fd0ff;
    text-decoration: none;
}

body.product-page .pd-chapters { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
body.product-page .pd-chapter {
    padding: 32px 34px;
    background: #fff;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-card);
}
body.product-page .pd-chapter > h2 {
    margin: 0 0 16px;
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--color-primary);
}
body.product-page .pd-chapter h2:not(:first-child) { margin-top: 28px; }
body.product-page .pd-chapter p { color: var(--color-gray-700); line-height: 1.85; }
body.product-page .pd-chapter p + p { margin-top: 12px; }
body.product-page .pd-chapter ul { margin: 12px 0 0; padding-left: 20px; }
body.product-page .pd-chapter ol { margin: 12px 0 0; padding-left: 22px; }
body.product-page .pd-chapter li { line-height: 1.8; color: var(--color-gray-700); margin-bottom: 5px; }
body.product-page .pd-chapter strong { color: var(--color-primary); }
body.product-page .pd-chapter .notice-box { margin-top: 18px; }
body.product-page .pd-chapter .safety-box { margin-top: 18px; }

/* ---- E. 维护与注意章节（暖色） ---- */
body.product-page .pd-chapter.pd-care { background: #fdf6ea; border-color: #f0e0c0; }
body.product-page .pd-chapter.pd-care > h2 { color: #8a5a00; }
body.product-page .pd-chapter.pd-care .safety-box,
body.product-page .pd-chapter.pd-care .notice-box {
    margin-top: 0;
    background: transparent;
    border-left: 0;
    padding: 0;
}
body.product-page .pd-chapter.pd-care .safety-box > p strong,
body.product-page .pd-chapter.pd-care .notice-box > p strong { color: #8a5a00; }
body.product-page .pd-chapter.pd-care p { color: #6b4a12; }
body.product-page .pd-chapter.pd-care li { color: #6b4a12; }
body.product-page .pd-care-flag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #8a5a00;
}

/* ---- F. 窄屏 ---- */
@media (max-width: 1024px) {
    body.product-page .pd-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.product-page .pd-content-inner { grid-template-columns: 1fr; gap: 24px; }
    body.product-page .pd-toc { position: static; }
    body.product-page .pd-toc-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
    body.product-page .pd-toc-list a {
        padding: 8px 14px;
        border-radius: var(--radius-pill);
        background: #fff;
        border: 1px solid var(--color-gray-200);
        font-size: 0.84rem;
    }
    body.product-page .pd-consult { display: none; }
}
@media (max-width: 768px) {
    body.product-page .pd-chapter { padding: 24px 20px; }
    body.product-page .pd-spec-head h2 { font-size: 1.3rem; }
    body.product-page .pd-spec-link { position: static; display: inline-block; margin-top: 10px; }
}

/* ============================================================
v2.1（2026-09-23）产品页章节「卡片化」（第 26 轮）
  应用场景 → .pd-scenes 场景卡 + .pd-pairs 配套小卡 + .pd-industries 清单
  操作指南 → .pd-steps 步骤卡（圆形编号）
  维护与注意 → .pd-care-grid 分类卡 + .pd-ban 禁止/注意事项带
  由 _archive/fix26-product-detail-cards.js 生成；本文件只出样式，不改文案。
  只在该产品自己的文案里已经存在对应内容时才出现对应卡片。
============================================================ */

/* ---- G. 小节标签 ---- */
body.product-page .pd-chapter .pd-sub {
    margin: 22px 0 12px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-gray-600);
}
body.product-page .pd-chapter .pd-sub:first-child { margin-top: 0; }

/* ---- H. 线性图标 ---- */
body.product-page .pd-chapter .ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 2px;
    background: var(--color-accent-light);
    color: var(--color-accent);
}
body.product-page .pd-chapter .pd-ic {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- I. 应用场景：场景卡 ---- */
body.product-page .pd-chapter .pd-scenes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
body.product-page .pd-chapter .pd-scene {
    padding: 16px 18px;
    border: 1px solid #e6eef7;
    border-radius: 3px;
    background: #f7fafd;
}
body.product-page .pd-chapter .pd-scene > .ic { margin-bottom: 12px; }
body.product-page .pd-chapter .pd-scene h3 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-primary);
}
body.product-page .pd-chapter .pd-scene p {
    margin: 6px 0 0;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--color-gray-600);
}
body.product-page .pd-chapter .pd-scene .kit {
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #d7e4f2;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--color-accent);
}
body.product-page .pd-chapter .pd-scene .kit b { font-weight: 700; }

/* ---- J. 行业 / 领域等清单（双列紧凑，保留全部原文） ---- */
body.product-page .pd-chapter ul.pd-industries {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.product-page .pd-chapter ul.pd-industries li {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.75;
    color: var(--color-gray-600);
}
body.product-page .pd-chapter ul.pd-industries li strong { font-weight: 700; }
body.product-page .pd-chapter ul.pd-industries a {
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 102, 179, 0.28);
}

/* ---- K. 配套小卡（可点击跳转） ---- */
body.product-page .pd-chapter .pd-pairs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
body.product-page .pd-chapter .pd-pair {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid #d8e8fa;
    border-radius: 3px;
    background: #f2f8ff;
}
body.product-page .pd-chapter .pd-pairs .pd-pair { margin-top: 0; background: #fff; }
body.product-page .pd-chapter .pd-pair .ic { width: 30px; height: 30px; border-radius: 2px; background: #e6f0fa; }
body.product-page .pd-chapter .pd-pair .ic .pd-ic { width: 17px; height: 17px; }
body.product-page .pd-chapter .pd-pair .bd { min-width: 0; }
body.product-page .pd-chapter .pd-pair h3,
body.product-page .pd-chapter .pd-pair strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-primary);
}
body.product-page .pd-chapter .pd-pair h3 a,
body.product-page .pd-chapter .pd-pair p a {
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 102, 179, 0.3);
}
body.product-page .pd-chapter .pd-pair h3 a:hover { color: var(--color-primary); }
body.product-page .pd-chapter .pd-pair p {
    margin: 4px 0 0;
    font-size: 0.83rem;
    line-height: 1.7;
    color: var(--color-gray-600);
}

/* ---- L. 操作步骤卡 ---- */
body.product-page .pd-chapter .pd-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: stretch;
}
body.product-page .pd-chapter .pd-step {
    position: relative;
    padding: 16px 16px 14px;
    border: 1px solid #e6eef7;
    border-radius: 3px;
    background: #f7fafd;
}
body.product-page .pd-chapter .pd-step .no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
body.product-page .pd-chapter .pd-step h3 {
    margin: 10px 0 8px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-primary);
}
body.product-page .pd-chapter .pd-step ul,
body.product-page .pd-chapter .pd-step ol { margin: 0; padding-left: 18px; }
body.product-page .pd-chapter .pd-step li {
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--color-gray-600);
    margin-bottom: 4px;
}

/* ---- M. 维护与注意：分类卡 + 禁止事项带 ---- */
body.product-page .pd-chapter .pd-care-lead {
    margin: 0 0 14px;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.7;
    color: #8a5a00;
}
body.product-page .pd-chapter .pd-care-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
    gap: 12px;
}
body.product-page .pd-chapter .pd-care-card {
    padding: 16px 18px;
    border: 1px solid #f0e3c8;
    border-radius: 3px;
    background: #fff;
}
body.product-page .pd-chapter .pd-care-card h3 {
    margin: 0 0 8px;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.5;
    color: #8a5a00;
}
body.product-page .pd-chapter .pd-care-card p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.75;
    color: #6b4a12;
}
body.product-page .pd-chapter .pd-care-card ul { margin: 0; padding-left: 18px; }
body.product-page .pd-chapter .pd-care-card ul.pd-cols {
    padding-left: 18px;
    column-count: 2;
    column-gap: 28px;
}
body.product-page .pd-chapter .pd-care-card li {
    margin: 0 0 6px;
    font-size: 0.84rem;
    line-height: 1.75;
    color: #6b4a12;
    break-inside: avoid;
}
body.product-page .pd-chapter .pd-ban {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 14px 18px;
    border: 1px solid #f0d5a8;
    border-left: 3px solid #9c5a00;
    border-radius: 3px;
    background: #fff5e6;
}
body.product-page .pd-chapter .pd-ban .ic { width: 30px; height: 30px; border-radius: 2px; background: #fff; color: #9c5a00; }
body.product-page .pd-chapter .pd-ban .ic .pd-ic { width: 17px; height: 17px; }
body.product-page .pd-chapter .pd-ban .bd { min-width: 0; }
body.product-page .pd-chapter .pd-ban strong {
    display: block;
    margin-bottom: 6px;
    font-size: 0.86rem;
    font-weight: 700;
    color: #8a5200;
}
body.product-page .pd-chapter .pd-ban ul { margin: 0; padding-left: 18px; }
body.product-page .pd-chapter .pd-ban li {
    margin: 0 0 4px;
    font-size: 0.83rem;
    line-height: 1.75;
    color: #7a4600;
}

/* ---- M2. 栅格列数（写死列数，避免最后一行只落 1 张卡）
   必须排在所有栅格基样式之后，否则会被后面的 .pd-scenes/.pd-steps/.pd-care-grid 覆盖 */
body.product-page .pd-chapter .pd-c1 { grid-template-columns: minmax(0, 1fr); }
body.product-page .pd-chapter .pd-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.product-page .pd-chapter .pd-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.product-page .pd-chapter .pd-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---- N. 窄屏 ---- */
@media (max-width: 1100px) {
    body.product-page .pd-chapter .pd-c4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    body.product-page .pd-chapter .pd-c3,
    body.product-page .pd-chapter .pd-c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    body.product-page .pd-chapter .pd-c1,
    body.product-page .pd-chapter .pd-c2,
    body.product-page .pd-chapter .pd-c3,
    body.product-page .pd-chapter .pd-c4 { grid-template-columns: minmax(0, 1fr); }
    body.product-page .pd-chapter ul.pd-industries { grid-template-columns: minmax(0, 1fr); }
    body.product-page .pd-chapter .pd-care-card ul.pd-cols { column-count: 1; }
}

/* ============================================================
v2.3（2026-09-23）首屏左栏「采购与售后支持」侧栏（第 32 轮）
  问题：.product-detail .container 是 align-items:start 的栅格，
        左栏 .product-image 只有一张 4:3 图（实测恒定 353px），
        右栏 .product-info 堆了 11 个模块（实测 557–1057px）
        → 左下留白 205–704px，最常见 368px，占首屏 46%。
  做法：左栏图下补出 .pd-aside（"采购与售后支持"卡），
        容器改 align-items:stretch，左栏整体拉伸到与右栏等高，
        余量在卡内均匀分配 → 左栏底边与右栏底边对齐。
  由 _archive/add-pd-aside.js 注入 520 个 product-page（中 / 英各 260）。
  本文件只出样式，不改任何文案。

v2.4（2026-09-24，第 33 轮）
  用户意见：「这半截多余」→ 删掉卡内「4 条品质资质行（ISO 9001 /
  20+ 年出口 / 100% 出厂检验 / 500+ 合作客户）」与底部
  「了解品质与认证」链接：前者是全站重复的通用口径、后者与页脚
  「技术文档」重复，都属"为撑高度而塞"的填充物。
  内容变少后改用「单列 + 行等分拉伸」把余量摊到各条目之间，
  ⛔ 不再靠往卡里加内容撑高度。同时删掉 .pd-aside-trust /
  .pd-aside-link 两条死规则。
============================================================ */

/* ---- O. 首屏左栏：图下侧栏 ---- */
body.product-page .product-detail .container { align-items: stretch; }
body.product-page .product-image {
    display: flex;
    flex-direction: column;
}
body.product-page .product-image .main-image { flex: 0 0 auto; }

/* 自然高刻意压到 ~165px：低于实测最短右栏可用高（529 − 图353 − 间距22 = 154
   已是极限情形），其余产品一律靠 flex 拉伸补足；
   max-height 用于兜住超长右栏，避免卡片被拉成"空盒子"。 */
body.product-page .pd-aside {
    display: flex;
    flex-direction: column;
    margin-top: 22px;
    flex: 1 1 auto;
    max-height: 560px;
}
body.product-page .pd-aside-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 18px 20px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-card);
    background: var(--color-white);
}
body.product-page .pd-aside-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-primary);
}
body.product-page .pd-aside-title::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--color-accent);
}

/* 单列 + 行等分：grid 的 align-content 默认 stretch，行高会平分卡内余量，
   于是"拉伸出来的空白"均匀落在每条服务之间（疏朗），
   而不是堆成一处大空洞，也不会把卡片顶出一条断口。
   内容在各自行内垂直居中，间距因此看起来始终均匀。 */
body.product-page .pd-aside-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex: 1 1 auto;
    margin: 0 -4px;
}
body.product-page .pd-aside-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 6px 4px;
}
body.product-page .pd-aside-item .ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 2px;
    background: var(--color-accent-light);
    color: var(--color-accent);
    font-size: 0.85rem;
}
body.product-page .pd-aside-item .bd { min-width: 0; }
body.product-page .pd-aside-item strong {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--color-primary);
}
body.product-page .pd-aside-item span {
    display: block;
    margin-top: 2px;
    font-size: 0.76rem;
    line-height: 1.55;
    color: var(--color-gray-600);
}

@media (max-width: 1024px) {
    /* 单栏时 .pd-aside 会被夹在产品图与产品信息之间、打断阅读顺序 → 隐藏。
       窄屏本来也不存在"左右两栏落差"，无需补偿。 */
    body.product-page .pd-aside { display: none; }
}

/* ============================================================
v2.5（第 36 轮）关键参数条 .pd-specs —— 按项数收缩列数，消除尾部空格
  问题：520 个产品页共用四列栅格；实测项数分布 = 4 项 482 页 / 3 项 34 页 / 2 项 4 页。
       3 项或 2 项时，栅格右侧剩下的单元格没有 .pd-spec 子元素，容器 background
       （--color-gray-200）直接透出 → 参数条右边留一块灰方块。
  做法：用 :has() 按「实际项数」决定列数，让每一项都被铺满，且各列仍等宽：
       · ≥1025px：2 项→2 列，3 项→3 列（4 项沿用默认 4 列）
       · ≤1024px：沿用 2 列；奇数项时末项整行（grid-column:1/-1），不留下角空格
  兼容：:has() 不被支持时整条规则失效 → 回落到 v2.4 的四列外观，属渐进增强。
============================================================ */

@media (min-width: 1025px) {
    body.product-page .pd-specs:has(> .pd-spec:last-child:nth-child(2)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body.product-page .pd-specs:has(> .pd-spec:last-child:nth-child(3)) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    body.product-page .pd-specs:has(> .pd-spec:last-child:nth-child(odd)) > .pd-spec:last-child {
        grid-column: 1 / -1;
    }
}

/* ============================================================
v2.6（第 56 轮 · 产品详情页模板试版 PD-TRIAL-56）
8 段结构 + 交互的**增量**样式：首屏常驻询价钮 / 长说明折叠 / 相关产品 / 手机底部固定询价条。
⚠️ 全部为**文末追加**，不改动上方任何原规则 ⇒ 可整块独立回滚；不新增第五套版式。
============================================================ */
.pd-quote-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 12px 24px;
    border-radius: var(--radius-btn, 2px);
    background: var(--color-accent);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--transition, 0.2s ease), transform var(--transition, 0.2s ease);
}
.pd-quote-btn:hover { background: var(--color-primary); transform: translateY(-2px); }
.pd-quote-btn i { font-size: 0.9rem; }

/* 长说明默认折叠（原生 <details>，无 JS 依赖） */
.pd-fold { margin-top: 8px; border-top: 1px solid var(--color-gray-200); }
.pd-fold > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 0;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.012em;
    color: var(--color-primary);
    cursor: pointer;
    list-style: none;
}
.pd-fold > summary::-webkit-details-marker { display: none; }
.pd-fold > summary::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.78rem;
    color: var(--color-accent);
    transition: transform var(--transition, 0.2s ease);
}
.pd-fold[open] > summary::after { transform: rotate(180deg); }
.pd-fold-body { padding-bottom: 20px; }

/* 相关产品上移后与章节的间距 */
.pd-related-holder { margin-bottom: 8px; }

/* 手机端底部固定询价条（仅手机显示；加 body padding 防遮挡页脚） */
.pd-sticky-quote { display: none; }
@media (max-width: 767px) {
    body.product-page { padding-bottom: 68px; }
    .pd-sticky-quote {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 60;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid var(--color-gray-200);
        box-shadow: 0 -6px 20px rgba(10, 38, 71, 0.08);
    }
    .pd-sticky-quote .pd-sq-name {
        display: flex;
        flex-direction: column;
        min-width: 0;
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--color-primary);
        line-height: 1.3;
    }
    .pd-sticky-quote .pd-sq-name small { font-weight: 500; color: var(--color-gray-600); font-size: 0.72rem; }
    .pd-sticky-quote .pd-sq-btn {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 11px 20px;
        border-radius: var(--radius-btn, 2px);
        background: var(--color-accent);
        color: #fff;
        font-size: 0.88rem;
        font-weight: 700;
        text-decoration: none;
    }
}
/* ===== PD-TRIAL-56-END ===== */

/* ---- PD-TRIAL-56B：详情页底部询价 CTA 面板（原本没有 .sets-cta 的量器类页面用） ---- */
.pd-bottom-quote {
    padding: 40px 0 56px;
    background: var(--color-gray-100);
    text-align: center;
}
.pd-bottom-quote .pd-bq-title {
    margin-bottom: 14px;
    font-size: 1.04rem;
    font-weight: 700;
    letter-spacing: -0.012em;
    color: var(--color-primary);
}
.pd-bottom-quote .pd-quote-btn { margin-top: 0; }
/* ===== PD-TRIAL-56B-END ===== */

/* ============================================================
PD-ROLLOUT（产品详情页模板批量套用）
首屏常驻询价钮 / 长说明折叠 / 手机底部固定询价条 / 底部询价面板 的补充样式。
⚠️ 文末追加，不改上方任何原规则；可整块独立回滚。
============================================================ */
.pd-bottom-quote { padding: 40px 0 56px; background: var(--color-gray-100); text-align: center; }
.pd-bottom-quote .pd-bq-title { margin-bottom: 14px; font-size: 1.04rem; font-weight: 700; letter-spacing: -0.012em; color: var(--color-primary); }
.pd-bottom-quote .pd-quote-btn { margin-top: 0; }
body.cat-page { padding-bottom: 68px; }
/* ===== PD-ROLLOUT-END ===== */

/* ==========================================================================
   pd-anchor-nav + pd-spec-disclaimer —— 第 101 轮追加块（A2 / B2）
   用途：① 规格表下方「以询盘确认为准」说明；② 详情页正文前的章节锚点导航
   ⛔ 本块为纯追加，不改动上方既有规则；回退时整块删除即可。
   ========================================================================== */
.pd-spec-disclaimer {
    margin: 10px 0 0;
    font-size: .82rem;
    line-height: 1.7;
    color: var(--color-gray-500, #888);
}

.pd-content h2[id] { scroll-margin-top: 90px; }
/* ===== 第 101 轮追加块结束 ===== */

/* ==========================================================================
   S3 规格块样式加强 —— 第 102 轮追加块（纯样式，结构零改动）
   目标：把关键参数条与规格说明做成精密仪器语言 —— 发丝线 + 左竖线技术标签 + 数字等宽对齐。
   仅覆盖下列属性，不改结构与既有规则的其余属性。⛔ 回退：整块删除即可。
   ========================================================================== */
body.product-page .pd-spec {
    position: relative;
    border: 1px solid var(--color-gray-200);
    border-radius: 3px;
    padding-left: 18px;
}
body.product-page .pd-spec::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: var(--color-accent);
    opacity: .85;
}
body.product-page .pd-spec .v {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--color-primary);
}
body.product-page .pd-spec .k {
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--color-gray-500, #888);
}
body.product-page .pd-spec-head h2 { letter-spacing: -.01em; }
body.product-page .pd-spec-head > p {
    font-size: .9rem;
    line-height: 1.85;
    color: var(--color-gray-600);
}
/* ===== S3 追加块结束 ===== */

/* ==========================================================================
   S1 / S2 节奏与字号收敛 —— 第 103 轮追加块（纯 CSS，结构零改动）
   背景：详情页正文的间距与字号大量写成内联 style（margin-top 有 4/8/12/16/20 五种），
         因此先把 CSS 能管到的部分统一：区块留白、正文标题节奏、段落行高。
   ⛔ 内联 style 的值本轮不动（不改页面属性）；仅通过 CSS 设定未被内联覆盖的属性。
   ⛔ 回退：整块删除即可。
   ========================================================================== */

/* 区块留白统一到 56px 节奏 */
body.product-page .pd-content { padding: 56px 0; }

/* 正文标题节奏：统一上留白与下留白（这些属性页面未内联，CSS 可直接生效） */
body.product-page .pd-content h2 {
    margin: 32px 0 14px;
    line-height: 1.35;
}
body.product-page .pd-content h2:first-of-type {
    margin-top: 0;
}

/* 正文段落与小字：锁定行高与下留白节奏 */
body.product-page .pd-content p {
    line-height: 1.9;
    margin-bottom: 14px;
}
body.product-page .pd-content p:last-child { margin-bottom: 0; }

/* 正文列表节奏（未内联的部分） */
body.product-page .pd-content ul,
body.product-page .pd-content ol {
    margin: 10px 0 16px;
    line-height: 1.9;
}
body.product-page .pd-content li { margin-bottom: 6px; }

/* 表格：数值等宽 + 行高节奏 */
body.product-page .pd-content table { font-variant-numeric: tabular-nums; }
body.product-page .pd-content th,
body.product-page .pd-content td { line-height: 1.8; }
/* ===== S1/S2 追加块结束 ===== */

/* ==========================================================================
   左侧目录树跟随滚动修复 —— 第 106 轮追加块（纯 CSS，结构零改动）
   根因：--nav-height 全站未定义，而 .pd-toc 用了 calc(var(--nav-height) + 18px)；
         整条 top 因此被浏览器判为无效丢弃 ⇒ sticky 没有 top 就不粘。
   修法：① 定义 --nav-height 默认值 72px（与站内其它地方假设一致）；
         ② 目录树补 max-height + 内部滚动，树比屏幕高时也能完整看到。
   ⛔ 回退：整块删除即可。
   ========================================================================== */

:root { --nav-height: 72px; }

body.product-page .pd-toc {
    top: calc(var(--nav-height, 72px) + 18px);
    max-height: calc(100vh - var(--nav-height, 72px) - 34px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
/* ===== 目录树跟随滚动修复结束 ===== */

/* ==========================================================================
   补齐缺失的灰阶变量 —— 第 107 轮追加块（纯 CSS，结构零改动）
   背景：--color-gray-300 / 500 / 700 被多处引用但没有定义 ⇒ 用了它们的整条声明
         被浏览器静默丢弃：正文段落与列表的文字色没生效、占位卡虚线边框没画出来。
   取值依据既有梯度（100 #f8f9fa → 200 #e9ecef → 400 #5f6b7a → 600 #565f68 → 800 #212529）：
     300 = #dee2e6（浅，用于分隔与虚线边框）
     500 = #6b7480（中，用于次级文字）
     700 = #3a424c（深，用于正文文字）
   ⛔ 若你要调这三个值，改这里即可（全站统一生效）。回退：整块删除。
   ========================================================================== */
:root {
    --color-gray-300: #dee2e6;
    --color-gray-500: #6b7480;
    --color-gray-700: #3a424c;
}
/* ===== 灰阶补齐结束 ===== */

/* ==========================================================================
   S6 相关产品卡片样式收敛 —— 第 112 轮追加块（纯 CSS，结构零改动）
   说明：相关产品卡片位于 .related-products > .related-grid > a.related-card；
         用 .related-products 前缀（特异性 0,2,0）覆盖，不改任何页面。
   改动：卡片圆角统一 3px；图标统一为发丝方框底；标题与副文案节奏收紧、数字等宽；
         悬停时描边转强调色并轻微上浮（与分类页卡片同一套语言）。
   ⛔ 回退：整块删除。
   ========================================================================== */

.related-products .related-card {
    border-radius: 3px;
    border: 1px solid var(--color-gray-200);
    background: #fff;
    padding: 22px 18px;
    display: block;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.related-products .related-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(10, 38, 71, .06);
}
.related-products .related-card .icon-wrap {
    margin-left: auto;
    margin-right: auto;
    width: 40px;
    height: 40px;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-gray-200);
    border-radius: 3px;
    background: #fff;
    color: var(--color-accent);
    font-size: 1rem;
}
.related-products .related-card h3 {
    margin: 0 0 6px;
    font-size: .98rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--color-primary);
}
.related-products .related-card p {
    margin: 0 0 10px;
    font-size: .86rem;
    line-height: 1.7;
    color: var(--color-gray-600);
    font-variant-numeric: tabular-nums;
}
.related-products .related-card .link-hint {
    font-size: .82rem;
    font-weight: 700;
    color: var(--color-accent);
}
/* ===== S6 追加块结束 ===== */

/* ==========================================================================
   B1 首屏改版 —— 第 114 轮追加块（纯 CSS，结构零改动）
   目标：把首屏（左图 / 右信息）做得更像"精密仪器"产品的开箱页 ——
         图区给一个稳定的 1:1 方框（占位与实拍都对齐同一比例），
         角标与分类行统一为技术标签语言，标题层级收紧，询价按钮更明确。
   注：样式原本均在 CSS 文件内且无 !important，故本块可直接生效，无需改页面。
   ⛔ 回退：整块删除。
   ========================================================================== */

/* 图区：稳定 1:1 方框（占位与实拍同一比例，避免加载前后跳动） */
body.product-page .product-image .main-image {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-gray-200);
    border-radius: 3px;
    overflow: hidden;
    background: #fff;
}
body.product-page .product-image .main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 角标：技术标签语言（小、紧、强调色左边） */
body.product-page .product-image .badge {
    border-radius: 2px;
    padding: 4px 10px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .06em;
    border-left: 3px solid var(--color-accent);
    background: #fff;
    color: var(--color-primary);
}

/* 分类行：左竖线技术标签 */
body.product-page .product-info .product-category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 10px;
    border-left: 2px solid var(--color-accent);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--color-gray-600);
}

/* 标题层级收紧 */
body.product-page .product-info h1 {
    letter-spacing: -.02em;
    line-height: 1.25;
}

/* 询价按钮：更明确的主操作 */
body.product-page .product-info .pd-quote-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 12px 22px;
    border-radius: 3px;
    font-weight: 800;
    letter-spacing: .02em;
}
/* ===== B1 追加块结束 ===== */

.related-products .related-card .rel-cat {
    display: inline-block;
    margin-bottom: 6px;
    padding-left: 8px;
    border-left: 2px solid var(--color-accent);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--color-gray-500);
}


/* ==========================================================================
   A6 图片技术占位 —— 第 120 轮追加块（纯 CSS，结构零改动）
   背景（Codex 评审 A6）：图片未就位时页面会显示"图片即将上线"与内部文件名，
   那是后台状态，不该出现在正式站。此处只隐藏这两项，并给图位一个技术占位观感。
   ⛔ 不编造任何规格或参数。
   ========================================================================== */
body.product-page .main-image .image-placeholder .filename,
body.product-page .main-image .image-placeholder .status,
body.product-page .main-image .image-placeholder small { display: none; }

body.product-page .main-image .image-placeholder {
    background-color: #fff;
    background-image:
        linear-gradient(var(--color-gray-200) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-gray-200) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: -1px -1px;
    color: var(--color-gray-300);
}
body.product-page .main-image .image-placeholder .icon { opacity: .5; }
/* ===== A6 追加块结束 ===== */

/* ==========================================================================
   A3 中英阅读节奏 —— 第 123 轮追加块（纯 CSS，结构零改动）
   依据（Codex A3）：同一产品英文页比中文页长（桌面 784px、手机 1711px），
   主因是英文文本绝对行数更多，而非字体。此处给英文正文更紧的行高与合理限宽，
   中文保持原有舒展行高。⛔ 不动任何文案，也不折叠正文（折叠需用户授权）。
   ========================================================================== */
html[lang="en"] body.product-page .pd-chapter p {
    line-height: 1.75;
    max-width: 72ch;
}
html[lang="zh-CN"] body.product-page .pd-chapter p { line-height: 1.9; }
/* ===== A3 追加块结束 ===== */

/* ============================================================================
   S7-UI-NAV-CLEARANCE —— 固定导航让位（仅作用于「无 page-hero」的模板详情页）
   ────────────────────────────────────────────────────────────────────────────
   背景：`.navbar` 是 position:fixed（height = --nav-height，实测 72px）。
        手写老页首屏有 <section class="page-hero page-hero--slim">，其内 padding
        已经把面包屑推到导航下方；而 templates/product-detail.js 生成的 336 个
        新详情页**没有 page-hero**，`.breadcrumb` 直接挂在 body 下 ⇒ 实测 1440
        下正文顶边仅 26px，被 72px 导航压住 46px（面包屑整行被盖）。
   判据：老页面包屑是 `.page-hero` 的后代，**不是** body 的直接子元素；
        故 `body.product-page > .breadcrumb` 只命中模板页，老页零影响。
   取值：--nav-height + 18px 呼吸位；用变量而非硬编码，随导航高度自适应。
   ⛔ 回退：整块删除即可。
   ========================================================================== */
/* 窄横幅：模板不输出 <.page-hero--slim> 容器，故用 CSS 等效还原老页视觉
   （同渐变底 + 白字 + 与 .container 左边缘对齐；老页面包屑在 .page-hero 内，不受影响） */
body.product-page > .breadcrumb {
    margin: 0;
    padding: calc(var(--nav-height, 72px) + 16px)
             max(24px, calc((100vw - var(--max-width, 1200px)) / 2 + 24px))
             16px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
}
body.product-page > .breadcrumb a {
    color: rgba(255, 255, 255, 0.82);
    transition: color var(--transition, 0.2s ease);
}
body.product-page > .breadcrumb a:hover { color: #fff; }
body.product-page > .breadcrumb .sep { margin: 0 8px; color: rgba(255, 255, 255, 0.55); }
/* 页内锚点跳转让开固定导航
   ⚠️ TOC 的锚点有两类目标：article.pd-chapter[id] 与 div.pd-specs[id]（#pd-specs）。
   实测 1440 下 #pd-specs 未被覆盖 ⇒ top=4px 被 72px 导航压住，故两者都要写。*/
body.product-page > .breadcrumb,
body.product-page .pd-chapter[id],
body.product-page .pd-specs[id] {
    scroll-margin-top: calc(var(--nav-height, 72px) + 16px);
}
/* ────────────────────────────────────────────────────────────────
   comparison 模块 · 详情页第 07 章 正文样式
   发布：Release 2 H2 / Round 44b · 方案 v2 · D2 精确白名单
   仅允许 .pv-src 与 .pv-bg 两条规则；作用域限定 body.product-page
   ──────────────────────────────────────────────────────────────── */
body.product-page .pv-src {
    font-size: 0.82rem;
    color: #667;
    border-top: 1px dashed #d5dbe2;
    padding-top: 8px;
    margin-top: 12px;
}
body.product-page .pv-bg {
    font-size: 0.84rem;
    color: #7a5a2a;
    background: #fdf8ef;
    border-left: 3px solid #e8c98a;
    padding: 8px 12px;
    margin-top: 10px;
    border-radius: 0 3px 3px 0;
}
/* ===== BRAND-LOCKUP-127：产品详情页品牌识别模块 =====
   设计要点（对应用户规格）：
   · 顶部小号辅助标签（BRAND IDENTITY / 品牌标识）建立「模块」感，不再是裸说明行
   · 主体横向双标：Vissal® 权重高（宽度占比约 0.70），RichTech 次之，中间 1px 细分隔线
   · 底部一句品牌关联说明
   · 浅蓝灰底 #f5f8fb + 1px 细边框 #e6eef7 + 3px 圆角（= --radius-card）+ 统一内边距
     这两个色值均为本文件既有取值（#f5f8fb 见 .pd-content，#e6eef7 见既有描边），不引入新色系
     圆角实测 3px：--radius-card 在 style.css 三次定义（:root 16px → :root 4px → body.product-page 3px），
     产品详情页命中最后一层 ⇒ 与 .pd-aside-card 同值，与既有卡片体系一致
   · ⛔ 无重阴影、无渐变、无大图标、无大面积色块
   资产处理（沿用已验证逻辑，未改任何图片像素）：
   · vissal-logo.png 624×351（2026-10-29 由 2730×1535 等比重采样，1311KB→184KB，原图存档
     _archive/image-originals-20261029/）、**colorType=2 即 RGB 无 Alpha**、纯白底；
     内容包围盒 614×149 = **4.121:1**（原 2687×652，比例不变），上留白 24.0% / 下留白 33.5%
     容器取 4.121 内容比 + object-fit:cover + object-position:50% 42%
     ⇒ 只裁上下留白，**不裁字形、不拉伸变形**
     ⛔ 不用 contain：会把整幅（含 57.5% 空白）塞进框内，字标只剩约 60px 宽、肉眼不可辨
   · 白底如何融入浅蓝灰底：mix-blend-mode:multiply（白 × 底色 = 底色，实测通道偏移 < 5/255）
     ⇒ 不出现白色方块，也不需要抠图 / 改 PNG
   · richtech-logo-nobg.png 1221×716 RGBA 透明、内容 1070×626 = 1.709:1 ⇒ contain 即可
   ⛔ 只承载品牌标识，不承载任何权属 / 制造商 / 授权 / 认证声明 */
body.product-page .pd-brand-lockup {
    margin: 18px 0 0;
    padding: 14px 16px 13px;
    background: #f5f8fb;
    border: 1px solid #e6eef7;
    border-radius: var(--radius-card, 3px);   /* 实测 3px，与 .pd-aside-card 一致 */
    isolation: isolate;                 /* 把 multiply 限定在本模块内，不影响外部叠色 */
}
body.product-page .pd-brand-eyebrow {
    margin: 0 0 10px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #7b8ea6;
}
body.product-page .pd-brand-marks {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
body.product-page .pd-brand-vissal {
    display: block;
    width: 156px;
    height: 37.9px;                     /* 156 / 4.121 = 37.86 —— 与内容比一致，cover 不裁字 */
    object-fit: cover;
    object-position: 50% 42%;
    mix-blend-mode: multiply;           /* 白底 PNG 融入浅蓝灰底，无需抠图 */
}
body.product-page .pd-brand-sep {
    flex: 0 0 auto;
    width: 1px;
    height: 30px;
    background: #cfdcea;
}
body.product-page .pd-brand-richtech {
    display: block;
    height: 40px;
    width: auto;
    object-fit: contain;
}
body.product-page .pd-brand-note {
    margin: 11px 0 0;
    font-size: 0.79rem;
    line-height: 1.62;
    color: #5a6b7d;
}
@media (max-width: 768px) {
    body.product-page .pd-brand-lockup { margin-top: 16px; padding: 12px 13px 11px; }
    body.product-page .pd-brand-eyebrow { margin-bottom: 9px; font-size: 0.66rem; letter-spacing: 0.11em; }
    body.product-page .pd-brand-marks { gap: 10px; }
    body.product-page .pd-brand-vissal { width: 124px; height: 30.1px; }
    body.product-page .pd-brand-sep { height: 26px; }
    body.product-page .pd-brand-richtech { height: 34px; }
    body.product-page .pd-brand-note { margin-top: 9px; font-size: 0.76rem; line-height: 1.58; }
}
/* ===== BRAND-LOCKUP-127 结束 ===== */