/* Topzir theme — semantic layout aligned to design tokens */
/* tz-list-card-1513 */

:root {
  --color-primary: #0dcfdb;
  --color-primary-hover: #30dbe6; /* D3 v1.0: 以已注册 V1.1 为基准（原 #30dae5 主题孤例；Pixso 原始 #30DBE5 备注 D3） */
  --color-text: #686868;
  --color-text-secondary: #8d8d8d; /* D3 v1.0: 原 #9a9a9a 主题孤例，Pixso/Bricks/V1.1 一致 #8D8D8D */
  --color-text-muted: #c5c5c5; /* D3 v1.0 新增: Pixco fill---color-text-muted 实测；占位/禁用态文字 */
  --color-text-dark: #2a2a2a;
  --color-divider: #ececec; /* D3 v1.0: 原 #d8d8d8 主题孤例；映射 Pixco border-subtle / Bricks --color-border-subtle */
  --color-cert-fda: #1c3d5b;
  --color-bg: #ffffff;
  --color-bg-muted: #f9f9f9; /* D3 v1.0: Pixco bg-canvas 源值优先（原 #f8f8f8）；跨路线注册候选已报批 */
  --color-border: rgba(0, 0, 0, 0.08);
  --overlay-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); /* D3 v1.0 新增: 详情页图片遮罩（与 teal 渐变语义无关） */
  --font: "Noto Sans SC", "Noto Sans SC-Regular", "Segoe UI", sans-serif;
  --font-medium: "Noto Sans SC", "Noto Sans SC-Medium", sans-serif;
  --font-bold: "Noto Sans SC", "Noto Sans SC-Bold", sans-serif;
  --font-thin: "Noto Sans SC", "Noto Sans SC-Thin", sans-serif;
  --font-light: "Noto Sans SC", "Noto Sans SC-Light", sans-serif;
  /* type scale (D3 v1.0 §2.1) — 新样式排版一律 fs/lh/ls+字体变量组合；weight 用字面量；存量样式随切片渐进迁移 */
  --fs-display-1: 64px;
  --fs-display-2: 48px;
  --fs-display-3: 42px;
  --fs-heading-1: 32px;
  --fs-heading-2: 24px;
  --fs-tab-label: 24px; /* 批2: DTC type-ui-button-2 实测值，待 D3 附录收编 */
  --fs-body: 16px;
  --fs-eyebrow: 14px;
  --fs-caption: 12px;
  --lh-display: 1.2;
  --lh-body: 1.3;
  --lh-ui: 1;
  --ls-display: -0.05em;
  --ls-body: -0.015em;
  /* batch-3：--gap-spec-label 删除——DTC 22px 判设计源误差（Denny 09-28 F-01 关账），间距权威改 8 倍数规范；
     间距裸值合法依据=D3 v1.0 §3「不建间距 token」旧裁定——该裁定已被 D3 v1.1（2026-10-13 R-UID-1 窗八裁）显式翻正：
     新样式 8 倍数档一律 var(--space-*)，非 8 倍微调族按 v1.1 §3.4 豁免注理由；存量裸值不回改，随切片触碰渐进迁移（D3 §3.1）。 */
  --ls-caption: -0.01em;
  --container: min(1920px, 100%);
  --header-container: min(1440px, calc(100% - 48px));
  /* 间距 token 族（D3 v1.1 §3.1，Denny 10-13 裁 A1/A2；本批纯定义零引用=存量不回改，新样式自下一消费切片起走 token） */
  --space-xs: 8px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 48px;
  --space-xxl: 64px;
  --space-3xl: 80px;
  /* 两级内容容器（D3 v1.1 §3.3，Denny 10-13 裁 C1/C2；wide=网格/卡片型，narrow=阅读/单栏型；通栏 --container=Section 层职责保留；新页面工单必选其一） */
  --wrapper-wide: min(1280px, 100%);
  --wrapper-narrow: min(1024px, 100%);
  --header-h: 96px; /* N1 批1 D3 报批✅（Denny 10-04）：72→96=稿件条高/热区（token 绑定表 §1/§3③；@768 断点块 64px 不动=移动端批语境） */
  --radius: 4px;
  --home-col-left: 624fr;
  --home-col-right: 1272fr;
  --home-col-gap: 24px;
  --header-actions-gap: 32px;
  --nav-item-gap: 32px;
  --shadow-nav: 0 8px 32px rgba(0, 0, 0, 0.08); /* N1 批1 D3 报批✅：α 10%→8%（DSL effect 524:1734+DTC-main §4 实证；is-scrolled 唯一消费者=T2 目检观感） */
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.08);
  --teal-gradient: linear-gradient(135deg, #33c4cd 0%, #1a9aa3 100%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.nav-open {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin: 0;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.98);
  transition: box-shadow 0.2s ease;
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-nav);
}

/* =========================================================================
 * N1 批 1 · site-nav v2（数值/token 权威=token-binding-n1-nav.md §3；布局权威=
 * dev-layout-guide-v0.md §2.1 R-1；结构裁决=token 绑定表 §8 DOM 重排，Denny 10-04 拍板）
 * 旧声明族点名清算（v1.2 硬条款，绑定表 §3②）：
 *   - .site-header__inner（旧 :134 justify-content:space-between/gap:20px/min-height）
 *     → 并入 .site-nav__container（§8 裁决=容器唯一内容容器；gap=32 稿件 guide §2.1 平铺四元）
 *   - .site-header__actions（旧 :269）→ G-4 拆并=lang-trigger/CTA 直挂容器（guide 平铺结构，
 *     右组 gap32 由容器统一 gap 承接；--header-actions-gap 在役值 32 恰等 --nav-item-gap，token 保留在役）
 *   - .site-header__lang（旧 :276 28×20 内联 svg）→ .site-nav__lang-trigger（32×32 媒体 img，M1 nav-lang-trigger）
 *   - .site-header__cta（旧 :284 pad10/16/border 1px text-dark/12px）→ .site-nav__cta（pad[10,24]/stroke 2px secondary，§1 豁免注记）
 * 断点 ≤1100/768 块禁动（移动端批语境，stage0 §4）；:3949 选择器改名=§8 同批清算清单。
 * ========================================================================= */

.site-nav__container {
  /* guide §2.1：HORIZONTAL gap32 pad0 align center/center · 1440 × FILL(高=条 96) */
  width: var(--header-container);
  margin-inline: auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--nav-item-gap); /* 32 在役 token（guide 容器 gap32=list gap32 同值） */
}

.site-logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.site-logo__link,
.site-logo a {
  display: inline-flex;
  align-items: center;
}

.site-logo img,
.site-logo .custom-logo {
  max-height: 49px;
  width: auto;
}

.site-nav {
/* N1 批 2 尾账（PM 挂账 10-04）：旧注释「左对齐起排」=绑定表 v1.0 转录失实残留；
   v1.0.1 勘误后 §3①=CENTER 居中分布（DSL 1010:281 复认，批 1 施工已归位 jc=center，见 :184 块注释）。
   留白语义=左右留白对称（居中分布几何推论）。*/
  flex: 1;
  display: flex;
  align-items: stretch;
  align-self: stretch; /* R-1 前提=nav 撑满容器 96，li 高==条高 */
  min-width: 0;
}

.site-nav__list {
  /* §3①/③：FILL 宽 · gap 32 · pad[0,16]；justify-content=**center**（T2 目检指认 1 改裁，2026-10-04 Denny 批复：
     权威=live DSL 1010:281 itemHoriAlign/align=CENTER + DTC 渲染件 computed 实测 jc:center；
     token-binding §3①「左对齐起排」行=派生件转录失实，勘误登记回 PM 重生成（R2 实测优先）。
     旧 :172 center=原值恰与 DSL 一致，批 1 曾按派生件改 flex-start，现归位。留白语义=两侧均留（非右侧全空） */
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--nav-item-gap);
  align-items: stretch;
  justify-content: center;
  padding: 0 16px;
  height: 100%;
  min-height: var(--header-h);
}

.site-nav__list > li {
  /* R-1 热区：HUG 宽 × FILL 高（li 高=条高 96=结构即断言） */
  position: relative;
  display: flex;
  align-items: stretch;
}

.site-nav__list > li > a {
  /* §2 桥接：type-ui-button-3-400=16/400/-0.015em/lh100%（旧 14px 硬编码点名改 token）
     R-1 li 内 gap8=[label+chevron] */
  font-size: var(--fs-body);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  font-family: var(--font);
  font-weight: 400;
  text-transform: uppercase; /* T2 目检返工（Denny 10-14）：主导航文字全大写。R5=表现层 CSS 生成，菜单 title 数据面不动（fallback 态本已硬编码大写=两态一致） */
  transition: color 0.2s ease; /* DTC-main §6=④自定回报：对齐现族 .2s ease（旧 .15s） */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  position: relative;
  white-space: nowrap;
}

.site-nav__list > li > a:hover,
.site-nav__list > li:hover > a,
.site-nav__list > li:focus-within > a,
.site-nav__list > li.is-hover > a {
  /* 绑定表 §3②：字色不变=稿件无条上 hover 变色声明；现行为保留不清零（降级兼容，T2 裁决观感）。
     .is-hover=取证白名单 (a) 等价类（:hover 不可脚本稳定触发） */
  color: var(--color-primary-hover);
}

.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a,
.site-nav__list .current-menu-ancestor > a,
.site-nav__list .current-menu-parent > a,
.site-nav__list .current_page_parent > a,
.site-nav__list .current_page_ancestor > a {
  /* §3② current=字体高亮 --color-primary-hover + 700（旧值 --color-primary/400 点名改，D3 §4 全站 hover 标准色裁决覆盖导航；稿 700 实证） */
  color: var(--color-primary-hover);
  font-weight: 700;
}

.site-nav__chevron {
  /* §3②/③ V-2 升级：default=挂载不可见+translateX(-16)；hover=渐显+归位+（有二级者）rotate 90°。
     R-1=li 内 flex 子（gap8），旧 absolute 挂位（:211 left calc(100%+4px)）点名废。
     资产=媒体库 chevron_right.png（M1；--tz-nav-chevron 由 topzir_nav_assets_css() 注入，
     缺失降级=主题 svg 兜底）；transform-origin=图标中心（DTC-main §6） */
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: var(--tz-nav-chevron, url("../image/icon_arrow_right_default.svg")) center / contain no-repeat;
  display: block;
  opacity: 0;
  transform: translateX(-16px);
  transform-origin: 50% 50%;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.site-nav__list > li:hover > a .site-nav__chevron,
.site-nav__list > li:focus-within > a .site-nav__chevron,
.site-nav__list > li.is-hover > a .site-nav__chevron {
  opacity: 1;
  transform: translateX(0);
}

.site-nav__list > li.menu-item-has-children:hover > a .site-nav__chevron,
.site-nav__list > li.menu-item-has-children:focus-within > a .site-nav__chevron,
.site-nav__list > li.menu-item-has-children.is-hover > a .site-nav__chevron {
  /* 有二级者=右向旋转 90° 成下向；无二级者（CERTIFICATS 等）=纯平移（§3②） */
  transform: translateX(0) rotate(90deg);
}

.site-nav__list > li.current-menu-item > a .site-nav__chevron,
.site-nav__list > li.current_page_item > a .site-nav__chevron,
.site-nav__list > li.current-menu-ancestor > a .site-nav__chevron,
.site-nav__list > li.current_page_parent > a .site-nav__chevron,
.site-nav__list > li.current_page_ancestor > a .site-nav__chevron {
  /* §3② current=无箭头（含 hover 态压制；后置=同权重后来者胜） */
  opacity: 0;
  visibility: hidden;
}

/* =========================================================================
 * N1 批 2 · .site-nav__submenu 面板族（数值唯一源=token-binding §5 lang/§6 normal+§3②桥接行；
 * 布局权威=guide §2.2 R-2/§2.3/§2.5；三态样式账本=guide §1 变体集 126:782 逐字）
 * 基类=normal/lang（批 3 product modifier 接续同骨架）；行族=§2.3 规律。
 * 桥接 R-2：面板 top==条 bottom==96=var(--header-h)，notch 带=面板首段 16px（pad-inline 16 按
 *   DSL langlist 外框实测），父项→面板直落零间隙=热区连续（断言=移动不坠桥，纯 CSS 无 JS 计时）。
 * 显隐=纯 CSS :hover/:focus-within（normal，含 .is-hover 取证等价类=白名单 (a)）；
 *   lang=trigger 与面板跨文件兄弟（header.php vs nav.php）→ :hover 直系不可达，CSS 可达方案=
 *   `.site-header:has(.site-nav__lang-trigger:hover)`（纯 CSS，无 JS 计时器）+ 面板 ::before 透明桥区
 *   （上伸 32px 接 trigger 底缘→trigger 移入面板全程连续命中）；JS 仅做合同授权的点击展开/收起
 *   （§5②「trigger 点击=展开/收起为展示态交互」=白名单 (b) 状态 toggle，main.js）。
 * 移动端护栏：本族几何/显隐圈定 @media(min-width:769px)=延续批 1「桌面优先+抽屉归 ≤768 块」既有
 *   分界（769–1100=批 1 🔴 已裁「移动端适配批」管辖带，本批不新增破绽：面板 hover 才显、行为同批 1）；
 *   ≤768 抽屉=normal 面板的 ul 由旧 :1568 static 块接管（.sub-menu 类名保留=兼容锚根因，walker
 *   包层 div/notch 空 span 在 ≤768 零样式惰性无害）；lang 面板=基线守卫 display:none（抽屉无语言
 *   面板需求；769+ 由后置媒体块同权重覆盖回 flex）。禁动断点块本体未触碰。
 * 批 1 暂留简易面板族（原 :287–325 min-width:160/13px 字/#f7fbfc 底）随本块点名清算退役。
 * ========================================================================= */
.site-nav__submenu--lang {
  display: none; /* ≤768 基线守卫（见上注；769+ 后置媒体块覆盖回 flex） */
}

.site-nav__submenu--product {
  display: none; /* 批 3 同法基线守卫：≤768 抽屉无 mega 需求（移动端批管辖，stage0 §4 禁动断点块=守卫写本块外），769+ 媒体块后置覆盖回 flex */
}

@media (min-width: 769px) {
  .site-nav__submenu {
    /* §5①/§6① 基类：VERTICAL gap0（notch↔列表零间隙=R-2）· HUG 宽（禁固定 138/204，§2.5/工单
       「宽 HUG 禁固定」）· top=96=条底（§3②「面板 top==条 bottom」）· bg=--color-bg（§2 桥接
       bg-elevated↔#FFFFFF）· shadow=--shadow-nav（α8% 批 1 已改值，同族消费） */
    position: absolute;
    top: var(--header-h);
    left: 0; /* normal=左缘跟随父项 li（li=position:relative 定位上下文；§6④/§2.5 裁决，禁照抄稿件 x=393）；--lang 覆盖 */
    width: max-content; /* HUG 合同语义的显式形态（§5①/§6①「宽 HUG 禁固定 138/204」：宽度=最宽行 max-content
                           反推，零固定值。嵌套链 ul width:100%→panel 内蕴=循环百分比→曾取窄行致 Brand Story
                           折行 48 高；显式 max-content + align-items:stretch 行 FILL=标准 HUG 形态） */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* T2 指认处置（Denny 目检 10-04）：白底**不挂 wrapper**——稿件=notch 带透明、白卡从列表层起
       （DSL 1010:317 fills=white+radius4+y16 实证；notch 容器 118:250 fills=None）。阴影留 wrapper
       =整体父级（Denny Pixso 定义复述：无 fill 的箭头区同吃父级阴影）。白箭头垫页面底才可见。 */
    background: transparent;
    box-shadow: var(--shadow-nav);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease; /* DTC-main §6=④自定回报：对齐现 .2s ease 族（批 1 同法） */
    z-index: 20;
  }

  .site-nav__submenu-notch {
    /* R-2 结构带：16px 高桥接/指示区（notch-h 16=§1 免报批裸值行）；icon=媒体库按名
       submenu_notch_icon.png/4683（M1 nav-notch-icon）经 topzir_nav_assets_css() 注入
       --tz-nav-notch；缺件=var(…, none) 零视觉=结构位保留、热区不受损（降级登记）。带自身透明。
       T2 第四轮（Denny 10-04 裁定）：基类=**normal 第二轮原态**（icon 左起 16px，DSL 118:250 摆位，
       你确认「原来的面板位置和箭头位置是正确的」）；第三轮把 w72/居右写进基类=跨 modifier
       污染根因 → 该组参数降级为 --lang 专属 override（下条），normal 另删除 left:32 回基类 left:0。 */
    height: 16px;
    flex-shrink: 0;
    background: var(--tz-nav-notch, none) 16px center / 16px 16px no-repeat; /* icon 左缘=面板左缘+16 → 中心=+24 */
  }

  .site-nav__submenu--lang .site-nav__submenu-notch {
    /* lang 专属（第三轮 Denny 指认2 方案+第四轮「现在很好不用改」确认）：本体容器 w=72+箭头居右
       +flex-end 收边+margin-right 40 → 容器右缘=面板右缘−40，箭头中心=面板右缘−48
       =trigger 中心（实测 Δ=0.0；面板 r=trig.r+32=1529.9）。width 显式=覆盖基类 stretch 语义必需。 */
    width: 72px;
    align-self: flex-end;
    margin-right: 40px;
    background: var(--tz-nav-notch, none) right center / 16px 16px no-repeat;
  }

  .site-nav__submenu .sub-menu,
  .site-nav__submenu-list {
    /* §2.3 行列表：VERTICAL gap8 pad[16,0]。行 FILL 宽=基类 align-items:stretch 承接（勿写
       width:100%——面板 width:max-content 时循环百分比致列宽塌到窄行、长行折行=批 2 实证坑） */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 0;
    margin: 0;
  }

  .site-nav__submenu--normal .sub-menu {
    /* T2 指认1 处置（Denny 目检 10-04 第三轮）：行列表本体容器 fill=白卡（上轮「留透明」致
       行区穿透——brand story 默认行无自身底=透到页面底；Denny 裁=改父级 fill=white 变量）。
       白卡起于列表层、notch 带保持透明 ✓ 与 DSL 118:250 fills=None 不冲突（该节点=notch 区非列表区）。
       radius=④一致性并笔（lang 卡 DSL radius4 同族，normal 稿件列表盒无独立圆角声明=观感统一裁量，登记）。 */
    background: var(--color-bg);
    border-radius: var(--radius);
  }

  .site-nav__submenu--lang .site-nav__submenu-list {
    /* T2 指认 2 处置（第二轮）：lang 白卡=list 层（DSL 1010:317 fills=white(398:1477)+radius 4+y=16
       实证——白卡+圆角起于列表层、notch 带保持透明）。第三轮 Denny 裁=normal 列表层同加白卡
       （穿透修复，见上条），两条规则现同族=观感一致。 */
    background: var(--color-bg);
    border-radius: var(--radius);
  }

  /* ---------- --normal 行族（§6① 变体集三态账本逐字=guide §1） ---------- */
  .site-nav__submenu--normal .sub-menu > li > a {
    /* default=无底 + #686868(--color-text)/400；行 pad[8,16]；label=type-ui-button-3-400
       （§2 桥接：fs-body/lh-ui/ls-body/--font 四件套，禁 13px/硬编码旧值）。
       T2 目检返工（Denny 10-14）：二级导航行全大写=表现层 CSS（R5，数据面 title 不动；
       lang 行族不在此列=语言名保持原生书写，mega l3 产品行不受影响=非本规则目标）。 */
    display: block;
    padding: 8px 16px;
    font-size: var(--fs-body);
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-body);
    font-family: var(--font);
    font-weight: 400;
    color: var(--color-text);
    text-transform: uppercase;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .site-nav__submenu--normal .sub-menu > li > a:hover,
  .site-nav__submenu--normal .sub-menu > li.is-hover > a {
    /* hover=#30DBE6 底 + #FFF 字/400（账本 hover 变体=DSL 126:781+langlist 演示行 1010:352 同 token 实证；
       白字复用 --color-bg 语义=§2 桥接「禁自造 #fff 裸值」行；字重 400=账本 button-3-400 族） */
    background: var(--color-primary-hover);
    color: var(--color-bg);
    font-weight: 400;
  }

  .site-nav__submenu--normal .sub-menu > .current-menu-item > a,
  .site-nav__submenu--normal .sub-menu > .current_page_item > a,
  .site-nav__submenu--normal .sub-menu > li.is-current > a {
    /* current=#F9F9F9(--color-bg-muted) 底 + primary-hover 字/700（账本 current=DSL 126:780；
       §6②=行底 bg-canvas+字 primary-hover；D3 §1 #30DBE6 基准归值（§2「current 变体字 700」行）；
       700=button-3-600→信值不信名（§2 桥接行）；is-hover 双态并置时 current 胜=后置声明同权重后来者胜 */
    background: var(--color-bg-muted);
    color: var(--color-primary-hover);
    font-weight: 700;
  }

  /* ---------- --lang 行族（§5③；hover=§5② 同族推导） ---------- */
  .site-nav {
    position: relative; /* lang 面板定位上下文（面板在 nav 内=与 list 平级；纯 CSS 可达见下） */
  }

  .site-nav__submenu--lang {
    /* §5① 裁决条款=「按 trigger 右缘对齐实现，禁照抄稿件绝对 x」（1461..1665/内收 15=改正宽度前
       摆位快照，guide §2.5 点名）。实现=纯 CSS 几何直算：定位上下文=nav（trigger 左缘=nav 右缘+
       容器 gap 32，trigger 右缘=nav 右缘+32+32，与 CTA HUG 宽无关——trigger 排在 CTA 前，其左缘
       只依赖 list 右缘）→ right=−(gap+trigger 宽)=面板右缘≡trigger 右缘。零 JS 位移。
       T2 第三轮（Denny 10-04）=面板当前位置再右移 32px（−64→−96）：与 --normal 同批偏移，
       配合 notch w72 箭头居右=「对准 trigger 中心」的摆位方案；Δ 实测入账待目检裁定。
       ⚠️ 与合同 §5①/B6 旧期望（右缘==trigger 右缘）差=+32 → 偏差表登记，PM T1.5 归案。 */
    left: auto;
    right: calc(-1 * (var(--nav-item-gap) + 64px));
  }

  .site-nav__submenu--lang::before {
    /* R-2 透明桥区：trigger 底缘(≈64)→面板顶(96)=32px header 空白带；面板上伸 32px 透明带使
       trigger→面板移动轨迹 hover 连续（:has 路径与自:hover 路径同命中=不坠桥、零 JS 计时器）。
       宽随面板（HUG≈204 覆盖 trigger x ✓ DSL trigger 1469..1501 ⊂ 1461..1665） */
    content: "";
    position: absolute;
    top: -32px;
    left: 0;
    right: 0;
    height: 32px;
  }

  .site-nav__lang-item > a {
    /* §2.3 行：HORIZONTAL gap8 pad[0,24]（lang-row-pad-inline 24=§1 免报批行）FILL 宽×HUG 高 32。
       T2 指认 3 处置：**主轴左排（不设 justify-content）**——DSL 1010:318=counterAlign:center
       （交叉轴=垂直居中）+ justify=None（主轴默认 MIN=左起排）+ 内容位实证（旗 x=24==pad-left、
       label x=64==24+32+gap8）。合同 §5①「center」=交叉轴语义，我前版误读成主轴居中（D-3 注记归案）。
       行参数只核父级=flex 规律（Denny 方法裁定 10-04）。
       ⚠️ A-1 改判（批 3 工单点名必做，Denny 10-05 重批；token-binding v1.1 §5③）：label 档
       =**12px caption 族**（--fs-caption+--ls-caption+--lh-ui+--font；复认=DSL 1010:317 子树 13 行
       TEXT 全引 382:1366/1363 caption-300/600、零节点引 button-3；原 v1.0「button-3-400(16px)」
       =转录失实作废）。面板宽/高账归 204/544（12px 反算 116px 恰等最宽行）。仅 --lang 行族=
       禁入基类纪律（A-4 对偶；normal 面板 16px 不动=B11 normal fs==16px 回归项）。 */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    min-height: 32px;
    font-size: var(--fs-caption);
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-caption);
    font-family: var(--font);
    font-weight: 400;
    color: var(--color-text);
    transition: background 0.2s ease, color 0.2s ease;
  }

  .site-nav__lang-flag {
    /* 旗 32×32 FIXED（§5①/flag-size=§1 免报批裸值）；is-missing=媒体库缺件降级占位（img 不产） */
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: block;
    overflow: hidden;
  }

  .site-nav__lang-flag.is-missing {
    background: var(--color-border); /* 占位灰=边框 token 复用（非新色值，R4；ph 兜底视觉） */
  }

  .site-nav__lang-flag img {
    width: 32px;
    height: 32px;
    display: block;
  }

  .site-nav__lang-item > a:hover,
  .site-nav__lang-item.is-hover > a {
    /* ⚠️ 推导依据登记（§5②+DTC-main §6 强制条款）：lang 行 hover 态稿件未画 →
       按 normal 行 default↔hover 同族推导=primary-hover 底+--color-bg 字/400；
       DSL 佐证=langlist 内 hover 演示行 1010:352 fills=[style:398:1469]+label white(398:1477)
       与 normal 变体集 hover 126:781 同 token 组合（同族推导的交叉证据）。 */
    background: var(--color-primary-hover);
    color: var(--color-bg);
  }

  .site-nav__lang-item.current-lang > a {
    /* current=English 行（§5②「加粗族，style 382:1363 差异实证」=caption-600→700 信值不信名系）；
       底/字=normal current 同账本（DSL 1010:318 fills=bg-canvas(457:547)+label primary-hover(398:1469)
       ——三面板 current/hover 变体同 token 组合实证）。
       A-1（批 3 必做行）：382:1363=caption-600 实证 → 字体族=--font-bold（D3 §2 caption-600 行）；
       12px 基=上行 .site-nav__lang-item > a 族改判后自然继承。 */
    background: var(--color-bg-muted);
    color: var(--color-primary-hover);
    font-weight: 700;
    font-family: var(--font-bold);
  }

  /* ---------- --product 行族（批 3 · mega；§4① 层级链=panel>cols>col>group=[icon+column] ----------
   * A-5 双层语义（v1.1 §5① 批 3 直接引用行）=基类 wrapper 透明+阴影已在；白卡挂**内容层**
   *   =.site-nav__submenu-panel（DSL 1010:513 fills=None+effects 524:1734 实证；1010:473
   *   fills=460:574(bg-elevated→--color-bg §2 桥接)+radius4）。逐节点核 fills=纪律回灌第 2 条。
   * HUG 防坑配方（v1.1 §4①）=面板 width:max-content（基类已在）+全链子层**零 % 宽**+stretch 承接；
   *   行文本 white-space:nowrap → 列宽=内容 max-content（改名跟随=数据驱动，V-4 禁固定 794）。
   * 装饰线（R5 零 DOM=guide §3-4「border-left/伪元素」点名形态）：
   *   竖线 1×305 → `:col+:col` border-left+pad-left 16（账=gap16+线1+pad16=33 档 ≡ DSL
   *   [gap|线|gap]；列宽和+4gap+2线=762 复算=guide §2.4 宽账 x=368/619 逐档吻合）；
   *   横线 218×1 → materials 列 `:group+:group` border-top+pad-top 16（=184+16+1+16+88=305
   *   ≡ DSL 列高 305/线 y200/组2 y217 三值互证）。相邻伪类=空值降级时线随 DOM 缺席自动不现。
   * 线色=--color-border rgba(0,0,0,.08)（稿件 black-0.1=10% 无 D3 token；复用 border 语义=
   *   R4 禁自创色值+批 2 is-missing 同 token 先例；Δ2% 登记偏差表 D-3，T2 目检观感）。
   * 字号账本（实测优先，冲突全证据登记偏差表 D-2/D-3，④不自裁合同）：
   *   l2-header=--fs-heading-2 24px/700（DSL 1010:480/493/976/502 全引 386:1380=button-2-600，
   *   D3 §2=24px/-0.015em/lh100%；box h=24 行位账合；§4③「label-600 12px」与 24 行位账自相矛盾
   *   疑转录失实）；l3=--fs-body 16px（DSL l3 TEXT 17 引 386:1389=button-3-400（16/lh100%→行高
   *   恰 16=§4③「行高 16」账成立的唯一形态；「--lh-ui×fs12=16」算式 12×1=12≠16 失实）+
   *   D2C 渲染件实测 font-size:16px+guide §2.4「L3 行=TEXT 直挂」）。 */
  .site-nav__submenu--product .site-nav__submenu-panel {
    /* §4①：VERTICAL gap16 pad16（DSL 1010:473 autoLayout 逐字） */
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: var(--color-bg);
    border-radius: var(--radius);
  }

  .site-nav__submenu-cols {
    /* §4①：HORIZONTAL gap16（DSL 1010:474）；行高上限=align-items:stretch 默认（线随行高） */
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: max-content; /* HUG 链显式形态（§4① 防坑配方同法，禁 % 宽） */
  }

  .site-nav__submenu-col {
    /* §4①：col VERTICAL gap16（guide §2.4；materials 列=双 group+横线瀑布） */
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .site-nav__submenu-col + .site-nav__submenu-col {
    /* 竖分隔线（R5=CSS 生成，DOM 计数==0 §7-3 断言） */
    border-left: 1px solid var(--color-border);
    padding-left: 16px;
  }

  .site-nav__submenu-group {
    /* §4①：group HORIZONTAL gap16 = [icon + column]；align-items:flex-start
       （Rule F 推断①=DSL boxes 实测 icon y=0/column y=0 顶对齐；autoLayout align 字段=
       主轴语义，交叉轴先例=批 2 lang 行 T2 指认 3 之辨；目检 s2 截图顶对齐一致） */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }

  .site-nav__submenu-group + .site-nav__submenu-group {
    /* materials 列横线（218×1=列宽随行宽 stretch；账见上块注释） */
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
  }

  .site-nav__submenu-col-icon {
    /* icon 32×32 FIXED（§4③ group icon 行；缺件期=ph-icon-32x32 按名占位，is-missing 兜底
       =批 2 lang 旗同族先例 :480） */
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: block;
    overflow: hidden;
  }

  .site-nav__submenu-col-icon.is-missing {
    background: var(--color-border);
  }

  .site-nav__submenu-col-icon img {
    width: 32px;
    height: 32px;
    display: block;
  }

  .site-nav__submenu-column {
    /* §4①：column VERTICAL gap16 = label(24 高) + l3×n(16 高)（DSL 1010:479） */
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .site-nav__submenu-column .label-l2-header {
    /* 账本见上块注释（D-1 登记：合同 §4③ label-600 12px vs DSL 实测 button-2-600 24px）；
       ⚠️ 10-14 翻正：原「text-transform 不发明」行=Denny T2 目检返工裁**mega 四产品线列头全大写**
       （表现层 CSS，R5=数据面 term name 保持 Title Case 不动；下属 l3 产品行保持原样不加大写=
       .site-nav__submenu-l3-item 无 text-transform 声明天然满足）。
       字色=§2 桥接 text-primary 统一基线；⚠️ DSL 稿件特例=**仅 zirconia 列头** fills 青
       (398:1469)（materials/tools/stain-glaze 三列头=398:1478 灰实证；程序化复扫 4 节点
       1 青 3 灰）——青=「当前栏目」语义 or 列头强调设计意图无法从 DSL 判定→不自裁、
       不做逐列特例 CSS，登记偏差表 D-4 交 T2 目检裁决观感。 */
    font-size: var(--fs-heading-2);
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-body);
    font-family: var(--font-bold);
    font-weight: 700;
    color: var(--color-text);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .site-nav__submenu-l3-item {
    /* §4③ 行几何：行高 16（=16px×lh100% 衍生豁免）；无 pad；nowrap=HUG 列宽账 */
    font-size: var(--fs-body);
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-body);
    font-family: var(--font);
    font-weight: 400;
    color: var(--color-text);
    white-space: nowrap;
    transition: color 0.2s ease; /* DTC-main §6=④自定回报同批 1/2 族 */
  }

  .site-nav__submenu-l3-item:hover,
  .site-nav__submenu-l3-item.is-hover {
    /* ⚠️ 推导依据登记（§4② 强制条款）：稿件 l3 无独立 hover 声明 → 按 text 族推导=
       仅字色 --color-primary-hover（DSL 佐证 1010:486 style:516:1702=--type-ui-link-hover）；
       normal 行**底色族不适用**（§4② 明文=guide §2.3 只言 normal）。
       T2 预检改判（Denny 10-05）：原 1010:482 青+700 行误读为 hover 演示，实际=
       「当前所在位置」直达行 current 演示样态 → 账本归下行 .is-current（482 引用随迁）。 */
    color: var(--color-primary-hover);
  }

  .site-nav__submenu-l3-item.is-current {
    /* 「当前所在位置」行态（T2 预检微调 10-05，Denny 指认）：详情页=singular 产品页时
       对应 l3 行高亮。账本=稿件演示行 1010:482（fills 398:1469 primary-hover + style
       386:1379=button-3-600→D3 §2 信值不信名 700）；**无底色**=稿件行盒 fills=None
       （逐节点核 fills=纪律回灌第 2 条；normal 面板 current 的 bg-canvas 底色族=行 pad
       形态专属，mega 行=无 pad 文本族不适用=§4② 同判）。后置声明=hover+current 并置时
       current 胜（同权重后来者胜，批 2/normal 先例）。判据=行 id==queried object id
       （数据驱动跟随改名/新增；topzir_render_product_mega() 注释同处）。 */
    color: var(--color-primary-hover);
    font-weight: 700;
    font-family: var(--font-bold);
  }

  .site-nav__submenu--product .site-nav__submenu-notch {
    /* notch 对准父项中心=§4① 合同明文（本批域；批 2 遗言 §2 前置③）。
       实现=JS 注入 --tz-mega-notch-x（main.js：li 宽/2−icon 宽/2；li 宽=HUG 动态值，
       纯 CSS 在面板坐标系不可得=④实现裁量留痕，零 hover 逻辑零计时器=R-2 不破）。
       兜底=基类左起 16px（JS 未执行/极老浏览器=降级合法，同 notch 缺件 var(none) 系）。
       禁入基类纪律（A-4）：本 override 仅 --product 作用域；lang w72/normal 原态不动=B19e
       隔离断言面。 */
    background: var(--tz-nav-notch, none) var(--tz-mega-notch-x, 16px) center / 16px 16px no-repeat;
  }

  /* ---------- 显隐（两态=hidden↔shown；取证=注水白名单 (a) 等价类） ---------- */
  .site-nav__list > li:hover > .site-nav__submenu,
  .site-nav__list > li:focus-within > .site-nav__submenu,
  .site-nav__list > li.is-hover > .site-nav__submenu,
  .site-header:has(.site-nav__lang-trigger:hover) .site-nav__submenu--lang,
  .site-header:has(.site-nav__lang-trigger:focus) .site-nav__submenu--lang,
  .site-nav__submenu--lang:hover,
  .site-nav__submenu--lang:focus-within,
  .site-nav__submenu--lang.is-open,
  .site-nav__submenu.is-hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .site-nav__lang-trigger {
    position: relative; /* 触发器可聚焦态描点（focus 显面板的视觉锚） */
  }

  .site-nav__lang-trigger[aria-expanded="true"] {
    /* 点击展开态=展示态交互视觉反馈（零新色值：复用 divider token 描边语义） */
    outline: 2px solid var(--color-border);
    outline-offset: 2px;
  }
}

.site-nav__lang-trigger {
  /* §3③：32×32 媒体 img（flag_us_trigger.png/4680）；旧 .site-header__lang（28×20 内联 svg+border 1px divider）退役 */
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  line-height: 0;
  cursor: pointer;
  overflow: hidden;
}

.site-nav__lang-trigger img {
  width: 32px;
  height: 32px;
  display: block;
}

.site-nav__cta {
  /* §1 豁免注记行（Denny 10-04 定式=组件高度豁免：h32 邻近 lang-trigger 定高，8 倍数让位）
     §3③ 按稿改：pad[10,24] + stroke 2px --color-text-secondary + radius（旧 .site-header__cta pad[10,16]/border 1px text-dark 点名废） */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 32px;
  padding: 10px 24px;
  border: 2px solid var(--color-text-secondary);
  border-radius: var(--radius);
  color: var(--color-text);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.site-nav__cta .label-cta {
  /* type-ui-button-3-600 信值不信名 → 700（§2 桥接行）；12px=--fs-caption */
  font-size: var(--fs-caption);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-body);
  font-family: var(--font-bold);
  font-weight: 700;
}

.site-nav__cta:hover {
  background: var(--color-primary-hover); /* 收尾批: hover 统一语义延续 */
  border-color: var(--color-primary-hover);
  color: var(--color-bg); /* §2 桥接行：hover 白字复用 bg 语义，禁 #fff 裸值（AR4） */
}

.site-nav__toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  padding: 8px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.site-nav__toggle span {
  display: block;
  height: 2px;
  background: var(--color-text-dark);
  width: 100%;
}

/* Hero */
.hero {
  position: relative;
  background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
  overflow: hidden;
}

.hero__inner {
  width: var(--container);
  margin-inline: auto;
  position: relative;
  min-height: clamp(420px, 70vh, 640px);
  padding: 48px 0 64px;
}

.hero__slide {
  display: none;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
  align-items: center;
}

.hero__slide.is-active {
  display: grid;
  animation: fadeIn 0.35s ease;
}

.hero__dots {
  position: absolute;
  left: 0;
  bottom: 24px;
}

.hero__card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(3px);
  padding: 32px 28px;
  max-width: 480px;
}

.hero__title {
  font-family: var(--font-thin);
  font-weight: 100;
  font-size: clamp(36px, 5vw, 48px);
  letter-spacing: -0.05em;
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: 12px;
}

.hero__subtitle {
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.05em;
  line-height: 1.2;
  color: var(--color-text-dark);
  margin-bottom: 16px;
}

.hero__text {
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 24px;
}

.hero__media {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__media img {
  width: 100%;
  max-height: 480px;
  object-fit: contain;
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 20px;
  color: var(--color-primary);
  font-size: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-family: var(--font-bold);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  padding: 10px 24px;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.btn:hover {
  opacity: 0.92;
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
}

.btn--primary:hover {
  background: var(--color-primary-hover); /* 收尾批: 主按钮 hover 色反馈（opacity 反馈保留于 .btn:hover） */
}

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  padding-inline: 0;
}

.btn--ghost:hover {
  color: var(--color-primary-hover); /* 收尾批: 幽灵按钮 hover 文字色统一 */
}

.btn--outline {
  background: #fff;
  color: var(--color-text);
  border: 1px solid var(--color-divider);
}

.carousel-dots {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 60px;
  height: 8px;
  margin-top: 20px;
}

.carousel-dots button {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  background: rgba(26, 26, 26, 0.5);
  cursor: pointer;
  flex: 0 0 auto;
}

.carousel-dots button.is-active {
  width: 24px;
  background: var(--color-primary-hover);
}

.carousel-slide {
  display: none;
}

.carousel-slide.is-active {
  display: block;
  animation: fadeIn 0.35s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Sections */
.section {
  padding: 72px 0;
}

.section--tight {
  padding: 48px 0;
}

.section--muted {
  background: var(--color-bg-muted);
}

.section__title {
  font-family: var(--font-thin);
  font-weight: 100;
  font-size: 32px;
  letter-spacing: -0.05em;
  line-height: 1.2;
  color: var(--color-text);
  max-width: 920px;
  margin: 0;
}

.section__lead {
  margin-top: 8px;
  font-size: 16px;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--color-text);
  max-width: 820px;
}

.section-head {
  width: var(--container);
  margin-inline: auto;
  margin-bottom: 36px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.section-head__mark {
  width: 16px;
  height: 16px;
  background: url("../image/IconArrowDown16.svg") center / contain no-repeat;
  flex-shrink: 0;
  margin-top: 8px;
}

/* About cards */
.about-grid {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.about-card {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  background: var(--teal-gradient);
}

.about-card--dark {
  background: var(--color-primary);
}

.about-card__label {
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.about-card__title {
  font-family: var(--font-medium);
  font-size: 28px;
  letter-spacing: -0.04em;
  margin-bottom: 12px;
  color: #fff;
}

.about-card__text {
  font-size: 15px;
  line-height: 1.4;
  max-width: 36ch;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.92);
}

.about-card .btn {
  align-self: flex-start;
  background: #fff;
  color: var(--color-primary);
}

/* Products */
.products-block {
  width: var(--container);
  margin-inline: auto;
}

.product-tabs {
  display: flex;
  justify-content: center;
  align-items: center; /* Denny 10-15 晚小补②：tab 在容器内垂直居中（旧 flex-end=贴底离下一模块过近） */
  gap: 64px;
  padding: 48px 0; /* Denny 10-15 晚小补：上下边距 48（旧=上48+margin-bottom24 账法致底部偏窄）；稿下 pad48=本 padding 兑现 */
  /* Denny 10-15 晚小补①：删除通栏 1px 灰下划线（稿 48:7730 无底线，Active 项自带 2px 下划线已足）。 */
  border-bottom: 0;
}

.product-tabs__btn {
  position: relative;
  border: 0;
  background: none;
  padding: 0 0 14px;
  font-size: 24px;
  font-family: var(--font);
  font-weight: 400;
  color: var(--color-text-secondary); /* P4（车次#1 遗言 G-5/C-0 迁移注记兑现）：#8d8d8d 硬编码→既有 token（同值），R4 */
  cursor: pointer;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

/* P4（车次#1 遗言 G-5 三态=稿 225:881 hover 样已补定版）：Default text-secondary → Hover --color-primary（下划线保持隐藏态）→ Active primary-hover+2px 下划线（下方 is-active 既有=不动）。 */
.product-tabs__btn:hover:not(.is-active) {
  color: var(--color-primary);
}

.product-tabs__btn.is-active {
  color: var(--color-primary-hover);
  font-family: var(--font-bold);
  font-weight: 700;
}

.product-tabs__btn.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-primary-hover);
}

.product-panels [data-tab-panel] {
  display: none;
}

.product-panels [data-tab-panel].is-active {
  display: block;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.product-card {
  border: 1px solid var(--color-border);
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: box-shadow 0.2s ease;
  /* §6f 件③（稿 48:7752 卡容器 radius 4）：卡容器补圆角；media 顶角随 overflow:hidden 裁切（实测补令单「目检定形」分支=卡 overflow 原 visible，media 方角不被父圆角裁→补裁） */
  border-radius: var(--radius);
  overflow: hidden;
}

.product-card:hover {
  box-shadow: var(--shadow-card);
}

.product-card__media {
  /* §6e 件①（D-9 终值=稿 624×216 槽比 2.89:1 横向槽；注册档 topzir-card-home 1248×432 同批翻转）。
     勘正（10-16 A8 尾批）：令单原文「aspect-ratio: 216/624」=宽高转写笔误——CSS aspect-ratio
     语法=宽/高，216/624=竖槽 1:2.89（实测撑 media 盒 402×1162=卡片整列拉长，Denny A8 目检捕获）；
     槽语义权威=D-9 横版 2.89:1+源件 1248×432 横版，正解=624/216。 */
  aspect-ratio: 624 / 216;
  background: linear-gradient(160deg, #33c4cd 0%, #1c8f97 100%);
  position: relative;
  overflow: hidden;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* §6f 件①（Denny 10-16 T2 裁「图片上不应该存在文字」，稿 48:7742 图区无文字层）：
   .product-card__overlay / __overlay-title / .product-card__tags 三块删除（模板侧 overlay 块同步删）。 */

.product-card__body {
  /* §6f 件②（稿 48:7746 body pad[16,32,16,32]+gap 8；合成=图→标题16/标题→描述8/描述→link 8+16=24/link→卡底16+16=32） */
  padding: 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.product-card__title {
  margin: 0; /* §6f 件②根因项：h3 UA margin(24px) 未复位=图→标题/标题→描述撑偏（实测 40/32 vs 稿 16/8）；排版值面 1209 域不动，仅间距归位 */
  font-size: 24px;
  font-family: var(--font-light);
  font-weight: 300;
  color: var(--color-text);
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.product-card__excerpt {
  font-size: 16px;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  flex: 1;
}

.product-card__link {
  color: var(--color-primary);
  font-size: 14px;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
}

/* P4（车次#1 遗言 §4-2/O-2）：MORE DETAIL hover 变色=全站 hover 标准 --color-primary-hover（09-27 裁决），禁硬编码。 */
.product-card__link:hover {
  color: var(--color-primary-hover);
}

/* §6f 件②（稿 48:7746 link-wrap padding[16,0,16,0]）：与稿 DOM 同构的包裹层；
   合成账=描述→link 8(body gap)+16=24／link→卡底 16(wrap)+16(body pad)=32。
   flex=Y=Rule A 默认（令单未判 flex=N）；link 转块级盒=消除行盒 strut 3px 假隙，pad 合成精确。 */
.product-card__link-wrap {
  display: flex;
  padding: 16px 0;
}

.products-banner {
  margin-top: 24px;
  background: var(--color-primary);
  color: #fff;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
}

.products-banner h3 {
  margin: 0 0 8px;
  font-family: var(--font-medium);
  font-size: 22px;
  letter-spacing: -0.03em;
  color: #fff;
}

.products-banner p {
  margin: 0;
  font-size: 15px;
  opacity: 0.95;
}

/* Blog cards */
.post-grid {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.post-card {
  border: 1px solid var(--color-border);
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease;
  overflow: hidden;
}

.post-card:hover {
  box-shadow: var(--shadow-card);
}

.post-card__media {
  aspect-ratio: 16 / 10;
  background: var(--color-bg-muted);
  overflow: hidden;
}

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.post-card__title {
  font-size: 16px;
  font-family: var(--font-medium);
  color: var(--color-text-dark);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.post-card__meta {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.post-card__excerpt {
  font-size: 14px;
  line-height: 1.35;
  flex: 1;
}

/* Certificates */
.certs {
  width: var(--container);
  margin-inline: auto;
}

.certs__layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: center;
}

.certs__badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cert-badge {
  background: var(--color-cert-fda);
  color: #fff;
  min-height: 160px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.cert-badge--light {
  background: #fff;
  color: var(--color-cert-fda);
  border: 1px solid var(--color-divider);
}

.cert-badge__label {
  font-size: 28px;
  font-family: var(--font-medium);
  letter-spacing: -0.04em;
}

.cert-badge__sub {
  font-size: 14px;
  margin-top: 8px;
  opacity: 0.9;
}

.certs__copy h3 {
  margin: 0 0 12px;
  font-size: 24px;
  font-family: var(--font-medium);
  color: var(--color-text);
}

.certs__copy p {
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 16px;
}

.certs__nav {
  display: flex;
  gap: 12px;
  align-items: center;
}

.certs__nav button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-divider);
  background: #fff url("../image/PreviousButtondarkdefault.svg") center / 20px no-repeat;
  cursor: pointer;
}

.certs__nav button[data-next] {
  background-image: url("../image/Nextbuttondarkdefault.svg");
}

/* Exhibition */
.exhibition {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
}

.exhibition__feature {
  min-height: 320px;
  background: var(--color-bg-muted);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  color: #fff;
}

.exhibition__feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exhibition__feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.55));
}

.exhibition__feature > * {
  position: relative;
  z-index: 1;
}

.exhibition__feature h3 {
  margin: 0 0 8px;
  font-size: 28px;
  font-family: var(--font-medium);
  color: #fff;
}

.exhibition__side {
  display: grid;
  gap: 16px;
}

.exhibition-card {
  border: 1px solid var(--color-border);
  padding: 20px;
  background: #fff;
}

.exhibition-card h4 {
  margin: 0 0 8px;
  font-size: 18px;
  font-family: var(--font-medium);
  color: var(--color-text-dark);
}

.exhibition-card p {
  font-size: 14px;
  line-height: 1.35;
}

/* FAQ + CTA */
.faq-cta {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: start;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--color-border);
}

.faq-item.is-open {
  background: #fff;
  box-shadow: var(--shadow-card);
}

.faq-item__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 16px 32px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-light);
  font-weight: 300;
  font-size: 32px;
  color: var(--color-text);
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.faq-item.is-open .faq-item__toggle {
  color: var(--color-primary);
}

.faq-item__question {
  flex: 1;
  min-width: 0;
}

.faq-item__icon {
  width: 16px;
  height: 16px;
  background: url("../image/icon_arrow_down_default.svg") center / contain no-repeat;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(180deg);
  background-image: url("../image/icon_arrow_up_hover.svg");
}

.faq-item__panel {
  display: none;
  padding: 0 32px 16px 64px;
  font-size: 16px;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.faq-item.is-open .faq-item__panel {
  display: block;
}

.lead-box {
  background: #fff;
  border: 1px solid var(--color-border);
  padding: 28px;
}

.lead-box h3 {
  margin: 0 0 12px;
  font-size: 32px;
  font-family: var(--font-light);
  font-weight: 300;
  color: var(--color-text-dark);
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.lead-box p {
  font-size: 16px;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin-bottom: 20px;
}

.lead-form {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
}

.lead-form input[type="email"],
.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--color-divider);
  padding: 14px 16px;
  font: inherit;
  color: var(--color-text);
  background: #fff;
}

.lead-form input[type="email"] {
  flex: 1;
  min-height: 64px;
  font-size: 24px;
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: -0.05em;
  padding: 16px 24px;
}

.lead-form .btn {
  width: auto;
  flex-shrink: 0;
  padding: 16px 48px;
}

.contact-form .btn {
  width: 100%;
}

.form-notice {
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 14px;
  border: 1px solid var(--color-divider);
}

.form-notice--ok {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.form-notice--err {
  border-color: #c44;
  color: #c44;
}

/* Footer */
.site-footer {
  background: #f9f9f9;
  padding: 56px 0 40px;
  margin-top: 40px;
}

.site-footer__inner {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.1fr 1.35fr 1.7fr 1.1fr;
  gap: 36px;
  align-items: start;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.site-footer__social {
  display: flex;
  gap: 10px;
}

.site-footer__social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #5a5a5a;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.site-footer__social a:hover {
  background: var(--color-primary-hover); /* 收尾批: hover 统一 */
}

.site-footer__copy {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--color-text);
  line-height: 1.4;
}

.site-footer__heading {
  margin: 0 0 16px;
  font-size: 18px;
  font-family: var(--font-medium);
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.site-footer__heading--spaced {
  margin-top: 28px;
}

.site-footer__subheading {
  margin: 0 0 8px;
  font-size: 14px;
  font-family: var(--font-bold);
  color: var(--color-text);
}

.site-footer__col a,
.site-footer__col span {
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.45;
}

.site-footer__col a {
  display: inline-block;
  margin-bottom: 8px;
}

.site-footer__col a:hover {
  color: var(--color-primary-hover); /* 收尾批: hover 统一 */
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-footer__contact li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
}

.site-footer__contact img {
  margin-top: 2px;
}

.site-footer__contact a {
  margin-bottom: 0;
}

.site-footer__product-groups {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 20px;
}

/* Inner pages */
.page-hero {
  padding: 48px 0 24px;
  background: linear-gradient(180deg, #fafafa, #fff);
}

.page-hero__inner {
  width: var(--container);
  margin-inline: auto;
}

.page-hero h1 {
  margin: 0;
  font-family: var(--font-thin);
  font-weight: 100;
  font-size: clamp(32px, 4vw, 44px);
  letter-spacing: -0.05em;
  color: var(--color-text);
}

.page-content,
.content-wrap {
  width: var(--container);
  margin: 0 auto 64px;
}

.entry-content {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
}

.entry-content h2,
.entry-content h3 {
  color: var(--color-text-dark);
  letter-spacing: -0.03em;
}

.entry-content img {
  margin: 16px 0;
}

.product-detail__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}

.product-detail__gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

.product-detail__section {
  margin-bottom: 36px;
}

.product-detail__section h2 {
  margin: 0 0 12px;
  font-size: 22px;
  font-family: var(--font-medium);
}

.archive-grid {
  width: var(--container);
  margin: 0 auto 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.pagination {
  width: var(--container);
  margin: 0 auto 64px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--color-divider);
  font-size: 14px;
}

.pagination .current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.contact-form {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-family: var(--font-medium);
}

.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

.empty-state {
  width: var(--container);
  margin: 40px auto;
  padding: 40px;
  border: 1px dashed var(--color-divider);
  text-align: center;
}

/* Responsive */
@media (max-width: 1100px) {
  .product-grid,
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__inner,
  .about-grid,
  .certs__layout,
  .exhibition,
  .faq-cta,
  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .hero__slide.is-active {
    grid-template-columns: 1fr;
  }

  .site-footer__product-groups {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --page-gutter: 16px;
    --container: 100%;
    --header-container: 100%;
    --header-h: 64px;
  }

  .site-header__inner {
    flex-wrap: wrap;
  }

  .site-nav {
    order: 3;
    width: 100%;
    justify-content: flex-start;
  }

  .site-nav__toggle {
    display: flex;
  }

  .site-nav__list {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    background: #fff;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    height: auto;
    min-height: 0;
    padding: 24px;
    gap: 18px;
    box-shadow: var(--shadow-nav);
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    box-sizing: border-box;
  }

  .site-nav__list.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .site-nav__list > li {
    width: 100%;
  }

  .site-nav__list > li > a {
    height: auto;
    min-height: 40px;
  }

  .site-nav__list .menu-item-has-children > a .site-nav__chevron {
    position: static;
    margin-top: 0;
    margin-left: 4px;
    display: inline-block;
    opacity: 1;
  }

  .site-nav__list .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    padding: 8px 0 0 12px;
  }

  .site-header__actions {
    gap: 16px;
  }

  .site-header__cta {
    font-size: 11px;
    padding: 8px 10px;
  }

  .site-footer__product-groups,
  .site-footer__cols {
    grid-template-columns: 1fr;
  }

  .hero__inner {
    padding-top: 24px;
    min-height: 0;
  }

  .hero__slide.is-active {
    grid-template-columns: 1fr;
  }

  .product-grid,
  .post-grid,
  .archive-grid,
  .certs__badges,
  .site-footer__cols {
    grid-template-columns: 1fr;
  }

  .products-banner {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 48px 0;
  }

  .pl-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 48px;
  }

  .pd-main__inner {
    grid-template-columns: 1fr;
  }

  .pd-main__media {
    width: 100%;
    min-height: 280px;
  }

  .pd-hero {
    height: auto;
    min-height: 280px;
    max-height: none;
  }

  .pd-procedure__steps {
    justify-content: flex-start;
  }

  .pd-procedure__steps li:not(:last-child)::after {
    display: none;
  }

  .pd-cases {
    grid-template-columns: 1fr;
  }
}

/* ========== Product list (prodoct) ========== */
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-family: var(--font-bold);
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}

.breadcrumb__item:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 2px;
  background: url("../image/breadcrumbsarrow.svg") center / contain no-repeat;
  opacity: 0.7;
}

.breadcrumb__item.is-current,
.breadcrumb__item.is-current span {
  color: #fff;
}

.pl-hero .breadcrumb__item {
  color: rgba(255, 255, 255, 0.55);
}

.pl-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 48px 0 56px;
  background: var(--color-bg-muted); /* media 修槽批 10-05：缺件/加载瞬间底板=D3 canvas 族 token（原硬编码 #143038 系视频标题时代遗留） */
}

/* batch1#1 — hero 纯图化：.pl-hero__video（视频面）退役，
   改 .pl-hero__image（单图 ph-img-1920x512）。定位/裁切语义与原视频一致。 */
.pl-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.pl-hero--image {
  /* batch1#1+#2（纯图态）：去上下留白=图即容器；breadcrumb 距 hero 顶 16px；
     下边距 24px（8x；原 56px 非 8x，STATE #12 尾账同批归零）。
     归档/旧模板 .pl-hero（非 --image）不受影响，保持原 48/56。 */
  padding: 0 0 24px;
  /* media 修槽批 10-05：槽合同 1920×256，图 absolute 不撑高容器 → 钉比例=图即容器 */
  aspect-ratio: 1920 / 256;
}

.pl-hero--image .breadcrumb {
  margin: 16px 0 0; /* 距 hero 顶 16px（需求原文）；breadcrumb 为 hero 唯一内容，下缘留白由 .pl-hero--image padding-bottom 承担。 */
}

.pl-hero--image .breadcrumb__list {
  margin-bottom: 0;
}

.pl-hero__inner {
  position: relative;
  z-index: 2;
  width: var(--container);
  margin-inline: auto;
}

/* batch1#2：水平适配 1440 列=与 .pl-list__inner 同宽制（置于通用规则后，
   同特异度后来者胜出；归档/旧模板非 --image 态仍走 --container）。 */
.pl-hero--image .pl-hero__inner {
  width: min(1440px, calc(100% - 48px));
}

.pl-list__inner {
  width: min(1440px, calc(100% - 48px));
  margin-inline: auto;
}

.pl-hero__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px; /* batch1#2: STATE #12 尾账清（原 6px 非 8x；内容对=8px，Denny 8 倍数规范）；本类现仅归档/旧模板消费（/products/ hero 已纯图化，batch1#1）。 */
  font-family: var(--font-thin);
  font-weight: 100;
  font-size: clamp(28px, 3.6vw, 40px);
  letter-spacing: -0.04em;
  line-height: 1.2;
  color: #fff;
}

.pl-list {
  padding: 64px 0; /* batch-3#6: hero→tab=64（原 32）；tab→卡片区由 .pl-filters margin-bottom 64 + padding-bottom 64 不变 */
  background: #fff;
}

.pl-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 32px; /* batch-3#6: tab 间距=32px（8 倍数规范，Denny 09-28；原 `10px 64px`=列 64/行 10 双废，行列统一 32） */
  justify-content: center;
  margin: 0 0 64px; /* batch-3#6: tab→卡片区=64px（原 36） */
}

.pl-filters__btn {
  font-family: var(--font-bold); /* batch-3#7: 全 tab（含未选中）=type-ui-button-2-600 等价 Noto Sans SC-Bold 700（Denny 09-28 规范，原未选中 var(--font)/400） */
  font-weight: 700;
  font-size: var(--fs-tab-label); /* 批2#1: DTC type-ui-button-2 实测 24px */
  line-height: var(--lh-ui); /* DTC line-height 100% */
  letter-spacing: var(--ls-body); /* 批2#1: DTC -0.015em（原 0.04em 为批次1自拟值） */
  text-transform: uppercase; /* 批2#5: DTC 字面大写；库内 term 保持 Title Case，呈现层处理（R5） */
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 8px 0; /* 批2#3: padding-bottom 8px = DTC 列 gap 0.5rem（line-height:1 下视觉间距=8px）；左右 padding 去除使下划线宽=文字宽（DTC .Pixso-frame-7_1255 width:100%） */
  border-bottom: 2px solid transparent; /* DTC height 0.125rem=2px，等效 */
  transition: color 0.2s ease, border-color 0.2s ease;
}

.pl-filters__btn:hover,
.pl-filters__btn.is-active {
  color: var(--color-primary-hover); /* 收尾批: DS 语义 hover/选中态=primary-hover #30DBE6（DTC 实测）；normal=primary。token 用途登记，D3 报批 */
  border-bottom-color: var(--color-primary-hover);
}

/* batch-3#8: 删除 `.pl-filters__btn.is-active { font-family/font-weight }` 覆盖块——
   全 tab 统一 700 后选中/hover 字体无差异，选中态=纯同 hover（仅 color+border-bottom-color，规范 Denny 09-28）。 */

.pl-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 80px;
  row-gap: 64px;
}

.pl-grid--related {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pl-card {
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 100%;
}

.pl-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: #fff;
  overflow: hidden;
  padding: 0;
}

.pl-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

.pl-card__body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
}

.pl-card__titles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pl-card__title {
  margin: 0;
  font-size: var(--fs-heading-1); /* batch-2 B4/D-03: DTC type-heading-1-500 32px */
  font-family: var(--font-medium);
  font-weight: 500; /* batch-2 B4/D-06: --font-medium 仅族名不含字重，Medium 意图必须显式 500 */
  letter-spacing: var(--ls-display); /* batch-2 B4/D-05: DTC -0.05em */
  color: var(--color-text);
  line-height: var(--lh-display); /* batch-2 B4/D-04: DTC 120% */
}

.pl-card__title a {
  color: inherit;
  text-decoration: none;
}

.pl-card__series {
  margin: 0;
  font-size: var(--fs-body); /* DTC 7_1277 副题名 type-body-300 16px/400 (S2 校准①) */
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body); /* batch-2 B5/R4 归位: 原裸数字 1.3 = --lh-body 同值 */
  color: var(--color-text);
}

.pl-card__specs {
  display: flex;
  flex-direction: column;
  margin-top: 0; /* batch-3#3: 标题块→首条分隔线=24px 由 .pl-card__body gap 承担，本处不再叠加 */
  border-top: 1px solid var(--color-text-muted); /* batch-2 B10 附注/R4 归位: 原硬编码 #c5c5c5 */
  flex: 1;
}

.pl-card__spec {
  display: flex;
  flex-direction: column;
  gap: 8px; /* batch-3#1: label↔value=8px（8 倍数规范覆盖 DTC 22px，Denny 09-28 F-01 关账；裸值合法=D3 §3 不建间距 token） */
  padding: 16px 0; /* batch-3#1: 块↔分隔线=16px（1px border 不动 → 线两侧各 16） */
  border-bottom: 1px solid var(--color-text-muted); /* batch-2 B10 附注/R4 归位: 原硬编码 #c5c5c5 */
}

.pl-card__spec:last-child {
  border-bottom: 0;
}

.pl-card__spec-label {
  font-size: var(--fs-body); /* DTC type-body-600 16px/500 (S2 校准②) */
  font-family: var(--font-medium);
  font-weight: 500; /* batch-2 B6/D-01: --font-medium 仅族名字符串不含字重，意图 Medium 必须显式 font-weight */
  letter-spacing: var(--ls-body); /* batch-2 B6/D-02: DTC -0.015em（校准②漏项） */
  line-height: var(--lh-body); /* batch-2 B6 归位: 机检 label lh 24px→DTC 130%（此行偏差表未编 D 号，见交付报告登记） */
  color: var(--color-text);
}

.pl-card__spec-value {
  font-size: var(--fs-body); /* batch-2 B7/D-07: DTC type-body-300 16px（与 label 同字号仅字重区分） */
  font-weight: 400; /* batch-2 B7: 显式 Regular，防继承 label 500 */
  letter-spacing: var(--ls-body); /* batch-2 B7/D-08: DTC -0.015em */
  color: var(--color-text);
  line-height: var(--lh-body); /* batch-2 B7/D-08: DTC 130%（原裸数字 1.35） */
}

.pl-card__spec-range {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text);
  min-height: 28px;
}

.pl-card__spec-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 64px;
}

.pl-card__spec-side--right {
  align-items: flex-end;
  text-align: right;
}

.pl-card__spec-range small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text);
}

.pl-card__spec-arrow {
  flex: 1;
  height: 10px;
  margin: 0 4px 6px;
  position: relative;
  background: repeating-linear-gradient(90deg, var(--color-text-secondary) 0 3px, transparent 3px 7px); /* S0: 原硬编码 #9a9a9a=旧 token 值，归位 R4 */
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: center;
}

.pl-card__spec-arrow::before,
.pl-card__spec-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--color-text-secondary);
  border-right: 1.5px solid var(--color-text-secondary);
}

.pl-card__spec-arrow::before {
  left: 0;
  transform: translateY(-50%) rotate(-135deg);
}

.pl-card__spec-arrow::after {
  right: 0;
  transform: translateY(-50%) rotate(45deg);
}

.pl-card__cta {
  width: auto;
  align-self: flex-start;
  margin-top: 0; /* batch-3#3: 末参数块→按钮=24px 由 .pl-card__body gap 承担（原 4px 叠加破坏规范） */
  min-width: 128px;
  line-height: var(--lh-ui); /* batch-2 B8/D-09: 卡内局部覆盖 DTC lh 100%（.btn 全局 1.2 不碰，全站统一归 S5 报批观察） */
}

/* batch-3#2: 删除 `.pl-card__specs--simple .pl-card__spec { gap: 6px }`（F-01 吸收：
   该覆盖使非 zirconia 三版式 label↔value 停在 6px，与 Zir 卡节奏不一致。8 倍数规范下三版式统一 8px，
   覆盖规则整体作废，勿恢复。） */

.pl-card__bullets {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pl-card__bullets li {
  position: relative;
  padding: 0 0 2px 12px;
  border: 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-text);
}

.pl-card__bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
}

/* E-05 v1.2/§6b-3：横向 4 列（flex row gap 16），列=纵向子块（标签上 24/300 + 值下 16/400，列内 gap 16），
   列间=1px 纵分隔线（border-left 随列删除=无孤线）；旧纵向行+横线+gap8/pad16 作废。 */
.pd-list-specs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; /* T2 裁决(10-01 Denny)#2：四列恒保持一行，长内容列内折行（wrap 版式作废） */
  align-items: stretch;
  gap: 16px;
  margin: 16px 0 8px;
  padding: 0;
  list-style: none;
}

.pd-list-specs__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 240px; /* 列宽上限≈稿件列宽(216)+余量；超限内容折行不撑爆整行 */
  padding-left: 16px;
  border-left: 1px solid var(--color-divider); /* E-06：旧硬编码色归位 R4/§6b-3 */
}

.pd-list-specs__item:first-child {
  border-left: 0;
  padding-left: 0;
}

.pd-list-specs__label {
  /* §6b-3：heading-2-300 档=24/300 显式（旧 ui-label-600 12/700 作废） */
  font-size: var(--fs-heading-2);
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

.pd-list-specs__value {
  display: flex;
  flex-direction: column;
  gap: 8px; /* SIZE 两源分行=列内两行（行距内容对 8，§2.2） */
  font-size: var(--fs-body);
  font-family: var(--font);
  font-weight: 400; /* §6b-3：body-300 档=16/400（值行距 8） */
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  overflow-wrap: break-word; /* 列内自然折行（T2 裁决#2）；break-word 保 "30mm" 类整词不被 anywhere 切碎 */
}

/* ========== Product detail (product-4d) ========== */
body.is-product-detail {
  /* 1920 画布：1440 内容栏 = 与顶栏 header-container 同一左缘；Hero 底到主内容 64 */
  --pd-content-width: var(--header-container);
  --pd-hero-to-main: 64px;
  --pd-section-gap: 32px;
  /* S4 批 a：COLOR 组图示高 112px token 化（工单「高 112px 等值走 token 化」行；
     值=req-v2 §1.4 留用值/DTC §1.1 实测账 7rem=112px；非新色值=间距尺寸类，R4 通道=工单显式授权）。 */
  --pd-color-img-h: 112px;
  /* S6 批 b：decor 线族 black-0.1 token 化（表 3 行6 组间竖线/行8 中缝+横线权威值；
     D3 现面无 0.1 档=非新造色值=稿面值入 token，R4 登记随 T1.5 汇总=DEV-4 同通道先例）。 */
  --pd-decor-line: rgba(0, 0, 0, 0.1);
  /* S6 批 b：无 hero 态面包屑文字=black-0.5（表 4 注行 P-1 文字契约值；is-current 用既有 --color-text）。 */
  --pd-breadcrumb-dark: rgba(0, 0, 0, 0.5);
  /* S6 批 b：thumb 白描边浮底环（稿=白 0.9 环，主图/缩略图叠底可读性 decor；阴影类走 token=R4）。 */
  --pd-thumb-ring: rgba(255, 255, 255, 0.9);
}

body.is-product-detail .site-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

body.is-product-detail .pd-hero,
body.is-product-detail .pd-main,
body.is-product-detail .pd-block,
body.is-product-detail .section {
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  box-sizing: border-box;
}

/* 详情页各行区块与顶栏同宽 1440（8050_3443 / 3478 / 3493 left:240 @1920）
   批 2（v1.4 §6b-7）：s7 的 1440 容器=.faq-cta__inner（.faq-cta 改左列 624，见批 2 块）。 */
body.is-product-detail .pd-hero__inner,
body.is-product-detail .pd-main__inner,
body.is-product-detail .pd-block__inner,
body.is-product-detail .section-head,
body.is-product-detail .faq-cta__inner {
  width: var(--pd-content-width);
  max-width: 1440px;
  margin-inline: auto;
}

/* v1.4 §6b-7：帧 pad 上下 64（905=64+777+64 基线；section 高动态随内容，禁钉死）。 */
body.is-product-detail #contact.section {
  padding: 64px 0;
}

/* E-19/S3 §2.7: faq-cta-bg=video 位（本包唯一视频槽；Hero 是图片槽勿混）。
   <video autoplay muted loop playsinline>+poster 降级；poster 档=ph-video-1920x1080（v1.4 改档，旧 920 作废）；
   素材缺失期 poster 查无 → video 节点整段不渲染=纯降级路径（section 白底+overlay 呈现，无报错）。 */
body.is-product-detail #contact.section {
  position: relative;
  overflow: hidden;
}

/* 批 3 · §6b-7① v1.5 层级链：bg=video 槽铺满整个第 1 层（1920 通栏），不是 inner 1440。
   DOM 实况=video 节点本就是 #contact.section 直属子（批 2 无此项缺陷，如实登记）；
   批 3 通栏强化=inset:0+width:100%（依赖 section 盒宽）→ left:calc(50%-50vw)+width:100vw
   （视口通栏=§6b-7④ rect.width==vw 断言在 >1920 视口亦成立；≤1920 两法等价）。
   层级序显式化=bg(z0) < ::after overlay(z1) < inner(z2)（批 2 inner z1/overlay z0 同序，语义不变）。 */
.faq-cta-bg {
  position: absolute;
  inset-block: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

body.is-product-detail #contact.section > .faq-cta__inner {
  position: relative;
  z-index: 2; /* 批 3：让位 ::after overlay(z=1)，三层序 bg<mask<content */
}

/* 遮罩=既有 --overlay-image token（D3 注册：详情页图片遮罩，非新值）。批 3 层级链：遮罩在 bg 之上、内容之下。 */
body.is-product-detail #contact.section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-image);
  z-index: 1;
  pointer-events: none;
}

/* ========== S3/TC 批 2 · s7 FAQ-CTA v1.4（§6b-7/§2.7 权威；E-18 纪律=只加详情作用域覆盖，禁全局重写 .faq-item） ========== */
/* 两列结构：inner 1440 横向 gap32；左列 .faq-cta=624 纵向 gap32（faq-list↔subscribe）；
   右列=稿件「占位」(109:2) 空容器——前台不建节点，背景视频自右带露出。 */
body.is-product-detail .faq-cta__inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 32px;
}

/* 批 3 · §6b-7① v1.5 点名清算：全局 .faq-cta（theme.css L993-998 grid 时代遗留）=
   width:var(--container) / margin-inline:auto / align-items:start。
   批 2 覆盖只改 display/direction/width/gap，漏了后两条——margin-inline:auto 吞内边距=左列居中事故；
   align-items:start 使列内子项 shrink-to-fit=展开 624/收起回缩 379.6 宽度漂移（CDP 复现实证）。
   v1.5 显式重置 margin-inline:0 + align-items:stretch，禁依赖层叠默认。 */
body.is-product-detail .faq-cta {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 624px;
  max-width: 100%;
  flex: 0 0 auto;
  margin-inline: 0;      /* 清算全局 L994：624 列贴 inner 左缘（col_x=240 @1920），非居中 */
  align-items: stretch; /* 清算全局 L998：列内子项满宽，两态横向几何恒定 624 */
}

/* FAQ 条目：稿件 gap16（全局公共件 8 不动）；item=radius4+收起半透明白（全局 border 非合同值，详情域去除）。
   width:100% 双保险（§6b-7① 点名清算配套：防 align-items 路径外的收缩回归）。 */
body.is-product-detail .faq-list {
  gap: 16px;
  width: 100%;
}

body.is-product-detail .faq-item {
  border: 0;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.8);
}

body.is-product-detail .faq-item.is-open {
  background: #fff;
  box-shadow: none; /* 合同两态=底色差（半透明白/纯白），无阴影条款；全局 shadow-card 属公共件旧观感 */
}

/* chevron=单资产+CSS 旋转（R5）：mask 复用主题既有 icon_arrow_down_default.svg（=切片 faqitem__icon3 同源形状，
   零新导入，禁五份 svg）；收起 0°=朝下 ∨，展开 180°=朝上 ∧（色随 token 不随资产）。
   批 3 §6b-7② v1.5 更正：撤批 2 的 ±90°（PM 几何推导错误——下箭头 ±90°=朝右/朝左，即 Denny T2 所见现象）；
   推导留痕：切片收起态矩阵 matrix(-4.37e-08,1,-1,-4.37e-08,13,6) 与主题 svg 逐字节同=顶点在下=∨；
   展开态 matrix(-4.37e-08,-1,-1,4.37e-08,13,10)=顶点在上=∧；∨→∧=垂直翻转=rotate(180deg)。
   全局公共件 L1053 本来就是 180°，批 2 属越权改写后失准，详情覆盖回归正确角度。 */
body.is-product-detail .faq-item__icon {
  background: var(--color-text);
  -webkit-mask: url("../image/icon_arrow_down_default.svg") center / contain no-repeat;
  mask: url("../image/icon_arrow_down_default.svg") center / contain no-repeat;
  transform: rotate(0deg); /* 收起=∨ 朝下（v1.5 终值） */
}

body.is-product-detail .faq-item.is-open .faq-item__icon {
  background: var(--color-primary);
  background-image: none; /* 覆盖全局双资产换图逻辑：详情域单资产，仅旋转+色变 */
  transform: rotate(180deg); /* 展开=∧ 朝上（v1.5 终值，撤批 2 +90°） */
}

/* panel=16/400（body-300 档）、pad-left 32、问题↔答案 gap 8、hug 高（禁 min-height，Hero 红线沿用）。 */
body.is-product-detail .faq-item__panel {
  padding: 8px 32px 16px;
  font-size: var(--fs-body);
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
}

/* Subscribe（左列下）=纵向 gap24：copy 组 gap8（标题 32/300 白+正文 16/400 白）→ field → submit 行。
   width:100% 双保险（§6b-7① 点名清算配套，与 .faq-list 同批）。 */
body.is-product-detail .subscribe {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

body.is-product-detail .subscribe__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.is-product-detail .subscribe__copy h3 {
  margin: 0;
  font-size: var(--fs-heading-1);
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: #fff;
}

body.is-product-detail .subscribe__copy p {
  font-size: var(--fs-body);
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: #fff;
}

body.is-product-detail .subscribe__form {
  display: flex;
  flex-direction: column;
  gap: 24px; /* 与 .subscribe 同档：copy↔field↔submit 三段皆 24（§6b-7 纵向 gap24） */
}

/* field=h64 radius4 白底 pad[8,32]，占位 24/300 secondary。 */
body.is-product-detail .subscribe__field {
  width: 100%;
  height: 64px;
  border: 0;
  border-radius: var(--radius);
  background: #fff;
  padding: 8px 32px;
  font-size: var(--fs-heading-2);
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: var(--ls-display);
  color: var(--color-text);
}

/* 聚焦态（Denny T2 工单外顺路项 10-03）：黑框=Chromium UA 默认 focus ring（outline auto 1px #101010，
   画在边缘内=观感"小于框 2px"）。改显式 primary-hover 2px 内描边（offset:-2px=贴合框默认尺寸，不撑布局）。 */
body.is-product-detail .subscribe__field:focus {
  outline: 2px solid var(--color-primary-hover);
  outline-offset: -2px;
}

body.is-product-detail .subscribe__field::placeholder {
  font-size: var(--fs-heading-2);
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: var(--ls-display);
  color: var(--color-text-secondary);
  opacity: 1;
}

/* submit 行 gap16；按钮=复用 .btn-primary 体系（禁令 #7：禁改全局 .btn），
   pad[16,32] 差异=详情作用域覆盖，登记 T1.5 偏差表裁决。 */
body.is-product-detail .subscribe__submit {
  display: flex;
  gap: 16px;
}

body.is-product-detail .subscribe__submit .btn {
  padding: 16px 32px; /* 合同 §6b-7 按钮 pad[16,32]；全局 .btn pad[10,24] 不动（禁令 #7）→ T1.5 登记 */
}

/* S3/TC v1.2 §6b-1：Hero=纯静态背景图（1920×512 FIXED 槽，O-1 主题固定图），无文字/KPI 叠加层。
   旧 __copy/__head/__title/__series/__rule/__kpis/.pd-kpi* 簇随 v1.2 勘误删除。面包屑保留（D-2）。 */
.pd-hero {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  margin-bottom: 0;
  height: 512px;
  min-height: 512px;
  max-height: 512px;
  padding: 0;
  color: #fff;
  overflow: hidden;
  background: #fff;
}

.pd-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

.pd-hero__inner {
  width: var(--pd-content-width);
  max-width: 1440px;
  height: 100%;
  margin-inline: auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 0 0;
  box-sizing: border-box;
}

.pd-hero__inner .breadcrumb__list {
  margin-bottom: 0;
}

.pd-main__inner,
.pd-block__inner {
  width: var(--pd-content-width);
  max-width: 1440px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

.pd-hero .breadcrumb__item a {
  color: rgba(255, 255, 255, 0.55);
}

.pd-hero .breadcrumb__item.is-current,
.pd-hero .breadcrumb__item.is-current span {
  color: #fff;
}

.pd-main {
  margin-top: 0;
  padding: var(--pd-hero-to-main, 64px) 0 0;
  background: #fff;
}

body.is-product-detail .pd-block {
  padding: var(--pd-section-gap, 32px) 0;
}

.pd-main__inner {
  display: grid;
  /* T2 裁决(10-01 Denny)：图↔内容 96→64；列宽=480 合同槽 + 内容列吃剩余（原 fr 比例在 gap 变化下
     会把视觉间距算成 64+余量，改 px 钉死 media 列，内容列 minmax(0,1fr) 允许收缩）。 */
  grid-template-columns: 480px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  justify-content: start;
}

.pd-main__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  min-height: 480px;
  justify-self: start;
}

.pd-main__content {
  min-width: 0;
  justify-self: start;
}

/* E-16: FIXED 480×480 合同槽 + object-fit:cover（DTC §3 行2；旧 max-width:442/contain 作废）。 */
.pd-main__media img {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* E-03: headline 双档=title display-section-1-100（42/100 显式）、series -500（42/500 显式）。
   旧 40px=设计源误差（S2 D-03 同款病），--fs-display-3=42 权威。 */
.pd-headline {
  margin: 0 0 24px; /* 块↔块=24（F-01） */
}

/* v1.2 §6b-2/E-03：headline 档位=title 42/100（display-section-1-100）、series 24/500（heading-2-500）。
   稿件两档均无 text-transform（样例 "4D Ultra Fit"/"The Full Arch Master" 混排大小写）→ 旧 uppercase 随档位校准移除。 */
.pd-headline__title {
  margin: 0;
  font-family: var(--font-thin);
  font-weight: 100;
  font-size: var(--fs-display-3);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-text);
}

.pd-headline__series {
  margin: 8px 0 0; /* 内容对=8 */
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: var(--fs-heading-2);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-text);
}

/* E-04: features=body 档；行=「标题: 说明」；lh 归 var(--lh-body)（1.35→1.3）。
   title 段 body-600 档=16/500 显式（S2 B6 教训：族名不含字重轴）。 */
.pd-features {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px; /* 内容对=8 */
}

.pd-features li {
  margin: 0;
  font-size: var(--fs-body);
  font-family: var(--font);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
}

.pd-features__title {
  font-family: var(--font-medium);
  font-weight: 500;
}

.pd-procedure {
  margin-top: 8px;
}

/* E-07 v1.2/§6b-4：区块标题=display-section-1-100 档 42/100（旧 24/500 系 P0 档位误判作废）
   + 标题下 1px 横线（R5=CSS 生成，色归 --color-divider；旧 --color-border 同批归位）。 */
.pd-procedure__title {
  margin: 0 0 16px; /* 线↔内容=块↔线 16 */
  width: 100%;
  font-size: var(--fs-display-3);
  font-family: var(--font-thin);
  font-weight: 100;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-text);
  padding-bottom: 8px; /* 标题↔线=内容对 8（§3 Sutitle cGap 10=设计源误差判废） */
  border-bottom: 1px solid var(--color-divider);
}

.pd-procedure__steps {
  /* v1.2 §6b-4/E-08：图标+箭头单 flex row（8 列节奏 icon,arrow×5,icon），块档 gap 24；
     箭头=列间 16×16（gap 24 内居中：4+16+4），资源=主题既有 icon_arrow_right_default.svg（未新增导入）。 */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 64px; /* 6×88 + 5×64 = 848 = 稿件图标行实测宽（§6b-4），8x 合规 */
  margin: 0; /* 线↔内容节奏归 .pd-procedure__title margin */
  padding: 0;
  list-style: none;
}

.pd-procedure__steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* E-08: 图标↔标签=内容对 8（旧 10=设计源误差） */
  width: 88px;
  text-align: center;
}

.pd-procedure__steps li:not(:last-child)::after {
  /* E-21 v1.2：箭头图素必须渲染（16×16 右向 chevron，图标行垂直居中 top=88/2-8=36；
     gap 64 中居中 = left calc(100% + (64-16)/2) = +24px）。 */
  content: "";
  position: absolute;
  top: 36px;
  left: calc(100% + 24px);
  width: 16px;
  height: 16px;
  background: url("../image/icon_arrow_right_default.svg") center / contain no-repeat;
}

.pd-procedure__icon,
.pd-procedure__placeholder {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 4px;
  overflow: hidden;
  background: #f3f3f3;
}

.pd-procedure__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-procedure__placeholder {
  background:
    radial-gradient(circle at 50% 42%, #e8e8e8 0 28%, transparent 29%),
    linear-gradient(180deg, #f7f7f7 0%, #ececec 100%);
}

/* E-09 v1.2/§6b-4：步骤标签=body-600 档 16/500 显式（旧 14/400 系 P0 误判作废；S2 B6 教训=fw 必写）。 */
.pd-procedure__label {
  font-size: var(--fs-body);
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

/* 稿件区块标题=display-section-1-100 档（42/100 显式）；旧 40px=S2 D-03 同款设计源误差→--fs-display-3 权威。
   标题↔下划线 gap：绑定表 §3 Sutitle cGap=10 判设计源误差→校准 8（内容对档）；下划线↔内容=块↔线 16。 */
.pd-section-title {
  margin: 0 0 16px; /* 线↔内容=块↔线 16 */
  width: 100%;
  font-family: var(--font-thin);
  font-weight: 100;
  font-size: var(--fs-display-3);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-text);
  padding-bottom: 8px; /* 标题↔线=8（§3，同上） */
  border-bottom: 1px solid var(--color-divider); /* §6b-4：线色=divider 权威（旧 --color-border 归位） */
}

.pd-block {
  padding: 48px 0;
  background: #fff;
}

.pd-block--muted {
  background: #f9f9f9;
}

/* ========== S4 批 a · s4 COLOR v2 重写（组 B V1.3；req-v2 §4.1 批准结构/§4.2 C3-a；t_e7da4a0d） ========== */
/* 外层=横向 flex 行 gap 16（§1.1 DTC 账：384+226×3+314+16×4=1440 精确闭合）超宽 wrap（C3-a 批准行）；
   组间=纯 gap 白隙无竖线（R5）；每列=column(图 h112 + chips 列)，图↔chips=内容对 8。
   旧「.pd-color__row nowrap+24gap+~3% 收缩」清算：S3 T2#3 是 24-gap 溢出的临时补法，
   与 C3-a（宽随图自然比例）互斥；本批按 req-v2 §4.1/§4.2 权威值回正 16+wrap，收缩不再需要。
   类名过 §4.1 草图（pd-color__groups/pd-color__group-img），旧 pd-color__images 双横幅族作废。 */
.pd-color__groups {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* C3-a「超宽 wrap」（req-v2 §4.2 批准行）；窄屏归 <1100 column（§4.2 响应式行） */
  align-items: flex-start;
  gap: 16px; /* §4.1 结构行 + §1.1 实测账（块间距 16px，1440 闭合算术的组成项） */
  margin: 0; /* 线↔内容节奏归 .pd-section-title margin */
}

.pd-color__group {
  display: flex;
  flex-direction: column;
  align-items: center; /* chips 居中=§1.1 实测账 */
  gap: 8px; /* 图↔chips=内容对 8（Denny 8x 规范，STATE §4#12；S3 面值不动） */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%; /* §4.2 响应式行「组块 max-width:100%」 */
}

/* 渲染高 112px 定（token 化=工单「高 112px 等值走 token 化」行，值=req-v2 §1.4 留用值/M1 槽位行）、
   宽随图自然比例（C3-a，禁钉稿件 384/226/314）；禁 object-fit:cover（会裁图，违反"宽随图"合同）。 */
.pd-color__group-img {
  display: block;
  width: auto;
  height: var(--pd-color-img-h);
  max-width: 100%;
}

/* <1100 单列堆叠（req-v2 §4.2 响应式行字面值；断点 1100=主题现有=红线④零新增）。
   注: 必须落在本基础规则**之后**——media query 不加特异性，先前旧块在源码序早于基础规则时
   会被 `flex-direction: row` 覆盖失效（S3 现面旧位在文件前段 ≤768 块=同型潜伏坑，本批点名清算，
   偏差表 DEV-3）。 */
@media (max-width: 1100px) {
  .pd-color__groups {
    flex-direction: column;
  }
}

/* v1.3 终裁（Denny 10-01，§6b-5）：chips=横排 wrap 居中，组内 gap=16（批 2 落地，旧暂用 8 废弃）。 */
.pd-color__chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* E-11: chips=body-600 档=16/500 显式（旧 --font-bold+fw600=族名/轴双错）。 */
.pd-color__chips li {
  font-size: var(--fs-body);
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

/* v1.2 §6b-5：chips=组内纵排一行一个，旧横排 "\" 分隔前缀随版式作废（列间无分隔符=纯 gap 白隙）。 */

/* ========== S3/TC s5 APPLICATION（O-4=全站固定图标库） ========== */
/* 图示 FIXED 128×128；渲染长度随 indications 实际值。
   T2 裁决(10-01 Denny)#3：取消 space-between（§6b-6 稿件值覆盖），=居左横排 flex-start + 间隔 24
   （与 COLOR/CASE STUDY 统一 24 节奏；8×128+7×24=1192<1440 单行不溢出）。 */
.pd-application__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
  margin: 0; /* 线↔内容节奏归 .pd-section-title margin */
  padding: 0;
  list-style: none;
}

.pd-application__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 128px;
  text-align: center;
}

.pd-application__icon {
  display: block;
  width: 128px;
  height: 128px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-muted);
}

.pd-application__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 标签=body-600 档 16/500 显式（同 E-11 病根修正）。 */
.pd-application__label {
  font-size: var(--fs-body);
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

/* E-14: margin-top 10→0（标题 padding-bottom 16 已含 块↔线 节奏，避免叠加；出口=预期表 24/0 取 0）。 */
.pd-cases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  margin-top: 0;
}

.pd-case {
  background: #fff;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.pd-case:hover {
  box-shadow: var(--shadow-card);
}

.pd-case__media {
  display: block;
  aspect-ratio: 16 / 11;
  background: #f3f3f3;
  overflow: hidden;
}

.pd-case__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-case__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  flex: 1;
}

.pd-case__date {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary, #8a8a8a);
}

.pd-case__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text);
}

.pd-case__link {
  margin-top: auto;
  font-size: 12px;
  font-family: var(--font-bold);
  letter-spacing: 0.04em;
  color: var(--color-primary);
  text-decoration: none;
}

.pd-case__link:hover {
  text-decoration: underline;
}

@media (max-width: 1100px) {
  .pl-grid,
  .pl-grid--related,
  .pd-cases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 48px;
  }

  .pd-main__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .pd-hero {
    height: auto;
    min-height: 320px;
    max-height: none;
  }


  .pd-procedure__steps li:not(:last-child)::after {
    display: none;
  }
}

/* ========== Homepage v2 ?? 7 sections ========== */
.section-head--center {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  margin-bottom: 0;
  width: 100%;
}

.section-head--center .section__title {
  max-width: 1100px;
  text-align: center;
}

.section-head--center .section__lead {
  margin-top: 0;
  max-width: 920px;
  text-align: center;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.section-head--center .section-head__mark {
  margin-top: 0;
}

.section-head--center .section-head__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.section__title--on-dark {
  color: #fff;
}

.section__title--light {
  font-family: var(--font-light);
  font-weight: 300;
}

/* 1. Hero Showcase */
.hs-hero {
  padding: 0;
  background: #fff;
}

.hs-hero__inner {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, var(--home-col-left)) minmax(0, var(--home-col-right));
  gap: var(--home-col-gap);
  align-items: stretch;
  aspect-ratio: 1920 / 720;
}

.hs-hero__left {
  position: relative;
  /* §6f 件③（稿 48:7652 媒体层无角，Denny 裁「只有卡片面板应有圆角」）：border-radius 删除 */
  overflow: hidden;
  background: #f3f3f3 center / cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  height: 100%;
}

.hs-hero__left-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.12) 100%);
  pointer-events: none;
}

.hs-hero__left-body {
  position: relative;
  z-index: 1;
  /* §6f 件④（稿 48:7652 body 满宽 x=0 且贴底零隙；根因=子 margin 致隙非父 pad）：margin 0 24px 24px → 0 */
  margin: 0;
  padding: 16px 32px; /* 稿 224:672 padding[16,32,16,32] 保留勿动 */
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px); /* P5-b（车次#1 DTC C-2a）：稿 BACKGROUND_BLUR 8px（224:672/CARD-BG-GlassOverlay），旧值 2.67px */
  -webkit-backdrop-filter: blur(8px);
  /* §6f 件③（稿 48:7652 body 无角）：border-radius 删除 */
}

.hs-hero__left-title {
  margin: 0;
  font-size: var(--fs-display-3); /* P5-b（车次#1 DTC C-2c 已裁=42/Thin）：48→42；--fs-display-3 复用不触 R4 */
  font-family: var(--font-thin);
  font-weight: 100;
  color: var(--color-text);
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.hs-hero__left-sub {
  margin: 10px 0 0;
  font-size: 24px;
  font-family: var(--font-light); /* P5-b（车次#1 DTC C-2c 连带①）：设计=24/Light300（type-heading-2-300），旧=medium/500 */
  font-weight: 300;
  color: var(--color-text);
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.hs-hero__left-text {
  margin: 14px 0 0;
  font-size: 16px;
  font-family: var(--font-medium); /* P5-b（车次#1 DTC C-2c 连带②）：设计=16/Medium500（type-body-600），旧=regular/400 */
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--color-text);
}

.hs-hero__carousel {
  position: relative;
  /* §6f 件③（稿 48:7782/7796 媒体层无角）：border-radius 删除 */
  background: #f7f7f7;
  overflow: hidden;
  min-height: 0;
  height: 100%;
}

.hs-slide {
  display: none;
  position: absolute;
  inset: 0;
  background: #f7f7f7 center / cover no-repeat;
}

.hs-slide.is-active {
  display: block;
}

.hs-slide__btn {
  position: absolute;
  left: 58%;
  top: 64%;
  z-index: 2;
  padding: 16px 48px;
}

.hs-hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  z-index: 3;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 40px 40px;
}

/* C-1 状态对（三态定版 10-15 晚）：资产=Pixso ICON 容器 411:881「Pagination Controls-light mode」
   经 MCP get_screenshot 导出 PNG（40×41 1x）六枚——稿面合同=三态制：default / hover-Active（合一态）
   / disable（黑 0.25 底+白 0.8 箭头真实资产）。prev/next 差=箭头水平镜像。
   disabled 触发=main.js 轮播改非循环边缘禁用（首张 prev/末张 next，口头令单 Denny 10-15 晚）。
   旧 svg 面：next 静态误用 hover 资产（C-1 实锤）已随本块翻正；被替换 svg 处置见遗言素材账。 */
.hs-hero__nav--prev {
  left: 24px;
  background-image: url("../image/PreviousButtonlightdefault.png");
}

.hs-hero__nav--next {
  right: 24px;
  background-image: url("../image/Nextbuttonlightdefault.png");
}

.hs-hero__nav--prev:hover,
.hs-hero__nav--prev:active {
  background-image: url("../image/PreviousButtonlighthoveractive.png");
}

.hs-hero__nav--next:hover,
.hs-hero__nav--next:active {
  background-image: url("../image/Nextbuttonlighthoveractive.png");
}

.hs-hero__nav:disabled,
.hs-hero__nav.is-disabled {
  cursor: not-allowed;
}

.hs-hero__nav--prev:disabled,
.hs-hero__nav--prev.is-disabled {
  background-image: url("../image/PreviousButtonlightdisable.png");
}

.hs-hero__nav--next:disabled,
.hs-hero__nav--next.is-disabled {
  background-image: url("../image/Nextbuttonlightdisable.png");
}

.hs-hero__dots.carousel-dots,
.hs-hero__dots {
  position: absolute;
  left: 50%;
  bottom: 56px; /* P5-b（车次#1 DTC C-3 随稿）：距底 24→56（稿 48:7699 y=656=720-656-8）。豁免注（D3 v1.1 §3.1）：56=8×7 但不在七档族（8–80）内，令单红线=不新建 token→裸值+注理由；是否增设档位/豁免登记=遗言偏差项报 PM */
  transform: translateX(-50%);
  width: 60px;
  height: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  z-index: 3;
  margin: 0;
}

.hs-hero__dots.carousel-dots button,
.hs-hero__dots button {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: var(--radius);
  background: rgba(26, 26, 26, 0.5);
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}

.hs-hero__dots.carousel-dots button.is-active,
.hs-hero__dots button.is-active {
  width: 24px;
  background: var(--color-primary-hover);
}

/* 2a. STT 通栏（home-Scroll-Triggered Text，车次#1 P2；结构表=tasks/home-dtc/stt-layout-table.md；稿 48:7705/48:7788） */
.stt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-s); /* About=本体 gap 16（48:7705 gap=16） */
  padding: var(--space-l) 0; /* 本体 pad 32/0/32/0（48:7705/48:7788 padding[0]/[2]） */
  background: var(--color-bg); /* 稿 fill white */
  width: var(--container);
  margin-inline: auto;
}

.stt--blog {
  gap: var(--space-l); /* Blog 段内 gap=32（48:7788 gap=32）；两实例异构保留=G-7 裁 */
}

.stt__head,
.stt__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xs) 0; /* 本体 pad 8/0/8/0（48:7706/48:7789） */
}

.stt__head {
  gap: 0; /* 48:7706 gap=0（单行） */
}

.stt__group {
  gap: var(--space-l); /* 48:7789 gap=32（lines→arrow） */
}

.stt__lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px; /* 推导值=q2.y50−(q1.h38+lines.y8)=12（48:7790 无 autoLayout=手工排层，flex 缺定义按 Rule A 默认+结构表上报行）；非 8 倍=D3 v1.1 §3.4 豁免注（稿手工排实测） */
}

.stt__title {
  margin: 0;
  font-size: var(--fs-heading-1);
  font-family: var(--font-light); /* About=32/300（--type-heading-1-300 372:1334） */
  font-weight: 300;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--color-text); /* #686868=134:1619 color/text-body 映射行 */
  text-align: center;
}

.stt__title--thin {
  font-family: var(--font-thin); /* Blog q1=32/100 Thin（48:7791 live 复认；intro_32 41:860） */
  font-weight: 100;
}

.stt__note {
  margin: 0;
  font-size: var(--fs-body); /* Blog q2=16/400（--type-body-300 372:1306 live 勘正后） */
  font-family: var(--font);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  text-align: center;
}

.stt__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px; /* 槽 16×16（48:7708 实测 16.012，.01=复制步进噪声 D1′§4-1 豁免） */
  height: 16px;
  color: var(--color-text); /* inline SVG fill=currentColor（B-3 落地建议行） */
}

.stt__arrow svg {
  display: block;
  width: 16px;
  height: 16px;
}

@media (max-width: 768px) {
  .stt {
    padding-inline: var(--space-s); /* 推断：稿 pad-inline=0，长句窄屏贴边→包安 16=--space-s（结构表 Rule F 上报行） */
  }
}

/* 2. Reliable Supplier */
.rs-section {
  padding: 0;
  width: var(--container);
  margin-inline: auto;
}

.rs-section .section-head--center {
  padding: 32px 0;
  min-height: 150px;
  gap: 16px;
  justify-content: center;
  box-sizing: border-box;
}

.rs-section .section-head__mark {
  background-image: url("../image/IconArrowDown163.svg");
}

.rs-section .section__title {
  font-family: var(--font-light);
  font-weight: 300;
}

.li-section .section-head__mark {
  background-image: url("../image/IconArrowDown162.svg");
}

.pc-section .section-head__mark {
  background-image: url("../image/IconArrowDown161.svg");
}

.em-section .section-head__mark {
  background-image: url("../image/IconArrowDown160.svg");
}

.fl-section .section-head__mark {
  background-image: url("../image/IconArrowDown16.svg");
}

.li-section .section-head--center,
.em-section .section-head--center {
  gap: 32px;
  padding: 20px 0;
}

.pc-section .section-head--center {
  gap: 16px;
  padding: 32px 0;
}

.rs-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--home-col-left)) minmax(0, var(--home-col-right));
  gap: var(--home-col-gap);
  margin-top: 0;
  aspect-ratio: 1920 / 768;
}

.rs-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #1a2c34 center / cover no-repeat;
  color: #fff;
  min-height: 0;
  height: 100%;
  display: flex;
}

.rs-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,207,219,.55) 0%, rgba(0,0,0,.35) 48%, rgba(0,0,0,.55) 100%);
}

.rs-card--lg .rs-card__shade {
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 100%);
}

.rs-card__content {
  position: relative;
  z-index: 1;
  padding: 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.rs-card__content--center {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  max-width: 640px;
  margin-inline: auto;
}

.rs-card__label {
  margin: 0;
  font-size: 24px;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.rs-card__title {
  margin: 8px 0 0;
  font-size: 42px;
  font-family: var(--font-thin);
  font-weight: 100;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.rs-card--lg .rs-card__title {
  font-size: 64px;
}

.rs-card__text {
  margin: 12px 0 0;
  font-size: 24px;
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.rs-card__text--muted {
  opacity: .95;
  font-size: 16px;
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.rs-card__foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.rs-card__logo {
  max-width: 110px;
  height: auto;
}

/* 3. Product Tabs */
.pt-section {
  padding: 48px 0 0;
  width: var(--container);
  margin-inline: auto;
}

.pt-panel {
  display: none;
}

.pt-panel.is-active {
  display: block;
}

.pt-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--home-col-right)) minmax(0, var(--home-col-left));
  gap: var(--home-col-gap);
  margin-top: 24px;
  align-items: stretch;
  min-height: 0;
}

.pt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--home-col-gap);
  min-height: 0;
}

.pt-side {
  position: relative;
  min-height: 100%;
  /* §6f 件③（稿 48:7782 媒体层无角）：border-radius 删除 */
  overflow: hidden;
  background: #2a2a2a center / cover no-repeat;
  color: #fff;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
}

.pt-side__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.1) 20%, rgba(0,0,0,.72) 100%);
}

.pt-side__copy {
  position: relative;
  z-index: 1;
  padding: 28px 22px;
}

.pt-side__title {
  margin: 0;
  font-size: 32px;
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.pt-side__text {
  margin: 14px 0 0;
  font-size: 16px;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.pt-side__range {
  margin: 8px 0 0;
  font-size: 14px;
  font-family: var(--font-bold);
}

/* 4. Lab Insights */
.li-section {
  padding: 0;
  width: var(--container);
  margin-inline: auto;
  background: transparent;
}

.li-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 0;
}

.li-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #ececec;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.li-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.li-card__media {
  display: block;
  height: 240px;
  aspect-ratio: auto;
  overflow: hidden;
  background: #1a1a1a;
  border-radius: 0;
}

.li-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.li-card__date {
  margin: 0;
  padding: 16px 32px 0;
  font-size: 14px;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1;
  text-transform: capitalize;
  color: #8d8d8d;
}

.li-card__text {
  margin: 0;
  padding: 8px 32px 0;
  font-size: 16px;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--color-text);
  flex: 1;
}

.li-card .product-card__link {
  padding: 12px 32px 16px;
}

/* 5. Proof & Certificates */
.pc-section {
  padding: 0;
  width: var(--container);
  margin-inline: auto;
}

.pc-section__title-line {
  display: block;
}

.pc-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--home-col-left)) minmax(0, var(--home-col-right));
  gap: var(--home-col-gap);
  margin-top: 0;
  aspect-ratio: 1920 / 720;
}

.pc-left,
.pc-right {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #16324a center / cover no-repeat;
  min-height: 0;
  height: 100%;
}

.pc-left__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(28, 61, 91, 0.72);
  backdrop-filter: blur(3.33px);
  -webkit-backdrop-filter: blur(3.33px);
  color: #fff;
  padding: 16px 32px 32px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
}

.pc-left__panel h3 {
  margin: 0 0 8px;
  font-size: 48px;
  font-family: var(--font-thin);
  font-weight: 100;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.pc-left__panel p {
  margin: 0;
  font-size: 16px;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  max-width: 420px;
}

.pc-left__logo {
  width: 167px;
  max-width: 28%;
  height: auto;
  flex-shrink: 0;
}

.pc-left__logo-text {
  font-size: 28px;
  font-family: var(--font-bold);
  letter-spacing: 0.04em;
}

.pc-right__shade {
  position: absolute;
  inset: 0;
  background: rgba(20, 40, 55, .35);
}

.pc-certs {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 48px 24px 160px;
  overflow: hidden;
  min-height: 0;
}

.pc-certs__track {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  width: max-content;
  transition: transform 0.35s ease;
  will-change: transform;
}

.pc-cert {
  flex: 0 0 199px;
  width: 199px;
  height: 271px;
  position: relative;
  background: transparent;
  border-radius: var(--radius);
  overflow: hidden;
  opacity: 0.55;
  transform: scale(0.96);
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: none;
}

.pc-cert.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.pc-right .pc-cert.carousel-slide {
  display: block;
}

.pc-cert a {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  position: relative;
}

.pc-cert img {
  position: absolute;
  left: 8px;
  top: 6px;
  width: 183px;
  height: 254px;
  object-fit: cover;
  border-radius: var(--radius);
  filter: drop-shadow(0px 2px 8px rgba(0, 20, 21, 0.05));
}

.pc-cert__label,
.pc-cert span.pc-cert__label {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  width: auto;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--color-primary);
  color: #fff;
  font-size: 16px;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.25;
  text-transform: uppercase;
  text-align: left;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 8px rgba(0, 20, 21, 0.05);
}

.pc-cert__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: url("../image/Vector8.svg") center / contain no-repeat;
  display: inline-block;
}

.pc-certs__dots.hs-hero__dots,
.pc-certs .hs-hero__dots {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  margin: 0 auto;
  width: auto;
  justify-content: center;
  gap: 4px;
}

.pc-certs .hs-hero__dots button {
  width: 8px;
  height: 8px;
  background: var(--color-divider);
}

.pc-certs .hs-hero__dots button.is-active {
  width: 24px;
  background: var(--color-primary);
}

.pc-right__copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 2;
  color: #fff;
  text-align: center;
  max-width: none;
  padding: 0 24px 24px;
}

.pc-right__copy h3 {
  margin: 0;
  font-size: 48px;
  font-family: var(--font-thin);
  font-weight: 100;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.pc-right__copy p {
  margin: 8px 0 0;
  font-size: 32px;
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.pc-right .hs-hero__nav {
  background-color: transparent;
}

.pc-right .hs-hero__nav--prev {
  background-image: url("../image/PreviousButtondarkdefault.svg");
}

.pc-right .hs-hero__nav--next {
  background-image: url("../image/Nextbuttondarkdefault.svg");
}

/* 6. Exhibition Mosaic */
.em-section {
  padding: 0;
  width: var(--container);
  margin-inline: auto;
}

.em-mosaic {
  display: grid;
  grid-template-columns: minmax(0, var(--home-col-left)) minmax(0, var(--home-col-right));
  gap: var(--home-col-gap);
  margin-top: 0;
  aspect-ratio: 1920 / 920;
}

.em-left,
.em-top {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #333 center / cover no-repeat;
  color: #fff;
  min-height: 0;
}

.em-left {
  height: 100%;
}

.em-left__shade,
.em-top__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 100%);
}

.em-left__copy,
.em-top__copy {
  position: relative;
  z-index: 1;
  padding: 24px;
}

.em-left__year {
  margin: 0;
  font-size: 24px;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.em-left__copy h3 {
  margin: 6px 0 10px;
  font-size: 42px;
  font-family: var(--font-thin);
  font-weight: 100;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.em-left__copy p {
  margin: 0;
  font-size: 24px;
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.em-top {
  min-height: 0;
  display: flex;
  align-items: flex-end;
}

.em-top__title {
  margin: 0 0 6px;
  font-family: var(--font-light);
  font-weight: 300;
  font-size: 32px;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.em-top__copy p {
  margin: 0;
  font-size: 24px;
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.em-right {
  display: grid;
  grid-template-rows: minmax(0, 368fr) minmax(0, 526fr);
  gap: var(--home-col-gap);
  min-height: 0;
}

.em-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--home-col-gap);
  min-height: 0;
}

.em-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #ececec;
  box-shadow: none;
  transition: box-shadow 0.2s ease;
  min-height: 0;
  height: 100%;
}

.em-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.em-card__media {
  flex: 1 1 66%;
  min-height: 0;
  aspect-ratio: auto;
  overflow: hidden;
  background: #ddd;
}

.em-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.em-card__body {
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 7. FAQ Lead ? Pixso 8050_1842: 1920?920, padding 0 162px, panel 624px */
.fl-section {
  position: relative;
  padding: 0;
  color: var(--color-text);
  background: #fff;
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
}

.fl-section__head {
  width: 100%;
  padding: 0;
}

.fl-section .section-head--center {
  gap: 32px;
  padding: 20px 0;
}

.fl-section__body {
  position: relative;
  width: 100%;
  height: 920px;
  padding: 0;
  background: #2a2a2a center / cover no-repeat;
  color: #fff;
  overflow: hidden;
}

.fl-section__shade {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

.fl-section__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  padding: 0 162px;
  gap: 510px;
}

.fl-panel {
  margin-top: 0;
  width: 624px;
  max-width: 624px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}

.fl-section .faq-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fl-section .faq-item {
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  color: var(--color-text);
  border-radius: var(--radius);
  overflow: hidden;
  border: 0;
}

.fl-section .faq-item.is-open {
  background: #fff;
}

.lead-box--on-media {
  width: 100%;
  background: transparent;
  color: #fff;
  padding: 0;
  box-shadow: none;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.lead-box--on-media h3 {
  margin: 0;
  color: #fff;
  font-size: 32px;
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.lead-box--on-media .lead-box__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.lead-box--on-media .lead-box__copy p {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.lead-box--on-media .form-notice {
  margin: 0;
}

.lead-box--on-media .lead-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.lead-box--on-media .lead-form input[type="email"] {
  width: 100%;
  flex: none;
  min-height: 64px;
  height: 64px;
  border: 0;
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-text);
  font-size: 24px;
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: -0.05em;
  padding: 8px 32px;
  box-sizing: border-box;
}

.lead-box--on-media .lead-form input[type="email"]::placeholder {
  color: #8d8d8d;
}

.lead-box--on-media .lead-form .btn {
  width: auto;
  flex-shrink: 0;
  padding: 16px 48px;
  font-size: 12px;
  font-family: var(--font-bold);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1;
}

@media (max-width: 1100px) {
  .fl-section__inner {
    padding: 48px 48px;
    height: auto;
    gap: 0;
  }

  .fl-section__body {
    height: auto;
    min-height: 0;
  }

  .fl-panel {
    width: 100%;
    max-width: 624px;
  }
}

@media (max-width: 768px) {
  .fl-section__inner {
    padding: 40px 24px;
  }

  .fl-section .faq-item__toggle {
    font-size: 22px;
    padding: 14px 20px;
  }

  .fl-section .faq-item__panel {
    padding: 0 20px 14px 52px;
  }

  .lead-box--on-media h3 {
    font-size: 24px;
  }

  .lead-box--on-media .lead-form input[type="email"] {
    font-size: 18px;
    padding: 8px 20px;
  }

  .lead-box--on-media .lead-form .btn {
    width: 100%;
  }
}

@media (max-width: 1100px) {
  .li-row {
    grid-template-columns: 1fr 1fr;
  }

  .hs-slide {
    min-height: 360px;
  }
}

@media (max-width: 768px) {
  .hs-hero__inner,
  .rs-grid,
  .pt-layout,
  .pt-grid,
  .pc-layout,
  .em-mosaic,
  .em-bottom,
  .li-row {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
  }

  .em-right {
    grid-template-rows: auto;
  }

  .pc-left,
  .pc-right,
  .hs-hero__left,
  .hs-hero__carousel,
  .rs-card,
  .em-left,
  .em-top,
  .hs-slide,
  .pt-side {
    min-height: 420px;
    height: auto;
    aspect-ratio: auto;
  }

	.hs-hero__left-title {
		font-size: 32px;
	}

	.hs-slide__btn {
		left: 24px;
		top: auto;
		bottom: 72px;
		padding: 12px 28px;
	}

	.rs-card__title {
		font-size: 32px;
	}

	.rs-card--lg .rs-card__title {
		font-size: 40px;
	}

	.pc-left__panel h3,
	.pc-right__copy h3 {
		font-size: 32px;
	}

	.pc-right__copy p {
		font-size: 22px;
	}

	.faq-item__toggle {
		font-size: 22px;
	}

	.lead-form {
		flex-direction: column;
	}

	.lead-form .btn {
		width: 100%;
	}

	.product-tabs {
		gap: 24px;
		overflow-x: auto;
	}

	.product-tabs__btn {
		font-size: 16px;
		white-space: nowrap;
	}

	/* §6f 件①：.product-card__overlay-title 移动端行随 overlay 族整族删除 */

  .pt-side {
    min-height: 280px;
  }

  .hs-hero__left,
  .hs-hero__carousel {
    min-height: 420px;
  }
}

/* Mobile / tablet: centered column, identical left/right gutters */
@media (max-width: 1100px) {
  :root {
    --page-gutter: 16px;
    --container: 100%;
    --header-container: 100%;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  .site-header,
  .site-main,
  .site-footer,
  .hs-hero,
  .fl-section {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 0;
  }

  .site-nav__container,
  .hs-hero__inner,
  .rs-section,
  .pt-section,
  .li-section,
  .pc-section,
  .em-section,
  .site-footer__inner,
  .container,
  .page-hero__inner,
  .page-content,
  .content-wrap,
  .archive-grid,
  .pagination,
  .pl-hero__inner,
  .pl-list__inner,
  .pd-hero__inner,
  .pd-main__inner,
  .pd-block__inner,
  .empty-state,
  .fl-section__inner {
    width: calc(100% - (var(--page-gutter) * 2));
    max-width: calc(100% - (var(--page-gutter) * 2));
    margin-inline: auto;
    padding-inline: 0;
    box-sizing: border-box;
  }

  .hs-hero__inner,
  .rs-grid,
  .pt-layout,
  .pc-layout,
  .em-mosaic,
  .em-bottom {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
    height: auto;
  }

  .em-right {
    grid-template-rows: auto;
  }

  .fl-section__inner {
    flex-direction: column;
    align-items: stretch;
    padding-block: 40px;
    gap: 32px;
    height: auto;
  }

  .fl-panel {
    width: 100%;
    max-width: 100%;
  }

  .fl-section__body {
    height: auto;
    min-height: 0;
  }

  .pc-certs,
  .product-tabs {
    max-width: 100%;
  }

  .pc-certs__track {
    max-width: none;
  }
}

/* ========== S6 批 b · Materials 线 pd-main + pd-model（t_45ce0db6；表 3/表 4+stage0 §3a D-2/D-5/D-10、gap ⑦''b 缺省态） ==========
   线级作用域=.pd-main--materials / .pd-model*（锆块线旧类名零重定义=回归账交 qa B 节）；
   值出处逐行注释（工单瘦身令：指针形态，数值权威=四表表 3/表 4）。 */
body.is-product-detail .pd-main--materials,
body.is-product-detail .pd-main--sg {
  padding: var(--pd-hero-to-main, 64px) 0 0; /* 表 4：呼吸位 64=页根 pad-top（既有 token 面，禁与 section 间 32 归并=Denny 定性；批 c S&G 同账=同值共选择器，零复制）。 */
}

/* 批 d：Tools 两形态首块呼吸位 64=表 4 页根 pad-top（同 b/c 共 token 面零复制）：
   bur 面首块=⑬判空两态（pd-main-img 有值则渲 → 缺席时 pd-intro 承接首块=64；
   img+intro 相邻=intro 降块间 32〔表 4「块间 gap 32」页根账〕）；grinder 面
   首块=pd-spec__head（表 1 t4 名/sub 区，pd-spec 内 SPEC pd-block 壳 pad-top 归零
   防栈叠=相邻 32 由 head mb 出，F① 机制注记=layout-d-tools 表⑤）。 */
body.is-product-detail .pd-main-img,
body.is-product-detail .pd-intro,
body.is-product-detail .pd-spec__head {
  padding: var(--pd-hero-to-main, 64px) 0 0;
}

body.is-product-detail .pd-main-img + .pd-intro {
  padding-top: 32px; /* img 渲染态=块间 32（表 4 页根 gap；DOM 相邻=模板分叉面在案） */
}

body.is-product-detail .pd-spec__head {
  margin-bottom: 32px; /* head↔SPEC 块=32（表 4 页根 gap 实测） */
}

body.is-product-detail .pd-spec .pd-block {
  padding-top: 0; /* 防 pad-top 栈叠（head mb 已出 32） */
}

/* D-2 互补式：480 + 88 + 872 = 1440（表 4 section_01 行内账；gap=公式组成项非孤值）。 */
.pd-main--materials .pd-main__inner {
  display: grid;
  grid-template-columns: 480px minmax(0, 1fr); /* 左列=FIXED 480 合同槽（表 3 gallery 行）；右列吃剩余（1920 视口下=872，闭合断言交 T1） */
  gap: 88px;
  align-items: start;
}

/* 批 c S&G 同式异值（stage0 §3a D-2=公式非单值：480+96+864=1440，表 4「section_01 行内 gap=96
   vs Materials 88=互补账吻合」行逐字；两线各自内部一致即合规=裁决原文）。 */
.pd-main--sg .pd-main__inner {
  display: grid;
  grid-template-columns: 480px minmax(0, 1fr); /* gallery FIXED 480=轮播列三线共用（D3′ 同 M1） */
  gap: 96px;
  align-items: start;
}

/* m1 gallery（表 3 行1：H/center/end、FIXED 480x480；thumbs 叠底=autoLayout flex-end 语义，代码层用 absolute 层叠=表 3 注「代码层可用 grid/层叠实现」）。
   Rule E 脱流登记：.pd-main__gallery-frame/.pd-main__thumbs 包含块=.pd-main__gallery（position:relative）；面板宽权威=父 FIXED 480。
   批 c：S&G gallery=三线共用同值共选择器（零复制=T1-sk 增项②同源面）。
   K4.5（gap ⑯ 裁 A，t_9a9f1723）：锆块线 gallery 域并入=同值共选择器（单源轮播 CSS 面；
   列宽/gap 走各线 .pd-main__inner 现行账不动——锆块=base 480px+64+content=S3 T2 裁决值零新值；
   R4=零新色（--pd-thumb-ring 复用）；断点零动（width≤480 防溢出=既有 max-width:100% 承接，
   不并入 b/c 的 ≤1100 width:100% 行=该两行为其线级单列塌列态配套，锆块 ≤768 由 base :1998 塌列+本行 max-100% 闭合）。 */
.pd-main--materials .pd-main__gallery,
.pd-main--sg .pd-main__gallery,
.pd-main--zirconia .pd-main__gallery {
  position: relative;
  width: 480px;
  max-width: 100%;
  aspect-ratio: 1 / 1; /* FIXED 480×480（槽 s6-pd-gallery=ph-img-480x480 480²） */
}

.pd-main__gallery-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.pd-main__gallery-frame.is-active {
  opacity: 1;
}

/* thumbs 条（表 3 行2：H gap16/pad16、FILL 宽×HUG 高、thumb=FIXED 88x88；
   D-5 裁决行=数量上限不裁、溢出走条容器横向滚动（overflow-x:auto 照案；5×88+4×16=504>480 红项的处置面）。 */
.pd-main__thumbs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding: 16px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.pd-main__thumb {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius);
  box-shadow: 0 0 0 2px var(--pd-thumb-ring); /* 稿=白描边浮底态（token 化=R4）；选中环=is-active 主色（token 面） */
}

.pd-main__thumb:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.pd-main__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pd-main__thumb.is-active {
  box-shadow: 0 0 0 2px var(--color-primary); /* 选中环=主色 token（R4：不硬编） */
}

/* m2 specs 右列（表 3：V gap32、FIXED 872x480 等高意图→代码层 hug 化=D-10 精神，禁钉 480）。
   批 c：S&G specs=表 3 行1 同值（V/32）共选择器零复制。 */
.pd-main--materials .pd-main__specs,
.pd-main--sg .pd-main__specs {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

/* text-product-name=display-section-1-100 档（42/100，D3 桥表行）；text-subtitle=heading-2-500（24/500）。
   两档与 .pd-headline 现行族同方（S3 E-03 账）→ 选择器并入既有规则尾。
   批 c：S&G specs 头两文=同档同值（表 4「局部样式名复用 Materials 同族」行）共选择器。
   批 d：Tools pd-intro/pd-spec 头两文=同族（Tools 表 4「局部样式名同前两线族」行）共选择器零复制。 */
.pd-main--materials .text-product-name,
.pd-main--sg .text-product-name,
.pd-intro .text-product-name,
.pd-spec .text-product-name {
  font-family: var(--font-thin);
  font-weight: 100;
  font-size: var(--fs-display-3);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-text); /* --color-text-primary=#686868（D3 实测，STATE §3 一致面） */
}

.pd-main--materials .text-subtitle,
.pd-main--sg .text-subtitle,
.pd-intro .text-subtitle,
.pd-spec .text-subtitle {
  margin: 8px 0 0; /* name↔subtitle=内容对 8（Denny 8x 规范块↔线级） */
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: var(--fs-heading-2);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-text);
}

/* advantages↔application 并排（表 3 行4：H gap32、两列=HUG）。 */
.pd-main__advantages-application {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 32px;
}

.pd-main__advantages-application > * {
  flex: 0 1 auto;
  min-width: 0;
}

/* list-advantages（表 2 行5 绑 key_features；行高 20.8=16×1.3 衍生豁免族=body-300 档自然账）。
   bullets 装饰点=R5=CSS 伪元素生成，不入数据。
   批 c T1-sk 增项②单源面：S&G 各 bullets 族（key-features/set-contents/storage/precautions）
   与 S3 线 .list-application 同方（表 4「间距实测族：…16、8」+稿 bullets 形）→
   选择器并组禁复制整段。 */
.list-advantages,
.list-key-features,
.list-set-contents,
.list-storage-instructions,
.list-precautions ul,
.pd-intro__group-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.list-advantages li,
.list-key-features li,
.list-set-contents li,
.list-storage-instructions li,
.list-precautions li,
.pd-intro__group-list li {
  position: relative;
  padding-left: 16px;
}

.list-advantages li::before,
.list-key-features li::before,
.list-set-contents li::before,
.list-storage-instructions li::before,
.list-precautions li::before,
.pd-intro__group-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text); /* R5=decor 点全 CSS（伪元素），禁入数据 */
}

.list-advantages__title,
.list-key-features__title { /* 批 c：S&G Key Features 题=同档共选择器（表 4 同族行；body-300 基+题 500=稿 106:15 加粗段账）。 */
  font-family: var(--font-medium);
  font-weight: 500;
}

/* application 两列（表 2 行6：>6 条折第二列、每列≤6；表 3 行5：H gap32 双 text 节点并排=非 CSS columns，数据拆列渲染案=阶段 0 决议落本批）。 */
.pd-main__application {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 32px;
}

.list-application {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-medium);
  font-weight: 500; /* body-600 档=16/500（D3 桥表名不符警告行：信值不信名） */
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.list-application li {
  position: relative;
  padding-left: 16px;
}

.list-application li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text);
}

/* master-data 数据组并排（表 3 行6：H gap16、组=HUG、decor 线=1xFILL 高→组间竖线 CSS 化 R5）。 */
.pd-main__master-data {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
}

.pd-main__spec-group {
  position: relative; /* 竖线伪元素包含块（Rule E） */
  display: flex;
  flex-direction: column;
  gap: 16px; /* 表 3 spec-group 行：V 16/0；label↔value 内容对 16（表 4） */
  flex: 0 1 auto;
  min-width: 0;
}

.pd-main__spec-group + .pd-main__spec-group::before {
  content: "";
  position: absolute;
  left: -8px; /* gap16 居中：-gap/2（表 3「组间竖线=1xFILL 高」语义 CSS 化） */
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--pd-decor-line); /* black-0.1 token 化（表 3 行6 decor 线权威；R4=值入 token，登记交 T1.5 汇总） */
}

.pd-main__spec-group-label {
  font-family: var(--font-light); /* heading-2-300 档（D3 桥表：24/300 --font-light） */
  font-weight: 300;
  font-size: var(--fs-heading-2);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-text);
  text-transform: uppercase;
}

.pd-main__spec-group-value {
  font-family: var(--font);
  font-weight: 400; /* body-300=16/400 */
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  overflow-wrap: break-word;
}

/* pd-model 通栏表（表 3 行7–11 + M3b 增量行；D-10：行高 hug 化禁钉 FIXED340/val 壳 20）。
   列数=model_options 行数（2↔3 数据驱动）：cell=1fr 等分 + 中缝 2px 竖线（表 3「二分栏+中缝 2px 线」；3 列态列宽 479=(1440−4)/3 由 fr 派生，
   禁照抄 719/479 定宽=子体几何不入合同 Rule C；Press 红项 687 定宽不复制=已清算账）。 */
.pd-model {
  display: flex;
  flex-direction: column;
  gap: 0; /* K4.6 回正（DSL 59:6 pd-model__table gap=0 实测）：表 3「V 16/0」的 16=组级 title↔table 呼吸
   （已由 .pd-section-title margin-bottom:16 承担，同账禁双距）——此前误置行堆 gap=16
   =行间 16px 白缝（竖缝断开+横线缺位的根因，S1 现象①）；行带界=1px decor 横线族（下方）。 */
  border-top: 1px solid var(--pd-decor-line); /* 表首顶线=DSL 58:192 decor-line-h-a（w1440×h1 y=0）K4.6；容器级=同方一规则 */
  border-bottom: 1px solid var(--pd-decor-line); /* 表尾底线=DSL 62:720 decor-line-h-d（y=272=表壳底沿）K4.6 */
}

.pd-model__head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); /* 列数=DOM 子列数（数据驱动 2↔3）；断点零新增（红线④） */
  gap: 2px;
  background: var(--pd-decor-line); /* 中缝 2px 线=行间隙露底（表 3 行8；decor token 同上映射） */
}

.pd-model__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 2px;
  background: var(--pd-decor-line);
}

.pd-model__cell {
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  gap: 16px; /* cell 内 gap16（表 3 行8） */
  padding: 8px 16px; /* pad[8,16]（表 3 行8 + 表 4 单元格 pad 行；8 倍数合规） */
  min-width: 0;
}

/* 行间横线=相邻行壳 border-top 1px 露黑0.1（「双行夹横线」结构 CSS 化 R5，禁数据分隔符入内容）。
   head↔首行 junction=参考件 DSL m3 行带界 y71→72（head 底=横线）S1 现象①返工补 K4.6；
   表首顶线/表尾底线=容器 .pd-model border 面（上方，DSL 58:192+62:720），同方不重复。 */
.pd-model__head + .pd-model__row,
.pd-model__row + .pd-model__row {
  border-top: 1px solid var(--pd-decor-line);
}

.pd-model__form-col {
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px;
  min-width: 0;
}

.pd-model__form-title {
  font-family: var(--font-medium);
  font-weight: 500; /* heading-1-500=32/500（表 4 文本 token 行） */
  font-size: var(--fs-heading-1);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-text);
  text-transform: uppercase;
}

.pd-model__form-sub {
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.pd-model__row-title {
  font-family: var(--font-light); /* heading-2-300（m3/m3b 行题档） */
  font-weight: 300;
  font-size: var(--fs-heading-2);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-text);
  text-transform: uppercase;
}

.pd-model__val {
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  overflow-wrap: break-word;
  min-height: 0; /* D-10：文本壳禁 FIXED 高（表 3 val 行 E 红项→hug 语义，computed 高随内容=T1-sk 断言） */
}

/* Materials 线页 FAQ 列位（stage0 §6 D-1 裁决行=新语义 x=162 与 Footer 左边距同轨；D3′ 库件 240=锆块已上线页不回改）。
   实现=显式 margin-left=max(0,(min(vw,1920)−内容宽)/2−78)：@1920 恰 240−78=162（1920 画布桌面账=断言出处带）；
   内容栏收窄带（vw≤1488，inner=vw−48）公式为负→0=FAQ 贴内容栏左缘=与 Footer 同轨语义的自然延伸
   （修正轮实录：曾拟 @1596 media 带=新断点值违红线④，改无查询 clamp；窄带观感交 T2）。
   线级作用域 body.is-line-materials（topzir_line_body_class，helpers 注册，functions.php 白名单外零触）。
   批 c：S&G 页同 D-1 语义（「新页面照 162」裁决原文）=同公式共选择器并组，零复制。
   批 d：Tools 页同 D-1 语义（同原文，bur+grinder 两形态同一 is-line-tools body 类）。 */
body.is-product-detail.is-line-materials .faq-cta__inner,
body.is-product-detail.is-line-sg .faq-cta__inner,
body.is-product-detail.is-line-tools .faq-cta__inner {
  margin-left: max(0px, calc((min(100vw, 1920px) - min(1440px, 100vw - 48px)) / 2 - 78px));
  margin-right: auto;
}

/* Materials 线无 hero 态（序表 §1：hero 素材/发布控制未到位=块隐藏缺省态）：
   hero 高度塌陷为面包屑条（.pd-hero FIXED 512=O-1 锆块账，本态禁继承）；
   面包屑→主内容区=64 表 4 呼吸位（list mb 归零+pd-main pad-top 64 精确闭合=裁量步登记 layout 表③）。
   P-1 文字契约值：文字=--color-text-primary、路径=black-0.5（表 4 注行；token 登记交 T1.5 汇总，非新造色值）。 */
.pd-hero--bare {
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 24px 0 0;
}

.pd-hero--bare .breadcrumb__list {
  margin-bottom: 0;
}

.pd-hero--bare .breadcrumb__item,
.pd-hero--bare .breadcrumb__item a {
  color: var(--pd-breadcrumb-dark);
}

.pd-hero--bare .breadcrumb__item.is-current,
.pd-hero--bare .breadcrumb__item.is-current span {
  color: var(--color-text);
}

.pd-hero--bare .breadcrumb__item:not(:last-child)::after {
  filter: invert(1) brightness(0.4); /* 稿=箭头深色态（既有浅色 SVG 反色，decor 件 CSS 化 R5；观感留 T2） */
}

/* 响应带（断点值复用主题既有 1100/768=红线④零新增；本线稿面仅桌面账→窄带处置=裁量步登记 layout 表）。 */
@media (max-width: 1100px) {
  .pd-main--materials .pd-main__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .pd-main--materials .pd-main__gallery {
    width: 100%;
    max-width: 480px;
  }

  .pd-model__head,
  .pd-model__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    background: var(--color-divider);
  }

  .pd-main__advantages-application,
  .pd-main__application,
  .pd-main__master-data {
    flex-wrap: wrap;
  }

  .pd-main--sg .pd-main__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .pd-main--sg .pd-main__gallery {
    width: 100%;
    max-width: 480px;
  }

  .pd-main--sg .pd-main__contents-advantages,
  .pd-application--sg .pd-application__body {
    flex-wrap: wrap;
  }
}

/* ========== S6 批 c · S&G 线（t_59b457c7；dtc-main-sg 表 3/表 4 + stage0 §3a D-2 互补式
   480+96+864=1440 / D-7 色卡 grid 成组 / D-10 hug；gap ①-b/⑦'/⑩ 缺省态）。
   线级作用域=.pd-main--sg / .pd-color--sg / .pd-application--sg / .pd-handling*；
   与批 b 共用面=选择器并组零复制（上方 b 段已注）；禁 CSS 双源=T1-sk 增项②。
   值出处逐行注释（工单瘦身令：指针形态，数值权威=四表表 3/表 4）。 */

/* specs 壳1 intro-features（表 3 行2：V/16；⑦' Product Introduction 到位前=
   壳内单文；Key Features 块=①-b 终判照绑 key_features）。 */
.pd-main--sg .pd-main__intro-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.text-product-introduction {
  margin: 0;
  font-family: var(--font);
  font-weight: 400; /* body-300 档（切片 92_1082 实测；表 4 间距族+D3 桥表「信值不信名」） */
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

/* specs 壳2 contents-advantages（表 3 行3：H/16、cell=HUG 顶对齐；左 SET 右 ADV+竖线。
   竖线=表 3「+竖线」CSS 化 R5=相邻列 ::before 1px（b 批 spec-group 同配方单源族）；
   单列态（①-b 到位前=ADVANTAGES 不渲染）无相邻=线自然不出=数据驱动显隐非硬编码。
   cell 宽=HUG 派生（稿件 240/215=子体快照不入合同=Rule C）。 */
.pd-main--sg .pd-main__contents-advantages {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
}

.pd-main--sg .pd-main__contents-advantages > * {
  position: relative; /* 竖线伪元素包含块（Rule E 留痕=本行） */
  flex: 0 1 auto;
  min-width: 0;
}

.pd-main__set-contents + .pd-main__advantages::before {
  content: "";
  position: absolute;
  left: -8px; /* gap16 居中：-gap/2（表 3 行3 decor 线语义） */
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--pd-decor-line); /* black-0.1 token 化（批 b 同 token；R4 零新色） */
}

/* 块题=heading-2-300 档（切片 92_1085/106_5 类名实测）；题↔列表=16（表 4 间距族
   「16（contents-advantages、标题区）」行）。 */
.pd-main__block-title {
  margin: 0 0 16px;
  font-family: var(--font-light);
  font-weight: 300;
  font-size: var(--fs-heading-2);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-text);
}

/* pd-color--sg 通栏（表 3 pd-color 段；D-7 裁决行=grid 成组、列数数据驱动、
   禁 687 定宽复制、禁两排独立行）。列数=auto-fill 128 槽+gap32（表 3 swatches 行
   H/32、槽 FIXED 128）→1440 下 9 列=稿 9+7 两排同 grid 自然账（4608 16 色）；
   4609 8 色=单排 8 列（增删行不串列=T1-sk 增项①结构性保证，swatch+label 逐列同格）。
   稿「gap96+space_between 单子=无效 autoLayout DEV 勿继承」（表 3 行）→不写。 */
.pd-color__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 128px);
  gap: 32px;
  justify-content: flex-start;
  margin: 0; /* 线↔内容节奏归 .pd-section-title margin（b 批同纪律） */
}

.pd-color__swatch-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px; /* 图↔名=内容对 8（Denny 8x；稿两排独立行=已判废弃结构非合同项=Rule D 兄弟间距禁入） */
  min-width: 0;
}

.pd-color__swatch {
  width: 128px;
  height: 128px;
  display: block;
  object-fit: cover;
  border-radius: var(--radius);
}

.pd-color__swatch--hex {
  /* 色块面=inline background-color 读 color_hex 数据值（D1 L68「仅前端色块显示」；
     R4 零发明色——色值来自字段非本规则）。 */
}

.pd-color__swatch.is-missing {
  background: var(--color-border); /* 缺件灰=既有 token（nav-lang-flag is-missing 先例同方，R4） */
}

.pd-color__shade {
  width: 128px; /* 表 3 行「文 128 定宽」=槽宽（非 687 异值，Press 红项不复制=D-7 原文） */
  font-family: var(--font-medium);
  font-weight: 500; /* body-600 档=16/500（切片 92_1497 实测；D3「信值不信名」） */
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

/* pd-application--sg 通栏（表 3 行：H/24、文 672 FILL 高×图 480 FIXED）。
   右余 264 留白=稿观察项待目检定性质（表 3 行注）→DEV 不填充、justify 默认 start。
   ⑩ label=「APPLICATION METHOD」按稿面渲染（模板面；gap 表 ⑩ 缺省行）。 */
.pd-application--sg .pd-application__body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
}

.pd-application--sg .pd-application__steps {
  flex: 0 1 672px; /* 表 3「文 672」（FILL 高=文本壳不钉高=D-10 精神，hug） */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.text-application-steps__title {
  margin: 0;
  font-family: var(--font-medium);
  font-weight: 500; /* body-600 全系（切片 92_1233 实测=题+文同档；':' =模板面 R5） */
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.text-application-steps__desc {
  margin: 0;
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.pd-application--sg .pd-application__media {
  flex: 0 0 480px; /* 表 3 图 FIXED 480×320（M1 s6-app-method-media） */
}

.pd-application--sg .pd-application__media img {
  width: 480px;
  height: 320px;
  max-width: 100%;
  display: block;
  object-fit: cover;
  border-radius: var(--radius);
}

.pd-application__placeholder.is-missing {
  width: 480px;
  height: 320px;
  max-width: 100%;
  display: block;
  background: var(--color-border); /* ph-img-480x320 本地实测缺件（probe-c-sg-env 2026-10-07）=
    D-3 放行面入库前降级态（工单缺省行；token 复用 R4 零新色，nav 先例同方） */
}

/* pd-handling（表 3 行「pd-model 同款骨架=访谈样式通用布局不同实证」）。
   同源复用度=T1-sk 增项②：head/row/cell/form-title/中缝/响应带全走批 b 已批
   .pd-model* 选择器（模板同时挂双 class），本段只覆写两线差异面=零表样式复制：
   列题大小写=稿 106_37/40 句中大写实测（MODEL 列头全大写差异面；裁量步登记
   layout-c-sg 表④；heading-1-500=32/500 档共 b 面）。 */
.pd-handling .pd-model__form-title {
  text-transform: none;
}

/* ========== S6 批 d · Tools 线（t_84e65004；dtc-main-tools 表 3/表 4 + stage0 §3a
   D-4 缺货兜底 / D-6 转置向 / D-8 四组等分 / D-9 单模板判空 / D-10 hug / D-11 置顶图）。
   线级作用域=.pd-main-img / .pd-intro / .pd-system-spec / .pd-spec*（+body.is-line-tools
   公共件面=上方 FAQ 162 并组已注）；与 b/c 共用面=text-product-name/subtitle/bullets
   族/呼吸位共选择器零复制；禁 CSS 双源=T1-sk 纪律。
   值出处逐行注释（工单瘦身令：指针形态，数值权威=四表表 3/表 4+参考件 CSS 实测）。 */

/* pd-main-img 通栏（表 3 行1：1920 带×480、槽 1440×480 居中余 240×2=通栏满幅+
   内容区宽同 hero 族；表 2 行1/D-11 有值则渲染，判空在模板/helpers 面=本段仅渲态账）。 */
.pd-main-img__inner {
  width: var(--pd-content-width); /* 1440 内容槽（既有 token 面=hero 同族；b/c inner 同账无自创护栏 pad=T1 实录修正轮，防 1392/1440 两值 ragged） */
  max-width: 1440px;
  margin-inline: auto;
}

.pd-main-img__shot {
  display: block;
  width: 100%;
  max-width: 1440px;
  height: auto; /* FIXED 1440×480 合同槽（表 3 实测✅/M1）经 aspect 派生高，窄带等比收=D-10 精神（禁钉 480 高致裁） */
  aspect-ratio: 1440 / 480;
  object-fit: cover;
}

/* pd-intro 介绍段（表 3 行2：master-data H gap16、组 FILL 等宽×HUG、组内 V gap16）。
   D-8 裁决行=grid auto-fit minmax(0,1fr) 等分语义保持（稿 4 组等宽=实证规律；
   T-a COATING 缺省不渲染=3 组态等分自然保持=T1-sk 增项断言对象）。 */
.pd-intro__inner {
  width: var(--pd-content-width);
  max-width: 1440px;
  margin-inline: auto; /* b/c inner 同账（无自创 pad=T1 实录修正轮） */
  display: flex;
  flex-direction: column;
  gap: 32px; /* 名区↔四组行（参考件 frame-content-70_456=2rem 实测=表 4 块间族） */
  box-sizing: border-box;
}

.pd-intro__head {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 表 3「name↔sub 16」（参考件 frame-content-70_457=1rem 双账；b/c specs 头同值族） */
}

.pd-intro__master-data {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); /* D-8：等分=1fr；<1100 自然减列=既有 @1100 带内不改本值（auto-fit 断点无关性，红线④零新增） */
  gap: 16px; /* 表 3「H gap16」+参考件 frame-content-70_735=1rem */
}

.pd-intro__group {
  position: relative; /* 组间竖线 ::before 包含块（Rule E 留痕=本行） */
  display: flex;
  flex-direction: column;
  gap: 16px; /* 表 3「组内 V gap16」+参考件 frame-content-70_736=1rem */
  align-items: flex-start;
  min-width: 0;
}

.pd-intro__group + .pd-intro__group::before {
  content: "";
  position: absolute;
  left: -8px; /* gap16 居中=-gap/2（参考件 70_739 竖分隔 1px=表 3「+竖线」CSS 化 R5；b 批 spec-group 同配方族） */
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--pd-decor-line);
}

.pd-intro__group-label {
  font-family: var(--font-light); /* heading-2-300=24/300（表 4「label 24/300」+参考件类名 text---type-heading-2-300 实测） */
  font-weight: 300;
  font-size: var(--fs-heading-2);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-text);
}

.pd-intro__group-list {
  width: 100%;
  min-width: 0;
}

/* pd-system-spec 适配矩阵（表 3 行3：4 列 cell FILL 等宽；缝 2px 竖线×3；pad[8,16]；
   行壳 36/70 FIXED 预警→D-10 hug 化〔T1 实录注：表 3 记「行36 FIXED」与参考件实测
   head70/row36 不符=采参考件 CSS 实测（frame-content 高 4.375rem/2.25rem 快照），且
   两值同判读=壳不钉高、hug 随内容（表 3 行3 预警行原文处置）〕）。
   列数固定 4=合同结构（D-4/⑪「行级即系统级扁平」）；行数=数据驱动（实测 11=「4 列×
   11 行」注记账，稿 5 行全同 Roland=占位演示不入账）。中缝 2px=grid gap+露底 decor
   线机制=pd-model 同款（表 3「缝 2px 竖线」同值同方=复用 b 批已批机制，禁双源）。 */
.pd-system-spec__table {
  display: flex;
  flex-direction: column;
  gap: 0; /* 行间横线=相邻 row border-top（b/c 横线族配方） */
}

.pd-system-spec__head,
.pd-system-spec__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 列数固定 4；cell 等宽=1fr 派生（≈360@1440=表 3 快照值不入合同） */
  gap: 2px;
  background: var(--pd-decor-line); /* 竖缝 2px 露底=表 3「缝 2px 竖线×3」机制 */
  min-width: 0;
}

/* K4.6 表壳顶/尾横线=参考件 t3 账（70_477 表首顶线 y=0 / 92_101 表尾底线；
   S1 现象③「上下横线缺失」=本两规则）；head↔表体交界线=70_496 全宽 1px 见下。 */
.pd-system-spec__table {
  border-top: 1px solid var(--pd-decor-line);
  border-bottom: 1px solid var(--pd-decor-line);
}

.pd-system-spec__body > .pd-system-spec__row:first-child {
  border-top: 1px solid var(--pd-decor-line);
}

.pd-system-spec__th,
.pd-system-spec__td {
  background: var(--color-bg);
  min-width: 0;
  overflow-wrap: break-word; /* "0.6, 1.0…"逗号串软折=helper softbreaks 配合（b 批同纪律） */
}

.pd-system-spec__th {
  padding: 16px; /* 表 3 列题带 pad（参考件 head 壳 70=pad 16×2+行高 38 派生账；表 4 cell pad=[8,16] 行不适列题=取参考件 head 实测 1rem 四周） */
  font-family: var(--font-medium); /* 列题=heading-1-500 32/500（表 4「列题 32/500」+参考件类名 text---type-heading-1-500 实测） */
  font-weight: 500;
  font-size: var(--fs-heading-1);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-text);
}

.pd-system-spec__td {
  padding: 8px 16px; /* 表 3/表 4「表 cell pad=[8,16]」+参考件 frame-content-70_507=0.5rem 1rem ✅ */
  font-family: var(--font);
  font-weight: 400; /* value=body-300 16/400（表 4「value 16/400」） */
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.pd-system-spec__row + .pd-system-spec__row {
  border-top: 1px solid var(--pd-decor-line); /* 行间横线=参考件 70_496 0.0625rem CSS 化 R5（pd-model 行族同方） */
}

/* D-4 缺货行（子字段到位前本态不触发=正常渲染，工单缺省行）：整行灰化+数值
   cell 固定串 `---`+原生 title tooltip 均在模板/helpers 面；本规则=到位后样式账。
   零新 token（D-4 原文 var(--color-text-muted) 既有面）。 */
.pd-system-spec__row.is-out-of-stock .pd-system-spec__td {
  color: var(--color-text-muted);
}

/* Grinder pd-spec 转置表（D-6 裁决行=渲染向照稿〔行属性×列型号〕，合同结构不动=
   转置全在本 grid 面；表 3 行4：attr 174 FIXED+shots FILL 等分、组 V gap24、
   组高 331 预警→hug）。名/sub=head 区（表 1 t4 pd-spec-head；档=text-* 族共 b/c 面）。 */
.pd-spec__head {
  width: var(--pd-content-width);
  max-width: 1440px;
  margin-inline: auto; /* b/c inner 同账（无自创 pad=T1 实录修正轮） */
  display: flex;
  flex-direction: column;
  gap: 16px; /* 名↔sub（表 3 行2 族同账；参考件 head 子间距非本批断言对象） */
  box-sizing: border-box;
}

.pd-spec__body .pd-section-title {
  margin-bottom: 16px; /* 题↔组区=表 4 块间 gap32 页根账下的题-线-内容既有节奏（c 批 pd-section-title 面零重定义，本行仅作用域护栏） */
}

.pd-spec__group {
  display: flex;
  flex-direction: column;
  gap: 0; /* 行间横线=相邻 row border-top（参考件 147_661/674=0.0625rem；row+row 族配方） */
  border-top: 1px solid var(--pd-decor-line); /* 组壳顶线=参考件 147_1178/1266/1352/1438/1476（组首 100%×1px）K4.6 */
  border-bottom: 1px solid var(--pd-decor-line); /* 组壳底线=参考件 147_1264/1522（组尾）K4.6 */
}

/* K4.6 行间横线=相邻行 border-top（参考件 147_661/674=0.0625rem 行带界；
   pd-model/system-spec row+row 同配方族=此前注释承诺但规则未落=现象①竖线断开的 pd-spec 面根因）。 */
.pd-spec__row + .pd-spec__row {
  border-top: 1px solid var(--pd-decor-line);
}

.pd-spec__group + .pd-spec__group {
  margin-top: 24px; /* 组间=表 3「pd-spec 组 V gap24」专项行（vs 表 4 页级 32 差异=F⑤，取表 3；参考件 frame-content-147_595=1.5rem 同值双账✅） */
}

.pd-spec__row {
  display: grid;
  grid-template-columns: 174px minmax(0, 1fr); /* D-6：attr 列 FIXED 174=表 3 合同结构值+型号列区 FILL 等分 */
  gap: 2px;
  background: var(--pd-decor-line); /* attr↔shots 竖缝 2px=参考件 147_613=0.125rem ✅（机制同 pd-model 缝账） */
  min-width: 0;
}

.pd-spec__attr {
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  gap: 8px; /* attr 行夹（参考件 frame-content-147_611=0.5rem 实测；壳 FIXED 高=不写=D-10 hug） */
  padding: 8px 16px; /* 表 3 cell pad=[8,16]（参考件同值） */
  min-width: 0;
}

.pd-spec__attr-item {
  display: flex;
  flex-direction: column; /* 上下叠=label/value 两段（参考件 147_612 top:0/147_868 top:1.25rem 左排双段实测；截图目检同账=无冲突） */
  min-width: 0;
}

.pd-spec__attr-label {
  font-family: var(--font-medium); /* attr label=body-600 16/500（参考件类名 text---type-body-600；D3「信值不信名」=16/500） */
  font-weight: 500;
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  white-space: nowrap; /* 标签列宽 174 内不折行（值列折行不受影响） */
}

.pd-spec__attr-value {
  font-family: var(--font);
  font-weight: 400; /* value=body-300 16/400（表 4 +参考件 147_868 类名实测） */
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  overflow-wrap: break-word;
  min-height: 0; /* D-10：文本壳禁 FIXED 高（表 3「属性档 FIXED 40 壳」E 红项族=hug 语义=T1-sk 断言 computed 高随内容） */
}

.pd-spec__shots {
  background: var(--color-bg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); /* 型号列=数据驱动等分（表 3「列数（型号数）数据驱动→shots 内 FILL 等分 OK」；列数 DOM 驱动=auto-fit 复用 pd-model 机制，零行内变量〔T1 实录注：初稿 --pd-spec-cols 行内注入作废=列宽合同由 DOM 数出，行内变量=第二权威风险〕） */
  gap: 16px; /* 表 3 shot 行「H gap16」+参考件 frame-content-147_614=1rem ✅ */
  padding: 8px 16px;
  align-items: flex-start;
  min-width: 0;
}

.pd-spec__shot {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.pd-spec__shot img {
  width: 192px;
  height: 240px; /* 表 3「192×240 FIXED」竖版新尺寸族（D-3 放行；M1 s6-grinder-shot-{a..f}） */
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.pd-spec__placeholder.is-missing {
  width: 192px;
  height: 240px;
  max-width: 100%;
  display: block;
  background: var(--color-border); /* ph-img-192x240 本地实测缺件（probe-d-tools-values 2026-10-07）=D-3 放行面入库前降级态（c 批 DEV-3/480x320 同方；token 复用 R4 零新色） */
}

.pd-spec__row-models,
.pd-spec__row-size {
  align-items: stretch;
}

.pd-spec__row-title {
  background: var(--color-bg);
  display: flex;
  align-items: center;
  padding: 0 16px; /* 行题格 pad（参考件 frame-content-147_663=0 1rem ✅） */
  font-family: var(--font-medium); /* 行题=heading-2-500 24/500（参考件 147_664/990 类名 text---type-heading-2-500 实测；ITEM NO./SIZE*L(mm)=模板固定展示词逐字对位表 2 行8/9） */
  font-weight: 500;
  font-size: var(--fs-heading-2);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-text);
}

.pd-spec__row-values {
  background: var(--color-bg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); /* 型号列区等分=与 shots 列同机制同列数（值行/图行列位对位=T1-sk 增项「attr/型号列宽账」断言对象；T1 实录修正轮：cell 保持 stretch=192 列宽与图行同轨，居中=text-align 非轴对齐，防 hug 58.6 假列宽） */
  gap: 16px;
  padding: 0 16px;
  min-width: 0;
}

.pd-spec__model {
  font-family: var(--font-medium); /* 型号值=body-600 16/500（参考件 147_667 类名实测） */
  font-weight: 500;
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  text-align: center; /* 参考件 147_666 格 justify/align-center 实测 */
  overflow-wrap: break-word;
}

.pd-spec__size-value {
  /* K4.6 根因修复：此前 grid-column:1/-1 跨整行=挤到第二行→首行空轨露 row 壳 decor 灰底
     +值行错位（S1 现象②「灰底错误+行混乱」）。值面账不变=组级范围串非逐型号值、单值占
     型号列区一格（F③ 上报行沿用，禁拆分发明=合同值条款）；题+值各占 row grid 两列=DOM 序自然落位。 */
  background: var(--color-bg); /* 值格白底=与 row-title/row-values 同族（透明露底=灰底根因面） */
  display: flex;
  align-items: center;
  justify-content: center; /* 单值=型号列区居中（稿行值格 center 账） */
  padding: 0 16px; /* 值区 pad 同 .pd-spec__row-values 账 */
  min-width: 0;
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  text-align: center;
  overflow-wrap: break-word;
}