/* page-family stylesheet: css/xgz-type-product.css */
/* ==========================================================================
   Xinguangzheng · 产品细分页类型层 type-product.css v1.0（皮肤·产品细分页用；叠在组件层之后）
   只有细分页用到的：尺寸配置器、尺寸卡、规格构件图、构型卡、货架柱距、成本因素 + 报价卡、规范与荷载、制造与质量（深色带）、应用滚动图带、案例轮播等
   规则：选择器 .xgz- 前缀；色值只走 --xgz-* 令牌（派生用 color-mix）；字号只走 --xgz-fs-*（允许 calc）；图片位与示意图不做动画
   由 csssplit.py 从 layout6.css / hub/layout-hub.css / blocks.css / home/layout-home.css 按"谁在用"拆出；拆分前后三页 × A/B/C × 4 宽度逐元素计算样式与截图全等
   ========================================================================== */
.xgz-sub { margin-top: var(--xgz-s9); }
.xgz-scope .xgz-sub-h { font-size: var(--xgz-fs-lg); font-weight: var(--xgz-fw-bold); color: var(--xgz-ink); margin: 0 0 var(--xgz-s4); }
.xgz-hero .xgz-eyebrow { display: inline-flex; align-items: center; gap: var(--xgz-s2); margin-bottom: var(--xgz-s4); }
.xgz-hero-visual { position: relative; }
.xgz-hero-photo { display: none; }
.xgz-trust ul { display: flex; flex-wrap: wrap; }
.xgz-trust li { display: flex; align-items: center; gap: var(--xgz-s2); font-size: var(--xgz-fs-sm); font-weight: var(--xgz-fw-medium); line-height: var(--xgz-lh-ui); }
.xgz-trust svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.xgz-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--xgz-s5); }
.xgz-size { display: flex; flex-direction: column; background: var(--xgz-surface); border: 1px solid var(--xgz-line); border-radius: var(--xgz-card-r); overflow: hidden; transition: border-color var(--xgz-t-fast), box-shadow var(--xgz-t-fast); }
.xgz-size-body { display: flex; flex-direction: column; gap: var(--xgz-s2); padding: var(--xgz-s5); flex: 1; }
.xgz-size-dim { display: flex; align-items: baseline; justify-content: space-between; gap: var(--xgz-s3); }
.xgz-scope .xgz-size-dim h3 { font-size: var(--xgz-fs-xl); margin: 0; font-variant-numeric: tabular-nums; }
.xgz-size-area { font-size: var(--xgz-fs-sm); font-weight: var(--xgz-fw-bold); color: var(--xgz-accent-text); white-space: nowrap; }
.xgz-size-body p { font-size: var(--xgz-fs-base); line-height: 1.65; color: var(--xgz-ink-3); margin: 0; }
.xgz-scope .xgz-size-go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding-top: var(--xgz-s3); font-size: var(--xgz-fs-sm); font-weight: var(--xgz-fw-bold); color: var(--xgz-brand-text); text-decoration: none; background: none; border: none; cursor: pointer; }
.xgz-scope .xgz-size-go::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.xgz-scope .xgz-size-go:hover { color: var(--xgz-brand-text-h); }
@media (max-width: 900px) { 
  .xgz-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) { 
  .xgz-sizes { grid-template-columns: 1fr; gap: var(--xgz-s3); }
  .xgz-size { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
  .xgz-size-body { padding: var(--xgz-s3) var(--xgz-s4); gap: var(--xgz-s1); }
  .xgz-scope .xgz-size-dim h3 { font-size: var(--xgz-fs-lg); }
  .xgz-size-dim { flex-wrap: wrap; column-gap: var(--xgz-s2); row-gap: 0; }
  .xgz-size-body p { font-size: var(--xgz-fs-sm); line-height: 1.55; }
  .xgz-scope .xgz-size-go { padding-top: var(--xgz-s1); }
}
/* ==========================================================================
   S3 构型卡 PR-CONFIG + 产品专属块 PR-TECH--rack
   ========================================================================== */
.xgz-configs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--xgz-s5); }
.xgz-config { background: var(--xgz-surface); border: 1px solid var(--xgz-line); border-radius: var(--xgz-card-r); overflow: hidden; display: flex; flex-direction: column; }
.xgz-config .xgz-fig { background: var(--xgz-fig-bg); padding: var(--xgz-s4) var(--xgz-s5); }
.xgz-config-body { padding: var(--xgz-s5); display: flex; flex-direction: column; gap: var(--xgz-s2); flex: 1; }
.xgz-config-body p { font-size: var(--xgz-fs-base); line-height: 1.65; color: var(--xgz-ink-3); margin: 0; }
.xgz-config-key { margin-top: auto; padding-top: var(--xgz-s3); border-top: 1px solid var(--xgz-line); font-size: var(--xgz-fs-sm); font-weight: var(--xgz-fw-bold); color: var(--xgz-ink); }
@media (max-width: 900px) { 
  .xgz-configs { grid-template-columns: 1fr; }
  .xgz-config { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
@media (max-width: 600px) { 
  .xgz-config { display: flex; }
}
.xgz-tech { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--xgz-s8); align-items: center; }
.xgz-tech .xgz-fig { background: var(--xgz-fig-bg); border-radius: var(--xgz-card-r); padding: var(--xgz-s5); }
.xgz-kv { display: grid; gap: 0; border-top: 1px solid var(--xgz-line); }
.xgz-kv > div { display: grid; grid-template-columns: 9.5em 1fr; gap: var(--xgz-s4); padding: var(--xgz-s4) 0; border-bottom: 1px solid var(--xgz-line); }
.xgz-kv dt { font-size: var(--xgz-fs-xs); font-weight: var(--xgz-fw-bold); letter-spacing: var(--xgz-ls-caps); text-transform: uppercase; color: var(--xgz-ink-3); padding-top: 3px; }
.xgz-kv dd { margin: 0; font-size: var(--xgz-fs-md); color: var(--xgz-ink); }
.xgz-kv dd span { display: block; font-size: var(--xgz-fs-sm); color: var(--xgz-ink-3); }
@media (max-width: 900px) { 
  .xgz-tech { grid-template-columns: 1fr; gap: var(--xgz-s6); }
}
@media (max-width: 420px) { 
  .xgz-kv > div { grid-template-columns: 1fr; gap: 2px; }
}
.xgz-incl { display: grid; grid-template-columns: 1fr 1fr; background: var(--xgz-surface); border: 1px solid var(--xgz-line); border-radius: var(--xgz-card-r); overflow: hidden; }
.xgz-incl-col { padding: var(--xgz-s6); }
.xgz-incl-col + .xgz-incl-col { border-left: 1px solid var(--xgz-line); background: var(--xgz-surface-2); }
.xgz-incl-col h3 { font-size: var(--xgz-fs-base); text-transform: uppercase; letter-spacing: var(--xgz-ls-caps); margin: 0 0 var(--xgz-s3); }
.xgz-incl-col li { position: relative; padding-left: var(--xgz-s6); font-size: var(--xgz-fs-base); line-height: 1.55; color: var(--xgz-ink-2); }
.xgz-incl-col li + li { margin-top: var(--xgz-s2); }
.xgz-incl-col li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 10px; height: 5px; border-left: 2px solid var(--xgz-accent-text); border-bottom: 2px solid var(--xgz-accent-text); transform: rotate(-45deg); }
.xgz-incl-col--no li::before { top: 9px; width: 10px; height: 0; border-left: none; border-bottom: 2px solid var(--xgz-ink-4); transform: none; }
.xgz-drivers { margin-top: var(--xgz-s5); }
.xgz-drivers td:first-child { font-weight: var(--xgz-fw-bold); color: var(--xgz-ink); width: 30%; }
@media (max-width: 600px) { 
  .xgz-incl { grid-template-columns: 1fr; }
  .xgz-incl-col + .xgz-incl-col { border-left: none; border-top: 1px solid var(--xgz-line); }
}
/* ==========================================================================
   S5 规范与荷载 EN-CODES + 交付文件 EN-DOCS
   ========================================================================== */
.xgz-eng { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--xgz-s8); align-items: start; }
.xgz-codes { display: flex; flex-wrap: wrap; gap: var(--xgz-s2); margin: var(--xgz-s4) 0 var(--xgz-s5); }
.xgz-codes li { font-size: var(--xgz-fs-sm); font-weight: var(--xgz-fw-bold); color: var(--xgz-ink); border: 1px solid var(--xgz-ink); border-radius: var(--xgz-btn-r); padding: var(--xgz-s1) var(--xgz-s3); font-variant-numeric: tabular-nums; }
.xgz-eng .xgz-fig { background: var(--xgz-fig-bg); border-radius: var(--xgz-card-r); padding: var(--xgz-s4) var(--xgz-s5); margin-top: var(--xgz-s5); }
.xgz-docs { border: 1px solid var(--xgz-line); border-radius: var(--xgz-card-r); background: var(--xgz-surface); }
.xgz-docs-h { padding: var(--xgz-s4) var(--xgz-s5); border-bottom: 1px solid var(--xgz-line); font-size: var(--xgz-fs-xxs); font-weight: var(--xgz-fw-bold); letter-spacing: var(--xgz-ls-caps-wide); text-transform: uppercase; color: var(--xgz-ink-3); margin: 0; }
.xgz-docs li { display: grid; grid-template-columns: 40px 1fr; gap: var(--xgz-s3); padding: var(--xgz-s4) var(--xgz-s5); border-bottom: 1px solid var(--xgz-line); }
.xgz-docs li:last-child { border-bottom: none; }
.xgz-docs svg { width: 32px; height: 32px; fill: none; stroke: var(--xgz-accent-text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.xgz-docs b { display: block; color: var(--xgz-ink); font-size: var(--xgz-fs-md); line-height: 1.4; }
.xgz-docs span { display: block; font-size: var(--xgz-fs-sm); color: var(--xgz-ink-3); line-height: 1.55; margin-top: 2px; }
@media (max-width: 900px) { 
  .xgz-eng { grid-template-columns: 1fr; }
}
.xgz-site[data-dir="a"] .xgz-hero .xgz-eyebrow { color: var(--xgz-on-deep-2); }
.xgz-site[data-dir="a"] .xgz-hero .xgz-eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--xgz-brand); }
.xgz-site[data-dir="a"] .xgz-hero-visual .xgz-fig { position: relative; padding: var(--xgz-s5); }
.xgz-site[data-dir="a"] .xgz-hero-visual .xgz-fig::before, .xgz-site[data-dir="a"] .xgz-hero-visual .xgz-fig::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--xgz-brand); }
.xgz-site[data-dir="a"] .xgz-hero-visual .xgz-fig::before { left: 0; top: 0; border-right: none; border-bottom: none; }
.xgz-site[data-dir="a"] .xgz-hero-visual .xgz-fig::after { right: 0; bottom: 0; border-left: none; border-top: none; }
.xgz-site[data-dir="a"] .xgz-trust { position: relative; z-index: 2; border-top: 1px solid var(--xgz-on-deep-line); }
.xgz-site[data-dir="a"] .xgz-trust ul { justify-content: space-between; gap: var(--xgz-s4); padding: var(--xgz-s5) 0; }
.xgz-site[data-dir="a"] .xgz-trust li { color: var(--xgz-on-deep); font-size: var(--xgz-fs-xs); letter-spacing: var(--xgz-ls-caps); text-transform: uppercase; }
.xgz-site[data-dir="a"] .xgz-trust svg { color: var(--xgz-brand); }
.xgz-site[data-dir="a"] .xgz-size:hover, .xgz-site[data-dir="a"] .xgz-config:hover { border-color: var(--xgz-brand); }
.xgz-site[data-dir="a"] .xgz-config .xgz-fig, .xgz-site[data-dir="a"] .xgz-tech .xgz-fig, .xgz-site[data-dir="a"] .xgz-eng .xgz-fig {
  background-image: linear-gradient(var(--xgz-grid-fine) 1px, transparent 1px), linear-gradient(90deg, var(--xgz-grid-fine) 1px, transparent 1px); background-size: 16px 16px;
}
.xgz-site[data-dir="a"] .xgz-sec--dark .xgz-kicker { color: var(--xgz-on-deep-2); }
.xgz-site[data-dir="a"] .xgz-sec--dark .xgz-facts, .xgz-site[data-dir="a"] .xgz-sec--dark .xgz-fact { border-color: var(--xgz-on-deep-line); }
.xgz-site[data-dir="a"] .xgz-sec--dark .xgz-fact b { color: var(--xgz-on-deep); }
.xgz-site[data-dir="a"] .xgz-sec--dark .xgz-fact span { color: var(--xgz-on-deep-2); }
.xgz-site[data-dir="a"] .xgz-sec--dark .xgz-sub-h { color: var(--xgz-on-deep); }
@media (max-width: 900px) { 
  .xgz-site[data-dir="a"] .xgz-trust ul { justify-content: flex-start; column-gap: var(--xgz-s6); row-gap: var(--xgz-s3); }
}
.xgz-site[data-dir="b"] .xgz-trust { width: 100%; }
.xgz-site[data-dir="b"] .xgz-hero-photo {
  display: flex; position: absolute; inset: 0; z-index: 0; border: none; border-radius: 0; aspect-ratio: auto;
  align-items: flex-end; justify-content: flex-end; padding: var(--xgz-s6) var(--xgz-s7) calc(var(--xgz-s10) + var(--xgz-s8));
  background: radial-gradient(120% 90% at 78% 30%, var(--xgz-deep-3), var(--xgz-deep) 70%); color: var(--xgz-on-deep-2);
}
.xgz-site[data-dir="b"] .xgz-hero-visual .xgz-fig { display: none; }
.xgz-site[data-dir="b"] .xgz-hero .xgz-eyebrow { color: var(--xgz-on-deep); background: color-mix(in srgb, var(--xgz-on-deep) 14%, transparent); padding: var(--xgz-s1) var(--xgz-s3); border-radius: 999px; }
.xgz-site[data-dir="b"] .xgz-trust { position: relative; z-index: 3; margin-top: calc(var(--xgz-s10) * -1); }
.xgz-site[data-dir="b"] .xgz-trust ul { background: var(--xgz-surface); border-radius: var(--xgz-r-lg); box-shadow: var(--xgz-shadow-2); padding: var(--xgz-s5) var(--xgz-s6); justify-content: space-between; gap: var(--xgz-s4); }
.xgz-site[data-dir="b"] .xgz-trust li { color: var(--xgz-ink); }
.xgz-site[data-dir="b"] .xgz-trust svg { color: var(--xgz-accent-text); }
.xgz-site[data-dir="b"] .xgz-size, .xgz-site[data-dir="b"] .xgz-config, .xgz-site[data-dir="b"] .xgz-incl, .xgz-site[data-dir="b"] .xgz-docs { border-color: transparent; box-shadow: var(--xgz-shadow); }
.xgz-site[data-dir="b"] .xgz-size:hover { box-shadow: var(--xgz-shadow-2); }
.xgz-site[data-dir="b"] .xgz-sec--dark .xgz-sub-h { color: var(--xgz-on-deep); }
.xgz-site[data-dir="b"] .xgz-sec--dark .xgz-kicker { color: var(--xgz-on-deep-2); }
.xgz-site[data-dir="b"] .xgz-sec--dark .xgz-fact span { color: var(--xgz-on-deep-2); }
.xgz-site[data-dir="b"] .xgz-sec--dark .xgz-facts { border: none; gap: var(--xgz-s3); }
.xgz-site[data-dir="b"] .xgz-sec--dark .xgz-fact b { color: var(--xgz-accent); }
.xgz-site[data-dir="b"] .xgz-sec--dark .xgz-fact b small { color: var(--xgz-on-deep); }
@media (max-width: 900px) { 
  .xgz-site[data-dir="b"] .xgz-hero-photo { padding-bottom: var(--xgz-s4); padding-right: var(--xgz-s4); }
  .xgz-site[data-dir="b"] .xgz-hero-photo .xgz-ph-t { display: none; }
  .xgz-site[data-dir="b"] .xgz-trust ul { justify-content: flex-start; column-gap: var(--xgz-s6); row-gap: var(--xgz-s3); }
}
.xgz-site[data-dir="c"] .xgz-hero .xgz-eyebrow { color: var(--xgz-ink-3); }
.xgz-site[data-dir="c"] .xgz-hero .xgz-eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--xgz-brand); }
.xgz-site[data-dir="c"] .xgz-hero-visual .xgz-fig { background: var(--xgz-surface); border: 1px solid var(--xgz-line); border-radius: var(--xgz-r-md); padding: var(--xgz-s6); }
.xgz-site[data-dir="c"] .xgz-trust { background: var(--xgz-surface); border-bottom: 1px solid var(--xgz-line); }
.xgz-site[data-dir="c"] .xgz-trust ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.xgz-site[data-dir="c"] .xgz-trust li { padding: var(--xgz-s4) var(--xgz-s4); color: var(--xgz-ink-2); font-size: var(--xgz-fs-sm); }
.xgz-site[data-dir="c"] .xgz-trust li + li { border-left: 1px solid var(--xgz-line); }
.xgz-site[data-dir="c"] .xgz-trust svg { color: var(--xgz-brand); }
.xgz-site[data-dir="c"] .xgz-config .xgz-fig { border-bottom: 1px solid var(--xgz-line); }
.xgz-site[data-dir="c"] .xgz-tech .xgz-fig, .xgz-site[data-dir="c"] .xgz-eng .xgz-fig { border: 1px solid var(--xgz-line); }
.xgz-site[data-dir="c"] .xgz-size:hover, .xgz-site[data-dir="c"] .xgz-config:hover { border-color: var(--xgz-ink-3); }
@media (max-width: 1024px) { 
  .xgz-site[data-dir="c"] .xgz-trust ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xgz-site[data-dir="c"] .xgz-trust li:nth-child(4) { border-left: none; }
  .xgz-site[data-dir="c"] .xgz-trust li:nth-child(n+4) { border-top: 1px solid var(--xgz-line); }
}
@media (max-width: 600px) { 
  .xgz-site[data-dir="c"] .xgz-trust ul { grid-template-columns: 1fr 1fr; }
  .xgz-site[data-dir="c"] .xgz-trust li { border-left: none !important; border-top: 1px solid var(--xgz-line); }
  .xgz-site[data-dir="c"] .xgz-trust li:nth-child(even) { border-left: 1px solid var(--xgz-line) !important; }
  .xgz-site[data-dir="c"] .xgz-trust li:nth-child(-n+2) { border-top: none; }
}
.xgz-cfg .xgz-fig .f-line { stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.xgz-cfg { --panel-ink: var(--xgz-ink); --panel-text: var(--xgz-ink-3); --panel-line: var(--xgz-line); position: relative; }
.xgz-cfg-stage { position: relative; aspect-ratio: 16 / 9.4; }
.xgz-cfg-svg { position: absolute; inset: 0; }
.xgz-cfg-svg svg { width: 100%; height: 100%; }
.xgz-cfg-stage .f-txt { font-size: var(--xgz-fs-md); letter-spacing: 0; }
.xgz-cfg-tag { position: absolute; left: var(--xgz-s4); top: var(--xgz-s3); z-index: 1; font-size: var(--xgz-fs-xxs); font-weight: var(--xgz-fw-bold); letter-spacing: var(--xgz-ls-caps-wide); text-transform: uppercase; color: var(--panel-text); }
.xgz-cfg-body { display: grid; gap: var(--xgz-s4); padding: var(--xgz-s5); color: var(--panel-text); }
.xgz-cfg-presets { display: flex; align-items: center; gap: var(--xgz-s3); flex-wrap: wrap; }
.xgz-cfg-presets label { font-size: var(--xgz-fs-xs); font-weight: var(--xgz-fw-bold); letter-spacing: var(--xgz-ls-caps); text-transform: uppercase; color: var(--panel-text); }
.xgz-cfg-presets select { font: inherit; font-size: var(--xgz-fs-sm); min-height: 36px; padding: 0 var(--xgz-s3); border-radius: var(--xgz-btn-r); border: 1px solid var(--panel-line); background: transparent; color: var(--panel-ink); }
.xgz-cfg-presets select option { color: var(--xgz-ink); }
.xgz-sliders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--xgz-s5); }
.xgz-slider { display: grid; gap: var(--xgz-s1); }
.xgz-slider-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--xgz-s2); }
.xgz-slider label { font-size: var(--xgz-fs-xs); font-weight: var(--xgz-fw-bold); letter-spacing: var(--xgz-ls-caps); text-transform: uppercase; color: var(--panel-text); }
.xgz-slider output { font-size: var(--xgz-fs-xl); font-weight: var(--xgz-fw-black); color: var(--panel-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.xgz-slider output small { font-size: var(--xgz-fs-sm); font-weight: var(--xgz-fw-bold); margin-left: 2px; color: var(--panel-text); }
.xgz-rangein { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0; }
.xgz-rangein::-webkit-slider-runnable-track { height: 4px; border-radius: var(--xgz-r-sm); background: linear-gradient(90deg, var(--xgz-fig-accent) var(--p, 50%), var(--panel-line) var(--p, 50%)); }
.xgz-rangein::-moz-range-track { height: 4px; border-radius: var(--xgz-r-sm); background: var(--panel-line); }
.xgz-rangein::-moz-range-progress { height: 4px; border-radius: var(--xgz-r-sm); background: var(--xgz-fig-accent); }
.xgz-rangein::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--xgz-surface); border: 3px solid var(--xgz-fig-accent); box-shadow: 0 2px 6px color-mix(in srgb, var(--xgz-deep) 30%, transparent); transition: transform var(--xgz-t-fast); }
.xgz-rangein:active::-webkit-slider-thumb { transform: scale(1.15); }
.xgz-rangein::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--xgz-surface); border: 3px solid var(--xgz-fig-accent); }
.xgz-rangein:focus-visible { outline: 2px solid var(--xgz-accent); outline-offset: 2px; }
.xgz-cfg-out { display: flex; justify-content: space-between; align-items: center; gap: var(--xgz-s4); flex-wrap: wrap; padding-top: var(--xgz-s4); border-top: 1px solid var(--panel-line); }
.xgz-cfg-out dl { display: flex; gap: var(--xgz-s6); margin: 0; }
.xgz-cfg-out dt { font-size: var(--xgz-fs-xxs); font-weight: var(--xgz-fw-bold); letter-spacing: var(--xgz-ls-caps); text-transform: uppercase; color: var(--panel-text); }
.xgz-cfg-out dd { margin: 2px 0 0; font-size: var(--xgz-fs-xl); font-weight: var(--xgz-fw-black); color: var(--panel-ink); font-variant-numeric: tabular-nums; white-space: nowrap; transform-origin: left center; }
.xgz-scope .xgz-cfg-note { font-size: var(--xgz-fs-xs); line-height: 1.5; color: var(--panel-text); min-height: 1.5em; margin: 0; }
.xgz-cfg-note b { color: var(--panel-ink); font-weight: var(--xgz-fw-bold); }
@media (max-width: 600px) { 
  .xgz-sliders { grid-template-columns: 1fr; gap: var(--xgz-s2); }
  .xgz-cfg-body { padding: var(--xgz-s4); }
  .xgz-cfg-out dl { gap: var(--xgz-s4); }
  .xgz-cfg-out .xgz-btn { flex: 1 1 100%; justify-content: center; }
}
.xgz-scope .xgz-size-3d { position: absolute; right: var(--xgz-s2); top: var(--xgz-s2); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--xgz-btn-r); border: 1px solid color-mix(in srgb, var(--xgz-fig-line) 45%, transparent); background: color-mix(in srgb, var(--xgz-fig-bg) 80%, transparent); color: var(--xgz-fig-text); cursor: pointer; opacity: 0.7; transition: opacity var(--xgz-t-fast), background var(--xgz-t-fast), color var(--xgz-t-fast); }
.xgz-scope .xgz-size-3d:hover, .xgz-scope .xgz-size-3d:focus-visible, .xgz-size:hover .xgz-size-3d { opacity: 1; }
.xgz-scope .xgz-size-3d:hover { background: var(--xgz-brand); border-color: var(--xgz-brand); color: var(--xgz-on-deep); }
.xgz-size.is-current { border-color: var(--xgz-brand); box-shadow: inset 0 3px 0 var(--xgz-brand); }
.xgz-size.is-current .p-rect { fill: color-mix(in srgb, var(--xgz-fig-accent) 26%, transparent); }
@media (max-width: 600px) { 
  .xgz-scope .xgz-size-3d { width: 30px; height: 30px; right: 4px; top: 4px; }
}
.xgz-spec-n--none { border-color: transparent; }
.xgz-scope .xgz-plants .xgz-sub-h { margin-bottom: var(--xgz-s3); }
.xgz-ptabs { display: flex; border-bottom: 1px solid var(--xgz-line); margin-bottom: var(--xgz-s4); overflow-x: auto; scrollbar-width: none; }
.xgz-scope .xgz-ptab { flex: none; font: inherit; padding: var(--xgz-s3) var(--xgz-s4); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: var(--xgz-fs-sm); font-weight: var(--xgz-fw-bold); color: var(--xgz-ink-3); cursor: pointer; transition: color var(--xgz-t-fast), border-color var(--xgz-t-fast); }
.xgz-scope .xgz-ptab:hover { color: var(--xgz-ink); }
.xgz-scope .xgz-ptab[aria-selected="true"] { color: var(--xgz-ink); border-bottom-color: var(--xgz-brand); }
.xgz-plant { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--xgz-s4) var(--xgz-s7); align-items: start; }
.xgz-plant .xgz-ph { aspect-ratio: 16 / 9; grid-row: span 2; }
.xgz-plant.is-in { animation: xgz-rise 0.45s var(--xgz-ease); }
.xgz-plant-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--xgz-s5); margin: 0; border-top: 1px solid var(--xgz-line); }
.xgz-plant-kv > div { padding: var(--xgz-s3) 0; border-bottom: 1px solid var(--xgz-line); }
.xgz-plant-kv dt { font-size: var(--xgz-fs-xxs); font-weight: var(--xgz-fw-bold); letter-spacing: var(--xgz-ls-caps); text-transform: uppercase; color: var(--xgz-ink-3); }
.xgz-plant-kv dd { margin: 2px 0 0; font-weight: var(--xgz-fw-bold); color: var(--xgz-ink); }
.xgz-plant-eq { display: flex; flex-wrap: wrap; gap: 6px; }
.xgz-plant-eq li { font-size: var(--xgz-fs-xs); font-weight: var(--xgz-fw-bold); color: var(--xgz-ink); background: var(--xgz-accent-tint); border-radius: var(--xgz-btn-r); padding: var(--xgz-s1) var(--xgz-s2); }
.xgz-scope .xgz-plant-all { font-size: var(--xgz-fs-sm); line-height: 1.6; color: var(--xgz-ink-3); margin: var(--xgz-s4) 0; }
.xgz-plant-media { display: flex; flex-wrap: wrap; gap: var(--xgz-s2); }
.xgz-scope .xgz-plant-media .xgz-btn { background: var(--xgz-surface); }
@media (max-width: 700px) { 
  .xgz-plant { grid-template-columns: 1fr; }
  .xgz-plant .xgz-ph { grid-row: auto; }
}
/* ==========================================================================
   S8 项目：v1 卡片轮播 + 海外项目地图 + 国内工程滚动条
   ========================================================================== */
.xgz-carnav { display: flex; gap: var(--xgz-s2); }
.xgz-scope .xgz-carbtn { width: 42px; height: 42px; border-radius: var(--xgz-btn-r); border: 1px solid var(--xgz-line); background: var(--xgz-surface); color: var(--xgz-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color var(--xgz-t-fast), background var(--xgz-t-fast), color var(--xgz-t-fast); }
.xgz-scope .xgz-carbtn:hover { border-color: var(--xgz-brand); background: var(--xgz-brand); color: var(--xgz-on-deep); }
.xgz-scope .xgz-carbtn:disabled { opacity: 0.35; cursor: default; background: var(--xgz-surface); color: var(--xgz-ink); border-color: var(--xgz-line); }
.xgz-carbtn .xgz-btn-ico { width: 18px; height: 18px; }
.xgz-car { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--xgz-s5)) / 2.6); gap: var(--xgz-s5); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--xgz-s2); overscroll-behavior-x: contain; cursor: grab; }
.xgz-car::-webkit-scrollbar { display: none; }
.xgz-car.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.xgz-car .xgz-case { scroll-snap-align: start; }
.xgz-case--all { background: var(--xgz-surface-2); }
.xgz-case--all .xgz-case-body { justify-content: center; }
.xgz-scope .xgz-case--all p { margin: 0 0 var(--xgz-s4); color: var(--xgz-ink-3); }
.xgz-case--all .xgz-btn { align-self: flex-start; }
@media (max-width: 900px) { 
  .xgz-car { grid-auto-columns: 84%; }
  .xgz-car .xgz-case { display: flex; }
  .xgz-car .xgz-case .xgz-ph { aspect-ratio: 16 / 9; border-right: none; border-bottom: 1px solid var(--xgz-line); }
}
.xgz-map-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--xgz-s6); margin-top: var(--xgz-s5); }
.xgz-map-list li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: var(--xgz-s3); padding: var(--xgz-s2) 0; border-bottom: 1px solid var(--xgz-line); font-size: var(--xgz-fs-sm); line-height: 1.45; transition: background var(--xgz-t-fast); }
.xgz-map-list b { color: var(--xgz-ink); }
.xgz-map-list span { color: var(--xgz-ink-3); }
.xgz-map-list li.is-on { background: var(--xgz-brand-tint); box-shadow: inset 3px 0 0 var(--xgz-brand); padding-left: var(--xgz-s2); }
@media (max-width: 1024px) { 
  .xgz-map-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) { 
  .xgz-map-list { grid-template-columns: 1fr; }
}
[data-spot] > .xgz-trust { position: relative; z-index: 2; }
@media (prefers-reduced-motion: no-preference) { 
  /* 卡片悬停 */
  .xgz-size, .xgz-config { transition: transform 0.3s var(--xgz-ease), box-shadow 0.3s var(--xgz-ease), border-color var(--xgz-t-fast); }
  body:not(.pv-still) .xgz-site .xgz-size:hover, body:not(.pv-still) .xgz-site .xgz-config:hover { transform: translateY(-4px); box-shadow: var(--xgz-shadow-2); }
}
/* ==========================================================================
   方向覆盖（v3 新块）
   ========================================================================== */
/* A · 工业蓝图 */
.xgz-site[data-dir="a"] .xgz-cfg { --panel-ink: var(--xgz-on-deep); --panel-text: var(--xgz-on-deep-2); --panel-line: var(--xgz-on-deep-line); }
.xgz-site[data-dir="a"] .xgz-hero-visual .xgz-cfg-stage { padding: 0; }
.xgz-site[data-dir="a"] .xgz-cfg-body { background: color-mix(in srgb, var(--xgz-deep-2) 88%, transparent); border: 1px solid var(--xgz-on-deep-line); margin-top: var(--xgz-s3); }
.xgz-site[data-dir="b"] .xgz-hero-visual .xgz-cfg-stage { display: block; }
.xgz-site[data-dir="b"] .xgz-cfg { background: color-mix(in srgb, var(--xgz-surface) 94%, transparent); border-radius: var(--xgz-r-lg); box-shadow: 0 30px 70px color-mix(in srgb, var(--xgz-deep) 45%, transparent); backdrop-filter: blur(10px); overflow: hidden; }
.xgz-site[data-dir="b"] .xgz-cfg-stage { background: var(--xgz-fig-bg); margin: var(--xgz-s3) var(--xgz-s3) 0; border-radius: var(--xgz-r-lg); }
/* C · 浅色简洁 */
.xgz-site[data-dir="c"] .xgz-cfg { background: var(--xgz-surface); border: 1px solid var(--xgz-line); border-radius: var(--xgz-r-md); }
.xgz-site[data-dir="c"] .xgz-hero-visual .xgz-cfg-stage { border: 0; border-bottom: 1px solid var(--xgz-line); border-radius: 0; padding: 0; background: var(--xgz-surface); }
.xgz-site[data-dir="b"] .xgz-sec--dark .xgz-kicker { color: var(--xgz-on-deep-2); }
/* ---------- 01 尺寸卡：链接改墨色（红色只留给主按钮与选中），手机横滑 ---------- */
.xgz-scope .xgz-size-go { color: var(--xgz-ink); }
.xgz-scope .xgz-size-go:hover { color: var(--xgz-brand-text-h); }
@media (max-width: 600px) { 
  .xgz-sizes { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--xgz-s3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--xgz-s2); overscroll-behavior-x: contain; }
  .xgz-sizes::-webkit-scrollbar { display: none; }
  .xgz-site .xgz-sizes .xgz-size { display: flex; flex-direction: column; scroll-snap-align: start; }
}
/* ---------- 03 货架：左图右参数 + 滑杆 ---------- */
.xgz-tech { align-items: start; }
.xgz-plants { margin-top: clamp(var(--xgz-s9), 6vw, 88px); }
.xgz-plants-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--xgz-s4); flex-wrap: wrap; padding-bottom: var(--xgz-s3); margin-bottom: var(--xgz-s5); border-bottom: 1px solid var(--sec-line); }
.xgz-scope .xgz-plants-head .xgz-sub-h { margin: 0; color: var(--sec-ink); }
.xgz-site .xgz-ptabs { display: flex; gap: var(--xgz-s1); border: 0; margin: 0; overflow-x: auto; scrollbar-width: none; }
.xgz-scope .xgz-ptab { display: grid; justify-items: start; gap: 0; padding: var(--xgz-s2) var(--xgz-s4); border: 1px solid var(--sec-line); border-radius: var(--xgz-btn-r); margin: 0; color: var(--sec-mute); line-height: 1.25; }
.xgz-scope .xgz-ptab small { font-size: var(--xgz-fs-xxs); font-weight: var(--xgz-fw-medium); color: var(--sec-mute); }
.xgz-scope .xgz-ptab:hover { color: var(--sec-ink); border-color: var(--sec-mute); }
.xgz-scope .xgz-ptab[aria-selected="true"] { color: var(--xgz-on-deep); background: var(--xgz-brand); border-color: var(--xgz-brand); }
.xgz-scope .xgz-ptab[aria-selected="true"] small { color: var(--xgz-on-deep); }
.xgz-site .xgz-plant { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--xgz-s7); align-items: start; }
.xgz-site .xgz-plant .xgz-ph { aspect-ratio: 16 / 9; grid-row: auto; }
.xgz-site .xgz-plant-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top-color: var(--sec-line); }
.xgz-site .xgz-plant-kv > div { border-bottom-color: var(--sec-line); }
.xgz-site .xgz-plant-kv dt { color: var(--sec-mute); }
.xgz-site .xgz-plant-kv dd { color: var(--sec-ink); }
.xgz-site .xgz-plant-eq { display: grid; grid-template-columns: 1fr 1fr; gap: 6px var(--xgz-s4); margin-top: var(--xgz-s4); }
.xgz-site .xgz-plant-eq li { position: relative; padding: 0 0 0 var(--xgz-s4); background: none; border-radius: 0; font-size: var(--xgz-fs-sm); font-weight: var(--xgz-fw-medium); color: var(--sec-text); }
.xgz-plant-eq li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; background: var(--xgz-brand); }
.xgz-plants-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--xgz-s5); flex-wrap: wrap; margin-top: var(--xgz-s5); padding-top: var(--xgz-s4); border-top: 1px solid var(--sec-line); }
.xgz-scope .xgz-plant-all { margin: 0; max-width: 72ch; color: var(--sec-mute); }
.xgz-scope .xgz-plant-media .xgz-btn { background: transparent; }
.xgz-site[data-dir="c"] .xgz-sec--dark .xgz-btn--ghost { color: var(--xgz-ink); border-color: var(--xgz-line); }
.xgz-site[data-dir="c"] .xgz-sec--dark .xgz-btn--ghost:hover { background: var(--xgz-surface); color: var(--xgz-ink); }
@media (max-width: 800px) { 
  .xgz-site .xgz-plant { grid-template-columns: minmax(0, 1fr); gap: var(--xgz-s4); }
}
@media (max-width: 420px) { 
  .xgz-site .xgz-plant-eq { grid-template-columns: 1fr; }
}
/* ---------- 08 项目：地图左侧说明 + 国家按钮；国内工程一行 ---------- */
.xgz-site .xgz-world { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(var(--xgz-s6), 4vw, 56px); align-items: start; margin-top: clamp(var(--xgz-s9), 6vw, 88px); }
.xgz-scope .xgz-world-side .xgz-sub-h { margin: 0 0 var(--xgz-s2); }
.xgz-scope .xgz-world-side > p { margin: 0; font-size: var(--xgz-fs-sm); line-height: 1.6; color: var(--xgz-ink-3); }
.xgz-map-more summary { cursor: pointer; font-size: var(--xgz-fs-sm); font-weight: var(--xgz-fw-bold); color: var(--xgz-ink); list-style: none; display: inline-flex; align-items: center; gap: var(--xgz-s2); }
.xgz-map-more summary::-webkit-details-marker { display: none; }
.xgz-map-more summary::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--xgz-t-fast); }
.xgz-map-more[open] summary::after { transform: translateY(1px) rotate(225deg); }
.xgz-site .xgz-map-more .xgz-map-list { grid-template-columns: minmax(0, 1fr); margin-top: var(--xgz-s3); }
.xgz-site .xgz-map-list li { grid-template-columns: 7.5em minmax(0, 1fr); }
@media (max-width: 900px) { 
  .xgz-site .xgz-world { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- 首屏配置器 A：图与控件合成一块，取景框角放在整块上 ---------- */
.xgz-site[data-dir="a"] .xgz-cfg { border: 1px solid var(--xgz-on-deep-line); background: color-mix(in srgb, var(--xgz-deep-2) 72%, transparent); }
.xgz-site[data-dir="a"] .xgz-cfg-body { background: none; border: 0; border-top: 1px solid var(--xgz-on-deep-line); margin-top: 0; }
.xgz-site[data-dir="a"] .xgz-hero-visual .xgz-cfg-stage::before, .xgz-site[data-dir="a"] .xgz-hero-visual .xgz-cfg-stage::after { display: none; }
.xgz-site[data-dir="a"] .xgz-cfg::before, .xgz-site[data-dir="a"] .xgz-cfg::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--xgz-brand); z-index: 1; pointer-events: none; }
.xgz-site[data-dir="a"] .xgz-cfg::before { left: -6px; top: -6px; border-right: 0; border-bottom: 0; }
.xgz-site[data-dir="a"] .xgz-cfg::after { right: -6px; bottom: -6px; border-left: 0; border-top: 0; }
.xgz-site .xgz-fact b .xgz-fact-pre { margin: 0 2px 0 0; font-size: var(--xgz-fs-md); font-weight: var(--xgz-fw-bold); }
.xgz-scope .xgz-size-body p, .xgz-scope .xgz-config-body p, .xgz-scope .xgz-docs span { font-size: var(--xgz-fs-md); }
.xgz-scope .xgz-config-body h3 { font-size: var(--xgz-fs-xl); }
@media (max-width: 600px) { 
  /* ---------- 手机：构型卡横滑，减少纵向长度 ---------- */
  .xgz-site .xgz-configs { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--xgz-s3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--xgz-s2); overscroll-behavior-x: contain; }
  .xgz-site .xgz-configs::-webkit-scrollbar { display: none; }
  .xgz-site .xgz-configs .xgz-config { display: flex; scroll-snap-align: start; }
}
.xgz-site .xgz-hero-photo { background-image: none; }
.xgz-config .xgz-ph { aspect-ratio: 16 / 10; border-radius: 0; }
.xgz-ph--wide { aspect-ratio: 16 / 9; }
.xgz-tech > div:first-child .xgz-ph { width: 100%; }
/* ==========================================================================
   v6 层：第 01 节——尺寸卡设计图位、深色定制卡、应用清单放在尺寸卡之后
   ========================================================================== */
/* 设计图位：灰色角标 + 图纸图标，浅底（设计图多为白底，三套方向都用浅底） */
.xgz-site .xgz-ph--dwg { --ph-c: color-mix(in srgb, var(--xgz-ink-3) 70%, transparent); --ph-bg: var(--xgz-surface-2); color: var(--xgz-ink-3); aspect-ratio: 16 / 10; border-radius: 0; }
.xgz-ph--dwg svg { stroke-width: 1.4; }
.xgz-size-dwg { position: relative; border-bottom: 1px solid var(--xgz-line); }
.xgz-scope .xgz-size-dwg .xgz-size-3d { background: var(--xgz-surface); color: var(--xgz-ink); border-color: var(--xgz-line); opacity: 1; }
.xgz-scope .xgz-size-dwg .xgz-size-3d:hover { background: var(--xgz-brand); border-color: var(--xgz-brand); color: var(--xgz-on-deep); }
.xgz-size.is-current .xgz-size-dwg { border-bottom-color: var(--xgz-brand); }
/* 定制卡：深色收尾 */
.xgz-site .xgz-size--custom { background: var(--xgz-deep-2); border-color: var(--xgz-deep-2); color: var(--xgz-on-deep-2); }
.xgz-site .xgz-size--custom .xgz-size-body { padding: var(--xgz-s6); gap: var(--xgz-s3); }
.xgz-scope .xgz-size--custom h3 { color: var(--xgz-on-deep); font-size: calc(var(--xgz-fs-xl) * 1.2); }
.xgz-site .xgz-size--custom .xgz-size-area { color: var(--xgz-on-deep-2); }
.xgz-scope .xgz-size--custom p { color: var(--xgz-on-deep-2); }
.xgz-site .xgz-size--custom .xgz-btn { margin-top: auto; align-self: flex-start; }
.xgz-site[data-dir="a"] .xgz-size--custom { background-image: linear-gradient(var(--xgz-grid-fine) 1px, transparent 1px), linear-gradient(90deg, var(--xgz-grid-fine) 1px, transparent 1px); background-size: 16px 16px; }
.xgz-site[data-dir="a"] .xgz-size--custom:hover { border-color: var(--xgz-brand); }
.xgz-site[data-dir="b"] .xgz-size--custom { background: var(--xgz-deep); }
.xgz-site[data-dir="c"] .xgz-size--custom { background: var(--xgz-surface); border: 1px solid var(--xgz-ink); color: var(--xgz-ink-2); }
.xgz-site[data-dir="c"] .xgz-size--custom h3 { color: var(--xgz-ink); }
.xgz-site[data-dir="c"] .xgz-size--custom .xgz-size-area, .xgz-site[data-dir="c"] .xgz-size--custom p { color: var(--xgz-ink-3); }
@media (max-width: 600px) { 
  /* 手机：尺寸卡定制卡内边距 */
  .xgz-sizes .xgz-ph--dwg { aspect-ratio: 16 / 10; }
  .xgz-site .xgz-size--custom .xgz-size-body { padding: var(--xgz-s5); }
}
/* 3D 按钮移到卡片底部，与 "Quote this size" 同一行 */
.xgz-size-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--xgz-s3); padding-top: var(--xgz-s3); }
.xgz-scope .xgz-size-foot .xgz-size-go { margin: 0; padding-top: 0; }
.xgz-scope .xgz-size-foot .xgz-size-3d { position: static; width: 32px; height: 32px; opacity: 1; background: var(--xgz-surface); color: var(--xgz-ink-3); border: 1px solid var(--xgz-line); }
.xgz-scope .xgz-size-foot .xgz-size-3d:hover { background: var(--xgz-brand); border-color: var(--xgz-brand); color: var(--xgz-on-deep); }
.xgz-site .xgz-ph--dwg { background-position: left 12px top 12px, left 12px top 12px, right 12px top 12px, right 12px top 12px, left 12px bottom 12px, left 12px bottom 12px, right 12px bottom 12px, right 12px bottom 12px; }
@media (min-width: 601px) and (max-width: 900px) { 
  /* 两栏时定制卡跨满一行，避免最后一行空半格 */
  .xgz-site .xgz-size--custom { grid-column: 1 / -1; }
  .xgz-site .xgz-size--custom .xgz-size-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--xgz-s6); }
  .xgz-site .xgz-size--custom .xgz-size-dim, .xgz-site .xgz-size--custom p { grid-column: 1; }
  .xgz-site .xgz-size--custom .xgz-size-dim { justify-content: flex-start; align-items: baseline; gap: var(--xgz-s3); }
  .xgz-site .xgz-size--custom .xgz-btn { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}
.xgz-app { position: relative; display: flex; min-width: 0; grid-column: span 3; }
.xgz-app:nth-child(-n+3) { grid-column: span 4; }
.xgz-site .xgz-app .xgz-ph { flex: 1; aspect-ratio: 4 / 3; border-radius: 0; padding-bottom: var(--xgz-s10); }
.xgz-site .xgz-sec--alt .xgz-app .xgz-ph { --ph-bg: var(--xgz-surface); }
.xgz-app-tag {
  position: absolute; left: 0; bottom: 0; max-width: calc(100% - var(--xgz-s9));
  display: flex; align-items: baseline; gap: var(--xgz-s2); padding: var(--xgz-s2) var(--xgz-s3);
  background: var(--xgz-deep); color: var(--xgz-on-deep); border-left: 3px solid var(--xgz-brand);
  font-size: var(--xgz-fs-sm); font-weight: var(--xgz-fw-medium); line-height: 1.35;
}
.xgz-app:nth-child(-n+3) .xgz-app-tag { font-size: var(--xgz-fs-md); padding: var(--xgz-s3) var(--xgz-s4); }
.xgz-app-no { flex: none; font-size: var(--xgz-fs-xxs); color: var(--xgz-on-deep-2); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
/* B 实拍大图：圆角图块，标签浮在图内 */
.xgz-site[data-dir="b"] .xgz-app .xgz-ph { border-radius: var(--xgz-card-r); }
.xgz-site[data-dir="b"] .xgz-app-tag { left: var(--xgz-s3); bottom: var(--xgz-s3); max-width: calc(100% - var(--xgz-s10)); border-left: 0; border-radius: var(--xgz-r-sm); }
/* C 浅色简洁：白标签、墨色细框 */
.xgz-site[data-dir="c"] .xgz-app-tag { background: var(--xgz-surface); color: var(--xgz-ink); border: 1px solid var(--xgz-ink); left: var(--xgz-s3); bottom: var(--xgz-s3); max-width: calc(100% - var(--xgz-s10)); }
.xgz-site[data-dir="c"] .xgz-app-no { color: var(--xgz-brand-text); }
.xgz-site[data-dir="c"] .xgz-sec--alt .xgz-app .xgz-ph { --ph-bg: color-mix(in srgb, var(--xgz-ink-3) 7%, var(--xgz-surface)); }
@media (max-width: 1024px) { 
  /* 1024 以下：两行横滑（平板每屏约 2.5 列，手机约 1.5 列） */
  .xgz-app-tag, .xgz-app:nth-child(-n+3) .xgz-app-tag { font-size: var(--xgz-fs-sm); padding: var(--xgz-s2) var(--xgz-s3); }
  .xgz-app, .xgz-app:nth-child(-n+3) { grid-column: auto; scroll-snap-align: start; }
  .xgz-site .xgz-app .xgz-ph { padding-bottom: var(--xgz-s9); }
}
@media (max-width: 600px) { 
  .xgz-app-tag, .xgz-app:nth-child(-n+3) .xgz-app-tag { font-size: var(--xgz-fs-xs); }
}
/* ==========================================================================
   v6.3 层：第 04 节成本——不出任何价格；成本因素表 + 定制报价卡（中部 CTA）+ 包含 / 不包含
   ========================================================================== */
.xgz-costx { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(var(--xgz-s6), 4vw, 56px); align-items: start; }
/* 成本因素表：浅表头、编号、行悬停与右侧勾选项联动 */
.xgz-site .xgz-drivers { margin: 0; background: transparent; border: 0; border-radius: 0; overflow: visible; }
.xgz-scope .xgz-drivers th { background: transparent; color: var(--xgz-ink-3); border-bottom: 2px solid var(--xgz-ink); padding: 0 var(--xgz-s3) var(--xgz-s3) 0; }
.xgz-scope .xgz-drivers tbody td, .xgz-scope .xgz-drivers tbody tr:nth-child(even) td { background: transparent; padding: var(--xgz-s5) var(--xgz-s4) var(--xgz-s5) 0; border-bottom: 1px solid var(--xgz-line); font-size: var(--xgz-fs-md); line-height: 1.6; color: var(--xgz-ink-2); vertical-align: top; transition: background var(--xgz-t-fast), box-shadow var(--xgz-t-fast); }
.xgz-scope .xgz-drivers tbody td:first-child { width: 36%; font-weight: var(--xgz-fw-bold); color: var(--xgz-ink); white-space: normal; padding-left: var(--xgz-s3); }
.xgz-drv-no { display: block; margin-bottom: var(--xgz-s1); font-size: var(--xgz-fs-xs); font-weight: var(--xgz-fw-bold); color: var(--xgz-brand-text-h); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.xgz-scope .xgz-drivers tbody tr.is-on td { background: var(--xgz-surface); }
.xgz-scope .xgz-drivers tbody tr.is-on td:first-child { box-shadow: inset 3px 0 0 var(--xgz-brand); }
/* 定制报价卡：深色，滚动时固定；勾选项 → 计数与进度条 */
.xgz-quotecard {
  --qc-bg: var(--xgz-deep-2); --qc-ink: var(--xgz-on-deep); --qc-text: var(--xgz-on-deep-2); --qc-line: var(--xgz-on-deep-line); --qc-hover: color-mix(in srgb, var(--xgz-on-deep) 7%, transparent);
  position: sticky; top: calc(var(--xgz-header-h) + 72px); padding: var(--xgz-s7) var(--xgz-s6) var(--xgz-s6);
  background: var(--qc-bg); color: var(--qc-text); border-radius: var(--xgz-card-r); overflow: hidden;
}
.xgz-site[data-dir="a"] .xgz-quotecard { border-radius: 0; background-image: linear-gradient(var(--xgz-grid-fine) 1px, transparent 1px), linear-gradient(90deg, var(--xgz-grid-fine) 1px, transparent 1px); background-size: 16px 16px; }
.xgz-site[data-dir="b"] .xgz-quotecard { background-image: linear-gradient(140deg, var(--xgz-deep-2), var(--xgz-deep-3)); border-radius: var(--xgz-r-lg); }
.xgz-site[data-dir="c"] .xgz-quotecard { --qc-bg: var(--xgz-surface); --qc-ink: var(--xgz-ink); --qc-text: var(--xgz-ink-3); --qc-line: var(--xgz-line); --qc-hover: var(--xgz-surface-2); border: 1px solid var(--xgz-ink); border-radius: 0; }
.xgz-quotecard-k { margin: 0 0 var(--xgz-s2); font-size: var(--xgz-fs-xxs); font-weight: var(--xgz-fw-bold); letter-spacing: var(--xgz-ls-caps-wide); text-transform: uppercase; color: var(--qc-text); }
.xgz-scope .xgz-quotecard h3 { margin: 0 0 var(--xgz-s3); font-size: calc(var(--xgz-fs-xl) * 1.3); line-height: 1.2; color: var(--qc-ink); }
.xgz-quotecard-p { margin: 0; font-size: var(--xgz-fs-md); line-height: 1.6; color: var(--qc-text); }
.xgz-quotecard-h { margin: var(--xgz-s6) 0 var(--xgz-s2); font-size: var(--xgz-fs-xs); font-weight: var(--xgz-fw-bold); color: var(--qc-ink); }
.xgz-needs { border-top: 1px solid var(--qc-line); }
.xgz-need { position: relative; display: grid; grid-template-columns: 20px 24px minmax(0, 1fr); align-items: center; gap: var(--xgz-s3); padding: 10px var(--xgz-s2); border-bottom: 1px solid var(--qc-line); cursor: pointer; transition: background var(--xgz-t-fast); }
.xgz-need:hover, .xgz-need.is-on { background: var(--qc-hover); }
.xgz-need input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.xgz-need-box { width: 18px; height: 18px; border: 1.5px solid var(--qc-text); border-radius: 3px; display: grid; place-items: center; transition: background var(--xgz-t-fast), border-color var(--xgz-t-fast); }
.xgz-need-box::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--xgz-on-deep); border-bottom: 2px solid var(--xgz-on-deep); transform: translateY(-1px) rotate(-45deg); opacity: 0; transition: opacity var(--xgz-t-fast); }
.xgz-need input:checked + .xgz-need-box { background: var(--xgz-brand-btn); border-color: var(--xgz-brand-btn); }
.xgz-need input:checked + .xgz-need-box::after { opacity: 1; }
.xgz-need input:focus-visible + .xgz-need-box { outline: 2px solid var(--xgz-accent); outline-offset: 2px; }
.xgz-need-no { font-size: var(--xgz-fs-xs); color: var(--qc-text); font-variant-numeric: tabular-nums; }
.xgz-need-t { font-size: var(--xgz-fs-sm); line-height: 1.4; color: var(--qc-ink); }
.xgz-ready { margin: var(--xgz-s5) 0 var(--xgz-s5); }
.xgz-ready-top { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--xgz-fs-xs); color: var(--qc-text); margin-bottom: var(--xgz-s2); }
.xgz-ready-top b { font-size: var(--xgz-fs-md); color: var(--qc-ink); font-variant-numeric: tabular-nums; }
.xgz-ready-bar { height: 4px; background: var(--qc-line); border-radius: var(--xgz-r-sm); overflow: hidden; }
.xgz-ready-bar span { display: block; height: 100%; width: 0; background: var(--xgz-brand); transition: width 0.35s var(--xgz-ease, ease); }
.xgz-scope .xgz-quotecard .xgz-btn { width: 100%; }
.xgz-site .xgz-cfg-note[hidden] { display: none; }
/* 包含 / 不包含：放在下方整宽 */
.xgz-site #cost .xgz-incl { margin-top: clamp(var(--xgz-s7), 4vw, 56px); }
@media (max-width: 1024px) { 
  .xgz-costx { grid-template-columns: minmax(0, 1fr); }
  .xgz-quotecard { position: relative; top: auto; }
}
@media (max-width: 600px) { 
  .xgz-quotecard { padding: var(--xgz-s5); }
  .xgz-scope .xgz-drivers thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .xgz-site .xgz-drivers table, .xgz-site .xgz-drivers tbody, .xgz-site .xgz-drivers tr, .xgz-site .xgz-drivers td { display: block; width: 100%; }
  .xgz-site .xgz-drivers tbody { border-top: 2px solid var(--xgz-ink); }
  .xgz-site .xgz-drivers tr { padding: var(--xgz-s4) 0; border-bottom: 1px solid var(--xgz-line); }
  .xgz-scope .xgz-drivers tbody td, .xgz-scope .xgz-drivers tbody tr:nth-child(even) td { padding: 0; border: 0; font-size: var(--xgz-fs-sm); }
  .xgz-scope .xgz-drivers tbody td:first-child { width: 100%; padding: 0 0 var(--xgz-s1); font-size: var(--xgz-fs-md); }
  .xgz-drv-no { display: inline; margin: 0 var(--xgz-s2) 0 0; }
}
.xgz-scope .xgz-drivers tbody tr:nth-child(n) td:first-child { padding-left: var(--xgz-s3); }
.xgz-scope .xgz-drivers th:first-child { padding-left: var(--xgz-s3); }
@media (max-width: 600px) { 
  .xgz-scope .xgz-drivers tbody tr:nth-child(n) td:first-child { padding-left: 0; }
  .xgz-scope .xgz-drivers tbody tr:nth-child(n) td:first-child { font-size: var(--xgz-fs-md); padding-bottom: var(--xgz-s1); }
}
/* ==========================================================================
   v6.4 层：① 应用节改全宽滚动图带 ② A 方向"层次"微调（学 NEXO 的叠层：色块垫底、卡片压边、偏移线框、柔和阴影）
   保持 A 的蓝图 + 红 + 左对齐节头不变
   ========================================================================== */
/* ---------- ① 全宽滚动图带（两行反向慢滚；悬停 / 聚焦停；可暂停；减少动效时改手动横滑） ---------- */
.xgz-sec--reel { overflow: hidden; }
.xgz-reels { display: grid; gap: var(--xgz-s4); position: relative; z-index: 1; }
.xgz-reel {
  display: flex; overflow: hidden; padding: 6px 0 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--xgz-deep) 5%, var(--xgz-deep) 95%, transparent); mask-image: linear-gradient(90deg, transparent, var(--xgz-deep) 5%, var(--xgz-deep) 95%, transparent);
}
.xgz-reel-track { display: flex; flex: none; gap: var(--xgz-s4); padding-right: var(--xgz-s4); animation: xgz-marq var(--reel-dur, 60s) linear infinite; }
.xgz-reel--rev .xgz-reel-track { animation-direction: reverse; }
.xgz-reels.is-paused .xgz-reel-track, .xgz-reel:hover .xgz-reel-track, .xgz-reel:focus-within .xgz-reel-track { animation-play-state: paused; }
.xgz-site .xgz-reel .xgz-app { flex: none; width: clamp(250px, 28vw, 380px); grid-column: auto; box-shadow: 0 18px 40px color-mix(in srgb, var(--xgz-deep) 20%, transparent); }
.xgz-site .xgz-reel--rev .xgz-app { width: clamp(220px, 23vw, 310px); }
.xgz-site .xgz-reel .xgz-app .xgz-ph { width: 100%; }
.xgz-site .xgz-reel .xgz-app .xgz-app-tag { font-size: var(--xgz-fs-sm); padding: var(--xgz-s2) var(--xgz-s3); }
.xgz-scope .xgz-reel-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; border: 1px solid var(--sec-line, var(--xgz-line)); background: transparent; color: var(--sec-ink, var(--xgz-ink)); cursor: pointer; transition: background var(--xgz-t-fast), color var(--xgz-t-fast), border-color var(--xgz-t-fast); }
.xgz-scope .xgz-reel-btn:hover { background: var(--xgz-brand); border-color: var(--xgz-brand); color: var(--xgz-on-deep); }
.xgz-reel-btn svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.xgz-reel-btn .xgz-tour-pause { fill: none; }
.xgz-reel-btn[aria-pressed="true"] .xgz-tour-play, .xgz-reel-btn[aria-pressed="false"] .xgz-tour-pause { display: none; }
@media (prefers-reduced-motion: reduce) { 
  .xgz-reel { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; padding-inline: var(--xgz-gutter); scroll-padding-inline: var(--xgz-gutter); }
  .xgz-reel-track { animation: none; }
  .xgz-reel-track[aria-hidden="true"] { display: none; }
  .xgz-reel .xgz-app { scroll-snap-align: start; }
}
.xgz-reel::-webkit-scrollbar { display: none; }
/* 偏移线框（像图纸上错开的第二张图框）：先用底色盖住，再画一圈细线 */
.xgz-site[data-dir="a"] :is(.xgz-quotecard, .xgz-docs, .xgz-size--custom) { box-shadow: var(--ly-off) var(--ly-off) 0 -1px var(--ly-bg), var(--ly-off) var(--ly-off) 0 0 var(--ly-frame), var(--ly-shadow-s); }
/* 首屏：配置器后面一张错开的半透明图框 */
.xgz-site[data-dir="a"] .xgz-hero-visual { position: relative; }
.xgz-site[data-dir="a"] .xgz-hero-visual::before { content: ""; position: absolute; inset: 22px -18px -18px 22px; border: 1px solid var(--xgz-on-deep-line); background: color-mix(in srgb, var(--xgz-on-deep) 3%, transparent); pointer-events: none; }
.xgz-site[data-dir="a"] .xgz-cfg { box-shadow: 0 30px 60px color-mix(in srgb, var(--xgz-deep) 55%, transparent); }
/* 03 结构：货架照片后面错开一张线框，参数卡压在照片右边 */
.xgz-site[data-dir="a"] .xgz-tech { gap: 0; }
.xgz-site[data-dir="a"] .xgz-tech > div:first-child .xgz-ph { box-shadow: calc(var(--ly-off) * -1) var(--ly-off) 0 -1px var(--ly-bg), calc(var(--ly-off) * -1) var(--ly-off) 0 0 var(--ly-frame); }
.xgz-site[data-dir="a"] .xgz-tech > div:last-child { position: relative; z-index: 1; margin-left: -72px; padding: var(--xgz-s6); background: var(--xgz-surface); border-top: 3px solid var(--xgz-brand); box-shadow: var(--ly-shadow); }
/* 06 质量（深色节）：厂区参数面板压在照片右边 */
.xgz-site[data-dir="a"] .xgz-plant { gap: 0; align-items: center; }
.xgz-site[data-dir="a"] .xgz-plant-info { position: relative; z-index: 1; margin-left: -56px; padding: var(--xgz-s6); background: var(--xgz-deep-2); border: 1px solid var(--xgz-on-deep-line); border-top: 3px solid var(--xgz-brand); box-shadow: 0 24px 50px color-mix(in srgb, var(--xgz-deep) 60%, transparent); }
/* 09 项目：地图说明做成白卡，压在地图左边 */
.xgz-site[data-dir="a"] .xgz-world { align-items: center; gap: 0; }
.xgz-site[data-dir="a"] .xgz-world-side { position: relative; z-index: 1; margin-right: -56px; padding: var(--xgz-s6); background: var(--xgz-surface); border-top: 3px solid var(--xgz-brand); box-shadow: var(--ly-shadow); }
@media (max-width: 900px) { 
  .xgz-site[data-dir="a"] .xgz-tech > div:last-child { margin: -40px var(--xgz-s4) 0; }
  .xgz-site[data-dir="a"] .xgz-world-side { margin: 0 0 -24px; }
}
@media (max-width: 800px) { 
  .xgz-site[data-dir="a"] .xgz-plant-info { margin: -32px var(--xgz-s3) 0; }
}
@media (max-width: 600px) { 
  .xgz-site[data-dir="a"] .xgz-hero-visual::before { inset: 14px -8px -10px 14px; }
}
/* v6.4 细调：偏移线框放在卡片阴影之后生效；应用节暂停按钮靠右 */
.xgz-site[data-dir="a"] .xgz-size--custom { box-shadow: var(--ly-off) var(--ly-off) 0 -1px var(--ly-bg), var(--ly-off) var(--ly-off) 0 0 var(--ly-frame), var(--ly-shadow-s); }
#quality .xgz-creds { --sec-ink: var(--xgz-ink); --sec-text: var(--xgz-ink-2); --sec-mute: var(--xgz-ink-3); --sec-line: var(--xgz-line); position: relative; z-index: 2; background: var(--xgz-surface); color: var(--xgz-ink-2); }
.xgz-site #quality .xgz-creds { margin-top: clamp(var(--xgz-s8), 5vw, var(--xgz-s10)); padding: var(--xgz-s6); border-top: 3px solid var(--xgz-brand); }
.xgz-site #quality .xgz-creds .xgz-sub-h { color: var(--xgz-ink); }
@media (max-width: 600px) { 
  .xgz-site #quality .xgz-creds { padding: var(--xgz-s4); }
}
/* v6.6：认证荣誉墙改为一个证书图位（用户 2026-09-28"留一个位置放公司证书"） */
.xgz-site #quality .xgz-creds--img { display: grid; gap: var(--xgz-s4); }
.xgz-site #quality .xgz-creds--img .xgz-sub-h { margin: 0; }
.xgz-site .xgz-ph--certs { aspect-ratio: 3 / 1; border-radius: 0; --ph-bg: var(--xgz-surface-2); }
@media (max-width: 600px) { 
  .xgz-site .xgz-ph--certs { aspect-ratio: 16 / 9; }
}
.xgz-site[data-dir] #quality .xgz-ph--certs {
  --ph-c: var(--xgz-brand); color: var(--xgz-ink-3); border: 0;
  background-color: var(--xgz-surface-2);
  background-image:
    linear-gradient(var(--ph-c) 0 0), linear-gradient(var(--ph-c) 0 0), linear-gradient(var(--ph-c) 0 0), linear-gradient(var(--ph-c) 0 0),
    linear-gradient(var(--ph-c) 0 0), linear-gradient(var(--ph-c) 0 0), linear-gradient(var(--ph-c) 0 0), linear-gradient(var(--ph-c) 0 0);
  background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px;
  background-position: left 12px top 12px, left 12px top 12px, right 12px top 12px, right 12px top 12px, left 12px bottom 12px, left 12px bottom 12px, right 12px bottom 12px, right 12px bottom 12px;
  background-repeat: no-repeat;
}
.xgz-site[data-dir="b"] #quality .xgz-ph--certs { --ph-c: var(--xgz-accent-text); }

.xgz-site .xgz-plants[data-template-process-gallery] .xgz-plant { grid-template-columns: minmax(0, 1fr); }