/* =============================================================================
 * scb-design-system.css
 * showcasecabinet.com —— 案例详情页(industry) / 产品详情页(b2b-product) 设计系统实现
 * 交付：承影 (design-to-code)   依据：design/uiux-detail-pages-spec.md（绘月）
 * -----------------------------------------------------------------------------
 * 使用方式：整份内容原样贴进 Code Snippet name=scb-case-assets 的 <style> 里，
 *          并同时供产品页加载（旧版 should_load 需加 is_singular('b2b-product')）。
 *          scb-case-display / scb-product-display 内联 <style> 全部删除，不再各写一套。
 *
 * 硬约束（已在本文件内落实）
 *   1. 零 hex 主题色硬编码——所有品牌色走 Blocksy 变量 + color-mix 派生 + @supports fallback
 *   2. 零 font-family 声明——全部继承 Blocksy
 *   3. 零容器 max-width / 左右 padding——宽度归 ct-container-full / Customizer 管
 *   4. 断点只有两个：768 / 1024（mobile-first，min-width）
 *   5. 字号七档：13 / 14 / 15 / 16 / 19 / 22 / 30
 *   6. 圆角三档：8 / 12 / 16    阴影两档：shadow-1 / shadow-2
 *   7. :focus-visible 全局可见；无任何 outline:none 不给替代
 *   8. prefers-reduced-motion 下所有 transform / transition 失效
 * ========================================================================== */


/* =============================================================================
 * 0. TOKENS —— 唯一令牌层
 * ========================================================================== */

:root {
  /* ---- 颜色：基座（消费 Blocksy，带 fallback） ---------------------------- */
  --scb-accent:      var(--theme-palette-color-1, #0783be);
  --scb-ink:         var(--theme-text-color, #21201e);
  --scb-line:        var(--theme-border-color, #e4e4e4);
  --scb-surface:     #fff;

  /* ---- 颜色：派生（无 color-mix 环境下的静态兜底，下方 @supports 会覆盖）---- */
  --scb-accent-ink:  #0670a5;   /* accent 压暗版：accent 作正文尺寸文字/链接时必须用它 (≥5.5:1) */
  --scb-accent-soft: #e8f4fa;   /* chip 背景 / focus 光晕 */
  --scb-ink-soft:    #52606d;   /* 次级说明文字  6.46:1 */
  --scb-ink-mute:    #6b7280;   /* 规格 key / 卡片 meta  4.83:1（不得再浅） */
  --scb-bg-soft:     #f7f8f9;   /* 表单卡背景 / 图片占位底 */

  /* ---- 颜色：语义（表单校验 / 提交反馈）---------------------------------- */
  --scb-success:     #15803d;   /* on #fff = 5.06:1 */
  --scb-warning:     #a16207;   /* on #fff = 4.87:1 */
  --scb-error:       #b91c1c;   /* on #fff = 6.24:1 */
  --scb-error-soft:  #fdeaea;

  /* ---- 字号：七档，无半像素 --------------------------------------------- */
  --scb-fs-13: 13px;   /* 标注：规格 key、卡片 meta、Zoom 按钮 */
  --scb-fs-14: 14px;   /* meta / 规格值 / FAQ 答案 */
  --scb-fs-15: 15px;   /* 正文 / 概述 / 卡片标题 / FAQ 问题 */
  --scb-fs-16: 16px;   /* H3 卡片与步骤标题 */
  --scb-fs-19: 19px;   /* 备用大标注 / 移动端 H2 上浮档 */
  --scb-fs-22: 22px;   /* H2 区块标题（桌面） */
  --scb-fs-30: 30px;   /* H1（桌面） */
  --scb-fs-h1-m: 24px; /* H1（<768） */
  --scb-fs-h2-m: 20px; /* H2（<768） */

  /* ---- 行高 --------------------------------------------------------------- */
  --scb-lh-tight: 1.25;
  --scb-lh-head:  1.3;
  --scb-lh-card:  1.4;
  --scb-lh-meta:  1.6;
  --scb-lh-body:  1.7;

  /* ---- 间距：8 档 --------------------------------------------------------- */
  --scb-s-4:  4px;
  --scb-s-8:  8px;
  --scb-s-12: 12px;
  --scb-s-16: 16px;
  --scb-s-24: 24px;
  --scb-s-32: 32px;
  --scb-s-48: 48px;
  --scb-s-64: 64px;

  /* section 纵向节奏：移动 40 / 桌面 64（在 @media 里切换） */
  --scb-section-gap: 40px;

  /* ---- 圆角：三档 --------------------------------------------------------- */
  --scb-r-sm: 8px;    /* 缩略图、输入框、小按钮 */
  --scb-r-md: 12px;   /* 卡片、图片框 */
  --scb-r-lg: 16px;   /* 大容器、表单卡、灯箱面板 */

  /* ---- 阴影：两档，禁止新增第三档 ---------------------------------------- */
  --scb-shadow-1: 0 1px 2px rgba(0, 0, 0, .04);
  --scb-shadow-2: 0 8px 24px rgba(0, 0, 0, .08);

  /* ---- 焦点环 ------------------------------------------------------------- */
  --scb-focus-width:  2px;
  --scb-focus-offset: 2px;

  /* ---- z-index 刻度（灯箱 900，不再有 99999）------------------------------ */
  --scb-z-content:  0;
  --scb-z-sticky:   40;   /* 移动端粘性 CTA 条，低于 Blocksy header(50) */
  --scb-z-lightbox: 900;

  /* ---- 触控目标下限 ------------------------------------------------------- */
  --scb-hit: 44px;
}

/* color-mix 可用时用派生值覆盖静态兜底：改 Blocksy 主色后全站自动跟随 */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --scb-accent-ink:  color-mix(in srgb, var(--scb-accent) 80%, #000);
    --scb-accent-soft: color-mix(in srgb, var(--scb-accent) 10%, #fff);
    --scb-ink-soft:    color-mix(in srgb, var(--scb-ink) 68%, #fff);
    --scb-ink-mute:    color-mix(in srgb, var(--scb-ink) 58%, #fff);
    --scb-bg-soft:     color-mix(in srgb, var(--scb-ink) 4%, #fff);
  }
}


/* =============================================================================
 * 1. 全局基座 + a11y 基线
 * ========================================================================== */

/* 页面根容器：不设 max-width、不设左右 padding、不设 font-family。
   只负责颜色与纵向节奏，宽度完全交给 Blocksy 的 ct-container-full。 */
.scb-page {
  color: var(--scb-ink);
  line-height: var(--scb-lh-body);
}

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

/* ---- 焦点可见（P0-8）：全局 + 组件内双保险 ------------------------------- */
/* 全局层用 :where() 保持 0 特异性，方便主题覆盖；组件层用实特异性兜底。 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--scb-focus-width) solid var(--scb-accent);
  outline-offset: var(--scb-focus-offset);
}
.scb-page a:focus-visible,
.scb-page button:focus-visible,
.scb-page input:focus-visible,
.scb-page select:focus-visible,
.scb-page textarea:focus-visible,
.scb-page summary:focus-visible,
.scb-page [tabindex]:focus-visible,
.scb-lightbox a:focus-visible,
.scb-lightbox button:focus-visible,
.scb-stickycta__btn:focus-visible {
  outline: var(--scb-focus-width) solid var(--scb-accent);
  outline-offset: var(--scb-focus-offset);
  border-radius: var(--scb-r-sm);
}
/* 禁止裸 outline:none —— 若第三方插件（Fluent）写了，这里强制补回 */
.scb-page :focus-visible { outline-style: solid; }

/* ---- 仅供屏幕阅读器 ------------------------------------------------------- */
.scb-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- 正文排版（Overview / 概述）------------------------------------------ */
.scb-prose {
  font-size: var(--scb-fs-15);
  line-height: var(--scb-lh-body);
  color: var(--scb-ink-soft);
  max-width: 75ch;
  /* Overview 强制单列：防 short_description 里意外嵌入 Gutenberg 列块 / Blocksy 列布局继承 */
  column-count: 1 !important;
}
.scb-prose > :first-child { margin-top: 0; }
.scb-prose > :last-child  { margin-bottom: 0; }
.scb-prose p  { margin: 0 0 var(--scb-s-12); }
.scb-prose ul,
.scb-prose ol { margin: 0 0 var(--scb-s-12); padding-left: 20px; }
.scb-prose li { margin-bottom: var(--scb-s-4); }
.scb-prose a  { color: var(--scb-accent-ink); }
/* 图片：块级居中、不浮动、不失真（防并排图把 Overview 撑成多列） */
.scb-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto var(--scb-s-12);
  float: none;
}
/* Gutenberg 列块兜底：强制纵向堆叠成单列（含列内元素宽度复位） */
.scb-prose .wp-block-columns { display: block !important; }
.scb-prose .wp-block-column { width: 100% !important; margin-left: 0 !important; }


/* =============================================================================
 * 2. 组件 07 · section-header（区块骨架）
 *    旧：.scb-case-section / .scb-section（各自带 margin-top:48）
 * ========================================================================== */

.scb-section { margin: 0; }
.scb-section + .scb-section { margin-top: var(--scb-section-gap); }

.scb-section__title {
  font-size: var(--scb-fs-h2-m);
  line-height: var(--scb-lh-head);
  font-weight: 700;
  color: var(--scb-ink);
  margin: 0 0 var(--scb-s-16);
  padding-bottom: var(--scb-s-8);
  border-bottom: 1px solid var(--scb-line);
}
.scb-section__intro {
  font-size: var(--scb-fs-15);
  line-height: var(--scb-lh-body);
  color: var(--scb-ink-soft);
  margin: 0 0 var(--scb-s-24);
  max-width: 75ch;
}


/* =============================================================================
 * 3. 组件 01 · breadcrumb
 *    旧：.wp-block-breadcrumbs（案例）/ .rank-math-breadcrumb > p（产品，无列表语义）
 * ========================================================================== */

.scb-breadcrumb { margin: 0 0 var(--scb-s-24); }

.scb-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--scb-s-4) var(--scb-s-8);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--scb-fs-13);
  line-height: var(--scb-lh-card);
  color: var(--scb-ink-mute);
}
.scb-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--scb-s-8); margin: 0; }
.scb-breadcrumb__item + .scb-breadcrumb__item::before {
  content: "/";
  color: var(--scb-ink-mute);
  /* 分隔符是纯装饰，DOM 里没有它，屏幕阅读器不会念 */
}
.scb-breadcrumb__link {
  color: var(--scb-accent-ink);
  text-decoration: none;
}
.scb-breadcrumb__link:hover { text-decoration: underline; }
.scb-breadcrumb__current {
  color: var(--scb-ink-soft);
  font-weight: 600;
  /* 当前页不是链接，不可点击 */
}


/* =============================================================================
 * 4. 组件 02 · gallery（主图台 + 缩略图 button + Zoom）
 *    旧：.scb-case-stage / .scb-case-thumbs img / .scb-case-zoom
 *        .scb-stage      / .scb-thumbs img      / .scb-zoom
 *        （旧版 .scb-case-slider / .scb-case-thumb 死契约一并作废）
 * ========================================================================== */

.scb-gallery { position: relative; }

/* ---- 主图台 --------------------------------------------------------------- */
.scb-gallery__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;          /* 主图台 1:1（用户拍板，原 4:3 作废） */
  background: var(--scb-bg-soft);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-md);
  overflow: hidden;
}
.scb-gallery__slide {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 非当前图用 display:none —— 从可访问性树与 Tab 顺序中真正移除 */
.scb-gallery__slide.is-active { display: block; }

/* ---- Zoom 按钮：不透明底，对比度可控（修 P1-13）-------------------------- */
.scb-gallery__zoom {
  position: absolute;
  right: var(--scb-s-12);
  bottom: var(--scb-s-12);
  min-height: 36px;
  padding: var(--scb-s-8) var(--scb-s-16);
  font-size: var(--scb-fs-13);
  font-weight: 600;
  line-height: 1.2;
  color: var(--scb-ink);
  background: var(--scb-surface);      /* 完全不透明，不受底图影响 */
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-sm);
  box-shadow: var(--scb-shadow-1);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.scb-gallery__zoom:hover {
  background: var(--scb-accent);
  border-color: var(--scb-accent);
  color: #fff;
}

/* ---- 缩略图行：<768 横向滚动不换行 --------------------------------------- */
.scb-gallery__thumbs {
  display: flex;
  gap: var(--scb-s-8);
  margin-top: var(--scb-s-12);
  padding-bottom: var(--scb-s-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.scb-gallery__thumb {
  flex: 0 0 auto;
  width: 76px;
  height: 60px;          /* 76×60 已达 44×44 触控下限 */
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--scb-r-sm);
  background: var(--scb-bg-soft);
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
  scroll-snap-align: start;
  transition: border-color .18s ease;
}
.scb-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 选中态：aria-pressed 驱动。除颜色外还有 2px 实边 + 内描边，不只靠颜色传达（E5） */
.scb-gallery__thumb[aria-pressed="true"] {
  border-color: var(--scb-accent);
  box-shadow: inset 0 0 0 1px var(--scb-surface);
}
.scb-gallery__thumb:hover { border-color: var(--scb-ink-mute); }

/* ---- 图片计数 / aria-live 播报区（可见，兼作视觉计数器）------------------ */
.scb-gallery__status {
  margin: var(--scb-s-8) 0 0;
  font-size: var(--scb-fs-13);
  line-height: var(--scb-lh-card);
  color: var(--scb-ink-mute);
}


/* =============================================================================
 * 5. 组件 03 · lightbox（全站唯一实例）
 *    旧：.scb-case-lb / .scb-lb（span 关闭、z-index 99999）
 *        + 旧版 #scbCaseLightbox（第三个实例）—— 三者全部作废
 * ========================================================================== */

.scb-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--scb-z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--scb-s-24);
}
.scb-lightbox[hidden] { display: none; }

.scb-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 20, 24, .88);
}
.scb-lightbox__panel {
  position: relative;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scb-lightbox__img {
  display: block;
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--scb-r-md);
  background: var(--scb-bg-soft);
}
/* 关闭键：真 <button>，44×44，不透明底 */
.scb-lightbox__close {
  position: fixed;
  top: var(--scb-s-16);
  right: var(--scb-s-16);
  width: var(--scb-hit);
  height: var(--scb-hit);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--scb-fs-22);
  line-height: 1;
  color: var(--scb-ink);
  background: var(--scb-surface);
  border: 1px solid var(--scb-line);
  border-radius: 50%;
  box-shadow: var(--scb-shadow-2);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.scb-lightbox__close:hover { background: var(--scb-accent); border-color: var(--scb-accent); color: #fff; }

/* 灯箱打开时锁住页面滚动（由 JS 加到 <html> 上） */
.scb-lightbox-open { overflow: hidden; }


/* =============================================================================
 * 6. 组件 04 · meta-list（Model / Category / Location / Year）
 *    旧：.scb-case-meta span>b / .scb-meta span>b（只有视觉加粗，无键值语义）
 * ========================================================================== */

.scb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--scb-s-8) var(--scb-s-24);
  margin: 0 0 var(--scb-s-16);
  font-size: var(--scb-fs-14);
  line-height: var(--scb-lh-meta);
}
.scb-meta__row { display: flex; align-items: baseline; gap: var(--scb-s-8); }
.scb-meta__key {
  margin: 0;
  font-weight: 600;
  color: var(--scb-ink);
}
.scb-meta__key::after { content: ":"; }
.scb-meta__val {
  margin: 0;
  color: var(--scb-ink-soft);
}
.scb-meta__val a {
  color: var(--scb-accent-ink);   /* 正文尺寸链接一律用压暗版 */
  text-decoration: none;
}
.scb-meta__val a:hover { text-decoration: underline; }


/* =============================================================================
 * 7. 组件 05 · quick-facts（新增：MOQ / Lead Time / Customization / OEM
 *              或 Location / Year / Scale / Lead Time）
 *    旧：无（首屏事实此前埋在 Specifications 里）
 * ========================================================================== */

.scb-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--scb-s-12) var(--scb-s-16);
  margin: 0 0 var(--scb-s-24);
  padding: var(--scb-s-16);
  background: var(--scb-bg-soft);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-md);
}
.scb-facts__row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scb-facts__key {
  margin: 0;
  font-size: var(--scb-fs-13);
  line-height: var(--scb-lh-card);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--scb-ink-mute);
}
.scb-facts__val {
  margin: 0;
  font-size: var(--scb-fs-15);
  line-height: var(--scb-lh-card);
  font-weight: 600;
  color: var(--scb-ink);
  overflow-wrap: anywhere;
}


/* =============================================================================
 * 8. 组件 06 · inquiry-cta（Fluent 表单卡）
 *    旧：.scb-case-form / .scb-form（裸表单，无 H2、无 label、无副文案）
 * ========================================================================== */

.scb-inquiry {
  padding: var(--scb-s-24);
  background: var(--scb-bg-soft);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-lg);
  /* scroll-margin：粘性 CTA / header 锚点跳转时不被遮住 */
  scroll-margin-top: 96px;
}
.scb-inquiry__title {
  font-size: var(--scb-fs-h2-m);
  line-height: var(--scb-lh-head);
  font-weight: 700;
  color: var(--scb-ink);
  margin: 0 0 var(--scb-s-8);
}
.scb-inquiry__promise {
  margin: 0 0 var(--scb-s-16);
  font-size: var(--scb-fs-14);
  line-height: var(--scb-lh-meta);
  color: var(--scb-ink-soft);
}

/* ---- 原生字段结构（同时作为 Fluent 输出的目标契约）----------------------- */
.scb-field { margin: 0 0 var(--scb-s-16); }
.scb-field__label {
  display: block;                       /* 可见 label，不用 placeholder 顶替 */
  margin: 0 0 var(--scb-s-4);
  font-size: var(--scb-fs-14);
  font-weight: 600;
  line-height: var(--scb-lh-card);
  color: var(--scb-ink);
}
.scb-field__req { color: var(--scb-error); margin-left: 2px; }
.scb-field__hint {
  display: block;
  margin-top: var(--scb-s-4);
  font-size: var(--scb-fs-13);
  line-height: var(--scb-lh-card);
  color: var(--scb-ink-mute);
}
.scb-field__error {
  display: block;
  margin-top: var(--scb-s-4);
  font-size: var(--scb-fs-13);
  line-height: var(--scb-lh-card);
  font-weight: 600;
  color: var(--scb-error);
}
.scb-field__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--scb-s-16);
}

.scb-input,
.scb-textarea,
.scb-select {
  width: 100%;
  min-height: var(--scb-hit);
  padding: var(--scb-s-12) var(--scb-s-12);
  font: inherit;
  font-size: var(--scb-fs-15);
  line-height: var(--scb-lh-card);
  color: var(--scb-ink);
  background: var(--scb-surface);
  border: 1px solid var(--scb-ink-mute);   /* 非文本 UI 对比度 ≥3:1 */
  border-radius: var(--scb-r-sm);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.scb-textarea { min-height: 120px; resize: vertical; }
.scb-input:focus,
.scb-textarea:focus,
.scb-select:focus {
  border-color: var(--scb-accent);
  box-shadow: 0 0 0 3px var(--scb-accent-soft);
}
.scb-input[aria-invalid="true"],
.scb-textarea[aria-invalid="true"] {
  border-color: var(--scb-error);
  background: var(--scb-error-soft);
}

.scb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--scb-s-8);
  min-height: var(--scb-hit);
  padding: var(--scb-s-12) var(--scb-s-24);
  font: inherit;
  font-size: var(--scb-fs-15);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  color: #fff;
  background: var(--scb-accent);
  border: 1px solid var(--scb-accent);
  border-radius: var(--scb-r-sm);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.scb-btn:hover { background: var(--scb-accent-ink); border-color: var(--scb-accent-ink); color: #fff; }
.scb-btn--block { width: 100%; }
.scb-btn--ghost {
  color: var(--scb-accent-ink);
  background: var(--scb-surface);
  border-color: var(--scb-line);
}
.scb-btn--ghost:hover { background: var(--scb-accent-soft); color: var(--scb-accent-ink); border-color: var(--scb-accent); }

/* 提交结果播报区（role="status"） */
.scb-form-status {
  margin: var(--scb-s-16) 0 0;
  padding: var(--scb-s-12) var(--scb-s-16);
  font-size: var(--scb-fs-14);
  line-height: var(--scb-lh-meta);
  border-radius: var(--scb-r-sm);
  border: 1px solid var(--scb-line);
}
.scb-form-status:empty { display: none; }
.scb-form-status--success { color: var(--scb-success); border-color: var(--scb-success); background: var(--scb-bg-soft); }
.scb-form-status--error   { color: var(--scb-error);   border-color: var(--scb-error);   background: var(--scb-error-soft); }

/* ---- Fluent Forms 覆盖（把插件输出对齐到上面同一套令牌）------------------ */
.scb-inquiry .fluentform { margin: 0; }
.scb-inquiry .ff-el-group { margin-bottom: var(--scb-s-16); }
.scb-inquiry .ff-el-input--label label {
  display: block;
  margin: 0 0 var(--scb-s-4);
  font-size: var(--scb-fs-14);
  font-weight: 600;
  color: var(--scb-ink);
}
.scb-inquiry .ff-el-form-control {
  width: 100%;
  min-height: var(--scb-hit);
  padding: var(--scb-s-12);
  font-size: var(--scb-fs-15);
  line-height: var(--scb-lh-card);
  color: var(--scb-ink);
  background: var(--scb-surface);
  border: 1px solid var(--scb-ink-mute);
  border-radius: var(--scb-r-sm);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.scb-inquiry .ff-el-form-control:focus {
  border-color: var(--scb-accent);
  box-shadow: 0 0 0 3px var(--scb-accent-soft);
}
/* 键盘焦点仍必须有 outline —— 覆盖 Fluent 的 outline:none */
.scb-inquiry .ff-el-form-control:focus-visible {
  outline: var(--scb-focus-width) solid var(--scb-accent);
  outline-offset: var(--scb-focus-offset);
}
.scb-inquiry .ff-el-is-error .ff-el-form-control { border-color: var(--scb-error); background: var(--scb-error-soft); }
.scb-inquiry .error-text,
.scb-inquiry .text-danger {
  font-size: var(--scb-fs-13);
  font-weight: 600;
  color: var(--scb-error);
}
.scb-inquiry .ff-message-success {
  font-size: var(--scb-fs-14);
  color: var(--scb-success);
  border: 1px solid var(--scb-success);
  border-radius: var(--scb-r-sm);
  padding: var(--scb-s-12) var(--scb-s-16);
}
.scb-inquiry .ff-btn-submit {
  width: 100%;
  min-height: var(--scb-hit);
  padding: var(--scb-s-12) var(--scb-s-24);
  font-size: var(--scb-fs-15);
  font-weight: 700;
  color: #fff;
  background: var(--scb-accent);
  border: 1px solid var(--scb-accent);
  border-radius: var(--scb-r-sm);
  cursor: pointer;
  transition: background .18s ease;
}
.scb-inquiry .ff-btn-submit:hover { background: var(--scb-accent-ink); border-color: var(--scb-accent-ink); }


/* =============================================================================
 * 9. 组件 · specifications（产品页第 3 槽位）
 *    旧：.scb-spec .row / .k / .v （.k = #7b8794，3.66:1 不合格）
 * ========================================================================== */

.scb-spec {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-md);
  overflow: hidden;
}
.scb-spec__row {
  display: flex;
  flex-direction: column;
  gap: var(--scb-s-4);
  padding: var(--scb-s-12) var(--scb-s-16);
  /* 分隔线改画在行顶（修：双列偶数行左列多一条 1px 短线） */
  border-top: 1px solid var(--scb-line);
}
.scb-spec__row:first-child { border-top: 0; }
.scb-spec__key {
  margin: 0;
  font-size: var(--scb-fs-13);
  line-height: var(--scb-lh-card);
  font-weight: 600;
  color: var(--scb-ink-mute);   /* ≥4.5:1 */
}
.scb-spec__val {
  margin: 0;
  font-size: var(--scb-fs-14);
  line-height: var(--scb-lh-meta);
  color: var(--scb-ink);
  overflow-wrap: anywhere;
}


/* =============================================================================
 * 10. 组件 · why-choose（H2 + intro + 4 points 卡 + 纵向堆叠图组）
 *     旧：.scb-why-banner / .scb-why-head(26px) / .scb-why-intro / .scb-why-points
 *     数据源：ACF 选项页 Site Global → why choose us → why_choose_photo（多图，源图 ~1920 宽）
 *     图片（用户拍板）：why_choose_photo 多张 1920 宽图按字段顺序从上到下垂直堆叠，
 *           全宽渲染，无画廊 / 无缩略图 / 无锚点 / 零交互；
 *           components.js 保持仅两个行为，本组件零 JS。
 *     a11y：纯 <img> 纵向流，保留真实画面 alt；无装饰链接、无焦点陷阱、
 *           无滚动轨道；图间距走 --scb-* 间距令牌；focus-visible 全局兜底。
 * ========================================================================== */

/* ---- 图组容器：纵向流；图间距 24（--scb-s-24）--------------------------- */
.scb-why__photos {
  display: flex;
  flex-direction: column;
  gap: var(--scb-s-24);
  margin: 0 0 var(--scb-s-24);        /* 与 H2 的间距同旧画廊 */
}

/* ---- 单图：全宽横幅，21/9 与 1920 源图比例一致（沿用旧契约比例）--------- */
.scb-why__photo {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;               /* 1920 源图横幅比例，不硬塞正方形 */
  object-fit: cover;
  border-radius: var(--scb-r-md);
  background: var(--scb-bg-soft);
}


/* =============================================================================
 * 11. 组件 10 · selling-points（4 卖点卡，非链接 → 无位移）
 *     旧：.scb-selling .sp（hover 有 translateY(-3px)，误导为可点）
 *     数据源：Site Global → why_choose_points（ACF WYSIWYG 富文本，wp_kses_post 原样输出）
 *     双路径共存，最终都是 <div class="scb-points"> > <ul>（无嵌套，鲁班已统一）：
 *       A. 富文本主路径：WYSIWYG 原样输出 <ul>/<p>/<h3> → > ul 卡片化 / > p / > h3 prose
 *       B. 重复器兜底路径：<ul><li class="scb-points__item">…（li 保留修饰类，与富文本
 *          li 共享同一份卡片定义，见下方选择器组）</li></ul>
 *     两路径互斥出现，选择器互不误伤。
 * ========================================================================== */

.scb-points {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 卡片/标题/描述：兜底路径 .scb-points__item 与 富文本路径 .scb-points > ul > li 共享同一份定义，
   避免两条路径视觉漂移（鲁班兜底已改为 <ul><li class="scb-points__item">…</li></ul>，两路径最终都是 .scb-points > ul） */
.scb-points__item,
.scb-points > ul > li {
  margin: 0;
  padding: var(--scb-s-24);
  background: var(--scb-surface);
  border: 1px solid var(--scb-line);
  border-left: 3px solid var(--scb-accent);
  border-radius: var(--scb-r-md);
  min-width: 0;
  overflow-wrap: anywhere;   /* 防长 URL / 长词水平溢出 */
  /* 卡片不可点：不给 hover 位移、不给 shadow-2 */
}
.scb-points__title,
.scb-points > ul > li > h3,
.scb-points > ul > li > h4 {
  margin: 0 0 var(--scb-s-8);
  font-size: var(--scb-fs-16);
  line-height: var(--scb-lh-card);
  font-weight: 700;
  color: var(--scb-ink);
}
.scb-points__desc,
.scb-points > ul > li > p {
  margin: 0;
  font-size: var(--scb-fs-14);
  line-height: var(--scb-lh-meta);
  color: var(--scb-ink-soft);
  overflow-wrap: anywhere;
}
.scb-points > ul > li > p + p { margin-top: var(--scb-s-8); }
/* 用户习惯用 <p><strong>Title</strong> desc</p> 时，strong 提为 ink 色做标题感 */
.scb-points > ul > li > p > strong { color: var(--scb-ink); }

/* ---- 富文本路径（ACF WYSIWYG 原样输出，兼容 <ul> 与 <p>/<h3> 两种结构）---- */
/* 顶层块一律横跨整行：不被 .scb-points 的多列 grid 打散（卡片路径无这些子级，不受影响） */
.scb-points > ul,
.scb-points > ol,
.scb-points > p,
.scb-points > h2,
.scb-points > h3,
.scb-points > h4 {
  grid-column: 1 / -1;
  min-width: 0;
}

/* 结构 A：顶层 <ul> → 自身 2 列 grid（<768），li 卡片化（共享定义见上） */
.scb-points > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--scb-s-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 结构 B：顶层 <p> / <h3> 段落 → prose 排版，不塌不丑不水平溢出 */
.scb-points > p {
  margin: 0 0 var(--scb-s-16);
  font-size: var(--scb-fs-15);
  line-height: var(--scb-lh-body);
  color: var(--scb-ink-soft);
  max-width: 75ch;
  overflow-wrap: anywhere;
}
.scb-points > p:last-child { margin-bottom: 0; }
.scb-points > h2,
.scb-points > h3,
.scb-points > h4 {
  margin: 0 0 var(--scb-s-8);
  font-size: var(--scb-fs-19);
  line-height: var(--scb-lh-head);
  font-weight: 700;
  color: var(--scb-ink);
}
/* 顶层 <ol>：保留有序号（.scb-points 的 list-style:none 会继承，需显式恢复） */
.scb-points > ol {
  margin: 0 0 var(--scb-s-16);
  padding-left: 20px;
  list-style: decimal;
  font-size: var(--scb-fs-15);
  line-height: var(--scb-lh-body);
  color: var(--scb-ink-soft);
}


/* =============================================================================
 * 12. 组件 08 · process-steps（6 步，真 <ol>）
 *     旧：.scb-proc .pc（div 平级）+ .num（装饰序号写死在 DOM 里）
 *     现在序号用 CSS counter 生成 → 天然是装饰内容，不进可访问性树
 * ========================================================================== */

.scb-process {
  counter-reset: scb-step;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.scb-process__item {
  counter-increment: scb-step;
  position: relative;
  padding: var(--scb-s-24);
  padding-right: var(--scb-s-48);
  background: var(--scb-surface);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-md);
}
.scb-process__item::before {
  content: counter(scb-step, decimal-leading-zero);
  position: absolute;
  top: var(--scb-s-12);
  right: var(--scb-s-16);
  font-size: var(--scb-fs-30);
  font-weight: 800;
  line-height: 1;
  color: var(--scb-accent);
  opacity: .18;              /* 纯装饰；CSS 生成内容不在 DOM，无需 aria-hidden */
  pointer-events: none;
}
.scb-process__title {
  margin: 0 0 var(--scb-s-8);
  font-size: var(--scb-fs-16);
  line-height: var(--scb-lh-card);
  font-weight: 700;
  color: var(--scb-ink);
}
.scb-process__desc {
  margin: 0;
  font-size: var(--scb-fs-14);
  line-height: var(--scb-lh-meta);
  color: var(--scb-ink-soft);
}


/* =============================================================================
 * 13. 组件 09 · faq-accordion（原生 details / summary，零 JS）
 *     旧：.scb-case-faq .item > .q / .a  和  .scb-faq .item > .q / .a
 *         （6 个静态 div，无展开控件、无标题语义）
 * ========================================================================== */

.scb-faq { display: grid; gap: var(--scb-s-8); }

.scb-faq__item {
  background: var(--scb-surface);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-md);
  overflow: hidden;
}
.scb-faq__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--scb-s-16);
  min-height: var(--scb-hit);
  padding: var(--scb-s-16);
  cursor: pointer;
  list-style: none;          /* 去掉默认三角，用自绘 +/− */
}
.scb-faq__summary::-webkit-details-marker { display: none; }
.scb-faq__summary::marker { content: ""; }
.scb-faq__summary:hover { background: var(--scb-bg-soft); }

.scb-faq__q {
  margin: 0;
  font-size: var(--scb-fs-15);
  line-height: var(--scb-lh-card);
  font-weight: 700;
  color: var(--scb-ink);
}
/* 展开指示器：+ / −，形状本身变化，不只靠颜色 */
.scb-faq__icon {
  flex: 0 0 auto;
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}
.scb-faq__icon::before,
.scb-faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--scb-accent);
  transform: translate(-50%, -50%);
  transition: opacity .18s ease, transform .18s ease;
}
.scb-faq__icon::before { width: 14px; height: 2px; }
.scb-faq__icon::after  { width: 2px;  height: 14px; }
.scb-faq__item[open] .scb-faq__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

.scb-faq__a {
  padding: 0 var(--scb-s-16) var(--scb-s-16);
  font-size: var(--scb-fs-14);
  line-height: var(--scb-lh-body);
  color: var(--scb-ink-soft);
}
.scb-faq__a > :first-child { margin-top: 0; }
.scb-faq__a > :last-child  { margin-bottom: 0; }


/* =============================================================================
 * 14. 组件 11 · related-card + 网格
 *     旧：.scb-rel .card / .card img(height:180px) / .card .b / .card h3 / .card .m
 *         旧版 .scb-related / .scb-rel-card / .scb-rel-kw / .scb-rel-model 一并作废
 *
 *     栅格（用户线上回归后拍板 v2）
 *       <768      3 列 × 2 行 = 6 卡   gap 8（窄卡紧凑调校：卡内 padding 12 / 标题 14px）
 *       768–1023  4 列 × 2 行 = 8 卡   gap 16
 *       ≥1024     4 列 × 2 行 = 8 卡   gap 20，容器 ≤1080 居中
 *     超出的卡一律 display:none（移出可访问性树与 Tab 顺序），禁止 opacity/visibility
 *     PHP 输出上限 8；第 9 张起为兜底隐藏（视口显隐由 CSS 断点负责）
 * ========================================================================== */

.scb-related__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--scb-s-8) var(--scb-s-16);
  margin: 0 0 var(--scb-s-16);
  padding-bottom: var(--scb-s-8);
  border-bottom: 1px solid var(--scb-line);
}
.scb-related__head .scb-section__title {
  margin: 0;
  padding: 0;
  border: 0;
}
.scb-related__all {
  font-size: var(--scb-fs-14);
  font-weight: 600;
  color: var(--scb-accent-ink);
  text-decoration: none;
  white-space: nowrap;
}
.scb-related__all:hover { text-decoration: underline; }

.scb-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--scb-s-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 网格项统一 flex，保证卡片等高铺满行 */
.scb-related__item { display: flex; }
/* <768：3 列 × 2 行 = 6 卡；第 7 张起真隐藏（移出可访问性树与 Tab 顺序） */
.scb-related__item:nth-child(n + 7) { display: none; }

/* ---- 卡片本体：整卡单个 <a>，卡内不嵌套第二链接 -------------------------- */
.scb-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  background: var(--scb-surface);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.scb-card:hover {
  border-color: var(--scb-accent);
  box-shadow: var(--scb-shadow-2);
  transform: translateY(-3px);
}
.scb-card:focus-visible {
  outline: var(--scb-focus-width) solid var(--scb-accent);
  outline-offset: var(--scb-focus-offset);
}
.scb-card__media {
  width: 100%;
  aspect-ratio: 4 / 3;      /* 统一 4:3，与旧版 height:180px 冲突已解除 */
  background: var(--scb-bg-soft);
}
.scb-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scb-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--scb-s-4);
  padding: var(--scb-s-12);   /* <768 3 列窄卡：紧凑内边距（≥768 恢复 16） */
}
.scb-card__title {
  margin: 0;
  font-size: var(--scb-fs-14);   /* <768 3 列窄卡：减一号（≥768 恢复 15） */
  font-weight: 700;
  line-height: var(--scb-lh-card);
  color: var(--scb-ink);
  /* 2 行视觉截断，完整文本保留在 DOM */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 长/短标题卡 meta 基线对齐：预留满 2 行高度（2 × 1.4em = 2.8em） */
  min-height: 2.8em;
}
.scb-card__meta {
  margin: 0;
  font-size: var(--scb-fs-13);
  line-height: var(--scb-lh-card);
  color: var(--scb-ink-mute);   /* ≥4.5:1 */
  /* 3 列窄卡兜底：单条 meta 最多 2 行，防长分类词撑破卡片（完整文本留在 DOM） */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* =============================================================================
 * 15. 组件 · closing-cta（页尾收尾转化条，锚点回 hero 表单）
 *     旧：无（页面看完直接结束）
 * ========================================================================== */

.scb-closing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scb-s-16);
  padding: var(--scb-s-24);
  background: var(--scb-accent-soft);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-lg);
}
.scb-closing__title {
  margin: 0;
  font-size: var(--scb-fs-19);
  line-height: var(--scb-lh-head);
  font-weight: 700;
  color: var(--scb-ink);
}
.scb-closing__desc {
  margin: 0;
  font-size: var(--scb-fs-15);
  line-height: var(--scb-lh-meta);
  color: var(--scb-ink-soft);
  max-width: 60ch;
}


/* =============================================================================
 * 16. 组件 12 · sticky-cta-bar（仅 <768）
 *     旧：无
 * ========================================================================== */

.scb-stickycta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--scb-z-sticky);   /* 40 < Blocksy header 50，不遮挡 header */
  display: flex;
  align-items: center;
  gap: var(--scb-s-12);
  padding: var(--scb-s-12) var(--scb-s-16);
  background: var(--scb-surface);
  border-top: 1px solid var(--scb-line);
  box-shadow: var(--scb-shadow-2);
  padding-bottom: calc(var(--scb-s-12) + env(safe-area-inset-bottom, 0px));
}
.scb-stickycta__text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--scb-fs-13);
  line-height: var(--scb-lh-card);
  font-weight: 600;
  color: var(--scb-ink-soft);
}
.scb-stickycta__btn { flex: 0 0 auto; }

/* 给页面预留底部空间，粘性条不遮末行内容（移动粘性条实测 95px → 留 100px） */
.scb-page--sticky { padding-bottom: 100px; }


/* =============================================================================
 * 17. HERO 布局
 *     旧：.scb-case-hero / .scb-hero（880 断点切单列）
 * ========================================================================== */

.scb-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--scb-s-24);
  align-items: stretch;              /* 两栏等高（用户拍板）：信息栏与图集同高 */
}
.scb-hero__info {
  min-width: 0;
  display: flex;                     /* 信息栏内 flex 纵向排布，询盘卡吃掉剩余高度 */
  flex-direction: column;
}
.scb-hero__info .scb-inquiry { flex: 1 1 auto; }
.scb-hero__title {
  margin: 0 0 var(--scb-s-12);
  font-size: var(--scb-fs-h1-m);
  line-height: var(--scb-lh-tight);
  font-weight: 700;
  color: var(--scb-ink);
  overflow-wrap: anywhere;
}


/* =============================================================================
 * 18. 断点 A：≥768（平板）
 * ========================================================================== */

@media (min-width: 768px) {
  :root { --scb-section-gap: var(--scb-s-64); }

  .scb-section__title  { font-size: var(--scb-fs-22); margin-bottom: var(--scb-s-24); }
  .scb-inquiry__title  { font-size: var(--scb-fs-22); }
  .scb-hero__title     { font-size: var(--scb-fs-30); }
  .scb-closing__title  { font-size: var(--scb-fs-22); }

  /* 表单两列（Name/Country、Email/Phone） */
  .scb-field__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scb-inquiry .ff-t-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--scb-s-16); }
  .scb-inquiry .ff-t-cell { flex-basis: auto !important; min-width: 0; }

  /* quick-facts 4 列 */
  .scb-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--scb-s-16) var(--scb-s-24); }

  /* Specifications 双列表格，key 列 42% */
  .scb-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scb-spec__row { flex-direction: row; align-items: baseline; gap: var(--scb-s-16); padding: var(--scb-s-16); }
  .scb-spec__key { flex: 0 0 42%; }
  .scb-spec__val { flex: 1 1 auto; min-width: 0; }
  .scb-spec__row:nth-child(odd) { border-right: 1px solid var(--scb-line); }
  /* 双列首行右格也去掉顶线：否则 border-top 会在表格右上多一条短线 */
  .scb-spec__row:nth-child(2) { border-top: 0; }

  /* 卖点 / 流程 / related */
  .scb-points  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 富文本路径：顶层 <ul> 在 ≥768 升 4 列（与卡片 ≥1024 的 4 列观感一致） */
  .scb-points > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .scb-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* related：≥768 起 4 列，显示 8 张（768–1023 与 ≥1024 同为 4 列） */
  .scb-related__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--scb-s-16); }
  .scb-related__item:nth-child(n + 7) { display: flex; }   /* 放行第 7、8 张 */
  .scb-related__item:nth-child(n + 9) { display: none; }   /* 第 9 张起兜底隐藏（PHP 上限 8） */
  /* 3 列窄卡的紧凑调校在 ≥768 恢复常态 */
  .scb-card__body  { padding: var(--scb-s-16); }
  .scb-card__title { font-size: var(--scb-fs-15); }

  .scb-closing { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--scb-s-24); padding: var(--scb-s-24) var(--scb-s-32); }
  .scb-closing__body { min-width: 0; }

  /* 粘性 CTA 仅移动端 */
  .scb-stickycta { display: none; }
  .scb-page--sticky { padding-bottom: 0; }

  /* 缩略图行恢复换行（桌面不再横向滚）—— hero 图集 */
  .scb-gallery__thumbs { flex-wrap: wrap; overflow-x: visible; }
}


/* =============================================================================
 * 19. 断点 B：≥1024（桌面）
 * ========================================================================== */

@media (min-width: 1024px) {
  /* HERO 两栏：图集 1.1fr / 信息栏 1fr */
  .scb-hero { grid-template-columns: 1.1fr 1fr; gap: 40px; }

  /* 卖点 4 列 / 流程 3 列 × 2 行 */
  .scb-points  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .scb-process { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* related：4 列 × 2 行 = 8 卡，容器限宽居中（显隐规则在 768 断点已处理） */
  .scb-related__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    max-width: 1080px;
    margin-inline: auto;
  }
}


/* =============================================================================
 * 20. prefers-reduced-motion —— 关闭所有 transform / transition
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .scb-page *,
  .scb-page *::before,
  .scb-page *::after,
  .scb-lightbox *,
  .scb-stickycta * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .scb-card:hover { transform: none !important; }
  .scb-faq__item[open] .scb-faq__icon::after { transform: translate(-50%, -50%) !important; }
  .scb-gallery__thumbs { scroll-behavior: auto; }
}


/* =============================================================================
 * 21. forced-colors（Windows 高对比模式）—— 选中态与焦点环不能消失
 * ========================================================================== */

@media (forced-colors: active) {
  .scb-gallery__thumb[aria-pressed="true"] { border-color: Highlight; }
  .scb-card:hover { outline: 1px solid Highlight; }
  :where(a, button, summary, input, textarea):focus-visible { outline: 2px solid Highlight; }
}


/* =============================================================================
 * 22. 打印
 * ========================================================================== */

@media print {
  .scb-stickycta,
  .scb-gallery__zoom,
  .scb-lightbox { display: none !important; }
  .scb-faq__a { display: block !important; }
}

/* ---- 23.1 Home 双网格修饰类（components-v2.md §2.3）----------------------- */
/* <768 2 列 × 3 行 → ≥768 3 列 × 2 行 → ≥1024 限宽 1080 居中；恰好 6 卡无隐藏问题 */
.scb-grid--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 768px) {
  .scb-grid--six { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--scb-s-16); }
}
@media (min-width: 1024px) {
  /* §19 的 .scb-related__grid 会在 ≥1024 切 4 列，--six 必须显式钉回 3 列 */
  .scb-grid--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    max-width: 1080px;
    margin-inline: auto;
  }
}


/* ---- 23.2 scb-stats 数字卡条（components-v2.md §3）------------------------- */
.scb-stats__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--scb-s-16);
  margin: 0;
  padding: 0;
}
.scb-stats__item {
  margin: 0;
  padding-top: var(--scb-s-12);
  border-top: 1px solid var(--scb-line);   /* 细分隔线，无卡片 */
  min-width: 0;
}
.scb-stats__value {
  margin: 0 0 var(--scb-s-4);
  font-size: var(--scb-fs-30);              /* 大号数字，≥3:1 大文本达标 */
  font-weight: 800;
  line-height: var(--scb-lh-tight);
  color: var(--scb-accent);
  overflow-wrap: anywhere;
}
.scb-stats__label {
  margin: 0;
  font-size: var(--scb-fs-13);
  font-weight: 600;
  line-height: var(--scb-lh-card);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--scb-ink-mute);               /* ≥4.5:1 */
}

@media (min-width: 768px) {
  .scb-stats__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--scb-s-24); }
}
@media (min-width: 1024px) {
  .scb-stats__list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--scb-s-24); }
}


/* ---- 23.3 scb-contact-cards NAP 联系卡（components-v2.md §4）--------------- */
.scb-contact-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--scb-s-16);
  margin: 0;
  padding: 0;
  list-style: none;
}
.scb-contact-card {
  margin: 0;
  padding: var(--scb-s-24);
  background: var(--scb-surface);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-md);
  min-width: 0;                              /* 长地址防撑破 */
  overflow-wrap: anywhere;
  /* 地址/营业时间卡非链接 → 无 hover 位移（继承 scb-points 原则） */
}
.scb-contact-card__title {
  margin: 0 0 var(--scb-s-8);
  font-size: var(--scb-fs-16);
  font-weight: 700;
  line-height: var(--scb-lh-card);
  color: var(--scb-ink);
}
.scb-contact-card__value {
  margin: 0 0 var(--scb-s-4);
  font-size: var(--scb-fs-15);
  line-height: var(--scb-lh-meta);
  color: var(--scb-ink-soft);
}
.scb-contact-card__value a {
  display: inline-flex;
  align-items: center;
  min-height: var(--scb-hit);                /* 44px 触控下限 */
  color: var(--scb-accent-ink);              /* ≥4.5:1 */
  text-decoration: none;
}
.scb-contact-card__value a:hover { text-decoration: underline; }
.scb-contact-card__hint {
  margin: 0;
  font-size: var(--scb-fs-13);
  line-height: var(--scb-lh-card);
  color: var(--scb-ink-mute);
}

@media (min-width: 768px) {
  .scb-contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .scb-contact-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ---- 23.4 scb-badges 信任徽章条（components-v2.md §5）---------------------- */
.scb-badges__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--scb-s-24);
  margin: 0;
  padding: 0;
  list-style: none;
}
.scb-badges__item { margin: 0; }
.scb-badges__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-md);
}
.scb-badges__chip {
  margin: 0;
  padding: var(--scb-s-8) var(--scb-s-16);
  border-radius: var(--scb-r-sm);
  background: var(--scb-accent-soft);
  color: var(--scb-accent-ink);             /* ≥4.5:1 */
  font-size: var(--scb-fs-15);
  font-weight: 700;
}


/* ---- 23.5 scb-map 位置区块（components-v2.md §6）--------------------------- */
.scb-map__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--scb-s-24);
}
.scb-map__figure {
  aspect-ratio: 21 / 9;
  background: var(--scb-bg-soft);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-md);
  overflow: hidden;
}
.scb-map__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 2026-08-04 用户变更：允许 Google Maps iframe（懒加载，不拖 LCP） */
.scb-map__figure--iframe {
  aspect-ratio: 16 / 9;   /* 地图观感更合适；specificity 高于基础 .scb-map__figure */
}
.scb-map__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.scb-map__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--scb-s-16);
  border: 1px dashed var(--scb-line);       /* 方位占位：虚线面板 */
  border-radius: var(--scb-r-md);
  text-align: center;
}
.scb-map__placeholder-text {
  margin: 0;
  font-size: var(--scb-fs-14);
  line-height: var(--scb-lh-meta);
  color: var(--scb-ink-mute);
}
.scb-map__card {
  padding: var(--scb-s-24);
  background: var(--scb-surface);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-lg);
}
.scb-map__card-title {
  margin: 0 0 var(--scb-s-16);
  font-size: var(--scb-fs-19);
  font-weight: 700;
  line-height: var(--scb-lh-head);
  color: var(--scb-ink);
}
.scb-map__rows { margin: 0; }
.scb-map__row {
  display: flex;
  flex-direction: column;
  gap: var(--scb-s-4);
  padding: var(--scb-s-8) 0;
  border-top: 1px solid var(--scb-line);
  min-width: 0;
}
.scb-map__row dt {
  margin: 0;
  font-size: var(--scb-fs-13);
  font-weight: 600;
  line-height: var(--scb-lh-card);
  color: var(--scb-ink-mute);
}
.scb-map__row dd {
  margin: 0;
  font-size: var(--scb-fs-15);
  line-height: var(--scb-lh-meta);
  color: var(--scb-ink);
  overflow-wrap: anywhere;
}
.scb-map__row a {
  color: var(--scb-accent-ink);
  text-decoration: none;
}
.scb-map__row a:hover { text-decoration: underline; }
.scb-map__note {
  margin: var(--scb-s-16) 0 0;
  font-size: var(--scb-fs-13);
  line-height: var(--scb-lh-card);
  color: var(--scb-ink-mute);
}

@media (min-width: 1024px) {
  .scb-map__grid { grid-template-columns: 1fr 1.2fr; }
  .scb-map__figure { aspect-ratio: 4 / 3; }
}


/* ---- 23.6 补齐：closing 按钮行 / hero 按钮行 / 页面 H1 / About 两栏 ---------- */
/* §15 的 .scb-closing 已含布局，这里补按钮组（≥768 由 §18 切横向） */
.scb-closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--scb-s-12);
}

/* scb_render_hero 输出的 CTA 按钮行（既有 hero 区块缺样式，补齐） */
.scb-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--scb-s-12);
  margin-top: var(--scb-s-16);
}

/* 无 hero 区块的页面（About / Contact）唯一 H1 */
.scb-page-header { margin: 0 0 var(--scb-s-24); }
.scb-page-header__title {
  margin: 0;
  font-size: var(--scb-fs-h1-m);
  line-height: var(--scb-lh-tight);
  font-weight: 700;
  color: var(--scb-ink);
  overflow-wrap: anywhere;
}

/* About 品牌故事：<1024 单列堆叠；≥1024 左文右图 */
.scb-about-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--scb-s-24);
  align-items: start;
}
.scb-about-story__figure { margin: 0; }
.scb-about-story__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--scb-r-md);
  background: var(--scb-bg-soft);
}

/* 询盘容器 Fluent 未安装时的 NAP 兜底文案 */
.scb-inquiry__fallback {
  margin: 0;
  padding: var(--scb-s-16);
  font-size: var(--scb-fs-14);
  line-height: var(--scb-lh-meta);
  color: var(--scb-ink-soft);
  background: var(--scb-surface);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-md);
}
.scb-inquiry__fallback a { color: var(--scb-accent-ink); }

/* 实拍画廊空值占位（区块永不空载） */
.scb-gallery__empty {
  padding: var(--scb-s-24);
  background: var(--scb-bg-soft);
  border: 1px dashed var(--scb-line);
  border-radius: var(--scb-r-md);
  font-size: var(--scb-fs-14);
  line-height: var(--scb-lh-meta);
  color: var(--scb-ink-soft);
}
.scb-gallery__empty a { color: var(--scb-accent-ink); }


/* ---- 23.7 补齐：scb-hero-cover（既有 Home #1 区块缺样式）------------------- */
/* 全宽 cover 图 + 底部加深层覆盖文字：白字在 .72 深色层上 ≥4.5:1 */
.scb-hero-cover {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;                    /* 文字锚在底部深色层 */
  min-height: 460px;
  background: var(--scb-bg-soft);
}
.scb-hero-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(16, 20, 24, .55) 0%, rgba(16, 20, 24, .72) 100%);
}
.scb-hero-cover__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scb-hero-cover__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--scb-s-24);
}
.scb-hero-cover__title {
  margin: 0 0 var(--scb-s-12);
  font-size: var(--scb-fs-h1-m);
  line-height: var(--scb-lh-tight);
  font-weight: 700;
  color: #fff;                              /* 加深层保证 ≥4.5:1 */
  overflow-wrap: anywhere;
  max-width: 60ch;
}
.scb-hero-cover__lead {
  margin: 0 0 var(--scb-s-16);
  font-size: var(--scb-fs-15);
  line-height: var(--scb-lh-body);
  color: rgba(255, 255, 255, .92);
  max-width: 62ch;
}
.scb-hero-cover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--scb-s-12);
}

@media (min-width: 1024px) {
  .scb-hero-cover { min-height: 540px; }
  .scb-hero-cover__inner { padding: var(--scb-s-48); }
  .scb-hero-cover__title { font-size: var(--scb-fs-30); }
  .scb-about-story__grid { grid-template-columns: 1fr 1fr; }
  .scb-page-header__title { font-size: var(--scb-fs-30); }
}


/* ---- 23.8 prefers-reduced-motion / forced-colors 随新组件走 ---------------- */
@media (prefers-reduced-motion: reduce) {
  .scb-hero-cover::before { transition: none; }
}

@media (forced-colors: active) {
  .scb-map__placeholder { border: 2px dashed CanvasText; }
  .scb-gallery__empty { border: 1px dashed CanvasText; }
}
/* ---- 23.6 scb-contact-section 联系模块合并区块（2026-08-04 用户决策） --- */
.scb-contact-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--scb-s-24);
  margin-bottom: var(--scb-s-24);
}
.scb-contact-section__subtitle {
  margin: 0 0 var(--scb-s-12);
  font-size: var(--scb-fs-20);
  line-height: var(--scb-lh-card);
  font-weight: 700;
  color: var(--scb-ink);
}
.scb-contact-section__map .scb-map__figure,
.scb-contact-section__map .scb-map__figure--iframe {
  aspect-ratio: 4 / 3;     /* contact-section 内部地图用 4:3（比单 map 区更方） */
  background: var(--scb-bg-soft);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-md);
  overflow: hidden;
  margin: 0;
}
.scb-contact-section__form {
  /* scb-inquiry 内联样式（form 来自 Fluent Forms 自带样式） */
}
.scb-contact-section__promise {
  margin: 0 0 var(--scb-s-16);
  font-size: var(--scb-fs-15);
  line-height: var(--scb-lh-meta);
  color: var(--scb-ink-soft);
}
.scb-contact-section__nap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--scb-s-16);
  margin: 0;
  padding: 0;
  list-style: none;
}
.scb-contact-section__nap-item {
  padding: var(--scb-s-20);
  background: var(--scb-surface);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.scb-contact-section__nap-label {
  font-size: var(--scb-fs-13);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--scb-ink-mute);
}
.scb-contact-section__nap-value {
  font-size: var(--scb-fs-16);
  font-weight: 600;
  color: var(--scb-ink);
  text-decoration: none;
  min-height: var(--scb-hit);
  display: inline-flex;
  align-items: center;
}
.scb-contact-section__nap-value[href]:hover {
  color: var(--scb-accent-ink);
  text-decoration: underline;
}
.scb-contact-section__nap-hint {
  font-size: var(--scb-fs-13);
  color: var(--scb-ink-mute);
}
/* ≥768：grid 改 2 栏（map+form）+ NAP 4 栏 */
@media (min-width: 768px) {
  .scb-contact-section__grid {
    grid-template-columns: 1fr 1fr;
  }
  .scb-contact-section__nap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* ≥1024：NAP 4 栏 */
@media (min-width: 1024px) {
  .scb-contact-section__nap {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.scb-map__card {
  padding: var(--scb-s-24);
  background: var(--scb-surface);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-lg);
}
.scb-map__card-title {
  margin: 0 0 var(--scb-s-16);
  font-size: var(--scb-fs-19);
  font-weight: 700;
  line-height: var(--scb-lh-head);
  color: var(--scb-ink);
}
.scb-map__rows { margin: 0; }
.scb-map__row {
  display: flex;
  flex-direction: column;
  gap: var(--scb-s-4);
  padding: var(--scb-s-8) 0;
  border-top: 1px solid var(--scb-line);
  min-width: 0;
}
.scb-map__row dt {
  margin: 0;
  font-size: var(--scb-fs-13);
  font-weight: 600;
  line-height: var(--scb-lh-card);
  color: var(--scb-ink-mute);
}
.scb-map__row dd {
  margin: 0;
  font-size: var(--scb-fs-15);
  line-height: var(--scb-lh-meta);
  color: var(--scb-ink);
  overflow-wrap: anywhere;
}
.scb-map__row a {
  color: var(--scb-accent-ink);
  text-decoration: none;
}
.scb-map__row a:hover { text-decoration: underline; }
.scb-map__note {
  margin: var(--scb-s-16) 0 0;
  font-size: var(--scb-fs-13);
  line-height: var(--scb-lh-card);
  color: var(--scb-ink-mute);
}

@media (min-width: 1024px) {
  .scb-map__grid { grid-template-columns: 1fr 1.2fr; }
  .scb-map__figure { aspect-ratio: 4 / 3; }
}


/* ---- 23.6 补齐：closing 按钮行 / hero 按钮行 / 页面 H1 / About 两栏 ---------- */
/* §15 的 .scb-closing 已含布局，这里补按钮组（≥768 由 §18 切横向） */
.scb-closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--scb-s-12);
}

/* scb_render_hero 输出的 CTA 按钮行（既有 hero 区块缺样式，补齐） */
.scb-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--scb-s-12);
  margin-top: var(--scb-s-16);
}

/* 无 hero 区块的页面（About / Contact）唯一 H1 */
.scb-page-header { margin: 0 0 var(--scb-s-24); }
.scb-page-header__title {
  margin: 0;
  font-size: var(--scb-fs-h1-m);
  line-height: var(--scb-lh-tight);
  font-weight: 700;
  color: var(--scb-ink);
  overflow-wrap: anywhere;
}

/* About 品牌故事：<1024 单列堆叠；≥1024 左文右图 */
.scb-about-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--scb-s-24);
  align-items: start;
}
.scb-about-story__figure { margin: 0; }
.scb-about-story__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--scb-r-md);
  background: var(--scb-bg-soft);
}

/* 询盘容器 Fluent 未安装时的 NAP 兜底文案 */
.scb-inquiry__fallback {
  margin: 0;
  padding: var(--scb-s-16);
  font-size: var(--scb-fs-14);
  line-height: var(--scb-lh-meta);
  color: var(--scb-ink-soft);
  background: var(--scb-surface);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-md);
}
.scb-inquiry__fallback a { color: var(--scb-accent-ink); }

/* 实拍画廊空值占位（区块永不空载） */
.scb-gallery__empty {
  padding: var(--scb-s-24);
  background: var(--scb-bg-soft);
  border: 1px dashed var(--scb-line);
  border-radius: var(--scb-r-md);
  font-size: var(--scb-fs-14);
  line-height: var(--scb-lh-meta);
  color: var(--scb-ink-soft);
}
.scb-gallery__empty a { color: var(--scb-accent-ink); }


/* ---- 23.7 补齐：scb-hero-cover（既有 Home #1 区块缺样式）------------------- */
/* 全宽 cover 图 + 底部加深层覆盖文字：白字在 .72 深色层上 ≥4.5:1 */
.scb-hero-cover {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;                    /* 文字锚在底部深色层 */
  min-height: 460px;
  background: var(--scb-bg-soft);
}
.scb-hero-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(16, 20, 24, .55) 0%, rgba(16, 20, 24, .72) 100%);
}
.scb-hero-cover__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scb-hero-cover__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--scb-s-24);
}
.scb-hero-cover__title {
  margin: 0 0 var(--scb-s-12);
  font-size: var(--scb-fs-h1-m);
  line-height: var(--scb-lh-tight);
  font-weight: 700;
  color: #fff;                              /* 加深层保证 ≥4.5:1 */
  overflow-wrap: anywhere;
  max-width: 60ch;
}
.scb-hero-cover__lead {
  margin: 0 0 var(--scb-s-16);
  font-size: var(--scb-fs-15);
  line-height: var(--scb-lh-body);
  color: rgba(255, 255, 255, .92);
  max-width: 62ch;
}
.scb-hero-cover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--scb-s-12);
}

@media (min-width: 1024px) {
  .scb-hero-cover { min-height: 540px; }
  .scb-hero-cover__inner { padding: var(--scb-s-48); }
  .scb-hero-cover__title { font-size: var(--scb-fs-30); }
  .scb-about-story__grid { grid-template-columns: 1fr 1fr; }
  .scb-page-header__title { font-size: var(--scb-fs-30); }
}


/* ---- 23.8 prefers-reduced-motion / forced-colors 随新组件走 ---------------- */
@media (prefers-reduced-motion: reduce) {
  .scb-hero-cover::before { transition: none; }
}

@media (forced-colors: active) {
  .scb-map__placeholder { border: 2px dashed CanvasText; }
  .scb-gallery__empty { border: 1px dashed CanvasText; }
}
/* ---- 23.7 scb-hero__points 压进 hero 的卖点卡（2026-08-04 C 方案） --- */
.scb-hero__points {
  margin-top: var(--scb-s-24);
  padding: var(--scb-s-20);
  background: var(--scb-bg-soft);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-lg);
}
.scb-hero__points .scb-points {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--scb-s-16);
  margin: 0;
  padding: 0;
  list-style: none;
}
.scb-hero__points .scb-points__item {
  padding: var(--scb-s-16);
  background: var(--scb-surface);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-md);
}
.scb-hero__points .scb-points__title {
  margin: 0 0 4px;
  font-size: var(--scb-fs-16);
  line-height: var(--scb-lh-card);
  font-weight: 700;
  color: var(--scb-ink);
}
.scb-hero__points .scb-points__desc {
  margin: 0;
  font-size: var(--scb-fs-14);
  line-height: var(--scb-lh-meta);
  color: var(--scb-ink-soft);
}
@media (min-width: 768px) {
  .scb-hero__points .scb-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .scb-hero__points .scb-points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ---- 23.9 Home 品类网格 1:1 卡图（2026-08-04 用户提供 1:1 实拍图） --- */
/* 仅 Home 产品品类网格（#scb-sec-products）改 1:1；案例网格/Related 保持 4:3 不变。
   注意：case-grid 也用 .scb-grid--six，必须用 section id 精准选择，不能只用类名 */
#scb-sec-products .scb-card__media {
  aspect-ratio: 1 / 1;
}
#scb-sec-products .scb-card__img {
  object-fit: cover;
}


/* -----------------------------------------------------------------------------
 * [P2-2-B / 2026-08-06] 这个位置原有一段 124 行 / 约 5.1KB 的「产品分类页」样式
 * （旧版）。它与本文件最末尾那段同名章节完全重复，且被后者逐条覆盖 —— 按 CSS
 * 「后来者胜」规则，浏览器实际生效的一直是末尾那份。本段属于僵尸代码，已删除。
 * 视觉零变化。回滚：用 assets/css/scb-design-system.css.bak-p2-2-b 覆盖回来。
 * ========================================================================== */

/* ---- 23.1 Home 双网格修饰类（components-v2.md §2.3）----------------------- */
/* <768 2 列 × 3 行 → ≥768 3 列 × 2 行 → ≥1024 限宽 1080 居中；恰好 6 卡无隐藏问题 */
.scb-grid--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 768px) {
  .scb-grid--six { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--scb-s-16); }
}
@media (min-width: 1024px) {
  /* §19 的 .scb-related__grid 会在 ≥1024 切 4 列，--six 必须显式钉回 3 列 */
  .scb-grid--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    max-width: 1080px;
    margin-inline: auto;
  }
}


/* ---- 23.2 scb-stats 数字卡条（components-v2.md §3）------------------------- */
.scb-stats__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--scb-s-16);
  margin: 0;
  padding: 0;
}
.scb-stats__item {
  margin: 0;
  padding-top: var(--scb-s-12);
  border-top: 1px solid var(--scb-line);   /* 细分隔线，无卡片 */
  min-width: 0;
}
.scb-stats__value {
  margin: 0 0 var(--scb-s-4);
  font-size: var(--scb-fs-30);              /* 大号数字，≥3:1 大文本达标 */
  font-weight: 800;
  line-height: var(--scb-lh-tight);
  color: var(--scb-accent);
  overflow-wrap: anywhere;
}
.scb-stats__label {
  margin: 0;
  font-size: var(--scb-fs-13);
  font-weight: 600;
  line-height: var(--scb-lh-card);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--scb-ink-mute);               /* ≥4.5:1 */
}

@media (min-width: 768px) {
  .scb-stats__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--scb-s-24); }
}
@media (min-width: 1024px) {
  .scb-stats__list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--scb-s-24); }
}


/* ---- 23.3 scb-contact-cards NAP 联系卡（components-v2.md §4）--------------- */
.scb-contact-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--scb-s-16);
  margin: 0;
  padding: 0;
  list-style: none;
}
.scb-contact-card {
  margin: 0;
  padding: var(--scb-s-24);
  background: var(--scb-surface);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-md);
  min-width: 0;                              /* 长地址防撑破 */
  overflow-wrap: anywhere;
  /* 地址/营业时间卡非链接 → 无 hover 位移（继承 scb-points 原则） */
}
.scb-contact-card__title {
  margin: 0 0 var(--scb-s-8);
  font-size: var(--scb-fs-16);
  font-weight: 700;
  line-height: var(--scb-lh-card);
  color: var(--scb-ink);
}
.scb-contact-card__value {
  margin: 0 0 var(--scb-s-4);
  font-size: var(--scb-fs-15);
  line-height: var(--scb-lh-meta);
  color: var(--scb-ink-soft);
}
.scb-contact-card__value a {
  display: inline-flex;
  align-items: center;
  min-height: var(--scb-hit);                /* 44px 触控下限 */
  color: var(--scb-accent-ink);              /* ≥4.5:1 */
  text-decoration: none;
}
.scb-contact-card__value a:hover { text-decoration: underline; }
.scb-contact-card__hint {
  margin: 0;
  font-size: var(--scb-fs-13);
  line-height: var(--scb-lh-card);
  color: var(--scb-ink-mute);
}

@media (min-width: 768px) {
  .scb-contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .scb-contact-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ---- 23.4 scb-badges 信任徽章条（components-v2.md §5）---------------------- */
.scb-badges__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--scb-s-24);
  margin: 0;
  padding: 0;
  list-style: none;
}
.scb-badges__item { margin: 0; }
.scb-badges__img {
  display: block;
  max-height: 56px;
  width: auto;                              /* 保持原比例 */
}
.scb-badges__chip {
  margin: 0;
  padding: var(--scb-s-8) var(--scb-s-16);
  border-radius: var(--scb-r-sm);
  background: var(--scb-accent-soft);
  color: var(--scb-accent-ink);             /* ≥4.5:1 */
  font-size: var(--scb-fs-15);
  font-weight: 700;
}


/* ---- 23.5 scb-map 位置区块（components-v2.md §6）--------------------------- */
.scb-map__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--scb-s-24);
}
.scb-map__figure {
  aspect-ratio: 21 / 9;
  background: var(--scb-bg-soft);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-md);
  overflow: hidden;
}
.scb-map__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 2026-08-04 用户变更：允许 Google Maps iframe（懒加载，不拖 LCP） */
.scb-map__figure--iframe {
  aspect-ratio: 16 / 9;   /* 地图观感更合适；specificity 高于基础 .scb-map__figure */
}
.scb-map__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.scb-map__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--scb-s-16);
  border: 1px dashed var(--scb-line);       /* 方位占位：虚线面板 */
  border-radius: var(--scb-r-md);
  text-align: center;
}
.scb-map__placeholder-text {
  margin: 0;
  font-size: var(--scb-fs-14);
  line-height: var(--scb-lh-meta);
  color: var(--scb-ink-mute);
}

/* ---- 23.6 scb-contact-section 联系模块合并区块（2026-08-04 用户决策） --- */
.scb-contact-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--scb-s-24);
  margin-bottom: var(--scb-s-24);
}
.scb-contact-section__subtitle {
  margin: 0 0 var(--scb-s-12);
  font-size: var(--scb-fs-20);
  line-height: var(--scb-lh-card);
  font-weight: 700;
  color: var(--scb-ink);
}
.scb-contact-section__map .scb-map__figure,
.scb-contact-section__map .scb-map__figure--iframe {
  aspect-ratio: 4 / 3;     /* contact-section 内部地图用 4:3（比单 map 区更方） */
  background: var(--scb-bg-soft);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-md);
  overflow: hidden;
  margin: 0;
}
.scb-contact-section__form {
  /* scb-inquiry 内联样式（form 来自 Fluent Forms 自带样式） */
}
.scb-contact-section__promise {
  margin: 0 0 var(--scb-s-16);
  font-size: var(--scb-fs-15);
  line-height: var(--scb-lh-meta);
  color: var(--scb-ink-soft);
}
.scb-contact-section__nap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--scb-s-16);
  margin: 0;
  padding: 0;
  list-style: none;
}
.scb-contact-section__nap-item {
  padding: var(--scb-s-20);
  background: var(--scb-surface);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.scb-contact-section__nap-label {
  font-size: var(--scb-fs-13);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--scb-ink-mute);
}
.scb-contact-section__nap-value {
  font-size: var(--scb-fs-16);
  font-weight: 600;
  color: var(--scb-ink);
  text-decoration: none;
  min-height: var(--scb-hit);
  display: inline-flex;
  align-items: center;
}
.scb-contact-section__nap-value[href]:hover {
  color: var(--scb-accent-ink);
  text-decoration: underline;
}
.scb-contact-section__nap-hint {
  font-size: var(--scb-fs-13);
  color: var(--scb-ink-mute);
}
/* ≥768：grid 改 2 栏（map+form）+ NAP 4 栏 */
@media (min-width: 768px) {
  .scb-contact-section__grid {
    grid-template-columns: 1fr 1fr;
  }
  .scb-contact-section__nap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* ≥1024：NAP 4 栏 */
@media (min-width: 1024px) {
  .scb-contact-section__nap {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.scb-map__card {
  padding: var(--scb-s-24);
  background: var(--scb-surface);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-lg);
}
.scb-map__card-title {
  margin: 0 0 var(--scb-s-16);
  font-size: var(--scb-fs-19);
  font-weight: 700;
  line-height: var(--scb-lh-head);
  color: var(--scb-ink);
}
.scb-map__rows { margin: 0; }
.scb-map__row {
  display: flex;
  flex-direction: column;
  gap: var(--scb-s-4);
  padding: var(--scb-s-8) 0;
  border-top: 1px solid var(--scb-line);
  min-width: 0;
}
.scb-map__row dt {
  margin: 0;
  font-size: var(--scb-fs-13);
  font-weight: 600;
  line-height: var(--scb-lh-card);
  color: var(--scb-ink-mute);
}
.scb-map__row dd {
  margin: 0;
  font-size: var(--scb-fs-15);
  line-height: var(--scb-lh-meta);
  color: var(--scb-ink);
  overflow-wrap: anywhere;
}
.scb-map__row a {
  color: var(--scb-accent-ink);
  text-decoration: none;
}
.scb-map__row a:hover { text-decoration: underline; }
.scb-map__note {
  margin: var(--scb-s-16) 0 0;
  font-size: var(--scb-fs-13);
  line-height: var(--scb-lh-card);
  color: var(--scb-ink-mute);
}

@media (min-width: 1024px) {
  .scb-map__grid { grid-template-columns: 1fr 1.2fr; }
  .scb-map__figure { aspect-ratio: 4 / 3; }
}


/* ---- 23.6 补齐：closing 按钮行 / hero 按钮行 / 页面 H1 / About 两栏 ---------- */
/* §15 的 .scb-closing 已含布局，这里补按钮组（≥768 由 §18 切横向） */
.scb-closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--scb-s-12);
}

/* scb_render_hero 输出的 CTA 按钮行（既有 hero 区块缺样式，补齐） */
.scb-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--scb-s-12);
  margin-top: var(--scb-s-16);
}

/* 无 hero 区块的页面（About / Contact）唯一 H1 */
.scb-page-header { margin: 0 0 var(--scb-s-24); }
.scb-page-header__title {
  margin: 0;
  font-size: var(--scb-fs-h1-m);
  line-height: var(--scb-lh-tight);
  font-weight: 700;
  color: var(--scb-ink);
  overflow-wrap: anywhere;
}

/* About 品牌故事：<1024 单列堆叠；≥1024 左文右图 */
.scb-about-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--scb-s-24);
  align-items: start;
}
.scb-about-story__figure { margin: 0; }
.scb-about-story__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--scb-r-md);
  background: var(--scb-bg-soft);
}

/* 询盘容器 Fluent 未安装时的 NAP 兜底文案 */
.scb-inquiry__fallback {
  margin: 0;
  padding: var(--scb-s-16);
  font-size: var(--scb-fs-14);
  line-height: var(--scb-lh-meta);
  color: var(--scb-ink-soft);
  background: var(--scb-surface);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-md);
}
.scb-inquiry__fallback a { color: var(--scb-accent-ink); }

/* 实拍画廊空值占位（区块永不空载） */
.scb-gallery__empty {
  padding: var(--scb-s-24);
  background: var(--scb-bg-soft);
  border: 1px dashed var(--scb-line);
  border-radius: var(--scb-r-md);
  font-size: var(--scb-fs-14);
  line-height: var(--scb-lh-meta);
  color: var(--scb-ink-soft);
}
.scb-gallery__empty a { color: var(--scb-accent-ink); }


/* ---- 23.7 补齐：scb-hero-cover（既有 Home #1 区块缺样式）------------------- */
/* 全宽 cover 图 + 底部加深层覆盖文字：白字在 .72 深色层上 ≥4.5:1 */
.scb-hero-cover {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;                    /* 文字锚在底部深色层 */
  min-height: 460px;
  background: var(--scb-bg-soft);
}
.scb-hero-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(16, 20, 24, .55) 0%, rgba(16, 20, 24, .72) 100%);
}
.scb-hero-cover__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scb-hero-cover__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--scb-s-24);
}
.scb-hero-cover__title {
  margin: 0 0 var(--scb-s-12);
  font-size: var(--scb-fs-h1-m);
  line-height: var(--scb-lh-tight);
  font-weight: 700;
  color: #fff;                              /* 加深层保证 ≥4.5:1 */
  overflow-wrap: anywhere;
  max-width: 60ch;
}
.scb-hero-cover__lead {
  margin: 0 0 var(--scb-s-16);
  font-size: var(--scb-fs-15);
  line-height: var(--scb-lh-body);
  color: rgba(255, 255, 255, .92);
  max-width: 62ch;
}
.scb-hero-cover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--scb-s-12);
}

@media (min-width: 1024px) {
  .scb-hero-cover { min-height: 540px; }
  .scb-hero-cover__inner { padding: var(--scb-s-48); }
  .scb-hero-cover__title { font-size: var(--scb-fs-30); }
  .scb-about-story__grid { grid-template-columns: 1fr 1fr; }
  .scb-page-header__title { font-size: var(--scb-fs-30); }
}


/* ---- 23.8 prefers-reduced-motion / forced-colors 随新组件走 ---------------- */
@media (prefers-reduced-motion: reduce) {
  .scb-hero-cover::before { transition: none; }
}

@media (forced-colors: active) {
  .scb-map__placeholder { border: 2px dashed CanvasText; }
  .scb-gallery__empty { border: 1px dashed CanvasText; }
}

/* ---- 23.7 scb-hero__points 压进 hero 的卖点卡（2026-08-04 C 方案） --- */
.scb-hero__points {
  margin-top: var(--scb-s-24);
  padding: var(--scb-s-20);
  background: var(--scb-bg-soft);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-lg);
}
.scb-hero__points .scb-points {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--scb-s-16);
  margin: 0;
  padding: 0;
  list-style: none;
}
.scb-hero__points .scb-points__item {
  padding: var(--scb-s-16);
  background: var(--scb-surface);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-md);
}
.scb-hero__points .scb-points__title {
  margin: 0 0 4px;
  font-size: var(--scb-fs-16);
  line-height: var(--scb-lh-card);
  font-weight: 700;
  color: var(--scb-ink);
}
.scb-hero__points .scb-points__desc {
  margin: 0;
  font-size: var(--scb-fs-14);
  line-height: var(--scb-lh-meta);
  color: var(--scb-ink-soft);
}
@media (min-width: 768px) {
  .scb-hero__points .scb-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .scb-hero__points .scb-points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- 23.9 Home 品类网格 1:1 卡图（2026-08-04 用户提供 1:1 实拍图） --- */
/* 仅 Home 产品品类网格（#scb-sec-products）改 1:1；案例网格/Related 保持 4:3 不变。
   注意：case-grid 也用 .scb-grid--six，必须用 section id 精准选择，不能只用类名 */
#scb-sec-products .scb-card__media {
  aspect-ratio: 1 / 1;
}
#scb-sec-products .scb-card__img {
  object-fit: cover;
}


/* =============================================================================
 * 24. 新增 2026-08-05 —— 产品分类页（product-category）重设计（category-page-design.md §11）
 *     补齐：.scb-hero-cover--cat / .scb-prose--seo / .scb-cats* / .scb-product-grid /
 *           .scb-card--product .scb-card__media(1:1) / .scb-card__model /
 *           .scb-product-grid .scb-card__meta / .scb-product-grid__empty / 分页间距
 *     说明：复用 §23.7 .scb-hero-cover 基座 + §14 .scb-card 基座 + §15 .scb-closing 基座，
 *           本段只补修饰类与独立网格；类名与 category-page-design.md §7 骨架一一对应，不得改名。
 *     红线：只消费 --scb-* / Blocksy vars；断点仅 768 / 1024（mobile-first，min-width）；
 *           零 hex 品牌色、零 font-family 声明。
 * ========================================================================== */

/* ---- 24.1 页头 cover banner（复用 §23.7 .scb-hero-cover，加修饰类）-------- */
/* min-height 固定值 + 绝对定位图 → 无 CLS；H1/lead 字号继承 §23.7 */
.scb-hero-cover--cat { min-height: 240px; }
@media (min-width: 768px)  { .scb-hero-cover--cat { min-height: 340px; } }
@media (min-width: 1024px) { .scb-hero-cover--cat { min-height: 380px; } }

/* ---- 24.2 SEO 富文本（复用 .scb-prose；WYSIWYG 输出用 wp_kses_post）-------- */
.scb-prose--seo { max-width: 72ch; }

/* ---- 24.0 分类页内容容器（2026-08-05：全页区块与产品网格对齐，1200 居中）---- */
.scb-cat-wrap {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--scb-s-24);
}

/* ---- 24.3 品类切换 chips（筛选方案 A · 零 JS）----------------------------- */
.scb-cats {
  /* 2026-08-05：上下都有间距，移动端滑动条不再贴顶部文案 */
  margin: var(--scb-s-24) 0 var(--scb-s-24);
}
.scb-cats__list {
  display: flex;
  gap: var(--scb-s-8);
  margin: 0;
  padding: 0;
  padding-bottom: var(--scb-s-4);          /* 焦点环防裁切 */
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding: 0 var(--scb-s-4);
}
.scb-cats__item { flex: 0 0 auto; margin: 0; scroll-snap-align: start; }
.scb-cats__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--scb-hit);              /* 44px 触控下限 */
  padding: var(--scb-s-8) var(--scb-s-16);
  font-size: var(--scb-fs-14);
  font-weight: 600;
  line-height: 1.2;
  color: var(--scb-ink-soft);              /* ≥4.5:1 */
  text-decoration: none;
  background: var(--scb-surface);
  border: 1px solid var(--scb-line);
  border-radius: var(--scb-r-sm);
  white-space: nowrap;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.scb-cats__link:hover { border-color: var(--scb-accent); color: var(--scb-accent-ink); }
.scb-cats__link.is-current {
  /* 2026-08-05：突出显示——加粗边框 + 内发光 + 阴影 + 加粗文字 */
  color: var(--scb-accent-ink);            /* ≥4.5:1 */
  font-weight: 700;
  background: var(--scb-accent-soft);
  border-color: var(--scb-accent);
  border-width: 2px;
  box-shadow: 0 0 0 1px var(--scb-accent) inset, 0 2px 6px rgba(16, 20, 24, .12);
}
@media (min-width: 768px) {
  .scb-cats__list { flex-wrap: wrap; justify-content: center; overflow-x: visible; }
}

/* ---- 24.4 产品网格（独立网格，不复用 .scb-related__grid 的 n+7 隐藏）------- */
.scb-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--scb-s-12);
  margin: 0;
  padding: 0;
  list-style: none;
}
.scb-product-grid__item { display: flex; min-width: 0; }
@media (min-width: 768px) {
  .scb-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--scb-s-16); }
}
@media (min-width: 1024px) {
  .scb-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin-inline: auto;
  }
}

/* ---- 24.5 产品卡修饰 + 型号 chip ------------------------------------------- */
.scb-card--product .scb-card__media { aspect-ratio: 1 / 1; }
.scb-card__model {
  align-self: flex-start;
  padding: var(--scb-s-4) var(--scb-s-8);
  font-size: var(--scb-fs-13);
  font-weight: 700;
  line-height: 1.2;
  color: var(--scb-accent-ink);            /* ≥4.5:1 */
  background: var(--scb-accent-soft);
  border-radius: var(--scb-r-sm);
}
.scb-product-grid .scb-card__meta { color: var(--scb-ink-soft); }  /* 卖点行：覆盖默认 ink-mute → ink-soft */

/* ---- 24.6 空态（区块永不空载，但无空白）----------------------------------- */
.scb-product-grid__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scb-s-16);
  padding: var(--scb-s-24);
  background: var(--scb-bg-soft);
  border: 1px dashed var(--scb-line);
  border-radius: var(--scb-r-md);
  font-size: var(--scb-fs-14);
  color: var(--scb-ink-soft);
}
.scb-product-grid__empty p { margin: 0; }

/* ---- 24.7 分页（保留 Blocksy 默认观感，只加容器间距，不触碰 .page-numbers）-- */
.scb-product-grid__pagination { margin: var(--scb-s-32) 0 0; }

/* ---- 24.8 prefers-reduced-motion / forced-colors 随新组件走 ---------------- */
@media (prefers-reduced-motion: reduce) {
  .scb-cats__list { scroll-behavior: auto; }
}
@media (forced-colors: active) {
  .scb-cats__link.is-current { outline: 1px solid Highlight; }
  .scb-product-grid__empty { border: 2px dashed CanvasText; }
}