/**
 * Modern Machinery — 权威站点样式(重建版)
 *
 * 由 11 个源站页面的 inline <style> + machine-pages.css 去重合并而来:
 * 单一 :root、每组选择器只出现一次、全部 class 带 mm-x- 前缀与主题/其它插件隔离。
 * 颜色/阴影 token 引用 inc/theme-json.php 注入的 theme.json 预设(带字面量兜底)。
 *
 * 分段:[base] 全局原语+站点框架 → 各源页面专属区块 → [plugin] 插件附加。
 * 首页(SEO/GEO v5)是橙色强调的新一代设计,其差异经 body.home 作用域覆盖;
 * 其余页面统一红色强调。同名组件的 case/video 变体经块作用域隔离
 * (.mm-x-timeline-layout、.mm-x-video-player-card)。
 *
 * 全局元素规则(*, body, a, img, button/input)保持全局:本插件即整站设计权威。
 * 区块 render.php 输出的顶层 <section> 必须带 mm-x-section class。
 *
 * ── CSS 分层(cascade layers)──────────────────────────────────────────
 * 全部规则必须写进 @layer,层序在下一行声明(优先级从低到高):
 *   mm-reset      : root token、元素重置(*, html, body, a, img, form 元素)
 *   mm-base       : 全局框架 class(本文件主体)
 *   mm-block      : 各 blocks/{name}/style.css 的基础规则
 *   mm-responsive : 所有 @media 覆盖(全局的和块内的都进这层,必赢)
 * 完整书写规范见插件根目录 CLAUDE.md。
 */

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

@layer mm-reset {
  :root {
    /* 源站 design token —— 经 inc/theme-json.php 注入的 theme.json 预设,带字面量兜底 */
    --mmx-ink: var(--wp--preset--color--ink, #151515);
    --mmx-muted: var(--wp--preset--color--muted, #62666d);
    --mmx-line: var(--wp--preset--color--line, #dfe3e8);
    --mmx-soft: var(--wp--preset--color--soft, #f5f7fa);
    --mmx-dark: var(--wp--preset--color--dark, #101113);
    --mmx-panel: var(--wp--preset--color--panel, #202226);
    --mmx-steel: var(--wp--preset--color--steel, #334155);
    --mmx-red: var(--wp--preset--color--red, #d71920);
    --mmx-red-dark: var(--wp--preset--color--red-dark, #a91117);
    --mmx-orange: var(--wp--preset--color--orange, #f47b20);
    --mmx-orange-dark: var(--wp--preset--color--orange-dark, #cf5d0e);
    --mmx-white: var(--wp--preset--color--white, #fff);
    --mmx-radius: 8px;
    --mmx-shadow: var(--wp--preset--shadow--card, 0 18px 45px rgba(15, 23, 42, .16));
  }
  * {
    box-sizing: border-box;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    margin: 0;
    color: var(--mmx-ink);
    font-family: Arial, Helvetica, sans-serif;
    background: var(--mmx-white);
    line-height: 1.5;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  button, input, select, textarea {
    font: inherit;
  }
  /* ── Sticky positioning fix — reset overflow on common WP wrappers ── */
  .wp-site-blocks,
  .wp-block-template-part,
  .wp-block-group:has(> .mm-x-site-header),
  .wp-block-group:has(> .mm-x-case-nav),
  .modern-machinery-header-part {
    overflow: visible !important;
  }
}

@layer mm-base {
  /* ═══════════ [base] 基座 machine-pages.css(全局原语+站点框架) ═══════════ */
  .mm-x-band {
    background: var(--mmx-soft);
  }

  .mm-x-wrap {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
  }
  /* Nested wraps — reset to full-width when inside another mm-x-wrap */
  .mm-x-wrap .mm-x-wrap {
    width: 100%;
    margin: 0;
  }
  .mm-x-eyebrow {
    color: var(--mmx-red);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .mm-x-section-title {
    margin: 10px 0 14px;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.08;
    letter-spacing: 0;
  }
  .mm-x-section-lead {
    max-width: 790px;
    color: var(--mmx-muted);
    font-size: 18px;
  }
  /* Compact grid area inside a section: let section handle padding */
  .mm-x-section .mm-x-case-grid-area {
    padding-top: 0;
    padding-bottom: 0;
  }

  .mm-x-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--mmx-red);
    color: var(--mmx-white);
    font-weight: 900;
    cursor: pointer;
    transition: .2s ease;
    white-space: nowrap;
  }
  .mm-x-btn:hover {
    background: var(--mmx-red-dark);
    transform: translateY(-1px);
  }
  .mm-x-btn.mm-x-secondary {
    background: var(--mmx-white);
    color: var(--mmx-red);
  }
  .mm-x-btn.mm-x-ghost {
    background: transparent;
    color: var(--mmx-ink);
    border-color: var(--mmx-line);
  }
  .mm-x-breadcrumb {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: #d6dce5;
    font-size: 13px;
    margin-bottom: 22px;
  }
  .mm-x-breadcrumb b {
    color: var(--mmx-white);
  }
  .mm-x-section {
    padding: 86px 0;
  }
  /* Nested sections: outer section already provides padding */
  .mm-x-section .mm-x-section {
    padding: 0;
  }
  .mm-x-grid-3, .mm-x-machine-grid, .mm-x-format-grid, .mm-x-video-grid, .mm-x-case-grid, .mm-x-compare {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    margin-top: 32px;
  }
  .mm-x-play {
    position: absolute;
    left: 18px;
    bottom: 18px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--mmx-red);
    color: var(--mmx-white);
    display: grid;
    place-items: center;
    font-weight: 900;
    box-shadow: 0 12px 26px rgba(0,0,0,.32);
  }
  .mm-x-case-meta {
    display: grid;
    gap: 6px;
    margin: 14px 0;
    color: var(--mmx-muted);
    font-size: 14px;
  }
  .mm-x-case-meta span {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #edf0f4;
    padding-bottom: 6px;
  }
  .mm-x-case-meta b {
    color: var(--mmx-ink);
  }
  .mm-x-compare-card {
    padding: 22px;
  }
  .mm-x-compare-card ul {
    margin: 0;
    padding-left: 18px;
  }
  .mm-x-quote .mm-x-section-lead {
    color: #ffe8e2;
  }
}

@layer mm-responsive {
  @media (max-width: 1080px) {
    .mm-x-main-nav {
      gap: 14px;
      font-size: 13px;
    }
    .mm-x-lang {
      display: none;
    }
  }
}

@layer mm-responsive {
  @media (max-width: 920px) {
    /* nav 抽屉断点统一走 980px 的 megamenu 移动端块;此处不再重复 display:none */
    .mm-x-split, .mm-x-quote-grid, .mm-x-gallery {
      grid-template-columns: 1fr;
    }
    .mm-x-quick-specs, .mm-x-process-grid, .mm-x-machine-grid, .mm-x-format-grid, .mm-x-video-grid, .mm-x-case-grid, .mm-x-compare {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@layer mm-responsive {
  @media (max-width: 640px) {
    body {
      padding-bottom: 74px;
    }
    .mm-x-top-strip .mm-x-wrap {
      display: block;
    }
    .mm-x-top-strip .mm-x-wrap span {
      display: block;
    }
    .mm-x-nav-row {
      min-height: 66px;
    }
    .mm-x-brand span {
      display: none;
    }
    .mm-x-brand {
      min-width: auto;
    }
    .mm-x-nav-tools .mm-x-btn {
      min-height: 40px;
      padding: 0 13px;
    }

    .mm-x-breadcrumb {
      margin-bottom: 14px;
    }

    .mm-x-section {
      padding: 58px 0;
    }
    .mm-x-process-grid, .mm-x-format-grid, .mm-x-machine-grid, .mm-x-video-grid, .mm-x-case-grid, .mm-x-feature-list, .mm-x-compare, .mm-x-gallery-side {
      grid-template-columns: 1fr;
    }
    .mm-x-quote-form {
      grid-template-columns: 1fr;
    }
  }
}

@layer mm-base {
  /* ═══════════ [home] 首页 homepage-seo-geo-v5 ═══════════ */
  /* scoped from .eyebrow */
  .home .mm-x-eyebrow {
    color: var(--mmx-orange);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  /* ── 语言切换器(自定义下拉,替代原生 select;交互见 view.js §7) ── */
  /* scoped from .btn */
  .home .mm-x-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--mmx-orange);
    color: var(--mmx-white);
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
  }
  /* scoped from .btn:hover */
  .home .mm-x-btn:hover {
    background: var(--mmx-orange-dark);
    transform: translateY(-1px);
  }
  /* scoped from .btn.secondary */
  .home .mm-x-btn.mm-x-secondary {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.28);
  }
  /* scoped from .hero */
  /* scoped from .hero::before — 首页遮罩比内页浅(源站 v5 值),否则视频横幅偏暗 */
  /* scoped from .hero .wrap */
  /* scoped from .hero-grid */
  .mm-x-workflow .mm-x-section-lead {
    color: #d6e4f5;
  }
  .mm-x-equipment {
    background: var(--mmx-soft);
  }
  .mm-x-config-output {
    background: #fff;
    color: var(--mmx-ink);
    border-radius: var(--mmx-radius);
    overflow: hidden;
    box-shadow: var(--mmx-shadow);
  }
  .mm-x-config-output img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  .mm-x-config-output div {
    padding: 24px;
  }
  .mm-x-config-output p {
    color: var(--mmx-muted);
  }
  /* 勾选框不吃 .mm-x-quote-form input 的 width:100%/min-height:44px 全局规则 */
  .mm-x-media-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-top: 34px;
  }
  .mm-x-faq .mm-x-section-lead {
    color: #cfd4dc;
  }
  /* scoped from details */
  /* scoped from summary */
  /* scoped from details p */
  /* REPLACES earlier .footer */
  /* REPLACES earlier .footer-grid */
  /* REPLACES earlier .footer h3 */
  /* REPLACES earlier .footer p, .footer li */
  /* REPLACES earlier .footer ul */
  .mm-x-lead-modal, .mm-x-privacy-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    place-items: center;
    padding: 20px;
    background: rgba(0,0,0,.58);
  }
  .mm-x-lead-modal.mm-x-open, .mm-x-privacy-modal.mm-x-open {
    display: grid;
  }
  .mm-x-modal-card {
    width: min(560px, 100%);
    background: #fff;
    border-radius: var(--mmx-radius);
    box-shadow: var(--mmx-shadow);
    overflow: hidden;
  }
  .mm-x-modal-card.mm-x-large {
    width: min(720px, 100%);
  }
  .mm-x-modal-card header {
    padding: 22px 24px;
    background: var(--mmx-dark);
    color: #fff;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 18px;
  }
  .mm-x-modal-card main {
    padding: 24px;
  }
  .mm-x-modal-close {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
  .mm-x-progress {
    height: 10px;
    background: #edf0f4;
    border-radius: 999px;
    overflow: hidden;
    margin: 16px 0 18px;
  }
  .mm-x-bar {
    width: 95%;
    height: 100%;
    background: var(--mmx-orange);
  }
  .mm-x-form-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-top: 14px;
  }
  /* scoped from .quote-form textarea */
  /* scoped from .quote-form */
  .mm-x-cookie {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 70;
    width: min(480px, calc(100% - 36px));
    padding: 18px;
    background: #fff;
    border: 1px solid var(--mmx-line);
    border-radius: var(--mmx-radius);
    box-shadow: var(--mmx-shadow);
    display: none;
  }
  .mm-x-cookie.mm-x-show {
    display: block;
  }
  .mm-x-cookie p {
    margin: 6px 0 14px;
    color: var(--mmx-muted);
    font-size: 14px;
  }
  .mm-x-cookie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .mm-x-quick-actions {
    position: fixed;
    right: 18px;
    top: 52%;
    z-index: 69;
    display: grid;
    gap: 8px;
    justify-items: end;
  }
  .mm-x-quick-actions a, .mm-x-quick-actions button, .mm-x-back-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: #111318;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(0,0,0,.22);
    transition: .2s ease;
  }
  .mm-x-quick-actions a:hover, .mm-x-quick-actions button:hover, .mm-x-back-top:hover {
    transform: translateY(-2px);
    background: var(--mmx-orange);
  }
  .mm-x-quick-actions .mm-x-wa {
    background: #19a85b;
  }
  .mm-x-quick-actions .mm-x-yt {
    background: #c9151b;
  }
  .mm-x-quick-actions svg, .mm-x-back-top svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 2;
  }
  .mm-x-quick-actions span {
    position: absolute;
    right: 56px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    min-width: max-content;
    padding: 8px 10px;
    border-radius: 4px;
    background: #111318;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
  }
  .mm-x-quick-actions a:hover span, .mm-x-quick-actions button:hover span {
    display: block;
  }
  .mm-x-back-top {
    right: 18px;
    bottom: 18px;
    z-index: 69;
    position: fixed;
    opacity: 0;
    pointer-events: none;
  }
  .mm-x-back-top.mm-x-show {
    opacity: 1;
    pointer-events: auto;
  }
}

@layer mm-responsive {
  @media (max-width: 980px) {
    .mm-x-main-nav {
      display: none;
    }
    .mm-x-solution-shell, .mm-x-solution-view, .mm-x-config-grid, .mm-x-workflow-grid, .mm-x-config-preview {
      grid-template-columns: 1fr !important;
    }
    .mm-x-solution-view {
      padding: 18px;
    }
    .mm-x-solution-copy {
      padding: 12px 4px 4px;
    }
    .mm-x-solution-media {
      height: clamp(240px, 52vw, 340px);
    }
    .mm-x-trust-grid, .mm-x-media-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .mm-x-equipment-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .mm-x-process-strip {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@layer mm-responsive {
  @media (max-width: 640px) {
    .mm-x-wrap {
      width: min(100% - 28px, 1180px);
    }
    .mm-x-top-strip .mm-x-wrap, .mm-x-nav-tools {
      display: none;
    }
    .mm-x-trust-grid, .mm-x-equipment-grid, .mm-x-media-grid, .mm-x-quote-form, .mm-x-workflow-cards {
      grid-template-columns: 1fr;
    }
    .mm-x-form-row {
      grid-template-columns: 1fr;
    }
    .mm-x-quick-actions {
      right: 12px;
    }
    .mm-x-quick-actions span {
      display: none !important;
    }
    .mm-x-back-top {
      right: 12px;
      bottom: 12px;
    }
  }
}

@layer mm-base {
  /* ═══════════ [solution] 碳酸饮料方案页 ═══════════ */
  .mm-x-solution-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 26px 0 0;
    max-width: 820px;
  }
  .mm-x-solution-tabs a {
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.1);
    color: #eef2f6;
    padding: 9px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
  }
  .mm-x-format-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    margin-top: 32px;
  }
  .mm-x-format-card {
    border: 1px solid var(--mmx-line);
    border-radius: var(--mmx-radius);
    background: var(--mmx-white);
    box-shadow: 0 12px 30px rgba(18,24,33,.08);
    overflow: hidden;
    transition: .2s ease;
  }
  .mm-x-format-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--mmx-shadow);
  }
  .mm-x-format-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #f4f6f9;
  }
  .mm-x-format-card h3 {
    margin: 0 0 8px;
    font-size: 22px;
  }
  .mm-x-format-card p {
    margin: 0 0 14px;
    color: var(--mmx-muted);
  }
  .mm-x-format-overview {
    margin-top: 30px;
    border: 1px solid var(--mmx-line);
    border-radius: var(--mmx-radius);
    background: var(--mmx-white);
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(18,24,33,.08);
  }
  .mm-x-format-overview img {
    width: 100%;
    object-fit: contain;
    background: var(--mmx-white);
  }
  .mm-x-machine-grid, .mm-x-video-grid, .mm-x-case-grid, .mm-x-compare {
    grid-template-columns: repeat(6, 1fr);
  }
  .mm-x-proof-note {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: 28px;
    border-radius: var(--mmx-radius);
    overflow: hidden;
    background: var(--mmx-line);
  }
  .mm-x-proof-note div {
    background: var(--mmx-white);
    padding: 16px;
  }
  .mm-x-proof-note b {
    display: block;
  }
  .mm-x-proof-note span {
    display: block;
    color: var(--mmx-muted);
    font-size: 13px;
    margin-top: 4px;
  }
}

@layer mm-responsive {
  @media (max-width: 920px) {
    .mm-x-definition-grid, .mm-x-split, .mm-x-quote-grid {
      grid-template-columns: 1fr;
    }
    .mm-x-quick-specs, .mm-x-process-grid, .mm-x-format-grid, .mm-x-machine-grid, .mm-x-video-grid, .mm-x-case-grid, .mm-x-compare, .mm-x-proof-note, .mm-x-layout-key {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@layer mm-responsive {
  @media (max-width: 640px) {
    .mm-x-solution-tabs {
      gap: 6px;
    }
    /* union with earlier rule */
    .mm-x-solution-tabs {
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: none;
    }
    .mm-x-solution-tabs::-webkit-scrollbar {
      display: none;
    }
    .mm-x-solution-tabs a {
      font-size: 12px;
      padding: 8px 10px;
    }
    .mm-x-process-grid, .mm-x-format-grid, .mm-x-machine-grid, .mm-x-video-grid, .mm-x-case-grid, .mm-x-feature-list, .mm-x-compare, .mm-x-proof-note, .mm-x-layout-key {
      grid-template-columns: 1fr;
    }
    .mm-x-line-layout-scroll img {
      min-width: 920px;
    }
  }
}

@layer mm-base {
  /* ═══════════ [tech] 技术服务页 ═══════════ */
  .mm-x-service-hero-card {
    display: grid;
    gap: 14px;
  }
  .mm-x-service-hero-card .mm-x-mini {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: start;
    border-top: 1px solid rgba(255,255,255,.16);
    padding-top: 14px;
  }
  .mm-x-service-hero-card .mm-x-mini:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .mm-x-service-hero-card .mm-x-badge {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--mmx-red);
    color: #fff;
    font-weight: 900;
  }
  .mm-x-stage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 32px;
  }
  .mm-x-stage-card {
    border: 1px solid var(--mmx-line);
    border-radius: var(--mmx-radius);
    background: var(--mmx-white);
    padding: 20px;
    box-shadow: 0 12px 30px rgba(18,24,33,.08);
  }
  .mm-x-stage-card h3 {
    margin: 12px 0 8px;
    font-size: 20px;
  }
  .mm-x-stage-card p {
    margin: 0;
    color: var(--mmx-muted);
    font-size: 14px;
  }
  .mm-x-deliverable-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    margin-top: 32px;
  }
  .mm-x-deliverable {
    border: 1px solid var(--mmx-line);
    border-radius: var(--mmx-radius);
    background: var(--mmx-white);
    padding: 22px;
    box-shadow: 0 12px 30px rgba(18,24,33,.08);
    min-height: 210px;
  }
  .mm-x-deliverable h3 {
    margin: 0 0 10px;
    font-size: 22px;
  }
  .mm-x-deliverable p {
    margin: 0 0 14px;
    color: var(--mmx-muted);
  }
  .mm-x-deliverable ul {
    margin: 0;
    padding-left: 18px;
    color: var(--mmx-muted);
    font-size: 14px;
  }
  .mm-x-service-band {
    color: #fff;
    background:
          linear-gradient(135deg, rgba(16,17,19,.94), rgba(122,12,18,.88)),
          url("../assets/banner-bottle-filling-machine.jpg") center / cover;
  }
  .mm-x-service-band .mm-x-section-lead, .mm-x-service-band .mm-x-process-step p {
    color: #d8dde5;
  }
  .mm-x-evidence-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 32px;
  }
  .mm-x-evidence-card {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 18px;
    align-items: center;
    border: 1px solid var(--mmx-line);
    border-radius: var(--mmx-radius);
    background: var(--mmx-white);
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(18,24,33,.08);
  }
  .mm-x-evidence-card img {
    width: 100%;
    height: 100%;
    min-height: 170px;
    object-fit: cover;
  }
  .mm-x-evidence-card div {
    padding: 18px 18px 18px 0;
  }
  .mm-x-evidence-card h3 {
    margin: 0 0 8px;
    font-size: 20px;
  }
  .mm-x-evidence-card p {
    margin: 0;
    color: var(--mmx-muted);
    font-size: 14px;
  }
  .mm-x-checklist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 24px;
  }
  .mm-x-check-item {
    border: 1px solid var(--mmx-line);
    border-radius: var(--mmx-radius);
    background: #fff;
    padding: 14px 16px;
    color: var(--mmx-muted);
    font-weight: 700;
  }
  .mm-x-check-item b {
    color: var(--mmx-red);
    margin-right: 8px;
  }
}

@layer mm-responsive {
  @media (max-width: 920px) {
    .mm-x-stage-grid, .mm-x-deliverable-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .mm-x-evidence-grid {
      grid-template-columns: 1fr;
    }
  }
}

@layer mm-responsive {
  @media (max-width: 640px) {
    .mm-x-stage-grid, .mm-x-deliverable-grid, .mm-x-checklist {
      grid-template-columns: 1fr;
    }
    .mm-x-evidence-card {
      grid-template-columns: 1fr;
    }
    .mm-x-evidence-card div {
      padding: 18px;
    }
  }
}

@layer mm-responsive {
  /* ═══════════ [res] 资源中心 ═══════════ */
  @media (max-width: 760px) {
    .mm-x-resource-entry {
      grid-template-columns: 56px 1fr;
      gap: 16px;
      padding: 20px;
    }
    .mm-x-resource-entry .mm-x-mark {
      width: 52px;
      height: 52px;
      font-size: 20px;
    }
    .mm-x-resource-entry h2 {
      font-size: 24px;
    }
    .mm-x-resource-entry .mm-x-arrow {
      grid-column: 2;
    }
  }
}

@layer mm-base {
  /* ═══════════ [rescase] 案例列表 ═══════════ */
  .mm-x-case-listing {
    background: #f5f7fa;
  }
}

@layer mm-responsive {
  @media (max-width: 980px) {
    .mm-x-case-grid-rich {
      grid-template-columns: repeat(2, 1fr);
    }
    .mm-x-case-toolbar {
      grid-template-columns: 1fr;
    }
  }
}

@layer mm-responsive {
  @media (max-width: 640px) {
    .mm-x-case-hero {
      min-height: 220px;
    }
    .mm-x-case-hero .mm-x-wrap {
      padding: 26px 0 24px;
    }
    .mm-x-case-grid-rich {
      grid-template-columns: 1fr;
    }
    .mm-x-case-search {
      width: 100%;
    }
  }
}

@layer mm-base {
  /* ═══════════ [resvideo] 视频库 ═══════════ */
  .mm-x-video-index {
    background: #f5f7fa;
  }
  .mm-x-video-page-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .42fr);
    gap: 34px;
    align-items: end;
  }
  .mm-x-video-page-intro .mm-x-section-title {
    margin-bottom: 12px;
  }
  .mm-x-video-map {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .mm-x-video-map a {
    display: grid;
    gap: 5px;
    min-height: 86px;
    padding: 14px;
    border: 1px solid var(--mmx-line);
    border-radius: var(--mmx-radius);
    background: #fff;
    color: #111318;
    box-shadow: 0 10px 22px rgba(18,24,33,.05);
  }
  .mm-x-video-map b {
    font-size: 15px;
    line-height: 1.15;
  }
  .mm-x-video-map span {
    color: var(--mmx-muted);
    font-size: 13px;
    font-weight: 800;
  }
  .mm-x-video-map a:hover {
    border-color: rgba(215,25,32,.45);
    color: var(--mmx-red);
    transform: translateY(-2px);
  }
  /* REPLACES earlier .video-thumb */
  .mm-x-video-inquiry-panel {
    background:
          linear-gradient(135deg, rgba(17,19,24,.96), rgba(105,16,24,.9)),
          url("../assets/banner-bottle-filling-machine.jpg") center / cover;
    color: #fff;
  }
  .mm-x-video-inquiry-panel .mm-x-section-lead {
    color: #ffe7e7;
  }
}

@layer mm-responsive {
  @media (max-width: 1120px) {
    .mm-x-video-card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

@layer mm-responsive {
  @media (max-width: 860px) {
    .mm-x-video-page-intro, .mm-x-faq-quote-grid {
      grid-template-columns: 1fr;
    }
    .mm-x-video-group-head {
      grid-template-columns: 1fr;
    }
    .mm-x-video-count {
      width: max-content;
    }
  }
}

@layer mm-responsive {
  @media (max-width: 640px) {
    .mm-x-video-hero {
      min-height: 240px;
    }
    .mm-x-video-hero .mm-x-wrap {
      padding: 26px 0 24px;
    }
    .mm-x-video-map, .mm-x-video-card-grid, .mm-x-video-data {
      grid-template-columns: 1fr;
    }
    .mm-x-video-group-head, .mm-x-video-card-grid {
      padding-left: 18px;
      padding-right: 18px;
    }
    .mm-x-video-card h3 {
      font-size: 21px;
    }
  }
}

@layer mm-base {
  /* ═══════════ [whyus] 公司简介 ═══════════ */
  .mm-x-trust-band {
    color: #fff;
    background:
          linear-gradient(135deg, rgba(16,17,19,.94), rgba(122,12,18,.88)),
          url("../assets/why-us-banner.jpg") center / cover;
  }
  .mm-x-trust-band .mm-x-section-lead, .mm-x-trust-band .mm-x-process-step p {
    color: #d8dde5;
  }
  .mm-x-trust-band .mm-x-eyebrow { color: #fff; }
  .mm-x-trust-band .mm-x-process-step {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.16);
    color: #fff;
  }
  /* ═══════════ [casedet] 案例详情 ═══════════ */
  .mm-x-case-nav .mm-x-wrap {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 0;
    scrollbar-width: none;
  }
  .mm-x-case-nav .mm-x-wrap::-webkit-scrollbar {
    display: none;
  }
  .mm-x-big-play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 68px;
    height: 68px;
    border: 0;
    border-radius: 50%;
    background: var(--mmx-red);
    transform: translate(-50%, -50%);
    box-shadow: 0 18px 38px rgba(0,0,0,.34);
    cursor: pointer;
  }
  .mm-x-big-play::before {
    content: "";
    position: absolute;
    left: 29px;
    top: 22px;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 18px solid #fff;
  }
  .mm-x-case-faq {
    border: 1px solid var(--mmx-line);
    border-radius: var(--mmx-radius);
    background: #fff;
    padding: 16px 18px;
  }
  .mm-x-case-faq h3 {
    margin: 0 0 8px;
    font-size: 18px;
  }
  .mm-x-case-faq p {
    font-size: 14px;
  }
}

@layer mm-responsive {
  @media (max-width: 1080px) {
    .mm-x-case-nav {
      top: 105px;
    }
    .mm-x-line-config {
      grid-template-columns: repeat(6, 1fr);
    }
    .mm-x-line-step::after {
      display: none;
    }
    .mm-x-service-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@layer mm-responsive {
  @media (max-width: 980px) {
    .mm-x-intro-layout, .mm-x-story-layout, .mm-x-layout-showcase, .mm-x-proof-grid, .mm-x-video-showcase, .mm-x-quote-card, .mm-x-recommend-panel {
      grid-template-columns: 1fr;
    }
    .mm-x-story-stack, .mm-x-summary-strip, .mm-x-timeline, .mm-x-related-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .mm-x-quote-card dl {
      border-left: 0;
      border-top: 1px solid rgba(255,255,255,.2);
      padding: 20px 0 0;
    }
    .mm-x-case-nav {
      top: 98px;
    }
  }
}

@layer mm-responsive {
  @media (max-width: 640px) {
    .mm-x-case-detail-hero {
      min-height: 220px;
    }
    .mm-x-case-detail-hero .mm-x-wrap {
      padding: 26px 0 24px;
    }
    .mm-x-case-nav {
      top: 66px;
    }

    .mm-x-proof-overlay, .mm-x-story-stack, .mm-x-summary-strip, .mm-x-line-config, .mm-x-service-grid, .mm-x-timeline, .mm-x-related-grid, .mm-x-faq-grid, .mm-x-gallery-row {
      grid-template-columns: 1fr;
    }
    .mm-x-project-card, .mm-x-config-card, .mm-x-timeline-card, .mm-x-service-system, .mm-x-faq-card, .mm-x-recommend-panel {
      padding: 18px;
    }
    .mm-x-fact-table th, .mm-x-fact-table td {
      display: block;
      width: 100%;
    }
    .mm-x-fact-table th {
      border-bottom: 0;
      padding-bottom: 4px;
    }
    .mm-x-fact-table td {
      padding-top: 0;
    }
    .mm-x-summary-strip div {
      min-height: 98px;
    }
    .mm-x-gallery-row img {
      min-height: 160px;
    }
  }
}

@layer mm-base {
  /* ═══════════ [videodet] 视频详情 ═══════════ */
  /* 视频详情页的 section.video-main 自身即浅底带(区别于案例详情的深色 .mm-x-video-main 卡壳,
     后者总在 .mm-x-video-showcase 内,先声明的深色版本被此处覆盖时用作用域区分) */
  .mm-x-section.mm-x-video-main {
    background: #f5f7fa;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
}

@layer mm-responsive {
  /* scoped from .play-button */
  /* scoped from .play-button::before */
  /* scoped from .timeline-item */
  /* scoped from .timeline-item h3 */
  /* REPLACES earlier .related-card */
  /* REPLACES earlier .related-card img */
  @media (max-width: 980px) {
    .mm-x-video-detail-layout, .mm-x-timeline-layout, .mm-x-summary-layout, .mm-x-faq-quote-grid {
      grid-template-columns: 1fr;
    }
    .mm-x-detail-grid, .mm-x-related-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@layer mm-responsive {
  @media (max-width: 640px) {
    .mm-x-video-detail-hero {
      min-height: 250px;
    }
    .mm-x-video-detail-hero .mm-x-wrap {
      padding: 28px 0 26px;
    }
    .mm-x-detail-grid, .mm-x-related-grid {
      grid-template-columns: 1fr;
    }
    .mm-x-fact-list div, .mm-x-timeline-item, .mm-x-transcript-row {
      grid-template-columns: 1fr;
    }
    .mm-x-play-button {
      width: 60px;
      height: 60px;
    }
    .mm-x-play-button::before {
      left: 26px;
      top: 21px;
    }
  }
}

@layer mm-base {
  /* ═══════════ [plugin] 插件自有附加规则 ═══════════ */
  /* 主内容区顶部的面包屑条(详情页 hero 自带面包屑已关闭,模板统一在 main 顶部注入) */
  .mm-x-breadcrumb-bar .mm-x-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
    color: var(--mmx-muted);
    font-size: 13px;
  }
  .mm-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    margin: 8px 0;
    color: var(--mmx-muted);
  }
  .mm-consent-label input { margin-top: 3px; }
  .mm-empty {
    color: var(--mmx-muted);
    font-size: 15px;
    margin: 12px 0;
  }
  /* service-matrix 卡片可选 icon(源站卡无 icon,插件扩展,徽标风格同 .mm-x-badge) */
  /* layout-diagram 图例色块(对齐 .mm-x-layout-key b 的 18px 节奏,竖排在 label 上方) */
  /* 案例详情相关卡片:源站为 4/3 图(视频详情默认 16/9) */
  /* 案例筛选条选中态 */
  /* production-chain 独立成段时的深底(源站 .process-strip 只出现在 hero 深底内) */
  .mm-x-section.mm-x-production-chain {
    background: var(--mmx-dark);
    color: #fff;
    padding: 46px 0;
  }
  /* 首页深色 FAQ:summary 自带 20/22 内边距,清掉基础 details 内边距避免双重 */
  /* solution-tabs 面板包裹层的 hidden 加固(作者样式不覆盖 UA 规则,双保险) */
  /* figure 元素复位(MU Base 主题无 reset) */

  /* ═══════════ [meganav] 头部下拉与 megamenu(zj-site 模式移植,mm-x- 前缀) ═══════════ */
  /* 普通下拉分组:相对定位;mega 分组静态定位 → 面板贯穿整个 header */
  /* hover 桥接:防止鼠标移向面板途中经过空隙时下拉关闭 */
  .mm-x-nav-group:hover::after,

  /* 普通 children 下拉 */
  .mm-x-nav-group:hover .mm-x-nav-dropdown,
  .mm-x-nav-group:focus-within .mm-x-nav-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* mega 宽面板:相对 sticky header 绝对定位,左右贯穿 */
  /* 面板顶部隐形桥接条,向上延伸 24px 覆盖 nav bar 到面板之间的全部间隙 */
  .mm-x-nav-group--mega:hover .mm-x-nav-mega,
  .mm-x-nav-group--mega:focus-within .mm-x-nav-mega {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
    /* enter 立即响应,无延迟 */
    transition: opacity .2s ease, transform .2s ease, visibility 0s 0s;
  }
}

@layer mm-responsive {
  /* 父链接向下延伸 hover 区域 24px,让鼠标离开文字后仍保持 hover */

  /* 汉堡按钮(桌面隐藏) */

  /* 移动端:汉堡 + 折叠面板(覆盖前文的 display:none 断点) */
  @media (max-width: 980px) {
    .mm-x-nav-toggle { display: flex; order: 2; margin-left: auto; }
    .mm-x-nav-tools { order: 3; }
    .mm-x-main-nav {
      display: none;
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      z-index: 60;
      flex-direction: column;
      align-items: stretch;
      gap: 2px;
      padding: 12px 20px 20px;
      background: var(--mmx-white);
      border-bottom: 1px solid var(--mmx-line);
      box-shadow: 0 24px 48px rgba(15, 23, 42, .14);
      max-height: calc(100vh - 120px);
      overflow-y: auto;
    }
    .mm-x-main-nav.mm-x-open { display: flex; }
    .mm-x-main-nav > a, .mm-x-nav-parent {
      display: block;
      padding: 11px 4px;
      border-bottom: 1px solid var(--mmx-line);
    }
    .mm-x-nav-group { position: static; }
    .mm-x-nav-group:hover::after, .mm-x-nav-group:focus-within::after { content: none; }
    .mm-x-nav-mega, .mm-x-nav-dropdown {
      position: static;
      display: none;
      opacity: 1;
      transform: none;
      pointer-events: auto;
      border: 0;
      box-shadow: none;
      min-width: 0;
    }
    .mm-x-nav-group.mm-x-open .mm-x-nav-mega,
    .mm-x-nav-group.mm-x-open .mm-x-nav-dropdown { display: block; }
    .mm-x-mega { width: 100%; padding: 12px 0 16px; gap: 12px; }
    .mm-x-mega--tabs { grid-template-columns: 1fr; }
    .mm-x-mega-tabs {
      display: flex;
      overflow-x: auto;
      border-right: 0;
      padding: 0 0 8px;
      gap: 8px;
    }
    .mm-x-mega-tab { border-left: 0; border: 1px solid var(--mmx-line); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
    .mm-x-mega-all { white-space: nowrap; }
    .mm-x-mega-tab.mm-x-active { border-color: var(--mmx-red); }
    .mm-x-mega-tab small { display: none; }
    .mm-x-mega-panel.mm-x-active, .mm-x-mega-grid { grid-template-columns: repeat(2, 1fr); }
    .mm-x-mega-card small { display: none; }
  }
}

@layer mm-responsive {
  /* 打开移动菜单时锁定页面滚动 */

  /* ── Contact Info block ──────────────────────────────────────────────── */
  @media (max-width: 920px) {
    .mm-x-contact-grid--3,
    .mm-x-contact-grid--4 { grid-template-columns: repeat(2, 1fr); }
  }
}

@layer mm-responsive {
  @media (max-width: 640px) {
    .mm-x-contact-grid { grid-template-columns: 1fr !important; }
  }
}

@layer mm-base {
  /* ── FAQ 分组视图(faq-accordion source=query + groupByCategory,FAQ 页) ── */

  /* ═══════════ [plugin] 搜索页 + 404(参考 zj-site 搜索,mm 设计令牌) ═══════════ */

  /* ── 站内搜索表单(wp:search,搜索页 heading 带 + 404) ── */
  .mm-x-search-form { margin: 0; }
  .mm-x-search-form .wp-block-search__inside-wrapper {
    display: flex;
    gap: 10px;
  }
  .mm-x-search-form .wp-block-search__input {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--mmx-line);
    border-radius: 4px;
    background: var(--mmx-white);
    color: var(--mmx-ink);
    font: inherit;
  }
  .mm-x-search-form .wp-block-search__input:focus {
    outline: none;
    border-color: var(--mmx-red);
    box-shadow: 0 0 0 1px var(--mmx-red);
  }
  .mm-x-search-form .wp-block-search__button {
    min-height: 48px;
    margin: 0;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--mmx-red);
    color: var(--mmx-white);
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    transition: .2s ease;
  }
  .mm-x-search-form .wp-block-search__button:hover {
    background: var(--mmx-red-dark);
    transform: translateY(-1px);
  }

  /* ── 搜索页 heading 带 ── */
  .mm-x-search-head {
    padding: 46px 0 0;
  }
  .mm-x-search-head > * {
    width: min(1180px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
  }
  .mm-x-search-head .wp-block-query-title {
    margin: 10px 0 20px;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.1;
  }
  /* 表单占位与标题左对齐,输入区宽度上限 620px */
  .mm-x-search-head .mm-x-search-form .wp-block-search__inside-wrapper {
    max-width: 620px;
  }
}

@layer mm-responsive {
  /* ── 搜索结果标签页 ── */

  /* 空状态 */

  /* 结果卡片 */

  @media (max-width: 1040px) {
    .mm-x-search-grid { grid-template-columns: repeat(2, 1fr); }
  }
}

@layer mm-responsive {
  @media (max-width: 680px) {
    .mm-x-search-grid { grid-template-columns: 1fr; }
    .mm-x-search-tab-nav {
      overflow-x: auto;
      flex-wrap: nowrap;
      -webkit-overflow-scrolling: touch;
    }
    .mm-x-search-tab {
      flex: 0 0 auto;
      white-space: nowrap;
      padding: 10px 14px;
      font-size: 14px;
    }
  }
}

@layer mm-base {
  /* ── 404 ── */
  .mm-x-404 {
    padding: 90px 20px 110px;
    text-align: center;
    background:
      radial-gradient(720px 300px at 50% -80px, rgba(215, 25, 32, .06), transparent 70%),
      var(--mmx-soft);
  }
  .mm-x-404-code {
    font-size: clamp(96px, 15vw, 170px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: .02em;
    background: linear-gradient(135deg, var(--mmx-red) 0%, var(--mmx-orange) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .mm-x-404 h1 {
    margin: 10px 0 0;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.15;
  }
  .mm-x-404 > p {
    max-width: 560px;
    margin: 16px auto 0;
    color: var(--mmx-muted);
    line-height: 1.65;
  }
  .mm-x-404-search {
    max-width: 480px;
    margin: 30px auto 0;
  }
  .mm-x-404-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
  }
  .mm-x-404 .mm-x-btn.mm-x-ghost { background: var(--mmx-white); }
}

@layer mm-responsive {
  /* ═══════════════════════════════════════════════════════════════════════════
     [responsive] 统一响应式断点 — 移动端适配全局基础
     Breakpoints: ≤980px (tablet), ≤640px (phone), ≤480px (small phone)
     ═══════════════════════════════════════════════════════════════════════════ */

  /* ── Tablet (≤980px) ──────────────────────────────────────────────────── */
  @media (max-width: 980px) {
    /* Container */
    .mm-x-wrap {
      width: min(100% - 32px, 1180px);
    }

    /* Section spacing */
    .mm-x-section {
      padding: 68px 0;
    }

    /* Typography */
    .mm-x-section-title {
      font-size: clamp(26px, 5vw, 42px);
    }
    .mm-x-section-lead {
      font-size: 16px;
    }

    /* Grid fallbacks — ensure all 6-col grids collapse to 2-col */
    .mm-x-grid-3,
    .mm-x-feature-list {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Tables — enable horizontal scroll */
    .mm-x-fact-table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
}

@layer mm-responsive {
  /* ── Phone (≤640px) ──────────────────────────────────────────────────── */
  @media (max-width: 640px) {
    /* Container */
    .mm-x-wrap {
      width: min(100% - 24px, 1180px);
    }

    /* Section spacing */
    .mm-x-section {
      padding: 48px 0;
    }

    /* Typography */
    .mm-x-section-title {
      font-size: clamp(24px, 6vw, 34px);
      margin: 8px 0 10px;
    }
    .mm-x-section-lead {
      font-size: 15px;
      max-width: 100%;
    }
    .mm-x-eyebrow {
      font-size: 11px;
    }

    /* Buttons — full-width on mobile */
    .mm-x-btn--block-mobile {
      width: 100%;
    }

    /* All grids → single column */
    .mm-x-grid-3,
    .mm-x-feature-list {
      grid-template-columns: 1fr;
    }

    /* Tables — stack as cards on narrow screens */
    .mm-x-fact-table th,
    .mm-x-fact-table td {
      display: block;
      width: 100%;
      box-sizing: border-box;
    }
    .mm-x-fact-table th {
      border-bottom: 0;
      padding-bottom: 4px;
    }
    .mm-x-fact-table td {
      padding-top: 0;
    }

    /* Touch targets — ensure minimum 44px */
    .mm-x-btn {
      min-height: 44px;
      padding: 0 16px;
    }
  }
}

@layer mm-responsive {
  /* ── Small phone (≤480px) ────────────────────────────────────────────── */
  @media (max-width: 480px) {
    .mm-x-wrap {
      width: min(100% - 20px, 1180px);
    }
    .mm-x-section {
      padding: 40px 0;
    }
    .mm-x-section-title {
      font-size: clamp(22px, 7vw, 30px);
    }
    .mm-x-section-lead {
      font-size: 14px;
    }
  }
}

@layer mm-base {
  /* ── Toast notifications (inquiry form feedback) ────────────────────── */
  .mm-toast-stack {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    max-width: 420px;
    width: calc(100vw - 40px);
    pointer-events: none;
  }
  .mm-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--mmx-radius);
    background: var(--mmx-dark);
    color: #fff;
    font-size: 15px;
    line-height: 1.45;
    box-shadow: 0 8px 28px rgba(0,0,0,.24);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .3s, transform .3s;
  }
  .mm-toast.is-in {
    opacity: 1;
    transform: translateY(0);
  }
  .mm-toast--ok {
    border-left: 4px solid #22c55e;
  }
  .mm-toast--err {
    border-left: 4px solid #ef4444;
  }
  .mm-toast__icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
  }
  .mm-toast--ok .mm-toast__icon {
    background: #22c55e;
  }
  .mm-toast--err .mm-toast__icon {
    background: #ef4444;
  }
  .mm-toast__text {
    flex: 1;
    min-width: 0;
  }
  .mm-toast__close {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border: 0;
    background: none;
    color: rgba(255,255,255,.5);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin-top: -2px;
  }
  .mm-toast__close:hover {
    color: #fff;
  }

  /* ── Server-rendered form notice (no-JS fallback) ──────────────────── */
  .mm-x-formnote {
    padding: 14px 18px;
    border-radius: var(--mmx-radius);
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.5;
  }
  .mm-x-formnote--ok {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
  }
  .mm-x-formnote--err {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
  }

  /* ── Submit button loading state ───────────────────────────────────── */
  .mm-x-btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
  }
  .mm-x-btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mm-spin .6s linear infinite;
  }
  @keyframes mm-spin {
    to { transform: rotate(360deg); }
  }

  /* ═══════════ [blog] 博客模板样式(参考 zj-site 架构,mm 设计令牌) ═══════════ */

  /* ── Blog archive (home / category / tag / date / author) ──────────── */
  .mm-x-heading-band {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 34px;
    margin-bottom: 34px;
  }
  .mm-x-heading-band h1 {
    margin: 0;
    font-size: clamp(30px, 3.2vw, 48px);
    line-height: 1.08;
    color: var(--mmx-ink);
  }
  .mm-x-heading-band h2 {
    margin: 0;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.1;
    color: var(--mmx-ink);
  }

  .mm-x-blog-archive {
    padding: 86px 0;
  }
  .mm-x-blog-archive .mm-x-heading-band {
    margin-bottom: 38px;
  }
  .mm-x-blog-archive .mm-x-search-form .wp-block-search__inside-wrapper {
    max-width: 420px;
  }

  /* Blog card grid — 3-col, matches .mm-x-mcard / .mm-x-related-card look */
  .mm-x-blog-archive__list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 0;
  }
  .mm-x-blog-archive__list > li {
    margin: 0;
    list-style: none;
    overflow: hidden;
    background: var(--mmx-white);
    border: 1px solid var(--mmx-line);
    box-shadow: 0 10px 26px rgba(15,23,42,.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .mm-x-blog-archive__list > li:hover {
    transform: translateY(-2px);
    border-color: rgba(215,25,32,.32);
    box-shadow: var(--mmx-shadow);
  }
  .mm-x-blog-archive__list .wp-block-post-featured-image {
    overflow: hidden;
    background: #eef2f6;
  }
  .mm-x-blog-archive__list .wp-block-post-featured-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
  }
  .mm-x-blog-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
  }
  .mm-x-blog-card__date {
    color: var(--mmx-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .mm-x-blog-card__body h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.22;
    color: var(--mmx-ink);
  }
  .mm-x-blog-card__body h3 a {
    text-decoration: none;
    color: inherit;
  }
  .mm-x-blog-card__body h3 a:hover {
    color: var(--mmx-red);
  }
  .mm-x-blog-card__body .wp-block-post-excerpt {
    margin: 0;
    color: var(--mmx-muted);
    font-size: 14px;
    line-height: 1.55;
  }
  .mm-x-blog-card__body .wp-block-post-excerpt__more-text {
    margin-top: 4px;
  }
  .mm-x-blog-card__body .wp-block-post-excerpt__more-link {
    color: var(--mmx-red);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
  }
  .mm-x-blog-card__body .wp-block-post-excerpt__more-link:hover {
    color: var(--mmx-red-dark);
  }

  /* Pagination */
  .mm-x-blog-archive__pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid var(--mmx-line);
  }
  .mm-x-blog-archive__pagination .wp-block-query-pagination-numbers {
    display: flex;
    gap: 6px;
  }
  .mm-x-blog-archive__pagination a,
  .mm-x-blog-archive__pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--mmx-line);
    border-radius: 4px;
    background: var(--mmx-white);
    color: var(--mmx-ink);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s ease;
  }
  .mm-x-blog-archive__pagination a:hover {
    border-color: var(--mmx-red);
    color: var(--mmx-red);
  }
  .mm-x-blog-archive__pagination .current {
    border-color: var(--mmx-red);
    background: var(--mmx-red);
    color: var(--mmx-white);
  }

  /* Related posts band — visual separator from the main single content */
  .mm-x-post-related {
    border-top: 1px solid var(--mmx-line);
  }

  /* ── Single post detail ──────────────────────────────────────────── */

  /* Hero band: light gradient, wrapping the post title + category/date meta */
  .mm-x-post-hero {
    padding: 76px 0 58px;
    background:
      radial-gradient(600px 200px at 50% -60px, rgba(215,25,32,.05), transparent 70%),
      var(--mmx-soft);
    border-bottom: 1px solid var(--mmx-line);
  }
  .mm-x-post-hero h1 {
    margin: 12px 0 0;
    max-width: 900px;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.06;
    color: var(--mmx-ink);
  }
  .mm-x-post-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 20px;
    color: var(--mmx-muted);
    font-size: 14px;
    font-weight: 700;
  }
  .mm-x-post-hero__meta a {
    color: var(--mmx-red);
    text-decoration: none;
    font-weight: 800;
  }

  /* Two-column layout: article + sticky sidebar */
  .mm-x-post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
    align-items: start;
  }

  /* Article column */
  .mm-x-post-article .wp-block-post-featured-image {
    margin-bottom: 30px;
  }
  .mm-x-post-article .wp-block-post-featured-image img {
    width: 100%;
    display: block;
    border-radius: var(--mmx-radius);
  }
  /* Article typography — clean readable prose */
  .mm-x-post-article .wp-block-post-content h2 {
    margin: 36px 0 16px;
    font-size: 28px;
    line-height: 1.18;
    color: var(--mmx-ink);
  }
  .mm-x-post-article .wp-block-post-content h3 {
    margin: 28px 0 12px;
    font-size: 22px;
    line-height: 1.2;
    color: var(--mmx-ink);
  }
  .mm-x-post-article .wp-block-post-content p {
    margin: 0 0 16px;
    color: var(--mmx-muted);
    font-size: 16px;
    line-height: 1.72;
  }
  .mm-x-post-article .wp-block-post-content ul,
  .mm-x-post-article .wp-block-post-content ol {
    padding-left: 22px;
    margin: 0 0 16px;
    color: var(--mmx-muted);
    font-size: 16px;
    line-height: 1.7;
  }
  .mm-x-post-article .wp-block-post-content li {
    margin-bottom: 6px;
  }
  .mm-x-post-article .wp-block-post-content blockquote {
    margin: 24px 0;
    padding: 20px 24px;
    border-left: 4px solid var(--mmx-red);
    background: var(--mmx-soft);
    color: var(--mmx-ink);
    font-size: 17px;
    line-height: 1.65;
    border-radius: 0 var(--mmx-radius) var(--mmx-radius) 0;
  }
  .mm-x-post-article .wp-block-post-content img {
    border-radius: var(--mmx-radius);
  }

  /* Tags row */
  .mm-x-post-tags {
    margin: 36px 0 0;
    color: var(--mmx-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .mm-x-post-tags a {
    color: var(--mmx-red);
    text-decoration: none;
  }
  .mm-x-post-tags a:hover {
    color: var(--mmx-red-dark);
  }

  /* Previous / Next navigation */
  .mm-x-post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid var(--mmx-line);
  }
  .mm-x-post-nav .wp-block-post-navigation-link {
    color: var(--mmx-muted);
    font-size: 13px;
    font-weight: 750;
  }
  .mm-x-post-nav__next {
    text-align: right;
  }
  .mm-x-post-nav .wp-block-post-navigation-link a {
    display: block;
    margin-top: 4px;
    color: var(--mmx-ink);
    font-size: 16px;
    font-weight: 750;
    text-decoration: none;
  }
  .mm-x-post-nav .wp-block-post-navigation-link a:hover {
    color: var(--mmx-red);
  }

  /* ── Sidebar ─────────────────────────────────────────────────────── */
  .mm-x-post-side {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .mm-x-post-side__card {
    padding: 24px;
    background: var(--mmx-white);
    border: 1px solid var(--mmx-line);
    border-radius: var(--mmx-radius);
    box-shadow: 0 8px 22px rgba(15,23,42,.04);
  }
  .mm-x-post-side__card .mm-x-eyebrow {
    margin-bottom: 14px;
  }
  /* Latest posts widget in sidebar */
  .mm-x-post-side__card .wp-block-latest-posts {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .mm-x-post-side__card .wp-block-latest-posts li {
    padding: 10px 0;
    border-bottom: 1px solid var(--mmx-line);
  }
  .mm-x-post-side__card .wp-block-latest-posts li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .mm-x-post-side__card .wp-block-latest-posts a {
    color: var(--mmx-ink);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.4;
  }
  .mm-x-post-side__card .wp-block-latest-posts a:hover {
    color: var(--mmx-red);
  }
  .mm-x-post-side__card .wp-block-latest-posts time {
    display: block;
    margin-top: 4px;
    color: var(--mmx-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  /* Categories widget */
  .mm-x-post-side__card .wp-block-categories {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .mm-x-post-side__card .wp-block-categories li {
    padding: 8px 0;
    border-bottom: 1px solid var(--mmx-line);
  }
  .mm-x-post-side__card .wp-block-categories li:last-child {
    border-bottom: 0;
  }
  .mm-x-post-side__card .wp-block-categories a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--mmx-ink);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
  }
  .mm-x-post-side__card .wp-block-categories a:hover {
    color: var(--mmx-red);
  }

  /* CTA card in sidebar */
  .mm-x-post-side__cta {
    background:
      linear-gradient(135deg, rgba(16,17,19,.97), rgba(122,12,18,.92)),
      url("../assets/banner-bottle-filling-machine.jpg") center / cover;
    color: var(--mmx-white);
    border-color: transparent;
  }
  .mm-x-post-side__cta .mm-x-eyebrow {
    color: rgba(255,255,255,.8);
  }
  .mm-x-post-side__cta-title {
    margin: 0 0 8px;
    color: var(--mmx-white);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
  }
  .mm-x-post-side__cta-desc {
    margin: 0 0 16px;
    color: rgba(255,255,255,.7);
    font-size: 13px;
    line-height: 1.55;
  }
  .mm-x-post-side__cta .mm-x-btn {
    width: 100%;
  }

  /* Compact sidebar search form */
  .mm-x-search-form--side {
    display: flex;
    margin: 0;
  }
  .mm-x-search-form--side .wp-block-search__input {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--mmx-line);
    border-right: 0;
    border-radius: 4px 0 0 4px;
    background: var(--mmx-white);
    color: var(--mmx-ink);
    font-size: 14px;
  }
  .mm-x-search-form--side .wp-block-search__input:focus {
    outline: none;
    border-color: var(--mmx-red);
  }
  .mm-x-search-form--side .wp-block-search__button {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    min-height: 40px;
    width: 42px;
    padding: 0;
    border: 1px solid var(--mmx-line);
    border-left: 0;
    border-radius: 0 4px 4px 0;
    background: var(--mmx-white);
    color: var(--mmx-muted);
    cursor: pointer;
    transition: color .18s ease;
  }
  .mm-x-search-form--side .wp-block-search__button:hover {
    color: var(--mmx-red);
    background: var(--mmx-white);
    transform: none;
  }
}

@layer mm-responsive {
  /* ── Blog responsive ─────────────────────────────────────────────── */
  @media (max-width: 1040px) {
    .mm-x-post-layout {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .mm-x-post-side {
      position: static;
    }
    .mm-x-post-nav {
      grid-template-columns: 1fr;
    }
    .mm-x-post-nav__next {
      text-align: left;
    }
    .mm-x-heading-band {
      flex-direction: column;
      align-items: start;
      gap: 14px;
    }
    .mm-x-heading-band .mm-x-search-form {
      width: 100%;
    }
    .mm-x-blog-archive__list {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@layer mm-responsive {
  @media (max-width: 680px) {
    .mm-x-post-hero {
      padding: 48px 0 40px;
    }
    .mm-x-post-hero h1 {
      font-size: clamp(26px, 6vw, 40px);
    }
    .mm-x-blog-archive__list {
      grid-template-columns: 1fr;
    }
    .mm-x-blog-archive__pagination {
      flex-wrap: wrap;
    }
  }
}

/* ═══════════ [shared] 跨块共享组件 —— 重复定义清理后上收,单一权威 ═══════════
   以下 class 被 ≥2 个块的 HTML 使用,基础样式统一放这里,块文件不得再定义
   (上下文覆盖需带块自有 class 作用域,规范见插件根目录 CLAUDE.md)。 */

@layer mm-base {
  /* ── 通用卡片框架(原 faq-accordion;quote-card 深色卡由 quote 块自管) ── */
  .mm-x-project-card, .mm-x-result-card, .mm-x-config-card, .mm-x-timeline-card,
  .mm-x-service-system, .mm-x-photo-panel, .mm-x-video-panel,
  .mm-x-related-card, .mm-x-recommend-panel, .mm-x-faq-card {
    border: 1px solid var(--mmx-line);
    border-radius: var(--mmx-radius);
    background: #fff;
    box-shadow: 0 12px 30px rgba(18,24,33,.07);
  }

  .mm-x-faq-panel, .mm-x-video-inquiry-panel {
    border: 1px solid var(--mmx-line);
    border-radius: var(--mmx-radius);
    background: #fff;
    box-shadow: 0 12px 30px rgba(18,24,33,.07);
    padding: 26px;
  }

  .mm-x-project-card, .mm-x-config-card, .mm-x-timeline-card, .mm-x-service-system, .mm-x-faq-card {
    padding: 24px;
  }

  .mm-x-project-card h2, .mm-x-config-card h2, .mm-x-timeline-card h2,
  .mm-x-service-system h2, .mm-x-recommend-panel h2, .mm-x-faq-card h2 {
    margin: 0 0 16px;
    font-size: 28px;
    line-height: 1.12;
  }

  .mm-x-result-card p, .mm-x-config-card p, .mm-x-timeline-card p, .mm-x-faq-card p {
    margin: 0;
    color: var(--mmx-muted);
  }

  /* ── 卡片正文/图注(product-gallery、layout-diagram、certificate-grid、
        spec-table、split-layout、proof-gallery、related-cards、tag-card 共用) ── */
  .mm-x-card-body, .mm-x-caption {
    padding: 16px 18px;
  }

  .mm-x-caption {
    color: var(--mmx-muted);
    font-size: 14px;
  }

  .mm-x-photo-panel .mm-x-card-body, .mm-x-video-panel .mm-x-card-body {
    padding: 18px;
  }

  /* ── 流程条(hero、production-chain 共用,深色底) ── */
  .mm-x-process-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    margin-top: 70px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--mmx-radius);
    overflow: hidden;
  }

  .mm-x-process-strip div {
    min-height: 82px;
    padding: 18px;
    background: rgba(15,18,22,.58);
    font-weight: 800;
  }

  .mm-x-process-strip small {
    display: block;
    color: #bec6d2;
    font-weight: 500;
    margin-top: 4px;
  }

  /* ── 数据摘要条(case-overview、results-strip 共用) ── */
  .mm-x-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: 28px;
    overflow: hidden;
    border-radius: var(--mmx-radius);
    background: var(--mmx-line);
  }

  .mm-x-summary-strip div {
    min-height: 124px;
    padding: 18px;
    background: #fff;
  }

  .mm-x-summary-strip strong {
    display: block;
    color: var(--mmx-red);
    font-size: 30px;
    line-height: 1.02;
  }

  .mm-x-summary-strip span {
    display: block;
    margin-top: 8px;
    color: var(--mmx-muted);
    font-size: 13px;
    font-weight: 800;
  }

  /* ── 特性卡(feature-list、machine-card、process-grid 共用) ── */
  .mm-x-feature {
    border: 1px solid var(--mmx-line);
    border-radius: var(--mmx-radius);
    padding: 16px;
    background: var(--mmx-white);
  }

  .mm-x-feature b {
    display: block;
    margin-bottom: 6px;
  }

  .mm-x-feature .mm-x-rich {
    color: var(--mmx-muted);
    font-size: 14px;
  }

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

@layer mm-responsive {
  @media (max-width: 980px) {
    .mm-x-process-strip {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 640px) {
    .mm-x-faq-panel, .mm-x-video-inquiry-panel {
      padding: 18px;
    }
    .mm-x-project-card h2, .mm-x-config-card h2, .mm-x-timeline-card h2,
    .mm-x-service-system h2, .mm-x-recommend-panel h2, .mm-x-faq-card h2 {
      font-size: 22px;
    }
    .mm-x-project-card, .mm-x-config-card, .mm-x-timeline-card, .mm-x-service-system, .mm-x-faq-card {
      padding: 18px;
    }
    .mm-x-process-strip {
      grid-template-columns: repeat(2, 1fr);
      margin-top: 36px;
    }
    .mm-x-process-strip div {
      min-height: 68px;
      padding: 14px;
    }
    .mm-x-summary-strip div {
      min-height: 98px;
      padding: 14px;
    }
    .mm-x-summary-strip strong {
      font-size: 24px;
    }
    .mm-x-feature {
      padding: 14px;
    }
    .mm-x-feature b {
      font-size: 16px;
    }
    .mm-x-feature .mm-x-rich {
      font-size: 13px;
    }
  }

  @media (max-width: 480px) {
    .mm-x-process-strip {
      grid-template-columns: 1fr;
    }
  }
}