/**
 * SinoPAK Site — shared frontend + editor styles(全站加载,编辑器 iframe 同源)。
 *
 * 层序(低→高):spk-reset < spk-base < spk-block < spk-responsive
 * 所有前台规则必须写进 @layer;@media 必须包在 spk-responsive 层内。
 * 全局文件只允许 reset / base / responsive 三个层;块文件只允许 block / responsive。
 *
 * 内容分段:
 *   reset      —— 元素重置 + 品牌 token(--spk-x-* 变量,供块 CSS 引用)
 *   base       —— 共享基座:版心 / 通用 section 原语 / 按钮 / 面包屑 / 404 / 页面正文
 *                 (这些 class 被多个块的 HTML 使用,基础样式唯一属主在本文件)
 *   responsive —— 共享基座的响应式覆盖
 *
 * 断点沿用仓库惯例:920px / 640px(站点转换时按原型断点替换,见
 * .agents/skills/html-to-wp-site/references/css-conventions.md)。
 * 规范检查:npm run check:css sinopak。
 */

@layer spk-reset, spk-base, spk-block, spk-responsive;

/* ─────────────────────────── reset ─────────────────────────── */
@layer spk-reset {
  :root {
    /* 品牌 token —— 经 inc/theme-json.php 注入的 theme.json 预设,带字面量兜底 */
    --spk-x-ink: var(--wp--preset--color--ink, #14243a);
    --spk-x-muted: var(--wp--preset--color--muted, #637083);
    --spk-x-line: var(--wp--preset--color--line, #d8e0ea);
    --spk-x-soft: var(--wp--preset--color--pale, #f3f6fa);
    --spk-x-brand: var(--wp--preset--color--navy, #0b3569);
    --spk-x-brand-dark: var(--wp--preset--color--deep, #071f49);
    --spk-x-accent: var(--wp--preset--color--orange, #f28a2e);
    --spk-x-white: var(--wp--preset--color--white, #ffffff);
    --spk-x-radius: 8px;
    --spk-x-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
    /* Fixed-header clearance. --spk-x-header-h is the solid (activated) header's
       height on inner pages (72px desktop, 76px on mobile — see spk-responsive);
       --spk-x-hero-pad-top is the ONE top offset every inner-page first block
       (hero band / breadcrumb bar / project index / project story) shares:
       exactly one header height plus a consistent gap. */
    --spk-x-header-h: 72px;
    --spk-x-hero-pad-top: calc(var(--spk-x-header-h) + clamp(24px, 3vw, 44px));
  }

  /* 与 mu-base 主题重置等价(前台已 dequeue mu-base,见 inc/blocks.php) */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    color: var(--spk-x-ink);
    background: var(--spk-x-white);
    font-family: var(--wp--preset--font-family--primary, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    line-height: 1.5;
  }

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

  /* 标题默认色(原型裸 h2{color:navy})。放在 reset 低层,块组件在 spk-block/
     spk-base 层可覆盖(如深色背景 CTA/footer 的白字标题)。此前它被外包到
     theme.json,WP 输出为 unlayered 反而压过块层白字 —— 已移回此处。 */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--spk-x-brand);
  }

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

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  ul,
  ol,
  dl,
  figure {
    margin: 0;
  }

  /* ── Sticky header 定位修正 ─────────────────────────────────────────
   * WP 核心(未分层)在 .wp-site-blocks 等外壳上设 overflow,会截断
   * sticky/fixed 头部;分层规则压不过未分层规则,此处 !important 是必要的
   * (layered important > unlayered normal),见 css-conventions 背景说明。 */
  .wp-site-blocks,
  .wp-block-template-part,
  .wp-block-group:has(> .spk-x-header-part),
  .spk-x-header-part {
    overflow: visible !important;
  }
}

/* ─────────────────────────── base(共享基座)─────────────────────────── */
@layer spk-base {
  /* 版心:嵌套时回满宽 */
  .spk-x-wrap {
    /* 原型 --shell:最大 1250px,左右留白随视口 clamp(与 footer 块一致) */
    width: min(100% - clamp(64px, 12vw, 260px), 1250px);
    margin: 0 auto;
  }
  .spk-x-wrap .spk-x-wrap {
    width: 100%;
    margin: 0;
  }

  /* 通用 section 原语(spec-table / faq / contact / 法律页 / 博客模板共用) */
  .spk-x-section {
    padding: 86px 0;
  }
  .spk-x-section .spk-x-section {
    padding: 0;
  }
  .spk-x-band {
    background: var(--spk-x-soft);
  }

  /* Video/modal scroll-lock class (matches prototype body.modal-open). */
  body.spk-x-modal-open {
    overflow: hidden;
  }

  .spk-x-eyebrow {
    display: block;
    margin: 0 0 15px;
    color: var(--wp--preset--color--orange, #f28a2e);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }
  .spk-x-section-title {
    margin: 10px 0 14px;
    color: var(--spk-x-brand-dark);
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.08;
  }
  .spk-x-section-lead {
    max-width: 790px;
    color: var(--spk-x-muted);
    font-size: 18px;
  }

  /* Solution/prototype CTA(juice-production-line .cta)—— 内容块共用的橙色实心
     按钮 + 深色底描边次按钮。各块只加尺寸/最小宽等上下文覆盖。 */
  .spk-x-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 28px;
    border: 0;
    border-radius: var(--spk-x-radius);
    background: #ff861f;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.14);
    transition: transform 0.2s ease, background 0.2s ease;
  }
  .spk-x-cta:hover {
    background: #e77112;
    transform: translateY(-2px);
  }
  .spk-x-cta--secondary {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: none;
  }
  .spk-x-cta--secondary:hover {
    background: rgba(255, 255, 255, 0.12);
  }

  /* Solution 页共用原语(juice-production-line section / .section-head /
     .section-label / h2 / .lead / .soft-section)。方案各内容块复用这套头部与
     间距,颜色为原型字面值。 */
  .spk-x-sol-section {
    padding: 92px 0;
  }
  .spk-x-sol-section--soft {
    background: linear-gradient(180deg, #f6fbff 0%, #fff 100%);
  }
  .spk-x-sol-head {
    margin-bottom: 42px;
  }
  .spk-x-sol-head--center {
    text-align: center;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }
  .spk-x-sol-label {
    display: block;
    color: #ff861f;
    font-size: 12px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: 0.24em;
    text-transform: uppercase;
  }
  .spk-x-sol-title {
    margin: 14px 0 20px;
    color: #062f66;
    font-size: clamp(42px, 5vw, 72px);
    line-height: 0.98;
    letter-spacing: -0.045em;
  }
  .spk-x-sol-lead {
    max-width: 840px;
    color: #607184;
    font-size: 19px;
  }
  .spk-x-sol-head--center .spk-x-sol-lead {
    margin-left: auto;
    margin-right: auto;
  }

  /* 视频/项目卡的播放覆盖层(juice-production-line .play-button)—— CSS-only 圆环
     + 三角。宿主卡加 .spk-x-play-host 即获得 hover 放大;--play-size 由上下文调。
     video-tech 用默认 100,project 卡覆盖为 clamp(54,4.8vw,72)。 */
  .spk-x-play {
    --play-size: clamp(72px, 6.6vw, 100px);
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 2;
    width: var(--play-size);
    height: var(--play-size);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    background: rgba(51, 112, 150, 0.82);
    color: #fff;
    border: 2px solid rgba(124, 211, 238, 0.76);
    box-shadow:
      0 18px 44px rgba(0, 0, 0, 0.22),
      inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  }
  .spk-x-play::before {
    content: "";
    position: absolute;
    inset: calc(var(--play-size) * -0.16);
    border-radius: 50%;
    border: 1px solid rgba(156, 222, 242, 0.46);
  }
  .spk-x-play::after {
    content: "";
    width: calc(var(--play-size) * 0.23);
    height: calc(var(--play-size) * 0.29);
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform: translateX(3px);
  }
  .spk-x-play-host:hover .spk-x-play {
    transform: translate(-50%, -50%) scale(1.04);
    background: rgba(57, 130, 171, 0.9);
    border-color: rgba(137, 224, 248, 0.92);
    box-shadow:
      0 20px 50px rgba(0, 0, 0, 0.24),
      inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  }

  /* 页脚 CTA(cta-plan)现改为按页开关(文档侧栏「页脚 CTA」→ meta
     _sinopak_hide_footer_cta),勾选时 render.php 直接不输出 HTML,
     不再用 CSS 全局隐藏 solution 详情页。见 inc/footer-cta-toggle.php。 */

  /* 左右分栏(带图 section 通用) */
  .spk-x-split {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
  }

  .spk-x-image-card {
    overflow: hidden;
    border-radius: var(--spk-x-radius);
    background: var(--spk-x-soft);
    box-shadow: var(--spk-x-shadow);
  }
  /* 列表/卡片特色图 → contain,避免不同比例图被裁切(卡片本身已有浅底色) */
  .spk-x-image-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .spk-x-caption {
    padding: 10px 16px;
    color: var(--spk-x-muted);
    font-size: 13px;
  }

  /* 按钮(header CTA / hero / 表单 / 404 共用) */
  .spk-x-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: var(--spk-x-brand);
    color: var(--spk-x-white);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
  }
  .spk-x-button:hover {
    background: var(--spk-x-brand-dark);
    transform: translateY(-1px);
  }
  .spk-x-button--ghost {
    border-color: var(--spk-x-line);
    background: transparent;
    color: var(--spk-x-ink);
  }
  .spk-x-button--ghost:hover {
    background: var(--spk-x-soft);
  }

  /* 面包屑(每页模板 <main> 顶部,sinopak/breadcrumb 块输出)。
     版心与 .spk-x-wrap 一致(min(100% - clamp(64px, 12vw, 260px), 1250px));
     视觉参考 case 详情页 .spk-x-case-header:顶部同样用
     --spk-x-hero-pad-top 对齐固定页头。 */
  .spk-x-breadcrumb-bar {
    padding: var(--spk-x-hero-pad-top) 0 0;
  }
  .spk-x-breadcrumb {
    width: min(100% - clamp(64px, 12vw, 260px), 1250px);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: var(--spk-x-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
  }
  .spk-x-breadcrumb a {
    color: var(--wp--preset--color--blue, #075d94);
    text-decoration: none;
  }
  .spk-x-breadcrumb a:hover {
    color: var(--wp--preset--color--navy, #06366b);
  }
  .spk-x-breadcrumb__sep {
    color: var(--spk-x-line);
  }
  .spk-x-breadcrumb__current {
    color: var(--spk-x-muted);
  }

  /* 页面正文(模板 page_body 包裹层)。
     所有页面都由全宽 .spk-x-* section 块拼成,每个 section 用 .spk-x-wrap 自管
     版心宽度与左右留白、也自带竖向间距 —— 所以包裹层绝不能给它们限宽或加 padding:
     给 .wp-block-post-content 限 840px 会把通栏 section 一起压窄;给容器加顶部
     padding 会把 hero 从 header 下推出一道空隙。
     只有当正文是"裸核心块"(客户直接在编辑器里敲的段落/标题/列表,不含任何 spk-x
     容器)时,才套一个居中阅读列 + 竖向节奏 —— 用 :has 判定,section 页两者都不套。 */
  .spk-x-page-content:not(:has(> .wp-block-post-content > [class*="spk-x-"])) {
    padding: 56px 0 72px;
  }
  .spk-x-page-content:not(:has(> .wp-block-post-content > [class*="spk-x-"])) > .wp-block-post-content {
    max-width: 840px;
    margin-inline: auto;
    padding-inline: 20px;
  }

  /* 404(模板 404 用 core 块 + 本类) */
  /* 博客卡片列表(博客模板 query loop 的卡片外观) */
  .spk-x-blog-archive .wp-block-post-template {
    gap: 32px 24px;
  }
  .spk-x-blog-archive .wp-block-post-template > li {
    margin: 0;
  }
  /* 列表/卡片特色图 → contain,避免不同比例图被裁切(补浅底色当信箱边) */
  .spk-x-blog-archive .wp-block-post-featured-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--spk-x-soft);
    border-radius: var(--spk-x-radius);
  }
  .spk-x-blog-archive .wp-block-post-title {
    margin-top: 14px;
    font-size: 20px;
    line-height: 1.3;
  }
  .spk-x-blog-archive .wp-block-post-title a {
    color: var(--spk-x-brand-dark);
  }
  .spk-x-blog-archive .wp-block-post-excerpt {
    margin-top: 8px;
    color: var(--spk-x-muted);
    font-size: 15px;
  }
  .spk-x-blog-archive .wp-block-post-date {
    margin-top: 10px;
    color: var(--spk-x-muted);
    font-size: 13px;
  }
  .spk-x-blog-archive .wp-block-query-pagination {
    margin-top: 40px;
    justify-content: center;
    gap: 8px;
  }

  /* 分类归档页头部 + 分页(category 模板专用增强) */
  .spk-x-category {
    padding-top: 64px;
  }
  .spk-x-category-head {
    max-width: 880px;
    margin: 0 0 52px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--spk-x-line);
  }
  .spk-x-category-head .wp-block-query-title {
    margin: 0;
    color: var(--spk-x-brand-dark);
    font-size: clamp(30px, 4.2vw, 50px);
    line-height: 1.08;
  }
  .spk-x-category-head .wp-block-term-description {
    max-width: 780px;
    margin: 14px 0 0;
    color: var(--spk-x-muted);
    font-size: 17px;
    line-height: 1.65;
  }
  .spk-x-category .wp-block-query-pagination .page-numbers,
  .spk-x-category .wp-block-query-pagination > .wp-block-query-pagination-previous,
  .spk-x-category .wp-block-query-pagination > .wp-block-query-pagination-next {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid var(--spk-x-line);
    border-radius: 6px;
    background: var(--spk-x-white);
    color: var(--spk-x-brand);
    font-size: 14px;
    font-weight: 750;
    line-height: 1;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
  }
  .spk-x-category .wp-block-query-pagination a:hover,
  .spk-x-category .wp-block-query-pagination a:focus-visible {
    border-color: var(--spk-x-brand);
    background: var(--spk-x-soft);
    color: var(--spk-x-brand-dark);
  }
  .spk-x-category .wp-block-query-pagination .page-numbers.current {
    border-color: var(--spk-x-brand);
    background: var(--spk-x-brand);
    color: var(--spk-x-white);
  }

  /* 博客详情页(single 模板:hero 带 + 正文 + 侧栏) */
  .spk-x-post-hero {
    padding-bottom: 0;
  }
  .spk-x-post-hero .wp-block-post-title {
    margin-top: 10px;
    color: var(--spk-x-brand-dark);
    font-size: clamp(30px, 4.5vw, 52px);
    line-height: 1.1;
  }
  .spk-x-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    color: var(--spk-x-muted);
    font-size: 14px;
  }
  .spk-x-post-meta a {
    color: var(--spk-x-brand);
  }
  .spk-x-post-main {
    padding-top: 44px;
  }
  .spk-x-post-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 48px;
    align-items: start;
  }
  .spk-x-post-article {
    max-width: 760px;
  }
  .spk-x-post-article .wp-block-post-featured-image img {
    border-radius: var(--spk-x-radius);
  }
  .spk-x-post-side {
    display: grid;
    gap: 24px;
  }
  .spk-x-post-side > * {
    padding: 20px;
    border: 1px solid var(--spk-x-line);
    border-radius: var(--spk-x-radius);
  }
  .spk-x-post-side h2 {
    margin-bottom: 10px;
    font-size: 16px;
  }

  /* 法律页正文(inc/starter-content/legal.php 的 wp:html 内容) */
  .spk-x-legal-body {
    max-width: 760px;
    margin-top: 26px;
    line-height: 1.7;
  }
  .spk-x-legal-body h2 {
    margin: 28px 0 10px;
    color: var(--spk-x-brand-dark);
    font-size: 22px;
  }
  .spk-x-legal-body h3 {
    margin: 20px 0 8px;
    font-size: 17px;
  }
  .spk-x-legal-body p {
    margin: 0 0 14px;
  }
  .spk-x-legal-body ul {
    margin: 0 0 14px;
    padding-left: 20px;
  }
  .spk-x-legal-body a {
    color: var(--spk-x-brand);
    text-decoration: underline;
  }

  /* spk-x-rich —— textarea 内联 mini-markdown 的共享容器（≥2 块可复用）。
     只出 <p>/<ul>/<li>/<strong>/<a>,基础排版在此单一属主。 */
  .spk-x-rich > :first-child { margin-top: 0; }
  .spk-x-rich > :last-child { margin-bottom: 0; }
  .spk-x-rich p { margin: 0 0 8px; }
  .spk-x-rich ul { margin: 8px 0; padding-left: 1.25em; list-style: disc; }
  .spk-x-rich li { margin: 2px 0; }
  .spk-x-rich strong { font-weight: 700; }
  .spk-x-rich a { color: var(--spk-x-accent); text-decoration: underline; }
}

@layer spk-base {
/* Knowledge article layout (single post template, not a block-owned grid).
   原型 .article-layout-shell / .article-body(React styles.css 3072–3525):
   1240 内页 shell + 3fr/.95fr 双栏,正文 14px/1.68。颜色按原型字面值
   (navy #062b5c / muted #51616e / line #dce4e9),与各块的复刻口径一致。 */
.spk-x-article-main {
  padding-top: 30px;
}
.spk-x-article-layout {
  /* React 内页 shell:压过 .spk-x-wrap 的 1250 公式(同文件后到者胜) */
  width: min(85vw, 1240px);
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(250px, 0.95fr);
  gap: clamp(38px, 5vw, 76px);
  align-items: start;
}
.spk-x-article-stack {
  min-width: 0;
}
.spk-x-article-stack .wp-block-post-featured-image {
  margin: 14px 0 16px;
}
/* 保持 cover:这是文章正文顶部 4.8/1 的宽幅头图(整篇排版的一部分),不是
   列表/卡片缩略图 —— contain 会让竖图在 880×183 的横幅里缩成一条细缝,
   两侧留出大片信箱边,反而更糟。列表卡的改动见 .spk-x-blog-archive。 */
.spk-x-article-stack .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 4.8 / 1;
  object-fit: cover;
  background: #eef4f7;
}
.spk-x-article-stack h2 {
  margin-bottom: 10px;
  color: #062b5c;
  font-size: 21px;
  line-height: 1.18;
  /* 目录锚点跳转让位 fixed header */
  scroll-margin-top: 110px;
}
.spk-x-article-stack h3 {
  margin: 0 0 5px;
  color: #062b5c;
  font-size: 13px;
  line-height: 1.25;
  /* 目录锚点跳转让位 fixed header(与 h2 同口径) */
  scroll-margin-top: 110px;
}
.spk-x-article-stack p,
.spk-x-article-stack li {
  color: #51616e;
  font-size: 14px;
  line-height: 1.68;
}
.spk-x-article-stack p {
  max-width: 760px;
  margin: 0 0 14px;
}
.spk-x-article-stack figcaption {
  margin-top: 7px;
  color: #7a8996;
  font-size: 11px;
  line-height: 1.45;
}
.spk-x-article-stack ul {
  display: grid;
  gap: 7px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.spk-x-article-stack ul > li {
  position: relative;
  padding-left: 19px;
  font-size: 13px;
  line-height: 1.55;
}
.spk-x-article-stack ul > li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 2px;
  width: 5px;
  height: 5px;
  background: #064a7d;
  border-radius: 50%;
}
.spk-x-article-stack .wp-block-table {
  margin: 0 0 14px;
  border: 1px solid #dce4e9;
  overflow-x: auto;
}
.spk-x-article-stack table {
  width: 100%;
  min-width: 740px;
  border-collapse: collapse;
  background: #fff;
  font-size: 12px;
}
.spk-x-article-stack th,
.spk-x-article-stack td {
  padding: 13px 14px;
  border-right: 1px solid #dce4e9;
  border-bottom: 1px solid #dce4e9;
  color: #51616e;
  line-height: 1.4;
  text-align: left;
  vertical-align: top;
}
.spk-x-article-stack th {
  background: #f2f6fa;
  color: #062b5c;
  font-weight: 900;
}
.spk-x-article-stack td:first-child {
  color: #062b5c;
  font-weight: 850;
}
}

/* ─────────────────────────── responsive ─────────────────────────── */
@layer spk-responsive {
  /* Below the nav breakpoint the solid header shrinks to 76px — feed that into
     the shared clearance token so every inner-page first block follows. */
  @media (max-width: 1180px) {
    :root {
      --spk-x-header-h: 76px;
    }
    /* 原型 .article-layout-shell 在 1180 收侧栏(早于全站 920 断点) */
    .spk-x-article-layout {
      width: calc(100% - 72px);
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 920px) {
    .spk-x-section {
      padding: 64px 0;
    }
    .spk-x-category {
      padding-top: 48px;
    }
    .spk-x-category-head {
      margin-bottom: 36px;
      padding-bottom: 22px;
    }
    .spk-x-category .wp-block-post-template {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .spk-x-split {
      grid-template-columns: 1fr;
    }
    .spk-x-post-layout {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 820px) {
    .spk-x-article-layout {
      width: calc(100% - 34px);
    }
    .spk-x-article-stack h2 {
      font-size: 20px;
    }
    .spk-x-article-stack .wp-block-post-featured-image img {
      aspect-ratio: 2 / 1;
    }
  }

  @media (max-width: 640px) {
    .spk-x-section {
      padding: 52px 0;
    }
    .spk-x-wrap {
      /* 原型小屏 --shell 覆盖 */
      width: min(100% - 34px, 1500px);
    }
    .spk-x-breadcrumb {
      /* 与 .spk-x-wrap 小屏覆盖保持一致 */
      width: min(100% - 34px, 1500px);
    }
    .spk-x-page-content:not(:has(> .wp-block-post-content > [class*="spk-x-"])) {
      padding: 40px 0 56px;
    }
    .spk-x-category .wp-block-post-template {
      grid-template-columns: 1fr;
    }
    .spk-x-category .wp-block-query-pagination {
      flex-wrap: wrap;
    }
  }

  /* Solution 页原语小屏(原型断点 760)。 */
  @media (max-width: 760px) {
    .spk-x-sol-section {
      padding: 64px 0;
    }
    .spk-x-sol-title {
      font-size: 42px;
    }
    /* 原型 .cta 小屏整宽换行(所有内容块共用)。 */
    .spk-x-cta {
      width: 100%;
      padding-left: 18px;
      padding-right: 18px;
      letter-spacing: 0.08em;
      white-space: normal;
      text-align: center;
    }
  }
}
/* ───────────────────────── water filling sections ───────────────────────── */
/**
 * Water filling split-block styles from the approved HTML prototype.
 */
@layer spk-base {
  .spk-x-wf-section {
    --orange: #F58220;
    --orange-soft: #FDF3E7;
    --navy: #0A2540;
    --navy-deep: #071B30;
    --navy-mid: #14476F;
    --navy-panel: #12344F;
    --navy-line: #1C3A57;
    --navy-input-border: #2A4A66;
    --bg-light: #F4F7FA;
    --border: #DCE4EC;
    --text-body: #4A5B6C;
    --text-muted: #8296A8;
    --on-navy: #B9CBD9;
    --footer-muted: #8CA3B8;
    --footer-dim: #6B8299;
    --placeholder: #7D94A8;
    --spk-x-wf-container: min(100% - 48px, 1050px);
    width: 100%;
    color: var(--text-body);
    background: #fff;
    font-family: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  }
  .spk-x-wf-section, .spk-x-wf-section *, .spk-x-wf-section *::before, .spk-x-wf-section *::after { box-sizing: border-box; }
  .spk-x-wf-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .spk-x-wf-container {
    width: var(--spk-x-wf-container);
    margin: 0 auto;
  }
  .spk-x-wf-faq-row {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .spk-x-wf-select-table .spk-x-wf-cell:nth-child(1) { width: 210px; padding-left: 21px; }
  .spk-x-wf-select-table .spk-x-wf-cell:nth-child(2) { width: 140px; }
  .spk-x-wf-select-table .spk-x-wf-cell:nth-child(3) { width: 231px; }
  .spk-x-wf-select-table .spk-x-wf-cell:nth-child(4) { width: 189px; }
  .spk-x-wf-select-table .spk-x-wf-cell:nth-child(5) { width: 280px; padding-right: 21px; }
  .spk-x-wf-x-row .spk-x-wf-xcell:nth-child(1) { width: 131px; font-weight: 600; color: var(--navy); }
  .spk-x-wf-x-row .spk-x-wf-xcell:nth-child(2),
  .spk-x-wf-x-row .spk-x-wf-xcell:nth-child(3),
  .spk-x-wf-x-row .spk-x-wf-xcell:nth-child(4) { width: 105px; }
  .spk-x-wf-x-row .spk-x-wf-xcell:nth-child(5) { width: 175px; font-weight: 700; color: var(--navy); }
  .spk-x-wf-x-row .spk-x-wf-xcell:nth-child(6) { width: 298px; }
  .spk-x-wf-x-row .spk-x-wf-xcell:nth-child(7) { width: 131px; padding-right: 18px; }
  .spk-x-wf-x-head .spk-x-wf-xcell:nth-child(1) { width: 131px; }
  .spk-x-wf-x-head .spk-x-wf-xcell:nth-child(2),
  .spk-x-wf-x-head .spk-x-wf-xcell:nth-child(3),
  .spk-x-wf-x-head .spk-x-wf-xcell:nth-child(4) { width: 105px; }
  .spk-x-wf-x-head .spk-x-wf-xcell:nth-child(5) { width: 175px; }
  .spk-x-wf-x-head .spk-x-wf-xcell:nth-child(6) { width: 298px; }
  .spk-x-wf-x-head .spk-x-wf-xcell:nth-child(7) { width: 131px; padding-right: 18px; }
  .spk-x-wf-x-row.spk-x-wf-highlight { background: var(--orange-soft); }
  .spk-x-wf-stage.spk-x-wf-highlight { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 700; letter-spacing: 1px; box-shadow: 0 6px 16px rgba(245,130,32,.4); }
  .spk-x-wf-button { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; }
/* ===== shared ===== */
  .spk-x-wf-eyebrow{font-size:14px;font-weight:600;letter-spacing:3px;color:var(--orange);}
  .spk-x-wf-h2{font-size:48px;line-height:56px;font-weight:700;color:var(--navy);}
  .spk-x-wf-lead{font-size:17px;line-height:28px;font-weight:400;color:var(--text-body);}
  .spk-x-wf-btn{display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;border-radius:6px;cursor:pointer;border:none;font-family:inherit;}
  .spk-x-wf-btn-primary{background:var(--orange);color:#fff;padding:16px 34px;}
  .spk-x-wf-btn-outline{background:#fff;color:var(--navy);border:2px solid var(--navy);padding:14px 32px;border-radius:6px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;}
  .spk-x-wf-link-orange{font-size:15px;font-weight:600;color:var(--orange);cursor:pointer;}
  button.spk-x-wf-link-orange{appearance:none;border:0;padding:0;background:none;font:inherit;text-align:left;}

  /* ===== S01 Hero ===== */
  .spk-x-wf-s01{background:var(--bg-light);border-bottom:1px solid var(--border);padding:84px 0 64px;gap:56px;}
  /* 方案 C:文字在上、图铺满整行。旧写法是左右两栏(各 calc(50% - 28px)、图高 385px),
     H1 会被折成 4 行;满宽后 H1 一行,且 hero 图按 1.85 出图时正好铺满零留白。
     H1 / Sub 不覆盖 → 沿用 56px / 22px,层级保持 Hero(56) > 区块标题(48)。 */
  .spk-x-wf-hero-wrap{display:flex;flex-direction:column;align-items:stretch;gap:36px;}
  .spk-x-wf-hero-left{width:100%;min-width:0;display:flex;flex-direction:column;gap:24px;}
  /* 面包屑:位于 eyebrow 之上。hero-left 是 gap:24px 的纵向 flex,这里用负下边距
     把「面包屑→eyebrow」收到约 14px,避免顶部过散。浅底 hero → 用灰/深蓝文字。 */
  .spk-x-wf-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 -10px;font-size:13px;line-height:20px;color:var(--text-muted);}
  .spk-x-wf-breadcrumb a{color:var(--text-muted);text-decoration:none;transition:color .18s ease;}
  .spk-x-wf-breadcrumb a:hover,.spk-x-wf-breadcrumb a:focus-visible{color:var(--navy);}
  .spk-x-wf-crumb{color:var(--navy);font-weight:600;}
  .spk-x-wf-bc-sep{color:var(--border);}
  .spk-x-wf-hero-h1{font-size:56px;line-height:62px;font-weight:700;color:var(--navy);}
  .spk-x-wf-hero-sub{font-size:22px;line-height:32px;font-weight:600;color:var(--navy-mid);}
  .spk-x-wf-hero-cta-row{display:flex;align-items:center;gap:16px;}
  .spk-x-wf-hero-cta-row .spk-x-wf-btn-primary{padding:12px 26px;}
  .spk-x-wf-hero-cta-row .spk-x-wf-btn-outline{padding:10px 24px;}
  .spk-x-wf-hero-img{position:relative;width:100%;height:auto;aspect-ratio:1.85;border-radius:12px;overflow:hidden;flex:none;background:#fff;}
  /* 产品 hero 图用 contain,不用 cover:机型图放进固定比例圆角盒,cover 会裁掉
     机器顶/底座。留白沿用 s01 段本身的浅底 --bg-light(#F4F7FA) —— 显式补在容器上,
     contain 的信箱边与底色同色,不会出现白缝。出图按 1.85 即零信箱边。 */
  .spk-x-wf-hero-img img{width:100%;height:100%;object-fit:contain;}
  /* ── 轮播：切片叠放 + 淡入淡出 ──
     3 张 <img> 原来是行内横排,容器 overflow:hidden 只露出第一张(视觉上"没有轮播"),
     而且 inline 排版会把容器自身撑到视口外(窄屏横向溢出的来源之一)。切片改为绝对
     定位叠放,由 .spk-x-wf-active 决定哪一张可见 —— 容器高度不再依赖内容宽度,
     flex:none 的盒子也不会再被图片撑开。 */
  .spk-x-wf-hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;}
  .spk-x-wf-hero-slide.spk-x-wf-active{opacity:1;}
  /* ── 左右切换箭头 ── */
  .spk-x-wf-hero-arrow{position:absolute;top:50%;margin-top:-19px;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:50%;padding:0;background:rgba(255,255,255,.88);color:var(--navy);cursor:pointer;box-shadow:0 2px 12px rgba(2,27,61,.18);transition:background .2s ease,color .2s ease;}
  .spk-x-wf-hero-arrow:hover{background:#fff;color:var(--orange);}
  .spk-x-wf-hero-arrow:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
  .spk-x-wf-hero-arrow svg{width:18px;height:18px;}
  .spk-x-wf-hero-arrow--prev{left:12px;}
  .spk-x-wf-hero-arrow--next{right:12px;}
  /* ── 圆点指示器 ──
     图片是 contain 的(四周有浅底留白),所以圆点带一层半透明深色胶囊底衬才看得清。 */
  .spk-x-wf-hero-dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px 11px;border-radius:999px;background:rgba(2,27,61,.42);}
  .spk-x-wf-hero-dot{width:8px;height:8px;border:0;border-radius:999px;padding:0;background:rgba(255,255,255,.55);cursor:pointer;transition:width .25s ease,background .25s ease;}
  .spk-x-wf-hero-dot:hover{background:rgba(255,255,255,.85);}
  .spk-x-wf-hero-dot:focus-visible{outline:2px solid #fff;outline-offset:2px;}
  .spk-x-wf-hero-dot.spk-x-wf-active{width:22px;background:var(--orange);}
  .spk-x-wf-hero-stats{width:var(--spk-x-wf-container);display:flex;justify-content:space-between;border-top:1px solid var(--border);padding-top:44px;}
  .spk-x-wf-stat{display:flex;flex-direction:column;gap:8px;width:264px;}
  .spk-x-wf-stat-value{font-size:26px;font-weight:700;color:var(--navy);}
  .spk-x-wf-stat-label{font-size:12px;font-weight:600;letter-spacing:1px;color:var(--text-muted);}

  /* ===== section header ===== */
  .spk-x-wf-sec-head{display:flex;flex-direction:column;gap:16px;width:var(--spk-x-wf-container);}

  /* ── 宽表格的 flex 根因修正 ──
     .spk-x-wf-section 是 display:flex(纵向),区块内部那层无类名的包裹 div 是它的
     flex 子项。flex 子项默认 min-width:auto → 最小宽度 = 内容最小宽,spec / select
     表实测把祖先顶到 1052px,900px 以下的视口直接被撑破(横向溢出)。
     把子项的最小宽度显式归零,容器才缩得下来(配合 spk-responsive 的 overflow-x:auto)。 */
  .spk-x-wf-section > *{min-width:0;max-width:100%;}
  .spk-x-wf-spec-table,
  .spk-x-wf-select-table{min-width:0;max-width:100%;}
  .spk-x-wf-x-head, .spk-x-wf-x-row,
  .spk-x-wf-t-head, .spk-x-wf-t-row{min-width:0;}

  /* ===== S02 Bottle Format ===== */
  .spk-x-wf-s02{background:#fff;padding:110px 0;gap:56px;}
  .spk-x-wf-bottle-cards{display:flex;gap:32px;width:var(--spk-x-wf-container);}
  .spk-x-wf-bottle-card{position:relative;width:calc((100% - 64px) / 3);background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s ease,box-shadow .15s ease;}
  /* 整卡可点(stretched link):卡片里唯一的可交互元素是 render.php 输出的
     a.spk-x-wf-link-orange(其余是 img 与 span,都不可聚焦、也不吃事件),
     所以让它的 ::after 铺满整卡即可 —— 文案与 href 一个字都没动,屏幕阅读器
     读到的仍是一个正常链接。position:relative 落在卡片上,::after 的 inset:0
     于是以卡片 padding box 为参照;覆盖层没有 z-index,靠「定位元素盖过
     非定位内容」的默认层叠顺序压在图片与文字之上,不需要额外抬高。 */
  .spk-x-wf-bottle-card .spk-x-wf-link-orange::after{content:"";position:absolute;inset:0;}
  /* 图片位用 aspect-ratio 而非固定 px 高:宽度是弹性的(栅格一变就缩),
     高度写死 → 图位比例随视口漂移,contain 的信箱边忽大忽小,任何视口都铺不满。
     比例锁定后,图片按同一比例出图即 100% 铺满。规范见《图片位规范 v1》:
     hero 1.85 · card 1.50 · block 1.70 · p 1.33 · h 1.50 · video 1.50 */
  .spk-x-wf-bottle-card .spk-x-wf-card-img{width:100%;height:auto;aspect-ratio:1.5;overflow:hidden;}
  /* 列表/卡片特色图 → contain,避免不同比例图被裁切(补浅底色当信箱边) */
  .spk-x-wf-bottle-card .spk-x-wf-card-img img{width:100%;height:100%;object-fit:contain;background:#fff;}
  .spk-x-wf-bottle-card .spk-x-wf-card-body{padding:30px;display:flex;flex-direction:column;gap:12px;}
  .spk-x-wf-card-title{font-size:21px;font-weight:700;color:var(--navy);}
  .spk-x-wf-card-range{font-size:18px;font-weight:600;color:var(--orange);}
  .spk-x-wf-card-spec{font-size:15px;line-height:24px;font-weight:400;color:var(--text-body);}
  .spk-x-wf-card-divider{width:100%;height:1px;background:var(--border);}
  /* 整卡可点的可感知反馈:沿用本块既有的 --orange / --border 与 12px 圆角语言,
     只把描边转橙、加一层浅投影,不新增配色或动效语言。
     :focus-within 覆盖键盘 Tab 与鼠标点击两种焦点来源,是所有目标浏览器
     (Safari 10.1+ / Firefox 52+)都支持的基础焦点样式。 */
  .spk-x-wf-bottle-card:hover,
  .spk-x-wf-bottle-card:focus-within{border-color:var(--orange);box-shadow:0 12px 28px rgba(10,37,64,.12);}
  /* 键盘焦点再补一圈 outline(仅 :focus-visible,鼠标点击不触发)。
     刻意不写进上面那条选择器列表:含 :has() 的选择器列表在不支持的浏览器里
     会让整条规则失效,分开写则最坏只丢这圈 outline,基础焦点样式仍在。 */
  .spk-x-wf-bottle-card:has(.spk-x-wf-link-orange:focus-visible){outline:2px solid var(--orange);outline-offset:2px;}

  /* ===== S03 Machine Range ===== */
  .spk-x-wf-s03{background:var(--bg-light);padding:110px 0;gap:56px;}
  .spk-x-wf-machine-block{width:var(--spk-x-wf-container);background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;}
  /* align-self:center + aspect-ratio:图框不再被文字栏拉高(旧写法 stretch+min-height:340px
     让图框高度跟着正文走,比例约 1.24,1.70 的机型图上下各留 ~46px 浅灰带)。 */
  .spk-x-wf-block-img{width:40%;flex:none;align-self:center;height:auto;min-height:0;aspect-ratio:1.7;overflow:hidden;}
  /* 列表/卡片特色图 → contain,避免不同比例图被裁切(补浅底色当信箱边) */
  .spk-x-wf-block-img img{width:100%;height:100%;object-fit:contain;background:#fff;}
  .spk-x-wf-block-body{flex:1;padding:48px;display:flex;flex-direction:column;gap:14px;justify-content:center;}
  .spk-x-wf-block-title{font-size:24px;font-weight:700;color:var(--navy);}
  .spk-x-wf-block-cap{font-size:36px;font-weight:700;color:var(--navy);}
  .spk-x-wf-spec-row{display:flex;align-items:center;gap:10px;}
  .spk-x-wf-spec-dot{width:6px;height:6px;border-radius:3px;background:var(--orange);flex:none;}
  .spk-x-wf-spec-text{font-size:15px;font-weight:400;color:var(--text-body);}
  .spk-x-wf-block-divider{width:100%;height:1px;background:var(--border);}
  .spk-x-wf-g5-pill{background:#fff;border:1px solid var(--border);border-radius:40px;padding:18px 36px;font-size:16px;font-weight:600;color:var(--navy);cursor:pointer;}

  /* ===== S04 In Action ===== */
  .spk-x-wf-s04{background:#fff;padding:110px 0;gap:48px;}
  .spk-x-wf-video-wrap{width:var(--spk-x-wf-container);display:flex;flex-direction:column;align-items:center;}
  .spk-x-wf-video-frame{width:80%;height:auto;aspect-ratio:1.5;border-radius:12px 12px 0 0;overflow:hidden;position:relative;cursor:pointer;}
  button.spk-x-wf-video-frame{appearance:none;border:0;padding:0;background:none;display:block;}
  /* 视频海报:__video-frame 是可点击播放的封面(render.php 里是 button + .spk-x-play
     播放按钮),按站内约定保持 cover —— 它是"封面"不是产品展示图。
     封面出图比例按 1.50(1680×1120),与图框一致 → cover 不再裁边。 */
  .spk-x-wf-video-frame img{width:100%;height:100%;object-fit:contain;background:#fff;}
  /* 封面压暗一层,保证白色播放圆环与封面亮部之间始终有对比。 */
  .spk-x-wf-video-frame::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(2,27,61,.06) 0%,rgba(2,27,61,.22) 100%);pointer-events:none;}
  .spk-x-wf-video-info{width:80%;background:var(--bg-light);border:1px solid var(--border);border-top:none;border-radius:0 0 12px 12px;padding:18px 40px;display:flex;justify-content:space-between;align-items:center;}
  .spk-x-wf-video-info span{font-size:14px;font-weight:600;color:var(--navy);}
  .spk-x-wf-info-div{width:1px;height:20px;background:var(--border);}

  /* ===== S05 How to Choose ===== */
  .spk-x-wf-s05{background:var(--bg-light);padding:110px 0;gap:48px;}
  .spk-x-wf-select-table{width:var(--spk-x-wf-container);background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;}
  .spk-x-wf-t-head{display:flex;background:var(--navy);}
  .spk-x-wf-t-head .spk-x-wf-cell{padding:16px;font-size:12px;font-weight:600;letter-spacing:1px;color:#fff;}
  .spk-x-wf-t-row{display:flex;border-bottom:1px solid var(--border);background:#fff;}
  .spk-x-wf-t-row:last-child{border-bottom:none;}
  .spk-x-wf-t-row .spk-x-wf-cell{padding:18px 16px 18px 24px;font-size:15px;font-weight:400;color:var(--text-body);}
  /* 首列是「选型因素」,给个粗体,和右侧的取值区分开。 */
  .spk-x-wf-select-table .spk-x-wf-t-row .spk-x-wf-cell:first-child{font-weight:600;}
  .spk-x-wf-cell.spk-x-wf-c1{width:240px;padding-left:24px;}
  .spk-x-wf-cell.spk-x-wf-c2{width:160px;}
  .spk-x-wf-cell.spk-x-wf-c3{width:264px;}
  .spk-x-wf-cell.spk-x-wf-c4{width:216px;}
  .spk-x-wf-cell.spk-x-wf-c5{width:320px;padding-right:24px;}
  .spk-x-wf-t-head .spk-x-wf-cell{padding-left:24px;}
  .spk-x-wf-t-head .spk-x-wf-cell.spk-x-wf-c2,.spk-x-wf-t-head .spk-x-wf-cell.spk-x-wf-c3,.spk-x-wf-t-head .spk-x-wf-cell.spk-x-wf-c4{padding-left:24px;}
  .spk-x-wf-cell.spk-x-wf-fmt{font-weight:600;color:var(--navy);}
  .spk-x-wf-cell.spk-x-wf-machine{font-weight:600;color:var(--orange);cursor:pointer;}
  /* 列数 ≠5 的选型表(如 pet/glass-soft-drink 的 FACTOR|QUESTION 两列):
     上面五个 nth-child 定宽是按 5 列写死的,列少了会把表格挤在左侧只占一部分宽度。
     这一档改成按列数等分,首列仍略宽。 */
  .spk-x-wf-select-table.spk-x-wf-select-cols-2 .spk-x-wf-t-head .spk-x-wf-cell,
  .spk-x-wf-select-table.spk-x-wf-select-cols-2 .spk-x-wf-t-row .spk-x-wf-cell{width:auto;flex:1 1 0;min-width:0;}
  .spk-x-wf-select-table.spk-x-wf-select-cols-2 .spk-x-wf-t-head .spk-x-wf-cell:first-child,
  .spk-x-wf-select-table.spk-x-wf-select-cols-2 .spk-x-wf-t-row .spk-x-wf-cell:first-child{flex:0 0 34%;}
  .spk-x-wf-select-cta{width:var(--spk-x-wf-container);background:#fff;border:1px solid var(--border);border-radius:12px;padding:32px 40px;display:flex;justify-content:space-between;align-items:center;}
  .spk-x-wf-select-cta-left{display:flex;flex-direction:column;gap:8px;width:700px;}
  .spk-x-wf-select-cta-title{font-size:20px;font-weight:700;color:var(--navy);}
  .spk-x-wf-select-cta-body{font-size:15px;line-height:24px;font-weight:400;color:var(--text-body);}

  /* ===== S06 XGF Specifications ===== */
  .spk-x-wf-s06{background:#fff;padding:110px 0;gap:44px;}
  .spk-x-wf-hidden{display:none !important;}
  .spk-x-wf-chips{display:flex;gap:12px;width:var(--spk-x-wf-container);}
  .spk-x-wf-chip{padding:10px 20px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:#fff;color:var(--navy);}
  .spk-x-wf-chip.spk-x-wf-active{background:var(--navy);color:#fff;border-color:var(--navy);}
  .spk-x-wf-spec-table{width:var(--spk-x-wf-container);background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;}
  .spk-x-wf-x-head{display:flex;background:var(--navy);}
  .spk-x-wf-x-head .spk-x-wf-xcell{padding:16px 12px 16px 20px;font-size:12px;font-weight:600;letter-spacing:1px;color:#fff;}
  .spk-x-wf-x-row{display:flex;border-bottom:1px solid var(--border);background:#fff;}
  .spk-x-wf-x-row:last-child{border-bottom:none;}
  .spk-x-wf-x-row.spk-x-wf-hl{background:var(--orange-soft);}
  .spk-x-wf-x-row .spk-x-wf-xcell{padding:14px 12px 14px 20px;font-size:15px;font-weight:400;color:var(--text-body);}
  /* 首列是型号(如 RXGGF14/12/12/5),不允许折行 —— 否则窄屏下表头列宽与数据行错位。 */
  .spk-x-wf-spec-table .spk-x-wf-x-row .spk-x-wf-xcell:first-child{white-space:nowrap;}
  .spk-x-wf-xcell.spk-x-wf-x1{width:150px;font-weight:600;color:var(--navy);}
  .spk-x-wf-xcell.spk-x-wf-x2{width:120px;} .spk-x-wf-xcell.spk-x-wf-x3{width:120px;} .spk-x-wf-xcell.spk-x-wf-x4{width:120px;}
  .spk-x-wf-xcell.spk-x-wf-x5{width:200px;}
  .spk-x-wf-xcell.spk-x-wf-x6{width:340px;} .spk-x-wf-xcell.spk-x-wf-x7{width:150px;padding-right:20px;}
  .spk-x-wf-x-row .spk-x-wf-xcell.spk-x-wf-x1{font-weight:600;color:var(--navy);}
  .spk-x-wf-x-row .spk-x-wf-xcell.spk-x-wf-x5{font-weight:700;color:var(--navy);}
  /* 列宽只对 7 列(型号表,原型比例 131/105/105/105/175/298/131=1050px)写死。
     其它列数走等分 —— L3 的 s06 是「参数名 / 参数值」两列表,套 7 列宽度
     只会占 236px,右侧留 814px 空白、深蓝表头条也短一截。
     flex-basis:0 会盖掉上面的 width,所以 7 列版式零变化。 */
  .spk-x-wf-spec-table:not(.spk-x-wf-cols-7) .spk-x-wf-xcell{flex:1 1 0;width:auto;min-width:0;}
  .spk-x-wf-spec-table:not(.spk-x-wf-cols-7) .spk-x-wf-x-row .spk-x-wf-xcell:first-child{white-space:normal;font-weight:600;color:var(--navy);}
  /* G14:section 是纵向 flex,面板默认按内容 max-content 撑宽 —— 键值表长文本会把
     面板顶出视口(线上 pet-soft 型号表下方即此现象)。显式钉回版心宽。 */
  .spk-x-wf-spec-panel{width:var(--spk-x-wf-container);}
  /* G16:单元格一律允许断词,长参数名与 L2000mm*W850mm*H2000mm 这类无空格串
     不再溢出压字。MODEL 打头的标准 7 列表的定宽不受影响(见上方 x1..x7)。 */
  .spk-x-wf-spec-table .spk-x-wf-xcell{word-break:break-word;overflow-wrap:anywhere;white-space:normal;}
  .spk-x-wf-spec-table.spk-x-wf-cols-7 .spk-x-wf-xcell{overflow-wrap:break-word;}
  /* G16:参数名打头的表,首列 22%(18–30% 区间),其余列均分剩余宽度。 */
  .spk-x-wf-spec-table.spk-x-wf-paramtable .spk-x-wf-x-head .spk-x-wf-xcell:first-child,
  .spk-x-wf-spec-table.spk-x-wf-paramtable .spk-x-wf-x-row .spk-x-wf-xcell:first-child{flex:0 0 22%;}
  .spk-x-wf-spec-foot{width:var(--spk-x-wf-container);display:flex;justify-content:space-between;align-items:center;gap:24px;}
  /* CTA 始终靠右:footText 留空时这一行只剩 CTA,space-between 会把它甩到左边,
     margin-left:auto 兜住;有 footText 时它是 no-op。 */
  .spk-x-wf-spec-foot > .spk-x-wf-link-orange{margin-left:auto;flex:none;}
  /* 脚注单独一行,直接挂在 section 下 → 该层 align-items:center 使它自动居中。 */
  .spk-x-wf-footnote{font-size:13px;font-weight:400;color:var(--text-muted);text-align:center;}

  /* ===== S07 How It Works ===== */
  .spk-x-wf-s07{background:var(--bg-light);padding:110px 0;gap:48px;}
  /* step 数量由作者决定(原型 3 步,实际页面出现 4 步),2~7 步都要自适应换行。
     布局用 grid:列数 = min(步数, 每行上限),由根节点的 --n{N} 修饰类在 CSS 里
     显式给出(见下方 1~8 的规则),换行后每行卡片等宽、不会溢出容器。
     列间距 56px 刻意等于旧 flex 版的「16px 间隙 + 24px 箭头 + 16px 间隙」,
     行间距 28px 单独给换行后的行分栏 —— 3 步时卡片宽度于是与旧版逐像素相同
     (1050px 容器下都是 312.67px),4 步时同样是 220.5px。 */
  .spk-x-wf-steps{--spk-x-wf-cols:3;--spk-x-wf-pad:36px;display:grid;grid-template-columns:repeat(var(--spk-x-wf-cols),minmax(0,1fr));align-items:stretch;gap:28px 56px;width:var(--spk-x-wf-container);}
  /* 列数按步数:2 步铺满一行;3 步 = 单行三等分(与旧版一致);
     4 步单行四等分;5/6 步走 3+2 / 3+3(比 4+1 均衡);7 步走 4+3;8 步 4+4。
     --n{N} 由 render.php 输出,超过 8 步沿用 --n8 的每行上限。 */
  .spk-x-wf-steps--n1{--spk-x-wf-cols:1;}
  .spk-x-wf-steps--n2{--spk-x-wf-cols:2;}
  .spk-x-wf-steps--n3{--spk-x-wf-cols:3;}
  .spk-x-wf-steps--n4{--spk-x-wf-cols:4;}
  .spk-x-wf-steps--n5,.spk-x-wf-steps--n6{--spk-x-wf-cols:3;}
  .spk-x-wf-steps--n7,.spk-x-wf-steps--n8{--spk-x-wf-cols:4;}
  /* ≥4 步时卡片只剩 ~220px,36px 内边距会把正文压到 148px,故收紧到 22px。
     上一轮用 :has(nth-child(7)) 从「卡片/箭头交替」的子元素序列里反推步数;
     现在子元素全是卡片、列数也已显式,直接绑步数即可。 */
  .spk-x-wf-steps--n4,.spk-x-wf-steps--n5,.spk-x-wf-steps--n6,.spk-x-wf-steps--n7,.spk-x-wf-steps--n8{--spk-x-wf-pad:22px;}
  /* position:relative —— 卡片的定位上下文,内嵌箭头的绝对定位挂在它上面。
     overflow-wrap:anywhere —— 兜底:卡片变窄后,单个超长单词标题(无空格,
     如 13 字符的 PASTEURIZING)无处折行会顶出圆角边框。只在「本来就会溢出」
     时才断词,窄卡片不会因此改变正常换行。 */
  .spk-x-wf-step-card{position:relative;min-width:0;width:auto;overflow-wrap:anywhere;background:#fff;border:1px solid var(--border);border-radius:12px;padding:var(--spk-x-wf-pad,36px);display:flex;flex-direction:column;gap:14px;}
  .spk-x-wf-step-num{font-size:13px;font-weight:700;letter-spacing:2px;color:var(--orange);}
  .spk-x-wf-step-title{font-size:26px;font-weight:700;letter-spacing:1px;color:var(--navy);}
  .spk-x-wf-step-row{display:flex;align-items:center;gap:10px;}
  .spk-x-wf-step-divider{width:100%;height:1px;background:var(--border);}
  /* 箭头内嵌在卡片里(整组最后一张不带),绝对定位在卡片右缘外侧 16px、垂直居中:
     它跟着卡片走,换行时不会像旧的兄弟节点箭头那样停在行中间。
     pointer-events:none —— 纯装饰,不吃文字选择与点击。 */
  .spk-x-wf-flow-arrow{position:absolute;top:50%;left:100%;margin-left:16px;transform:translateY(-50%);display:flex;line-height:0;pointer-events:none;}
  .spk-x-wf-s07-bottom{width:var(--spk-x-wf-container);display:flex;justify-content:space-between;align-items:center;}
  .spk-x-wf-flow-summary{font-size:16px;font-weight:700;letter-spacing:2px;color:var(--navy);}
  .spk-x-wf-video-pill{display:flex;width:max-content;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:30px;padding:12px 22px;cursor:pointer;}
  /* width:max-content:span 是 flex item,不加会被 pill 的 max-content 宽度反向
     压窄而折行;文案保持单行,与 pill 自身 width:max-content 同口径。 */
  .spk-x-wf-video-pill span{width:max-content;font-size:14px;font-weight:600;color:var(--navy);}

  /* ===== S08 Gravity vs Flowmeter ===== */
  .spk-x-wf-s08{background:#fff;padding:90px 0 100px;gap:48px;}
  .spk-x-wf-s08-h2{font-size:36px;line-height:44px;font-weight:700;color:var(--navy);width:var(--spk-x-wf-container);}
  .spk-x-wf-compare{display:flex;gap:32px;width:var(--spk-x-wf-container);}
  .spk-x-wf-compare-card{width:calc((100% - 32px) / 2);border:1px solid var(--border);border-radius:12px;padding:44px;display:flex;flex-direction:column;gap:14px;}
  .spk-x-wf-compare-card.spk-x-wf-tinted{background:var(--bg-light);}
  .spk-x-wf-compare-card.spk-x-wf-plain{background:#fff;}
  .spk-x-wf-compare-title{font-size:24px;font-weight:700;color:var(--navy);}
  .spk-x-wf-compare-tag{font-size:16px;font-weight:600;color:var(--orange);}
  .spk-x-wf-compare-desc{font-size:15px;line-height:24px;font-weight:400;color:var(--text-body);}
  .spk-x-wf-bullet{display:flex;align-items:center;gap:12px;}
  .spk-x-wf-bullet span{font-size:15px;font-weight:400;color:var(--text-body);}
  .spk-x-wf-s08-bottom{width:var(--spk-x-wf-container);display:flex;justify-content:center;}

  /* ===== S09 Inside Technology ===== */
  .spk-x-wf-s09{background:var(--navy);padding:110px 0;gap:48px;}
  .spk-x-wf-s09 .spk-x-wf-h2{color:#fff;}
  .spk-x-wf-s09 .spk-x-wf-lead{color:var(--on-navy);}
  .spk-x-wf-hotspot-img{position:relative;width:var(--spk-x-wf-container);height:620px;border-radius:12px;overflow:hidden;}
  .spk-x-wf-hotspot-img img{width:100%;height:100%;object-fit:cover;}
  .spk-x-wf-hotspot{position:absolute;width:38px;height:38px;border-radius:19px;background:var(--orange);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;}
  .spk-x-wf-hotspot::after{content:attr(data-tip);position:absolute;bottom:46px;left:50%;transform:translateX(-50%);background:#fff;color:var(--navy);font-size:13px;font-weight:600;padding:8px 14px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease;box-shadow:0 4px 14px rgba(0,0,0,0.25);}
  .spk-x-wf-hotspot:hover::after{opacity:1;}
  .spk-x-wf-legend{display:flex;flex-wrap:wrap;gap:16px;width:var(--spk-x-wf-container);justify-content:space-between;}
  .spk-x-wf-legend-item{width:384px;background:var(--navy-panel);border-radius:8px;padding:16px 20px;display:flex;align-items:center;gap:14px;}
  .spk-x-wf-legend-num{font-size:14px;font-weight:700;color:var(--orange);}
  .spk-x-wf-legend-name{font-size:15px;font-weight:600;color:#fff;}

  /* ===== S10 Hygienic Design ===== */
  .spk-x-wf-s10{background:#fff;padding:110px 0;gap:48px;}
  /* 版式按可用细节图张数自动选(render.php 决定,见 wf-hygiene):
       ≥4 张 → 前 3 张做卡片一排 + 第 4 张起做全宽横条(.spk-x-wf-hy-banner)
         3 张 → 3 卡一排
         2 张 → 2 卡一排
         1 张 → 单个全宽横条
     卡片用 flex:1 1 0 等分,不写死 1/3 或 1/4 —— 2 张与 3 张都能等分且永不溢出。
     不用横向滚动:手机端滑动体验差;横条方案零 JS、窄屏自然竖排。 */
  .spk-x-wf-hygiene-row{display:flex;flex-wrap:nowrap;gap:24px;width:var(--spk-x-wf-container);}
  .spk-x-wf-hygiene-card{flex:1 1 0;min-width:0;width:auto;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;}
  .spk-x-wf-hygiene-card .spk-x-wf-h-img{width:100%;height:auto;aspect-ratio:1.5;overflow:hidden;}
  /* 列表/卡片特色图 → contain,避免不同比例图被裁切(补浅底色当信箱边) */
  .spk-x-wf-hygiene-card .spk-x-wf-h-img img{width:100%;height:100%;object-fit:contain;background:#fff;}
  .spk-x-wf-hygiene-card .spk-x-wf-h-body{padding:22px;display:flex;flex-direction:column;gap:8px;}
  .spk-x-wf-h-title{font-size:17px;line-height:24px;font-weight:700;color:var(--navy);}
  .spk-x-wf-h-text{font-size:14px;line-height:22px;font-weight:400;color:var(--text-body);}
  /* 第 4 张起:全宽横条 = 左图 58% + 右文案(标题/正文/CTA) */
  .spk-x-wf-hy-banner{display:flex;width:var(--spk-x-wf-container);margin-top:24px;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;}
  .spk-x-wf-hy-banner-img{width:58%;flex:none;background:#fff;overflow:hidden;}
  .spk-x-wf-hy-bi-inner{width:100%;height:100%;}
  .spk-x-wf-hy-bi-inner img{width:100%;height:100%;object-fit:contain;background:#fff;display:block;}
  .spk-x-wf-hy-banner-body{flex:1;padding:34px 38px;display:flex;flex-direction:column;gap:12px;justify-content:center;}
  /* 交付包只给横条文案、没给图时(noimg):整幅当作文字带,不留半幅空白。 */
  .spk-x-wf-hy-banner--noimg .spk-x-wf-hy-banner-body{padding:40px 44px;}
  .spk-x-wf-hy-banner-body .spk-x-wf-h-title{font-size:22px;}
  .spk-x-wf-hy-banner-body .spk-x-wf-h-text{font-size:15px;line-height:24px;}
  .spk-x-wf-hy-banner-body .spk-x-wf-link-orange{font-size:15px;font-weight:600;color:var(--orange);margin-top:4px;align-self:flex-start;}

  /* ===== S11 Why SinoPAK ===== */
  .spk-x-wf-s11{background:linear-gradient(135deg,#0A2540 0%,#14476F 100%);padding:120px 0;}
  .spk-x-wf-s11-wrap{width:var(--spk-x-wf-container);display:flex;gap:80px;}
  .spk-x-wf-s11-left{width:calc(43% - 40px);display:flex;flex-direction:column;gap:22px;justify-content:center;}
  .spk-x-wf-s11-h2{font-size:48px;line-height:56px;font-weight:700;color:#fff;}
  .spk-x-wf-s11-body{font-size:17px;line-height:28px;font-weight:400;color:var(--on-navy);}
  .spk-x-wf-s11-right{width:calc(50% - 40px);display:flex;flex-wrap:wrap;gap:24px;align-content:center;}
  .spk-x-wf-cap-card{width:calc((100% - 24px) / 2);background:var(--navy-panel);border-radius:10px;padding:28px;display:flex;flex-direction:column;gap:10px;}
  .spk-x-wf-cap-title{font-size:18px;font-weight:700;color:#fff;}
  .spk-x-wf-cap-body{font-size:14px;line-height:22px;font-weight:400;color:var(--on-navy);}

  /* ===== S12 Complete Line ===== */
  .spk-x-wf-s12{background:#fff;padding:110px 0;gap:48px;}
  .spk-x-wf-line-flow{width:var(--spk-x-wf-container);background:var(--bg-light);border-radius:12px;padding:40px 32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;}
  .spk-x-wf-stage{background:#fff;border:1px solid var(--border);border-radius:8px;padding:14px 22px;font-size:15px;font-weight:600;color:var(--navy);white-space:nowrap;}
  .spk-x-wf-stage.spk-x-wf-hl{background:var(--orange);border-color:var(--orange);color:#fff;font-weight:700;letter-spacing:1px;box-shadow:0 6px 16px rgba(245,130,32,0.4);}

  /* ===== S13 Global Projects ===== */
  .spk-x-wf-s13{background:var(--bg-light);padding:110px 0;gap:48px;}
  .spk-x-wf-project-row{display:flex;gap:32px;width:var(--spk-x-wf-container);}
  .spk-x-wf-project-card{width:calc((100% - 64px) / 3);background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;}
  .spk-x-wf-project-card .spk-x-wf-p-img{width:100%;height:auto;aspect-ratio:1.33;overflow:hidden;}
  /* 列表/卡片特色图 → contain,避免不同比例图被裁切(补浅底色当信箱边) */
  .spk-x-wf-project-card .spk-x-wf-p-img img{width:100%;height:100%;object-fit:contain;background:#fff;}
  .spk-x-wf-project-card .spk-x-wf-p-body{padding:28px;display:flex;flex-direction:column;gap:10px;}
  /* 无图案例卡:老站 s13 只给了案例名(没图没链接),卡片会只剩标题。
     给正文一个最小高度并垂直居中,免得并排时比有图的卡矮一截。 */
  .spk-x-wf-project-card.spk-x-wf-p-noimg .spk-x-wf-p-body{justify-content:center;min-height:168px;}
  .spk-x-wf-p-title{font-size:20px;font-weight:700;color:var(--navy);}
  .spk-x-wf-p-spec{font-size:15px;font-weight:400;color:var(--text-body);}
  .spk-x-wf-p-spec-strong{font-size:15px;font-weight:600;color:var(--navy);}
  .spk-x-wf-p-divider{width:100%;height:1px;background:var(--border);}

  /* ===== S14 FAQ + Form ===== */
  .spk-x-wf-s14{background:#fff;padding:110px 0;gap:48px;}
  .spk-x-wf-s14-wrap{width:var(--spk-x-wf-container);display:flex;flex-direction:column;gap:48px;}
  .spk-x-wf-faq-col{width:100%;display:flex;flex-direction:column;gap:20px;}
  .spk-x-wf-faq-h2{font-size:40px;line-height:48px;font-weight:700;color:var(--navy);}
  .spk-x-wf-faq-item{border-bottom:1px solid var(--border);padding:16px 0;display:flex;flex-direction:column;gap:10px;cursor:pointer;}
  .spk-x-wf-faq-row{display:flex;justify-content:space-between;align-items:center;}
  .spk-x-wf-faq-q{font-size:16px;font-weight:600;color:var(--navy);}
  .spk-x-wf-faq-a{font-size:14px;line-height:22px;font-weight:400;color:var(--text-body);}
  .spk-x-wf-faq-panel{display:grid;grid-template-rows:1fr;overflow:hidden;transition:grid-template-rows .28s ease;}
  .spk-x-wf-faq-panel > *{min-height:0;}
  .spk-x-wf-faq-a{overflow:hidden;}
  body.spk-x-js .spk-x-wf-faq-panel{grid-template-rows:0fr;}
  body.spk-x-js .spk-x-wf-faq-item.spk-x-wf-open .spk-x-wf-faq-panel{grid-template-rows:1fr;}
  .spk-x-wf-faq-chev{flex:none;transition:transform .15s ease;}
}
@layer spk-responsive {
  /* Prototype uses canvas scaling instead of responsive reflow. */
  /* S07「工艺流程」是唯一例外:桌面端每行 2~4 张、窄屏自动换行,箭头是内嵌在
     卡片里的 aria-hidden 装饰,换行后必须只在「同一行的相邻卡片之间」出现 ——
     每行最后一张的箭头要收起来(否则悬挂在行尾、指不到下一张)。
     行尾判定写成 :nth-child(Cn):not(:last-child):整组最后一张本来就没有箭头,
     所以这条通用式对 9 步以上的兜底情形同样成立,不需要按步数逐个列举。
     断点沿用本文件惯例 920 / 640,另加 560 作为「单列」的起点。 */
  @media (min-width: 921px) {
    /* 桌面端每行 2 / 3 / 4 列三种情形 —— 与 --n{N} 的列数一一对应 */
    .spk-x-wf-steps--n2 > .spk-x-wf-step-card:nth-child(2n):not(:last-child) > .spk-x-wf-flow-arrow,
    .spk-x-wf-steps--n3 > .spk-x-wf-step-card:nth-child(3n):not(:last-child) > .spk-x-wf-flow-arrow,
    .spk-x-wf-steps--n5 > .spk-x-wf-step-card:nth-child(3n):not(:last-child) > .spk-x-wf-flow-arrow,
    .spk-x-wf-steps--n6 > .spk-x-wf-step-card:nth-child(3n):not(:last-child) > .spk-x-wf-flow-arrow,
    .spk-x-wf-steps--n4 > .spk-x-wf-step-card:nth-child(4n):not(:last-child) > .spk-x-wf-flow-arrow,
    .spk-x-wf-steps--n7 > .spk-x-wf-step-card:nth-child(4n):not(:last-child) > .spk-x-wf-flow-arrow,
    .spk-x-wf-steps--n8 > .spk-x-wf-step-card:nth-child(4n):not(:last-child) > .spk-x-wf-flow-arrow { display: none; }
  }
  @media (max-width: 920px) and (min-width: 561px) {
    /* 平板:一律两列。920px 视口下卡片 ~408px、561px 下 ~249px,
       都比「三列 160px」与「单列」更耐读。 */
    .spk-x-wf-steps { --spk-x-wf-cols: 2; }
    .spk-x-wf-steps > .spk-x-wf-step-card:nth-child(2n):not(:last-child) > .spk-x-wf-flow-arrow { display: none; }
  }
  @media (max-width: 560px) {
    /* 单列:每张卡都是行尾,箭头若还指向右侧就毫无意义 —— 改为向下、落在
       40px 行距正中,继续表达「下一步」。复用同一枚 SVG 旋转 90°,不新增图形。 */
    .spk-x-wf-steps { --spk-x-wf-cols: 1; gap: 40px; }
    .spk-x-wf-flow-arrow { left: 50%; top: 100%; margin: 8px 0 0; transform: translateX(-50%) rotate(90deg); }
  }
  @media (max-width: 920px) {
    /* hero 已是「文字在上、图满宽」的竖排(flex-direction:column),这里只需处理
       窄屏下 stats 的换行;图高由 aspect-ratio:1.85 自适应,不再写死 px。 */
    .spk-x-wf-hero-img { aspect-ratio: 1.85; }
    .spk-x-wf-hero-stats { flex-wrap: wrap; gap: 28px; }
    .spk-x-wf-stat { width: calc(50% - 14px); }
  }
  @media (max-width: 640px) {
    .spk-x-wf-hero-h1 { font-size: 34px; line-height: 40px; }
    .spk-x-wf-hero-sub { font-size: 18px; line-height: 26px; }
    .spk-x-wf-hero-arrow { width: 32px; height: 32px; margin-top: -16px; }
    .spk-x-wf-hero-arrow--prev { left: 8px; }
    .spk-x-wf-hero-arrow--next { right: 8px; }
    .spk-x-wf-hero-dots { bottom: 10px; }
    .spk-x-wf-stat { width: 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    /* JS 已在 reduce-motion 下停掉自动播放,这里再去掉淡入过渡。 */
    .spk-x-wf-hero-slide { transition: none; }
  }

  /* 卫生区窄屏:卡片两列 → 单列,横条转竖排并让图片吃满宽。 */
  @media (max-width: 920px) {
    .spk-x-wf-hygiene-row { flex-wrap: wrap; }
    .spk-x-wf-hygiene-card { flex: 0 1 calc((100% - 24px) / 2); }
    .spk-x-wf-hy-banner { flex-direction: column; }
    .spk-x-wf-hy-banner-img { width: 100%; aspect-ratio: 1.5; }
  }
  @media (max-width: 640px) {
    .spk-x-wf-hygiene-card { flex: 1 1 100%; }
  }

  /* 宽表格窄屏可横向滚动。
     根因:.spk-x-wf-section 是 display:flex,中间那层无类名的包裹 div 是 flex 子项,
     默认 min-width:auto → 最小宽度被内容(实测 1052px)顶住,缩不下去 → 撑破视口。
     只加 overflow-x:auto 不生效,必须先把 flex 子项的 min-width 显式归零
     (已在 spk-base 段写死 .spk-x-wf-section > *{min-width:0}),这里才能滚动。 */
  @media (max-width: 1100px) {
    .spk-x-wf-spec-table,
    .spk-x-wf-select-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .spk-x-wf-x-head, .spk-x-wf-x-row { min-width: 1000px; }
    .spk-x-wf-t-head, .spk-x-wf-t-row { min-width: 720px; }
    /* 两列选型表内容短,不需要 720px 的横向滚动底宽。 */
    .spk-x-wf-select-table.spk-x-wf-select-cols-2 .spk-x-wf-t-head,
    .spk-x-wf-select-table.spk-x-wf-select-cols-2 .spk-x-wf-t-row { min-width: 0; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Project-case family (.spk-x-case) — shared shell for the four composable
 * case blocks: project-header / project-section / project-video /
 * project-gallery. Each block renders a full-bleed band with a centered,
 * article-width .spk-x-wrap. The whole case reads as ONE continuous white
 * document with a single vertical rhythm:
 *   --spk-x-case-step  → the gap between every stacked band (and facts → lead);
 *   --spk-x-case-gap   → in-band spacing (copy → figure, heading → grid/player).
 * Owning these here (not per block) is what keeps the spacing uniform — the
 * blocks add no spacing of their own. Breakpoints: 920 / 640 (repo convention).
 * ═══════════════════════════════════════════════════════════════════════════ */
@layer spk-base {
  .spk-x-case {
    --spk-x-case-measure: 980px;   /* column cap: facts / images / video */
    --spk-x-case-text: 760px;      /* comfortable prose reading width */
    --spk-x-case-step: clamp(52px, 6vw, 88px);
    --spk-x-case-gap: clamp(22px, 2.6vw, 32px);
    padding-top: var(--spk-x-case-step);
    background: var(--spk-x-white);
  }
  /* Narrow each band's wrap to the article column (base .spk-x-wrap is the full
     1250px site shell — this override wins by specificity within spk-base). */
  .spk-x-case .spk-x-wrap {
    width: min(100% - clamp(40px, 8vw, 96px), var(--spk-x-case-measure));
    margin-inline: auto;
  }
  /* First band clears the fixed header; the last band gets bottom breathing.
     A cta-plan band (if appended after) carries its own top padding instead. */
  .spk-x-case-header {
    padding-top: var(--spk-x-hero-pad-top);
  }
  /* Bottom breathing for the last band — scoped to the FRONT-END post wrapper
     on purpose. In the editor each block is server-rendered in isolation, so a
     bare `.spk-x-case:last-child` matches EVERY block and pads them all. The
     `.entry-content >` prefix only exists on the front end, so the editor stays
     clean and the two views match. */
  .entry-content > .spk-x-case:last-child {
    padding-bottom: clamp(64px, 9vw, 120px);
  }

  /* ── Header ─────────────────────────────────────────────────────────────── */
  .spk-x-case-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
  }
  .spk-x-case-crumbs a {
    color: var(--spk-x-brand);
  }
  .spk-x-case-crumbs a:hover {
    color: var(--spk-x-brand-dark);
  }
  .spk-x-case-crumbs span[aria-hidden] {
    color: var(--spk-x-line);
  }
  .spk-x-case-crumbs__current {
    color: var(--spk-x-muted);
  }
  .spk-x-case-title {
    max-width: 24ch;
    margin: 0 0 18px;
    color: var(--spk-x-brand-dark);
    font-size: clamp(30px, 4vw, 50px);
    line-height: 1.06;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }
  .spk-x-case-summary {
    max-width: var(--spk-x-case-text);
    margin: 0;
    color: var(--spk-x-ink);
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.6;
  }
  .spk-x-case-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: var(--spk-x-case-gap);
    overflow: hidden;
    border: 1px solid var(--spk-x-line);
    border-radius: 14px;
    background: var(--spk-x-line);
  }
  .spk-x-case-facts > div {
    padding: 18px 20px;
    background: var(--spk-x-soft);
  }
  .spk-x-case-facts dt {
    color: var(--spk-x-accent);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .spk-x-case-facts dd {
    margin-top: 8px;
    color: var(--spk-x-brand);
    font-size: clamp(16px, 1.3vw, 20px);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
  }
  /* !important: WP core ships an UNLAYERED `:where(figure){margin:0 0 1em}`,
     and unlayered always beats our @layer rules — without it the lead loses its
     top gap (facts → lead collapses) and gains a stray 16px bottom. Same fight
     as the sticky-header fix above. */
  .spk-x-case-lead {
    margin: var(--spk-x-case-step) 0 0 !important;
  }

  /* ── Shared figures (lead / section / gallery) ─────────────────────────── */
  .spk-x-case-figure {
    margin: 0 !important;
  }
  .spk-x-case-lead img,
  .spk-x-case-figure img {
    display: block;
    width: 100%;
    object-fit: cover;
    border-radius: 16px;
    filter: saturate(0.99) contrast(1.03);
  }
  /* Lead image keeps its own natural aspect ratio at full width — no forced
     crop, so the whole photo shows. */
  .spk-x-case-lead img {
    height: auto;
    aspect-ratio: auto;
    object-fit: fill;
  }
  .spk-x-case-figure img {
    aspect-ratio: 16 / 9;
    border-radius: 14px;
  }
  .spk-x-case-lead figcaption,
  .spk-x-case-figure figcaption {
    margin-top: 12px;
    color: var(--spk-x-muted);
    font-size: 13px;
    line-height: 1.5;
  }

  /* ── Cross-block: the same figure-margin fight as above ────────────────── */
  /* !important: WP core ships an UNLAYERED `:where(figure){margin:0 0 1em}`.
     Unlayered normal declarations beat EVERY @layer rule no matter the
     specificity, so blocks/feature-grid/style.css `.spk-x-features__media{margin:0}`
     never lands and each feature figure keeps a stray 1em bottom gap. The fix
     has to live here (and be !important); block files may not carry !important
     (check-css W1). Same medicine as .spk-x-case-figure above. */
  .spk-x-features__media {
    margin: 0 !important;
  }

  /* ── Narrative section ─────────────────────────────────────────────────── */
  /* Stacked layout: prose spans the full article column (no narrow text
     measure) so copy and the figure below share one width. */
  .spk-x-case-prose {
    max-width: none;
  }
  .spk-x-case-h2 {
    margin: 0 0 16px;
    color: var(--spk-x-brand-dark);
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1.12;
    letter-spacing: -0.025em;
  }
  .spk-x-case-body {
    color: var(--spk-x-ink);
    font-size: 17px;
    line-height: 1.75;
  }
  .spk-x-case-body p {
    margin: 0 0 16px;
  }
  .spk-x-case-body p:last-child {
    margin-bottom: 0;
  }
  .spk-x-case-body ul {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
  }
  .spk-x-case-body ul:last-child,
  .spk-x-case-body ol:last-child {
    margin-bottom: 0;
  }
  .spk-x-case-body li {
    position: relative;
    margin: 0 0 10px;
    line-height: 1.6;
  }
  /* Custom diamond bullet only for UL. Numbered lists (from the classic editor)
     keep native markers. */
  .spk-x-case-body ul > li {
    padding-left: 26px;
  }
  .spk-x-case-body ul > li::before {
    position: absolute;
    top: 0.62em;
    left: 2px;
    width: 8px;
    height: 8px;
    content: "";
    border-radius: 2px;
    background: var(--wp--preset--color--cyan, #08a8d2);
    transform: rotate(45deg);
  }
  .spk-x-case-body ol {
    margin: 0 0 16px;
    padding-left: 22px;
  }
  /* Classic-editor inline formatting. */
  .spk-x-case-body a {
    color: var(--spk-x-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .spk-x-case-body a:hover {
    color: var(--spk-x-brand-dark);
  }
  .spk-x-case-body strong {
    font-weight: 800;
  }
  .spk-x-case-body blockquote {
    margin: 0 0 16px;
    padding: 4px 0 4px 18px;
    border-left: 3px solid var(--spk-x-accent);
    color: var(--spk-x-muted);
    font-style: italic;
  }
  /* A section figure always stacks BELOW the prose, spanning the full article
     column (wider than the text measure for an editorial rhythm). Text-only
     sections just flow the prose column. */
  .spk-x-case-section .spk-x-case-figure {
    margin-top: var(--spk-x-case-gap) !important;
  }

  /* ── Video ─────────────────────────────────────────────────────────────── */
  .spk-x-case-video .spk-x-case-h2 {
    max-width: var(--spk-x-case-text);
  }
  .spk-x-case-player {
    position: relative;
    margin-top: var(--spk-x-case-gap);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
    background: #000;
    box-shadow: var(--spk-x-shadow);
  }
  .spk-x-case-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* ── Gallery ───────────────────────────────────────────────────────────── */
  .spk-x-case-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: var(--spk-x-case-gap);
  }
  /* --spk-x-gallery-ratio is set inline from the block's `ratio` attribute. */
  .spk-x-case-gallery__fig img {
    aspect-ratio: var(--spk-x-gallery-ratio, 16 / 9);
    height: 100%;
    border-radius: 12px;
  }
  /* Each tile is a real <button> so it's keyboard-openable; it must not look
     like one. The image zooms slightly on hover to signal it's interactive. */
  .spk-x-case-gallery__btn {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    border-radius: 12px;
    overflow: hidden;
  }
  .spk-x-case-gallery__btn img {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .spk-x-case-gallery__btn:hover img {
    transform: scale(1.05);
  }
  .spk-x-case-gallery__btn:focus-visible {
    outline: 2px solid var(--spk-x-accent);
    outline-offset: 3px;
  }

  /* ── Lightbox (built once by view.js, appended to <body>) ──────────────── */
  .spk-x-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 56px);
    background: rgba(9, 14, 24, 0.9);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s ease, visibility 0s linear 0.32s;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .spk-x-lightbox.spk-x-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.32s ease;
  }
  .spk-x-lightbox__stage {
    position: relative;
    margin: 0;
    max-width: min(1100px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .spk-x-lightbox__img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Cross-fade state applied by JS while the src swaps. */
  .spk-x-lightbox.is-swapping .spk-x-lightbox__img {
    opacity: 0;
    transform: scale(0.98);
  }
  .spk-x-lightbox__cap {
    margin: 0;
    max-width: 70ch;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
  }
  .spk-x-lightbox__count {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
  }
  .spk-x-lightbox__btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    color: #fff;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .spk-x-lightbox__btn:hover {
    background: rgba(255, 255, 255, 0.24);
  }
  .spk-x-lightbox__btn:active {
    transform: scale(0.92);
  }
  .spk-x-lightbox__btn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .spk-x-lightbox__close {
    top: clamp(12px, 3vw, 28px);
    right: clamp(12px, 3vw, 28px);
  }
  .spk-x-lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
  }
  .spk-x-lightbox__nav:active {
    transform: translateY(-50%) scale(0.92);
  }
  .spk-x-lightbox__prev {
    left: clamp(8px, 2vw, 24px);
  }
  .spk-x-lightbox__next {
    right: clamp(8px, 2vw, 24px);
  }
  .spk-x-lightbox[hidden] {
    display: none;
  }
}

@layer spk-responsive {
  @media (max-width: 920px) {
    .spk-x-case-facts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 640px) {
    .spk-x-case-gallery__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Move the lightbox arrows to the bottom corners so they don't sit over the
       image on narrow screens. */
    .spk-x-lightbox__nav {
      top: auto;
      bottom: clamp(12px, 4vw, 24px);
      transform: none;
    }
    .spk-x-lightbox__nav:active {
      transform: scale(0.92);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .spk-x-case-gallery__btn img,
    .spk-x-lightbox,
    .spk-x-lightbox__img,
    .spk-x-lightbox__btn {
      transition: none !important;
    }
    .spk-x-case-gallery__btn:hover img {
      transform: none;
    }
  }
}

/* ═══════════ About page (sinopak/ab-*) shared primitives — merged from _snippets/ab-shared.css ═══════════ */
/**
 * About page (sinopak/ab-*) — shared primitives.
 *
 * 合并目标:blocks/style-index.css 的 @layer spk-base 段(与 @layer spk-responsive 段)。
 * 这些 class 被 ≥2 个 ab-* 块的 HTML 使用,属主只能有一份 —— 因此不写进任何块的
 * style.css;块内需要微调时一律写复合作用域选择器(如 .spk-x-ab-global__panel
 * .spk-x-ab-label{…})。
 *
 * 字面值全部照抄静态模板 about-static/index.html 的 <style>:
 *   --navy #062b5c / --blue #087eae / --cyan #08a8d2 / --orange #f28a2e
 *   --ink #142231 / --muted #627281 / --soft #f3f7fa / --line #dce7ef
 *   --shell min(100% - clamp(32px,7vw,120px), 1250px)
 * 断点沿用模板的 1180 / 980 / 640。
 */
@layer spk-base {
  /* 模板的 body{font-family:var(--font)}:About 组的每个 section 根都挂一次,
     避免依赖站点 body 字体在编辑器 iframe 内的差异。 */
  .spk-x-ab-hero,
  .spk-x-ab-intro,
  .spk-x-ab-facts,
  .spk-x-ab-section,
  .spk-x-ab-cta-band {
    font-family: var(--wp--preset--font-family--primary, "Helvetica Neue", Arial, sans-serif);
  }

  /* .shell */
  .spk-x-ab-shell {
    width: min(100% - clamp(32px, 7vw, 120px), 1250px);
    margin-inline: auto;
  }

  /* .label */
  .spk-x-ab-label {
    margin: 0 0 14px;
    color: #f28a2e;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }

  /* .section / .section.soft */
  .spk-x-ab-section {
    position: relative;
    padding: clamp(64px, 7vw, 96px) 0;
    background: #fff;
  }
  .spk-x-ab-section--soft {
    background: linear-gradient(180deg, #f8fbfd 0%, #eef6fb 100%);
  }

  /* .section-head */
  .spk-x-ab-section-head {
    width: min(880px, 100%);
    margin: 0 auto clamp(34px, 4vw, 54px);
    text-align: center;
  }
  .spk-x-ab-section-head h2 {
    margin: 0;
    color: #062b5c;
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1;
    letter-spacing: -0.03em;
  }
  /* sinopak_site_richtext() 的 <div class="spk-x-rich …"> 替代模板的 .section-head p */
  .spk-x-ab-section-head .spk-x-ab-section-head__text {
    margin: 20px 0 0;
  }
  .spk-x-ab-section-head .spk-x-ab-section-head__text p {
    margin: 0;
    color: #627281;
    font-size: clamp(16px, 1.25vw, 20px);
    line-height: 1.56;
  }
  .spk-x-ab-section-head .spk-x-ab-section-head__text p + p {
    margin-top: 14px;
  }
  /* Template cascade quirk reproduced on purpose: `.section-head p` (0,1,1)
     out-ranks `.label` (0,1,0), so eyebrows inside a section head render
     muted / clamp(16px,1.25vw,20px) / margin 20px 0 0 — not orange 13px. */
  .spk-x-ab-section-head .spk-x-ab-label {
    margin: 20px 0 0;
    color: #627281;
    font-size: clamp(16px, 1.25vw, 20px);
    line-height: 1.56;
  }

  /* .cta / .cta.ghost */
  .spk-x-ab-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 54px;
    border: 0;
    border-radius: 10px;
    padding: 0 30px;
    background: #f28a2e;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  }
  .spk-x-ab-cta:hover,
  .spk-x-ab-cta:focus-visible {
    transform: translateY(-2px);
    background: #ff902d;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
  }
  .spk-x-ab-cta--ghost {
    border: 1px solid rgba(255, 255, 255, 0.62);
    background: rgba(5, 35, 76, 0.34);
    color: #fff;
  }

  /* .text-link(模板 ::after 用 ASCII "->",站点惯例改 "→") */
  .spk-x-ab-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    padding: 0;
    background: transparent;
    color: #062b5c;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .spk-x-ab-text-link::after {
    content: "→";
    color: #f28a2e;
    transition: transform 0.18s ease;
  }
  .spk-x-ab-text-link:hover::after {
    transform: translateX(4px);
  }
}

@layer spk-responsive {
  @media (max-width: 640px) {
    /* 模板 :root{--shell: min(100% - 28px, 1250px)} */
    .spk-x-ab-shell {
      width: min(100% - 28px, 1250px);
    }
  }
}

/* ═══════════ 5 Gallon machine page (sinopak/fg-*) shared primitives — merged from _snippets/fg-shared.css ═══════════ */
/**
 * Five Gallon (sinopak/fg-*) shared primitives — MERGE INTO blocks/style-index.css.
 *
 * Source of truth: the static prototype
 * "5-gallon-water-filling-machine-static/index.html" <style> block. Every
 * value below is a literal copy from that file (no token substitution) —
 * .shell / .section / .section-soft / .label / .section-head / .cta /
 * .cta.secondary / .text-link are used by ≥2 of the six fg-* blocks, so they
 * live here (spk-base) rather than in any single block's style.css (check-css
 * E5: one owner per class).
 *
 * Element selectors are always scoped under an fg class (e.g.
 * `.spk-x-fg-section-head h2`) — never bare — so nothing leaks site-wide.
 *
 * Specificity note: `.spk-x-fg-cta.spk-x-fg-cta--secondary` is written as a
 * compound on purpose. The prototype's `.cta.secondary` (0,2,0) outranks
 * `.cta:hover` (0,2,0, declared earlier), which is why the white outline
 * button keeps its white background on hover. A single-class modifier would
 * lose that duel and turn orange.
 *
 * Breakpoints: 1180px / 760px (prototype values, do not invent others).
 */
@layer spk-base {
  /* .shell — prototype --shell: min(100% - clamp(32px, 7vw, 120px), 1250px) */
  .spk-x-fg-shell {
    width: min(100% - clamp(32px, 7vw, 120px), 1250px);
    margin-inline: auto;
  }

  /* .section / .section-soft */
  .spk-x-fg-section {
    padding: clamp(62px, 7vw, 92px) 0;
    font-family: var(--wp--preset--font-family--primary, "Helvetica Neue", Arial, sans-serif);
  }
  .spk-x-fg-section--soft {
    background: linear-gradient(180deg, #f7fbfd 0%, #eef6fb 100%);
  }

  /* .label — orange uppercase eyebrow */
  .spk-x-fg-label {
    margin: 0 0 13px;
    color: #f28a2e;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }

  /* .section-head / .section-head.center */
  .spk-x-fg-section-head {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.7fr);
    gap: clamp(24px, 5vw, 72px);
    align-items: end;
    margin-bottom: clamp(28px, 4vw, 46px);
  }
  .spk-x-fg-section-head--center {
    display: block;
    max-width: 820px;
    margin-inline: auto;
    text-align: center;
  }
  .spk-x-fg-section-head h2 {
    margin: 0;
    color: #062b5c;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 900;
  }
  /* The lead may be a plain <p> or a sinopak_site_richtext() wrapper — both
     read as the prototype's .section-head p. */
  .spk-x-fg-section-head p,
  .spk-x-fg-section-head .spk-x-rich {
    margin: 0;
    color: #657482;
    font-size: 17px;
    line-height: 1.62;
  }

  /* .cta — orange pill, used as <button> and <a> */
  .spk-x-fg-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 52px;
    border: 0;
    border-radius: 10px;
    padding: 0 25px;
    background: #f28a2e;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  }
  .spk-x-fg-cta:hover,
  .spk-x-fg-cta:focus-visible {
    transform: translateY(-2px);
    background: #ff902d;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.16);
  }
  /* declared AFTER :hover on purpose — see the specificity note above */
  .spk-x-fg-cta.spk-x-fg-cta--secondary {
    border: 1px solid rgba(6, 43, 92, 0.24);
    background: #fff;
    color: #062b5c;
    box-shadow: none;
  }

  /* .text-link — navy uppercase link with an orange trailing arrow.
     The prototype puts this class on a bare <button>, which would keep the
     UA button chrome; the border/background/padding reset here is the one
     deliberate correction (see the delivery notes). */
  .spk-x-fg-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    padding: 0;
    background: transparent;
    color: #062b5c;
    font-family: inherit;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .spk-x-fg-text-link::after {
    content: "→";
    color: #f28a2e;
    transition: transform 0.18s ease;
  }
  .spk-x-fg-text-link:hover::after {
    transform: translateX(4px);
  }
}

@layer spk-responsive {
  @media (max-width: 760px) {
    /* prototype: :root { --shell: min(100% - 28px, 1250px) } */
    .spk-x-fg-shell {
      width: min(100% - 28px, 1250px);
    }
    .spk-x-fg-section-head {
      display: block;
    }
    .spk-x-fg-section-head p,
    .spk-x-fg-section-head .spk-x-rich {
      margin-top: 16px;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Machine page family (mp-*) — 共享基座
   ───────────────────────────────────────────────────────────────────────────
   出处(两份已定稿的机型页 HTML 原型,值逐条抄录):
     CSD /machines/carbonated-soft-drink-filling-machine/
         csd-machine-h5-pure-html-delivery-20260911-152320/src/styles.css
     PET /machines/pet-bottle-soft-drink-filling-machine/
         pet-bottle-soft-drink-filling-machine-h5-delivery-20260911-v2/src/styles.css

   两份原型共用同一套设计语言(navy #062b5c / orange #f28a2e / #dce7ee 描边 /
   1250 版心 / 8–10px 圆角 / 浅描边卡片),差异集中在:按钮高度与字重、表格内边距、
   表单外观、版心左右留白、h1/h2 字号。差异用页面标记类承载:

     每个 mp 块的根元素 = `spk-x-mp-{name} spk-x-mp-{csd|pet}` (+ 需要 96px 上下
     留白的分区再加 `spk-x-mp-section`),anchor 走 block.json 的 anchor 属性。

   规则分层:
     本文件(spk-base / spk-responsive)= 跨块复用的原语(版心/按钮/表格/表单/轮播)
     块文件(spk-block / spk-responsive)   = 只写自己 `spk-x-mp-{block}__*` 的版式

   刻意不抄的两处(与站点一致性优先,视觉无差异):
     1) font-family —— 原型是 "Helvetica Neue", Arial…;站点 preset 主字体栈以同样两个
        字体开头,直接用站点栈,不覆盖。
     2) body / .site / header / footer / h1..h3 全局元素规则 —— 原型自带整站外壳,
        本站外壳由 header/footer 块提供,只抄分区级规则。
   ═══════════════════════════════════════════════════════════════════════════ */
@layer spk-base {
  :root {
    /* 机型页家族 token(模板 :root 逐条抄录;--spk-mp-* 命名私有,不与站点 token 冲突) */
    --spk-mp-navy: #062b5c;
    --spk-mp-deep: #073968;
    --spk-mp-blue: #087eae;
    --spk-mp-cyan: #12b7cb;
    --spk-mp-orange: #f28a2e;
    --spk-mp-orange-hover: #ff902d;
    --spk-mp-orange-dark: #dc7419;
    --spk-mp-ink: #152538;
    --spk-mp-muted: #627386;
    --spk-mp-soft: #eef7fc;
    --spk-mp-soft-2: #f7fbfe;
    --spk-mp-line: #dce7ee;
    --spk-mp-line-2: #cfe2ee;
    --spk-mp-white: #ffffff;
    --spk-mp-shadow: 0 20px 48px rgba(6, 43, 92, 0.08);
    --spk-mp-shadow-sm: 0 14px 38px rgba(6, 43, 92, 0.06);
    --spk-mp-shadow-lg: 0 24px 70px rgba(6, 43, 92, 0.12);
    --spk-mp-radius: 8px;
    --spk-mp-radius-lg: 10px;
  }

  /* ── 页面标记:CSD(深色 hero / 96→64 分区留白 / 13px-820 按钮) ── */
  .spk-x-mp-csd {
    /* 原型 CSD 从不声明 body line-height → 全部继承 normal;只有 p 显式 1.65。
       本站 reset 给 body 设了 1.5,不在这里拉回来,表格单元格/卡片正文会比原型高
       约 4px/行(9 行表 ≈ +40px)。:where() 保持零特异性,块文件里的元素类仍可覆盖。 */
    line-height: normal;
    --spk-mp-ink: #152538;
    --spk-mp-muted: #627386;
    --spk-mp-shell: min(100% - 112px, 1250px);
    --spk-mp-btn-h: 48px;
    --spk-mp-btn-size: 13px;
    --spk-mp-btn-weight: 820;
    --spk-mp-btn-pad: 22px;
    --spk-mp-card-radius: 8px;
    --spk-mp-card-shadow: 0 14px 38px rgba(6, 43, 92, 0.06);
  }

  /* ── 页面标记:PET(浅色 hero / 96→70 分区留白 / 14px-900 按钮) ── */
  .spk-x-mp-pet {
    /* 原型 PET 声明 body{font-size:16px; line-height:1.6} —— 段落、表单控件、按钮
       都继承 1.6(表格单元格实测 24px 行高)。 */
    line-height: 1.6;
    --spk-mp-ink: #10243a;
    --spk-mp-muted: #64768a;
    --spk-mp-shell: min(1250px, calc(100% - 48px));
    --spk-mp-btn-h: 46px;
    /* 原型 .button 不写 font-size → 继承 body 的 16px(与 CSD 显式 13px 相对) */
    --spk-mp-btn-size: 16px;
    --spk-mp-btn-weight: 900;
    --spk-mp-btn-pad: 20px;
    --spk-mp-card-radius: 10px;
    --spk-mp-card-shadow: 0 20px 58px rgba(6, 43, 92, 0.08);
  }

  /* ── 版心 ── */
  .spk-x-mp-shell {
    width: var(--spk-mp-shell, min(1250px, calc(100% - 48px)));
    margin-inline: auto;
  }

  /* ── 分区 ── */
  .spk-x-mp-section {
    padding: 96px 0;
  }
  /* 站内锚点跳转让位 sticky header(#bottles / #models / #inquiry …) */
  .spk-x-mp-section,
  .spk-x-mp-hero,
  .spk-x-mp-detail-hero {
    scroll-margin-top: var(--spk-x-header-h, 72px);
  }
  .spk-x-mp-section--tint {
    background: var(--spk-mp-soft);
  }
  .spk-x-mp-section--white {
    background: var(--spk-mp-white);
  }
  .spk-x-mp-section--dark {
    background: linear-gradient(120deg, #062b5c 0%, #073968 54%, #0b5b9a 100%);
    color: var(--spk-mp-white);
  }
  .spk-x-mp-section--deep {
    background: var(--spk-mp-deep);
    color: var(--spk-mp-white);
  }

  /* ── 小节标题块 ── */
  .spk-x-mp-eyebrow {
    display: block;
    margin: 0 0 14px;
    color: var(--spk-mp-orange);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
  }
  /* 深色底(hero / process / inquiry)的引导语换成浅青(模板 .hero .eyebrow 等) */
  .spk-x-mp-on-dark .spk-x-mp-eyebrow,
  .spk-x-mp-section--dark .spk-x-mp-eyebrow,
  .spk-x-mp-section--deep .spk-x-mp-eyebrow {
    color: #9ee8f5;
  }

  .spk-x-mp-h2 {
    margin: 0 0 16px;
    color: var(--spk-mp-navy);
    overflow-wrap: anywhere;
  }
  .spk-x-mp-csd .spk-x-mp-h2 {
    font-size: 46px;
    line-height: 1.06;
    font-weight: 840;
  }
  .spk-x-mp-pet .spk-x-mp-h2 {
    margin-bottom: 18px;
    font-size: clamp(30px, 3.2vw, 38px);
    line-height: 1.1;
  }
  .spk-x-mp-h3 {
    margin: 0 0 12px;
    color: var(--spk-mp-navy);
    line-height: 1.18;
    overflow-wrap: anywhere;
  }
  .spk-x-mp-csd .spk-x-mp-h3 {
    font-size: 24px;
    line-height: 1.16;
    font-weight: 820;
  }
  /* 原型 CSD `p { line-height: 1.65 }`(元素级规则,块类可覆盖) */
  .spk-x-mp-csd :where(p) {
    line-height: 1.65;
  }
  .spk-x-mp-text {
    margin: 0;
    color: var(--spk-mp-muted);
    line-height: 1.65;
  }
  .spk-x-mp-pet .spk-x-mp-text {
    line-height: 1.6;
  }
  /* 深色分区里的正文转白(模板 .process-section p / .inquiry-section p) */
  .spk-x-mp-section--dark .spk-x-mp-text,
  .spk-x-mp-section--deep .spk-x-mp-text {
    color: rgba(255, 255, 255, 0.78);
  }
  .spk-x-mp-section--dark .spk-x-mp-h2,
  .spk-x-mp-section--dark .spk-x-mp-h3,
  .spk-x-mp-section--deep .spk-x-mp-h2,
  .spk-x-mp-section--deep .spk-x-mp-h3 {
    color: var(--spk-mp-white);
  }

  .spk-x-mp-head {
    max-width: 780px;
    margin-bottom: 42px;
  }
  .spk-x-mp-head p {
    max-width: 720px;
    font-size: 18px;
  }
  .spk-x-mp-head--wide {
    max-width: 1010px;
  }
  .spk-x-mp-head--inline {
    display: flex;
    max-width: none;
    align-items: end;
    justify-content: space-between;
    gap: 50px;
  }
  .spk-x-mp-pet .spk-x-mp-head {
    max-width: 820px;
    margin-bottom: 40px;
  }
  .spk-x-mp-pet .spk-x-mp-head--compact {
    max-width: 710px;
  }
  .spk-x-mp-pet .spk-x-mp-head p {
    font-size: 17px;
  }
  /* PET 的 .section-kicker(橙色大写,比 CSD 的 eyebrow 大一号) */
  .spk-x-mp-pet .spk-x-mp-eyebrow {
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 900;
  }

  /* ── 按钮 ── */
  .spk-x-mp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--spk-mp-btn-h, 48px);
    padding: 0 var(--spk-mp-btn-pad, 22px);
    border: 1px solid transparent;
    border-radius: var(--spk-mp-radius);
    font-size: var(--spk-mp-btn-size, 13px);
    font-weight: var(--spk-mp-btn-weight, 820);
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
  }
  .spk-x-mp-btn--primary {
    background: var(--spk-mp-orange);
    color: var(--spk-mp-white);
    box-shadow: 0 16px 34px rgba(242, 138, 46, 0.24);
  }
  .spk-x-mp-csd .spk-x-mp-btn--primary:hover,
  .spk-x-mp-csd .spk-x-mp-btn--primary:focus-visible {
    background: var(--spk-mp-orange-hover);
    transform: translateY(-1px);
  }
  .spk-x-mp-pet .spk-x-mp-btn--primary {
    box-shadow: 0 18px 42px rgba(242, 138, 46, 0.24);
    transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
  }
  .spk-x-mp-pet .spk-x-mp-btn--primary:hover,
  .spk-x-mp-pet .spk-x-mp-btn--primary:focus-visible {
    background: var(--spk-mp-orange-dark);
    transform: translateY(-2px);
  }
  /* 首屏次按钮:透明底白描边(CSD .ghost-cta) */
  .spk-x-mp-btn--ghost {
    border-color: rgba(255, 255, 255, 0.72);
    background: transparent;
    color: var(--spk-mp-white);
  }
  /* 白底描边“文字按钮”(CSD .text-button / PET .soft-cta 之外的次级动作) */
  .spk-x-mp-btn--text {
    border-color: var(--spk-mp-line);
    background: var(--spk-mp-white);
    color: var(--spk-mp-navy);
    box-shadow: none;
  }
  .spk-x-mp-btn--full {
    width: 100%;
  }
  .spk-x-mp-btn:focus-visible {
    outline: 3px solid rgba(242, 138, 46, 0.58);
    outline-offset: 2px;
  }
  /* 橙色下划线路由链接(PET .text-link / .inline-route) */
  .spk-x-mp-textlink {
    color: var(--spk-mp-navy);
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: rgba(6, 43, 92, 0.25);
    text-underline-offset: 7px;
  }
  .spk-x-mp-textlink:hover,
  .spk-x-mp-textlink:focus-visible {
    color: var(--spk-mp-orange);
  }

  /* ── 标签胶囊 ── */
  .spk-x-mp-taglist {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .spk-x-mp-tag {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--spk-mp-line-2);
    border-radius: var(--spk-mp-radius);
    background: #edf7fd;
    color: var(--spk-mp-navy);
    font-size: 12px;
    font-weight: 800;
  }
  .spk-x-mp-csd .spk-x-mp-tag {
    min-height: 38px;
    padding: 0 14px;
  }
  .spk-x-mp-pet .spk-x-mp-tag {
    padding: 6px 10px;
    background: var(--spk-mp-white);
    color: var(--spk-mp-deep);
    font-size: 13px;
  }
  .spk-x-mp-pet .spk-x-mp-tag--large {
    padding: 11px 14px;
  }

  /* hero 轮播框是 <figure>:WP 核心输出一条**未分层**的
     `:where(figure){margin:0 0 1em}`,未分层规则压过所有 @layer 内的规则(与
     .spk-x-case-figure 同一坑,见本文件 [case] 段的同款说明),所以这里必须
     !important —— 否则媒体框比左侧文案列矮 16px(实测 591 vs 607),轮播图跟着矮 19px。
     全家族只有 mp-detail-hero 用 <figure>(其余媒体框是 div)。 */
  .spk-x-mp-detail-hero__media {
    margin: 0 !important;
  }

  /* ── 卡片底 ── */
  .spk-x-mp-card {
    border: 1px solid var(--spk-mp-line);
    border-radius: var(--spk-mp-card-radius, 8px);
    background: var(--spk-mp-white);
    box-shadow: var(--spk-mp-card-shadow, 0 14px 38px rgba(6, 43, 92, 0.06));
  }

  /* ── 表格(两个原型的表头/斑马纹/取值色分别落地) ── */
  .spk-x-mp-tablewrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .spk-x-mp-table {
    width: 100%;
  }
  .spk-x-mp-csd .spk-x-mp-table {
    min-width: 880px;
    border: 1px solid var(--spk-mp-line);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--spk-mp-radius);
    overflow: hidden;
  }
  .spk-x-mp-csd .spk-x-mp-table th {
    padding: 16px 18px;
    background: var(--spk-mp-navy);
    color: var(--spk-mp-white);
    font-size: 12px;
    font-weight: 820;
    letter-spacing: 0;
    text-align: left;
    text-transform: uppercase;
  }
  .spk-x-mp-csd .spk-x-mp-table td {
    padding: 16px 18px;
    border-bottom: 1px solid var(--spk-mp-line);
    color: #30465a;
    font-size: 15px;
    font-weight: 700;
  }
  .spk-x-mp-csd .spk-x-mp-table tbody tr:nth-child(even) td {
    background: #f8fbfd;
  }
  .spk-x-mp-csd .spk-x-mp-table tbody tr:hover td {
    background: #fff6ee;
  }
  .spk-x-mp-csd .spk-x-mp-table td:first-child {
    color: var(--spk-mp-navy);
    font-weight: 820;
  }
  .spk-x-mp-csd .spk-x-mp-table td:nth-child(5) {
    color: var(--spk-mp-orange);
    font-weight: 820;
  }
  .spk-x-mp-csd .spk-x-mp-table tbody tr:last-child td {
    border-bottom: 0;
  }
  .spk-x-mp-pet .spk-x-mp-table {
    min-width: 1040px;
    border-collapse: collapse;
    font-size: 15px;
  }
  .spk-x-mp-pet .spk-x-mp-table thead {
    background: var(--spk-mp-navy);
    color: var(--spk-mp-white);
  }
  .spk-x-mp-pet .spk-x-mp-table th,
  .spk-x-mp-pet .spk-x-mp-table td {
    padding: 19px 20px;
    border-bottom: 1px solid var(--spk-mp-line);
    text-align: left;
  }
  .spk-x-mp-pet .spk-x-mp-table thead th {
    font-size: 15px;
  }
  .spk-x-mp-pet .spk-x-mp-table tbody tr:nth-child(even) {
    background: #f7fbfd;
  }
  .spk-x-mp-pet .spk-x-mp-table tbody th {
    color: var(--spk-mp-navy);
    font-weight: 900;
  }
  .spk-x-mp-pet .spk-x-mp-table td {
    color: #2d4154;
    font-weight: 700;
  }
  .spk-x-mp-pet .spk-x-mp-table td strong {
    color: var(--spk-mp-orange);
  }

  /* ── 表格 tab(CSD 机型表) ── */
  .spk-x-mp-tabbar {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    border: 1px solid var(--spk-mp-line-2);
    border-radius: var(--spk-mp-radius);
    background: #f4f9fd;
  }
  .spk-x-mp-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--spk-mp-navy);
    font-size: 13px;
    font-weight: 820;
    text-align: center;
    cursor: pointer;
  }
  .spk-x-mp-tab--active {
    background: var(--spk-mp-navy);
    color: var(--spk-mp-white);
    box-shadow: 0 8px 18px rgba(6, 43, 92, 0.16);
  }
  .spk-x-mp-tab:focus-visible {
    outline: 3px solid rgba(242, 138, 46, 0.58);
    outline-offset: 2px;
  }

  /* ── 询盘表单(深色玻璃卡,两个原型都是 2 列栅格) ── */
  .spk-x-mp-formgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .spk-x-mp-pet .spk-x-mp-formgrid {
    gap: 18px;
  }
  .spk-x-mp-field {
    display: grid;
    gap: 8px;
    color: var(--spk-mp-white);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
  }
  .spk-x-mp-pet .spk-x-mp-field {
    font-weight: 900;
    letter-spacing: 0.08em;
  }
  .spk-x-mp-field--full {
    grid-column: 1 / -1;
  }
  .spk-x-mp-field input,
  .spk-x-mp-field select,
  .spk-x-mp-field textarea {
    width: 100%;
    min-height: 54px;
    padding: 0 17px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--spk-mp-radius);
    background: var(--spk-mp-white);
    color: var(--spk-mp-ink);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    outline: none;
  }
  .spk-x-mp-field textarea {
    min-height: 118px;
    padding-top: 16px;
    resize: vertical;
  }
  .spk-x-mp-field input:focus,
  .spk-x-mp-field select:focus,
  .spk-x-mp-field textarea:focus {
    outline: 3px solid rgba(242, 138, 46, 0.58);
    outline-offset: 2px;
  }
  .spk-x-mp-pet .spk-x-mp-field input,
  .spk-x-mp-pet .spk-x-mp-field select {
    min-height: 50px;
    padding: 0 15px;
    border-color: transparent;
    font-weight: 700;
  }
  .spk-x-mp-pet .spk-x-mp-field input:focus,
  .spk-x-mp-pet .spk-x-mp-field select:focus {
    border-color: var(--spk-mp-orange);
    outline: 3px solid rgba(242, 138, 46, 0.28);
    outline-offset: 0;
  }
  /* 表单里的状态行(询盘 AJAX 回执)。空的时候必须不占位:它是栅格子项,
     空的 <p> 仍会撑出一行 + 一个 gap(实测让表单卡高 16px,原型那个
     `hidden` 的成功提示不占位)。AJAX 回执写进文本后 :empty 自动失效。 */
  .spk-x-mp-status:empty {
    display: none;
  }
  .spk-x-mp-status {
    grid-column: 1 / -1;
    margin: 0;
    color: #bff1f9;
    font-size: 14px;
    font-weight: 760;
  }
  .spk-x-mp-pet .spk-x-mp-status {
    color: var(--spk-mp-white);
    font-weight: 800;
  }

  /* ── 轮播(两个 hero 共用结构;尺寸/底色按页面分别落地) ── */
  .spk-x-mp-carousel {
    position: relative;
  }
  .spk-x-mp-slideframe {
    overflow: hidden;
  }
  /* contain 而不是 cover：机型/瓶型图按完整比例缩放，不再裁掉机器顶或底座
     （与站点既有产品图口径一致：T23/T32 的 contain 约定）。框自带浅底
     （CSD #f5f9fc / PET #fff），contain 的信箱边与底色同色，不会出现白缝。 */
  .spk-x-mp-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
  }
  .spk-x-mp-slide--active {
    opacity: 1;
  }
  /* 灯箱:切片本身是 [data-spk-lightbox] 触发元素(见两个 hero 的 render.php)。
     叠放的切片如果都可点,命中永远是 DOM 里最后一张 —— 所以只有激活切片接事件,
     点击/回车打开的就是眼前这一张,灯箱组仍是全部切片(可左右切换)。
     cursor:zoom-in 给鼠标一个"可放大"的提示。 */
  .spk-x-mp-slide {
    pointer-events: none;
  }
  .spk-x-mp-slide--active {
    pointer-events: auto;
    cursor: zoom-in;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
  }
  .spk-x-mp-slide:focus-visible {
    outline: 3px solid var(--spk-mp-orange);
    outline-offset: -3px;
  }
  .spk-x-mp-pet .spk-x-mp-slide {
    transition: opacity 180ms ease;
  }
  .spk-x-mp-ctrl {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: grid;
    place-items: center;
    border: 1px solid rgba(6, 43, 92, 0.08);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--spk-mp-navy);
    line-height: 1;
    box-shadow: 0 14px 34px rgba(6, 43, 92, 0.18);
    cursor: pointer;
    transform: translateY(-50%);
  }
  .spk-x-mp-ctrl:hover,
  .spk-x-mp-ctrl:focus-visible {
    background: var(--spk-mp-orange);
    color: var(--spk-mp-white);
  }
  .spk-x-mp-ctrl:focus-visible {
    outline: 2px solid var(--spk-mp-orange);
    outline-offset: 2px;
  }
  /* 箭头改成内联 SVG(原型用的是 ‹ › 文本字符,字重/基线随字体漂移)。
     描边走 currentColor,所以 hover/focus 时按钮换色,箭头跟着换色。 */
  .spk-x-mp-ctrl svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .spk-x-mp-pet .spk-x-mp-ctrl svg {
    width: 22px;
    height: 22px;
  }
  .spk-x-mp-csd .spk-x-mp-ctrl {
    width: 52px;
    height: 52px;
    border: 0;
    font-size: 34px;
  }
  .spk-x-mp-csd .spk-x-mp-ctrl--prev {
    left: -28px;
  }
  .spk-x-mp-csd .spk-x-mp-ctrl--next {
    right: -28px;
  }
  .spk-x-mp-pet .spk-x-mp-ctrl {
    width: 46px;
    height: 46px;
    font-size: 30px;
    transition: transform 160ms ease, background 160ms ease, color 160ms ease;
  }
  .spk-x-mp-pet .spk-x-mp-ctrl:hover,
  .spk-x-mp-pet .spk-x-mp-ctrl:focus-visible {
    transform: translateY(-50%) scale(1.04);
  }
  .spk-x-mp-pet .spk-x-mp-ctrl--prev {
    left: -23px;
  }
  .spk-x-mp-pet .spk-x-mp-ctrl--next {
    right: -23px;
  }
  .spk-x-mp-dots {
    position: absolute;
    left: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    border-radius: 999px;
    transform: translateX(-50%);
  }
  .spk-x-mp-csd .spk-x-mp-dots {
    bottom: 18px;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(5, 34, 70, 0.58);
  }
  .spk-x-mp-pet .spk-x-mp-dots {
    bottom: 17px;
    gap: 8px;
    padding: 8px 11px;
    background: rgba(5, 34, 70, 0.72);
  }
  .spk-x-mp-dot {
    border: 0;
    border-radius: 999px;
    padding: 0;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
  }
  .spk-x-mp-csd .spk-x-mp-dot {
    width: 10px;
    height: 10px;
  }
  .spk-x-mp-csd .spk-x-mp-dot--active {
    width: 34px;
    background: var(--spk-mp-orange);
  }
  .spk-x-mp-pet .spk-x-mp-dot {
    width: 22px;
    height: 8px;
    background: rgba(255, 255, 255, 0.46);
    opacity: 0.48;
    transition: background 180ms ease, opacity 180ms ease, transform 180ms ease;
  }
  .spk-x-mp-pet .spk-x-mp-dot--active {
    background: var(--spk-mp-orange);
    opacity: 1;
    transform: scaleX(1.35);
  }
  .spk-x-mp-dot:focus-visible {
    outline: 2px solid var(--spk-mp-orange);
    outline-offset: 2px;
  }
}

/* ── 家族响应式(版心 / 分区留白 / 标题字号随原型断点) ── */
@layer spk-responsive {
  @media (max-width: 1180px) {
    .spk-x-mp-csd {
      --spk-mp-shell: min(100% - 56px, 920px);
    }
  }

  @media (max-width: 820px) {
    .spk-x-mp-pet {
      --spk-mp-shell: min(100% - 32px, 1250px);
    }
    .spk-x-mp-pet.spk-x-mp-section {
      padding: 70px 0;
    }
    .spk-x-mp-pet .spk-x-mp-ctrl--prev {
      left: -14px;
    }
    .spk-x-mp-pet .spk-x-mp-ctrl--next {
      right: -14px;
    }
    .spk-x-mp-pet .spk-x-mp-formgrid,
    .spk-x-mp-pet .spk-x-mp-head--inline {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 760px) {
    .spk-x-mp-csd {
      --spk-mp-shell: min(100% - 28px, 640px);
    }
    /* 原型在窄屏仍把箭头摆在画面外 ±28px,靠 .site{overflow:hidden} 裁掉一半;
       本站主体不裁切,照抄就会把文档撑宽(620 视口实测 +14px 横向溢出,违反两份
       交付说明里都写明的 "no horizontal overflow")。窄屏改为收进画面内 4px。 */
    .spk-x-mp-csd .spk-x-mp-ctrl--prev {
      left: 4px;
    }
    .spk-x-mp-csd .spk-x-mp-ctrl--next {
      right: 4px;
    }
    .spk-x-mp-csd.spk-x-mp-section {
      padding: 64px 0;
    }
    .spk-x-mp-csd .spk-x-mp-h2 {
      font-size: 38px;
      line-height: 1.05;
    }
    .spk-x-mp-csd .spk-x-mp-h3 {
      font-size: 24px;
    }
    .spk-x-mp-csd .spk-x-mp-tab {
      min-width: 118px;
    }
    .spk-x-mp-csd .spk-x-mp-formgrid {
      grid-template-columns: 1fr;
    }
    .spk-x-mp-csd .spk-x-mp-head--inline {
      display: grid;
      align-items: start;
    }
    .spk-x-mp-csd .spk-x-mp-table th,
    .spk-x-mp-csd .spk-x-mp-table td {
      padding: 15px 16px;
    }
  }

  @media (max-width: 540px) {
    .spk-x-mp-pet .spk-x-mp-h2 {
      font-size: 28px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .spk-x-mp-slide,
    .spk-x-mp-dot,
    .spk-x-mp-ctrl,
    .spk-x-mp-btn {
      transition: none;
    }
  }
}

/* ===== 页面级覆盖:L3 hero 图框比例 =====
   全站 .spk-x-wf-hero-img 是 1.85(水/灌装机族的素材比例)。激光与喷码两页的
   hero 素材比例不同,按「框高 = 框宽 ÷ 图片比例」出框即可不裁图 —— 用 postid
   限定,只有这两页变,其余 48 页仍是 1.85。
   素材:laser h1 2100×1421(1.478) · inkjet h1 2100×1400(1.5)。 */
@layer spk-base {
  body.postid-3964 .spk-x-wf-hero-img { aspect-ratio: 2100 / 1421; }
  body.postid-3962 .spk-x-wf-hero-img { aspect-ratio: 2100 / 1400; }
}

/* ===== 页面级覆盖:beverage-filling-machines 分支 17 页图框比例 =====
   客户施工指令 G12:横排行(分类页卡格 / s02 卡片行 / s10 细节行)整行用同一比例,
   取「使整行白边总量最小」的那个值;竖排单图(hero)按该页素材实际比例出框。
   G12 同时要求「框/图底色刷 #fff」——上面各图框已改成 #fff,残留信箱边与白卡无缝。
   素材比例实测见交付包 img/(17 页共 50 张唯一图)。
   放进 spk-responsive 层:窄屏那条 `.spk-x-wf-hero-img{aspect-ratio:1.85}` 也在本层,
   靠 body.postid-* 的高优先级压过它,否则移动端会退回 1.85 又出白边。 */
@layer spk-responsive {
  /* water:hero 6 帧(bottle 1.579×3 / machine-standard 4.8 / rotary 1.472 / highspeed 4.8) */
  body.postid-160 .spk-x-wf-hero-img { aspect-ratio: 1.579; }
  body.postid-160 .spk-x-wf-bottle-card .spk-x-wf-card-img { aspect-ratio: 1.579; }
  body.postid-160 .spk-x-wf-block-img { aspect-ratio: 1.472; }
  body.postid-160 .spk-x-wf-hygiene-card .spk-x-wf-h-img { aspect-ratio: 1.567; }

  /* 5-gallon:hero/card/poster 全为 1.28~1.33 的近方形产线图 */
  body.postid-3896 .spk-x-wf-hero-img { aspect-ratio: 1.282; }
  body.postid-3896 .spk-x-wf-bottle-card .spk-x-wf-card-img { aspect-ratio: 1.282; }
  body.postid-3896 .spk-x-wf-video-frame { aspect-ratio: 1.333; }

  /* pet / glass soft drink:s10 细节行三张偏宽幅,hero 三帧亦偏宽 */
  body.postid-4010 .spk-x-wf-hero-img,
  body.postid-4066 .spk-x-wf-hero-img { aspect-ratio: 1.794; }
  body.postid-4010 .spk-x-wf-hygiene-card .spk-x-wf-h-img,
  body.postid-4066 .spk-x-wf-hygiene-card .spk-x-wf-h-img { aspect-ratio: 2.157; }

  /* 单图 hero 的 L3 页:按各自素材比例零容差 */
  body.postid-4753 .spk-x-wf-hero-img { aspect-ratio: 1.333; }
  body.postid-4754 .spk-x-wf-hero-img { aspect-ratio: 1.333; }
  body.postid-4755 .spk-x-wf-hero-img { aspect-ratio: 1.35; }
  body.postid-4756 .spk-x-wf-hero-img { aspect-ratio: 1; }
  body.postid-4757 .spk-x-wf-hero-img { aspect-ratio: 1.715; }
  body.postid-4758 .spk-x-wf-hero-img { aspect-ratio: 1.333; }
  body.postid-4759 .spk-x-wf-hero-img { aspect-ratio: 1.444; }
  body.postid-4760 .spk-x-wf-hero-img { aspect-ratio: 1.333; }

  /* L1/L2 卡格:s02 行内图比例跨度大,按行最小值取齐 */
  body.postid-3904 .spk-x-machine-grid__media { aspect-ratio: 1.777; }
  body.postid-3943 .spk-x-machine-grid__media { aspect-ratio: 1.35; }
}