/**
 * EXweb site theme — Sage & Ink · 方案 A「柔和圆片」（P3-R 视觉层）.
 * 设计规范：docs/DESIGN_SYSTEM.md（V3.3）。旧方案（SaaS 蓝/莓粉/衬线目录页）为废案，见该文件第 0 节。
 *
 * 字体：全站 UI 主字体为自托管圆体 EXweb Round SC（Resource Han Rounded CN 子集，OFL-1.1），
 * 由 theme.json 的 fontFace 注册（theme.json 是唯一实现源），本文件不再重复 @font-face。
 * 回退栈不含宋体：未收录字符落到 PingFang SC / Microsoft YaHei。
 *
 * 色彩语义（实测对比度见规范）：
 *   brand-ink  载体文字/链接/主按钮/focus ring（对白 7.82:1）
 *   brand      仅装饰（对白 1.91:1，不入文字或控件边界）
 *   border     装饰性分隔（1.29:1）；border-strong 仅用于必需控件边界（≥3:1）
 *   bg/surface 仅差 1.06:1，不能用作层次手段
 *
 * Cascade layers: `exweb.base` (reset/global), `exweb.components` (own classes).
 * WP core/plugin block styles are unlayered and therefore win over layered
 * rules; overrides for WP/Woo-generated classes live in the unlayered
 * "block harmonisation" section at the end of this file.
 *
 * Tokens come from theme.json (CSS custom properties, --wp--preset--* and
 * --wp--custom--*). No arbitrary values outside the frozen token set.
 */

/* ============================================================
 * Layer: base
 * ============================================================ */
@layer exweb.base {
	:root {
		--exweb-z-header: var(--wp--custom--z-index--header, 100);
		--exweb-z-dropdown: var(--wp--custom--z-index--dropdown, 200);
		--exweb-z-overlay: var(--wp--custom--z-index--overlay, 300);
		--exweb-z-modal: var(--wp--custom--z-index--modal, 400);
		--exweb-z-toast: var(--wp--custom--z-index--toast, 500);
		--exweb-transition: var(--wp--custom--transition--base, 200ms);
		/* 圆角阶（DESIGN_SYSTEM V3.3）：12 小卡/输入框 · 14–16 按钮/服务卡/FAQ · 20–22 核心面板 · 999 胶囊 */
		--exweb-r-card: 16px;
		--exweb-r-faq: 12px;
		--exweb-r-panel: 22px;
		--exweb-r-btn: 15px;
		--exweb-r-pill: 999px;
		/* 页头标识显示尺寸（2026-09-20 品牌素材接入）。与三处成对，改一处必须改另两处：
		   ① assets/img/brand-logo.webp 出图 112×112（= 2.8×，构建脚本 scripts/build-brand-logo.py）；
		   ② parts/header.html 的 wp:site-logo {"width":40}；
		   ③ 本变量。40px 与旧版 30px 纯 CSS 方块标记同一量级，在页头里不挤压文字站名。
		   位置放在 `--exweb-focus-ring` **之前**（不是格式偏好）：下一行的行尾 `//` 注释不是
		   CSS 注释，浏览器会把「下一个声明」整条丢掉 —— 放它后面会被静默吃掉（已实测）。 */
		--exweb-brand-logo: 40px;
		--exweb-focus-ring: rgba(40, 91, 74, 0.18); /* 品牌墨绿的 18% 焦点晕（LHC-V2-04 终审 N1：清除 P3 旧提交的 V1 SaaS 蓝 rgba 残留） */
		--exweb-danger-soft: #fbeeec;
		--exweb-warning-soft: #fbf3e0;
	}

	/* Page container: content column + outer margin handled by WP layout. */
	html {
		-webkit-text-size-adjust: 100%;
	}

	body {
		margin: 0;
		background-color: var(--wp--preset--color--bg);
	}

	/* ------------------------------------------------------------------
	 * 页脚粘底（P3-R-FOOTER-01，2026-09-20 用户反馈）
	 *
	 * 【问题】内容少的页面（实测 /nonexistent-xyz/ 404：body 519px vs 视口 900px）
	 *   页脚浮在屏幕中部，下方留一大块空白。根因：此前**没有任何粘底实现**
	 *   （body 只有 margin:0 + 背景色），块主题也不会自动把页脚推到底部。
	 *
	 * 【做法】body 成为最小 100dvh 的竖向 flex 容器；主内容区吃掉剩余空间（flex:1），
	 *   页脚自然被推到底部。DOM 结构（实测）为：
	 *     .wp-site-blocks > header.wp-block-template-part
	 *                     > main.wp-block-group
	 *                     > footer.wp-block-template-part
	 *   注意：flex 容器是 `body`，而 `header/main/footer` 是 `.wp-site-blocks` 的
	 *   子元素（中间隔了一层），所以 flex 链必须**穿透 `.wp-site-blocks`**：
	 *   先让 .wp-site-blocks 自己成为竖向 flex 并撑满 body，再由它的 main 吃剩余高度。
	 *
	 * 【为什么用 100dvh 而不是 100vh】移动端 Safari/Chrome 地址栏收起时 100vh 会
	 *   大于可视高度，页脚会被顶到视口外（需滚动才看得到）。dvh 跟踪动态视口。
	 *   第一行 `min-height: 100vh` 是旧浏览器回退，第二行 dvh 在支持的浏览器生效。
	 *   这是本文件既有的既定策略（聊天页注释同理："不用 height:100vh+fixed"）。
	 *
	 * 【为什么不破坏消息页】消息页的聊天容器自带 `calc(100dvh - ...)` 高度策略
	 *   （见下方 Chat 段）：那里 main 内容会撑满，flex:1 对它是 no-op，不产生冲突。
	 *   验收：消息页/聊天页在 1440 与 375 下页脚位置与布局不回归。
	 *
	 * 【回滚】删除本段 `body:has(...)` 到 `margin-top:auto` 的 5 条声明即可；
	 *   回滚后行为与改动前一致（页脚回到文档流末尾，短页面浮中间）。
	 * ------------------------------------------------------------------ */
	html {
		min-height: 100%;
	}

	body {
		min-height: 100vh;
		min-height: 100dvh;
		display: flex;
		flex-direction: column;
	}

	/* WP 把 header/main/footer 包在 .wp-site-blocks 里；flex 链要穿透它。 */
	body > .wp-site-blocks {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	/* 主内容区吃掉剩余空间 → 页脚被推到底部。 */
	body > .wp-site-blocks > main:not(.exweb-messages-main) {
		flex: 1 1 auto;
		min-height: 0;
	}

	/* 兜底：即使上面某条选择器将来失配，页脚也贴底。 */
	body > .wp-site-blocks > footer.wp-block-template-part {
		margin-top: auto;
	}

	/* Visible focus everywhere (keyboard users first). */
	:focus-visible {
		outline: 2px solid var(--wp--preset--color--brand-ink);
		outline-offset: 2px;
		border-radius: 2px;
	}

	::selection {
		background-color: var(--wp--preset--color--brand-ink);
		color: #ffffff;
	}

	img,
	svg,
	video {
		max-width: 100%;
		height: auto;
	}

	code,
	pre {
		font-family: var(--wp--preset--font-family--mono);
		font-size: 0.9em;
	}

	pre {
		padding: var(--wp--preset--spacing--40);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius--md);
		background: var(--wp--preset--color--surface);
		overflow-x: auto;
	}

	/* Layout helpers */
	.exweb-stack {
		display: grid;
		gap: var(--wp--preset--spacing--40, 16px);
	}

	.exweb-stack--l {
		gap: var(--wp--preset--spacing--60, 32px);
	}

	.exweb-cluster {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--30, 12px);
		align-items: center;
	}

	.exweb-grid {
		display: grid;
		gap: var(--wp--preset--spacing--50, 24px);
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* 窄屏回落：3 列在 860px 以下会把卡片压到约 98px 宽（中文逐字换行，无法正常阅读）。
	   断点沿用本站既有约定（main.css 内多处 860/861px），不是新造的设计值。
	   该 class 目前只被帮助索引使用（inc/blocks.php），因此影响面仅 /help/。
	   实测（2026-09-20）：375px 原为 `98.33px × 3`，现为单列满宽；≥861px 保持 3 列不变。 */
	@media (max-width: 860px) {
		.exweb-grid {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	/* 帮助**分类归档**页的文章网格（taxonomy-help_category.html）。
	   ⚠️ 规则主体在文件下方的**未分层**段（`Unlayered: WP/Woo block harmonisation`），
	   不在这里 —— 原因和 `wp-block-post-template` 的 `margin-block-start` 有关：
	   Core 在未分层区输出 `:root :where(.is-layout-flow) > *{margin-block-start:24px}`，
	   虽然 `:where()` 特异性为 0，但**未分层作者样式恒胜过任何 @layer 规则**，
	   实测写在本层里的 `margin-block: 0` 完全无效（第二列卡片被下推 24px）。
	   这里保留一条注释作为索引，避免后来者再往层里补一次同样的无效规则。 */

	/* Reading width util for PHP-rendered prose. */
	.exweb-reading {
		max-width: var(--wp--custom--container--reading, 720px);
	}

	/* Screen-reader only (PHP-rendered UI). */
	.exweb-visually-hidden {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}

/* ============================================================
 * Layer: components
 * ============================================================ */
@layer exweb.components {
	/* ---------- Header / Footer（方案 A：白底、无边框，靠明度与留白站立） ---------- */
	/* 消息页外壳的 template-part 外层包装会被运行时 global styles 加上 block-gap margin，
	 * 在页面顶部形成一条空白横条（用户 2026-09-19 反馈）；首页的模板管线不会走到该规则。
	 * 显式归零（仅消息页外壳，不碰其它路由）。 */
	.exweb-messages-page .wp-site-blocks > .wp-block-template-part:first-child,
	.exweb-messages-page .wp-site-blocks > header:first-child {
		margin-top: 0;
	}

	.exweb-header {
		background-color: var(--wp--preset--color--surface);
	}

	.exweb-header .wp-block-site-title a {
		color: var(--wp--preset--color--primary);
		text-decoration: none;
	}

	.exweb-header .wp-block-navigation {
		font-size: var(--wp--preset--font-size--small);
	}

	.exweb-header .wp-block-navigation a {
		color: var(--wp--preset--color--secondary);
		text-decoration: none;
		transition: color var(--exweb-transition) ease, background-color var(--exweb-transition) ease;
	}

	.exweb-header .wp-block-navigation a:hover {
		color: var(--wp--preset--color--primary);
	}

	.exweb-footer {
		background-color: var(--wp--preset--color--surface);
		margin-top: var(--wp--preset--spacing--70);
		padding-block: var(--wp--preset--spacing--60);
	}

	.exweb-footer-note {
		color: var(--wp--preset--color--text-muted);
		font-size: var(--wp--preset--font-size--caption);
		line-height: 1.5;
	}

	/* ---------- Buttons ---------- */
	.exweb-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		border: 1px solid transparent;
		border-radius: var(--exweb-r-btn);
		background-color: var(--wp--preset--color--brand-ink);
		color: #ffffff;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 500;
		line-height: 1.5;
		/* 13px 字号 + 13px 纵向内边距 => 约 46px 高，满足移动端 44px 触控下限 */
		padding: 13px 20px;
		text-decoration: none;
		cursor: pointer;
		transition:
			background-color var(--exweb-transition) ease,
			border-color var(--exweb-transition) ease,
			color var(--exweb-transition) ease,
			box-shadow var(--exweb-transition) ease;
	}

	.exweb-btn:hover {
		background-color: var(--wp--preset--color--brand-hover);
		color: #ffffff;
	}

	.exweb-btn:active {
		background-color: var(--wp--preset--color--brand-hover);
		box-shadow: inset 0 1px 2px rgba(32, 58, 50, 0.22);
	}

	.exweb-btn:focus-visible {
		outline: 2px solid var(--wp--preset--color--brand-ink);
		outline-offset: 2px;
	}

	.exweb-btn[disabled],
	.exweb-btn[aria-disabled="true"] {
		background-color: var(--wp--preset--color--muted);
		color: var(--wp--preset--color--text-muted);
		border-color: var(--wp--preset--color--border);
		cursor: not-allowed;
		box-shadow: none;
	}

	.exweb-btn--secondary {
		background-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--brand-ink);
		border-color: var(--wp--preset--color--border-strong);
	}

	.exweb-btn--secondary:hover {
		background-color: var(--wp--preset--color--muted);
		color: var(--wp--preset--color--brand-hover);
		border-color: var(--wp--preset--color--brand-hover);
	}

	.exweb-btn--secondary:active {
		background-color: var(--wp--preset--color--muted);
		box-shadow: inset 0 1px 2px rgba(32, 58, 50, 0.16);
	}

	.exweb-btn--ghost {
		background-color: transparent;
		color: var(--wp--preset--color--brand-ink);
		border-color: transparent;
	}

	.exweb-btn--ghost:hover {
		background-color: var(--wp--preset--color--muted);
		color: var(--wp--preset--color--brand-hover);
	}

	.exweb-btn--ghost:active {
		box-shadow: none;
	}

	.exweb-btn--danger {
		background-color: var(--wp--preset--color--danger);
		color: #ffffff;
	}

	.exweb-btn--danger:hover {
		background-color: #9c2822;
	}

	.exweb-btn--sm {
		font-size: var(--wp--preset--font-size--caption);
		padding: 8px 14px;
	}

	.exweb-btn--lg {
		padding: 15px 26px;
		font-size: var(--wp--preset--font-size--body);
		font-weight: 600;
	}

	/* Async loading state (no spinner markup required; pure CSS). */
	.exweb-btn.is-loading {
		color: transparent !important;
		position: relative;
		pointer-events: none;
	}

	/*
	 * 加载中的主按钮仍必须是品牌底：否则 [disabled] 的 muted 底色会让白色 spinner 失去对比度。
	 */
	.exweb-btn.is-loading[disabled],
	.exweb-btn.is-loading[aria-disabled="true"] {
		background-color: var(--wp--preset--color--brand-ink);
		border-color: var(--wp--preset--color--brand-ink);
	}

	.exweb-btn--secondary.is-loading[disabled],
	.exweb-btn--secondary.is-loading[aria-disabled="true"] {
		background-color: var(--wp--preset--color--surface);
		border-color: var(--wp--preset--color--border-strong);
	}

	.exweb-btn.is-loading::after {
		content: "";
		position: absolute;
		inset: 0;
		margin: auto;
		width: 16px;
		height: 16px;
		border: 2px solid rgba(255, 255, 255, 0.4);
		border-top-color: #ffffff;
		border-radius: 50%;
		animation: exweb-spin 800ms linear infinite;
	}

	.exweb-btn--secondary.is-loading::after,
	.exweb-btn--ghost.is-loading::after {
		border-color: var(--wp--preset--color--border);
		border-top-color: var(--wp--preset--color--brand-ink);
	}

	@keyframes exweb-spin {
		to {
			transform: rotate(360deg);
		}
	}

	/* ---------- Badges / StatusBadge ---------- */
	.exweb-badge {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 2px 10px;
		border-radius: var(--wp--custom--radius--sm);
		border: 1px solid var(--wp--preset--color--border);
		background-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--secondary);
		font-size: var(--wp--preset--font-size--caption);
		font-weight: 600;
		line-height: 1.5;
	}

	.exweb-badge--success {
		border-color: #bfe3d4;
		background-color: #ecf8f3;
		color: #135a40;
	}

	.exweb-badge--warning {
		border-color: #ecd9ad;
		background-color: #fbf3e0;
		color: #6d4800;
	}

	.exweb-badge--danger {
		border-color: #f0c7c4;
		background-color: #fbeeec;
		color: #93251f;
	}

	.exweb-badge--info {
		border-color: #c4dbef;
		background-color: #eaf3fa;
		color: #1b5480;
	}

	.exweb-badge--neutral {
		color: var(--wp--preset--color--secondary);
	}

	/* StatusBadge: dot + text so state never relies on color alone. */
	.exweb-status-badge::before {
		content: "";
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: currentColor;
		flex-shrink: 0;
	}

	/* ---------- Card / ServiceCard ---------- */
	.exweb-card {
		background-color: var(--wp--preset--color--surface);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius--lg);
		padding: var(--wp--preset--spacing--50);
	}

	.exweb-card__title {
		font-size: var(--wp--preset--font-size--heading-3);
		line-height: 1.4;
		margin: 0;
	}

	.exweb-service-card {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--30);
		height: 100%;
	}

	.exweb-service-card__meta {
		color: var(--wp--preset--color--text-muted);
		font-size: var(--wp--preset--font-size--small);
	}

	/* ---------- Alert (Info / Notice / Warning / Critical) ---------- */
	.exweb-alert {
		display: flex;
		gap: var(--wp--preset--spacing--30);
		align-items: flex-start;
		padding: var(--wp--preset--spacing--40);
		border: 1px solid var(--wp--preset--color--border);
		border-left-width: 4px;
		border-radius: var(--wp--custom--radius--md);
		background-color: var(--wp--preset--color--surface);
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.55;
	}

	.exweb-alert__icon {
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		margin-top: 2px;
	}

	.exweb-alert__icon {
		width: 20px;
		height: 20px;
		display: block;
	}

	.exweb-alert__title {
		font-weight: 700;
		margin: 0 0 2px;
		font-size: inherit;
	}

	.exweb-alert p {
		margin: 0;
		color: var(--wp--preset--color--secondary);
	}

	.exweb-alert--info {
		border-left-color: var(--wp--preset--color--info);
	}

	.exweb-alert--info .exweb-alert__icon {
		color: var(--wp--preset--color--info);
	}

	.exweb-alert--notice {
		border-left-color: var(--wp--preset--color--warning);
	}

	.exweb-alert--notice .exweb-alert__icon {
		color: var(--wp--preset--color--warning);
	}

	.exweb-alert--warning {
		border-left-color: var(--wp--preset--color--warning);
		background-color: #fbf3e0;
	}

	.exweb-alert--warning .exweb-alert__icon {
		color: var(--wp--preset--color--warning);
	}

	.exweb-alert--critical {
		border-left-color: var(--wp--preset--color--danger);
		background-color: #fbeeec;
	}

	.exweb-alert--critical .exweb-alert__icon {
		color: var(--wp--preset--color--danger);
	}

	/* 成功态（客服会话台回复成功）：语义色仅作左边框/图标，底色用既有 soft 变量，不新增魔法值。 */
	.exweb-alert--success {
		border-left-color: var(--wp--preset--color--success);
		background-color: var(--wp--preset--color--brand-soft);
	}

	.exweb-alert--success .exweb-alert__icon {
		color: var(--wp--preset--color--success);
	}

	/* ---------- Breadcrumb ---------- */
	.exweb-breadcrumb ol {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--text-muted);
	}

	.exweb-breadcrumb li {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.exweb-breadcrumb li + li::before {
		content: "/";
		color: var(--wp--preset--color--border-strong);
	}

	.exweb-breadcrumb a {
		color: var(--wp--preset--color--secondary);
		text-decoration: none;
	}

	.exweb-breadcrumb a:hover {
		color: var(--wp--preset--color--brand-ink);
		text-decoration: underline;
	}

	.exweb-breadcrumb [aria-current="page"] {
		color: var(--wp--preset--color--primary);
		font-weight: 500;
	}

	/* ---------- TableOfContents ---------- */
	.exweb-toc {
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius--md);
		background-color: var(--wp--preset--color--surface);
		padding: var(--wp--preset--spacing--40);
		font-size: var(--wp--preset--font-size--small);
	}

	.exweb-toc__title {
		margin: 0 0 8px;
		font-size: var(--wp--preset--font-size--caption);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--wp--preset--color--text-muted);
	}

	.exweb-toc ol {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.exweb-toc ol ol {
		padding-left: 16px;
	}

	.exweb-toc li + li {
		margin-top: 4px;
	}

	.exweb-toc a {
		color: var(--wp--preset--color--secondary);
		text-decoration: none;
	}

	.exweb-toc a:hover {
		color: var(--wp--preset--color--brand-ink);
		text-decoration: underline;
	}

	/* ---------- Forms ---------- */
	.exweb-form input[type="text"],
	.exweb-form input[type="email"],
	.exweb-form input[type="password"],
	.exweb-form input[type="search"],
	.exweb-form input[type="tel"],
	.exweb-form input[type="url"],
	.exweb-form input[type="number"],
	.exweb-form textarea,
	.exweb-form select {
		width: 100%;
		padding: 10px 12px;
		border: 1px solid var(--wp--preset--color--border-strong);
		border-radius: var(--wp--custom--radius--md);
		background-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--primary);
		font-size: var(--wp--preset--font-size--body);
		font-family: inherit;
		line-height: 1.5;
		transition:
			border-color var(--exweb-transition) ease,
			box-shadow var(--exweb-transition) ease;
	}

	.exweb-form input:hover,
	.exweb-form textarea:hover,
	.exweb-form select:hover {
		border-color: var(--wp--preset--color--text-muted);
	}

	.exweb-form input:focus,
	.exweb-form textarea:focus,
	.exweb-form select:focus {
		border-color: var(--wp--preset--color--brand-ink);
		box-shadow: 0 0 0 3px var(--exweb-focus-ring);
		outline: none;
	}

	.exweb-form input[disabled],
	.exweb-form textarea[disabled],
	.exweb-form select[disabled] {
		background-color: var(--wp--preset--color--muted);
		color: var(--wp--preset--color--text-muted);
		border-color: var(--wp--preset--color--border);
		cursor: not-allowed;
	}

	.exweb-form input[aria-invalid="true"],
	.exweb-form textarea[aria-invalid="true"],
	.exweb-form select[aria-invalid="true"] {
		border-color: var(--wp--preset--color--danger);
	}

	.exweb-form input[type="checkbox"],
	.exweb-form input[type="radio"] {
		width: 18px;
		height: 18px;
		accent-color: var(--wp--preset--color--brand-ink);
		flex-shrink: 0;
	}

	.exweb-form input[type="checkbox"]:focus,
	.exweb-form input[type="radio"]:focus {
		outline: 2px solid var(--wp--preset--color--brand-ink);
		outline-offset: 2px;
	}

	.exweb-help-text {
		color: var(--wp--preset--color--text-muted);
		font-size: var(--wp--preset--font-size--small);
		margin-top: 4px;
	}

	.exweb-field-error {
		color: var(--wp--preset--color--danger);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 500;
		margin-top: 4px;
	}

	/* ---------- Empty state（方案 A：白底圆角，无边框） ---------- */
	.exweb-empty {
		padding: var(--wp--preset--spacing--60);
		border-radius: var(--exweb-r-card);
		background-color: var(--wp--preset--color--surface);
		text-align: center;
	}

	.exweb-empty h3 {
		margin: 8px 0;
		font-size: var(--wp--preset--font-size--heading-3);
	}

	.exweb-empty p {
		color: var(--wp--preset--color--secondary);
		margin: 0 auto var(--wp--preset--spacing--40);
		max-width: 480px;
	}

	/* ---------- Spinner / Skeleton ---------- */
	.exweb-spinner {
		width: 20px;
		height: 20px;
		border: 2px solid var(--wp--preset--color--border);
		border-top-color: var(--wp--preset--color--brand-ink);
		border-radius: 50%;
		animation: exweb-spin 800ms linear infinite;
	}

	.exweb-skeleton {
		background-color: var(--wp--preset--color--muted);
		border-radius: var(--wp--custom--radius--md);
		position: relative;
		overflow: hidden;
	}

	.exweb-skeleton::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
		transform: translateX(-100%);
		animation: exweb-shimmer 1.4s ease infinite;
	}

	@keyframes exweb-shimmer {
		100% {
			transform: translateX(100%);
		}
	}

	/* ---------- Tables ---------- */
	.exweb-table-wrap {
		overflow-x: auto;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius--md);
		background-color: var(--wp--preset--color--surface);
	}

	.exweb-table-wrap table {
		width: 100%;
		border-collapse: collapse;
		font-size: var(--wp--preset--font-size--small);
	}

	.exweb-table-wrap th,
	.exweb-table-wrap td {
		padding: 10px 14px;
		border-bottom: 1px solid var(--wp--preset--color--border);
		text-align: left;
		vertical-align: top;
	}

	.exweb-table-wrap th {
		font-weight: 600;
		background-color: var(--wp--preset--color--muted);
		color: var(--wp--preset--color--primary);
	}

	.exweb-table-wrap tr:last-child td {
		border-bottom: none;
	}

	/* ---------- Sections ---------- */
	.exweb-section {
		padding-block: var(--wp--preset--spacing--60);
	}

	.exweb-section__head {
		margin-bottom: var(--wp--preset--spacing--50);
	}

	.exweb-section__head p {
		color: var(--wp--preset--color--secondary);
		margin: 4px 0 0;
	}

	/* ==========================================================
	 * P3-R 方案 A「柔和圆片」设计语言（DESIGN_SYSTEM V3.3）
	 * ------------------------------------------------------------------
	 * 三条支点，其余一律克制：
	 *   1) 柔和圆片：层次来自 brand-soft 面板 / surface 白卡 / 透明行，不用发丝线框列表
	 *   2) 圆体声音：全站 UI 主字体为自托管圆体（theme.json fontFace 注册）
	 *   3) 颜色是墨水不是装饰：sage 只出现在面板底、图形、图片位；墨绿只用于按钮/链接/焦点
	 * 层次来源顺序：圆角与柔和面色 → 字重与字号 → 留白 → 对齐 → 品牌色
	 * ========================================================== */

	/* 数字等宽：价格/库存/日期在列表里对齐成列 */
	.exweb-price,
	.exweb-num,
	.exweb-annbar__date,
	.exweb-sheet__spec dd,
	.exweb-service-row__price,
	.exweb-service-row__stock,
	.exweb-article-meta {
		font-variant-numeric: tabular-nums;
	}

	/* 文字限宽，但容器共享同一条中轴/左边缘 */
	.exweb-measure {
		max-width: 620px;
	}

	/* ---------- Header：白底无边框；品牌标识（熊猫图）+ 站名 + 14px 导航 ---------- */
	.exweb-header {
		background-color: var(--wp--preset--color--surface);
	}

	.exweb-header .wp-block-site-title,
	.exweb-footer .wp-block-site-title {
		margin: 0;
		font-size: var(--wp--preset--font-size--body);
	}

	/* 品牌区：真实标识（熊猫图，custom_logo）+ 文字站名并排，两者共同构成一个“品牌单元”，
	   再由外层 flex 的 space-between 与右侧导航分开。
	   2026-09-20 品牌素材接入：旧版“sage 圆角方块 + 墨绿圆点”的**纯 CSS 假标识**已删除 ——
	   否则页头会同时出现熊猫与方块两个标识。
	   注意：这里**不再**写 align-items/gap —— Core 的未分层 `.is-layout-flex{align-items:center}`
	   与 `:root :where(.is-layout-flex){gap:24px}` 会赢过分层规则，写了也是死代码（已实测）；
	   24px 就是本站的区块间距节奏，标识与站名之间沿用它。
	   标识图尺寸规则在下面 unlayered 段（`Site logo`），原因见那里。 */

	.exweb-header .wp-block-site-title a {
		color: var(--wp--preset--color--primary);
		font-size: 17px;
		font-weight: 700;
		text-decoration: none;
	}

	.exweb-header .wp-block-site-title a:hover {
		color: var(--wp--preset--color--brand-ink);
	}

	.exweb-header .wp-block-navigation {
		font-size: 14px;
	}

	.exweb-header .wp-block-navigation a {
		color: var(--wp--preset--color--secondary);
		text-decoration: none;
		transition: color var(--exweb-transition) ease;
	}

	.exweb-header .wp-block-navigation a:hover {
		color: var(--wp--preset--color--brand-ink);
	}

	/* 当前页：只改颜色与字重，不加下划线、不加底色 */
	.exweb-header .wp-block-navigation .current-menu-item > a,
	.exweb-header .wp-block-navigation a[aria-current="page"] {
		color: var(--wp--preset--color--brand-ink);
		font-weight: 600;
	}

	/* ---------- Footer：白底、无边框、小字 ---------- */
	.exweb-footer {
		background-color: var(--wp--preset--color--surface);
		margin-top: var(--wp--preset--spacing--80);
		padding-block: var(--wp--preset--spacing--60);
	}

	.exweb-footer .wp-block-site-title a {
		color: var(--wp--preset--color--primary);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 700;
		text-decoration: none;
	}

	.exweb-footer .wp-block-navigation {
		font-size: var(--wp--preset--font-size--small);
	}

	.exweb-footer .wp-block-navigation a {
		color: var(--wp--preset--color--secondary);
		text-decoration: none;
	}

	.exweb-footer .wp-block-navigation a:hover {
		color: var(--wp--preset--color--brand-ink);
	}

	.exweb-footer-note {
		max-width: 720px;
		color: var(--wp--preset--color--text-muted);
		font-size: var(--wp--preset--font-size--caption);
		line-height: 1.7;
	}

	/* ---------- 区块节奏：相邻区块共享一段留白 ---------- */
	.exweb-section {
		padding-block: var(--wp--preset--spacing--60);
	}

	.exweb-section + .exweb-section {
		padding-top: 0;
	}

	.exweb-section--tight {
		padding-block: var(--wp--preset--spacing--50);
	}

	.exweb-section__head {
		margin-bottom: var(--wp--preset--spacing--40);
	}

	.exweb-section__head h2 {
		margin: 0;
	}

	.exweb-section__head p {
		max-width: 620px;
		margin: 4px 0 0;
		color: var(--wp--preset--color--secondary);
		font-size: 14px;
		line-height: 1.75;
	}

	.exweb-section--center {
		text-align: center;
	}

	.exweb-section--center .exweb-section__head p {
		margin-inline: auto;
	}

	/* ---------- 首屏介绍：居中、短、不占满屏；三圆点装饰（2 sage 1 ink） ---------- */
	.exweb-intro {
		padding-block: var(--wp--preset--spacing--70) 0;
		text-align: center;
	}

	.exweb-intro .wp-block-heading {
		max-width: 720px;
		margin: 0 auto;
	}

	.exweb-intro__lead {
		max-width: 560px;
		margin: 10px auto 0;
		color: var(--wp--preset--color--secondary);
		font-size: 15px;
		line-height: 1.8;
	}

	.exweb-dots {
		display: flex;
		justify-content: center;
		gap: 6px;
		margin-top: 18px;
	}

	.exweb-dots i {
		width: 7px;
		height: 7px;
		border-radius: var(--exweb-r-pill);
		background-color: var(--wp--preset--color--brand);
	}

	.exweb-dots i:nth-child(2) {
		background-color: var(--wp--preset--color--brand-ink);
	}

	.exweb-intro__note {
		max-width: 560px;
		margin: 14px auto 0;
		color: var(--wp--preset--color--text-muted);
	}

	/* ---------- 核心服务：brand-soft 大圆角面板（22px），桌面三段 / 860px 以下单列 ----------
	 * 图片位使用 WooCommerce 商品图；没有图时是柔和渐变几何图形（版面不塌陷、不出现空框）。
	 * 中列只有名称与一句说明；胶囊标签需要业务数据源，无来源时不渲染（不虚构）。 */
	.exweb-sheet {
		display: grid;
		gap: 32px;
		align-items: center;
		padding: 32px;
		border-radius: var(--exweb-r-panel);
		background-color: var(--wp--preset--color--brand-soft);
	}

	@media (min-width: 861px) {
		.exweb-sheet {
			grid-template-columns: 300px minmax(0, 1fr) auto;
			column-gap: 32px;
			row-gap: 8px;
			padding: 36px;
		}

		.exweb-sheet__media {
			grid-row: 1 / span 2;
		}

		.exweb-sheet__name {
			grid-column: 2;
			align-self: end;
		}

		.exweb-sheet__line {
			grid-column: 2;
			align-self: start;
		}

		.exweb-sheet__buy {
			grid-column: 3;
			grid-row: 1 / span 2;
			align-self: center;
			align-items: flex-end;
			text-align: right;
		}
	}

	/* 中列容器不产生自己的盒子：名称/说明/购买列直接成为面板网格的项，
	 * 这样不用改区块渲染标记就能实现「图片 | 信息 | 购买」三段（区块标记归 inc/blocks.php，不在本次文件边界内）。 */
	.exweb-sheet__body {
		display: contents;
	}

	.exweb-sheet__media {
		display: block;
		position: relative;
		width: 300px;
		max-width: 100%;
		aspect-ratio: 10 / 7;
		overflow: hidden;
		border-radius: var(--exweb-r-card);
		background: linear-gradient(135deg, var(--wp--preset--color--surface) 0%, var(--wp--preset--color--brand) 100%);
	}

	/* 无图时的柔和几何图形：小圆角方块 + 大圆，都是装饰（有真实商品图时被图片盖住） */
	.exweb-sheet__media::before {
		content: "";
		position: absolute;
		left: 22px;
		top: 22px;
		width: 44px;
		height: 44px;
		border-radius: 14px;
		background-color: var(--wp--preset--color--brand-ink);
		opacity: 0.14;
	}

	.exweb-sheet__media::after {
		content: "";
		position: absolute;
		right: 26px;
		bottom: 26px;
		width: 70px;
		height: 70px;
		border-radius: var(--exweb-r-pill);
		background-color: var(--wp--preset--color--surface);
		opacity: 0.55;
	}

	.exweb-sheet__media img {
		display: block;
		position: relative;
		z-index: 1;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.exweb-sheet__name {
		margin: 0;
		font-size: 24px;
		font-weight: 700;
		line-height: 1.4;
	}

	.exweb-sheet__name a {
		color: var(--wp--preset--color--primary);
		text-decoration: none;
	}

	.exweb-sheet__name a:hover {
		color: var(--wp--preset--color--brand-ink);
	}

	.exweb-sheet__line {
		max-width: 460px;
		margin: 8px 0 0;
		color: var(--wp--preset--color--secondary);
		font-size: 15px;
		line-height: 1.75;
	}

	/* 右列：价格大数字 + 库存 + 主按钮，纵向排布 */
	.exweb-sheet__buy {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		min-width: 170px;
	}

	.exweb-sheet__spec {
		display: flex;
		flex-direction: column;
		gap: 2px;
		margin: 0;
	}

	.exweb-sheet__spec > div {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.exweb-sheet__spec dt {
		margin: 0;
		color: var(--wp--preset--color--secondary);
		font-size: 13px;
	}

	.exweb-sheet__spec dd {
		margin: 0;
		color: var(--wp--preset--color--primary);
	}

	.exweb-sheet__price {
		font-size: 34px;
		font-weight: 700;
		line-height: 1.25;
	}

	.exweb-sheet__stock {
		color: var(--wp--preset--color--secondary);
		font-size: 13px;
	}

	.exweb-sheet__action {
		margin: 12px 0 0;
	}

	.exweb-sheet__action .exweb-btn {
		padding: 12px 28px;
	}

	/* 860px 以下单列：图片位高度压缩到 ~180px，按钮可达 */
	@media (max-width: 860px) {
		.exweb-sheet {
			padding: 24px;
			gap: 16px;
		}

		.exweb-sheet__media {
			width: 100%;
			aspect-ratio: auto;
			height: 180px;
		}

		.exweb-sheet__buy {
			align-items: flex-start;
			text-align: left;
		}
	}

	/* ---------- 其它服务：双列白底圆角小卡（16px、无边框），小色块图标位 + 右对齐价格库存 ---------- */
	.exweb-service-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		margin: 20px 0 0;
		padding: 0;
		list-style: none;
	}

	.exweb-service-row {
		background-color: var(--wp--preset--color--surface);
		border-radius: var(--exweb-r-card);
	}

	.exweb-service-row__link {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		column-gap: 16px;
		row-gap: 2px;
		align-items: start;
		height: 100%;
		box-sizing: border-box;
		padding: 20px 22px;
		color: inherit;
		text-decoration: none;
	}

	/* 小色块图标位：柔和渐变（CSS，不用图标库）；相邻卡片换方向避免单调，仍全是装饰色 */
	.exweb-service-row__link::before {
		content: "";
		grid-row: 1 / span 2;
		align-self: center;
		width: 40px;
		height: 40px;
		border-radius: 12px;
		background: linear-gradient(135deg, var(--wp--preset--color--brand-soft), var(--wp--preset--color--brand));
	}

	.exweb-service-row:nth-child(2n) .exweb-service-row__link::before {
		background: linear-gradient(315deg, var(--wp--preset--color--brand-soft), var(--wp--preset--color--brand));
	}

	.exweb-service-row:nth-child(3n) .exweb-service-row__link::before {
		background: linear-gradient(160deg, var(--wp--preset--color--brand-soft) 15%, var(--wp--preset--color--brand) 85%);
	}

	.exweb-service-row__name {
		grid-column: 2;
		align-self: end;
		color: var(--wp--preset--color--primary);
		font-size: 15px;
		font-weight: 600;
		line-height: 1.6;
		transition: color var(--exweb-transition) ease;
	}

	.exweb-service-row__link:hover .exweb-service-row__name {
		color: var(--wp--preset--color--brand-ink);
	}

	.exweb-service-row__line {
		grid-column: 2;
		align-self: start;
		max-width: 420px;
		color: var(--wp--preset--color--secondary);
		font-size: 13px;
		line-height: 1.7;
	}

	.exweb-service-row__meta {
		grid-column: 3;
		grid-row: 1 / span 2;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 2px;
		text-align: right;
	}

	.exweb-service-row__price {
		color: var(--wp--preset--color--primary);
		font-size: 15px;
		font-weight: 700;
	}

	.exweb-service-row__price--none {
		color: var(--wp--preset--color--text-muted);
		font-weight: 500;
	}

	.exweb-service-row__stock {
		color: var(--wp--preset--color--text-muted);
		font-size: 12px;
	}

	@media (max-width: 860px) {
		.exweb-service-list {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	/* ---------- FAQ：居中白底圆角手风琴行（12px、间距 10px），展开符号 +/– ---------- */
	.exweb-faq-list {
		max-width: 680px;
		margin: 22px auto 0;
		padding: 0;
		list-style: none;
		text-align: left;
	}

	.exweb-faq-item {
		margin-bottom: 10px;
	}

	.exweb-faq-item:last-child {
		margin-bottom: 0;
	}

	.exweb-faq-item__details {
		padding: 16px 20px;
		border-radius: var(--exweb-r-faq);
		background-color: var(--wp--preset--color--surface);
	}

	.exweb-faq-item__details > summary.exweb-faq-item__q {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin: 0;
		color: var(--wp--preset--color--primary);
		font-size: 15px;
		font-weight: 600;
		line-height: 1.6;
		cursor: pointer;
		list-style: none;
	}

	.exweb-faq-item__details > summary.exweb-faq-item__q::-webkit-details-marker {
		display: none;
	}

	.exweb-faq-item__q::after {
		content: "+";
		flex: none;
		color: var(--wp--preset--color--brand-ink);
		font-weight: 700;
	}

	.exweb-faq-item__details[open] .exweb-faq-item__q::after {
		content: "–";
	}

	.exweb-faq-item__a {
		padding-top: 8px;
	}

	.exweb-faq-item__a p {
		margin: 0 0 var(--wp--preset--spacing--20);
		color: var(--wp--preset--color--secondary);
		font-size: 14px;
		line-height: 1.7;
	}

	.exweb-faq-item__a p:last-child {
		margin-bottom: 0;
	}

	.exweb-faq-item__more {
		font-size: var(--wp--preset--font-size--small);
	}

	.exweb-faq-more {
		margin: 18px 0 0;
		text-align: center;
		font-size: 14px;
	}

	/* ---------- 公告栏：brand-soft 圆角条，仅在存在有效公告时渲染 ---------- */
	.exweb-annbar {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.exweb-annbar__item {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
		padding: 12px 20px;
		border-radius: var(--exweb-r-faq);
		background-color: var(--wp--preset--color--brand-soft);
	}

	.exweb-annbar__item + .exweb-annbar__item {
		margin-top: 8px;
	}

	.exweb-annbar__label {
		color: var(--wp--preset--color--brand-ink);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
	}

	.exweb-annbar__title {
		color: var(--wp--preset--color--primary);
		font-size: var(--wp--preset--font-size--small);
		text-decoration: none;
	}

	.exweb-annbar__title:hover {
		color: var(--wp--preset--color--brand-ink);
		text-decoration: underline;
	}

	.exweb-annbar__date {
		margin-left: auto;
		color: var(--wp--preset--color--text-muted);
		font-size: var(--wp--preset--font-size--caption);
	}

	@media (max-width: 640px) {
		/* 窄屏换行后 margin-left:auto 会把日期推到第二行右端，看着像掉队的元素 */
		.exweb-annbar__date {
			margin-left: 0;
		}
	}

	/* ---------- Notice：柔和高优先级区域（详情页注意事项用） ---------- */
	/* 不用红、不用边框、不是每条一个卡片；影响购买条件的内容才用这一块。 */
	.exweb-notice {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
		border-radius: var(--wp--custom--radius--lg);
		background-color: var(--wp--preset--color--brand-soft);
	}

	.exweb-notice__title {
		margin: 0 0 var(--wp--preset--spacing--30);
		color: var(--wp--preset--color--primary);
		font-size: var(--wp--preset--font-size--heading-3);
		font-weight: 600;
	}

	.exweb-notice p,
	.exweb-notice li {
		max-width: 640px;
		color: var(--wp--preset--color--secondary);
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.85;
	}

	.exweb-notice ul {
		margin: 0;
		padding-left: 1.15em;
	}

	.exweb-notice > *:last-child {
		margin-bottom: 0;
	}

	/* ---------- Help index / category cards (P4) ---------- */
	.exweb-help-card ul.exweb-help-card__list {
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: var(--wp--preset--font-size--small);
	}

	.exweb-help-card ul.exweb-help-card__list li {
		border-top: 1px solid var(--wp--preset--color--border);
		padding: 8px 0;
	}

	.exweb-help-card ul.exweb-help-card__list a {
		color: var(--wp--preset--color--secondary);
		text-decoration: none;
	}

	.exweb-help-card ul.exweb-help-card__list a:hover {
		color: var(--wp--preset--color--brand-ink);
		text-decoration: underline;
	}

	.exweb-help-card__more {
		margin: 8px 0 0;
		font-size: var(--wp--preset--font-size--small);
	}

	.exweb-help-card__more a {
		color: var(--wp--preset--color--text-muted);
		text-decoration: none;
	}

	.exweb-help-card__more a:hover {
		color: var(--wp--preset--color--brand-ink);
	}

	/* ---------- Announcements list (P4) ---------- */
	.exweb-announcements__item {
		border-bottom: 1px solid var(--wp--preset--color--border);
		padding-bottom: var(--wp--preset--spacing--40);
	}

	.exweb-announcements__item:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	.exweb-announcements__item h3 {
		margin: 4px 0 6px;
	}

	.exweb-announcements__item h3 a {
		color: var(--wp--preset--color--primary);
		text-decoration: none;
	}

	.exweb-announcements__item h3 a:hover {
		color: var(--wp--preset--color--brand-ink);
	}

	/* ---------- Pagination harmonisation (P4 archives) ---------- */
	.exweb-pagination {
		margin-top: var(--wp--preset--spacing--60);
	}

	.exweb-pagination .page-numbers {
		color: var(--wp--preset--color--secondary);
		text-decoration: none;
		padding: 6px 10px;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius--md);
		background-color: var(--wp--preset--color--surface);
		display: inline-block;
	}

	.exweb-pagination .page-numbers.current {
		color: #ffffff;
		background-color: var(--wp--preset--color--brand-ink);
		border-color: var(--wp--preset--color--brand-ink);
	}

	.exweb-pagination a.page-numbers:hover {
		color: var(--wp--preset--color--brand-ink);
		border-color: var(--wp--preset--color--border-strong);
	}

	/* ---------- Empty state (P4 shared markup) ---------- */
	.exweb-empty .exweb-btn {
		margin-top: var(--wp--preset--spacing--20);
	}

	.exweb-empty__title {
		margin: 0 0 8px;
		font-size: var(--wp--preset--font-size--heading-3);
		font-weight: 600;
		color: var(--wp--preset--color--primary);
	}

	/* ---------- Help article layout ---------- */
	.exweb-article-meta {
		color: var(--wp--preset--color--text-muted);
		font-size: var(--wp--preset--font-size--caption);
	}

	.exweb-sidebar-card {
		font-size: var(--wp--preset--font-size--small);
	}

	/* ==========================================================
	 * P3-R03 服务详情页（规范：DESIGN_SYSTEM V3.3 §5「服务详情页」）
	 * ------------------------------------------------------------------
	 * 与首页同一容器（1080px）与组件语言：
	 *   - 双栏 Grid：正文列 ≤620px + 购买面板 340px（唯一允许 sticky 的位置）
	 *   - 购买面板 = surface 大圆角面板（22px、无边框），价格/库存/表单/咨询唯一一次
	 *   - 注意事项 = 单个 brand-soft Notice；FAQ 手风琴复用首页类
	 * ========================================================== */

	/* ---------- 双栏布局：≤860px 自然单栏（DOM 顺序 = 标题区 → 面板 → 正文） ---------- */
	.exweb-product {
		display: grid;
		gap: 40px;
	}

	@media (min-width: 861px) {
		.exweb-product {
			grid-template-columns: minmax(0, 1fr) 340px;
			column-gap: 48px;
			align-items: start;
		}

		.exweb-product__head {
			grid-column: 1;
			grid-row: 1;
		}

		.exweb-product__body {
			grid-column: 1;
			grid-row: 2;
			max-width: 620px;
		}

		.exweb-panel {
			grid-column: 2;
			grid-row: 1 / span 2;
			position: sticky;
			top: 24px;
		}
	}

	.exweb-product__head .wp-block-post-title {
		margin: 0;
	}

	.exweb-product__desc {
		max-width: 620px;
		margin: 8px 0 0;
		color: var(--wp--preset--color--secondary);
		font-size: 15px;
		line-height: 1.8;
	}

	.exweb-product__desc p {
		margin: 0;
	}

	.exweb-product__head,
	.exweb-product__body {
		min-width: 0;
		overflow-wrap: break-word;
	}

	.exweb-panel {
		overflow-wrap: break-word;
	}

	.exweb-product__body .exweb-section {
		padding-block: 0;
	}

	.exweb-product__body .exweb-section + .exweb-section {
		margin-top: 40px;
	}

	.exweb-product__body .exweb-section .wp-block-heading {
		margin: 0 0 12px;
	}

	/* ---------- 购买面板：surface 大圆角（22px、无边框），信息全页唯一 ---------- */
	.exweb-panel {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 28px;
		border-radius: var(--exweb-r-panel);
		background-color: var(--wp--preset--color--surface);
	}

	/* 价格大数字：Woo 内层标记恢复继承（与首页 .exweb-sheet__price 同法） */
	.exweb-panel .wp-block-woocommerce-product-price {
		margin: 0;
		color: var(--wp--preset--color--primary);
		font-size: 34px;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		line-height: 1.25;
	}

	.exweb-panel .wp-block-woocommerce-product-price .wc-block-components-product-price {
		margin: 0;
	}

	.exweb-panel .wp-block-woocommerce-product-price .woocommerce-Price-amount,
	.exweb-panel .wp-block-woocommerce-product-price .woocommerce-Price-amount bdi,
	.exweb-panel .wp-block-woocommerce-product-price .woocommerce-Price-amount .woocommerce-Price-currencySymbol {
		font-size: inherit;
		font-weight: inherit;
		line-height: inherit;
		color: inherit;
	}

	/* 不可售（无价格）时价格区块为空：不占位、不产生空隙 */
	.exweb-panel .wp-block-woocommerce-product-price:not(:has(span)) {
		display: none;
	}

	/* 实际库存（Woo 真实状态：有库存 N 件 / 无货 / 库存状态文字） */
	.exweb-panel .wp-block-woocommerce-product-stock-indicator {
		color: var(--wp--preset--color--secondary);
		font-size: 13px;
		line-height: 1.7;
	}

	.exweb-panel .wc-block-components-product-stock-indicator--out-of-stock {
		color: var(--wp--preset--color--danger);
	}

	/* Woo 原生表单内的库存行与面板库存重复：只保留面板这一次（渲染层去重，不改 Woo） */
	.exweb-panel .wp-block-add-to-cart-form > p.stock {
		display: none;
	}

	/* 缺货/不可售时 Woo 只输出无按钮的占位（如 p.stock）：面板里不再出现空壳 */
	.exweb-panel .wp-block-add-to-cart-form:not(:has(button)) {
		display: none;
	}

	/* 原生购买表单谐调：圆角 12–16px、主按钮 brand-ink、触控高 ≥44px */
	.exweb-panel form.cart {
		display: flex;
		align-items: stretch;
		gap: 12px;
		margin: 0;
	}

	.exweb-panel form.cart .quantity {
		margin: 0;
	}

	.exweb-panel form.cart .quantity input.qty {
		box-sizing: border-box;
		width: 84px;
		min-height: 48px;
		padding: 10px 12px;
		border: 1px solid var(--wp--preset--color--border-strong);
		border-radius: 12px;
		background-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--primary);
		font-family: inherit;
		font-size: var(--wp--preset--font-size--body);
	}

	.exweb-panel form.cart .quantity input.qty:focus-visible {
		outline: 2px solid var(--wp--preset--color--brand-ink);
		outline-offset: 2px;
	}

	.exweb-panel form.cart .single_add_to_cart_button {
		flex: 1;
		min-height: 48px;
		padding: 12px 24px;
		border: none;
		border-radius: 15px;
		background-color: var(--wp--preset--color--brand-ink);
		color: var(--wp--preset--color--surface);
		font-family: inherit;
		font-size: var(--wp--preset--font-size--body);
		font-weight: 600;
		line-height: 1.5;
		cursor: pointer;
		transition: background-color var(--exweb-transition) ease;
	}

	.exweb-panel form.cart .single_add_to_cart_button:hover {
		background-color: var(--wp--preset--color--brand-hover);
	}

	.exweb-panel form.cart .single_add_to_cart_button:disabled {
		background-color: var(--wp--preset--color--muted);
		color: var(--wp--preset--color--text-muted);
		cursor: not-allowed;
	}

	.exweb-panel form.cart .single_add_to_cart_button:focus-visible {
		outline: 2px solid var(--wp--preset--color--brand-ink);
		outline-offset: 2px;
	}

	/* 咨询次按钮：brand-soft 底 + 墨绿字（无边框） */
	.exweb-panel__ask {
		margin: 4px 0 0;
	}

	/* ---------- 购买面板规格行（T1）：交付方式 / 处理时间 / 年龄限制 ----------
	 * 与首页信息卡 `.exweb-sheet__spec` 同一语言：label 13px 次级色 + value 在下一行，
	 * 不加边框、不做标签墙（DESIGN_SYSTEM §3：一屏内带可见边框的只能是输入控件与表头分隔）。
	 * 无值的行由服务端**不输出**（处理时间/年龄限制有内容 owner 确定的缺省展示值）。 */
	.exweb-panel__specs {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin: 4px 0 0;
	}

	.exweb-panel__specs > div {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.exweb-panel__specs dt {
		margin: 0;
		color: var(--wp--preset--color--secondary);
		font-size: 13px;
	}

	.exweb-panel__specs dd {
		margin: 0;
		color: var(--wp--preset--color--primary);
		font-size: 14px;
		line-height: 1.7;
	}

	.exweb-btn--soft {
		background-color: var(--wp--preset--color--brand-soft);
		color: var(--wp--preset--color--brand-ink);
		border-color: transparent;
	}

	.exweb-btn--soft:hover {
		background-color: var(--wp--preset--color--border);
		color: var(--wp--preset--color--brand-hover);
	}

	a.exweb-btn--soft:hover {
		color: var(--wp--preset--color--brand-hover);
	}

	/* ---------- 异常态提示（原 exweb-alert 的柔和化，仅服务详情使用） ---------- */
	.exweb-state-note {
		display: flex;
		gap: 12px;
		align-items: flex-start;
		padding: 14px 16px;
		border-radius: var(--exweb-r-faq);
		font-size: 14px;
		line-height: 1.7;
	}

	.exweb-state-note__icon {
		flex-shrink: 0;
		display: block;
		width: 20px;
		height: 20px;
		margin-top: 3px;
	}

	.exweb-state-note__title {
		margin: 0 0 2px;
		font-size: inherit;
		font-weight: 700;
	}

	.exweb-state-note p:last-child {
		margin: 0;
		color: var(--wp--preset--color--secondary);
	}

	.exweb-state-note--critical {
		background-color: var(--exweb-danger-soft);
	}

	.exweb-state-note--critical .exweb-state-note__title,
	.exweb-state-note--critical .exweb-state-note__icon {
		color: var(--wp--preset--color--danger);
	}

	.exweb-state-note--warning {
		background-color: var(--exweb-warning-soft);
	}

	.exweb-state-note--warning .exweb-state-note__title,
	.exweb-state-note--warning .exweb-state-note__icon {
		color: var(--wp--preset--color--warning);
	}

	/* ---------- FAQ：wp:details 复用首页手风琴行（summary 无类名也可） ---------- */
	.exweb-faq-item__details > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin: 0;
		color: var(--wp--preset--color--primary);
		font-size: 15px;
		font-weight: 600;
		line-height: 1.6;
		cursor: pointer;
		list-style: none;
	}

	.exweb-faq-item__details > summary::-webkit-details-marker {
		display: none;
	}

	.exweb-faq-item__details > summary::after {
		content: "+";
		flex: none;
		color: var(--wp--preset--color--brand-ink);
		font-weight: 700;
	}

	.exweb-faq-item__details[open] > summary::after {
		content: "–";
	}

	.exweb-faq-item__details .wp-block-details__content,
	.exweb-faq-item__details p {
		font-size: 14px;
		line-height: 1.7;
		color: var(--wp--preset--color--secondary);
	}

	/* ---------- 相关帮助：纯文字列表（标题 16/600 + 日期 13，左对齐，无卡片） ---------- */
	.exweb-related ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.exweb-related li + li {
		margin-top: 14px;
	}

	.exweb-related .wp-block-post-title {
		margin: 0;
		font-size: var(--wp--preset--font-size--heading-3);
		font-weight: 600;
		line-height: 1.6;
	}

	.exweb-related .wp-block-post-title a {
		color: var(--wp--preset--color--primary);
		text-decoration: none;
	}

	.exweb-related .wp-block-post-title a:hover {
		color: var(--wp--preset--color--brand-ink);
		text-decoration: underline;
	}

	.exweb-related__date {
		margin: 2px 0 0;
		color: var(--wp--preset--color--text-muted);
		font-size: 13px;
	}

	/* ---------- 页尾咨询引导：无边框柔和白卡 ---------- */
	.exweb-cta {
		padding: 32px;
		border-radius: var(--exweb-r-panel);
		background-color: var(--wp--preset--color--surface);
	}

	.exweb-cta h2 {
		margin: 0 0 8px;
	}

	.exweb-cta p {
		max-width: 560px;
		margin: 0;
		color: var(--wp--preset--color--secondary);
		font-size: 14px;
		line-height: 1.8;
	}

	.exweb-cta__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 12px;
		margin: 16px 0 0;
	}

	.exweb-cta__actions a {
		margin: 0;
	}
}

/* ============================================================
 * Unlayered: WP/Woo block harmonisation
 * (unlayered rules win over WP block-library defaults, keeping
 *  component styles predictable without specificity wars)
 * ============================================================ */

/* Core button blocks follow the design system (primary look). */
.wp-block-button__link,
.wp-block-button__link:hover {
	background-color: var(--wp--preset--color--brand-ink);
	color: #ffffff;
	border-radius: var(--wp--custom--radius--md);
	text-decoration: none;
}

.wp-block-button__link:hover {
	background-color: var(--wp--preset--color--brand-hover);
}

.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--brand-ink);
	border: 1px solid var(--wp--preset--color--border-strong);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--brand-hover);
}

/*
 * 锚点按钮颜色：WP 全局样式输出**未分层**的 `a:where(:not(.wp-element-button))`，
 * 未分层规则会压过分层组件色，导致主按钮（品牌蓝底）文字同为品牌蓝而不可见。
 * 这里用未分层且更高specificity的规则显式恢复各变体的文字色。
 */
a.exweb-btn,
a.exweb-btn:hover,
a.exweb-btn:active {
	color: #ffffff;
}

a.exweb-btn--secondary,
a.exweb-btn--secondary:active,
a.exweb-btn--ghost,
a.exweb-btn--ghost:active,
a.exweb-btn--soft,
a.exweb-btn--soft:active {
	color: var(--wp--preset--color--brand-ink);
}

a.exweb-btn--secondary:hover,
a.exweb-btn--ghost:hover,
a.exweb-btn--soft:hover {
	color: var(--wp--preset--color--brand-hover);
}

/* Mobile navigation overlay: opaque surface so links never float over content. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--bg);
	padding: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--wp--custom--shadow--md);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 6px 0;
	font-size: var(--wp--preset--font-size--body);
}

/* Navigation link states. */
.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-ink);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Group-based components must win over WP layout padding resets
 * (unlayered rules beat WP's unlayered has-global-padding cascade). */
.wp-block-group.exweb-card {
	padding: var(--wp--preset--spacing--50);
}

/* ============================================================
 * 帮助**分类归档**页文章网格（taxonomy-help_category.html）
 *
 * 为什么必须写在未分层区：Core 输出
 *   `:root :where(.is-layout-flow) > *{ margin-block-start: 24px }`
 * `:where()` 特异性为 0，但**未分层作者样式恒胜过任何 @layer 规则**（与文件顶部
 * 第 15–18 行声明的同一条约束）。第一版把它写在 `@layer exweb.base` 里，实测
 * `margin-block: 0` 完全不生效，第二列卡片被下推 24px、两列标题行错开 23.9px。
 *
 * 为什么不用现成的 `.exweb-grid`：那个类给 3 列，`/help/` 用在自己的**分类卡**上
 * （只有「标题 + 篇数徽标 + 5 条链接」）。这里是「标题 + 日期 + 28 字摘要」的**文章卡**：
 * 1200px 容器 3 列实测每列约 371px，摘要被压成 4–5 行参差窄条，且篇幅相近的卡片
 * 高度差被行内等高放大成明显空白；2 列每列约 576px，摘要 2–3 行收尾，
 * 更接近站点阅读节奏（对比 `.exweb-reading` 的 720px）。故新建 post-template 变体类，
 * 而不改动 `.exweb-grid` 的既有含义（保住 /help/ 的回归面）。
 *
 * 设计值均来自已登记 token：间距 `--wp--preset--spacing--50`(24px)，
 * 断点沿用本站既有约定 860px（见 `.exweb-grid` 与 main.css 多处），无新设计值。
 * ============================================================ */
.exweb-query-grid.wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50, 24px);
}

/* 网格子项是 `<li class="wp-block-post">`；其内部唯一的 `<div class="exweb-card">`
 * 才是可见卡片。两层都要显式等高，否则 li 被行高拉伸、卡片却仍是自身内容高，
 * 同行卡片的边框底边不在一条线上。 */
.exweb-query-grid.wp-block-post-template > li {
	margin-block: 0;
	display: flex;
}

.exweb-query-grid.wp-block-post-template > li > .exweb-card {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.exweb-query-grid.wp-block-post-template .exweb-card > *:last-child {
	margin-bottom: 0;
}

/* 窄屏回落：与 `.exweb-grid` 同一断点，≤860px 单列（375px 实测 1 列）。 */
@media (max-width: 860px) {
	.exweb-query-grid.wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wp-block-group.exweb-alert {
	padding: var(--wp--preset--spacing--40);
}

.wp-block-group.exweb-empty {
	padding: var(--wp--preset--spacing--60);
}

.wp-block-group.exweb-toc {
	padding: var(--wp--preset--spacing--40);
}

/* Site logo（页头品牌标识，2026-09-20 品牌素材接入）。
 * 为什么这一条**必须**放在未分层区（与上面几条同一原因）：Core 的
 * `.wp-block-site-logo img { height: auto; max-width: 100% }` 是未分层的，而“未分层作者样式”
 * 总是赢过分层（@layer exweb.components）规则 —— 写在层里的 `height: 40px` 会静默无效。
 * 实测后果（本地 dev，修复前）：`wp_get_attachment_image()` 给懒加载标识加了 `sizes="auto, …"`，
 * 而 `auto` 在宽高都为 auto 时用**容器宽度**解析 ⇒ 首页标识被撑到 1080×1080（页头高度 1180px）。
 * 因此这里把宽高都钉死（源图是正方形，构建脚本 `scripts/build-brand-logo.py` 保证），
 * 不再依赖 srcset/sizes 的推导，也没有加载期尺寸回跳（宽高属性 40 与之一致）。
 * `display: block` 去掉行内图片的基线空隙，让标识与文字站名在同一中线上。
 * 注意：`custom_logo` 还可能被其它调用路径（`the_custom_logo()`、WooCommerce）渲染，
 * 这条规则对它们同样生效。 */
.exweb-header .wp-block-site-logo .custom-logo {
	display: block;
	width: var(--exweb-brand-logo);
	height: var(--exweb-brand-logo);
}

/* Content tables (help article body) follow the design system. */
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-table th,
.wp-block-table td {
	padding: 10px 14px;
	border: 1px solid var(--wp--preset--color--border);
	text-align: left;
	vertical-align: top;
}

.wp-block-table th {
	font-weight: 600;
	background-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--primary);
}

/* WooCommerce notices → design system look (status not by color alone). */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	display: flex;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-left: 4px solid var(--wp--preset--color--info);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	list-style: none;
	margin: 0 0 16px;
}

.woocommerce-message {
	border-left-color: var(--wp--preset--color--success);
}

.woocommerce-error {
	border-left-color: var(--wp--preset--color--danger);
}

.woocommerce-error::before {
	content: "Error";
	font-weight: 700;
	margin-right: 4px;
}

.woocommerce-message::before {
	content: "OK";
	font-weight: 700;
	margin-right: 4px;
	color: var(--wp--preset--color--success);
}

/* Add-to-cart form on service detail.
 * P3-R03：面板内间距收拢到设计系统节奏（未分层规则才能压过 Woo 未分层默认值）。 */
.exweb-panel .wp-block-add-to-cart-form,
.woocommerce div.product form.cart,
.wc-block-add-to-cart-form {
	margin: 8px 0 0;
}

.exweb-panel .wp-block-woocommerce-product-stock-indicator {
	margin: 0;
}

.exweb-panel .exweb-panel__ask {
	margin: 8px 0 0;
}

/* FAQ 手风琴的完整样式在 exweb.components 层（白底圆角行 +/– 符号），此处不再重复定义。 */

/* ============================================================
 * P5: 交易与账户页面（购物车 / 结账 / 订单 / 我的账户）
 * 目标：与既有设计系统（色板 token、圆角、触控尺寸、可见焦点）一致，
 * 且不改变任何金额、状态、库存或权限逻辑。
 * ============================================================ */

/* ---------- 购物车/结账区块控件与设计系统对齐 ---------- */
.wc-block-components-button:not(.is-link),
.wp-block-woocommerce-cart .wc-block-components-button,
.wc-block-checkout__actions .wc-block-components-button {
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--brand-ink);
	color: #ffffff;
	font-weight: 500;
	min-height: 44px;
	padding: 10px 20px;
}

.wc-block-components-button:not(.is-link):hover:not(:disabled) {
	background-color: var(--wp--preset--color--primary);
	color: #ffffff;
}

.wc-block-components-button:not(.is-link):disabled,
.wc-block-components-button:not(.is-link)[aria-disabled="true"] {
	background-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--text-muted);
	opacity: 1;
}

/* L1-10：WooCommerce 区块按钮的焦点环不是设计系统值（实测 outline 3px transparent + 蓝色
 * box-shadow rgba(6,117,196,…)）。原因：它属**未分层**区块样式，压过 `@layer exweb.base`
 * 里的全局 `:focus-visible`。这里只在未分层区、只对 Woo 区块按钮的焦点态恢复设计系统值
 * （focus ring = brand-ink 2px / offset 2px，DESIGN_SYSTEM §2），不改变任何其它按钮样式。 */
.wc-block-components-button:not(.is-link):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-ink);
	outline-offset: 2px;
	box-shadow: none;
}

/* 触控友好的输入控件（结账、账户、加购数量） */
.wc-block-components-text-input input,
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-select__container select,
.wc-block-components-quantity-selector input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	min-height: 44px;
	padding: 10px 12px;
}

/* 原生焦点环优先；区块自带的 box-shadow 焦点不遮挡可见轮廓 */
.wc-block-components-text-input input:focus-visible,
.wc-block-components-select__container select:focus-visible,
.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row select:focus-visible,
.woocommerce form .form-row textarea:focus-visible {
	box-shadow: none;
	outline: 2px solid var(--wp--preset--color--brand-ink);
	outline-offset: 2px;
}

/* 必填/错误的就近提示：只表达事实，不靠颜色单独传达 */
.wc-block-components-validation-error,
.woocommerce form .form-row.woocommerce-invalid .wc-block-components-validation-error {
	color: var(--wp--preset--color--danger);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- 18+ 结账必选确认项（T2，PLACEMENT_INTERFACE_SPEC §8.2） ----------
 * 只作用于这一个字段（WooCommerce 区块为附加字段生成的语义类名
 * `wc-block-components-address-form__<field>`），不动其它复选框：
 *   1) 触控目标 ≥ 44px（DESIGN_SYSTEM §6）—— 方框仍为 20px，扩的是 label 的整行可点区域；
 *   2) 焦点环回到设计系统值（brand-ink 2px / offset 2px，DESIGN_SYSTEM §2）——
 *      区块自带的未分层样式会让它显示为浏览器默认细黑环。
 */
.wc-block-components-address-form__exweb-age-confirmation .wc-block-components-checkbox__label {
	font-size: var(--wp--preset--font-size--body);
}

.wc-block-components-address-form__exweb-age-confirmation label {
	min-height: 44px;
	align-items: center;
}

.wc-block-components-address-form__exweb-age-confirmation .wc-block-components-checkbox__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-ink);
	outline-offset: 2px;
}

.wc-block-components-text-input.has-error input,
.woocommerce form .form-row.woocommerce-invalid input.input-text {
	border-color: var(--wp--preset--color--danger);
}

/* ---------- 区块通知 → 设计系统提示条 ---------- */
.wc-block-components-notice-banner {
	border: 1px solid var(--wp--preset--color--border);
	border-left: 4px solid var(--wp--preset--color--info);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
}

.wc-block-components-notice-banner.is-success {
	border-left-color: var(--wp--preset--color--success);
}

.wc-block-components-notice-banner.is-error {
	border-left-color: var(--wp--preset--color--danger);
}

.wc-block-components-notice-banner.is-warning {
	border-left-color: var(--wp--preset--color--warning);
}

/* ---------- 支付方式（不绑定任何真实服务商） ---------- */
.exweb-payment-method__title {
	display: block;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

.exweb-payment-method__description {
	display: block;
	margin-top: 4px;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
}

.wc-block-checkout__payment-method .wc-block-components-radio-control__option {
	padding: 12px;
}

/* ---------- 订单状态面板 ---------- */
.exweb-order-state {
	display: grid;
	gap: 12px;
	margin: 0 0 24px;
}

.exweb-order-state__badge {
	margin: 0;
}

.exweb-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* ---------- 我的账户：导航与表单 ---------- */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface);
	overflow: hidden;
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.woocommerce-MyAccount-navigation li:last-child {
	border-bottom: none;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 16px;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li.is-active a {
	background-color: var(--wp--preset--color--muted);
	font-weight: 600;
	border-left: 4px solid var(--wp--preset--color--brand-ink);
}

.woocommerce-MyAccount-navigation li a:hover {
	color: var(--wp--preset--color--brand-ink);
}

/* 我的账户两栏：窄屏堆叠，不产生横向溢出 */
@media (min-width: 900px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: left;
		width: 26%;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		float: right;
		width: 70%;
	}
}

.woocommerce-account .woocommerce-MyAccount-content::after {
	content: "";
	display: table;
	clear: both;
}

.woocommerce form .form-row label,
.woocommerce-EditAccountForm label {
	display: block;
	margin-bottom: 4px;
	font-weight: 500;
	color: var(--wp--preset--color--primary);
}

.woocommerce form .form-row {
	margin-bottom: 16px;
}

/* ---------- 订单表格：窄屏可横向滚动，避免页面级横向溢出 ---------- */
.exweb-table-scroll,
.woocommerce-orders-table__wrapper {
	max-width: 100%;
	overflow-x: auto;
}

.exweb-table-scroll table,
.woocommerce-orders-table__wrapper table {
	min-width: 520px;
}

.woocommerce-orders-table th,
.woocommerce-orders-table td,
.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
	padding: 10px 12px;
	vertical-align: top;
}

/* ---------- 账户详情中仅有的真实联系方式（无地址时不显示空地址块） ---------- */
.exweb-customer-details--contact-only {
	font-style: normal;
}


/* ============================================================
 * P6-V：消息页组件（ConversationItem / MessageBubble / MessageComposer）
 *
 * 说明：全部数值取自 theme.json token（颜色/间距/圆角/字号/动效），
 * 组件类复用既有命名与 @layer exweb.components 层，与 P3–P5 组件同源。
 * 新增的唯一表单组件是 FieldLabel（.exweb-label），补齐既有
 * HelpText/FieldError 之外的可见字段标签样式。
 * ============================================================ */
@layer exweb.components {
	/* ---------- FieldLabel（表单可见标签） ---------- */
	.exweb-label {
		display: block;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
		line-height: 1.5;
		color: var(--wp--preset--color--primary);
	}

	/* ---------- MessageComposer ---------- */
	.exweb-composer {
		display: grid;
		gap: var(--wp--preset--spacing--20);
	}

	.exweb-composer__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--wp--preset--spacing--30);
	}

	.exweb-textarea {
		box-sizing: border-box;
		max-width: 100%;
	}

	.exweb-status {
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.5;
		color: var(--wp--preset--color--secondary);
	}

	.exweb-status:empty {
		display: none;
	}

	.exweb-status[data-state="sent"] {
		color: var(--wp--preset--color--success);
		font-weight: 500;
	}

	.exweb-status[data-state="sending"] {
		color: var(--wp--preset--color--secondary);
	}

	.exweb-status[data-state="not-confirmed"] {
		color: var(--wp--preset--color--danger);
		font-weight: 500;
	}

	/* ---------- ConversationItem ---------- */
	.exweb-conversations {
		display: grid;
		gap: var(--wp--preset--spacing--30);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.exweb-conversation__link {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
		box-sizing: border-box;
		max-width: 100%;
		padding: var(--wp--preset--spacing--40);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius--lg);
		background-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--primary);
		text-decoration: none;
		transition: border-color var(--exweb-transition) ease, background-color var(--exweb-transition) ease;
	}

	.exweb-conversation__link:hover {
		border-color: var(--wp--preset--color--border-strong);
		background-color: var(--wp--preset--color--muted);
	}

	.exweb-conversation__link:focus-visible {
		outline: 2px solid var(--wp--preset--color--brand-ink);
		outline-offset: 2px;
	}

	/* 未读：左侧品牌色边 + “N unread” 文案（不靠颜色单一传达）。 */
	.exweb-conversation.is-unread .exweb-conversation__link {
		border-left: 4px solid var(--wp--preset--color--brand-ink);
	}

	.exweb-conversation__main {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
		min-width: 0;
	}

	.exweb-conversation__title {
		font-size: var(--wp--preset--font-size--body);
		font-weight: 600;
		line-height: 1.5;
		overflow-wrap: anywhere;
	}

	.exweb-conversation__meta {
		display: inline-flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--wp--preset--spacing--30);
		margin: 0;
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--text-muted);
	}

	.exweb-conversation__aside {
		display: inline-flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--wp--preset--spacing--20);
	}

	.exweb-conversation__time {
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--secondary);
		white-space: nowrap;
	}

	/* ---------- MessageBubble ---------- */
	.exweb-thread {
		display: grid;
		gap: var(--wp--preset--spacing--30);
		margin: 0 0 var(--wp--preset--spacing--60);
		padding: 0;
		list-style: none;
	}

	.exweb-msg {
		box-sizing: border-box;
		max-width: 85%;
		margin: 0;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius--lg);
	}

	/* 客户消息：靠右、muted 底色、右下角小圆角（与客服相反）。 */
	.exweb-msg--visitor {
		margin-left: auto;
		background-color: var(--wp--preset--color--muted);
		border-bottom-right-radius: var(--wp--custom--radius--sm);
	}

	/* 客服消息：靠左、surface 底色、左下角小圆角。 */
	.exweb-msg--support {
		margin-right: auto;
		background-color: var(--wp--preset--color--surface);
		border-bottom-left-radius: var(--wp--custom--radius--sm);
	}

	/* 系统消息：居中、虚线边框、无气泡底色。 */
	.exweb-msg--system {
		max-width: 100%;
		margin-inline: auto;
		border-style: dashed;
		background-color: transparent;
		font-size: var(--wp--preset--font-size--small);
	}

	.exweb-msg__author {
		margin: 0 0 var(--wp--preset--spacing--10);
		font-size: var(--wp--preset--font-size--caption);
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--wp--preset--color--secondary);
	}

	.exweb-msg__body {
		margin: 0;
		white-space: pre-wrap;
		overflow-wrap: anywhere;
	}

	/* ---------- P6-V3：BBCode 白名单元素的排版（只做必要的可读性，不加装饰） ---------- */
	.exweb-msg__body strong {
		font-weight: 700;
	}

	.exweb-msg__body a {
		color: var(--wp--preset--color--brand-ink);
		text-decoration: underline;
		text-underline-offset: 2px;
		overflow-wrap: anywhere;
	}

	.exweb-msg__body a:hover {
		text-decoration-thickness: 2px;
	}

	.exweb-msg__body a:focus-visible {
		outline: 2px solid var(--wp--preset--color--brand-ink);
		outline-offset: 2px;
	}

	/* 附件占位：明确「不可点击」，用虚线边与次要色与真链接区分（不靠颜色单一传达：
	 * 它是 <span> 而非 <a>，鼠标指针与可聚焦性天然不同）。 */
	.exweb-bb-attachment {
		display: inline-block;
		padding: 2px 8px;
		border: 1px dashed var(--wp--preset--color--border-strong);
		border-radius: var(--wp--custom--radius--sm);
		background-color: var(--wp--preset--color--muted);
		color: var(--wp--preset--color--secondary);
		font-size: var(--wp--preset--font-size--small);
		white-space: nowrap;
	}

	.exweb-msg__time {
		display: block;
		margin-top: var(--wp--preset--spacing--20);
		font-size: var(--wp--preset--font-size--caption);
		color: var(--wp--preset--color--secondary);
	}
}

/* ---------- 消息页：Alert / EmptyState 内部间距（复用既有组件，不新增视觉语言） ---------- */
.exweb-alert p.exweb-alert__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--30);
}

/* .exweb-alert 使用 display:flex，需要显式恢复 [hidden] 语义。 */
.exweb-alert[hidden] {
	display: none;
}

.exweb-empty p.exweb-empty__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
}

.exweb-empty .exweb-empty__actions .exweb-btn {
	margin-top: 0;
}

/* ---------- 消息页窄屏：列表项纵排，操作区两端对齐，避免横向溢出 ---------- */
@media (max-width: 600px) {
	.exweb-conversation__link {
		align-items: flex-start;
		flex-direction: column;
	}

	.exweb-conversation__aside {
		width: 100%;
		justify-content: space-between;
	}

	.exweb-msg {
		max-width: 100%;
	}
}

/* ============================================================
 * P6-V2 消息中心（LHC-V2-02）：Sage & Ink 语言下的会话布局
 *
 * 用户裁决①的核心：/messages/ 与首页/详情页同一视觉语言——同一 1080px
 * 页面容器体系（main 区块 contentSize=1080px）、同一字体层级、无边框卡片（气泡允许）、
 * token 全经 var()；不留深绿大面积。会话页 = 左侧窄信息区 + 右侧聊天主体；
 * ≤860px 折叠为整页聊天（动态视口策略，不用 height:100vh+fixed）。
 * ============================================================ */
@layer exweb.components {
	/* ---------- V2 状态文字（StatusText：状态永远配文字，不靠颜色） ---------- */
	.exweb-state-text {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 500;
		color: var(--wp--preset--color--text-muted);
	}

	.exweb-state-text.is-success {
		color: var(--wp--preset--color--success);
	}

	.exweb-state-text.is-warning {
		color: var(--wp--preset--color--warning);
	}

	.exweb-state-text.is-info {
		color: var(--wp--preset--color--brand-ink);
	}

	/* ---------- 会话布局：1080px 容器 + 左窄栏 / 右聊天 ---------- */
	.exweb-messages-layout {
		display: grid;
		gap: var(--wp--preset--spacing--50);
		align-items: start;
		grid-template-columns: 240px minmax(0, 1fr);
	}

	.exweb-messages-rail {
		display: grid;
		gap: var(--wp--preset--spacing--40);
		align-content: start;
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
		border-radius: var(--exweb-r-panel, 22px);
		background-color: var(--wp--preset--color--brand-soft);
	}

	.exweb-messages-rail__title {
		margin: 0;
		font-size: 26px;
		font-weight: 700;
		line-height: 1.5;
		color: var(--wp--preset--color--primary);
	}

	.exweb-messages-rail__nav {
		display: grid;
		gap: var(--wp--preset--spacing--10);
	}

	.exweb-rail-link {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		min-height: 44px;
		padding: 10px 12px;
		border-radius: var(--wp--custom--radius--md);
		color: var(--wp--preset--color--primary);
		font-size: var(--wp--preset--font-size--small);
		text-decoration: none;
		transition: background-color var(--exweb-transition) ease;
	}

	.exweb-rail-link:hover {
		background-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--brand-ink);
	}

	.exweb-rail-link:focus-visible {
		outline: 2px solid var(--wp--preset--color--brand-ink);
		outline-offset: 2px;
	}

	.exweb-rail-link.is-current {
		background-color: var(--wp--preset--color--surface);
		font-weight: 600;
		color: var(--wp--preset--color--brand-ink);
	}

	.exweb-messages-rail__meta {
		margin: 0;
		display: grid;
		gap: var(--wp--preset--spacing--20);
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--secondary);
	}

	/* ---------- P6-V3：入口视图（决定 2 = ②）左侧会话列表栏 ----------
	 * 与聊天页共用 .exweb-messages-layout（240px + 1fr），因此从入口点进会话时
	 * 栏位宽度与视觉不跳变。栏内列表可独立滚动，长会话不撑破页面。
	 * ---------------- */
	.exweb-messages-rail__list {
		display: grid;
		gap: var(--wp--preset--spacing--10);
		margin: 0;
		padding: 0;
		list-style: none;
		/* rail 内滚动：会话多时不把右栏与页脚推走。 */
		max-height: min(60vh, 520px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* 入口列表项：紧凑行（rail 宽度只有 240px，不能沿用卡片的 40px 内距）。 */
	.exweb-messages-rail__list .exweb-conversation__link {
		display: grid;
		gap: var(--wp--preset--spacing--10);
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
		border-color: transparent;
		background-color: transparent;
		border-radius: var(--wp--custom--radius--md);
	}

	.exweb-messages-rail__list .exweb-conversation__link:hover {
		background-color: var(--wp--preset--color--surface);
		border-color: var(--wp--preset--color--border);
	}

	.exweb-messages-rail__list .exweb-conversation.is-unread .exweb-conversation__link {
		border-left: 3px solid var(--wp--preset--color--brand-ink);
	}

	/* 当前会话高亮（聊天页 rail）：与 .exweb-rail-link.is-current 同一语言，
	 * 并用 aria-current="page" 给屏幕阅读器第二个线索。 */
	.exweb-messages-rail__list .exweb-conversation__link[aria-current="page"] {
		background-color: var(--wp--preset--color--surface);
		border-color: var(--wp--preset--color--border);
	}

	.exweb-messages-rail__list .exweb-conversation__title {
		font-size: var(--wp--preset--font-size--small);
	}

	.exweb-messages-rail__list .exweb-conversation__aside {
		justify-content: space-between;
		width: 100%;
	}

	/* ---------- 站内客服会话台（管理域；共用访客模式的双栏与列表语言） ----------
	 * 只加两个新片段：分页行与列表内 nick 行。其余全部复用
	 * .exweb-messages-layout / .exweb-messages-rail__list / .exweb-chat / .exweb-msg。
	 * 无新增色值、无绝对定位。
	 * ---------------- */
	.exweb-admin-console__pager {
		display: grid;
		gap: var(--wp--preset--spacing--20);
	}

	.exweb-admin-console__range {
		margin: 0;
		font-size: var(--wp--preset--font-size--caption);
		color: var(--wp--preset--color--secondary);
	}

	.exweb-admin-console__pager-actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--20);
		margin: 0;
	}

	/* 入口右栏：引导文案（**不是**大 textarea —— 消除“这是工单”的错觉）。 */
	.exweb-messages-intro {
		display: grid;
		gap: var(--wp--preset--spacing--30);
		align-content: start;
		min-width: 0;
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
		border-radius: var(--exweb-r-panel, 22px);
		background-color: var(--wp--preset--color--surface);
	}

	.exweb-messages-intro__title {
		margin: 0;
		font-size: var(--wp--preset--font-size--large);
		font-weight: 700;
		line-height: 1.4;
		color: var(--wp--preset--color--primary);
	}

	.exweb-messages-intro__text {
		margin: 0;
		max-width: 46ch;
		color: var(--wp--preset--color--secondary);
	}

	.exweb-messages-intro__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--wp--preset--spacing--30);
	}

	/* 发起表单带（?new=1 或无 JS 时的目标区）：只占右栏宽度，不做整页大表单。 */
	.exweb-messages-newpane {
		display: grid;
		gap: var(--wp--preset--spacing--30);
		align-content: start;
		min-width: 0;
		padding: var(--wp--preset--spacing--50);
		border-radius: var(--exweb-r-panel, 22px);
		background-color: var(--wp--preset--color--surface);
	}

	.exweb-messages-newpane__head {
		display: grid;
		gap: var(--wp--preset--spacing--10);
	}

	.exweb-messages-newpane__title {
		margin: 0;
		font-size: var(--wp--preset--font-size--large);
		font-weight: 700;
		line-height: 1.4;
		color: var(--wp--preset--color--primary);
	}

	/* rail 内的“新建会话”按钮：占满 rail 宽度，直接沿用主题主按钮语言。
	 * 实测踩坑：`.exweb-btn` 自带 20px 横向内距，在 240px rail 的 grid 里用 width:100%
	 * 会超出列宽（375px 视口实测横向溢出 10px）。因此必须显式 box-sizing:border-box
	 * 并允许收缩（min-width:0），而不是去掉主题按钮的内距。 */
	.exweb-messages-rail__action {
		box-sizing: border-box;
		justify-content: center;
		width: 100%;
		min-width: 0;
		text-align: center;
	}

	/* ---------- 聊天主体（桌面占主要空间；独立滚动） ---------- */
	.exweb-chat {
		display: grid;
		grid-template-rows: auto minmax(120px, 1fr) auto;
		box-sizing: border-box;
		min-height: 480px;
		max-height: calc(100dvh - 220px);
		padding: var(--wp--preset--spacing--50);
		border-radius: var(--exweb-r-panel, 22px);
		background-color: var(--wp--preset--color--surface);
	}

	.exweb-chat__head {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--wp--preset--spacing--30);
		padding-bottom: var(--wp--preset--spacing--30);
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.exweb-chat__titles {
		min-width: 0;
	}

	.exweb-chat__title {
		margin: 0;
		font-size: 19px;
		font-weight: 700;
		line-height: 1.5;
		color: var(--wp--preset--color--primary);
		overflow-wrap: anywhere;
	}

	/* 会话副标题：访客昵称（展示用，由 visitor_hash 派生，不参与授权）。
	 * 复用 text-muted / small 既定刻度，不新增色值、不改字号体系。 */
	.exweb-chat__subtitle {
		margin: 0;
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--text-muted);
		overflow-wrap: anywhere;
	}

	/* 订单上下文条：仅真实字段，无边框，brand-soft 柔和底（有订单才渲染）。 */
	.exweb-order-context {
		display: inline-flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--wp--preset--spacing--20);
		margin-left: auto;
		padding: 8px 14px;
		border-radius: 999px;
		background-color: var(--wp--preset--color--brand-soft);
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--primary);
	}

	.exweb-order-context[hidden] {
		display: none;
	}

	.exweb-order-context__label {
		font-weight: 700;
		color: var(--wp--preset--color--brand-ink);
	}

	.exweb-chat__scroll {
		overflow-y: auto;
		overscroll-behavior: contain;
		min-height: 0;
		padding-right: var(--wp--preset--spacing--20);
	}

	.exweb-thread-wrap {
		padding-top: var(--wp--preset--spacing--40);
	}

	.exweb-chat .exweb-thread {
		margin-bottom: 0;
	}

	/* ---------- 气泡（V2 配色）：访客 brand-soft，商家 surface，系统无气泡 ---------- */
	.exweb-chat .exweb-msg--visitor {
		background-color: var(--wp--preset--color--brand-soft);
		border: none;
	}

	.exweb-chat .exweb-msg--support {
		background-color: var(--wp--preset--color--surface);
		border: 1px solid var(--wp--preset--color--border);
	}

	.exweb-msg--system {
		border: none;
		font-size: var(--wp--preset--font-size--caption);
		color: var(--wp--preset--color--text-muted);
	}

	.exweb-msg--system .exweb-msg__author {
		display: none;
	}

	.exweb-msg--system .exweb-msg__time {
		margin-top: var(--wp--preset--spacing--10);
	}

	/* ---------- 输入区 ---------- */
	.exweb-chat .exweb-composer {
		padding-top: var(--wp--preset--spacing--30);
	}

	.exweb-chat .exweb-textarea {
		border-color: var(--wp--preset--color--border-strong);
		border-radius: var(--wp--custom--radius--md);
	}

	/* ---------- ≤860px：整页聊天（移动第一优先级） ---------- */
	@media (max-width: 860px) {
		.exweb-messages-layout {
			gap: 0;
			grid-template-columns: minmax(0, 1fr);
		}

		.exweb-messages-rail {
			display: none;
		}

		/* P6-V3 入口视图在窄屏**不能**隐藏左栏：会话列表就是入口本身。
		 * 因此入口布局改纵向堆叠（列表在上、引导/表单在下），与聊天页的搁置策略分开。
		 * 聊天页仍靠 .exweb-chat__back 回到列表（?list=1）。
		 */
		.exweb-messages-layout--entry {
			gap: var(--wp--preset--spacing--40);
		}

		.exweb-messages-layout--entry .exweb-messages-rail {
			display: grid;
		}

		.exweb-messages-rail__list {
			max-height: none;
		}

		.exweb-messages-intro,
		.exweb-messages-newpane {
			padding: var(--wp--preset--spacing--40);
		}

		/* 动态视口策略：聊天高度 = 可视视口高度 − 聊天容器顶部偏移。
		 *  --exweb-vvh：visualViewport.height（JS 兜底，iOS Safari 键盘不改写 layout
		 *  viewport 时生效），回退 100dvh；--exweb-chat-top：聊天容器距视口顶部的
		 *  偏移（JS 实测，覆盖页头/页面上边距），回退 0px。不用 height:100vh+fixed。
		 */
		.exweb-chat {
			grid-template-rows: auto minmax(0, 1fr) auto;
			min-height: 0;
			max-height: none;
			border-radius: 0;
			padding: 0;
			height: 100vh;
			height: 100dvh;
		}

		/* 生效链：JS visualViewport 变量 --exweb-vvh 优先（软键盘下真实可视高度），
		 * 100dvh 兑底；不再使用单独的 svh/lvh @supports 分支（后写的无条件规则恒胜出，
		 * 死块已在复审后移除）。 */
		.exweb-chat {
			height: calc(var(--exweb-vvh, 100dvh) - var(--exweb-chat-top, 0px));
		}

		.exweb-chat__head {
			align-items: center;
			gap: var(--wp--preset--spacing--20);
			padding: calc(var(--wp--preset--spacing--20) + env(safe-area-inset-top)) var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
			border-bottom: 1px solid var(--wp--preset--color--border);
			background-color: var(--wp--preset--color--surface);
		}

		.exweb-chat__back {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			min-width: 44px;
			min-height: 44px;
			padding: 8px 10px;
			border-radius: var(--wp--custom--radius--md);
			color: var(--wp--preset--color--brand-ink);
			font-size: var(--wp--preset--font-size--small);
			font-weight: 600;
			text-decoration: none;
		}

		.exweb-chat__back:focus-visible {
			outline: 2px solid var(--wp--preset--color--brand-ink);
			outline-offset: 2px;
		}

		.exweb-chat__title {
			font-size: 17px;
		}

		.exweb-order-context {
			margin-left: 0;
		}

		.exweb-chat__scroll {
			padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
		}

		.exweb-chat .exweb-composer {
			gap: var(--wp--preset--spacing--20);
			padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) calc(var(--wp--preset--spacing--30) + env(safe-area-inset-bottom));
			border-top: 1px solid var(--wp--preset--color--border);
			background-color: var(--wp--preset--color--surface);
		}

		.exweb-msg {
			max-width: 88%;
		}

		.exweb-msg--system {
			max-width: 100%;
		}
	}

	@media (min-width: 861px) {
		.exweb-chat__back {
			display: none;
		}
	}
}

/* 消息页栈容器与 thread 表（V2 移动端整页聊天需要 overflow 链路成立）：
 * .exweb-thread-wrap 是普通块；滚动发生在 .exweb-chat__scroll。 */

/* ============================================================
 * LHC-V2 消息页外壳：模板-part 顶部 margin 归零（P6-V2 用户反馈顶部空白横条）
 * ----------------------------------------------------------------------------
 * 运行时注入的全局样式给 template-part 外层包装加了 block-gap margin（无分层，
 * 会压过 @layer 内的规则），在页面顶部形成一条空白横条；首页的模板管线不走该规则。
 * 归零必须放在无层级段。仅作用于消息页外壳。
 * ============================================================ */
.exweb-messages-page .wp-site-blocks > .wp-block-template-part:first-child,
.exweb-messages-page .wp-site-blocks > header:first-child {
	margin-top: 0;
}

/* ============================================================
 * LHC-V2 消息页外壳：模板-part 顶部 margin 归零（P6-V2 用户反馈顶部空白横条）
 * ----------------------------------------------------------------------------
 * WP 主题引擎给 .wp-site-blocks 的每个直接子元素打 `:where(.wp-site-blocks) > *
 * { margin-block-start: 24px }`（theme.json blockGap）；首页的 header part 会被
 * 另一条规则归零，而消息页外壳不走该规则 → 页头下方顶出一条空白横条。
 * 零特异性 :where() 需要用无层级段显式覆盖；只作用于消息页外壳的页头 part。
 * ============================================================ */
.exweb-messages-page .wp-site-blocks > header.wp-block-template-part:first-of-type {
	margin-block-start: 0;
}

/* ============================================================
 * P3-R 首页价格/库存文本：让容器控制排版，而不是 Woo 的内层标记
 * ----------------------------------------------------------------------------
 * get_price_html() 输出 .woocommerce-Price-amount > bdi > .woocommerce-Price-currencySymbol，
 * Woo 自己的未分层样式会给这些内层元素设字号/字重/颜色，从而压过组件意图。
 * 这里把内层恢复为继承，保证价格字号只在 .exweb-main__price / .exweb-service-row__price 定义。
 * 不修改任何 WooCommerce Core 文件。
 * ============================================================ */
.exweb-sheet__price .woocommerce-Price-amount,
.exweb-sheet__price .woocommerce-Price-amount bdi,
.exweb-sheet__price .woocommerce-Price-amount .woocommerce-Price-currencySymbol,
.exweb-main__price .woocommerce-Price-amount,
.exweb-main__price .woocommerce-Price-amount bdi,
.exweb-main__price .woocommerce-Price-amount .woocommerce-Price-currencySymbol,
.exweb-service-row__price .woocommerce-Price-amount,
.exweb-service-row__price .woocommerce-Price-amount bdi,
.exweb-service-row__price .woocommerce-Price-amount .woocommerce-Price-currencySymbol {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

/* 首页行列表与 FAQ 里的 WooCommerce 价格不应被 Woo 的块样式加下划线或变色 */
.exweb-service-row__link:hover .exweb-service-row__price {
	color: var(--wp--preset--color--primary);
}

/* ============================================================
 * BCS-01 银行卡商品展示组件（bank-card-showcase 接入）
 * ----------------------------------------------------------------------------
 * 站点侧只做承载容器：组件产物（assets/bank-card-showcase/，原样 vendored）自带全部
 * 卡片外观与交互，本文件**不出现任何 .bc-* 覆盖规则**（bcs-verify.mjs 静态断言）。
 *
 * 版式（2026-09-19 用户修订，取代首版"绿色舞台衬底"）：
 *   卡面 **自成一张面板**（无外衬、无内边距、无边框、不套父容器面色），
 *   与信息面板 / 购买面板 **并列同层**摆放——两张卡并排，而不是"卡片套在绿色框里"。
 *   卡面圆角由卡面素材自身的 ISO 圆角与组件根元素提供，站点不额外包盒子。
 * ============================================================ */

/* ---------- 服务详情页：卡面在左栏独立成面（填满左栏，比购买面板大一圈），与右侧购买面板并排 ----------
 * 2026-09-19 用户修订：一大一小（大卡面 + 小一圈的购买卡），两者**水平中轴线重合**。 */
.exweb-cardstage {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
}

/* 无卡面图时（服务端不输出承载容器）整个位置不占位，避免留下一段空白行距 */
.exweb-product__stage:not(:has(.bc-mount)) {
	display: none;
}

/* ---------- 首页核心服务：卡面面板 + 信息面板 = 两张并列的卡 ----------
 * 原设计是"一个 brand-soft 大面板 + 内部图片位"，会让卡面被一圈绿色 UI 包住；
 * 现改为同层并列：左卡面、右信息白卡。 */
.exweb-sheet {
	display: grid;
	gap: 24px;
	padding: 0;
	border-radius: 0;
	background: none;
}

.exweb-sheet__media,
.exweb-sheet__media--card {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	/* 旧三段网格把图片位定成 grid-row: 1 / span 2，会让卡面跨两行、信息卡被顶到行首
	 * （实测中轴线差 22px）；并列布局下必须交回自动放置。 */
	grid-row: auto;
	grid-column: auto;
}

/* 卡面面板：容器完全透明，让卡面自己作为一张卡站立 */
.exweb-sheet__media--card {
	aspect-ratio: auto;
	height: auto;
	overflow: visible;
	padding: 0;
	border-radius: 0;
	background: none;
}

/* ============================================================
 * P3-R-PERF-02 卡面承载容器的 CLS 预留（观测到且用户点名）
 * ----------------------------------------------------------------------------
 * 实测归因（tests/visual/p3r-perf-cls.mjs，390px/1.6Mbps/4×CPU）：
 *   唯一一条 layout-shift 的 sources = `DIV.exweb-sheet__body`
 *   previousRect y=501 h=344 → currentRect y=726 h=118（+225 / −226），value 0.0998。
 *   触发者是它上面那张卡面：`<img class="holo-card__image">` **由 JS 创建**
 *   （bc-adapter.js → 组件 createBankCard），在脚本执行前承载容器实测高度为 **0**
 *   （`.bc-mount` 358×0），挂载后才变成 358×226。
 *   ⇒ 服务端无法在 HTML 里给出图片尺寸，容器又不预留高度，于是首屏在脚本到达时整体下移。
 *
 * 修复：用**服务端已经知道的**比例（blocks.php 输出 `data-bc-aspect="1.586"`，与卡面素材
 * 1015×640 一致）给承载容器预留盒子，使脚本到达前后几何完全相同 —— 修的是「预留」，
 * 不是视觉：卡面最终尺寸仍由组件按同一比例计算，故不改变任何观感。
 *
 * 只作用于**本主题自有**的承载容器 `.bc-mount`（不写组件命名空间 `.bc-card*`，
 * `bcs-verify.mjs` 的 `styles.no-bc-overrides` 静态断言仍通过）。
 * 选择器带 `[data-bc-mount]` 状态门：组件挂载后由组件接管尺寸，规则自动让位。
 * ============================================================ */
.exweb-sheet__media--card[data-bc-stage] > .bc-mount[data-bc-card],
.exweb-cardstage[data-bc-stage] > .bc-mount[data-bc-card] {
	aspect-ratio: 1.586;
	width: 100%;
	height: auto;
}


/* 卡片本身就是视觉主体：关掉"无图占位"用的两个装饰几何 */
.exweb-sheet__media--card::before,
.exweb-sheet__media--card::after {
	content: none;
}

/* 信息面板：surface 白卡（22px、无边框），与卡面同层 */
.exweb-sheet__body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	padding: 32px;
	border-radius: var(--exweb-r-panel);
	background-color: var(--wp--preset--color--surface);
}

/* 旧三段网格布局的 align-self 会泄露到新的 flex 列里（实测：名称被推到右侧、
 * 按钮居中），必须在同一层显式重置，否则信息面板看起来“没对齐”。 */
.exweb-sheet__name,
.exweb-sheet__line,
.exweb-sheet__buy {
	align-self: stretch;
	min-width: 0;
	text-align: left;
}

/* 并列布局（2026-09-19 用户修订）：一大一小——卡面列更宽，信息卡小一圈，
 * 且两者**水平中轴线重合**（align-items: center）；信息卡内文字左对齐。 */
@media (min-width: 861px) {
	.exweb-sheet {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		column-gap: 24px;
		row-gap: 24px;
		align-items: center;
	}

	.exweb-sheet__buy {
		align-items: flex-start;
		text-align: left;
	}
}

/* 详情页双栏（2026-09-19 用户澄清）：页面形态按原设计——右侧购买面板**独立且 sticky**，
 * 滚动长正文时不被隐藏（它跨标题/卡面/正文三行，拥有完整滚动行程）；
 * 「一大一小 + 中轴线重合」是**首页**并列卡的要求，不适用于详情页。
 * 卡面仍按用户要求适当放大：填满左栏（@1440 = 692×436）。 */
@media (min-width: 861px) {
	.exweb-product__stage {
		grid-column: 1;
		grid-row: 2;
	}

	.exweb-product__body {
		grid-column: 1;
		grid-row: 3;
	}

	.exweb-panel {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: start;
		position: sticky;
		top: 24px;
	}
}

/* ≤860px：两张卡上下堆叠，内边距收窄；卡面保持 1.586 比例不压缩 */
@media (max-width: 860px) {
	.exweb-sheet {
		padding: 0;
		gap: 16px;
	}

	.exweb-sheet__body {
		padding: 24px;
	}
}