/* =============================================================================
 * scb-design-system-p3.css
 * -----------------------------------------------------------------------------
 * ShowcaseCabinet —— P3 设计系统（v3 规格落地）
 * 交付：承影 (design-to-code)   依据：05-P3-设计规格-v3.md §1.1 / §1.2 / §1.3 / §1.4 / §2 / §4
 * -----------------------------------------------------------------------------
 * 【红线遵守说明 —— 必读】
 * 1. 本文件为「新增」文件，不修改、不覆盖既有 scb-design-system.css（Code Snippet #30）。
 * 2. 命名空间隔离：所有组件类一律 `.scb-p3-*` 前缀。
 *    原因：`.scb-btn` / `.scb-card` / `.scb-card__title` / `.scb-card__media` /
 *    `.scb-card__meta` / `.scb-card__img` / `.scb-card__body` / `.scb-btn--ghost`
 *    已在线上页面（home / about / 产品分类页等）实际使用。若本文件复用同名类，
 *    将直接改写线上既有区块外观 = 视觉回归事故。故 P3 组件全部另起命名空间。
 *    → 若主理人确认要统一命名，可在部署前做一次全站类名迁移，本文件改前缀即可。
 * 3. Token 双层：
 *    · 全局层 `:root` 只暴露唯一前缀 `--scb-p3-*`（零碰撞）。
 *    · 规格名层：v3 §1.1 原始 token 名（--color-accent 等）以别名形式挂在 `.scb-p3`
 *      作用域内，不污染 `:root`。这样既 100% 保留规格命名可读性，又不与
 *      Blocksy / WP 预设变量（--wp--preset--color--*、--color--black 等）互相干扰。
 * 4. 零 JS：本文件配套的 3 个 P3 区块不加载任何脚本。
 * =============================================================================
 */

/* =============================================================================
 * §1.1 Design Tokens —— 全局层（唯一前缀，零碰撞）
 * ========================================================================== */
:root {
	/* ---- 颜色：中性 ---- */
	--scb-p3-color-base:          #FAFAF8; /* 页面底色，暖白展厅感 */
	--scb-p3-color-surface:       #FFFFFF; /* 卡片、面板、弹层背景 */
	--scb-p3-color-ink:           #14161A; /* 主文字、标题 */
	--scb-p3-color-ink-secondary: #4A4F59; /* 正文、描述 */
	--scb-p3-color-ink-tertiary:  #8A919C; /* 标注、占位、禁用文字 */
	--scb-p3-color-border:        #E4E6EB; /* 分割线、卡片边框、输入框边框 */
	--scb-p3-color-border-subtle: #F0F1F4; /* 浅底上的微分割 */

	/* ---- 颜色：品牌（v3 混合方案 · 已锁定）---- */
	--scb-p3-color-logo-dark:     #031734; /* Logo 深蓝（辅助标识色，不替代 ink）*/
	--scb-p3-color-logo-red:      #E32227; /* Logo 主红，与主行动色一致 */
	--scb-p3-color-accent:        #E32227; /* 主行动色：主按钮底 / 焦点环 / 激活态 */
	--scb-p3-color-accent-text:   #FFFFFF; /* 主按钮文字（红底白字，4.64:1 ≥ AA）*/
	--scb-p3-color-accent-hover:  #CC1F24; /* 主按钮 hover（亮度 -5%）*/
	--scb-p3-color-accent-active: #B81C21; /* 主按钮 active（亮度 -10%）*/
	--scb-p3-color-accent-a:      #BFA15A; /* 装饰性次要强调（黄铜）—— 仅装饰，见下方警告 */

	/* ---- 颜色：语义 ---- */
	--scb-p3-color-success:       #1E7D4C;
	--scb-p3-color-warning:       #B97516;
	--scb-p3-color-error:         #D92B2B;

	/* ---- §1.2 字体 ---- */
	--scb-p3-font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;

	--scb-p3-fs-display: 48px;  --scb-p3-lh-display: 56px;
	--scb-p3-fs-h1:      40px;  --scb-p3-lh-h1:      48px;
	--scb-p3-fs-h2:      32px;  --scb-p3-lh-h2:      40px;
	--scb-p3-fs-h3:      24px;  --scb-p3-lh-h3:      32px;
	--scb-p3-fs-h4:      20px;  --scb-p3-lh-h4:      28px;
	--scb-p3-fs-body:    16px;  --scb-p3-lh-body:    26px;
	--scb-p3-fs-body-sm: 14px;  --scb-p3-lh-body-sm: 22px;
	--scb-p3-fs-caption: 12px;  --scb-p3-lh-caption: 18px;
	--scb-p3-fs-data:    36px;  --scb-p3-lh-data:    42px;

	--scb-p3-fw-regular: 400;
	--scb-p3-fw-medium:  500;
	--scb-p3-fw-semibold:600;

	/* ---- §1.3 间距（基础步长 4px）---- */
	--scb-p3-space-1:   4px;
	--scb-p3-space-2:   8px;
	--scb-p3-space-3:   12px;
	--scb-p3-space-4:   16px;
	--scb-p3-space-6:   24px;
	--scb-p3-space-8:   32px;
	--scb-p3-space-12:  48px;
	--scb-p3-space-16:  64px;
	--scb-p3-space-20:  80px;
	--scb-p3-space-30:  120px;

	/* ---- §1.3 容器与栅格 ---- */
	--scb-p3-container-max: 1280px;
	--scb-p3-gutter:        16px; /* 移动端侧缝；平板 24 / 桌面 32 见媒体查询 */
	--scb-p3-grid-gap:      16px; /* 移动端列间距；≥640 提到 24 */

	/* ---- §1.3 区块间距 ---- */
	--scb-p3-section-y:     80px;  /* 相邻大模块 80–120 */
	--scb-p3-group-gap:     32px;  /* 同模块内部组间距 32–48 */

	/* ---- §1.4 圆角 ---- */
	--scb-p3-radius-sm:   4px;
	--scb-p3-radius-md:   8px;
	--scb-p3-radius-lg:   16px;
	--scb-p3-radius-none: 0;

	/* ---- §1.4 阴影 ---- */
	--scb-p3-shadow-card:       0 1px 3px rgba(20, 22, 26, 0.06), 0 1px 2px rgba(20, 22, 26, 0.04);
	--scb-p3-shadow-card-hover: 0 8px 24px rgba(20, 22, 26, 0.08);
	--scb-p3-shadow-modal:      0 24px 48px rgba(20, 22, 26, 0.16);

	/* ---- §1.4 层级 ---- */
	--scb-p3-z-modal:         1000;
	--scb-p3-z-header:        900;
	--scb-p3-z-shortcuts:     800;
	--scb-p3-z-filter-sticky: 700;
	--scb-p3-z-toast:         600;

	/* ---- a11y §4.4 焦点环（2px accent + 2px offset，全站统一）---- */
	--scb-p3-focus-width:  2px;
	--scb-p3-focus-color:  var(--scb-p3-color-accent);
	--scb-p3-focus-offset: 2px;

	/* ---- 触控目标 a11y §4.10 ---- */
	--scb-p3-touch-min: 48px;

	/* ---- 过渡（受 prefers-reduced-motion 约束，见文件末尾）---- */
	--scb-p3-transition: 160ms ease-out;
}

/* -----------------------------------------------------------------------------
 * §1.1 规格名别名层 —— 仅在 .scb-p3 作用域内生效，绝不污染 :root
 * 用途：让下游作者可以直接按 v3 规格文档里的 token 名书写，无需记前缀。
 * -------------------------------------------------------------------------- */
.scb-p3 {
	--color-base:          var(--scb-p3-color-base);
	--color-surface:       var(--scb-p3-color-surface);
	--color-ink:           var(--scb-p3-color-ink);
	--color-ink-secondary: var(--scb-p3-color-ink-secondary);
	--color-ink-tertiary:  var(--scb-p3-color-ink-tertiary);
	--color-border:        var(--scb-p3-color-border);
	--color-border-subtle: var(--scb-p3-color-border-subtle);
	--color-logo-dark:     var(--scb-p3-color-logo-dark);
	--color-logo-red:      var(--scb-p3-color-logo-red);
	--color-accent:        var(--scb-p3-color-accent);
	--color-accent-a:      var(--scb-p3-color-accent-a);
	--color-accent-text:   var(--scb-p3-color-accent-text);
	--color-success:       var(--scb-p3-color-success);
	--color-warning:       var(--scb-p3-color-warning);
	--color-error:         var(--scb-p3-color-error);

	--radius-sm:   var(--scb-p3-radius-sm);
	--radius-md:   var(--scb-p3-radius-md);
	--radius-lg:   var(--scb-p3-radius-lg);
	--radius-none: var(--scb-p3-radius-none);

	--shadow-card:       var(--scb-p3-shadow-card);
	--shadow-card-hover: var(--scb-p3-shadow-card-hover);
	--shadow-modal:      var(--scb-p3-shadow-modal);

	--z-modal:         var(--scb-p3-z-modal);
	--z-header:        var(--scb-p3-z-header);
	--z-shortcuts:     var(--scb-p3-z-shortcuts);
	--z-filter-sticky: var(--scb-p3-z-filter-sticky);
	--z-toast:         var(--scb-p3-z-toast);
}

/* =============================================================================
 * §1.3 断点（v3 §3.1，mobile-first min-width）
 *   Mobile  < 640      1 列
 *   Tablet  640–1023   2 列
 *   Desktop 1024–1279  3 列
 *   Wide    ≥ 1280     3–4 列
 * ========================================================================== */
@media (min-width: 640px) {
	:root { --scb-p3-gutter: 24px; --scb-p3-grid-gap: 24px; }
}
@media (min-width: 1024px) {
	:root { --scb-p3-gutter: 32px; --scb-p3-section-y: 96px; }
}
@media (min-width: 1280px) {
	:root { --scb-p3-section-y: 120px; }
}

/* =============================================================================
 * 基础：容器 / 区块 / 排版工具类
 * ========================================================================== */
.scb-p3 {
	font-family: var(--scb-p3-font-family);
	color: var(--scb-p3-color-ink);
	-webkit-font-smoothing: antialiased;
}

.scb-p3-container {
	width: 100%;
	max-width: var(--scb-p3-container-max);
	margin-inline: auto;
	padding-inline: var(--scb-p3-gutter);
	box-sizing: border-box;
}

.scb-p3-section {
	padding-block: var(--scb-p3-section-y);
}

/* a11y §4.6 标题层级：区块标题统一 H2 视觉 */
.scb-p3-section__title {
	font-size: var(--scb-p3-fs-h2);
	line-height: var(--scb-p3-lh-h2);
	font-weight: var(--scb-p3-fw-semibold);
	color: var(--scb-p3-color-ink);
	margin: 0 0 var(--scb-p3-space-4);
}

.scb-p3-section__intro {
	font-size: var(--scb-p3-fs-body);
	line-height: var(--scb-p3-lh-body);
	font-weight: var(--scb-p3-fw-regular);
	color: var(--scb-p3-color-ink-secondary);
	margin: 0 0 var(--scb-p3-group-gap);
	max-width: 68ch;
}

/* 屏幕阅读器专用文本（a11y：给符号/缩写补全可读单位）*/
.scb-p3-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* a11y §4.5 跳转链接 */
.scb-p3-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--scb-p3-z-modal);
	background: var(--scb-p3-color-surface);
	color: var(--scb-p3-color-accent);
	padding: var(--scb-p3-space-3) var(--scb-p3-space-4);
	border-radius: var(--scb-p3-radius-sm);
	font-size: var(--scb-p3-fs-body);
	font-weight: var(--scb-p3-fw-medium);
	text-decoration: none;
}
.scb-p3-skip-link:focus {
	left: var(--scb-p3-space-4);
	top: var(--scb-p3-space-4);
	outline: var(--scb-p3-focus-width) solid var(--scb-p3-focus-color);
	outline-offset: var(--scb-p3-focus-offset);
}

/* =============================================================================
 * §2.1 按钮 —— .scb-p3-btn
 * 主行动锁定：bg #E32227 + text #FFFFFF（对比 4.64:1，满足 WCAG AA 正文级）
 * ========================================================================== */
.scb-p3-btn {
	/* 盒模型：48px 高、48×48 最小触控（a11y §4.10）、px-24、圆角 8 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--scb-p3-space-2);
	box-sizing: border-box;
	min-height: var(--scb-p3-touch-min);
	min-width: var(--scb-p3-touch-min);
	padding: var(--scb-p3-space-3) var(--scb-p3-space-6);
	border-radius: var(--scb-p3-radius-md);
	border: 1px solid transparent;

	/* 排版 */
	font-family: var(--scb-p3-font-family);
	font-size: var(--scb-p3-fs-body);
	line-height: var(--scb-p3-lh-body);
	font-weight: var(--scb-p3-fw-medium);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;

	/* 主态：实心红底白字，无投影 */
	background-color: var(--scb-p3-color-accent);
	color: var(--scb-p3-color-accent-text);

	cursor: pointer;
	transition: background-color var(--scb-p3-transition), transform var(--scb-p3-transition);
	-webkit-appearance: none;
	appearance: none;
}

.scb-p3-btn:visited { color: var(--scb-p3-color-accent-text); }

.scb-p3-btn:hover {
	background-color: var(--scb-p3-color-accent-hover); /* 亮度 -5% */
	color: var(--scb-p3-color-accent-text);
}

/* a11y §4.4 焦点可见：2px accent 实线 + 2px offset，不依赖颜色单一线索 */
.scb-p3-btn:focus-visible {
	outline: var(--scb-p3-focus-width) solid var(--scb-p3-focus-color);
	outline-offset: var(--scb-p3-focus-offset);
}
/* 旧浏览器兜底：不支持 :focus-visible 时退回 :focus */
.scb-p3-btn:focus:not(:focus-visible) { outline: none; }
@supports not selector(:focus-visible) {
	.scb-p3-btn:focus {
		outline: var(--scb-p3-focus-width) solid var(--scb-p3-focus-color);
		outline-offset: var(--scb-p3-focus-offset);
	}
}

.scb-p3-btn:active {
	background-color: var(--scb-p3-color-accent-active); /* 亮度 -10% */
	transform: translateY(1px);
}

.scb-p3-btn[aria-disabled="true"],
.scb-p3-btn:disabled,
.scb-p3-btn.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* ---- 次按钮（§2.1 Secondary）---- */
.scb-p3-btn--secondary {
	background-color: transparent;
	border-color: var(--scb-p3-color-accent);
	color: var(--scb-p3-color-accent);
}
.scb-p3-btn--secondary:hover {
	background-color: rgba(227, 34, 39, 0.08); /* accent/08 */
	color: var(--scb-p3-color-accent);
}
.scb-p3-btn--secondary:active {
	background-color: rgba(227, 34, 39, 0.14);
}

/* ---- 文字按钮 / 链接（§2.1）---- */
.scb-p3-btn--text {
	background-color: transparent;
	color: var(--scb-p3-color-accent);
	padding-inline: var(--scb-p3-space-2);
	min-width: 0;
	text-underline-offset: 2px;
}
.scb-p3-btn--text:hover {
	background-color: transparent;
	color: var(--scb-p3-color-accent-hover);
	text-decoration: underline;
}

/* ---- 尺寸变体 ---- */
.scb-p3-btn--lg { font-size: 18px; min-height: 56px; padding-inline: var(--scb-p3-space-8); }
/* 注：--sm 仍保持 48px 最小触控高度，只压缩横向内边距，避免破坏 a11y §4.10 */
.scb-p3-btn--sm { font-size: var(--scb-p3-fs-body-sm); padding-inline: var(--scb-p3-space-4); }

.scb-p3-btn--block { display: flex; width: 100%; }

/* CTA 外层对齐容器 */
.scb-p3-cta { margin-block: var(--scb-p3-group-gap); }
.scb-p3-cta--left   { text-align: left; }
.scb-p3-cta--center { text-align: center; }
.scb-p3-cta--right  { text-align: right; }
.scb-p3-cta--full .scb-p3-btn { display: flex; width: 100%; }

/* 移动端：§2.1 允许 44px 最小高度；此处仍保持 48，严格对齐 a11y §4.10 触控基线 */
@media (max-width: 639px) {
	.scb-p3-btn { width: 100%; } /* 单列布局下主 CTA 满宽，指点面积最大 */
	.scb-p3-cta--auto .scb-p3-btn { width: auto; }
}

/* =============================================================================
 * §2.3 卡片 —— .scb-p3-card（基础卡）
 * ========================================================================== */
.scb-p3-card {
	display: flex;
	flex-direction: column;
	background-color: var(--scb-p3-color-surface);
	border: 1px solid var(--scb-p3-color-border);
	border-radius: var(--scb-p3-radius-md);
	box-shadow: var(--scb-p3-shadow-card);
	overflow: hidden;
	height: 100%;
	transition: box-shadow var(--scb-p3-transition), transform var(--scb-p3-transition);
}

.scb-p3-card__body {
	padding: var(--scb-p3-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--scb-p3-space-2);
	flex: 1 1 auto;
}

.scb-p3-card__title {
	font-size: var(--scb-p3-fs-h3);
	line-height: var(--scb-p3-lh-h3);
	font-weight: var(--scb-p3-fw-semibold);
	color: var(--scb-p3-color-ink);
	margin: 0;
}

.scb-p3-card__meta {
	font-size: var(--scb-p3-fs-body-sm);
	line-height: var(--scb-p3-lh-body-sm);
	font-weight: var(--scb-p3-fw-regular);
	color: var(--scb-p3-color-ink-secondary);
	margin: 0;
}

/* =============================================================================
 * §2.3 行业案例卡片（实景，1:1）—— .scb-p3-case-card
 * ========================================================================== */
.scb-p3-case-card { /* 继承 .scb-p3-card，此处仅补充差异 */ }

.scb-p3-case-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}
.scb-p3-case-card__link:focus-visible {
	outline: var(--scb-p3-focus-width) solid var(--scb-p3-focus-color);
	outline-offset: var(--scb-p3-focus-offset);
}
@supports not selector(:focus-visible) {
	.scb-p3-case-card__link:focus {
		outline: var(--scb-p3-focus-width) solid var(--scb-p3-focus-color);
		outline-offset: var(--scb-p3-focus-offset);
	}
}

/* 1:1 媒体框（素材 799×799 / 1253×1253 正方）*/
.scb-p3-case-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: var(--scb-p3-color-border-subtle);
	overflow: hidden;
}
/* 不支持 aspect-ratio 的旧浏览器兜底 */
@supports not (aspect-ratio: 1 / 1) {
	.scb-p3-case-card__media { height: 0; padding-bottom: 100%; }
}

.scb-p3-case-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;      /* §2.3 硬要求 */
	object-position: center;
	transition: transform var(--scb-p3-transition);
}
@supports not (aspect-ratio: 1 / 1) {
	.scb-p3-case-card__img { position: absolute; inset: 0; }
}

/* Hover：卡片抬升 + 图片轻微放大（prefers-reduced-motion 下会被关闭）*/
.scb-p3-case-card:hover { box-shadow: var(--scb-p3-shadow-card-hover); }
.scb-p3-case-card:hover .scb-p3-case-card__img { transform: scale(1.03); }

.scb-p3-case-card__title {
	font-size: var(--scb-p3-fs-h3);
	line-height: var(--scb-p3-lh-h3);
	font-weight: var(--scb-p3-fw-semibold);
	color: var(--scb-p3-color-ink);
	margin: 0;
}

.scb-p3-case-card__meta {
	font-size: var(--scb-p3-fs-body-sm);
	line-height: var(--scb-p3-lh-body-sm);
	color: var(--scb-p3-color-ink-secondary);
	margin: 0;
}

/* 行业标签（黄铜仅作装饰边，文字用 ink-secondary 保证对比度）*/
.scb-p3-case-card__tag {
	display: inline-block;
	font-size: var(--scb-p3-fs-caption);
	line-height: var(--scb-p3-lh-caption);
	font-weight: var(--scb-p3-fw-medium);
	color: var(--scb-p3-color-ink-secondary);
	border: 1px solid var(--scb-p3-color-border);
	border-radius: var(--scb-p3-radius-sm);
	padding: 2px var(--scb-p3-space-2);
	align-self: flex-start;
}

/* ---- 案例网格：桌面 3 列 / 平板 2 列 / 移动 1 列（§2.3 + §3.1）---- */
.scb-p3-case-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--scb-p3-grid-gap);
}
@media (min-width: 640px)  { .scb-p3-case-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .scb-p3-case-grid { grid-template-columns: repeat(3, 1fr); } }

.scb-p3-case-grid > li { display: flex; }

/* =============================================================================
 * §2.5 信任带 —— .scb-p3-trust-bar
 * 数字 36/42 · 600 · ink；说明 12/18
 * 布局：桌面 4 列 → 平板 2 列 → 移动 1 列
 * ========================================================================== */
.scb-p3-trust-bar {
	background-color: var(--scb-p3-color-base);
	padding-block: var(--scb-p3-section-y);
}

.scb-p3-trust-bar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;                       /* 移动 1 列 */
	gap: var(--scb-p3-group-gap) var(--scb-p3-grid-gap);
}
@media (min-width: 640px)  { .scb-p3-trust-bar__list { grid-template-columns: repeat(2, 1fr); } } /* 平板 2 列 */
@media (min-width: 1024px) { .scb-p3-trust-bar__list { grid-template-columns: repeat(4, 1fr); } } /* 桌面 4 列 */

.scb-p3-trust-bar__item {
	display: flex;
	flex-direction: column;
	gap: var(--scb-p3-space-2);
}

/* 大数字：Data 36/42，字重 600，色 ink */
.scb-p3-trust-bar__value {
	font-size: var(--scb-p3-fs-data);
	line-height: var(--scb-p3-lh-data);
	font-weight: var(--scb-p3-fw-semibold);
	color: var(--scb-p3-color-ink);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* 非数字型条目（如「US · DE · AU」「50 / 50」）字号收一档，避免换行崩版 */
.scb-p3-trust-bar__value--text {
	font-size: var(--scb-p3-fs-h3);
	line-height: var(--scb-p3-lh-h3);
}

/* 黄铜短规则线 —— v3 §1.1 明确的装饰性用法（纯装饰，不承载文字/信息）*/
.scb-p3-trust-bar__rule {
	display: block;
	width: 32px;
	height: 2px;
	background-color: var(--scb-p3-color-accent-a);
	border: 0;
	margin: 0;
	border-radius: 1px;
}

/* 说明文字：Caption 12/18
 * ⚠️ a11y 冲突处置（见交付报告）：v3 §2.5 原写 ink-tertiary(#8A919C)，
 *    但 #8A919C on #FAFAF8 ≈ 3.1:1，12px 小字未达 §4.2 的 4.5:1。
 *    故默认改用 ink-secondary(#4A4F59 ≈ 8.0:1) 以满足 a11y 红线；
 *    如设计侧坚持 tertiary，改下面这一个变量即可，不必动组件代码。 */
.scb-p3-trust-bar { --scb-p3-trust-caption-color: var(--scb-p3-color-ink-secondary); }
.scb-p3-trust-bar__label {
	font-size: var(--scb-p3-fs-caption);
	line-height: var(--scb-p3-lh-caption);
	font-weight: var(--scb-p3-fw-medium);
	color: var(--scb-p3-trust-caption-color);
	margin: 0;
}

/* 紧凑版（用于产品页 intro 的 mini trust bar，§3.4）*/
.scb-p3-trust-bar--mini { padding-block: var(--scb-p3-space-8); }
.scb-p3-trust-bar--mini .scb-p3-trust-bar__value {
	font-size: var(--scb-p3-fs-h3);
	line-height: var(--scb-p3-lh-h3);
}
.scb-p3-trust-bar--mini .scb-p3-trust-bar__rule { display: none; }

/* =============================================================================
 * 占位提示标签（§2.3 产品型卡片：「示例图，待补高清棚拍」）
 * 本批次未交付产品卡区块，先把样式备好，供第二批直接复用。
 * ========================================================================== */
.scb-p3-placeholder-note {
	position: absolute;
	left: var(--scb-p3-space-2);
	bottom: var(--scb-p3-space-2);
	font-size: var(--scb-p3-fs-caption);
	line-height: var(--scb-p3-lh-caption);
	font-weight: var(--scb-p3-fw-medium);
	color: var(--scb-p3-color-ink-secondary);
	background-color: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--scb-p3-color-border);
	border-radius: var(--scb-p3-radius-sm);
	padding: 2px var(--scb-p3-space-2);
}

/* =============================================================================
 * a11y §4.19 —— 尊重 prefers-reduced-motion
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.scb-p3 *,
	.scb-p3 *::before,
	.scb-p3 *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.scb-p3-case-card:hover .scb-p3-case-card__img { transform: none; }
	.scb-p3-btn:active { transform: none; }
}

/* =============================================================================
 * a11y §4.2 —— 强制高对比 / Windows 高对比模式兜底
 * ========================================================================== */
@media (forced-colors: active) {
	.scb-p3-btn {
		border: 1px solid ButtonBorder;
		background-color: ButtonFace;
		color: ButtonText;
		forced-color-adjust: none;
	}
	.scb-p3-btn:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
	.scb-p3-card,
	.scb-p3-case-card { border: 1px solid CanvasText; }
	.scb-p3-trust-bar__rule { background-color: CanvasText; }
}

/* =============================================================================
 * a11y §4.11 —— 200% 文本缩放不产生横向滚动
 * ========================================================================== */
.scb-p3 img,
.scb-p3 svg { max-width: 100%; }
.scb-p3-trust-bar__value,
.scb-p3-card__title,
.scb-p3-case-card__title { overflow-wrap: break-word; }


/* #############################################################################
 * ##
 * ##  第二批追加（承影 2026-08-07）—— §7 筛选条 / §8 分页 / §9 产品型卡片
 * ##
 * ##  说明：以上 §1–§6 为第一批内容，主理人已逐行核验，本次**未做任何改动**
 * ##  （零删除、零重排、零改写）。以下三段为纯追加。
 * ##  全部复用 :root 的 --scb-p3-* 变量，未新造 token。
 * ##
 * ###########################################################################*/


/* =============================================================================
 * §7 筛选条 —— .scb-p3-filter-bar
 * 依据 v3 §2.4 + §2.7；链接式服务端筛选（详见 scb-block-filter-bar.php 文件头）
 * ========================================================================== */
.scb-p3-filter-bar {
	background-color: var(--scb-p3-color-surface);
	border-block: 1px solid var(--scb-p3-color-border);
	padding-block: var(--scb-p3-space-4);
}

/* 吸顶：默认关闭，调用方显式传 sticky=true 才启用。
 * 理由：移动端吃屏高，且与用户已启用的 Blocksy Shortcuts Bar 会叠层打架。*/
.scb-p3-filter-bar--sticky {
	position: sticky;
	top: 0;
	z-index: var(--scb-p3-z-filter-sticky);
	box-shadow: var(--scb-p3-shadow-card);
}

.scb-p3-filter-bar__inner {
	display: flex;
	flex-direction: column;
	gap: var(--scb-p3-space-3);
}

/* 单组筛选 */
.scb-p3-filter-bar__group {
	display: flex;
	align-items: center;
	gap: var(--scb-p3-space-3);
	min-width: 0; /* 允许内部滚动容器收缩 */
}

.scb-p3-filter-bar__legend {
	flex: 0 0 auto;
	font-size: var(--scb-p3-fs-caption);
	line-height: var(--scb-p3-lh-caption);
	font-weight: var(--scb-p3-fw-semibold);
	color: var(--scb-p3-color-ink-tertiary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	min-width: 68px;
}

/* pill 行：移动端横向滚动，不换行堆三层 */
.scb-p3-filter-bar__options {
	list-style: none;
	margin: 0;
	padding: var(--scb-p3-space-1) 0;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--scb-p3-space-2);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	min-width: 0;
}
/* 滚动容器可键盘聚焦（WCAG 2.1.1：可滚动区域必须键盘可达）*/
.scb-p3-filter-bar__options:focus-visible {
	outline: var(--scb-p3-focus-width) solid var(--scb-p3-focus-color);
	outline-offset: var(--scb-p3-focus-offset);
	border-radius: var(--scb-p3-radius-sm);
}
@supports not selector(:focus-visible) {
	.scb-p3-filter-bar__options:focus {
		outline: var(--scb-p3-focus-width) solid var(--scb-p3-focus-color);
		outline-offset: var(--scb-p3-focus-offset);
	}
}

.scb-p3-filter-bar__option {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

/* pill 本体：未选中 = 白底 + border + ink-secondary */
.scb-p3-filter-bar__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--scb-p3-touch-min);   /* a11y §4.10 触控 48px */
	padding: var(--scb-p3-space-2) var(--scb-p3-space-4);
	border: 1px solid var(--scb-p3-color-border);
	border-radius: var(--scb-p3-radius-md);
	background-color: var(--scb-p3-color-surface);
	color: var(--scb-p3-color-ink-secondary);
	font-size: var(--scb-p3-fs-body-sm);
	line-height: var(--scb-p3-lh-body-sm);
	font-weight: var(--scb-p3-fw-medium);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--scb-p3-transition),
	            border-color var(--scb-p3-transition),
	            color var(--scb-p3-transition);
}

/* hover 未选中项：浅灰底 + 黄铜边。
 * 黄铜只作 1px 装饰边、不承载文字与主行动语义 —— 符合 §1.1
 * 「--color-accent-a 仅用于分区小标记 / 短规则线 / 次级 hover 微染」。
 * 文字色同时加深到 ink，保证 hover 态对比度不降。*/
.scb-p3-filter-bar__pill:hover {
	background-color: var(--scb-p3-color-border-subtle);
	border-color: var(--scb-p3-color-accent-a);
	color: var(--scb-p3-color-ink);
}

.scb-p3-filter-bar__pill:focus-visible {
	outline: var(--scb-p3-focus-width) solid var(--scb-p3-focus-color);
	outline-offset: var(--scb-p3-focus-offset);
}
@supports not selector(:focus-visible) {
	.scb-p3-filter-bar__pill:focus {
		outline: var(--scb-p3-focus-width) solid var(--scb-p3-focus-color);
		outline-offset: var(--scb-p3-focus-offset);
	}
}

/* 选中态：accent 红底白字（4.64:1 ≥ AA）。
 * 不只靠颜色区分 —— 字重同时提到 600，满足「不依赖单一颜色线索」。*/
.scb-p3-filter-bar__pill.is-selected,
.scb-p3-filter-bar__pill[aria-current="true"] {
	background-color: var(--scb-p3-color-accent);
	border-color: var(--scb-p3-color-accent);
	color: var(--scb-p3-color-accent-text);
	font-weight: var(--scb-p3-fw-semibold);
}
.scb-p3-filter-bar__pill.is-selected:hover,
.scb-p3-filter-bar__pill[aria-current="true"]:hover {
	background-color: var(--scb-p3-color-accent-hover);
	border-color: var(--scb-p3-color-accent-hover);
	color: var(--scb-p3-color-accent-text);
}

/* 结果计数（aria-live 区域）*/
.scb-p3-filter-bar__count {
	margin: var(--scb-p3-space-3) 0 0;
	font-size: var(--scb-p3-fs-body-sm);
	line-height: var(--scb-p3-lh-body-sm);
	color: var(--scb-p3-color-ink-secondary);
}

/* 桌面：三组并排一行，legend 与 pill 同行 */
@media (min-width: 1024px) {
	.scb-p3-filter-bar__inner {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--scb-p3-space-6);
	}
	.scb-p3-filter-bar__group { flex: 0 1 auto; }
	.scb-p3-filter-bar__options { overflow-x: visible; flex-wrap: wrap; }
}


/* =============================================================================
 * §8 分页 —— .scb-p3-pagination
 * 依据 v3 §2.7；扁平单层 <ul>，移动端由 CSS 隐藏页码（非 PHP 分支）
 * ========================================================================== */
.scb-p3-pagination {
	padding-block: var(--scb-p3-space-8);
}

.scb-p3-pagination__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--scb-p3-space-2);
}

.scb-p3-pagination__item { display: flex; }

/* 链接 / 当前页 / 禁用态共用盒模型：48×48 触控 */
.scb-p3-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: var(--scb-p3-touch-min);
	min-height: var(--scb-p3-touch-min);
	padding: var(--scb-p3-space-2) var(--scb-p3-space-3);
	border: 1px solid var(--scb-p3-color-border);
	border-radius: var(--scb-p3-radius-md);
	background-color: var(--scb-p3-color-surface);
	color: var(--scb-p3-color-ink-secondary);
	font-size: var(--scb-p3-fs-body-sm);
	line-height: var(--scb-p3-lh-body-sm);
	font-weight: var(--scb-p3-fw-medium);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--scb-p3-transition),
	            border-color var(--scb-p3-transition),
	            color var(--scb-p3-transition);
}

a.scb-p3-pagination__link:hover {
	background-color: var(--scb-p3-color-border-subtle);
	border-color: var(--scb-p3-color-accent-a);
	color: var(--scb-p3-color-ink);
}

.scb-p3-pagination__link:focus-visible {
	outline: var(--scb-p3-focus-width) solid var(--scb-p3-focus-color);
	outline-offset: var(--scb-p3-focus-offset);
}
@supports not selector(:focus-visible) {
	.scb-p3-pagination__link:focus {
		outline: var(--scb-p3-focus-width) solid var(--scb-p3-focus-color);
		outline-offset: var(--scb-p3-focus-offset);
	}
}

/* 当前页：accent 红底白字 + 字重加粗（不依赖单一颜色线索）*/
.scb-p3-pagination__link.is-current {
	background-color: var(--scb-p3-color-accent);
	border-color: var(--scb-p3-color-accent);
	color: var(--scb-p3-color-accent-text);
	font-weight: var(--scb-p3-fw-semibold);
	cursor: default;
}

/* 禁用 Prev/Next：<span aria-disabled>，不可聚焦、不响应指针 */
.scb-p3-pagination__link.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
	background-color: transparent;
}

/* Prev / Next 需要显示文字，放宽横向内边距 */
.scb-p3-pagination__nav { padding-inline: var(--scb-p3-space-4); }

/* 省略号：无边框纯文本 */
.scb-p3-pagination__item--gap .scb-p3-pagination__ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--scb-p3-space-8);
	min-height: var(--scb-p3-touch-min);
	color: var(--scb-p3-color-ink-tertiary);
	font-size: var(--scb-p3-fs-body-sm);
}

/* "Page 3 of 20" 摘要：移动端可见，桌面隐藏 */
.scb-p3-pagination__summary {
	display: inline-flex;
	align-items: center;
	min-height: var(--scb-p3-touch-min);
	padding-inline: var(--scb-p3-space-3);
	font-size: var(--scb-p3-fs-body-sm);
	line-height: var(--scb-p3-lh-body-sm);
	font-weight: var(--scb-p3-fw-medium);
	color: var(--scb-p3-color-ink-secondary);
	white-space: nowrap;
}

/* ---- 移动端（< 640）：只留 Prev / Next + 摘要，页码与省略号隐藏 ----
 * 用 CSS 而非 PHP 分支：同一份 HTML 要能响应式适配，
 * 服务端不该猜设备宽度（也无法在缓存场景下正确猜）。*/
@media (max-width: 639px) {
	.scb-p3-pagination__item--number { display: none; }
	.scb-p3-pagination__list { justify-content: space-between; gap: var(--scb-p3-space-2); }
	.scb-p3-pagination__item--summary { order: 0; flex: 1 1 auto; justify-content: center; }
	.scb-p3-pagination__item--prev { order: -1; }
	.scb-p3-pagination__item--next { order: 1; }
}

/* ---- ≥ 640：显示页码，隐藏摘要 ---- */
@media (min-width: 640px) {
	.scb-p3-pagination__item--summary { display: none; }
}


/* =============================================================================
 * §9 产品型卡片 —— .scb-p3-product-card / .scb-p3-product-grid
 * 依据 v3 §2.3（白底棚拍）+ §3.4 线框
 * 与案例卡的区别：媒体 contain 不裁切、无整卡链接、双 CTA、wide 下 4 列
 * ========================================================================== */

/* ---- 网格：desktop 3 / tablet+mobile 2 ----
 * 2026-08-13 用户决策：产品分类页 PC 端 3 列，移动/平板 2 列（去掉移动 1 列和大屏 4 列）。*/
.scb-p3-product-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);   /* 移动/平板默认 2 列 */
	gap: var(--scb-p3-grid-gap);
}
@media (min-width: 1024px) { .scb-p3-product-grid { grid-template-columns: repeat(3, 1fr); } }

.scb-p3-product-grid > li { display: flex; }

/* ---- 卡片本体（继承 .scb-p3-card 的底/边/圆角/阴影）---- */
.scb-p3-product-card { position: relative; }
.scb-p3-product-card:hover { box-shadow: var(--scb-p3-shadow-card-hover); }

/* 媒体框：1:1 白底 + 内边距让产品透气 */
.scb-p3-product-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: var(--scb-p3-color-surface);
	padding: var(--scb-p3-space-4);
	box-sizing: border-box;
	overflow: hidden;
	border-bottom: 1px solid var(--scb-p3-color-border-subtle);
}
@supports not (aspect-ratio: 1 / 1) {
	.scb-p3-product-card__media { height: 0; padding-bottom: 100%; }
}

/* contain 而非 cover：白底棚拍是完整产品，cover 会裁掉边缘
 * 2026-08-13 用户决策：分类页产品卡改 object-fit: cover（容器已 1:1，cover 占满无白边，图片按需裁边）。*/
.scb-p3-product-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform var(--scb-p3-transition);
}
@supports not (aspect-ratio: 1 / 1) {
	.scb-p3-product-card__img {
		position: absolute;
		inset: var(--scb-p3-space-4);
		width: auto;
		height: auto;
	}
}
.scb-p3-product-card:hover .scb-p3-product-card__img { transform: scale(1.02); }

.scb-p3-product-card__body {
	gap: var(--scb-p3-space-3);
}

.scb-p3-product-card__title {
	font-size: var(--scb-p3-fs-h4);
	line-height: var(--scb-p3-lh-h4);
	font-weight: var(--scb-p3-fw-semibold);
	color: var(--scb-p3-color-ink);
	margin: 0;
}

/* 标题即链接（Tab 停靠点 1）；媒体区不可点，避免嵌套 <a> */
.scb-p3-product-card__link {
	color: inherit;
	text-decoration: none;
}
.scb-p3-product-card__link:hover {
	color: var(--scb-p3-color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.scb-p3-product-card__link:focus-visible {
	outline: var(--scb-p3-focus-width) solid var(--scb-p3-focus-color);
	outline-offset: var(--scb-p3-focus-offset);
	border-radius: var(--scb-p3-radius-sm);
}
@supports not selector(:focus-visible) {
	.scb-p3-product-card__link:focus {
		outline: var(--scb-p3-focus-width) solid var(--scb-p3-focus-color);
		outline-offset: var(--scb-p3-focus-offset);
	}
}

.scb-p3-product-card__meta {
	font-size: var(--scb-p3-fs-body-sm);
	line-height: var(--scb-p3-lh-body-sm);
	color: var(--scb-p3-color-ink-secondary);
	margin: 0;
}

/* ---- 双 CTA（Tab 停靠点 2 / 3）----
 * v3 §2.3 说 hover 显示，但 hover-only 对触屏与键盘用户等于不存在。
 * 三重保障：① hover 显示 ② :focus-within 显示（键盘）③ 无 hover 设备常驻。*/
.scb-p3-product-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--scb-p3-space-2);
	margin-top: auto; /* 贴到卡片底部，多卡等高时 CTA 对齐 */
	opacity: 0;
	transform: translateY(4px);
	transition: opacity var(--scb-p3-transition), transform var(--scb-p3-transition);
}
.scb-p3-product-card__actions .scb-p3-btn { flex: 1 1 auto; }

.scb-p3-product-card:hover .scb-p3-product-card__actions,
.scb-p3-product-card:focus-within .scb-p3-product-card__actions {
	opacity: 1;
	transform: translateY(0);
}

/* 触屏 / 无悬停设备：CTA 常驻，不做隐藏 */
@media (hover: none) {
	.scb-p3-product-card__actions {
		opacity: 1;
		transform: none;
	}
}

/* 键盘用户的兜底：任一内部元素获得焦点即显示（含不支持 :focus-within 的老浏览器）*/
@supports not selector(:focus-within) {
	.scb-p3-product-card__actions { opacity: 1; transform: none; }
}

/* 占位提示标签：默认由 PHP 关闭（show_note=false），开启时定位在媒体框内左下。
 * .scb-p3-placeholder-note 基础样式已在第一批 §6 定义，此处只补定位上下文。*/
.scb-p3-product-card__media .scb-p3-placeholder-note { z-index: 1; }

/* ---- a11y §4.19 减少动画 ---- */
@media (prefers-reduced-motion: reduce) {
	.scb-p3-product-card:hover .scb-p3-product-card__img { transform: none; }
	.scb-p3-product-card__actions { transform: none; transition: none; }
	.scb-p3-product-card:hover .scb-p3-product-card__actions,
	.scb-p3-product-card:focus-within .scb-p3-product-card__actions { transform: none; }
}

/* ---- a11y 强制高对比模式 ---- */
@media (forced-colors: active) {
	.scb-p3-filter-bar__pill,
	.scb-p3-pagination__link { border: 1px solid ButtonBorder; }
	.scb-p3-filter-bar__pill.is-selected,
	.scb-p3-pagination__link.is-current {
		border: 2px solid Highlight;
		forced-color-adjust: none;
	}
	.scb-p3-product-card__actions { opacity: 1; transform: none; }
	.scb-p3-product-card__media { border-bottom: 1px solid CanvasText; }
}

/* ---- a11y §4.11 200% 缩放不断字（第二批新增组件）---- */
.scb-p3-product-card__title,
.scb-p3-filter-bar__count,
.scb-p3-pagination__summary { overflow-wrap: break-word; }

/* =============================================================================
 * §10 · inquiry-cta 内嵌 Fluent Form（mode=embed）
 * 依据：06-P3-设计规格-内嵌询价表单-v1.md §1 / §2 / §3 / §4 / §5 / §7
 * 交付：承影 (design-to-code)
 * -----------------------------------------------------------------------------
 * 【覆盖策略红线（§5）】
 *   1. 每条覆盖规则都以 .scb-p3-inquiry-form 开头 —— 不外溢污染站内其它 FF 表单。
 *   2. 默认 Tier 2（.scb-p3-inquiry-form .fluentform .ff-xxx，0,3,0）。
 *      Tier 3（带 #fluentform_3，1,2,0）仅在 Styler 无法关闭时启用，见文末注释块。
 *   3. 零 !important（唯一豁免是既有 .scb-p3-sr-only 的 position:absolute!important）。
 *   4. 不使用 @layer（FF 未分层 CSS 优先级高于任何 @layer 内规则，用了会反向失效）。
 * ========================================================================== */

/* ---- §7.1 新增 token：全局层（唯一前缀，零碰撞）---- */
:root {
	/* 颜色 —— 表单专用（a11y 硬性，§4.1）*/
	--scb-p3-color-field-border:       #7C838F; /* 3.82:1 on 白 · 3.65:1 on base · 1.4.11 ≥3:1 */
	--scb-p3-color-field-border-hover: #4A4F59; /* = ink-secondary */
	--scb-p3-color-ink-placeholder:    #6B7280; /* 4.83:1 on 白 · 4.63:1 on base · 1.4.3 ≥4.5:1 */
	--scb-p3-color-field-bg-disabled:  #F0F1F4; /* = border-subtle */
	--scb-p3-color-error-bg:           rgba(217, 43, 43, 0.06);
	--scb-p3-color-success-bg:         rgba(30, 125, 76, 0.08);

	/* 尺寸 —— 表单专用 */
	--scb-p3-field-height:    48px;
	--scb-p3-field-pad-y:     12px;
	--scb-p3-field-pad-x:     12px;
	--scb-p3-textarea-min-h:  120px;
	--scb-p3-field-gap:       var(--scb-p3-space-4);   /* 16px，≥768 提到 20px */
	--scb-p3-field-label-gap: var(--scb-p3-space-2);   /* 8px */
	--scb-p3-field-msg-gap:   6px;
	--scb-p3-field-border-w-error: 2px;
	--scb-p3-choice-size:     20px;
	--scb-p3-form-max:        1000px;                 /* 窄容器，用户已定 */
}

/* ---- §7.3 别名层追加（.scb-p3 作用域，供下游按规格名书写）---- */
.scb-p3 {
	--color-field-border:        var(--scb-p3-color-field-border);
	--color-field-border-hover:  var(--scb-p3-color-field-border-hover);
	--color-ink-placeholder:     var(--scb-p3-color-ink-placeholder);
}

/* ---- §1.2 区块骨架 ------------------------------------------------------- */
.scb-p3-inquiry {
	box-sizing: border-box;
}

.scb-p3-inquiry__inner {
	width: 100%;
	max-width: var(--scb-p3-form-max);   /* 硬规则：永远 ≤1000px，即使块设 alignwide */
	margin-inline: auto;
	box-sizing: border-box;
}

.scb-p3-inquiry__title {
	font-size: var(--scb-p3-fs-h2);
	line-height: var(--scb-p3-lh-h2);
	font-weight: var(--scb-p3-fw-semibold);
	color: var(--scb-p3-color-ink);
	margin: 0 0 var(--scb-p3-space-3);
}

.scb-p3-inquiry__intro {
	font-size: var(--scb-p3-fs-body);
	line-height: var(--scb-p3-lh-body);
	color: var(--scb-p3-color-ink-secondary);
	margin: 0 0 var(--scb-p3-space-3);
	max-width: 68ch;
}

.scb-p3-inquiry__required-note {
	font-size: var(--scb-p3-fs-caption);
	line-height: var(--scb-p3-lh-caption);
	color: var(--scb-p3-color-ink-secondary);
	margin: 0 0 var(--scb-p3-space-4);
}

.scb-p3-inquiry__privacy {
	font-size: var(--scb-p3-fs-caption);
	line-height: var(--scb-p3-lh-caption);
	color: var(--scb-p3-color-ink-secondary);   /* #4A4F59 · 8:1 ≥ AA（§2.6，非 ink-tertiary #8A919C 3.18:1）*/
	margin: var(--scb-p3-space-4) 0 0;
}

/* boxed：白底卡片（surface + border + radius-lg + padding）
 * 注意：故意不加 overflow:hidden —— 否则焦点环会被裁掉（a11y §4.4.3）*/
.scb-p3-inquiry--boxed .scb-p3-inquiry-form {
	background: var(--scb-p3-color-surface);
	border: 1px solid var(--scb-p3-color-border);
	border-radius: var(--scb-p3-radius-lg);
	padding: var(--scb-p3-gutter);          /* 16 / 24 / 32 随断点，与 §3 完全一致 */
	box-sizing: border-box;
}

/* ---- §2 / §5.2 表单覆盖（Tier 2 默认，作用域根 = .scb-p3-inquiry-form）---- */
.scb-p3-inquiry-form .fluentform {
	width: 100%;
}

/* 字段组垂直间距（§2.1）*/
.scb-p3-inquiry-form .fluentform .ff-el-group {
	margin-bottom: var(--scb-p3-field-gap);   /* 16px */
}
@media (min-width: 768px) {
	.scb-p3-inquiry-form .fluentform .ff-el-group {
		margin-bottom: 20px;                   /* ≥768 → 20px */
	}
}

/* 标签（§2.2：14/22，weight 500，ink 色，控件上方）*/
.scb-p3-inquiry-form .fluentform .ff-el-form-label,
.scb-p3-inquiry-form .fluentform .ff-el-input--label {
	display: block;
	font-size: var(--scb-p3-fs-body-sm);
	line-height: var(--scb-p3-lh-body-sm);
	font-weight: var(--scb-p3-fw-medium);
	color: var(--scb-p3-color-ink);
	margin-bottom: var(--scb-p3-field-label-gap);   /* 8px */
	overflow-wrap: break-word;                        /* §3.4 长标签 */
}
/* 必填星号归一到 error 红（§2.2；* 本身由 FF 输出 aria-hidden）*/
.scb-p3-inquiry-form .fluentform .ff-el-form-label .ff-el-required,
.scb-p3-inquiry-form .fluentform .ff-el-input--label .ff-el-required {
	color: var(--scb-p3-color-error);
	margin-left: 2px;
}

/* 输入控件（§2.3：48px min-height / 12px pad / 16px / 8px 圆角 / 新边框 token）*/
.scb-p3-inquiry-form .fluentform .ff-el-form-control {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;                              /* §3.4 200% 缩放不出横向滚动 */
	min-height: var(--scb-p3-field-height);
	padding: var(--scb-p3-field-pad-y) var(--scb-p3-field-pad-x);
	font-family: var(--scb-p3-font-family);
	font-size: var(--scb-p3-fs-body);             /* 16px，防 iOS 自动缩放 */
	line-height: 22px;
	color: var(--scb-p3-color-ink);
	background-color: var(--scb-p3-color-surface);
	border: 1px solid var(--scb-p3-color-field-border);   /* #7C838F，新 token */
	border-radius: var(--scb-p3-radius-md);              /* 8px，与 .scb-p3-btn 对齐 */
	transition: border-color var(--scb-p3-transition);
}
/* 占位符（§4.1：#6B7280，4.83:1）*/
.scb-p3-inquiry-form .fluentform .ff-el-form-control::placeholder {
	color: var(--scb-p3-color-ink-placeholder);
	opacity: 1;
}
/* hover（§2.3：边框 → #4A4F59）*/
.scb-p3-inquiry-form .fluentform .ff-el-form-control:hover {
	border-color: var(--scb-p3-color-field-border-hover);
}
/* focus-visible（§2.3 / §4.4：outline + 边框同时变红，双保险）*/
.scb-p3-inquiry-form .fluentform .ff-el-form-control:focus-visible {
	outline: var(--scb-p3-focus-width) solid var(--scb-p3-focus-color);
	outline-offset: var(--scb-p3-focus-offset);
	border-color: var(--scb-p3-color-accent);
}
@supports not selector(:focus-visible) {
	.scb-p3-inquiry-form .fluentform .ff-el-form-control:focus {
		outline: var(--scb-p3-focus-width) solid var(--scb-p3-focus-color);
		outline-offset: var(--scb-p3-focus-offset);
		border-color: var(--scb-p3-color-accent);
	}
}
/* disabled / readonly（§2.3）*/
.scb-p3-inquiry-form .fluentform .ff-el-form-control:disabled,
.scb-p3-inquiry-form .fluentform .ff-el-form-control[readonly] {
	background-color: var(--scb-p3-color-field-bg-disabled);
	color: var(--scb-p3-color-field-border-hover);
	border-color: var(--scb-p3-color-field-border);
	cursor: not-allowed;
}
/* error（§2.3 / §4.3：边框 1px→2px + 错误浅底；靠形状变化而非仅颜色）*/
.scb-p3-inquiry-form .fluentform .ff-el-is-error .ff-el-form-control,
.scb-p3-inquiry-form .fluentform .ff-el-form-control[aria-invalid="true"] {
	border-width: var(--scb-p3-field-border-w-error);
	border-color: var(--scb-p3-color-error);
	background-color: var(--scb-p3-color-error-bg);
}

/* textarea（§2.3：min-height 120 / resize vertical / lh 26）*/
.scb-p3-inquiry-form .fluentform textarea.ff-el-form-control {
	min-height: var(--scb-p3-textarea-min-h);
	resize: vertical;
	line-height: 26px;
}

/* select（§2.3：appearance none + 自绘 chevron #4A4F59）*/
.scb-p3-inquiry-form .fluentform select.ff-el-form-control {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%234A4F59' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px 16px;
}
.scb-p3-inquiry-form .fluentform select.ff-el-form-control::-ms-expand {
	display: none;
}

/* 复选 / 单选（§2.4：20px 方框 + label padding 撑起触控热区；§4.10 触控目标 min 48px）*/
.scb-p3-inquiry-form .fluentform .ff-el-form-check {
	display: flex;
	align-items: center;
	gap: var(--scb-p3-space-2);
	min-height: var(--scb-p3-touch-min);   /* 48px，a11y §4.10 触控目标 */
	padding-block: 12px;
}
.scb-p3-inquiry-form .fluentform .ff-el-form-check-input {
	width: var(--scb-p3-choice-size);
	height: var(--scb-p3-choice-size);
	border: 1px solid var(--scb-p3-color-field-border);
	border-radius: var(--scb-p3-radius-sm);
	accent-color: var(--scb-p3-color-accent);   /* 选中态红底白勾，原生可访问 */
}
.scb-p3-inquiry-form .fluentform .ff-el-form-check-input[type="radio"] {
	border-radius: 50%;
}

/* 帮助 / 错误 / 成功文本（§2.6）*/
.scb-p3-inquiry-form .fluentform .ff-el-help-message,
.scb-p3-inquiry-form .fluentform .ff-el-form-control-feedback {
	font-size: var(--scb-p3-fs-caption);
	line-height: var(--scb-p3-lh-caption);
	color: var(--scb-p3-color-field-border-hover);   /* #4A4F59，8:1 */
	margin-top: var(--scb-p3-field-msg-gap);
}
.scb-p3-inquiry-form .fluentform .ff-el-error-message,
.scb-p3-inquiry-form .fluentform .ff-el-is-error .ff-el-form-control-feedback {
	font-size: var(--scb-p3-fs-body-sm);
	line-height: var(--scb-p3-lh-body-sm);
	font-weight: var(--scb-p3-fw-medium);
	color: var(--scb-p3-color-error);                /* #D92B2B，4.85:1 */
	margin-top: var(--scb-p3-field-msg-gap);
}
/* 结果提示块：左侧 4px 语义色竖条 + 12px 内边距 + radius-md + 语义浅底（§2.6）*/
.scb-p3-inquiry-form .fluentform .ff-message-success,
.scb-p3-inquiry-form .fluentform .ff-errors-in-stack {
	font-size: var(--scb-p3-fs-body);
	line-height: var(--scb-p3-lh-body);
	padding: var(--scb-p3-space-3);
	border-left: 4px solid var(--scb-p3-color-success);
	border-radius: var(--scb-p3-radius-md);
	background: var(--scb-p3-color-success-bg);
	margin-bottom: var(--scb-p3-space-4);
}
.scb-p3-inquiry-form .fluentform .ff-errors-in-stack {
	border-left-color: var(--scb-p3-color-error);
	background: var(--scb-p3-color-error-bg);
}

/* §2.5 提交按钮：复用 .scb-p3-btn primary 观感（作用域覆盖，不改 FF DOM）*/
.scb-p3-inquiry-form .fluentform .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--scb-p3-field-height);          /* 48px */
	padding: var(--scb-p3-field-pad-y) var(--scb-p3-space-6);  /* 12px 24px */
	border-radius: var(--scb-p3-radius-md);          /* 8px */
	border: 1px solid transparent;
	font-family: var(--scb-p3-font-family);
	font-size: var(--scb-p3-fs-body);                /* 16px */
	line-height: var(--scb-p3-lh-body);
	font-weight: var(--scb-p3-fw-medium);            /* 500 */
	text-align: center;
	background-color: var(--scb-p3-color-accent);   /* #E32227 */
	color: var(--scb-p3-color-accent-text);         /* #FFFFFF，4.64:1 ≥ AA */
	cursor: pointer;
	margin-top: var(--scb-p3-space-6);               /* 上方间距 24px */
	transition: background-color var(--scb-p3-transition), transform var(--scb-p3-transition);
	-webkit-appearance: none;
	appearance: none;
}
.scb-p3-inquiry-form .fluentform .ff-btn-submit:hover {
	background-color: var(--scb-p3-color-accent-hover);   /* #CC1F24 */
}
.scb-p3-inquiry-form .fluentform .ff-btn-submit:active {
	background-color: var(--scb-p3-color-accent-active);  /* #B81C21 */
	transform: translateY(1px);
}
/* a11y §4.4 焦点环 2px accent + 2px offset */
.scb-p3-inquiry-form .fluentform .ff-btn-submit:focus-visible {
	outline: var(--scb-p3-focus-width) solid var(--scb-p3-focus-color);
	outline-offset: var(--scb-p3-focus-offset);
}
@supports not selector(:focus-visible) {
	.scb-p3-inquiry-form .fluentform .ff-btn-submit:focus {
		outline: var(--scb-p3-focus-width) solid var(--scb-p3-focus-color);
		outline-offset: var(--scb-p3-focus-offset);
	}
}
/* disabled（§2.5）*/
.scb-p3-inquiry-form .fluentform .ff-btn-submit:disabled,
.scb-p3-inquiry-form .fluentform .ff-btn-submit[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}
/* submitting 态（§2.5：FF AJAX 提交中；文本由 FF JS 换为 "Sending…"，aria-busy 由 FF 设）*/
.scb-p3-inquiry-form .fluentform .ff-btn-submit[aria-busy="true"],
.scb-p3-inquiry-form .fluentform .ff-btn-submit.is-loading,
.scb-p3-inquiry-form .fluentform .ff-btn-submit.ff-btn-loading {
	opacity: 0.7;
	cursor: default;
}
/* 响应式宽度（§2.5）：<640 满宽；≥640 auto + min 200px */
.scb-p3-inquiry-form .fluentform .ff-btn-submit {
	width: 100%;
}
@media (min-width: 640px) {
	.scb-p3-inquiry-form .fluentform .ff-btn-submit {
		width: auto;
		min-width: 200px;
	}
}

/* §3 硬规则 2：<768 强制单列（覆盖 FF 两列 .ff-t-container）*/
@media (max-width: 767px) {
	.scb-p3-inquiry-form .fluentform .ff-t-container {
		display: flex;
		flex-direction: column;
	}
	.scb-p3-inquiry-form .fluentform .ff-t-cell {
		width: 100%;
		padding-inline: 0;
	}
}
/* 手动单列修饰符（§1.3 --stacked）*/
.scb-p3-inquiry-form--stacked .fluentform .ff-t-container {
	flex-direction: column;
}

/* §5.5 蜜罐 / 隐藏字段：保持隐藏，绝不写通用 display:block 误伤
 * （FF 自带 display:none；此处仅加固，不用 !important）*/
.scb-p3-inquiry-form .ff_hidden,
.scb-p3-inquiry-form .ff-hidden,
.scb-p3-inquiry-form input[type="hidden"] {
	display: none;
}

/* ---- a11y §4.7 减少动效 ---- */
@media (prefers-reduced-motion: reduce) {
	.scb-p3-inquiry-form .fluentform .ff-el-form-control,
	.scb-p3-inquiry-form .fluentform .ff-btn-submit {
		transition: none;
	}
	.scb-p3-inquiry-form .fluentform .ff-btn-submit:active {
		transform: none;
	}
}

/* ---- a11y §4.7 强制高对比模式（错误态靠 2px 边框，而非红色）---- */
@media (forced-colors: active) {
	.scb-p3-inquiry-form .fluentform .ff-el-form-control {
		border: 1px solid CanvasText;
		background-color: Field;
		color: CanvasText;
	}
	.scb-p3-inquiry-form .fluentform .ff-el-form-control[aria-invalid="true"] {
		border: 2px solid CanvasText;
	}
	.scb-p3-inquiry-form .fluentform .ff-btn-submit {
		border: 1px solid ButtonBorder;
		background-color: ButtonFace;
		color: ButtonText;
	}
	.scb-p3-inquiry-form .fluentform .ff-btn-submit:focus-visible {
		outline: 2px solid Highlight;
	}
}

/* =============================================================================
 * §10 · Tier 3（仅当 Fluent Forms Styler 无法关闭时启用）
 * -----------------------------------------------------------------------------
 * ⚠️ 默认注释掉。仅当后台确认 Styler 无法设为 "Inherit theme style / None"
 *    （见规格 §5.1 / §9 #2），且实测 Tier 2 被 #fluentform_3 … 内联样式覆盖时，
 *    去掉下方注释。
 * 原因：类名重复（.a.a.a，0,4,0）赢不了 ID（#fluentform_3，1,1,0）。
 *       想赢 ID 级特异性，选择器必须带 #fluentform_3（1,2,0）。
 * 启用时每条加注释说明被覆盖的来源。
 * ========================================================================== */
/*
.scb-p3-inquiry-form #fluentform_3 .ff-btn-submit {
	min-height: var(--scb-p3-field-height);
	padding: var(--scb-p3-field-pad-y) var(--scb-p3-space-6);
	border-radius: var(--scb-p3-radius-md);
	background-color: var(--scb-p3-color-accent);
	color: var(--scb-p3-color-accent-text);
	border: 1px solid transparent;
	font-size: var(--scb-p3-fs-body);
	font-weight: var(--scb-p3-fw-medium);
}
.scb-p3-inquiry-form #fluentform_3 .ff-el-form-control {
	min-height: var(--scb-p3-field-height);
	border: 1px solid var(--scb-p3-color-field-border);
	border-radius: var(--scb-p3-radius-md);
	font-size: var(--scb-p3-fs-body);
}
*/

/* =============================================================================
 * §11 空态面板 —— .scb-p3-empty（案例集合页无匹配结果）
 * 依据：绘月集合页规格（2026-08-07 定稿）②空态：
 *       Heading "No matching projects" + Body + 双 CTA
 *       （Request a quote → /contact-us/ · View all projects → base_url 清筛选）
 * 复用 tokens：surface / border / radius-lg / space-* / 排版 + .scb-p3-btn。
 * ========================================================================== */
.scb-p3-empty-section {
	padding-block: var(--scb-p3-space-8);
}

.scb-p3-empty {
	background-color: var(--scb-p3-color-surface);
	border: 1px solid var(--scb-p3-color-border);
	border-radius: var(--scb-p3-radius-lg);
	padding: var(--scb-p3-space-12) var(--scb-p3-space-6);
	text-align: center;
}

.scb-p3-empty__title {
	font-size: var(--scb-p3-fs-h3);
	line-height: var(--scb-p3-lh-h3);
	font-weight: var(--scb-p3-fw-semibold);
	color: var(--scb-p3-color-ink);
	margin: 0 0 var(--scb-p3-space-3);
}

.scb-p3-empty__body {
	font-size: var(--scb-p3-fs-body);
	line-height: var(--scb-p3-lh-body);
	color: var(--scb-p3-color-ink-secondary);
	margin: 0 auto var(--scb-p3-space-6);
	max-width: 52ch;
}

.scb-p3-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--scb-p3-space-3);
	justify-content: center;
}

@media (min-width: 640px) {
	.scb-p3-empty {
		padding: var(--scb-p3-space-16) var(--scb-p3-space-12);
	}
}


/* =============================================================================
 * §12 SEO 富文本 —— .scb-p3-prose / .scb-p3-prose-section
 * -----------------------------------------------------------------------------
 * 消费者：
 *   · 集合页 term 顶部 / 底部文案（industries_categories_content_top / _bottom）
 *   · 详情页案例摘要（case_summary）
 * 约束：
 *   · 内容来自 ACF wysiwyg（PHP 侧已 wp_kses_post + h1→h2 降级），
 *     这里只负责排版，绝不出现 !important、绝不给裸标签写全局规则。
 *   · 行宽控制在 ~78ch，长文可读性优先（v3 §2 排版基线）。
 * ========================================================================== */
.scb-p3-prose {
	font-size: var(--scb-p3-fs-body);
	line-height: var(--scb-p3-lh-body);
	color: var(--scb-p3-color-ink-secondary);
	max-width: 78ch;
}

.scb-p3-prose > *:first-child { margin-block-start: 0; }
.scb-p3-prose > *:last-child  { margin-block-end: 0; }

.scb-p3-prose p {
	margin-block: 0 var(--scb-p3-space-4);
}

/* 用户文案里的 h2/h3 一律降一档视觉，避免与区块标题（fs-h2）抢层级 */
.scb-p3-prose h2 {
	font-size: var(--scb-p3-fs-h3);
	line-height: var(--scb-p3-lh-h3);
	font-weight: var(--scb-p3-fw-semibold);
	color: var(--scb-p3-color-ink);
	margin-block: var(--scb-p3-space-8) var(--scb-p3-space-3);
}

.scb-p3-prose h3 {
	font-size: var(--scb-p3-fs-h4);
	line-height: var(--scb-p3-lh-h4);
	font-weight: var(--scb-p3-fw-semibold);
	color: var(--scb-p3-color-ink);
	margin-block: var(--scb-p3-space-6) var(--scb-p3-space-2);
}

.scb-p3-prose h4,
.scb-p3-prose h5,
.scb-p3-prose h6 {
	font-size: var(--scb-p3-fs-body);
	line-height: var(--scb-p3-lh-body);
	font-weight: var(--scb-p3-fw-semibold);
	color: var(--scb-p3-color-ink);
	margin-block: var(--scb-p3-space-6) var(--scb-p3-space-2);
}

.scb-p3-prose ul,
.scb-p3-prose ol {
	margin-block: 0 var(--scb-p3-space-4);
	padding-inline-start: var(--scb-p3-space-6);
}

.scb-p3-prose li {
	margin-block-end: var(--scb-p3-space-2);
}

.scb-p3-prose li::marker {
	color: var(--scb-p3-color-ink-tertiary);
}

.scb-p3-prose a {
	color: var(--scb-p3-color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.scb-p3-prose a:hover {
	color: var(--scb-p3-color-accent-hover);
}

/* a11y §4.4：焦点环与全站一致（键盘可达） */
.scb-p3-prose a:focus-visible {
	outline: var(--scb-p3-focus-width) solid var(--scb-p3-focus-color);
	outline-offset: var(--scb-p3-focus-offset);
	border-radius: var(--scb-p3-radius-sm);
}

.scb-p3-prose strong { color: var(--scb-p3-color-ink); font-weight: var(--scb-p3-fw-semibold); }

.scb-p3-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--scb-p3-radius-md);
}

.scb-p3-prose blockquote {
	margin-block: 0 var(--scb-p3-space-4);
	margin-inline: 0;
	padding-inline-start: var(--scb-p3-space-4);
	border-inline-start: 3px solid var(--scb-p3-color-border);
	color: var(--scb-p3-color-ink-secondary);
}

/* 表格：窄屏可横向滚动，不撑破容器 */
.scb-p3-prose table {
	display: block;
	overflow-x: auto;
	width: 100%;
	border-collapse: collapse;
	margin-block: 0 var(--scb-p3-space-4);
	font-size: var(--scb-p3-fs-body-sm);
	line-height: var(--scb-p3-lh-body-sm);
}

.scb-p3-prose th,
.scb-p3-prose td {
	border: 1px solid var(--scb-p3-color-border);
	padding: var(--scb-p3-space-2) var(--scb-p3-space-3);
	text-align: start;
	vertical-align: top;
}

.scb-p3-prose th {
	background-color: var(--scb-p3-color-border-subtle);
	color: var(--scb-p3-color-ink);
	font-weight: var(--scb-p3-fw-semibold);
}

/* SEO 长文允许略宽的行宽 */
.scb-p3-prose--seo { max-width: 82ch; }

/* 文案块容器：
 * 不带修饰符时保持零 padding —— 详情页用 .scb-p3-section 供给区块留白，
 * 这里不能反向覆盖（同特异性后到先赢会吃掉 --scb-p3-section-y）。 */
.scb-p3-prose-section--top {
	padding-block: var(--scb-p3-space-8) var(--scb-p3-space-2);
}

.scb-p3-prose-section--bottom {
	padding-block: var(--scb-p3-space-16) var(--scb-p3-space-4);
}


/* =============================================================================
 * §13 案例详情页 ACF 区块 —— 头部信息带 / 封面 / 图库
 *   PHP：scb-p3/scb-detail-enhancer.php
 *   ① .scb-p3-detail-head   案例标题 + case_id + 行业·地点·年份
 *   ② .scb-p3-case-cover    case_cover（本页唯一 eager 图，固定比例零 CLS）
 *   ③ .scb-p3-gallery       case_gallery（1 / 2 / 3 列响应式）
 * ========================================================================== */
.scb-p3-detail-head {
	padding-block: var(--scb-p3-space-8) 0;
}

.scb-p3-detail-head__title {
	font-size: var(--scb-p3-fs-h2);
	line-height: var(--scb-p3-lh-h2);
	font-weight: var(--scb-p3-fw-semibold);
	color: var(--scb-p3-color-ink);
	margin: 0 0 var(--scb-p3-space-2);
}

.scb-p3-detail-head__id {
	font-size: var(--scb-p3-fs-body-sm);
	line-height: var(--scb-p3-lh-body-sm);
	color: var(--scb-p3-color-ink-tertiary);
	letter-spacing: 0.02em;
	margin: 0 0 var(--scb-p3-space-2);
}

/* 行业标签与 meta 文本同基线（标签后已由 PHP 输出一个空格） */
.scb-p3-detail-head .scb-p3-case-card__tag {
	margin-inline-end: var(--scb-p3-space-1);
	vertical-align: baseline;
}

/* ---- 案例封面 -------------------------------------------------------------- */
.scb-p3-case-cover {
	padding-block: var(--scb-p3-space-6) 0;
}

.scb-p3-case-cover__media {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--scb-p3-radius-lg);
	background-color: var(--scb-p3-color-border-subtle);
}

/* ---- 案例图库 -------------------------------------------------------------- */
.scb-p3-gallery {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--scb-p3-grid-gap);
}

.scb-p3-gallery__item {
	margin: 0;
	min-width: 0;
}

.scb-p3-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--scb-p3-radius-md);
	background-color: var(--scb-p3-color-border-subtle);
}

@media (min-width: 640px) {
	.scb-p3-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.scb-p3-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* =============================================================================
 * §14 案例集合页 term 封面 banner —— .scb-p3-term-cover
 *   PHP：scb-p3/scb-collection-enhancer.php（industries_categories_picture）
 *   视觉参照产品分类页 cover banner，但完全独立命名，线上 .scb-hero-cover 零改动。
 *   对比度：底部深色渐变（#031734 α.80）+ 文字投影 → 白字对比度稳定 ≥ 4.5:1。
 * ========================================================================== */
.scb-p3-term-cover {
	padding-block: var(--scb-p3-space-8) 0;
}

.scb-p3-term-cover__frame {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	border-radius: var(--scb-p3-radius-lg);
	background-color: var(--scb-p3-color-logo-dark);
	aspect-ratio: 16 / 10;
	min-height: 220px;
}

.scb-p3-term-cover__media {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 渐变遮罩：上 30% 全透明（保留画面），下沉到 α.80 托住文字 */
.scb-p3-term-cover__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		180deg,
		rgba(3, 23, 52, 0) 28%,
		rgba(3, 23, 52, 0.55) 66%,
		rgba(3, 23, 52, 0.80) 100%
	);
	pointer-events: none;
}

.scb-p3-term-cover__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: var(--scb-p3-space-6);
	box-sizing: border-box;
}

.scb-p3-term-cover__title {
	font-size: var(--scb-p3-fs-h3);
	line-height: var(--scb-p3-lh-h3);
	font-weight: var(--scb-p3-fw-semibold);
	color: #FFFFFF;
	margin: 0;
	text-shadow: 0 1px 2px rgba(3, 23, 52, 0.55);
}

.scb-p3-term-cover__lead {
	font-size: var(--scb-p3-fs-body-sm);
	line-height: var(--scb-p3-lh-body-sm);
	color: rgba(255, 255, 255, 0.90);
	max-width: 60ch;
	margin: var(--scb-p3-space-2) 0 0;
	text-shadow: 0 1px 2px rgba(3, 23, 52, 0.55);
}

@media (min-width: 640px) {
	.scb-p3-term-cover__frame {
		aspect-ratio: 21 / 9;
		min-height: 280px;
	}
	.scb-p3-term-cover__inner {
		padding: var(--scb-p3-space-8);
	}
	.scb-p3-term-cover__title {
		font-size: var(--scb-p3-fs-h2);
		line-height: var(--scb-p3-lh-h2);
	}
	.scb-p3-term-cover__lead {
		font-size: var(--scb-p3-fs-body);
		line-height: var(--scb-p3-lh-body);
	}
}

@media (min-width: 1024px) {
	.scb-p3-term-cover__frame {
		min-height: 320px;
		max-height: 420px;
	}
}

/* 高对比度偏好：加深遮罩，弱化投影依赖 */
@media (prefers-contrast: more) {
	.scb-p3-term-cover__frame::after {
		background-image: linear-gradient(
			180deg,
			rgba(3, 23, 52, 0.35) 0%,
			rgba(3, 23, 52, 0.92) 100%
		);
	}
}


/* =============================================================================
 * §15 详情页对齐补丁 —— Task #3
 * 依据：specs/05-P3-产品详情页修复规格.md §2.1–§2.6 / specs/06-RankMath-面包屑方案.md
 * 交付：承影 (design-to-code)
 * -----------------------------------------------------------------------------
 * 背景：Blocksy 内容区宽 1400，P3 容器 token 为 1280 → 详情页左右各错位 60px。
 * 策略：只在详情页 body 上「局部」重定义 --scb-p3-container-max，
 *       cascade 自动流到全部后代 .scb-p3-container，组件内部一行不改。
 *       全局 :root 的 --scb-p3-container-max 保持 1280 不动
 *       —— 集合页 / 首页 / About 等零回归（红线①）。
 * 约束：本节零 !important，仅 §15.5 收尾 CTA 兜底一处例外（已授权，见该节说明）。
 * ========================================================================== */


/* -----------------------------------------------------------------------------
 * §15.1（规格 §2.1）详情页 P3 容器对齐 Blocksy 内容宽 1400
 * 只改 token，不动任何组件内部样式 —— 最小爆炸半径、单向可逆。
 * -------------------------------------------------------------------------- */
body.single-b2b-product,
body.single-industry {
	--scb-p3-container-max: 1400px;
}


/* -----------------------------------------------------------------------------
 * §15.2（规格 §2.2）注入外层防御性兜底
 *
 * 【与规格原文的有意偏差 —— 请绘月复核】
 * 规格原文把 max-width + padding-inline 直接加在 .scb-p3-detail-footer 上。
 * 但该 div 的直接子元素是 <section class="scb-p3-section">，而 section 内部
 * 已经有一层 .scb-p3-container（自带 max-width + padding-inline: gutter）。
 * 若外层再加一层 padding-inline，桌面端会叠成 2 × 32px：
 *     内容宽 1336 → 1272，左缘比原生内容反而多缩 32px
 * —— 恰好制造出本次要修的那类错位。同时外层 max-width 还会把 section
 * 的通栏底色裁到 1400，破坏信任带 / 相关案例的整幅背景。
 *
 * 因此这里改为「无害兜底」：
 *   1) 外层只保证 width:100% + border-box，不设 max-width / padding（保通栏底色）；
 *   2) 只有「既不是 section、也不自带 container」的漏包直接子元素才补容器约束。
 * 防御意图 100% 保留，双倍 padding 与底色裁切风险归零。
 * -------------------------------------------------------------------------- */
body.single-b2b-product .scb-p3-detail-footer,
body.single-industry   .scb-p3-detail-footer {
	width: 100%;
	box-sizing: border-box;
}

body.single-b2b-product .scb-p3-detail-footer
	> :not(.scb-p3-section):not(.scb-p3-container):not(script):not(style):not(template),
body.single-industry   .scb-p3-detail-footer
	> :not(.scb-p3-section):not(.scb-p3-container):not(script):not(style):not(template) {
	width: 100%;
	max-width: var(--scb-p3-container-max);
	margin-inline: auto;
	padding-inline: var(--scb-p3-gutter);
	box-sizing: border-box;
}


/* -----------------------------------------------------------------------------
 * §15.3（规格 §2.3）桌面端放宽 intro 行宽 —— 规格默认不启用，保持 68ch 易读行宽。
 * 需要时由绘月点头后取消注释。
 * -------------------------------------------------------------------------- */
/*
@media (min-width: 1024px) {
	body.single-b2b-product .scb-p3-section__intro { max-width: 52ch; }
}
*/


/* -----------------------------------------------------------------------------
 * §15.4（规格 §2.4）相关产品网格解除二次收窄
 * 网格用 repeat(N,1fr)+gap 自动填满容器内宽，列数逻辑（§9 断点）无需改动；
 * 这里只负责「解除任何祖父链上残留的窄 max-width」（用户实测 1080 的来源）。
 * 期望结果：wide ≥1280 时计算宽 ≈ 1336 = 1400 − 2×32 gutter，4 列 × 316 + 3×24 gap。
 * -------------------------------------------------------------------------- */
body.single-b2b-product .scb-p3-product-grid,
body.single-industry   .scb-p3-product-grid {
	width: 100%;
	max-width: none;
}


/* -----------------------------------------------------------------------------
 * §15.5（规格 §2.5）收尾 CTA 兜底隐藏 —— 唯一允许 !important 的一处
 *
 * 首选方案仍是 PHP 不渲染（规格 §4 方案 A）；本条是「模板暂不能改」时的兜底。
 * 用 !important 的理由：本兜底要赢过线上老 scb/ 样式表，而两张表的入队先后
 * 不由 P3 控制；没有 !important 时若老表用了同等或更高特异性就会失效，
 * 兜底也就不成其为兜底。已向主理人报备并获授权。
 *
 * 红线②：只作用于 .scb-closing 修饰类，绝不碰 .scb-section 基座
 *        —— 选择器写成 .scb-section.scb-closing 复合式，两个类同时命中才隐藏。
 * a11y：display:none 会同时移出 tab 顺序与 a11y 树，无焦点陷阱
 *       （优于 visibility/opacity/clip 之类的假隐藏）。
 * -------------------------------------------------------------------------- */
body.single-b2b-product .scb-section.scb-closing {
	display: none !important;
}


/* -----------------------------------------------------------------------------
 * §15.6（规格 §2.6）Rank Math 面包屑样式
 * 结构见 scb-p3-breadcrumb.php；外层 div 同时挂 .scb-p3-container 做 1400 对齐。
 * 不加 body.single-* 作用域：PHP 侧已用 is_singular('b2b-product') 限死渲染范围，
 * 样式保持通用，将来复用到别的 CPT 时零改动。
 * -------------------------------------------------------------------------- */
.scb-p3-breadcrumb {
	padding-block: var(--scb-p3-space-4) var(--scb-p3-space-2);
	font-size: var(--scb-p3-fs-caption);
	line-height: var(--scb-p3-lh-caption);
}

.scb-p3-breadcrumb ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--scb-p3-space-2);
}

.scb-p3-breadcrumb li {
	display: inline-flex;
	align-items: center;
}

.scb-p3-breadcrumb a {
	color: var(--scb-p3-color-ink-secondary); /* #4A4F59 on #FAFAF8 ≈ 8.4:1 ≥ AA */
	text-decoration: none;
}

.scb-p3-breadcrumb a:hover {
	color: var(--scb-p3-color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* 当前页：用 ink 而非 tertiary，保对比度；非链接，不可聚焦
 * 字重用 fw-medium(500) 而非 600：当前页的强调已由 ink 色（区别于次级链接的
 * ink-secondary）+ 中等字重 + › 分隔符共同承担，500 足够且不与页面 H2 的 600 抢视觉。
 * （绘月 2026-08-10 收口，规格 §5.5 已同步改为 500） */
.scb-p3-breadcrumb [aria-current="page"] {
	color: var(--scb-p3-color-ink);
	font-weight: var(--scb-p3-fw-medium);
}

/* -----------------------------------------------------------------------------
 * 末级 crumb 长度收敛（苏探长规格 06 附录 A.5）
 *
 * 线上实测产品名长度：76 / 82 / 109 / 124 / 131 字符（合理区间 20–40）。
 * 131 字符在 375px 下会换三行、撑破容器。
 *
 * 【为什么用 CSS 截断而不是 PHP 截断】
 *   PHP 侧唯一的截断点是 rank_math/frontend/breadcrumb/items filter，
 *   但那个 filter **同时驱动 JSON-LD** —— 在那里截断会把 schema 里的完整产品名
 *   一起截掉，白丢关键词。CSS 截断只影响视觉，schema 与 DOM 文本均保持完整，
 *   SEO 零损失。（本文件的闭包是原样 return 的，没有这个问题，保持现状。）
 *
 * 【a11y】
 *   文本节点完整存在，读屏仍朗读完整产品名；PHP 侧另加了 title 属性，
 *   鼠标悬停可看全称。视觉截断不影响任何辅助技术。
 * -------------------------------------------------------------------------- */
.scb-p3-breadcrumb__leaf {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom; /* 防 inline-block 基线错位导致的 1px 抖动 */
}

/* 移动端最紧：给前两级留出空间，末级最多占约 20 字符宽 */
@media (max-width: 639px) {
	.scb-p3-breadcrumb__leaf { max-width: 20ch; }
}
@media (min-width: 640px) and (max-width: 1023px) {
	.scb-p3-breadcrumb__leaf { max-width: 34ch; }
}
@media (min-width: 1024px) {
	.scb-p3-breadcrumb__leaf { max-width: 48ch; }
}

/* 分隔符：装饰性，走 ::after 不进 DOM，读屏不朗读 */
.scb-p3-breadcrumb li:not(:last-child)::after {
	content: "\203A"; /* › */
	margin-left: var(--scb-p3-space-2);
	color: var(--scb-p3-color-ink-tertiary);
}

/* 焦点环：与全站 P3 焦点样式一致（a11y §4.4） */
.scb-p3-breadcrumb a:focus-visible {
	outline: var(--scb-p3-focus-width) solid var(--scb-p3-focus-color);
	outline-offset: var(--scb-p3-focus-offset);
	border-radius: var(--scb-p3-radius-sm);
}
.scb-p3-breadcrumb a:focus:not(:focus-visible) { outline: none; }
@supports not selector(:focus-visible) {
	.scb-p3-breadcrumb a:focus {
		outline: var(--scb-p3-focus-width) solid var(--scb-p3-focus-color);
		outline-offset: var(--scb-p3-focus-offset);
	}
}

/* Windows 高对比度：让面包屑跟随系统色，不被自定义色吞掉 */
@media (forced-colors: active) {
	.scb-p3-breadcrumb a { color: LinkText; }
	.scb-p3-breadcrumb [aria-current="page"] { color: CanvasText; }
	.scb-p3-breadcrumb li:not(:last-child)::after { color: CanvasText; }
	.scb-p3-breadcrumb a:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* -----------------------------------------------------------------------------
 * §15.6b 回退路径样式：Rank Math 原生 HTML
 * 当拿不到 breadcrumb items 数组、只能直接吐 RM 原生结构
 * （<nav class="rank-math-breadcrumb"><p>a › a › <span class="last">）时，
 * 用这组选择器保证视觉与上面的 <ol> 版本完全一致。
 * -------------------------------------------------------------------------- */
.scb-p3-breadcrumb .rank-math-breadcrumb p {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--scb-p3-space-2);
}
.scb-p3-breadcrumb .rank-math-breadcrumb a {
	color: var(--scb-p3-color-ink-secondary);
	text-decoration: none;
}
.scb-p3-breadcrumb .rank-math-breadcrumb a:hover {
	color: var(--scb-p3-color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.scb-p3-breadcrumb .rank-math-breadcrumb .last {
	color: var(--scb-p3-color-ink);
	font-weight: var(--scb-p3-fw-medium);
}
.scb-p3-breadcrumb .rank-math-breadcrumb .separator {
	color: var(--scb-p3-color-ink-tertiary);
}

/* -----------------------------------------------------------------------------
 * §15.7（老 scb 区块）Overview / Why Buy Direct 拉宽到 1400 —— 管的是「老 scb 区块」不是 P3 区块
 *
 * ⚠️ 与 §15.1 区分：§15.1 是 P3 容器 token（--scb-p3-container-max）的作用域覆盖，
 *    作用于 P3 自己的 .scb-p3-* 组件。本节管的是**老 scb 区块系统**的 .scb-prose /
 *    .scb-section__intro —— 这两个类不属于 P3，是 Blocksy 原生 / ACF / Gutenberg 搭的旧模块。
 *
 * ① 为什么在本表 grep 不到它们既有规则是正常的：这两个类的样式定义写在线上
 *    scb-design-system.css（老 scb 表），该文件**不在本仓库**。所以在 P3 表内搜
 *    .scb-prose / .scb-section__intro 搜不到，不等于类不存在——恰恰相反，正因为它的
 *    定义在我们够不着的另一张表里、且把内容宽锁在 606px，我们才需要在这里新增一条
 *    覆盖规则去赢过它。铁证见探针 HTML：.tmp/pd.html L484 = .scb-prose、L560 =
 *    .scb-section__intro；.tmp/pd2.html L484 同样命中 .scb-prose。
 *
 * ② 为什么用 !important（本文件第三处已报备的防御性例外）：无法确认老表是否用
 *    !important 或更高特异性把 606 锁死；且两张表的入队先后**不由 P3 控制**。不加
 *    !important，若老表用了同等/更高特异性则整条失效。前两处已报备例外是：
 *    §15.5 收尾 CTA 兜底、面包屑相关兜底。
 *
 * ③ 作用域前缀绝不能省：首页 home.html 里同款的 .scb-sec-why-direct / .scb-points
 *    也是 606px 宽，那是建站原设计的**刻意窄栏排版**。写成裸 .scb-prose 会把首页
 *    一起改宽，属误伤。故四条选择器必须各自带 body.single-b2b-product /
 *    body.single-industry 前缀。
 *
 * ④【2026-08-10 第二轮补充】.scb-points 原漏覆盖：
 *    Why Buy Direct 模块由「首行导语 .scb-section__intro + 4 个要点 .scb-points」两部分组成。
 *    首轮只写了 .scb-prose / .scb-section__intro，于是产品页上只有首行变成 1400，
 *    下面 4 个要点仍被老表锁在 606px，视觉上宽窄断裂。本轮把 .scb-points 并入同一条
 *    声明（共用 max-width:1400px !important），六条选择器一起生效。
 *    首页的 .scb-points 依旧是原设计的窄栏排版：本节**不含 body.home**，作用域天然
 *    不命中首页，首页 Why Direct 保持原样（主理人明确要求）。
 *
 * 约束：只改 max-width，不碰 padding / margin / 字号 / 行高；只改 CSS，不碰任何 PHP。
 * -------------------------------------------------------------------------- */
body.single-b2b-product .scb-prose,
body.single-industry   .scb-prose,
body.single-b2b-product .scb-section__intro,
body.single-industry   .scb-section__intro,
body.single-b2b-product .scb-points,
body.single-industry   .scb-points {
	max-width: 1400px !important;
}

/* -----------------------------------------------------------------------------
 * §15.7b【2026-08-11 第三轮】产品页正文区块整模块拉 1400
 *
 * 根因（§15.7 只改子元素为何不够）：产品页 Why Buy Direct 的真实 DOM 是
 *   <section class="scb-section" aria-labelledby="scb-sec-why">
 *     <div class="scb-points"><p>…</p></div>
 *   </section>
 * §15.7 已给 .scb-points 设了 max-width:1400 !important，但**父级 .scb-section 被线上
 * legacy 表 scb-design-system.css（不在本仓库）锁死在 606px**。子元素的 max-width 只是
 * 「不超过 1400」的上限，实际可用宽仍受父容器约束 —— 父 606，子永远超不过 606。
 * 所以必须连父级 .scb-section 一起拉宽，§15.7 的子元素规则才真正生效（两节配合，缺一不可）。
 *
 * 为什么必须 :not(.scb-hero)：产品 hero 也挂 .scb-section（真实 DOM 为
 * <section class="scb-section scb-hero">，见 pd.html L405），它是左图右文两栏，
 * 宽度/栅格由 hero 自己那套规则管，被连带拉宽会破坏图文比例。故显式排除，hero 保持原样。
 * 本节实际命中的是 Overview / Why Buy Direct / Spec / Closing 这些**正文区块**。
 *
 * 为什么不加首页作用域（反向验收点）：首页同款 .scb-section / .scb-points 是建站原
 * 设计的刻意窄栏排版，主理人明确要求保持不变。本节四条选择器的 body 前缀**只有**
 * single-b2b-product 一种，天然不命中首页 —— 与 §15.7 的作用域纪律一致。
 *
 * !important 沿用 §15.7 已报备的理由：无法确认 legacy 表是否用 !important 锁 606，
 * 且两张表的入队先后不由 P3 控制，不加则可能整条失效。
 * margin-inline:auto —— 容器放宽后需显式居中，否则在更宽的父级里会左对齐。
 * 下半段三条子元素（.scb-prose / .scb-points / .scb-section__intro）带 width:100%，
 * 解除 legacy 可能同时存在的固定 width，让它们吃满已放宽的父容器。
 *
 * 约束：只改宽度相关属性，不碰 padding / 字号 / 行高 / 配色；只改 CSS，不碰 PHP。
 * -------------------------------------------------------------------------- */
body.single-b2b-product .scb-section:not(.scb-hero) {
	max-width: 1400px !important;
	margin-inline: auto !important;
}

body.single-b2b-product .scb-section:not(.scb-hero) .scb-prose,
body.single-b2b-product .scb-section:not(.scb-hero) .scb-points,
body.single-b2b-product .scb-section:not(.scb-hero) .scb-section__intro {
	max-width: 1400px !important;
	width: 100% !important;
}

/* -----------------------------------------------------------------------------
 * §15.7c【2026-08-11 第四轮】解除 .scb-points > p 的 75ch 行宽锁 —— Why Buy Direct 606px 真凶
 *
 * ■ 实证根因（已下载线上 legacy 表核实，非推断）
 *   线上 wp-content/themes/blocksy-child/assets/css/scb-design-system.css（**不在本仓库**）
 *   L813–819 存在这条规则：
 *     .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;
 *     }
 *   同表 L49 定义 --scb-fs-15: 15px。
 *   数学换算：75ch @ 15px ≈ 75 × 8.086px ≈ 606.45px —— 与主理人实测的 606.45px
 *   分毫不差，数学闭环。所以被锁的从来不是容器，是容器里的**每一个 <p>**。
 *
 * ■ 前两轮为何都没修好（层级搞错了，三个层级要分清）
 *   · §15.7  覆盖的是**容器** .scb-points          → 容器已放开到 1400
 *   · §15.7b 覆盖的是**父级** .scb-section          → 父级已放开到 1400
 *   · 真凶是**孙级** .scb-points > p               → 前两轮都没碰到
 *   结果就是：容器确实 1400 了，但里面 4 个 <p> 各自仍被 75ch 锁在 606，
 *   视觉上完全看不出前两轮改过。
 *
 * ■ 反证（本诊断自洽的旁证）
 *   Overview(.scb-prose) 与导语(.scb-section__intro) 第二轮就修好了 —— 因为 legacy
 *   只给这**两个容器**设了 75ch（L165 / L211），它们的 <p> 子级在 legacy 里没有任何
 *   宽度限制，所以覆盖容器一层就够。唯独 .scb-points 是「容器 + > p」**两层都有锁**，
 *   只覆盖容器自然无效。两类模块表现不同，恰好印证锁在哪一层。
 *
 * ■ 命中的真实 DOM（产品页 Why Buy Direct，ACF WYSIWYG 输出 4 个顶层 <p>，
 *   legacy 注释称其为「结构 B」）
 *     <section class="scb-section" aria-labelledby="scb-sec-why">
 *       <h2 class="scb-section__title">Why Buy Direct from the Factory</h2>
 *       <div class="scb-section__intro"><p>…</p></div>
 *       <div class="scb-points"><p>1. One Factory…</p>…×4</div>
 *     </section>
 *
 * ■ 为什么用 max-width:100% 而不是 1400px
 *   父级 §15.7 / §15.7b 已把容器与 section 封顶在 1400，这里只需**解除行宽锁**即可，
 *   同时保留「不超出父容器」的兜底语义。将来父级宽度若调整，本节无需同步改动。
 *
 * ■ 为什么只覆盖 > p，不顺手加 > ul / > h2 / > h3 / > h4
 *   已 grep 确认 legacy 里带 max-width 的顶层块**只有 > p** 一条，其余顶层块无宽度限制。
 *   最小必要改动，不做防御性扩大 —— 多写的选择器既无收益，又会掩盖将来真实的新问题。
 *
 * ■ 为什么不含 body.home（反向验收点）
 *   首页同款 .scb-points 的窄栏排版是建站原设计，主理人明确要求保持不变。
 *   本节作用域**只有** single-b2b-product / single-industry 两种，天然不命中首页 ——
 *   与 §15.7 / §15.7b 的作用域纪律完全一致。
 *
 * ■ !important 沿用 §15.7 / §15.7b 已报备的同一理由：无法确认 legacy 表是否用
 *   !important 或更高特异性锁死，且两张表的入队先后不由 P3 控制，不加则可能整条失效。
 *
 * 约束：只解除 max-width，不碰 margin / 字号 / 行高 / 配色 / overflow-wrap；只改 CSS。
 * -------------------------------------------------------------------------- */
body.single-b2b-product .scb-points > p,
body.single-industry   .scb-points > p {
	max-width: 100% !important;
}

/* -----------------------------------------------------------------------------
 * §15.8（路线 B）Blocksy 原生面包屑视觉对齐
 *
 * 路线 B：产品页面包屑由 Blocksy Content Block 模板 #1026 的 Breadcrumbs 区块输出
 * （外层 .ct-breadcrumbs，其 Source 已在 WP 后台切成 Rank Math）。本 PHP 文件不渲染
 * 面包屑（见 scb-p3-breadcrumb.php 头部：默认关闭）。
 *
 * 目标：让 Blocksy 这条 .ct-breadcrumbs 看起来与 §15.6 的 ol 面包屑一致 ——
 *   字号 / 行高 / 字重 / 上下留白全部改用 P3 token；链接 ink-secondary、
 *   hover accent + 下划线、当前页 ink + medium、分隔符 ink-tertiary。
 *
 * 作用域严格限定 body.single-b2b-product .ct-breadcrumbs，绝不写裸的 .ct-breadcrumbs，
 * 避免污染站内其它用到 Blocksy 面包屑的页面（集合页 / 案例页等）。
 *
 * 零 !important：Blocksy 默认面包屑特异性低，body.single-b2b-product 前缀已足够赢过。
 *
 * 【2026-08-10 第二轮：已按线上真实 DOM 精修，推测规则全部清掉】
 *   主理人提供的真实结构：
 *     <nav class="ct-breadcrumbs" data-source="default">
 *       <span class="first-item"><a>Home</a><svg class="ct-separator">…</svg></span>
 *       <span class="last-item" aria-current="page">产品名</span>
 *     </nav>
 *   据此收敛：
 *   · 末项：`> span:last-child` 与 `[aria-current="page"]` 两条都命中 .last-item，保留；
 *     原推测的 `.last` 类写法不存在（真实类名是 .last-item，且已被上面两条覆盖），删。
 *   · 分隔符：真实是 <svg class="ct-separator">，既不是 span.separator 也不是 ::after。
 *     换成 svg.ct-separator 一条；Blocksy 该 svg 用 fill="currentColor"，故设 color 即生效。
 *     原两条 ::after 规则不命中任何元素，属纯噪音，删（留着还会在别的结构下误插 › 字符）。
 *   · data-source 当前仍是 "default"，说明 #1026 的 Breadcrumbs 区块 Source 尚未切成
 *     Rank Math（三级层级要靠主理人在后台改，不在本文件职责内）。本节只管视觉，
 *     无论 Source 是 default 还是 Rank Math，上述选择器都命中，改完后台无需回来动 CSS。
 * -------------------------------------------------------------------------- */
body.single-b2b-product .ct-breadcrumbs {
	margin: 0;
	padding-block: var(--scb-p3-space-4) var(--scb-p3-space-2);
	font-size: var(--scb-p3-fs-caption);
	line-height: var(--scb-p3-lh-caption);
	color: var(--scb-p3-color-ink);
}

/* 链接态：ink-secondary → hover accent + 下划线（与 §15.6 一致） */
body.single-b2b-product .ct-breadcrumbs a {
	color: var(--scb-p3-color-ink-secondary);
	text-decoration: none;
}
body.single-b2b-product .ct-breadcrumbs a:hover {
	color: var(--scb-p3-color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* 当前页：真实 DOM 是 <span class="last-item" aria-current="page">，两条选择器都命中它 */
body.single-b2b-product .ct-breadcrumbs > span:last-child,
body.single-b2b-product .ct-breadcrumbs [aria-current="page"] {
	color: var(--scb-p3-color-ink);
	font-weight: var(--scb-p3-fw-medium);
}

/* 分隔符：真实是 <svg class="ct-separator">（fill=currentColor，设 color 即生效） */
body.single-b2b-product .ct-breadcrumbs svg.ct-separator {
	color: var(--scb-p3-color-ink-tertiary);
}


/* -----------------------------------------------------------------------------
 * §15.9（老 scb 区块）相关/品类网格解除 1080 收窄 —— 拉到 1400
 *
 * ⚠️ 与 §15.4 区分：§15.4 管的是 P3 自己的 .scb-p3-product-grid；本节管的是**老 scb
 *    区块系统**的 .scb-related__grid —— 由 scb-block-product-grid.php（Home #3 产品品类）
 *    与 scb-block-case-grid.php（Home #4 行业案例 / 产品页 Related）渲染，两者共用
 *    同一个 <ul class="scb-related__grid">（首页那两处再多挂一个 .scb-grid--six）。
 *
 * 为什么需要这条：.scb-related__grid 的宽度定义在线上 legacy 表 scb-design-system.css
 * （Code Snippet #30，**不在本仓库**），把 max-width 锁在 1080px。所以在本表里 grep
 * 不到它的既有规则是正常的，不等于类不存在。
 *
 * 为什么零 !important 就够：本表由 scb-p3-loader.php 挂在 wp_enqueue_scripts 优先级
 * 20 入队，晚于 legacy 表；同特异性时后来者胜。且 body.single-b2b-product / body.home
 * 前缀本身已把特异性抬高一级，稳赢 legacy 的裸类规则。
 *
 * 作用域拆两条而不写裸类的理由：
 *   · body.single-b2b-product → 产品页底部 Related Products
 *   · body.home              → 首页 Browse Product Line + Project Cases by Industry
 *     （首页 body class 已用探针确认为 `home page-id-990`，body.home 成立）
 *   其它页面（About / OEM / Whole-Store 等）若也用到这个网格，维持 legacy 1080 原样，
 *   不误伤。
 *
 * width:100% 与 max-width 配对写：解除 legacy 可能同时存在的固定 width，
 * 让网格 repeat(N,1fr)+gap 正常填满容器内宽。
 * -------------------------------------------------------------------------- */
body.single-b2b-product .scb-related__grid {
	max-width: 1400px;
	width: 100%;
}

body.home .scb-related__grid {
	max-width: 1400px;
	width: 100%;
}


/* -----------------------------------------------------------------------------
 * §15.10（老 scb 区块）Certifications 徽章条宽度 —— 1200px（= 图源原生宽）
 *
 * 模块由 scb/scb-block-badges.php 渲染：<section class="scb-section scb-badges">，
 * 内含 <img class="scb-badges__img">。legacy 表把容器锁窄，图被迫缩显示，
 * 白白浪费分辨率，故本节接管其宽度。
 *
 * 【宽度沿革】legacy 1080 →（第三轮）1400 →（第四轮）**1200，定稿**
 *
 * 【2026-08-11 第四轮】从 1400 改回 1200，两条理由：
 *   ① 图源原生宽就是 1200w —— 线上「认证Certifications.jpg」的 srcset 最大档只有
 *      1200w，没有更大的候选图。容器给到 1400 并不会让浏览器找到更清晰的图，
 *      只会把 1200w 的位图**放大 1.167 倍显示 → 放大失真、糊边**。
 *      第三轮「拉宽能让浏览器挑更大候选图」的假设，在这张图上不成立。
 *   ② 容器与图同为 1200 是为了**标题与图左边缘对齐**：容器 1400 而图 1200 时，
 *      同属该 section 的 .scb-section__title 会按容器宽排布，比图宽出 200px，
 *      标题左边缘与图左边缘错开 100px（居中后各让一半），视觉错位。
 *      两者同宽则天然对齐，无需额外补偿。
 *   同步改回的还有 scb/scb-block-badges.php 的 sizes 提示（1400px → 1200px），
 *   让提示值与实际渲染宽一致 —— 提示值大于实际渲染宽会让浏览器多下无用带宽，
 *   小于实际渲染宽则会挑小图再放大导致糊边，两头都要避免。
 *
 * 注：本节因此**不再**与 §15.7b / §15.9 的 1400 主栏宽度线对齐 —— 那条对齐诉求
 *   （避免纵向扫视出现宽度断层）让位于「不放大失真」这个更硬的约束：宽度断层是
 *   观感偏好，位图放大是画质损失，后者不可逆。§15.7/15.7b/15.9/15.12 的 1400 保持不变。
 *
 * 为什么这里不加 body 作用域（与 §15.7 / §15.9 的做法不同）：
 *   .scb-badges 是**模块专有类**，全站只有这一个徽章条组件，任何页面上它都应该是
 *   同一副样子，不存在「首页要窄、详情页要宽」的分歧。§15.7/§15.9 之所以必须带
 *   body 前缀，是因为那些类（.scb-points / .scb-related__grid）在首页有刻意的窄栏
 *   设计，裸类会误伤。这里没有该风险，故保持通用 —— Home / About / OEM /
 *   Whole-Store 四页一次生效，将来复用零改动。
 *
 * margin-inline:auto —— 容器有上限宽后需显式居中，否则在更宽的父级里会左对齐。
 * height:auto 与 width:100% 配对 —— 防止 WP 输出的 width/height 属性造成拉伸变形，
 * 保住横幅原始宽高比，同时保留属性本身以避免 CLS。
 * -------------------------------------------------------------------------- */
.scb-badges {
	/* 2026-08-12 用户验收：1200 → 1400px。让 Certifications 模块与 P3 主栏
	 * (§15.7b/15.9/15.12 的 1400) 对齐，消除宽度断层 + 标题与图左边缘对齐。
	 * 代价：图源原生 1200w，CSS 拉到 1400 即被放大 1.167× 显示（轻微失真，
	 * 横幅 B2B 认证图肉眼可接受）。若需要更清晰，上传 ≥1400w 源图替换媒体库图即可。 */
	max-width: 1400px;
	margin-inline: auto;
}

.scb-badges__img {
	/* 2026-08-12：max-height:none 解除 legacy 表(.scb-design-system.css 23.4)的
	 * .scb-badges__img max-height:56px + width:auto —— 这是"图片缩成一行小图"的
	 * 真正元凶（§15.10 此前只改 max-width 没重置限高，height:auto 不覆盖 max-height）。
	 * 同时 max-width:1400px 覆盖 legacy 第一套的 max-width:720px（P3 后加载胜出）。
	 * 边框/圆角沿用 legacy（border+radius 不参与尺寸约束）。 */
	width: 100%;
	max-width: 1400px;
	max-height: none;
	height: auto;
}


/* -----------------------------------------------------------------------------
 * §15.11 案例页 Project Overview 文案区拉满容器
 *
 * .scb-p3-prose 的基础规则（本表 §12，约 L1548）给了 max-width:78ch ≈ 731px —— 那是
 * 给长文正文准备的易读行宽，默认值本身没问题，通用场景要保留。
 *
 * 但案例页的 Project Overview 是**模块化排版**（左右分栏 / 与图文卡并列），整个模块
 * 容器实测 1336px，里面的文案区被 78ch 卡在 731px，右侧空出一大片，视觉上像没写完。
 *
 * 故只在 body.single-industry 作用域下解除行宽限制、让它吃满父容器宽度；
 * 其它页面（产品页 SEO 长文等）的 .scb-p3-prose 继续用 78ch 保持易读性，不受影响。
 * 用 max-width:100% 而不是 none：保留「不超出父容器」的兜底语义。
 * -------------------------------------------------------------------------- */
body.single-industry .scb-p3-prose {
	max-width: 100%;
}


/* -----------------------------------------------------------------------------
 * §15.12【2026-08-11 第三轮】案例详情页 hero（左图右文，镜像产品 hero）
 *
 * 配套 PHP：scb-p3/scb-detail-enhancer.php 的 scb_p3_render_case_hero()。
 * 输出 DOM：
 *   <section class="scb-section scb-hero scb-case-hero" aria-labelledby="scb-sec-case-hero">
 *     <div class="scb-case-hero__media"><img></div>
 *     <div class="scb-hero__info">
 *       <h1 class="scb-hero__title" id="scb-sec-case-hero">   (2026-08-12 第五轮 B2：h2 → h1，本页唯一 H1)
 *       <dl class="scb-meta"><div class="scb-meta__row"><dt><dd>…
 *       <div class="scb-case-hero__form">
 *
 * 它取代了原来上下堆叠的「头部信息带 + 全宽封面图」两块，与产品详情页 hero 的
 * 左图右文观感对齐 —— 两类详情页此后共用同一套首屏节奏。
 *
 * 为什么用独立的 .scb-case-hero 而不直接复用产品 hero 的样式：产品 hero 的栅格与
 * 内距定义在线上 legacy 表里（不在本仓库），直接蹭它等于把案例页绑死在一份读不到、
 * 改不动的规则上。这里自带一套完整的两栏定义，行为可预期、可维护。
 * section 上同时保留 .scb-hero 类：让 §15.7b 的 :not(.scb-hero) 排除条款对案例页
 * 同样成立（虽然 §15.7b 作用域是 b2b-product，但类语义保持一致，将来若拉宽规则
 * 扩到案例页也不会误伤 hero）。
 *
 * 零 !important：body.single-industry 前缀 + 本表晚于 legacy 表入队（loader 优先级
 * 20），同特异性后来者胜，足够赢过 legacy 的裸类规则。
 *
 * minmax(0, 1fr) 而不是 1fr：grid 项默认 min-width:auto，图片较宽时会把栅格撑破，
 * 显式 minmax(0,…) 允许列收缩，图才会老实按 width:100% 缩进容器。
 *
 * 无媒体降级：case_cover 与 featured image 都为空时，PHP 不输出 media 容器并在
 * section 上挂 .scb-case-hero--no-media，这里把栅格收成单列 —— 否则右侧信息只占
 * 一半宽、左边空一大块。
 *
 * 响应式：≤900px 落单列（图在上、信息在下，与 DOM 顺序一致，不用 order 打乱
 * 朗读顺序），gap 从 48 收到 24 省纵向空间。
 * -------------------------------------------------------------------------- */
body.single-industry .scb-case-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
	max-width: 1400px;
	margin-inline: auto;
}

body.single-industry .scb-case-hero__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 10px;
}

/* 无图降级：栅格收单列，信息列吃满整宽 */
body.single-industry .scb-case-hero--no-media {
	grid-template-columns: 1fr;
}

body.single-industry .scb-case-hero .scb-meta {
	margin: 12px 0 0;
}

body.single-industry .scb-case-hero__form {
	margin-top: 20px;
}

@media (max-width: 900px) {
	body.single-industry .scb-case-hero {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}


/* =============================================================================
 * §15.13【2026-08-12 第五轮 B3】产品分类归档页 H1 —— .scb-p3-archive-title
 * -----------------------------------------------------------------------------
 * 配套 PHP：scb-p3/scb-detail-enhancer.php 的 scb_p3_archive_h1()。
 * 背景：6 个 product-category 归档页（/reception-desk/ 等）线上走的是 Blocksy
 *   默认归档（data-archive="default"），自定义模板 taxonomy-product-category.php
 *   未接管，且 Blocksy 归档标题关闭 → 全页 0 个 H1。故由 PHP 补一个 H1。
 *
 * 落点有两种可能（取决于哪个钩子先触发，见 PHP 侧钩子数组）：
 *   ① blocksy:* 归档钩子命中 → H1 落在 .entries 网格**之外**（理想位置）
 *   ② loop_start 兜底命中   → H1 落在 .entries[data-layout="grid"] **内部**
 * 情况②下 H1 会成为一个网格单元，故 PHP 内联了 grid-column:1/-1;width:100%
 * 让它独占一整行（内联样式优先级最高，不依赖本文件是否上传 → 布局永不塌）。
 * 本节只负责「好看」，不负责「不塌」—— 即使本 CSS 缺失，页面也不会错位。
 * ========================================================================== */
.scb-p3-archive-title {
	/* 2026-08-12 增量：1400px 宽 + 左对齐（用户验收要求）。内联 width:100%
	 * 会被 max-width 钳制 → 不再撑满全宽（1920），与 P3 内容区对齐；margin 左 0
	 * 保持左对齐。 */
	max-width: 1400px;
	margin: 0 0 var(--scb-p3-space-6, 24px);
	color: var(--scb-p3-color-ink, #14161A);
	font-size: var(--scb-p3-fs-h1, 40px);
	line-height: var(--scb-p3-lh-h1, 48px);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

@media (max-width: 767.98px) {
	.scb-p3-archive-title {
		font-size: var(--scb-p3-fs-h2, 32px);
		line-height: var(--scb-p3-lh-h2, 40px);
	}
}


/* =============================================================================
 * §15.14 2026-08-13 增量：scb-prose--seo 宽度解锁
 * 根因：legacy 表 L2562 锁 `.scb-prose--seo { max-width: 72ch }` ≈ 582.19px（与
 * 第四轮 .scb-points > p 75ch 同模式），让分类页 content_top/bottom 永远只占
 * P3 设计 1400 容器宽的一半。本节显式解锁 = 与祖父级 scb-cat-wrap 同宽。
 * ========================================================================== */
.scb-prose--seo {
	max-width: 100%;
}


/* =============================================================================
 * §15.15 2026-08-13 增量：scb-prose 自身在分类页撑满 1400
 * 根因：scb-prose 默认是 max-content 显示（块级但宽度随内容），分类页场景
 * 必须主动声明 100% 才能跟着 .scb-cat-wrap（1400）走。
 * ========================================================================== */
.scb-prose--seo,
.scb-p3 .scb-prose--seo {
	width: 100%;
	box-sizing: border-box;
}


/* =============================================================================
 * P4（2026-08-13）全站底部 sticky CTA —— .scb-p3-site-cta
 * -----------------------------------------------------------------------------
 * 配套 PHP：scb-p3/scb-site-cta.php（wp_footer 输出，仅前台非产品详情页）。
 * 策略：仅 <768px 显示（移动端 tap-to-call / WhatsApp），桌面隐藏 —— 与产品详情页
 *   .scb-stickycta（仅 <768 显示）一致，避免桌面视觉噪音。
 * 若需桌面也显示：删除下方 @media (min-width: 768px) 隐藏段即可（保持简单）。
 * a11y：按钮 min-height 48px（≥44px 命中区）、focus-visible 轮廓、文字标签。
 * ========================================================================== */
.scb-p3-site-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--scb-p3-z-shortcuts, 800); /* 高于内容、低于主题 header（900）*/
	display: flex;
	align-items: stretch;
	gap: var(--scb-p3-space-3, 12px);
	padding: var(--scb-p3-space-3, 12px) var(--scb-p3-space-4, 16px);
	padding-bottom: calc(var(--scb-p3-space-3, 12px) + env(safe-area-inset-bottom, 0px));
	background: var(--scb-p3-color-surface, #FFFFFF);
	border-top: 1px solid var(--scb-p3-color-border, #E4E6EB);
	box-shadow: 0 -4px 16px rgba(20, 22, 26, 0.08);
	box-sizing: border-box;
}

.scb-p3-site-cta__btn {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--scb-p3-space-2, 8px);
	min-height: var(--scb-p3-touch-min, 48px);
	padding: var(--scb-p3-space-2, 8px) var(--scb-p3-space-3, 12px);
	border-radius: var(--scb-p3-radius-md, 8px);
	font-family: var(--scb-p3-font-family, "Inter", sans-serif);
	font-size: var(--scb-p3-fs-body-sm, 14px);
	line-height: 1.2;
	font-weight: var(--scb-p3-fw-semibold, 600);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background-color var(--scb-p3-transition, 160ms ease-out), transform var(--scb-p3-transition, 160ms ease-out);
	box-sizing: border-box;
}

/* 主行动：WhatsApp（品牌红） */
.scb-p3-site-cta__btn--wa {
	background: var(--scb-p3-color-accent, #E32227);
	color: var(--scb-p3-color-accent-text, #FFFFFF);
}
.scb-p3-site-cta__btn--wa:hover {
	background: var(--scb-p3-color-accent-hover, #CC1F24);
}
.scb-p3-site-cta__btn--wa:active {
	background: var(--scb-p3-color-accent-active, #B81C21);
	transform: translateY(1px);
}

/* 次行动：Call（描边） */
.scb-p3-site-cta__btn--call {
	background: var(--scb-p3-color-surface, #FFFFFF);
	color: var(--scb-p3-color-ink, #14161A);
	border: 1px solid var(--scb-p3-color-border-strong, #C7CBD4);
}
.scb-p3-site-cta__btn--call:hover {
	border-color: var(--scb-p3-color-ink, #14161A);
}

/* 电话号子行：窄屏下可省略，不撑爆 */
.scb-p3-site-cta__phone {
	font-weight: var(--scb-p3-fw-medium, 500);
	opacity: 0.9;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 焦点可见（键盘） */
.scb-p3-site-cta__btn:focus-visible {
	outline: var(--scb-p3-focus-width, 2px) solid var(--scb-p3-focus-color, #E32227);
	outline-offset: 2px;
}

/* 桌面隐藏（与产品页 stickycta 一致） */
@media (min-width: 768px) {
	.scb-p3-site-cta { display: none; }
}

/* 减弱动效 */
@media (prefers-reduced-motion: reduce) {
	.scb-p3-site-cta__btn { transition: none; }
}

/* 高对比模式兜底：保留边框可辨 */
@media (forced-colors: active) {
	.scb-p3-site-cta { border-top: 2px solid CanvasText; }
	.scb-p3-site-cta__btn { border: 1px solid ButtonText; }
}


/* =============================================================================
 * P4（2026-08-13）旧 contact-section NAP 电话链接 —— .scb-contact-section__nap-call
 * -----------------------------------------------------------------------------
 * 配套 PHP：scb/scb-block-contact-section.php（Tel/WhatsApp 卡内新增 tel: 链接）。
 * 本文件全站入队，因此新类样式放这里即可；不动旧 scb-design-system.css。
 * ========================================================================== */
.scb-contact-section__nap-call {
	display: inline-block;
	margin-top: 6px;
	padding: 6px 14px;
	min-height: 44px; /* a11y 命中区 ≥44px */
	line-height: 32px; /* 44 - 6*2 = 32，垂直居中 */
	border: 1px solid var(--scb-p3-color-border-strong, #C7CBD4);
	border-radius: var(--scb-p3-radius-md, 8px);
	color: var(--scb-p3-color-ink, #14161A);
	background: var(--scb-p3-color-surface, #FFFFFF);
	font-size: var(--scb-p3-fs-body-sm, 14px);
	font-weight: var(--scb-p3-fw-semibold, 600);
	text-decoration: none;
}
.scb-contact-section__nap-call:hover {
	border-color: var(--scb-p3-color-ink, #14161A);
}
.scb-contact-section__nap-call:focus-visible {
	outline: var(--scb-p3-focus-width, 2px) solid var(--scb-p3-focus-color, #E32227);
	outline-offset: 2px;
}

/* contact-cards 块内的 Call 按钮（2026-08-13 P4，样式与 nap-call 一致） */
.scb-contact-card__actions { margin: 6px 0 0; }
.scb-contact-card__call {
	display: inline-block;
	padding: 6px 14px;
	min-height: 44px; /* a11y 命中区 ≥44px */
	line-height: 32px;
	border: 1px solid var(--scb-p3-color-border-strong, #C7CBD4);
	border-radius: var(--scb-p3-radius-md, 8px);
	color: var(--scb-p3-color-ink, #14161A);
	background: var(--scb-p3-color-surface, #FFFFFF);
	font-size: var(--scb-p3-fs-body-sm, 14px);
	font-weight: var(--scb-p3-fw-semibold, 600);
	text-decoration: none;
}
.scb-contact-card__call:hover { border-color: var(--scb-p3-color-ink, #14161A); }
.scb-contact-card__call:focus-visible {
	outline: var(--scb-p3-focus-width, 2px) solid var(--scb-p3-focus-color, #E32227);
	outline-offset: 2px;
}


/* =============================================================================
 * §15.16 2026-08-13：.scb-points > p 全局解锁（用户 2026-08-13 拍板：首页 606 也改）
 * 根因：legacy 表 `.scb-points > p { max-width: 75ch }` ≈ 606.45px（与 §15.7c 同模式）
 * 锁住全站 Why 模块文案（首页 Why Direct / 产品页 / 案例页 / 分类页）。
 * 全局 !important 覆盖：所有 .scb-points 下的段落撑满容器（§15.7c single-* 规则
 * 可视为已被本全局规则取代，保留无害）。用户明确接受首页 606 窄栏一并改宽。
 * ========================================================================== */
.scb-points > p {
	max-width: 100% !important;
}


/* =============================================================================
 * §15.17 2026-08-13：1157 产品集合页容器 1400 + 卡片文字居中
 * ========================================================================== */
.wp-block-query {
	max-width: 1400px;
	margin-inline: auto;
}

.wp-block-post-template .wp-block-post {
	text-align: center;
}

.wp-block-post-template .wp-block-post h2 {
	margin-inline: auto;
}

/* 4 列卡片字号适配（2026-08-13）：卡片 ≈310px，标题/型号缩小留白 */
.wp-block-post-template .wp-block-post h2 {
	font-size: clamp(12px, 1.5vw, 14px);
	line-height: 1.5;
	letter-spacing: -0.01em;
}

/* 型号 / keyword 标签样式（2026-08-13）：胶囊边框 + 浅底 + 内边距 */
.wp-block-post-template .wp-block-post .ct-dynamic-data h2 {
	display: inline-block;
	padding: 4px 12px;
	margin: 4px 0;
	border: 1px solid var(--scb-p3-color-ink-10, rgba(20, 22, 26, 0.12));
	border-radius: 999px;
	background: var(--scb-p3-color-surface, #F4F4F5);
	font-weight: 500;
}
.wp-block-post-template .wp-block-post .ct-dynamic-data h2 a {
	color: inherit;
	text-decoration: none;
}
.wp-block-post-template .wp-block-post .ct-dynamic-data h2:first-of-type {
	font-weight: 600;
}


/* =============================================================================
 * §15.18 2026-08-13：原生 wp:query-pagination 覆盖为 Blocksy ct-pagination 风格
 * ========================================================================== */
.wp-block-query-pagination {
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
}

.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--scb-p3-color-ink-10, rgba(20, 22, 26, 0.1));
	border-radius: 8px;
	color: var(--scb-p3-color-ink, #14161A);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	box-sizing: border-box;
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--scb-p3-color-ink, #14161A);
	border-color: var(--scb-p3-color-ink, #14161A);
	color: #FFFFFF;
}

.wp-block-query-pagination .page-numbers:not(.current):hover {
	border-color: currentColor;
}

.wp-block-query-pagination .page-numbers .wp-block-query-pagination-next-arrow,
.wp-block-query-pagination .page-numbers .wp-block-query-pagination-previous-arrow {
	margin: 0;
}


/* =============================================================================
 * §15.19 2026-08-13：1157 产品网格移动端 2 列（PC 4 列由块设置 columnCount=4）
 * ========================================================================== */
@media (max-width: 767.98px) {
	.wp-block-post-template {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}


/* =============================================================================
 * §15.20 2026-08-14：品类切换 chips 覆盖（用户需求）
 * 需求：① 1400px 容器，内容按分类数量自适应换行（非固定滚动宽度）
 *       ② 移动端去掉横向 slider（legacy 表 .scb-cats__list 默认 overflow-x:auto
 *          + scroll-snap，<768px 是横向滚动），改为 2 列换行网格
 * 作用域：body.tax-product-category（仅品类页），不影响其他 scb-cats 用法。
 * ========================================================================== */
body.tax-product-category .scb-cats {
	max-width: 1400px;
	margin-inline: auto;
	width: 100%;
}

body.tax-product-category .scb-cats__list {
	flex-wrap: wrap;
	justify-content: center;
	overflow-x: visible;
	scroll-snap-type: none;
}

body.tax-product-category .scb-cats__item {
	flex: 0 0 auto;
}

/* 移动端（<768px）：2 列网格换行，每项等宽，替代横向 slider */
@media (max-width: 767.98px) {
	body.tax-product-category .scb-cats__list {
		gap: var(--scb-s-8, 8px);
	}

	body.tax-product-category .scb-cats__item {
		flex: 1 1 calc(50% - 8px);
		min-width: 0;
	}

	body.tax-product-category .scb-cats__link {
		width: 100%;
		justify-content: center;
		white-space: normal;
		text-align: center;
	}
}