/*
 * MOK Enterprise — 前台样式
 * 颜色/字号/间距/圆角全部来自 theme.json 预设变量；本文件只做布局与组件外观。
 * 视觉基线：白 / #F3F5F7 交替、#202935 标题、#525252 正文、#007BFF 品牌、深色页脚。
 */

/* ------------------------------------------------------------------ 基础 */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

/*
 * 固定页头的预留高度只有一个来源：--mok-header-total。
 * - 单行版式 = theme.json 的 custom.header.height（桌面 80px）；
 * - 双行版式 = custom.header.row1 + row2（64 + 48 = 112px，row2 的 1px 上边线算在 border-box 内）；
 * - ≤781px 两种版式都收成一行，统一用 custom.header.height-mobile（87px）。
 * body 顶部预留、锚点 scroll-margin-top 都读这一个变量，不再各自算一遍。
 */
:root {
	--mok-header-row1: var(--wp--custom--header--row1, 64px);
	--mok-header-row2: var(--wp--custom--header--row2, 48px);
	--mok-header-total: var(--wp--custom--header--height, 80px);
	/* 登录态 admin bar 的偏移：0 / 32（桌面）/ 46（≤782）。 */
	--mok-admin-offset: 0px;
	/*
	 * 页面内锚点导航（单页模式 + 「显示页内锚点导航条」勾选）吸在页头下方的自身高度。
	 *
	 * 用户 2026-10-28 修订：锚点条默认不输出，这里**不再**给 54px 的保守预留
	 * （它会凭空在页头下方留一条空洞）。没有该导航时恒为 0；
	 * 真的打开锚点条时由 assets/js/header-offset.js 实测后写成真实高度。
	 */
	--mok-anchor-nav-reserve: 0px;
	/*
	 * 无 JS 的保守余量：页头可能比 token 略高（长菜单换行、搜索行、读者放大字体），
	 * 锚点落点额外多留 24px，宁可在标题上方多留白，也不让标题被固定页头盖住。
	 * JS 实测到真实高度后由 html.mok-header-measured 归零。
	 */
	--mok-header-slack: 24px;
}

/*
 * 历史上这里用 html:has(.mok-anchor-nav) 给锚点条预留 54px。
 * 现在锚点条默认关闭（option home_anchor_nav = 0），预留值恒为 0：
 * 既不会在页头与首屏之间留空洞，scroll-margin-top 也不会多出一段空白。
 * 真正开启锚点条时 header-offset.js 会写入实测高度。
 */
html:has(.mok-anchor-nav) {
	--mok-anchor-nav-reserve: 0px;
}

html.mok-header-measured {
	--mok-header-slack: 0px;
}

body.mok-header--double {
	/* row2 的 1px 上边线含在 border-box 的 min-height 里，所以总量就是两行之和。 */
	--mok-header-total: calc(var(--mok-header-row1) + var(--mok-header-row2));
}

body.admin-bar {
	--mok-admin-offset: 32px;
}

/*
 * 注：body 的顶部预留仍只按页头自身高度（--mok-header-total）计算，
 * 登录态 admin bar 的偏移只加在锚点 scroll-margin-top 上（见文件末尾），
 * 避免改动既有页面整体位移。
 */
body {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	/* 固定页头不占流：预留高度取 --mok-header-total（单行 80 / 双行 row1+row2+border）。 */
	padding-top: var(--mok-header-total, 80px);
	/* 长单词/长 URL 允许换行，避免靠 overflow-x: hidden 掩盖溢出。 */
	overflow-wrap: break-word;
}

/*
 * 用户 2026-10-28 修订：页头与第一屏之间不留空白带。
 *
 * theme.json 的全局 blockGap（24px）会给 .wp-site-blocks 的后续子块加
 * margin-block-start，固定页头下面因此会多出一条背景空条（首页在 hero 上方、
 * 文章/页面在有 banner 的页面在正文上方）。页头是 fixed 且 body 已经预留高度，
 * 所以 main 与紧随页头的首个视觉块都不需要再留块间距。
 */
.wp-site-blocks > main {
	margin-block-start: 0;
}

/*
 * 页脚与正文之间不留缝（2026-11-01 用户反馈「main-content 和 footer 之间有个白条」）。
 *
 * 页脚是模板部件，core 的 `.wp-site-blocks > * + *` 会给它加 24px 的 blockGap
 * （`margin-block-start: var(--wp--style--block-gap)`），于是正文底部与深色页脚之间
 * 露出一条 24px 的 body 底色（#F3F5F7 浅灰）——看起来就是一条白条。
 * 页脚本身就是「视觉上收尾的一整块」，不需要再和正文拉开间距，这里对齐上面
 * main 的处理方式：清零 margin-block-start。页脚自己的 padding（56/24）负责内部留白。
 */
.wp-site-blocks > footer.wp-block-template-part,
.wp-site-blocks > .mok-footer {
	margin-block-start: 0;
}

body.home .wp-site-blocks > main > .mok-anchor-nav + *,
body.home .wp-site-blocks > main > :first-child {
	margin-block-start: 0;
}

.mok-page-band + main,
.mok-banner + main {
	margin-block-start: 0;
}

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

/*
 * 链接与按钮的 AA 分工（按规格 token）：
 * - primary（#007BFF）只做小面积强调：eyebrow、图标、渐变、描边、focus 外框；
 * - primary-dark（#0059BF，白底 6.6:1）承担正文尺寸文字与白字实心底；
 * - primary-deep（#00408A，白底 9.8:1）做 hover / focus 再深一档。
 */
a {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--wp--preset--color--primary-deep);
	text-decoration: underline;
}

/*
 * 按钮链接在 hover 时保持白字：否则上面的 `a:hover` 深蓝会把白字按钮的文字
 * 也变成 primary-deep，出现「深蓝字 on 深蓝底」（对比度 1:1）。
 * 各变体（outline / CTA / hero）有更高的选择器优先级，仍按自己的配色生效。
 */
a.wp-block-button__link:hover,
a.wp-block-button__link:focus-visible,
a.wp-element-button:hover,
a.wp-element-button:focus-visible {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

:where(a, button, summary, .wp-element-button):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.wp-block-image {
	margin: 0;
}

.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: inherit;
}

.mok-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	padding: 10px 18px;
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
	border-radius: 0 0 var(--wp--custom--radius--card) 0;
	font-size: var(--wp--preset--font-size--small);
}

.mok-skip-link:focus {
	left: 0;
	color: var(--wp--preset--color--white);
}

/* --------------------------------------------------------------- 页头 */

.mok-header {
	/*
	 * 参考站页头是单行固定条：品牌 + 主导航 + 电话 + 主按钮同行，整条脱离文档流，
	 * 用 0 0 15px 阴影与内容分层（顶部留白由 body 的 padding-top 同一 token 承担）。
	 */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	width: 100%;
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--custom--shadow--header);
}

body.admin-bar .mok-header {
	top: 32px;
}

.mok-header__inner {
	width: 100%;
	max-width: var(--mok-layout-max, 1240px);
	margin: 0 auto;
	padding: 0 24px;
}

.mok-header__inner > * {
	margin-block: 0;
}

.mok-header__top {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 24px;
	/* 双行版式第一行高度（单行版式下 .mok-header__top 是 display: contents，这条不生效）。 */
	min-height: var(--mok-header-row1, 64px);
}

.mok-header__brand,
.mok-header__brand.wp-block-site-title {
	margin: 0;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink);
	/*
	 * 站点名不折行：320 下开启头部搜索时也不允许把「默可科技」拆成两行；
	 * 超长站点名改为省略号截断（仍然不横向溢出，也不把页头撑破）。
	 */
	white-space: nowrap;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mok-header__brand a {
	color: inherit;
	text-decoration: none;
}

.mok-header__tools {
	gap: 20px;
	flex-wrap: nowrap;
	/* 工具组永远贴右：导航在品牌右侧自然跟随，中间剩余空间全部吃掉。 */
	margin-left: auto;
}

.mok-header__phone {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0;
	margin: 0;
	line-height: 1.25;
	text-align: right;
}

.mok-header__phone a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.mok-header__phone a:focus-visible {
	text-decoration: underline;
}

.mok-header__phone-num {
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 800;
	letter-spacing: 0.01em;
}

.mok-header__phone-note {
	margin: 0;
	font-size: 12px;
	color: var(--wp--preset--color--primary-dark);
}

.mok-header__phone > * {
	margin-top: 0;
	margin-bottom: 0;
}

.mok-header__nav {
	/* 单行页头：导航与品牌/工具同行，不再有第二行与 1px 上边线。 */
	width: auto;
	min-height: 0;
	border-top: 0;
	align-items: center;
}

/*
 * 双行版式第二行：主导航 + （开启时）搜索。
 * 高度只由 custom.header.row2 决定，1px 上边线由 custom.header.row-border 决定；
 * 两者相加与 theme.json 的 --mok-header-total 口径一致，body 预留不会差 1px。
 */
.mok-header__row2 {
	width: 100%;
	gap: 24px;
	min-height: var(--mok-header-row2, 48px);
	border-top: var(--wp--custom--header--row-border, 1px) solid var(--wp--preset--color--border);
}

.mok-header__row2 > .mok-header__nav {
	flex: 1 1 auto;
	justify-content: flex-start;
}

.mok-header__row2 > .mok-header__search {
	flex: 0 0 220px;
}

.mok-nav .wp-block-navigation-item__content,
.mok-nav .wp-block-navigation-item > a {
	display: inline-block;
	padding: 10px 18px 10px 0;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.mok-nav .wp-block-navigation-item__content:hover,
.mok-nav .wp-block-navigation-item__content:focus,
.mok-nav .current-menu-item > .wp-block-navigation-item__content,
.mok-nav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

/*
 * 二级菜单外观（用户 2026-10-28：主导航要有二级菜单）。
 * 结构与开合行为全部由核心 navigation 提供（桌面 hover / 键盘 focus-within、
 * 移动端收进汉堡抽屉），这里只补视觉与层级，不接管交互、不写 !important。
 */
.mok-header .mok-nav .wp-block-navigation-item .wp-block-navigation__submenu-container {
	z-index: 60;
	min-width: 220px;
	padding: 8px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--card);
}

.mok-header .mok-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 10px 12px;
	font-size: 15px;
	line-height: 1.5;
	white-space: normal;
	overflow-wrap: anywhere;
}

.mok-header .mok-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.mok-header .mok-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background: var(--wp--preset--color--light);
	border-radius: var(--wp--custom--radius--card);
}

@media (max-width: 781px) {
	/*
	 * ≤781px：单行版式收成一行，预留高度统一用 custom.header.height-mobile；
	 * 双行版式要到 ≤600px 才收成一行（601–781px 核心导航仍是行内菜单，保持两行更稳），
	 * 那段高度在文件末尾的双行小节里单独处理。
	 * 登录态 admin bar 在 ≤782px 是 46px，锚点偏移同步跟着变。
	 */
	body,
	body.mok-header--single {
		--mok-header-total: var(--wp--custom--header--height-mobile, 87px);
		padding-top: var(--mok-header-total);
	}
	/* 双行版式 ≤781px 同样收成一行（结构见文件末尾的双行小节）。 */
	body.mok-header--double {
		--mok-header-total: var(--wp--custom--header--height-mobile, 87px);
	/* 搜索开启时页头多一整行搜索（实测 +17px），预留高度同步加上，内容不被压。 */
	}
	/* 搜索开启时页头多一整行搜索（36px 高 + 6px 行间距），预留高度同步加上。 */
	body.mok-search--on,
	body.mok-header--double.mok-search--on,
	body.mok-header--single.mok-search--on {
		--mok-header-total: calc(var(--wp--custom--header--height-mobile, 87px) + 17px);
	}
	body.admin-bar {
		--mok-admin-offset: 46px;
	}

	body.admin-bar .mok-header {
		top: 46px;
	}

	.mok-header__inner {
		padding: 0 16px;
	}

	.mok-header__top {
		min-height: var(--wp--custom--header--height-mobile, 87px);
		gap: 12px;
	}

	.mok-header__brand,
	.mok-header__brand.wp-block-site-title {
		font-size: 20px;
		flex: 0 1 auto;
	}

	.mok-header__tools {
		gap: 10px;
	}

	/*
	 * 390 下电话与按钮同时留在页头会挤掉品牌：电话收进「联系我们」页面，主按钮保留可点。
	 * 选择器带满三层，覆盖 WordPress 给群组输出的 display:flex（is-layout-flex）。
	 */
	.mok-header__top .mok-header__tools > .mok-header__phone {
		display: none;
	}

	.mok-header__nav {
		min-height: 0;
		border-top: 0;
	}

	.mok-nav .wp-block-navigation__responsive-container-open {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px 0;
		color: var(--wp--preset--color--ink);
	}

	.mok-nav .wp-block-navigation__responsive-container.is-menu-open {
		padding: 16px;
		background: var(--wp--preset--color--white);
	}

	.mok-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 4px;
	}

	.mok-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		width: 100%;
		padding: 12px 0;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	/*
	 * 抽屉里的二级菜单：核心 navigation 在 overlay 内默认展开子菜单（切换按钮被核心隐藏，
	 * 且点击不会折叠），所以这里只把浮层卡片改成整宽缩进列表，避免半透明白卡叠在白抽屉上。
	 * 不改核心交互、不写 !important。
	 */
	.mok-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.mok-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 10px 0;
		font-size: var(--wp--preset--font-size--small);
	}
}

/* ------------------------------------------------------------- 区块骨架 */

.mok-section {
	padding-top: var(--wp--custom--section--padding-desktop, 100px);
	padding-bottom: var(--wp--custom--section--padding-desktop, 100px);
	padding-left: 24px;
	padding-right: 24px;
	background-color: var(--wp--preset--color--base);
}

.mok-section.has-surface-background-color {
	background-color: var(--wp--preset--color--surface);
}

.mok-section__head {
	max-width: 760px;
	margin: 0 auto 48px;
	text-align: center;
}

.mok-section__head > *+* {
	margin-top: 14px;
}

/*
 * 眉标是 14px/600 的正文级文字：primary #007BFF 在白底只有 3.98、浅灰底 3.64，
 * 低于 WCAG AA 正文 4.5，所以文字用 primary-dark（6.60 / 6.04）；
 * #007BFF 退到文字左侧 18×3px 的装饰色条（pseudo 元素，不占用文字对比度）。
 *
 * 布局：眉标保持块级 `<p>`（不设 display:flex / inline-flex），
 * 这样它照旧是 WP 约束布局的直接子块 → 拿到 max-width:760px + margin:auto 的文本列，
 * 父级的 text-align（居中区块）也能作用于它内部的 inline 内容。
 * 色条用 inline-block + vertical-align:middle 挂在文字前面，不改变盒的块级身份。
 */
.mok-eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
}

.mok-eyebrow::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 3px;
	margin-right: 10px;
	border-radius: 999px;
	vertical-align: middle;
	background: var(--wp--preset--color--primary);
}

/*
 * 居中区块（`.mok-section__head` 内的眉标、数据概览）右侧再补一条对称色条：
 * 「— LABEL —」的组合整体居中，文字中心与容器中心重合（单侧色条会把文字推偏 14px）。
 */
.mok-section__head .mok-eyebrow::after,
.mok-stats-section .mok-eyebrow::after {
	content: "";
	display: inline-block;
	width: 18px;
	height: 3px;
	margin-left: 10px;
	border-radius: 999px;
	vertical-align: middle;
	background: var(--wp--preset--color--primary);
}

/* 深色 Banner 上不可以用深蓝字：浅蓝 hero-accent 在压暗的封面图上保持可读 */
.mok-banner .mok-eyebrow {
	color: var(--wp--preset--color--hero-accent);
}

/*
 * Banner 封面：图 + 60% ink 压暗层本身就是深底，这里再给一个不透明的 ink 底色，
 * 既兜住图片加载失败的情况，也让「浅色文字 / 背景」的对比度能被静态检查算对。
 */
.mok-banner {
	background-color: var(--wp--preset--color--ink);
}

.mok-section__head h2 {
	margin: 0;
}

.mok-lead {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
	font-size: 15px;
	line-height: 1.8;
	color: var(--wp--preset--color--muted);
}

.mok-muted {
	color: var(--wp--preset--color--muted);
	font-size: 15px;
}

.mok-page {
	padding: 56px 24px 64px;
}

.mok-page > *+* {
	margin-top: 18px;
}

@media (max-width: 781px) {
	.mok-section {
		padding-top: var(--wp--custom--section--padding-mobile, 32px);
		padding-bottom: var(--wp--custom--section--padding-mobile, 32px);
		padding-left: 16px;
		padding-right: 16px;
	}

	.mok-section__head {
		margin-bottom: 24px;
	}

	.mok-page {
		padding: 32px 16px 40px;
	}
}

/*
 * 页面主视觉栅格：.mok-page 的子区块默认铺满 padding 盒，
 * 但 .mok-lead 自带 680px + auto 居中、搜索块另有宽度，导致 404 页的
 * 眉标 / H1 / 说明 / 搜索 / 按钮左边界各不相同。
 * 这里把 404 页的直接子块收敛到同一列（左边界一致），宽屏也不会一边栏宽一边栏窄。
 */
.mok-404 > * {
	width: 100%;
	max-width: var(--mok-layout-max, 1240px);
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.mok-404 > .mok-lead {
	/* 取消 .mok-lead 的 680px 居中缩进：说明文字与 H1 同一左边界 */
	max-width: var(--mok-layout-max, 1240px);
	margin-left: auto;
	margin-right: auto;
}

.mok-404 > .mok-state-figure {
	max-width: 360px;
	margin-left: 0;
	text-align: left;
}

.mok-404 > .mok-state-figure .mok-state-image {
	margin-left: 0;
}

.mok-404 > .mok-archive__search {
	max-width: 480px;
	/* 与 H1 / 说明 / 按钮同一左边界，不居中缩进 */
	margin-left: 0;
	margin-right: auto;
}

/* ------------------------------------------------------------------ 网格 */

.mok-grid {
	display: grid;
	/*
	 * 间距只由 gap 决定，取值跟随全局 Styles → 间距/blockGap（默认 24px），
	 * 因此站点编辑器里改全局间距时这里同步生效。
	 */
	gap: var(--wp--style--block-gap, var(--wp--preset--spacing--40, 24px));
	/* 同组跨行卡片行高一致；行高由内容撑开，不写死高度。 */
	grid-auto-rows: 1fr;
	align-items: stretch;
	/*
	 * 列数单一来源：变体类只声明 --mok-grid-cols / -md / -sm 三个变量，
	 * repeat() 在基础规则与断点里各写一次，不再出现「同一组列数散落多处互相覆盖」。
	 * 单卡宽度上限（--mok-grid-cap，默认 1fr）只给三列组用，全宽模式下不无限拉伸。
	 */
	grid-template-columns: repeat(var(--mok-grid-cols, 3), minmax(0, var(--mok-grid-cap, 1fr)));
}

.mok-grid--3 {
	--mok-grid-cols: 3;
	--mok-grid-cols-md: 2;
	--mok-grid-cols-sm: 1;
	--mok-grid-cap: var(--mok-card-max, 400px);
	justify-content: center;
}

.mok-grid--4 {
	--mok-grid-cols: 4;
	--mok-grid-cols-md: 2;
	--mok-grid-cols-sm: 1;
}

.mok-grid--5 {
	--mok-grid-cols: 5;
	--mok-grid-cols-md: 2;
	--mok-grid-cols-sm: 1;
}

.mok-grid--stats {
	--mok-grid-cols: 4;
	--mok-grid-cols-md: 4;
	--mok-grid-cols-sm: 2;
}

@media (max-width: 1023px) {
	.mok-grid {
		grid-template-columns: repeat(var(--mok-grid-cols-md, var(--mok-grid-cols, 3)), minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.mok-grid {
		grid-template-columns: repeat(var(--mok-grid-cols-sm, var(--mok-grid-cols, 3)), minmax(0, 1fr));
	}
}

/* --------------------------------------------------------- 自有容器间距归一 */

/*
 * WordPress 会给 flow 布局容器的直接子项加 `margin-block-start: blockGap`
 * （每块内联 <style> 里的 `> * + *` 规则，后于主题样式表输出）。
 * 这些容器本身已经是 grid/flex，间距由 gap 负责，若再叠一次 blockGap
 * 就会出现「首卡上移 24px 且被压缩 24px」的偏移。
 * 这里只重置自有 grid/flex 容器的直接子项（双类名以提高特异性，
 * 不使用 !important），不影响正文段落等真实流式间距。
 */
.mok-grid.mok-grid > *,
.mok-posts-grid.mok-posts-grid > li,
.mok-news-list.mok-news-list > li,
.mok-faq-list.mok-faq-list > *,
.mok-related-list.mok-related-list > *,
.mok-article-nav.mok-article-nav > *,
.mok-widget__list.mok-widget__list > *,
.mok-single-layout.mok-single-layout > *,
.mok-single__main.mok-single__main > *,
.mok-archive-layout.mok-archive-layout > *,
.mok-archive__main.mok-archive__main > *,
.mok-sidebar.mok-sidebar > *,
.mok-header__top.mok-header__top > *,
.mok-header__tools.mok-header__tools > *,
.mok-header__nav.mok-header__nav > *,
.mok-price.mok-price > *,
.mok-testimonial.mok-testimonial > *,
.mok-case.mok-case > *,
.mok-post-card.mok-post-card > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ------------------------------------------------------------------ 卡片 */

.mok-card {
	/*
	 * 结构基类：只负责背景、圆角与阴影；内边距由各变体自行决定。
	 * 参考站的卡片是「纯阴影浮起」——没有 1px 描边，密集网格里才不会出现表格感。
	 * 描边只在 hover / 选中态由变体自己加。
	 */
	min-width: 0;
	background-color: var(--wp--preset--color--white);
	border: 0;
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--card);
	transition: box-shadow var(--wp--custom--transition--base), transform var(--wp--custom--transition--base);
}

.mok-card:hover {
	box-shadow: var(--wp--custom--shadow--card-hover, 0 10px 26px rgba(32, 41, 53, 0.12));
}

/* 通用内边距只给「同一种排版密度」的变体；套餐卡有自己的上/左右/下三档内边距。 */
.mok-card--padded,
.mok-reason,
.mok-testimonial {
	padding: var(--wp--custom--card--padding, 24px);
}

.mok-card--flush {
	padding: 0;
}
.mok-pill {
	display: inline-block;
	margin: 0;
	padding: 4px 12px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--elevated);
	color: var(--wp--preset--color--primary-dark);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
}

.mok-pill--solid {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
}

/* ------------------------------------------------------------------ 按钮 */

.wp-block-button.is-style-outline .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary-dark);
	border: 1px solid var(--wp--preset--color--primary-dark);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
}

.mok-cta .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary-dark);
}

.mok-cta .wp-block-button__link:hover,
.mok-cta .wp-block-button__link:focus {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* ---------------------------------------------------------------- 首屏 */

.mok-hero {
	position: relative;
	background: var(--wp--preset--color--ink);
	overflow: hidden;
}

.mok-hero__track {
	position: relative;
}

.mok-hero__slide {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--wp--custom--hero--height, 500px);
	padding: 40px 24px;
	background-color: var(--wp--preset--color--hero);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--wp--preset--color--white);
}

.mok-hero__slide + .mok-hero__slide {
	display: none;
}

.mok-hero--enhanced .mok-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 600ms ease;
	display: flex;
}

.mok-hero--enhanced .mok-hero__track {
	min-height: var(--wp--custom--hero--height, 500px);
}

.mok-hero--enhanced .mok-hero__slide.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
}

.mok-hero__slide[hidden] {
	display: none !important;
}

.mok-hero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(9, 27, 52, 0.86) 0%, rgba(9, 27, 52, 0.62) 45%, rgba(9, 27, 52, 0.25) 100%);
	pointer-events: none;
}

/*
 * 图片来自媒体库（区块属性 imageUrl），不再用 CSS background 指定文件名：
 * 运营在站点编辑器里换图后，前台立即生效。
 */
.mok-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	overflow: hidden;
}

.mok-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.mok-hero__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	border: 1px dashed rgba(255, 255, 255, 0.5);
	color: rgba(255, 255, 255, 0.86);
	font-size: 14px;
	text-align: center;
}

/* 编辑器里所有画面都要可见可编辑，不被「无 JS 只显示第一幅」的规则隐藏。 */
.mok-hero--editor .mok-hero__slide,
.mok-hero--editor .mok-hero__slide + .mok-hero__slide {
	display: flex;
}

/*
 * 编辑器画布：轮播必须自然堆叠、可点可选。
 * 前台用绝对定位叠放画面并裁切溢出，这套规则在编辑态会把 RichText 压到
 * InnerBlocks 包装层下面、点不中；这里只放宽编辑态，前台尺寸不变。
 */
.mok-hero.mok-hero--editor,
.mok-hero--editor .mok-hero__track {
	overflow: visible;
	min-height: 0;
}

.mok-hero--editor .mok-hero__track {
	position: static;
	display: block;
}

.mok-hero--editor .mok-hero__slide,
.mok-hero--editor .mok-hero__slide + .mok-hero__slide {
	position: relative;
	inset: auto;
	display: flex;
	min-height: 320px;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.mok-hero--editor .mok-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.mok-hero--editor .mok-hero__slide::after {
	z-index: 1;
}

/* 编辑态面板在图片与渐变之上，RichText 可聚焦可输入。 */
.mok-hero--editor .mok-hero__panel {
	position: relative;
	z-index: 2;
}

.mok-hero--editor .block-editor-inner-blocks,
.mok-hero--editor .block-editor-block-list__layout {
	position: relative;
	z-index: 2;
}

.mok-hero__media-control {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.mok-hero__panel {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 640px;
	color: var(--wp--preset--color--white);
}

.mok-hero__panel > *+* {
	margin-top: 16px;
}

.mok-hero__eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--hero-accent);
}

.mok-hero__title,
.mok-hero .mok-hero__title {
	margin: 0;
	color: var(--wp--preset--color--white);
	line-height: 1.18;
}

.mok-hero__sub {
	margin: 0;
	max-width: 520px;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.88);
}

.mok-hero__cta .wp-block-button__link {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
}

.mok-hero__cta .wp-block-button__link:hover,
.mok-hero__cta .wp-block-button__link:focus {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary-dark);
}

.mok-hero__controls {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	/*
	 * 默认隐藏：无 JS 时不能出现点了没反应的箭头/圆点。
	 * hero.js 加载后给 .mok-hero 加 mok-hero--enhanced，这里才显示。
	 */
	display: none;
}

.mok-hero--enhanced .mok-hero__controls {
	display: block;
}

/*
 * 箭头放在底部控制带（左：上一张；其右：下一张），
 * 不再压在首屏标题与正文上——桌面与 390/320 遵循同一条规则。
 */
.mok-hero__arrow {
	position: absolute;
	top: auto;
	bottom: 18px;
	transform: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	background: rgba(9, 27, 52, 0.35);
	color: var(--wp--preset--color--white);
	cursor: pointer;
	pointer-events: auto;
	transition: background var(--wp--custom--transition--base);
}

.mok-hero__arrow:hover,
.mok-hero__arrow:focus-visible {
	background: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
}

.mok-hero__arrow--prev {
	left: 24px;
}

.mok-hero__arrow--next {
	right: auto;
	left: 76px;
}

.mok-hero__dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	pointer-events: auto;
}

.mok-hero__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
}

.mok-hero__dot.is-active {
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
}

.mok-hero__pause {
	position: absolute;
	right: 24px;
	bottom: 18px;
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--wp--custom--radius--pill);
	background: rgba(9, 27, 52, 0.35);
	color: var(--wp--preset--color--white);
	font-size: 12px;
	cursor: pointer;
	pointer-events: auto;
}

@media (max-width: 781px) {
	.mok-hero__slide {
		min-height: var(--wp--custom--hero--height-mobile, 280px);
		/* 底部预留 56px 控制条安全区：箭头/圆点/暂停不压正文 */
		padding: 24px 16px 56px;
	}

	.mok-hero--enhanced .mok-hero__track {
		min-height: var(--wp--custom--hero--height-mobile, 280px);
	}

	.mok-hero__panel {
		max-width: 100%;
	}

	.mok-hero__panel > *+* {
		margin-top: 10px;
	}

	.mok-hero__title,
	.mok-hero .mok-hero__title {
		font-size: 22px;
		line-height: 1.3;
	}

	.mok-hero__sub {
		font-size: 13px;
		line-height: 1.6;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/*
	 * 390/320：箭头不再居中压在标题/正文上，改到底部控制带
	 * （左：上一张 / 上一张右侧：下一张、中间：圆点、右：暂停），
	 * 三者互不重叠，也不覆盖 CTA 按钮。
	 */
	.mok-hero__arrow {
		top: auto;
		bottom: 10px;
		transform: none;
		width: 34px;
		height: 34px;
	}

	.mok-hero__arrow--prev {
		left: 16px;
	}

	.mok-hero__arrow--next {
		right: auto;
		left: 58px;
	}

	.mok-hero__dots {
		bottom: 22px;
	}

	.mok-hero__pause {
		right: 16px;
		bottom: 12px;
		padding: 4px 10px;
		font-size: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.mok-hero--enhanced .mok-hero__slide,
	.mok-card,
	.mok-hero__arrow {
		transition: none;
	}
}

/* ------------------------------------------------------------ 数据概览 */

.mok-stats-section .mok-eyebrow {
	text-align: center;
	margin-bottom: 32px;
}

.mok-stats {
	gap: var(--wp--style--block-gap, var(--wp--preset--spacing--40, 24px));
}

.mok-stat {
	text-align: center;
}

.mok-stat > *+* {
	margin-top: 4px;
}

.mok-stat__num {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 40px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--wp--preset--color--primary);
}

.mok-stat__label {
	margin: 0;
	font-size: 15px;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 640px) {
	.mok-stat__num {
		font-size: 28px;
	}

	.mok-stat__label {
		font-size: 13px;
	}
}

/* ---------------------------------------------------------------- 理由 */

.mok-reason {
	text-align: left;
}

.mok-reason__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--wp--preset--color--icon-bg);
	color: var(--wp--preset--color--primary);
}

.mok-reason__icon {
	margin: 0 0 20px;
}

.mok-reason__icon img {
	display: block;
	width: 64px;
	height: 64px;
}

.mok-reason h3 {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
}

.mok-reason p {
	margin: 0;
}

/* ---------------------------------------------------------------- 套餐 */

.mok-price {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--price--gap, 10px);
	/*
	 * 套餐卡不与 reason / testimonial 共用 24px 内边距：参考站是上 72 / 左右 48 / 下 148，
	 * 价格区落在卡片中下部，留白本身就是版式。三档数值走 theme.json token。
	 */
	padding: var(--wp--custom--price--padding-top, 72px) var(--wp--custom--price--padding-inline, 48px) var(--wp--custom--price--padding-bottom, 148px);
}

/*
 * 推荐档两种写法都支持：
 * 1) core/group 的样式变体「推荐方案（高亮）」→ is-style-mok-featured（运营在样式面板点选）
 * 2) 主题样板里的 mok-price--featured 类
 */
.mok-price.mok-price--featured,
.mok-price.is-style-mok-featured {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 10px 26px rgba(0, 123, 255, 0.16);
}

.mok-price__badge {
	align-self: flex-start;
}

/*
 * 非推荐档预留与「推荐」胶囊同高的槽位（胶囊 = 12px × 1.6 行高 + 8px 上下内边距），
 * 让三档的名称与价格基线一致；槽位是纯布局占位，不输出任何文案。
 */
.mok-price:not(.mok-price--featured):not(.is-style-mok-featured)::before {
	content: "";
	display: block;
	height: 27.2px;
}

.mok-price__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.mok-price__amount {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 32px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--wp--preset--color--primary);
}

.mok-price__unit {
	margin-left: 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--meta);
}

.mok-price__hint {
	margin: 0;
	font-size: 13px;
	color: var(--wp--preset--color--meta);
}

.mok-price .wp-block-list {
	margin: 8px 0 16px;
	padding-left: 18px;
	font-size: 14px;
	line-height: 1.9;
	color: var(--wp--preset--color--muted);
}

.mok-price .wp-block-buttons {
	margin-top: auto;
}

.mok-price .wp-block-button,
.mok-price .wp-block-button__link {
	width: 100%;
	text-align: center;
}

@media (max-width: 640px) {
	.mok-price__amount {
		font-size: 26px;
	}

	/* 移动端套餐卡单列：上下 148px 的桌面留白在 390 下会拉出近 700px 的空白。 */
	.mok-price {
		padding: var(--wp--custom--price--padding-top-mobile, 32px) var(--wp--custom--price--padding-inline-mobile, 24px) var(--wp--custom--price--padding-bottom-mobile, 40px);
	}
}

/* ---------------------------------------------------------------- 案例 */

.mok-case {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-wrap: anywhere;
}

.mok-case:hover .mok-case__media img {
	transform: scale(1.06);
}

.mok-case__media {
	margin: 0;
	border-radius: var(--wp--custom--radius--card) var(--wp--custom--radius--card) 0 0;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--wp--preset--color--surface);
}

.mok-case__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.mok-case__label {
	margin: 18px 20px 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
}

.mok-case__title {
	margin: 8px 20px 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: 3em;
	overflow-wrap: anywhere;
}

.mok-case p.mok-muted {
	margin: 10px 20px 0;
	font-size: 14px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: 2.8em;
	line-height: 1.4;
}

.mok-case .mok-pill {
	margin: 14px 20px 20px;
	margin-top: auto;
}

/* ---------------------------------------------------------------- 评价 */

.mok-testimonial {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mok-testimonial__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
}

.mok-testimonial__avatar img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
}

.mok-testimonial__text {
	position: relative;
	margin: 0;
	font-size: 15px;
	line-height: 1.85;
	color: var(--wp--preset--color--muted);
	/* 内容槽：三行正文，行数不足时补足，保证同一行卡片正文区对齐。 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	min-height: calc(1.85em * 3);
	overflow-wrap: anywhere;
}

.mok-testimonial__text::before {
	content: "“";
	position: absolute;
	top: -18px;
	left: -4px;
	font-size: 45px;
	line-height: 1;
	color: var(--wp--preset--color--elevated);
	z-index: -1;
}

.mok-testimonial__meta {
	margin: 0;
	font-size: 14px;
	color: var(--wp--preset--color--meta);
	margin-top: auto;
}

.mok-testimonial__meta strong {
	color: var(--wp--preset--color--ink);
}

/* ----------------------------------------------------------------- FAQ */

.mok-faq-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--style--block-gap, var(--wp--preset--spacing--40, 24px));
	max-width: var(--mok-layout-max, 1240px);
}

.mok-faq-item {
	width: 100%;
	padding: 18px 22px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--card);
}

.mok-faq-item summary {
	position: relative;
	/* 闭合态：两行问题的高度下限，让同组闭合卡等高；展开后按答案自然增长（动态例外，不裁答案）。 */
	min-height: 3.2em;
	padding-left: 30px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	list-style: none;
}

.mok-faq-item summary::-webkit-details-marker {
	display: none;
}

.mok-faq-item summary::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--wp--preset--color--elevated);
	box-shadow: inset 0 0 0 4px var(--wp--preset--color--primary);
}

.mok-faq-item summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
}

.mok-faq-item[open] summary::after {
	content: "–";
}

.mok-faq-item p {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.8;
	color: var(--wp--preset--color--muted);
}

/*
 * 首页 FAQ（用户 2026-10-28）：卡片复用归档页的 .mok-archive-grid--faqs /
 * .mok-archive-faq 结构，因此这里只补两处：网格在模块容器内铺满，以及
 * 「分类里没有文章」时的说明文案。视觉 token 与归档页完全一致，不新增色值。
 */
.mok-faq .mok-faq-grid {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.mok-faq__note {
	width: 100%;
	margin: 0 0 var(--wp--preset--spacing--30, 16px);
	font-size: 14px;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 781px) {
	.mok-faq-list {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--style--block-gap, var(--wp--preset--spacing--40, 24px));
	}
}

/* ------------------------------------------------------------ 合作伙伴 */

.mok-partners {
	gap: var(--wp--style--block-gap, var(--wp--preset--spacing--40, 24px));
}

.mok-partner {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--partner-border);
	border-radius: var(--wp--custom--radius--card);
	transition: border-color var(--wp--custom--transition--base), opacity var(--wp--custom--transition--base);
}

.mok-partner img {
	width: 100%;
	opacity: 0.8;
	transition: opacity var(--wp--custom--transition--base);
}

.mok-partner:hover {
	border-color: var(--wp--preset--color--primary);
}

.mok-partner:hover img {
	opacity: 1;
}

@media (max-width: 640px) {
	.mok-partner {
		padding: 10px;
	}
}

.match-partner-logo {
	display: block;
}

/* ---------------------------------------------------------------- 流程 */

.mok-step {
	padding: 24px;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--card);
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--wp--custom--shadow--card);
}

.mok-step__num {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--primary-dark);
}

.mok-step h3 {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--lead);
}

/* 只作用于说明文字：不覆盖 .mok-step__num 的 32px（此前被这条规则压成 14px）。 */
.mok-step p:not(.mok-step__num) {
	margin: 0;
	font-size: 14px;
}

/* ----------------------------------------------------------------- CTA */

.mok-cta {
	padding-top: 64px;
	padding-bottom: 64px;
	padding-left: 24px;
	padding-right: 24px;
	text-align: center;
	color: var(--wp--preset--color--white);
	/* 白字整段：用加深到 AA 的 brand-strong 渐变（primary-dark → #0E7C8F，白字 ≥4.88:1） */
	background-image: var(--wp--preset--gradient--brand-strong);
	/* 不透明底色作为渐变兜底，也让「白字/背景」可被静态检查正确解析 */
	background-color: var(--wp--preset--color--primary-dark);
}

.mok-cta h2 {
	margin: 0 0 12px;
	color: var(--wp--preset--color--white);
}

.mok-cta__note {
	max-width: 620px;
	margin: 0 auto 24px;
	font-size: 15px;
	color: var(--wp--preset--color--white);
}

.mok-cta .wp-block-buttons {
	justify-content: center;
}

@media (max-width: 640px) {
	.mok-cta {
		padding-top: 32px;
		padding-bottom: 32px;
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* -------------------------------------------------------------- 文章列表 */

.mok-latest__query .mok-posts-grid,
.mok-posts-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--style--block-gap, var(--wp--preset--spacing--40, 24px));
	grid-auto-rows: 1fr;
	align-items: stretch;
}

.mok-post-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	height: 100%;
	padding: 0;
	overflow: hidden;
	overflow-wrap: anywhere;
}

/* post-template 用 <ul><li> 渲染：让每个 li 撑满行高，卡片才能等高。 */
.mok-posts-grid > li {
	display: flex;
	height: 100%;
	min-width: 0;
}

.mok-posts-grid > li > .mok-post-card {
	flex: 1 1 auto;
}

/*
 * 无特色图时的图框统一（Sprint 3 遗留）：
 * 以前这里是 `:not(:has(.wp-block-post-featured-image))::before` 的灰色假图框，
 * 只有在「没有默认缩略图」时才会出现，配了默认图又换成真图 → 两种状态观感不一致。
 * 现在改成同一条链路：有特色图 → 特色图；没有 → 默认缩略图（「基本」设置里的图）；
 * 连默认图也没配 → images.php 输出 `.mok-featured--empty` 图框（同一比例、同一底色，
 * 内含一行「暂无配图」说明），三者尺寸与圆角完全一致。
 */

.mok-post-card__media,
.mok-post-card .wp-block-post-featured-image {
	margin: 0;
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--wp--preset--color--surface);
}

.mok-post-card__media a,
.mok-post-card .wp-block-post-featured-image a {
	display: block;
	height: 100%;
}

.mok-post-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.mok-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

.mok-post-card__date,
.mok-post-card .wp-block-post-date {
	margin: 0 20px;
	font-size: 13px;
	color: var(--wp--preset--color--meta);
}

.mok-post-card > :first-child:not(.wp-block-group) {
	margin-top: 20px;
}

.mok-post-card .wp-block-post-date:first-child {
	margin-top: 20px;
}

/* 标题两行 + 固定内容槽（双类名：核心 post-title 的 display: flow-root 需要被覆盖）。 */
.mok-post-card.mok-post-card .wp-block-post-title {
	margin: 0 20px;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: 3em;
	overflow-wrap: anywhere;
}

.mok-post-card .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.mok-post-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary-dark);
}

.mok-post-card .wp-block-post-excerpt {
	margin: 0 20px 22px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--wp--preset--color--muted);
}

.mok-post-card .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

@media (max-width: 1023px) {
	.mok-latest__query .mok-posts-grid,
	.mok-posts-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.mok-latest__query .mok-posts-grid,
	.mok-posts-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------ 归档 / 搜索列表 */

/*
 * 归档布局一律使用自有 class，不复用也不改写 .mok-card 的通用外观。
 * 间距只由 gap 决定，取值跟随全局 Styles → 间距（默认 24px）。
 */
.mok-archive {
	width: 100%;
	max-width: none;
	/* 上下内边距 token 化（theme.json custom.archive.padding-block*），不再写裸值 40/64。 */
	padding: var(--wp--custom--archive--padding-block, 40px) var(--wp--custom--archive--page-padding-inline, 24px)
		var(--wp--custom--archive--padding-block-end, 64px);
}

.mok-archive__inner {
	max-width: var(--mok-layout-max, 1240px);
	margin: 0 auto;
	/* 主列是 flex 容器：没有这行时 auto 外边距会让列表收缩成“内容宽度”。 */
	width: 100%;
}
/*
 * 归档 1232 容器：主列 minmax(0,1fr) + 320 侧栏，间距只由 gap 决定，
 * 取值跟随全局 Styles → 间距（默认 24px）。1280 下主列 888 / 侧栏 320，
 * 与单篇文章页保持同一套栅格。
 */
.mok-archive-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--wp--custom--sidebar--width, 320px);
	gap: var(--wp--style--block-gap, var(--wp--preset--spacing--40, 24px));
	align-items: start;
	max-width: var(--mok-layout-max, 1240px);
	margin: 0 auto;
}

.mok-archive__main {
	display: flex;
	flex-direction: column;
	gap: var(--wp--style--block-gap, var(--wp--preset--spacing--40, 24px));
	min-width: 0;
}

/*
 * 模板部件区块会被包一层 <div class="wp-block-template-part">，
 * 因此侧栏不是 grid 的直接子项：这一层要吃掉列宽，且不能再叠一次 blockGap 外边距。
 */
.mok-archive-layout > .wp-block-template-part {
	min-width: 0;
	margin-block-start: 0;
	margin-block-end: 0;
}

.mok-archive-layout .mok-sidebar {
	width: 100%;
}

/*
 * FAQ 归档与停用配套插件时主题不渲染侧栏（见 functions.php 的 render_block 过滤），
 * 这时主列单列铺满，不留空的 320px 列。
 */
.mok-archive-layout:not(:has(.mok-sidebar)) {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1023px) {
	.mok-archive-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}
/*
 * 深色页面横幅（F-034）：归档（案例/产品/新闻/标签/搜索）与单篇顶部。
 * 色块铺满视口，内容容器与页头共用 --mok-site-limit / --mok-safe-gutter 基准；
 * 颜色、高度、字号全部来自 theme.json 的 settings.custom.archive.banner-*，
 * 后台改品牌色/间距后横幅跟着变，模板里不写内联样式。
 * 无 JS 与 reduced-motion 下是纯静态排版，没有动效依赖。
 */
.mok-page-band {
	display: flex;
	align-items: center;
	width: 100%;
	/* 首块不吃模板 blockGap 的上外边距：深色块必须紧贴页头下沿。 */
	margin: 0;
	min-height: var(--wp--custom--archive--banner-height, 225px);
	padding-block: var(--wp--custom--archive--banner-padding-block, 24px);
	background-color: var(--wp--custom--archive--banner-background, #202935);
	color: var(--wp--preset--color--white);
}

.mok-page-band__inner {
	width: calc(100% - 2 * var(--mok-safe-gutter, 24px));
	max-width: var(--mok-site-limit, 1292px);
	margin-inline: auto;
}

/* 横幅本身不吃外边距：核心 group/html 的 blockGap 不能把深色块撑出白缝。 */
.mok-page-band.mok-archive__head,
.mok-page-band.mok-single__band {
	margin: 0;
	padding-inline: 0;
}

.mok-page-band .mok-page-band__inner > * {
	margin-block: 0;
}

.mok-page-band .mok-page-band__inner > * + * {
	margin-block-start: 8px;
}

/* 横幅内的面包屑：浅色文字，#202935 上对比度约 9:1。 */
.mok-page-band .mok-breadcrumb {
	max-width: none;
	margin: 0 0 12px;
	color: var(--wp--custom--archive--banner-desc-color, #C7D0DC);
}

/*
 * 横幅内面包屑单行：前面几级不压缩（避免「首/页」被挤成两行），
 * 只让末项（当前页标题）收窄并用省略号收尾，不换行成第二排。
 */
.mok-page-band .mok-breadcrumb__list {
	flex-wrap: nowrap;
}

.mok-page-band .mok-breadcrumb__item {
	flex: 0 0 auto;
	white-space: nowrap;
}

.mok-page-band .mok-breadcrumb__item:last-child {
	flex: 0 1 auto;
	min-width: 0;
}

.mok-page-band .mok-breadcrumb__link,
.mok-page-band .mok-breadcrumb__item[data-sep]::before {
	color: var(--wp--custom--archive--banner-desc-color, #C7D0DC);
	opacity: 1;
}

.mok-page-band .mok-breadcrumb__link:hover,
.mok-page-band .mok-breadcrumb__link:focus-visible {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

.mok-page-band .mok-breadcrumb__current {
	color: var(--wp--preset--color--white);
}

/* 横幅主标题：白色 27px / 700 / 字距 2px（参考站归档标题实测值）。 */
.mok-page-band h1,
.mok-page-band .mok-page-band__title,
.mok-page-band .mok-archive__title,
.mok-page-band .mok-single__title,
.mok-page-band .mok-page-header__title {
	margin: 0;
	font-size: var(--wp--custom--archive--banner-title-size, 27px);
	line-height: var(--wp--custom--archive--banner-title-line-height, 1.5);
	font-weight: 700;
	letter-spacing: var(--wp--custom--archive--banner-title-letter-spacing, 2px);
	color: var(--wp--preset--color--white);
	text-align: start;
	overflow-wrap: anywhere;
}

/* 横幅描述：15px 浅色；term 没有描述时核心区块不输出，横幅只剩标题也不塌。 */
.mok-page-band .mok-page-band__desc,
.mok-page-band .mok-archive__desc,
.mok-page-band .wp-block-term-description {
	margin: 0;
	font-size: var(--wp--custom--archive--banner-desc-size, 15px);
	line-height: 1.7;
	color: var(--wp--custom--archive--banner-desc-color, #C7D0DC);
}

.mok-page-band .mok-archive__desc > * + *,
.mok-page-band .wp-block-term-description > * + * {
	margin-top: 8px;
}

.mok-page-band .mok-eyebrow,
.mok-page-band .mok-archive__count {
	margin: 0;
	color: var(--wp--custom--archive--banner-desc-color, #C7D0DC);
}

.mok-page-band .mok-archive__search {
	/* 搜索框在横幅里占一行：上间距收紧，横幅高度仍是 225px，不因为多一个表单撑高。 */
	margin-top: 4px;
	max-width: 480px;
}

.mok-page-band .mok-archive__search .wp-block-search__input {
	background-color: var(--wp--preset--color--white);
}
.mok-archive__head {
	margin: 0 0 24px;
}

.mok-archive__title {
	margin: 0 0 8px;
	font-size: 26px;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	overflow-wrap: anywhere;
}

.mok-archive__desc,
.mok-archive__count {
	margin: 0;
	font-size: 14px;
	color: var(--wp--preset--color--muted);
}

.mok-archive__desc > *+* {
	margin-top: 8px;
}

.mok-archive__search {
	max-width: 480px;
	margin-top: 16px;
}

.mok-term-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
}

.mok-term-nav__label {
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}

.mok-term-nav__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-size: 14px;
	line-height: 1.6;
	text-decoration: none;
	transition: border-color var(--wp--custom--transition--base), color var(--wp--custom--transition--base);
}

.mok-term-nav__item:hover,
.mok-term-nav__item:focus-visible,
.mok-term-nav__item.is-current {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-dark);
}

.mok-term-nav__count {
	font-size: 12px;
	color: var(--wp--preset--color--muted);
}

/*
 * 四类归档各自一套模板形态（来源 = mok/archive-list 的 layout：products / cases / news / faqs，
 * 由当前分类的顶级祖先自动解析，也可在区块检查器里手动指定）：
 *   products → 3 列竖版图卡 300×323，图片 1.5，body 内边距 16/24/24
 *   cases    → 单列横向图文行卡 949×248，左缩略图 300×200，内边距 24
 *   news     → 单列文本行卡 949×128，左侧 96px 日期列
 *   faqs     → 双列 635×175 折叠卡（核心 details，无 JS 可读）
 * 列数、卡宽、图片比例、内边距、gap 全部取值 settings.custom.archive.*，CSS 里不写裸数值。
 */
.mok-archive-grid,
.mok-archive-rows {
	display: grid;
	gap: var(--wp--custom--archive--gap, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 同组卡片等宽等高：行高由 1fr 统一，卡片再撑满格子。 */
.mok-archive-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	align-items: stretch;
}

.mok-archive-grid > *,
.mok-archive-rows > * {
	min-width: 0;
	margin-block-start: 0;
	margin-block-end: 0;
}

.mok-archive-rows {
	grid-template-columns: minmax(0, 1fr);
}

.mok-archive-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	background-color: var(--wp--preset--color--white);
	/* 参考站列表卡 computed：无描边、无阴影，只有白底 + 6px 圆角；hover 才浮起。 */
	border: 0;
	border-radius: var(--wp--custom--radius--card);
	box-shadow: none;
	overflow: hidden;
	overflow-wrap: anywhere;
	transition: box-shadow var(--wp--custom--transition--base);
}

.mok-archive-card:hover {
	box-shadow: var(--wp--custom--shadow--card-hover, 0 10px 26px rgba(32, 41, 53, 0.12));
}

.mok-archive-card__media {
	display: block;
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.mok-archive-card__thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.mok-archive-card:hover .mok-archive-card__thumb {
	transform: scale(1.04);
}

.mok-archive-card__media-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	aspect-ratio: inherit;
	background: repeating-linear-gradient(
		135deg,
		var(--wp--preset--color--surface) 0 12px,
		var(--wp--preset--color--elevated) 12px 24px
	);
}

.mok-archive-card__media-empty-label {
	padding: 4px 10px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--muted);
	font-size: 12px;
}

.mok-archive-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--archive--products--body-gap, 8px);
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--wp--custom--archive--products--body-padding, 16px 24px 24px);
}

.mok-archive-card__title {
	margin: 0;
	font-size: var(--wp--custom--archive--products--title-size, 15px);
	line-height: var(--wp--custom--archive--products--title-line-height, 1.5);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.mok-archive-card__title a {
	color: inherit;
	text-decoration: none;
}

.mok-archive-card__title a:hover,
.mok-archive-card__title a:focus-visible {
	color: var(--wp--preset--color--primary-dark);
}

.mok-archive-card__excerpt {
	margin: 0;
	font-size: var(--wp--custom--archive--products--excerpt-size, 14px);
	line-height: var(--wp--custom--archive--products--excerpt-line-height, 1.5);
	color: var(--wp--preset--color--muted);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--wp--custom--archive--products--excerpt-lines, 2);
	line-clamp: var(--wp--custom--archive--products--excerpt-lines, 2);
	overflow: hidden;
}

/*
 * 产品归档（参考站 /cat/products 实测）：3 列竖版图卡，单卡 300×323，
 * 图片 300×200（比例 1.5），body 内边距 16/24/24，标题 15px/700。
 * 平板 2 列、390 仍 2 列（参考站 390 = 2 列 173×187，图 173×115）。
 *
 * 列数由「卡宽下限」自动决定，不按视口写死 3 列：auto-fit + minmax(下限,1fr) 保证
 * 任何一个视口下卡宽都不低于 custom.archive.products.card-min（默认 300px）。
 * 旧写法在 1200–1291 视口仍是 3 列（主列 808–888 → 卡宽 253–280，低于 300），
 * 而 1199 反而降到 2 列 391，形成「越窄越宽」的反向跳变；auto-fit 只按可用宽度加/减列，
 * 3 列需要主列 ≥ 3×300 + 2×gap24 = 948（≈ 1292 容器、1340 视口）。
 */
.mok-archive-grid--products {
	grid-template-columns: repeat(
		auto-fit,
		minmax(min(100%, var(--wp--custom--archive--products--card-min, 300px)), 1fr)
	);
}

.mok-archive-grid--products .mok-archive-card__media {
	aspect-ratio: var(--wp--custom--archive--products--media-ratio, 3 / 2);
}

.mok-archive-grid--products .mok-archive-card__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * 产品归档卡的高度口径 = 参考站 300×323（图 200 + body 123）。
 *
 * 参考站卡片只有「图 + 标题 + 标签行」，本站保留一行摘要做提示：
 * body 给 123px 下限，保证标题 1 行 / 2 行、有无摘要时同组卡片仍然等高，
 * 且默认卡高稳定落在参考站 315–331 的容差内（不改字号、不压行高）。
 * 摘要固定 1 行：参考站产品卡本身不显示摘要，「列表摘要行数」设置继续作用于
 * 案例 / 新闻 / FAQ 归档。
 */
.mok-archive-grid--products .mok-archive-card__body {
	min-height: 123px;
}

.mok-archive-grid--products .mok-archive-card__excerpt {
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

/*
 * 案例归档（/cat/cases 实测）：单列横向图文行卡，卡片 949×248，
 * 内边距 24、左缩略图 300×200（比例 1.5）、图文间距 24，
 * 标题 18/700/27，摘要 14/21（两行）。390 为 1 列 360×113、缩略图 120×80、内边距 15。
 */
.mok-archive-grid--cases {
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: auto;
	align-items: start;
}

.mok-archive-grid--cases .mok-archive-card--case {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--wp--custom--archive--cases--inner-gap, 24px);
	padding: var(--wp--custom--archive--cases--padding, 24px);
}

.mok-archive-grid--cases .mok-archive-card__media {
	flex: 0 0 var(--wp--custom--archive--cases--media-width, 300px);
	width: var(--wp--custom--archive--cases--media-width, 300px);
	aspect-ratio: var(--wp--custom--archive--cases--media-ratio, 3 / 2);
}

.mok-archive-grid--cases .mok-archive-card__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mok-archive-grid--cases .mok-archive-card__body {
	flex: 1 1 auto;
	gap: var(--wp--custom--archive--cases--body-gap, 8px);
	justify-content: center;
	padding: 0;
}

.mok-archive-grid--cases .mok-archive-card__title {
	font-size: var(--wp--custom--archive--cases--title-size, 18px);
	line-height: var(--wp--custom--archive--cases--title-line-height, 1.5);
}

.mok-archive-grid--cases .mok-archive-card__excerpt {
	font-size: var(--wp--custom--archive--cases--excerpt-size, 14px);
	line-height: var(--wp--custom--archive--cases--excerpt-line-height, 1.5);
	/* 案例摘要行数走自己的 token（theme.json custom.archive.cases.excerpt-lines）。 */
	-webkit-line-clamp: var(--wp--custom--archive--cases--excerpt-lines, 2);
	line-clamp: var(--wp--custom--archive--cases--excerpt-lines, 2);
}

/*
 * FAQ 归档（/cat/faqs 实测）：双列 635×175，内边距 24，标题 18/700。
 *
 * 用户 2026-10-28 修订：每条默认展开并展示完整正文，卡片高度由内容决定，
 * 所以这里**不做**「同行等高」：grid 用 align-items:start + grid-auto-rows:auto，
 * 同一列里长答案自然往下堆，短答案不会被拉长，长答案也不会被裁掉；
 * 列宽/圆角/内边距/字号/gap 仍与参考站一致（几何口径见 rev2 测试注释）。
 */
.mok-archive-grid--faqs {
	grid-template-columns: repeat(var(--wp--custom--archive--faqs--cols, 2), minmax(0, 1fr));
	grid-auto-rows: auto;
	align-items: start;
}

.mok-archive-card--faq {
	padding: 0;
}

.mok-archive-faq {
	width: 100%;
}

.mok-archive-faq__summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: var(--wp--custom--archive--faqs--padding, 24px);
	cursor: pointer;
	font-size: var(--wp--custom--archive--faqs--title-size, 18px);
	font-weight: 700;
	line-height: var(--wp--custom--archive--faqs--title-line-height, 1.5);
	color: var(--wp--preset--color--ink);
	list-style: none;
	overflow-wrap: anywhere;
}

.mok-archive-faq__summary::-webkit-details-marker {
	display: none;
}

.mok-archive-faq__summary::after {
	content: "+";
	flex: 0 0 auto;
	color: var(--wp--preset--color--primary-dark);
	font-weight: 700;
}

.mok-archive-faq[open] .mok-archive-faq__summary::after {
	content: "−";
}

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

.mok-archive-faq__body {
	padding: 0 var(--wp--custom--archive--faqs--padding, 24px) var(--wp--custom--archive--faqs--padding, 24px);
	font-size: var(--wp--custom--archive--faqs--excerpt-size, 14px);
	line-height: var(--wp--custom--archive--faqs--excerpt-line-height, 1.5);
	color: var(--wp--preset--color--muted);
	overflow-wrap: anywhere;
}

/*
 * 用户 2026-10-28 修订：FAQ 卡片默认展示完整正文。
 * - 不再对段落做 -webkit-line-clamp 截断（旧的 3 行截断会把长解答切掉）；
 * - 正文来自 the_content，可能含段落/列表/引用/图片，统一限制在卡片宽度内；
 * - 卡片高度由内容决定：双列网格用 align-items:start，长短不一时各列自然堆叠，
 *   不为了「同组等高」把短答案拉长或把长答案裁掉（新的几何口径见
 *   tests/e2e/rev6-sprint-6-rev2/F-028-rev2.spec.ts 注释）。
 */
.mok-archive-faq__body p {
	margin: 0 0 10px;
}

.mok-archive-faq__body > p:last-of-type,
.mok-archive-faq__content > :last-child {
	margin-bottom: 0;
}

.mok-archive-faq__content > * {
	max-width: 100%;
}

.mok-archive-faq__content p,
.mok-archive-faq__content li {
	font-size: var(--wp--custom--archive--faqs--excerpt-size, 14px);
	line-height: var(--wp--custom--archive--faqs--excerpt-line-height, 1.5);
}

.mok-archive-faq__content ul,
.mok-archive-faq__content ol {
	margin: 0 0 10px;
	padding-left: 20px;
}

.mok-archive-faq__content img {
	height: auto;
	border-radius: var(--wp--custom--radius--card, 6px);
}

.mok-archive-faq__empty {
	margin: 0 0 10px;
}

.mok-archive-faq__link {
	display: inline-block;
	margin-top: 8px;
	color: var(--wp--preset--color--primary-dark);
	font-size: 13px;
}

/*
 * 新闻归档（/cat/news 实测）：单列文本行卡 949×128，内边距 24，左日期列 96
 * （日号 20 / 年月 12），标题 18/700/27，摘要 14/21 两行；移动 1 列、内边距 15、
 * 日期列 80、标题 14/500。标签/默认归档共用同一行形态。
 */
.mok-archive-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"date title"
		"date meta"
		"date excerpt";
	column-gap: var(--wp--custom--archive--news--date-gap, 24px);
	row-gap: var(--wp--custom--archive--news--row-gap, 6px);
	padding: var(--wp--custom--archive--news--padding, 24px);
	background: var(--wp--preset--color--white);
	border: 0;
	border-radius: var(--wp--custom--radius--card);
	box-shadow: none;
	overflow-wrap: anywhere;
}

.mok-archive-row__date {
	grid-area: date;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	line-height: 1.2;
	color: var(--wp--preset--color--muted);
}

/*
 * 两段式日期（日号 / 年月）可见，完整本地化日期只给读屏：
 * 读屏读「2026年10月28日」一句，而不是把两段念成「28 2026-10」。
 * 用主题自己的类，不依赖核心的 .screen-reader-text（核心 CSS 未入队时也要正确）。
 */
.mok-archive-row__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mok-archive-row__day {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, Menlo, monospace);
	font-size: var(--wp--custom--archive--news--date-day-size, 20px);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.mok-archive-row__ym {
	font-size: var(--wp--custom--archive--news--date-meta-size, 12px);
	color: var(--wp--preset--color--muted);
}

.mok-archive-rows--news .mok-archive-row__date,
.mok-archive-rows--news .mok-archive-row {
	/* 新闻行：日期列固定宽度，标题/摘要右对齐到同一列，形成参考站的 949×128 文本行。 */
	--mok-archive-news-date-width: var(--wp--custom--archive--news--date-width, 96px);
}

.mok-archive-rows--news .mok-archive-row {
	grid-template-columns: var(--mok-archive-news-date-width) minmax(0, 1fr);
}

.mok-archive-row__title {
	grid-area: title;
	flex: 1 1 auto;
	margin: 0;
	font-size: var(--wp--custom--archive--news--title-size, 18px);
	font-weight: var(--wp--custom--archive--news--title-weight, 700);
	line-height: var(--wp--custom--archive--news--title-line-height, 1.5);
	color: var(--wp--preset--color--ink);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.mok-archive-row__title a {
	color: inherit;
	text-decoration: none;
}

.mok-archive-row__title a:hover,
.mok-archive-row__title a:focus-visible {
	color: var(--wp--preset--color--primary-dark);
}

/* 行内 meta（作者/分类/阅读…）与摘要都落在第二列，不挤到日期列下面。 */
.mok-archive-rows--news .mok-archive-row > :not(.mok-archive-row__date):not(.mok-archive-row__title):not(.mok-archive-row__excerpt) {
	grid-area: meta;
}

.mok-archive-row__excerpt {
	grid-area: excerpt;
	margin: 0;
	font-size: var(--wp--custom--archive--news--excerpt-size, 14px);
	line-height: var(--wp--custom--archive--news--excerpt-line-height, 1.5);
	color: var(--wp--preset--color--muted);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--wp--custom--archive--news--excerpt-lines, 2);
	line-clamp: var(--wp--custom--archive--news--excerpt-lines, 2);
	overflow: hidden;
}

/*
 * 分页（参考站实测：32×32、圆角 4、当前项 #007BFF）。
 * 用三个类提高权重，避免被后面通用的 .wp-block-query-pagination 规则覆盖。
 */
.mok-archive .wp-block-query-pagination.mok-archive__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--custom--archive--pagination--gap, 8px);
	margin-top: var(--wp--custom--archive--pagination--margin-top, 32px);
}

.mok-archive .mok-archive__pagination .page-numbers,
.mok-archive .mok-archive__pagination a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wp--custom--archive--pagination--size, 32px);
	height: var(--wp--custom--archive--pagination--size, 32px);
	padding: 0 8px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--archive--pagination--radius, 4px);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--muted);
	font-size: 14px;
	line-height: 1;
}

.mok-archive .mok-archive__pagination .current {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.mok-archive__pagination-label {
	margin-right: auto;
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}

.mok-empty {
	padding: 28px 24px;
	background: var(--wp--preset--color--white);
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
}

.mok-empty__title {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.mok-empty__text {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--wp--preset--color--muted);
}

.mok-empty__link {
	color: var(--wp--preset--color--primary-dark);
}

/*
 * 归档网格断点：只改列数，repeat() 不再重复写第二遍。
 * 参考站 390 实测：产品 2 列 173×187（gap 15）、案例 1 列 360×113（缩略图 120×80）、
 * FAQ 1 列 360、新闻 1 列 360（日期列 80、标题 14/500）。
 * 产品的列数不再在这里按视口写死：3 列只在 min-width:1340px 生效（见文件中部
 * 「产品归档」注释里的卡宽反算），本断点只负责案例缩略图收窄。
 */
@media (max-width: 1199px) {
	.mok-archive-grid--cases .mok-archive-card__media {
		flex-basis: var(--wp--custom--archive--cases--media-width-tablet, 240px);
		width: var(--wp--custom--archive--cases--media-width-tablet, 240px);
	}
}

@media (max-width: 1023px) {
	.mok-archive-grid--faqs {
		grid-template-columns: repeat(var(--wp--custom--archive--faqs--cols-tablet, 1), minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.mok-archive {
		padding: var(--wp--custom--archive--padding-block-mobile, 32px)
			var(--wp--custom--archive--page-padding-inline-mobile, 15px)
			var(--wp--custom--archive--padding-block-end-mobile, 40px);
	}
}

@media (max-width: 640px) {
	.mok-archive-grid,
	.mok-archive-rows {
		gap: var(--wp--custom--archive--gap-mobile, 15px);
	}

	.mok-archive-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mok-archive-grid--products {
		grid-template-columns: repeat(var(--wp--custom--archive--products--cols-mobile, 2), minmax(0, 1fr));
	}

	.mok-archive-grid--products .mok-archive-card__body {
		padding: var(--wp--custom--archive--products--body-padding-mobile, 14px 15px 16px);
	}

	.mok-archive-grid--cases {
		grid-template-columns: minmax(0, 1fr);
	}

	.mok-archive-grid--cases .mok-archive-card--case {
		gap: var(--wp--custom--archive--cases--inner-gap-mobile, 12px);
		padding: var(--wp--custom--archive--cases--padding-mobile, 15px);
	}

	.mok-archive-grid--cases .mok-archive-card__media {
		flex-basis: var(--wp--custom--archive--cases--media-width-mobile, 120px);
		width: var(--wp--custom--archive--cases--media-width-mobile, 120px);
	}
	.mok-archive-grid--products .mok-archive-card__body {
		padding: var(--wp--custom--archive--products--body-padding-mobile, 14px 15px 16px);
	}

	/* 参考站 390 的产品卡只有图 + 标题 + meta（187 高）：摘要在移动端收起。 */
	.mok-archive-grid--products .mok-archive-card__excerpt {
		display: none;
	}

	.mok-archive-grid--cases .mok-archive-card__title {
		font-size: var(--wp--custom--archive--cases--title-size-mobile, 14px);
		font-weight: var(--wp--custom--archive--cases--title-weight-mobile, 500);
	}

	.mok-archive-grid--faqs {
		grid-template-columns: repeat(var(--wp--custom--archive--faqs--cols-mobile, 1), minmax(0, 1fr));
	}

	.mok-archive-card--faq .mok-archive-faq__summary {
		padding: var(--wp--custom--archive--faqs--padding-mobile, 15px);
		font-size: var(--wp--custom--archive--faqs--title-size-mobile, 15px);
	}

	.mok-archive-card--faq .mok-archive-faq__body {
		padding: 0 var(--wp--custom--archive--faqs--padding-mobile, 15px) var(--wp--custom--archive--faqs--padding-mobile, 15px);
	}

	.mok-archive-row {
		padding: var(--wp--custom--archive--news--padding-mobile, 15px);
		column-gap: var(--wp--custom--archive--news--date-gap-mobile, 15px);
	}

	.mok-archive-rows--news .mok-archive-row {
		grid-template-columns: var(--wp--custom--archive--news--date-width-mobile, 80px) minmax(0, 1fr);
	}

	.mok-archive-row__title {
		font-size: var(--wp--custom--archive--news--title-size-mobile, 14px);
		font-weight: var(--wp--custom--archive--news--title-weight-mobile, 500);
	}

	/* 参考站 390 的新闻行只显示标题 + meta：摘要在移动端收起，标题仍可点。 */
	.mok-archive-rows--news .mok-archive-row__excerpt {
		display: none;
	}
}

/* ---------------------------------------------------- 博客归档 / 单篇 */

.mok-news-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--style--block-gap, var(--wp--preset--spacing--40, 24px));
	grid-auto-rows: 1fr;
	align-items: stretch;
	/*
	 * ul 的浏览器默认左内边距（40px）会让新闻列表比同屏其它模块右移、右侧贴边，
	 * 这里归零，让列表左右边界与页头/标题一致。
	 */
	margin-block: 0;
	padding: 0;
	list-style: none;
}

/*
 * 断点顺序修正（Sprint 3 遗留）：`.mok-news-list` 的基础规则在本文件更靠后的位置，
 * 之前的 640px 媒体查询写在基础规则之前 → 基础规则后写生效，390px 仍然是两列。
 * 这里把新闻列表的单列断点放到基础规则之后，并显式写成两条列定义。
 */
@media (max-width: 640px) {
	.mok-news-list {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
	}
}

@media (min-width: 641px) {
	.mok-news-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.mok-news .mok-query-pagination,
.wp-block-query-pagination {
	margin-top: 40px;
	gap: 8px;
	font-size: 14px;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination a {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	color: var(--wp--preset--color--muted);
}

.wp-block-query-pagination .current {
	background: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
}

/* 单篇：1232 容器 / 主列 minmax(0,1fr) + 侧栏 320 / 间距 24 */
.mok-single {
	width: 100%;
	max-width: none;
	padding: 40px 24px 64px;
}

.mok-single-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--wp--custom--sidebar--width, 320px);
	gap: var(--wp--style--block-gap, var(--wp--preset--spacing--40, 24px));
	align-items: start;
	max-width: var(--mok-layout-max, 1240px);
	margin: 0 auto;
}

/*
 * 全宽铺满模式放宽的是容器，不是行长：文章/归档栅格整体收在
 * 「正文行长上限 + 侧栏 + 间距」以内并居中，侧栏仍是 320px 不被拉宽。
 * 居中留白模式不受影响（其 --mok-layout-max 本来就更窄）。
 */
body.mok-content--full :is(.mok-single-layout, .mok-archive-layout) {
	max-width: calc(
		var(--mok-reading-max, 880px) + var(--wp--custom--sidebar--width, 320px) +
			var(--wp--style--block-gap, var(--wp--preset--spacing--40, 24px))
	);
}

/*
 * 通栏布局（外观 → 布局 = 铺满）时侧栏模板部件由 includes/frontend.php 整块不渲染、
 * 栅格已经退化为单列，因此这里不能再预留 320px 侧栏 + 24px gap：
 * 预留会让「全宽铺满」只剩 880+320+24=1224px，比「居中留白」的 1292 还窄，右侧空一大块。
 * 回到 --mok-layout-max：居中模式 = 保存的最大宽度，全宽模式 = none（视口宽）。
 * 正文自身的行长上限（.mok-entry-content 的 --mok-reading-max）不受影响。
 */
body.mok-layout--full :is(.mok-single-layout, .mok-archive-layout) {
	max-width: var(--mok-layout-max, var(--mok-centered-max, 1292px));
}

.mok-single__main {
	display: flex;
	flex-direction: column;
	gap: var(--wp--style--block-gap, var(--wp--preset--spacing--40, 24px));
	min-width: 0;
}

.mok-article-card {
	padding: var(--wp--custom--article--padding, 32px);
	overflow-wrap: anywhere;
}

.mok-single__title {
	margin: 0 0 12px;
	font-size: 28px;
	line-height: 1.5;
	text-align: center;
	color: var(--wp--preset--color--ink);
	overflow-wrap: anywhere;
}

.mok-single__meta {
	justify-content: center;
	gap: 16px;
	margin-bottom: 28px;
	font-size: 14px;
	color: var(--wp--preset--color--meta);
}

.mok-single__meta a {
	color: var(--wp--preset--color--primary-dark);
}

/*
 * 作者信息两种形态（mok/post-byline 区块）：
 * - 有侧栏：侧栏第一张卡 `.mok-author-card`（头像 64 + 显示名 + 简介 + 全部文章）；
 * - 无侧栏（通栏）：横幅里面包屑下面的紧凑一行 `.mok-single__byline`（头像 28 + 作者 + 日期）。
 * 颜色走 token：横幅内用 --wp--custom--archive--banner-desc-color（#202935 上约 9:1）。
 */
.mok-single__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	font-size: var(--wp--preset--font-size--small, 14px);
	line-height: 1.5;
	color: var(--wp--custom--archive--banner-desc-color);
	overflow-wrap: anywhere;
}

.mok-single__byline-avatar {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background-color: var(--wp--preset--color--surface);
	object-fit: cover;
}

.mok-single__byline-author,
.mok-single__byline-date {
	color: inherit;
}

.mok-single__byline-sep {
	opacity: 0.72;
}

.mok-author-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 24px;
}

.mok-author-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.mok-author-card__avatar {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background-color: var(--wp--preset--color--surface);
	object-fit: cover;
}

.mok-author-card__id {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mok-author-card__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--lead, 18px);
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	overflow-wrap: anywhere;
}

.mok-author-card__count,
.mok-author-card__bio {
	margin: 0;
	font-size: var(--wp--preset--font-size--small, 14px);
	line-height: 1.7;
	color: var(--wp--preset--color--meta);
	overflow-wrap: anywhere;
}

.mok-author-card__link {
	align-self: flex-start;
	font-size: var(--wp--preset--font-size--small, 14px);
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

.mok-author-card__link:hover,
.mok-author-card__link:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

@media (max-width: 781px) {
	.mok-author-card {
		padding: 20px;
	}
}

.mok-single__media {
	margin: 0 0 24px;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
}

.mok-single__media img {
	border-radius: var(--wp--custom--radius--card);
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------- 正文排版 */

/*
 * 可读行长只属于「文章单篇」这类长文场景：正文卡里只有正文，标题/摘要/侧栏
 * 都在同一栅格，正文居中不会和别的元素错位。
 * 页面模板（page-layout 系列：默认/无边栏/关于/联系/标签/合作/Banner）的标题、
 * 面包屑、正文是并列区块，必须同宽：正文不许被单独压到 880 居中，
 * 否则 1280 居中模式左右各空 144px，全宽模式变成「标题铺满、正文居中」。
 * 需要页面模板也限制行长时，必须把标题与正文一起收进同一个栅格再加，
 * 不能只给 .mok-entry-content 加上限。
 */
.mok-entry-content {
	font-size: 16px;
	line-height: 1.8;
	color: var(--wp--preset--color--ink);
	overflow-wrap: anywhere;
}

/* 文章单篇：可读行长（--mok-reading-max，默认 theme.json custom.reading.max=880px） */
.mok-single .mok-entry-content,
.mok-single-layout .mok-entry-content {
	max-width: var(--mok-reading-max, 880px);
	margin-inline: auto;
}

.mok-entry-content > *+* {
	margin-top: 24px;
}

.mok-entry-content p {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.mok-entry-content h2 {
	margin-top: 40px;
	font-size: var(--wp--preset--font-size--h-3, 22px);
	color: var(--wp--preset--color--ink);
}

.mok-entry-content h3 {
	margin-top: 32px;
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--ink);
}

.mok-entry-content ul,
.mok-entry-content ol {
	padding-left: 22px;
}

.mok-entry-content li+li {
	margin-top: 6px;
}

.mok-entry-content blockquote {
	margin: 28px 0;
	padding: 16px 20px;
	border-left: 3px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface);
	border-radius: 0 var(--wp--custom--radius--card) var(--wp--custom--radius--card) 0;
	color: var(--wp--preset--color--ink);
}

.mok-entry-content blockquote p {
	margin: 0;
}

.mok-entry-content blockquote cite {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	color: var(--wp--preset--color--meta);
	font-style: normal;
}

.mok-entry-content .wp-block-image {
	margin: 28px 0;
}

.mok-entry-content .wp-block-image img {
	border-radius: var(--wp--custom--radius--card);
	cursor: zoom-in;
}

.mok-entry-content figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--wp--preset--color--meta);
	text-align: center;
}

/* ---------------------------------------------------------- 产品选项卡 */

/*
 * 面板默认全部可见（无 JS 也能读完）；只有脚本接管后加 .mok-tabs--js
 * 才显示 tablist 并隐藏非激活面板。不做动画，尊重低动效偏好。
 */
.mok-tabs {
	display: block;
	margin: 28px 0 8px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
}

.mok-tabs__list {
	display: none;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0 8px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
}

.mok-tabs--js .mok-tabs__list {
	display: flex;
}

.mok-tabs__tab {
	appearance: none;
	margin: 0;
	padding: 14px 18px;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--muted);
	font: inherit;
	font-size: 15px;
	line-height: 1.6;
	cursor: pointer;
}

.mok-tabs__tab:hover {
	color: var(--wp--preset--color--ink);
}

.mok-tabs__tab.is-active {
	border-bottom-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-dark);
	font-weight: 600;
}

.mok-tabs__tab:focus-visible,
.mok-tabs__panel:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

.mok-tabs__panel {
	padding: 20px 24px 24px;
	overflow-wrap: anywhere;
}

.mok-tabs__panel[hidden] {
	display: none;
}

.mok-tabs__panel-title {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
}

/* JS 接管后，按钮已可读同一标题，隐藏面板内重复标题避免读屏重复播报。 */
.mok-tabs--js .mok-tabs__panel-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.mok-tabs__panel-body > *+* {
	margin-top: 16px;
}

.mok-tabs__panel-body p {
	margin: 0;
	line-height: 1.8;
	color: var(--wp--preset--color--muted);
}

.mok-tabs__panel-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--card);
}

.mok-tabs--editor {
	margin: 8px 0;
	border-style: dashed;
	padding: 8px 12px;
}

.mok-tabs__panel--editor {
	padding: 12px 0;
	border-top: 1px dashed var(--wp--preset--color--border);
}

@media (max-width: 640px) {
	.mok-tabs__tab {
		padding: 12px 12px;
		font-size: 14px;
	}

	.mok-tabs__panel {
		padding: 16px;
	}
}

/* 版权说明、上下篇、相关推荐、评论 */
.mok-copyright {
	margin: 0;
	padding: 18px 24px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--wp--preset--color--meta);
}

.mok-article-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--style--block-gap, var(--wp--preset--spacing--40, 24px));
}

.mok-article-nav__item {
	padding: 24px;
	min-width: 0;
}

.mok-article-nav__label {
	margin: 0 0 6px;
	font-size: 13px;
	color: var(--wp--preset--color--meta);
}

.mok-article-nav__item a {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	overflow-wrap: anywhere;
}

.mok-article-nav__item--next {
	text-align: right;
}

.mok-related {
	padding: 24px;
}

.mok-related-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--style--block-gap, var(--wp--preset--spacing--40, 24px));
	margin: 0;
	padding: 0;
	list-style: none;
}

.mok-related-card {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.mok-related-card img {
	width: 96px;
	flex: none;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
}

.mok-related-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.mok-comments {
	padding: 32px;
}

/* ------------------------------------------------------------------ 侧栏 */

.mok-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--wp--style--block-gap, var(--wp--preset--spacing--40, 24px));
	min-width: 0;
}

.mok-widget {
	padding: 24px;
	min-width: 0;
}

.mok-widget__title {
	position: relative;
	margin: 0 0 20px;
	padding-left: 14px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

.mok-widget__title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	bottom: 0.2em;
	width: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--primary);
}

.mok-widget__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mok-widget__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	min-width: 0;
}

.mok-widget__thumb {
	width: 96px;
	flex: none;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
}

.mok-widget__item-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	overflow-wrap: anywhere;
}

.mok-widget__item-title a {
	color: inherit;
	text-decoration: none;
}

.mok-widget__item-title a:hover {
	color: var(--wp--preset--color--primary-dark);
}

.mok-widget__date {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--wp--preset--color--meta);
}

.mok-widget__empty {
	margin: 0;
	font-size: 14px;
	color: var(--wp--preset--color--meta);
}

.mok-widget__contact-row {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
	overflow-wrap: anywhere;
}

.mok-widget__contact-row + .mok-widget__contact-row {
	margin-top: 8px;
}

.mok-widget__contact-row a {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.mok-widget__contact-row a:hover {
	color: var(--wp--preset--color--primary-dark);
}

.mok-widget__contact-cta {
	display: inline-block;
	margin-top: 16px;
	padding: 8px 16px;
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
	font-size: 14px;
	font-weight: 600;
}

.mok-widget__contact-cta:hover {
	background: var(--wp--preset--color--primary-deep);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.mok-widget .wp-block-tag-cloud a,
.mok-widget .tag-cloud-link {
	display: inline-block;
	margin: 0 8px 8px 0;
	padding: 4px 10px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	line-height: 1.6;
}

.mok-widget .wp-block-tag-cloud a:hover,
.mok-widget .tag-cloud-link:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

@media (max-width: 1023px) {
	.mok-single-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.mok-single {
		padding: 24px 20px 48px;
	}
}

@media (max-width: 640px) {
	.mok-article-card,
	.mok-comments {
		padding: 20px;
	}

	.mok-single__title {
		font-size: 22px;
	}

	.mok-article-nav,
	.mok-related-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.mok-article-nav__item--next {
		text-align: left;
	}

	.mok-widget {
		padding: 20px;
	}
}

@media (max-width: 360px) {
	.mok-single {
		padding-left: 16px;
		padding-right: 16px;
	}

	.mok-article-card,
	.mok-comments,
	.mok-widget {
		padding: 16px;
	}
}

/* ------------------------------------------------------------- 页脚 */

.mok-footer {
	padding: 56px 24px 24px;
	background-color: var(--wp--preset--color--footer);
	color: var(--wp--preset--color--footer-muted);
}

.mok-footer .wp-block-columns {
	gap: var(--wp--style--block-gap, var(--wp--preset--spacing--40, 24px));
	margin-bottom: 32px;
}

.mok-footer .mok-footer__title {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--preset--color--white);
}

.mok-footer p,
.mok-footer li {
	font-size: 14px;
	line-height: 1.9;
	color: var(--wp--preset--color--footer-muted);
}

.mok-footer .wp-block-list {
	padding-left: 0;
	list-style: none;
}

.mok-footer a {
	color: var(--wp--preset--color--footer-link);
	text-decoration: none;
}

.mok-footer a:hover,
.mok-footer a:focus-visible {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

.mok-footer__legal {
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.mok-footer__legal p {
	margin: 0;
	font-size: 13px;
	color: var(--wp--preset--color--footer-muted);
	text-align: center;
}

/*
 * 页脚内容宽度跟随「外观 → 内容最大宽度」设置。
 * 页脚模板 part 里的 group 自带 contentSize:1240px（保存时写进区块属性），
 * 运营把内容宽度改成 1100 时页头与主内容都会变，页脚必须一起变，
 * 否则页脚内框与正文右边界对不齐。这里用 CSS 变量覆盖该组的约束宽度。
 */
.mok-footer.is-layout-constrained > * {
	max-width: var(--mok-layout-max, 1292px);
}
@media (max-width: 781px) {
	.mok-footer {
		padding: 16px 16px 8px;
	}

	/*
	 * 移动页脚：三列改为「品牌整行 + 链接/联系方式两列」的紧凑网格，
	 * 链接两列排布、长文案自动换行；不再三列各占一行把页脚拉成 600px 高。
	 */
	.mok-footer .wp-block-columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		margin-bottom: 12px;
	}

	.mok-footer .wp-block-columns > .wp-block-column:first-child {
		grid-column: 1 / -1;
	}

	.mok-footer .mok-footer__title {
		margin-bottom: 2px;
		font-size: 14px;
	}

	.mok-footer p,
	.mok-footer li {
		font-size: 13px;
		line-height: 1.65;
	}

	.mok-footer__legal {
		padding-top: 8px;
	}

	/*
	 * 390 下页脚要压到 253px：品牌长描述与营业时间收起（桌面仍然完整显示），
	 * 链接保持两列、联系方式两行，长文案照旧自动换行不溢出。
	 */
	.mok-footer__desc,
	.mok-footer__hours {
		display: none;
	}
}

/* ------------------------------------------------------------ 核心灯箱 */

.wp-lightbox-overlay .wp-lightbox-container,
.wp-lightbox-overlay {
	z-index: 100000;
}

/*
 * 用户 2026-10-28 修订：灯箱左右按钮必须贴在左右边缘并垂直居中。
 *
 * 真实 DOM（WordPress 7.1 核心 image lightbox，已在 8881 实测）：
 *   div.wp-lightbox-overlay (role=dialog)
 *     button.wp-lightbox-close-button
 *     button.wp-lightbox-navigation-button.wp-lightbox-navigation-button-prev
 *     div.lightbox-image-container > figure.wp-block-image > img
 *     button.wp-lightbox-navigation-button.wp-lightbox-navigation-button-next
 *     div.scrim
 * 核心只在 min-width:960px 把 prev/next 抬到 bottom:50%+translateY(-50%)，
 * 而且 bottom:50% 会让按钮中心比视口中线低半个按钮高；≤959px 时它们落在底部。
 * 这里统一改成 top:50% + translateY(-50%)：任何滚动位置、任何图片高度下
 * 都严格垂直居中。用 body 前缀提高优先级（0,2,1 > 核心的 0,2,0），不堆 !important。
 */
body .wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
body .wp-lightbox-overlay .wp-lightbox-navigation-button-next {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}

body .wp-lightbox-overlay .wp-lightbox-navigation-button-prev {
	left: max(8px, env(safe-area-inset-left));
	right: auto;
}

body .wp-lightbox-overlay .wp-lightbox-navigation-button-next {
	right: max(8px, env(safe-area-inset-right));
	left: auto;
}

/* 390px：按钮留在左右边缘的中间高度，尺寸收一点，不压住主图中心区域。 */
@media (max-width: 781px) {
	body .wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
	body .wp-lightbox-overlay .wp-lightbox-navigation-button-next {
		min-width: 36px;
		min-height: 36px;
	}

	body .wp-lightbox-overlay .wp-lightbox-navigation-button-prev {
		left: max(4px, env(safe-area-inset-left));
	}

	body .wp-lightbox-overlay .wp-lightbox-navigation-button-next {
		right: max(4px, env(safe-area-inset-right));
	}
}

/* ------------------------------------------- 首页内容区（真实分类查询） */

/*
 * mok/post-showcase 由插件按真实分类渲染：头部（小标题/标题/查看全部）+ 图卡网格或文本行。
 * 图卡与案例卡共用 6px 圆角、同组等高、3:2 图片；文本行不与图卡强行等高。
 */
.mok-showcase__head,
.mok-showcase__grid,
.mok-showcase__list,
.mok-showcase__empty {
	max-width: var(--mok-layout-max, 1240px);
	margin-left: auto;
	margin-right: auto;
}

.mok-showcase__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 40px;
}

.mok-showcase__head .mok-eyebrow {
	flex: 1 1 100%;
}

.mok-showcase__title {
	margin: 0;
	flex: 1 1 320px;
}

.mok-showcase__more {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 600;
	/* 14px 正文级链接：白底必须 ≥4.5:1，用 primary-dark */
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

.mok-showcase__more:hover,
.mok-showcase__more:focus-visible {
	text-decoration: underline;
}

.mok-showcase__empty {
	margin: 0 auto;
	padding: 20px 24px;
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	color: var(--wp--preset--color--muted);
	font-size: 14px;
	line-height: 1.8;
}

.mok-showcase-card {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.mok-showcase-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.mok-showcase-card__media {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.mok-showcase-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mok-showcase-card__media--empty {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.mok-showcase-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	flex: 1 1 auto;
}

.mok-showcase-card__body .mok-pill {
	align-self: flex-start;
}

.mok-showcase-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: 3em;
}

.mok-showcase-card__excerpt {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.mok-showcase-card__date {
	margin-top: auto;
	font-size: 13px;
	color: var(--wp--preset--color--meta);
}

.mok-showcase-card__link:hover .mok-showcase-card__img,
.mok-showcase-card__link:focus-visible .mok-showcase-card__img {
	transform: scale(1.04);
	transition: transform 400ms ease;
}

/* 新闻式文本行：一列，不与图卡强行等高。 */
.mok-showcase--list .mok-news-list {
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: auto;
}

.mok-news-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
	padding: 18px 20px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--card);
	overflow-wrap: anywhere;
}

.mok-news-row__date {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}

.mok-news-row__title {
	flex: 1 1 320px;
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
}

.mok-news-row__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.mok-news-row__title a:hover,
.mok-news-row__title a:focus-visible {
	color: var(--wp--preset--color--primary-dark);
}

.mok-news-row__excerpt {
	flex: 1 1 100%;
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
	color: var(--wp--preset--color--muted);
}

/* 流程图标：原创本地 SVG，与数字并排；无图标时数字单独显示。 */
.mok-step__icon {
	margin: 0 0 12px;
}

.mok-step__icon img {
	display: block;
	width: 40px;
	height: 40px;
}

/* 评价正文使用 core/quote，去掉默认左边框，保留卡片内的间距与字号。 */
.mok-testimonial__quote,
.mok-testimonial .wp-block-quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 15px;
	line-height: 1.85;
	color: var(--wp--preset--color--muted);
}

.mok-testimonial__quote p,
.mok-testimonial .wp-block-quote p {
	margin: 0;
}

/* 主题样板提示：明确告诉站长这些是示例文案，需要替换。 */
.mok-sample-note {
	max-width: var(--mok-layout-max, 1240px);
	margin: 24px auto 0;
	font-size: 13px;
	color: var(--wp--preset--color--meta);
	text-align: center;
}

/* --------------------------------------------------- 页面模板变体（F-013） */
/*
 * 页面变体统一走 .mok-page-layout 栅格：
 * 默认页 888 + 320（沿用文章栅格），无侧栏/全宽/Banner 单列 1232。
 * 1 列时主列仍是 minmax(0,1fr)，长标题与宽图都不会撑破容器。
 */
.mok-page-header {
	max-width: var(--mok-layout-max, 1240px);
	margin: 0 auto 24px;
	padding: 0;
}

.mok-page-header__title {
	margin: 0;
	font-size: 28px;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	overflow-wrap: anywhere;
}

.mok-page-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--wp--custom--sidebar--width, 320px);
	gap: var(--wp--style--block-gap, var(--wp--preset--spacing--40, 24px));
	align-items: start;
	max-width: var(--mok-layout-max, 1240px);
	margin: 0 auto;
	width: 100%;
}

.mok-page-layout--single {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * 页面级动态区块（联系信息卡、点赞/阅读、相关推荐、分享、版权、插件停用回退说明）：
 * 这些块由 mok 动态区块直接输出，常被放在 <main class="mok-page"> 下而没有外层
 * .mok-page-layout 容器，width:100% 就会铺到 padding 盒（1440 下 1392px、左边界 24），
 * 与页面标题、正文卡（1240px 居中）不在同一条边界上。
 * 这里按同一套宽度契约收敛到一列：boxed = --mok-site-limit（后台「内容宽度」），
 * full = none（跟随铺满）。已经有外层容器时是空操作，不重复接管。
 * 合作表单不在此列：它自己的组件样式负责收敛成 640 居中列（.mok-inquiry）。
 */
.mok-page > :is(.mok-fallback-note, .mok-contact-details, .mok-interactions, .mok-related, .mok-related-empty, .mok-share, .mok-copyright) {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--mok-layout-max, 1240px);
	margin-inline: auto;
}

.mok-page-layout > .wp-block-template-part,
.mok-page-layout > .mok-sidebar {
	min-width: 0;
}

.mok-page-layout .mok-sidebar {
	width: 100%;
}

.mok-page__main {
	display: flex;
	flex-direction: column;
	gap: var(--wp--style--block-gap, var(--wp--preset--spacing--40, 24px));
	min-width: 0;
}

/* 页面正文卡：只承担页面类的内边距与排版，不接管其它卡片的尺寸。 */
.mok-page-card {
	padding: var(--wp--preset--spacing--50, 32px);
	min-width: 0;
}

.mok-page-card > * + * {
	margin-block-start: var(--wp--preset--spacing--40, 24px);
}

.mok-page-card__title {
	margin: 0;
	font-size: 28px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.mok-page-card__media img,
.mok-page-fullwidth__media img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--card, 6px);
	object-fit: cover;
}

/* 页面没有特色图时，核心区块落地为空 figure：整块不输出占位。 */
.mok-page-card__media:not(:has(img)),
.mok-page-fullwidth__media:not(:has(img)) {
	display: none;
}

/* 全宽模板：不套白卡，正文最宽到 wideSize；有宽图也不横向溢出。 */
.mok-page--fullwidth {
	display: flex;
	flex-direction: column;
	gap: var(--wp--style--block-gap, 24px);
}

.mok-page--fullwidth > * {
	width: 100%;
	max-width: var(--mok-layout-max, 1240px);
	margin-inline: auto;
}

.mok-page--fullwidth .mok-entry-content--full,
.mok-page--fullwidth .mok-entry-content--full > * {
	max-width: none;
	width: 100%;
}

.mok-page--fullwidth .mok-entry-content--full img,
.mok-page--fullwidth .mok-entry-content--full iframe,
.mok-page--fullwidth .mok-entry-content--full table {
	max-width: 100%;
}

/*
 * Banner 页面模板（F-013 / F-034）：页面级横幅。
 * 与归档/单篇横幅共用 .mok-page-band 的色块、标题字号与面包屑配色
 * （theme.json settings.custom.archive.banner-*），这里只做三件事：
 *  1) 主容器不吃 .mok-page 的左右内边距，横幅才能整宽贴住页头；
 *  2) 把核心特色图降为绝对定位的背景层（object-fit:cover）+ 深色遮罩，标题/摘要叠在遮罩上；
 *  3) 没有特色图时整块容器退化为 display:contents：不上色、不占高，
 *     标题/面包屑/摘要回到正文流并改用浅底深色文字，不留空深色块。
 * 高度与遮罩强度来自 settings.custom.page-banner.*，后台可改。
 */
.mok-page.mok-page--banner {
	/* 横幅整宽：左右内边距交给下面的 .mok-page-layout，避免横幅两侧出现白边空条。 */
	padding: 0 0 var(--wp--custom--page-banner--padding-bottom, 40px);
}

.mok-page--banner .mok-page-layout {
	/* 左右安全边距由这里承担（主容器已归零），上间距与其它模板的块间距同源。 */
	padding-inline: var(--mok-safe-gutter, 24px);
	margin-block-start: var(--wp--style--block-gap, var(--wp--preset--spacing--40, 24px));
}

.mok-page--banner .mok-page-banner {
	position: relative;
	isolation: isolate;
	width: 100%;
	max-width: none;
	margin: 0;
	min-height: var(--wp--custom--page-banner--min-height, 320px);
	padding-block: var(--wp--custom--page-banner--padding-block, 48px);
	background-color: var(--wp--custom--archive--banner-background, #202935);
}

/* 特色图背景层：铺满横幅；遮罩由 ::after 叠在图片之上、内容之下。 */
.mok-page-banner__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

.mok-page-banner__image img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
}

/*
 * 遮罩：颜色/不透明度来自 theme.json（page-banner.overlay-*）。
 * 0.88 × #202935 即使压在接近纯白的图片上，白字对比度仍 ≥ 4.5:1
 * （像素采样实测见 tests/e2e/rev6-sprint-6-rev3）。
 */
.mok-page-banner__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--wp--custom--page-banner--overlay-color, #202935);
	opacity: var(--wp--custom--page-banner--overlay-opacity, 0.88);
}

/* 内容层压在遮罩之上；宽度容器 .mok-page-band__inner 与页头/页脚共用 --mok-site-limit 基准。 */
.mok-page--banner .mok-page-band__inner {
	position: relative;
	z-index: 1;
}

/* 摘要：与归档横幅描述同口径（15px 浅色）；没有摘要时核心不输出段落。 */
.mok-page--banner .mok-page-banner__desc,
.mok-page--banner .mok-page-banner__desc > * {
	margin: 0;
	font-size: var(--wp--custom--archive--banner-desc-size, 15px);
	line-height: 1.7;
	color: var(--wp--custom--archive--banner-desc-color, #C7D0DC);
}

/*
 * 退化态（无**真实**特色图）：容器不上色不占高，文字回到浅底可读的深色。
 * 「真实」= 除主题兜底图 `img.mok-builtin-image`（includes/images.php 在没有特色图时
 * 输出的 placeholder-thumb.svg）以外的图；兜底图不该被拉成整幅横幅背景。
 */
.mok-page--banner .mok-page-banner:not(:has(img:not(.mok-builtin-image))) {
	display: contents;
}

.mok-page--banner .mok-page-banner:not(:has(img:not(.mok-builtin-image))) .mok-page-banner__image {
	display: none;
}

.mok-page--banner .mok-page-banner:not(:has(img:not(.mok-builtin-image))) .mok-page-band__inner {
	margin-block: var(--wp--custom--page-banner--padding-block, 48px) 0;
}

.mok-page--banner .mok-page-banner:not(:has(img:not(.mok-builtin-image))) h1,
.mok-page--banner .mok-page-banner:not(:has(img:not(.mok-builtin-image))) .mok-page-band__title {
	color: var(--wp--preset--color--ink);
}

.mok-page--banner .mok-page-banner:not(:has(img:not(.mok-builtin-image))) .mok-breadcrumb,
.mok-page--banner .mok-page-banner:not(:has(img:not(.mok-builtin-image))) .mok-breadcrumb__link,
.mok-page--banner .mok-page-banner:not(:has(img:not(.mok-builtin-image))) .mok-breadcrumb__item[data-sep]::before,
.mok-page--banner .mok-page-banner:not(:has(img:not(.mok-builtin-image))) .mok-breadcrumb__current,
.mok-page--banner .mok-page-banner:not(:has(img:not(.mok-builtin-image))) .mok-page-banner__desc,
.mok-page--banner .mok-page-banner:not(:has(img:not(.mok-builtin-image))) .mok-page-banner__desc > * {
	color: var(--wp--preset--color--muted);
}

@media (max-width: 781px) {
	.mok-page--banner .mok-page-banner {
		min-height: var(--wp--custom--page-banner--min-height-mobile, 240px);
		padding-block: var(--wp--custom--page-banner--padding-block-mobile, 32px);
	}
}

/*
 * 子页面导航（mok/page-children）：240px 导航 + 正文。
 *
 * 这里必须把「导航窄、正文宽」写成硬约束：
 * 模板的 DOM 顺序是「导航卡在前、正文卡在后」，而
 * `body.mok-layout--sidebar-right .mok-page-layout:not(--single)` 那条规则特异性更高（0,3,0），
 * 曾经把第一列覆盖成 minmax(0,1fr)、第二列 320px，
 * 结果导航吃掉 896px、正文被挤进 320px 窄栏（/zcd/zcd-scope/ 的实测缺陷）。
 * 所以这里：① 提高自身特异性；② 用命名区域显式固定导航=side、正文=main；
 * ③ 侧栏方向规则里排除 --submenu（两处都要，缺一处就会复发）。
 */
.mok-page-layout.mok-page-layout--submenu {
	grid-template-columns: 240px minmax(0, 1fr);
	grid-template-areas: "side main";
}

.mok-page-layout--submenu > :first-child {
	grid-area: side;
	min-width: 0;
}

.mok-page-layout--submenu > :last-child {
	grid-area: main;
	min-width: 0;
}

/*
 * 子页面导航固定在最左侧 240px，不随「全站侧栏方向」翻转：
 * 它是页面的层级导航（相当于参考站 /zcd 的左侧子菜单），不是正文的附属侧栏，
 * 位置左右跳动会让读者每次换页都要重新找导航。
 */

/* 窄屏：导航在上、正文在下（不让导航掉到正文后面）。 */
@media (max-width: 1023px) {
	.mok-page-layout.mok-page-layout--submenu {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "side" "main";
	}
}

.mok-widget--pages .mok-page-tree {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.9;
}

.mok-widget--pages .mok-page-tree ul {
	list-style: none;
	margin: 0;
	padding-inline-start: 12px;
}

.mok-widget--pages .mok-page-tree a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.mok-widget--pages .mok-page-tree a:hover,
.mok-widget--pages .mok-page-tree a:focus-visible {
	color: var(--wp--preset--color--primary-dark);
}

.mok-widget--pages .current_page_item > a,
.mok-widget--pages .current_page_item > a:hover {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.mok-page-tree__parent > a {
	color: var(--wp--preset--color--ink) !important;
	font-weight: 600;
}

/* 联系方式详情（mok/contact-details）：地址是纯文本，不做假地图。 */
.mok-contact-details {
	padding: var(--wp--preset--spacing--50, 32px);
}

/*
 * 联系页（page-contact 模板）：H1 在 .mok-page-header 里跟随 --mok-layout-max 容器，
 * 联系信息是 .mok-section（自带左右 24 / ≤781 16 内边距）+ 约束布局的 760 居中列，
 * 两个内边距叠加后导语/联系卡比 H1 右移 24px。
 * 修法：该区块在联系页里取消自己的左右内边距（页面已经给了），
 * 再把直接子项收敛到同一容器宽度，于是 320/390/768/1280 下左边界都与 H1 一致。
 */
.mok-page--contact .mok-contact-info {
	padding-left: 0;
	padding-right: 0;
}

.mok-page--contact .mok-contact-info > * {
	max-width: var(--mok-layout-max, 1240px);
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

/*
 * 联系页的纵向节奏统一：H1 / 联系信息模块 / 合作咨询卡 / 正文卡之间都是同一个间距，
 * 不再出现「18px、24px 混着用」导致的疏密不匀。
 * 正文块在卡内也不再二次居中（原本 constrained 760 居中，与卡内其它左对齐内容错位），
 * 改成左对齐的可读列，和联系信息卡的三栏左边界对齐。
 */
.mok-page--contact > * + * {
	margin-top: var(--wp--custom--card--padding, 24px);
}

.mok-page--contact .mok-page-card .mok-entry-content > :not(.alignwide):not(.alignfull) {
	max-width: var(--mok-reading-max, 880px);
	margin-left: 0;
	margin-right: auto;
}


.mok-contact-details__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--wp--style--block-gap, 24px);
	margin: 0;
}

.mok-contact-details__row dt {
	margin: 0 0 4px;
	font-size: 14px;
	color: var(--wp--preset--color--muted);
}

.mok-contact-details__row dd {
	margin: 0;
	font-size: 16px;
	color: var(--wp--preset--color--ink);
	overflow-wrap: anywhere;
}

.mok-contact-details__row a {
	color: var(--wp--preset--color--primary-dark);
}

.mok-contact-details__qr {
	margin: 24px 0 0;
}

.mok-contact-details__qr img {
	width: 132px;
	height: auto;
	border-radius: var(--wp--custom--radius--card, 6px);
	display: block;
}

.mok-contact-details__qr figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}

.mok-contact-details__agreement {
	margin: 16px 0 0;
	font-size: 15px;
}

/* 标签云页面版：整页宽度的标签卡片。 */
.mok-widget--tags-page .wp-block-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mok-widget--tags-page .wp-block-tag-cloud .tag-cloud-link {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-size: 14px !important;
	text-decoration: none;
}

/* 团队卡片与时间线（about patterns）。 */
.mok-team-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--style--block-gap, 24px);
}

.mok-team-card {
	padding: 24px;
	text-align: center;
}

.mok-team-card__avatar {
	margin: 0 auto 16px;
	width: 96px;
}

.mok-team-card__avatar img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
}

.mok-team-card__name {
	margin: 0 0 4px;
	font-size: 18px;
}

.mok-team-card__role {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--wp--preset--color--primary-dark);
}

.mok-team-card__bio {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
	color: var(--wp--preset--color--muted);
}

.mok-timeline {
	list-style: none;
	margin: 0;
	padding: 0 0 0 24px;
	border-inline-start: 2px solid var(--wp--preset--color--border);
}

.mok-timeline li {
	position: relative;
	margin-block-end: 20px;
	padding-inline-start: 8px;
	font-size: 15px;
	line-height: 1.9;
	color: var(--wp--preset--color--muted);
}

.mok-timeline li strong {
	color: var(--wp--preset--color--ink);
	margin-inline-end: 8px;
}

@media (max-width: 1023px) {
	.mok-page-layout,
	.mok-page-layout--submenu {
		grid-template-columns: minmax(0, 1fr);
	}

	.mok-team-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.mok-page-card,
	.mok-contact-details {
		padding: 20px;
	}

	.mok-page-card__title,
	.mok-page-header__title {
		font-size: 24px;
	}

	.mok-team-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------- 面包屑导航（F-004） */
/*
 * 数据集与 JSON-LD 的 BreadcrumbList 同源（主题 includes/breadcrumbs.php）。
 * 分隔符由 li 上的 data-sep 提供，不写死在内容里，管理员可在主题设置里改。
 */
.mok-breadcrumb {
	width: 100%;
	max-width: var(--mok-layout-max, 1240px);
	margin: 0 auto 8px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--wp--preset--color--meta);
}

.mok-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mok-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

.mok-breadcrumb__item[data-sep]::before {
	content: attr(data-sep);
	color: var(--wp--preset--color--meta);
	opacity: 0.7;
}

.mok-breadcrumb__link {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.mok-breadcrumb__link:hover,
.mok-breadcrumb__link:focus {
	text-decoration: underline;
}

.mok-breadcrumb__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 2px;
}

.mok-breadcrumb__current {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	/*
	 * 当前页单行 + 省略号。单篇/页面横幅里的面包屑末项就是完整标题，
	 * 允许换行会在 390px 与下方 H1 重复两遍并截出孤字（实测）。
	 * 完整标题仍由 H1 与 JSON-LD BreadcrumbList 提供，读屏不受影响。
	 */
	display: block;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

@media (max-width: 781px) {
	.mok-breadcrumb {
		font-size: 12px;
		margin-bottom: 6px;
	}
}

/* ------------------------------------------------ 全站布局（侧栏位置 / 通栏） */
/*
 * 布局由 body 上的 .mok-layout--* 控制，模板仍是同一套（single/page/archive 各一份），
 * 侧栏模板部件也只有一个。通栏时 PHP 直接不渲染侧栏部件（见 includes/frontend.php）。
 */
.mok-single-layout > .mok-single__main,
.mok-page-layout > .mok-page__main,
.mok-archive-layout > .mok-archive__main {
	grid-area: main;
	min-width: 0;
}

.mok-single-layout > .wp-block-template-part,
.mok-page-layout > .wp-block-template-part,
.mok-archive-layout > .wp-block-template-part,
.mok-single-layout > .mok-sidebar,
.mok-page-layout > .mok-sidebar,
.mok-archive-layout > .mok-sidebar {
	grid-area: side;
	min-width: 0;
}

@media (min-width: 1024px) {
	body.mok-layout--sidebar-left .mok-single-layout,
	body.mok-layout--sidebar-left .mok-page-layout:not(.mok-page-layout--single):not(.mok-page-layout--submenu),
	body.mok-layout--sidebar-left .mok-archive-layout {
		grid-template-columns: var(--wp--custom--sidebar--width, 320px) minmax(0, 1fr);
		grid-template-areas: "side main";
	}

	body.mok-layout--sidebar-right .mok-single-layout,
	body.mok-layout--sidebar-right .mok-page-layout:not(.mok-page-layout--single):not(.mok-page-layout--submenu),
	body.mok-layout--sidebar-right .mok-archive-layout {
		grid-template-columns: minmax(0, 1fr) var(--wp--custom--sidebar--width, 320px);
		grid-template-areas: "main side";
	}

	/*
	 * 产品 / 案例归档在参考站是整幅网格（4 列 305 / 2 列 635），不渲染侧栏时
	 * 主列必须铺满整幅容器：body.mok-layout--sidebar-* 的两列规则在前，
	 * 这里用同特异度但更靠后的规则覆盖成单列。
	 */
	body .mok-archive-layout:not(:has(.mok-sidebar)) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "main";
	}
}

body.mok-layout--full .mok-single-layout,
body.mok-layout--full .mok-page-layout,
body.mok-layout--full .mok-archive-layout {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "main";
}

/* 单列断点：主内容在前、侧栏在后（DOM 顺序一致，不在移动端重排） */
@media (max-width: 1023px) {
	.mok-single-layout,
	.mok-page-layout,
	.mok-archive-layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "main" "side";
	}
}

/* ------------------------------------------------------- 页头版式 / Logo */
/*
 * 页头默认 fixed（参考站单行固定条）。设置里选择「不吸顶」时整条回到文档流，
 * body 的顶部预留同时归零，避免出现「不固定却仍留 80px 空白」。
 */
.mok-header--static .mok-header {
	position: static;
	box-shadow: none;
}

body.mok-header--static {
	padding-top: 0;
}

.mok-header--static body.admin-bar .mok-header,
body.mok-header--static.admin-bar .mok-header {
	top: 0;
}

.mok-logo {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	max-width: 100%;
}

.mok-logo__link {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	max-width: 100%;
}

.mok-logo__img {
	display: block;
	width: auto;
	height: auto;
	max-height: 52px;
	max-width: min(100%, 280px);
	object-fit: contain;
}

.mok-logo__img--mobile {
	display: none;
}

@media (max-width: 781px) {
	.mok-logo__img {
		max-height: 40px;
		max-width: min(100%, 200px);
	}

	.mok-logo__img--desktop {
		display: none;
	}

	.mok-logo__img--mobile {
		display: block;
	}
}

/* 超长站点名也不撑破容器 */
.mok-header__brand,
.mok-header__brand a {
	overflow-wrap: anywhere;
	max-width: 100%;
}

/* 单行页头：用 display:contents 把 LOGO / 导航 / 工具放进同一行，顺序 1-2-3 */
@media (min-width: 782px) {
	body.mok-header--single .mok-header__inner {
		display: flex;
		align-items: center;
		gap: 24px;
		min-height: var(--wp--custom--header--height, 80px);
	}

	body.mok-header--single .mok-header__top {
		display: contents;
	}

	/*
	 * 单行版式：LOGO / 导航 / 工具同一行，**三块都不许换行**。
	 *
	 * 2026-10-31 实测（1440px / 容器 1240）：6 项主导航 + 电话 + 账号区 + CTA 总宽比容器多 7px，
	 * 于是 `.mok-nav ul` 的 flex-wrap: wrap 把末项「联系我们」挤到第二行，页头从 80px 涨到 118px，
	 * 品牌名同时被压成「默可科…」。三条一起修：
	 *  1. 品牌不收缩（`flex: 0 0 auto`）—— 站点名宁可不省略；
	 *  2. 导航容器与内层列表都 nowrap —— 宁可让间距收紧，也不折行；
	 *  3. 单行版式把导航项右内距 18 → 12、工具区间距 20 → 14，把省下的宽度让给导航。
	 * 菜单再多（超过容器可用宽度）时不会横向溢出：导航外层 `min-width: 0` + `overflow: hidden`，
	 * 由移动端汉堡（mok-menu--toggle）与「头部布局 → 双行」承担更多项的场景。
	 */
	body.mok-header--single .mok-header__brand {
		order: 1;
		flex: 0 0 auto;
		min-width: 0;
	}

	body.mok-header--single .mok-header__nav {
		order: 2;
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		min-height: 0;
		border-top: 0;
		overflow: hidden;
	}

	body.mok-header--single .mok-nav,
	body.mok-header--single .mok-nav .wp-block-navigation__container {
		flex-wrap: nowrap;
	}

	body.mok-header--single .mok-nav .wp-block-navigation-item__content,
	body.mok-header--single .mok-nav .wp-block-navigation-item > a {
		padding-right: 12px;
	}

	body.mok-header--single .mok-header__tools {
		order: 3;
		flex: 0 0 auto;
		gap: 14px;
		margin-left: auto;
	}
}

/*
 * 782–1023px（窄桌面 / 横屏平板）：两种版式的行内菜单都放不下。
 *
 * 2026-10-31 实测：6 项主导航需要 623px，而这段时间 row2 的可用宽度只有 490–732px，
 * ≥782 又已经走桌面规则 ⇒ 菜单折成两行，双行页头从 112px 被撑到 183px（782px 命中）。
 * 处理：与 ≤781 同一套折叠（汉堡 + 弹层），菜单项一个不丢，也不折行。
 * 弹层样式在 ≤781 段里，这里必须重复一份，否则在这个区间点开汉堡会看到没有样式的裸列表。
 */
@media (min-width: 782px) and (max-width: 1023px) {
	body.mok-menu--toggle .mok-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	body.mok-menu--toggle .mok-nav .wp-block-navigation__responsive-container-open {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px 0;
		color: var(--wp--preset--color--ink);
	}

	body.mok-menu--toggle .mok-nav .wp-block-navigation__responsive-container.is-menu-open {
		padding: 16px;
		background: var(--wp--preset--color--white);
	}

	body.mok-menu--toggle .mok-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 4px;
	}

	body.mok-menu--toggle .mok-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		width: 100%;
		padding: 12px 0;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	body.mok-menu--toggle .mok-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	body.mok-menu--toggle .mok-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 10px 0;
		font-size: var(--wp--preset--font-size--small);
	}

	/* 折叠后导航只占汉堡宽度，不再参与「拉满一行」。 */
	body.mok-header--double .mok-header__row2 > .mok-header__nav,
	body.mok-header--single .mok-header__nav {
		flex: 0 0 auto;
	}

	body.mok-header--single .mok-header__tools {
		margin-left: auto;
	}
}

/*
 * 双行版式 ≤781px：两行收成一行（LOGO / 工具 / 汉堡），导航行只保留汉堡按钮，
 * 搜索开启时独占第二行。用 display: contents 把两行容器拆开参与同一套栅格，
 * 但 DOM 里没有重复的导航链接（仍只有一份 wp:navigation）。
 *
 * 另：核心 navigation 在 600–781px 会同时输出汉堡按钮和行内菜单（只在 <600 收成弹层），
 * 「折叠菜单」模式下这一段的行内菜单必须真的不渲染，否则两者叠成多行、把页头撑高一倍。
 */
@media (max-width: 781px) {
	body.mok-menu--toggle .mok-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
	body.mok-header--double .mok-header__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 6px 10px;
		min-height: var(--wp--custom--header--height-mobile, 87px);
		padding-block: 10px;
	}

	body.mok-header--double .mok-header__top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 10px;
		min-height: 0;
		grid-column: 1;
		grid-row: 1;
	}

	body.mok-header--double .mok-header__row2 {
		display: contents;
	}

	body.mok-header--double .mok-header__row2 > .mok-header__nav {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		flex: 0 0 auto;
		min-height: 0;
	}

	body.mok-header--double .mok-header__row2 > .mok-header__search {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
		max-width: none;
		flex: none;
	}
}

/*
 * 头部搜索（设置 → 头部 → 头部搜索开启时才渲染）
 * 约束：
 * - 块自身定宽 220px 且 flex: 0 0 auto，不参与收缩，电话/CTA 不会被挤走；
 * - inside-wrapper 强制单行：输入框 min-width:0 负责让位、按钮 white-space:nowrap 不换行；
 * - label 由区块的 showLabel=false 输出为 screen-reader-text（读屏可用，视觉上不占行高）；
 * - ≤781px 变成工具区第二行的整行搜索，点击区足够，也不撑破页头。
 */
.mok-header__search {
	width: 220px;
	flex: 0 0 220px;
	max-width: 100%;
	margin: 0;
}

.mok-header__search .wp-block-search__label:not(.screen-reader-text) {
	display: none;
}

.mok-header__search .wp-block-search__label.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mok-header__search .wp-block-search__inside-wrapper {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	background: var(--wp--preset--color--white);
	overflow: hidden;
}

.mok-header__search .wp-block-search__input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: 6px 10px;
	font-size: 13px;
}

.mok-header__search .wp-block-search__button {
	flex: 0 0 auto;
	margin: 0;
	padding: 6px 12px;
	border-radius: 0;
	font-size: 13px;
	white-space: nowrap;
}

@media (max-width: 781px) {
	/*
	 * 小屏：工具区用 display:contents 拆进页头栅格，
	 * 于是「LOGO | 电话 | CTA」保持第一行，搜索在第二行真正铺满整行，
	 * 而不是缩在工具区宽度里。没有搜索时栅格退化成一行，布局不变。
	 */
	/* 提高优先级：核心给 .is-layout-flex 的 display:flex 不能盖掉这里的栅格 */
	.mok-header .mok-header__top {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		align-items: center;
		gap: 8px 10px;
	}

	.mok-header .mok-header__tools {
		display: contents;
	}

	.mok-header__brand {
		grid-column: 1;
		grid-row: 1;
		min-width: 0;
	}

	.mok-header__phone {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
	}

	.mok-header__top .wp-block-buttons {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}

	/*
	 * 移动端不显示页头搜索框：这一档页头基线是 87px（紧凑单行），
	 * 多一行 36px 输入框会撑到 104px，既偏离基线又占掉首屏。
	 * 移动端搜索走站内搜索页 / 页脚快捷链接 / 菜单「全部页面」，不是假按钮；
	 * 桌面（≥782）与窄桌面（782–1023）都会显示搜索框。
	 */
	.mok-header__search {
		display: none;
	}

		/*
		 * 会员账号区显式落位：≤781 电话已隐藏，第 2 列正好空出来。
		 * 2026-10-31 实测：不给位置时账号区被自动放置，产生隐式列把 1fr 压小，
		 * 390 下品牌名只剩 75px（文字需 82px）→ 页头显示「默可科…」。
		 */
		.mok-header__top .mok-header__account {
			grid-column: 2;
			grid-row: 1;
			justify-self: end;
		}

		/* CTA 不被栅格行高拉伸（实测 390 被拉到 61px、320 拉到 100px）。 */
		.mok-header__top .mok-header__cta,
		.mok-header__top .mok-header__cta .wp-block-button__link {
			align-self: center;
		}
}

/*
 * 320–420px：页头只留 LOGO / 汉堡 / CTA。
 *
 * 2026-10-31 实测：390 下「品牌名 82 + 账号区 104 + CTA 125 + 间距 20」= 331 已顶到 358 的
 * 可用宽度上限；360/320 必然超宽，品牌名被截成「默可科…」甚至只剩 36px。
 * 账号入口在这一档收起（页脚「会员中心 / 登录」与 /member/ 仍可进入），
 * 优先保证 LOGO 与主 CTA 完整可读可点。
 */
@media (max-width: 420px) {
	/*
	 * 必须写成 `.mok-header__tools.mok-header__tools >` 这种双层类：theme.css 里已有一条
	 * `.mok-header__tools.mok-header__tools > .mok-header__account { display: flex }`（0,3,0），
	 * 单层类选择器盖不住它 —— 实测第一版就是这么失效的（390 下账号区仍在，品牌名被压到 75px）。
	 */
	body .mok-header__tools.mok-header__tools > .mok-header__account {
		display: none;
	}
}

/* 小屏菜单：inline 模式直接展开文字链接（无 JS 也能导航） */
@media (max-width: 781px) {
	body.mok-menu--inline .wp-block-navigation__responsive-container-open,
	body.mok-menu--inline .wp-block-navigation__responsive-container-close {
		display: none;
	}

	body.mok-menu--inline .wp-block-navigation__responsive-container {
		display: block;
		position: static;
		background: transparent;
		color: inherit;
	}

	body.mok-menu--inline .wp-block-navigation__responsive-container.is-menu-open {
		position: static;
		padding: 0;
	}

	body.mok-menu--inline .wp-block-navigation__container {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 14px;
		padding: 0;
	}

	body.mok-menu--inline .wp-block-navigation__responsive-close {
		max-width: none;
	}
}

/* 全站灰化：只作用前台内容区（后台与编辑器不受影响） */
body.mok-grayscale .wp-site-blocks {
	filter: grayscale(100%);
}

/* 空态 / 异常提醒图 */
.mok-state-figure {
	margin: 0 0 16px;
	text-align: center;
}

.mok-state-image {
	display: block;
	width: auto;
	max-width: min(100%, 320px);
	height: auto;
	margin: 0 auto;
	border-radius: 6px;
}

/* ---------------------------------------------------------- 默认缩略图（缺特色图时） */
/*
 * 约束原则：默认图只「填满它自己的图框」，不改变图框本身的尺寸与比例。
 * 所以这里不写 width/height:100%，而是按四种位置的图框分别给尺寸：
 * 1) 首页展示卡 / 归档卡：图框自带 aspect-ratio，图填满图框；
 * 2) 文章页封面 / 页面封面：宽 100%、高自适应；
 * 3) 侧栏小卡 / 相关阅读：保持 96px 定宽 + 3:2 比例（与 .mok-widget__thumb / .mok-related-card img 一致）；
 * 4) 其它位置：交给所在容器的既有规则，绝不反向撑大容器。
 */
.mok-default-thumb {
	display: block;
	object-fit: cover;
}

/* 1) 图框自带比例的卡片：填满 */
.mok-archive-card__media .mok-default-thumb,
.mok-showcase-card__media .mok-default-thumb,
.mok-post-card .wp-block-post-featured-image .mok-default-thumb {
	width: 100%;
	height: 100%;
}

/* 2) 文章 / 页面封面 */
.mok-featured--default .mok-default-thumb,
.mok-single__media .mok-default-thumb,
.mok-page-card__media .mok-default-thumb {
	width: 100%;
	height: auto;
}

/* 3) 侧栏小卡 / 相关阅读：两处都用「类 + 类」提高优先级，避免被默认图规则反向覆盖 */
.mok-widget__thumb.mok-default-thumb,
.mok-related-card img.mok-default-thumb {
	width: 96px;
	height: auto;
	flex: none;
	aspect-ratio: 3 / 2;
}

/*
 * 小于 781px 时不再单独缩小默认图：侧栏小卡与相关阅读的缩略图在所有断点都是
 * 96×64（3:2，object-fit: cover），避免同一行的特色图 96 与默认图 84 混排。
 */

/* ============================================================
 * 文章页与列表页的新增组件（Sprint 3 / F-012…F-016）
 * 全部消费 theme.json 的 token，不写死颜色
 * ============================================================ */

/* 1) 正文首行缩进（.mok-indent 由 body_class 按设置注入） */
.mok-indent .mok-entry-content > p,
.mok-indent .mok-entry-content > .wp-block-paragraph {
	text-indent: 2em;
}

.mok-indent .mok-entry-content > ul,
.mok-indent .mok-entry-content > ol,
.mok-indent .mok-entry-content > blockquote,
.mok-indent .mok-entry-content > figure,
.mok-indent .mok-entry-content > .wp-block-image,
.mok-indent .mok-entry-content > h2,
.mok-indent .mok-entry-content > h3,
.mok-indent .mok-entry-content > h4 {
	text-indent: 0;
}

/* 2) 版权说明 */
.mok-copyright {
	padding: 20px 24px;
}

.mok-copyright__prefix {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.mok-copyright__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.8;
	color: var(--wp--preset--color--muted);
}

/* 3) 分享条 */
.mok-share {
	margin-block: var(--wp--preset--spacing--40);
	padding: 16px 20px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
}

.mok-share__title {
	margin: 0 0 10px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.mok-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mok-share__item {
	margin: 0;
	min-width: 0;
}

.mok-share__link {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	text-decoration: none;
	cursor: pointer;
}

.mok-share__link:hover,
.mok-share__link:focus-visible {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

.mok-share__wechat > summary {
	list-style: none;
}

.mok-share__wechat > summary::-webkit-details-marker {
	display: none;
}

.mok-share__wechat[open] > summary {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-dark);
}

.mok-share__wechat-body {
	margin-top: 10px;
	padding: 12px;
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
}

.mok-share__hint {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.mok-share__copy-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.mok-share__copy-input {
	flex: 1 1 200px;
	min-width: 0;
	padding: 6px 10px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--button);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
}

.mok-share__copy-button {
	padding: 6px 14px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.mok-share__copy-button:hover,
.mok-share__copy-button:focus-visible {
	background: var(--wp--preset--color--primary-dark);
}

.mok-share__status {
	margin: 8px 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* 4) 列表条目 meta */
.mok-list-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.mok-list-meta > * {
	min-width: 0;
}

.mok-list-meta a {
	color: inherit;
	text-decoration: none;
}

.mok-list-meta a:hover {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
}

.mok-list-status {
	margin: 8px 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* 5) 相关推荐空态（与真实推荐卡区分，不套 .mok-related 以免被当成有内容） */
.mok-related-empty {
	padding: 20px 24px;
}

.mok-related-empty__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/*
 * 6) 小屏返回箭头：宽屏不渲染布局，≤781px 内联在文章标题之前。
 * 不用 position: fixed：390px 下正文两侧只有 20px 内边距，44px 的触控目标
 * 放不进边沟，固定悬浮必然与正文矩形相交（会盖住正文首段）。
 */
.mok-back-link {
	display: none;
}

@media (max-width: 781px) {
	.mok-share--desktop-only {
		display: none;
	}

	.mok-back-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 2px;
		min-width: 44px;
		min-height: 44px;
		margin: 0 0 12px;
		padding: 0 12px;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius--pill);
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--ink);
		font-size: var(--wp--preset--font-size--small);
		box-shadow: var(--wp--custom--shadow--card, 0 1px 2px rgba(16, 24, 40, 0.06));
		text-decoration: none;
		vertical-align: middle;
	}

	.mok-back-link:hover,
	.mok-back-link:focus-visible {
		border-color: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--primary-dark);
		text-decoration: none;
	}

	.mok-back-link__icon {
		font-size: 18px;
		line-height: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mok-share__link,
	.mok-share__copy-button,
	.mok-list-meta a {
		transition: none;
	}
}

/* ============================================================
 * Sprint 4（F-017…F-020）：首屏排版、滚动揭示、模块外观、锚点导航、发展历程
 * ============================================================ */

/* ---------------------------------------------------------- 首屏排版（volcengine 式） */

/*
 * 首屏大标题按参考站实测基线：桌面 42px / 行高 1.5（63）/ 字重 700 / 字距 3px，
 * 390 下 22px / 行高 1.5（33）/ 字距 1px。中文用系统字体渲染，不加载任何 webfont。
 * 选择器与旧规则同特异性、写在后面，因此覆盖旧的 1.18 行高与细体。
 */
.mok-hero .mok-hero__title {
	font-size: 42px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 3px;
}

@media (max-width: 640px) {
	.mok-hero .mok-hero__title {
		font-size: 22px;
		line-height: 1.5;
		letter-spacing: 1px;
	}
}

.mok-hero__panel--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/*
 * 居中排版时描述/眉标/按钮组跟着居中：副标题自带 max-width，若只给面板 text-align，
 * 文字框仍贴左，会出现「标题居中、描述偏左」的错位。
 */
.mok-hero__panel--center .mok-hero__sub {
	margin-left: auto;
	margin-right: auto;
}

.mok-hero__panel--center .mok-hero__eyebrow {
	text-align: center;
}

.mok-hero__panel--center .mok-hero__actions {
	justify-content: center;
}

.mok-hero__media--video {
	overflow: hidden;
}

.mok-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------- 滚动揭示动效 */

/*
 * 默认（无 JS / 低动效）就是「静态呈现」：不加类、不做任何隐藏。
 * 只有 assets/js/reveal.js 在 IntersectionObserver 可用且用户没有开启
 * 「减少动态效果」时，才会先加 --pending 再在进入视口时换成 --in。
 * 因此禁用 JS、或 prefers-reduced-motion: reduce 时文案一定完整可见。
 */
.mok-reveal--pending {
	opacity: 0;
	filter: blur(8px);
	transform: translate(-22px, 0);
	will-change: opacity, filter, transform;
}

.mok-reveal--in {
	opacity: 1;
	filter: blur(0);
	transform: none;
	transition:
		opacity 0.76s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.76s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.76s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
	.mok-reveal--pending,
	.mok-reveal--in {
		opacity: 1;
		filter: none;
		transform: none;
		transition: none;
	}
}

/* ---------------------------------------------------------- 模块外观（背景 / 装饰线） */

.mok-section.mok-module--tinted,
.mok-banner.mok-module--tinted {
	color: var(--mok-module-ink, #ffffff);
}

.mok-module--tinted .mok-section__head :is(h1, h2, h3, p),
.mok-module--tinted > .mok-eyebrow,
.mok-module--tinted > h2,
.mok-module--tinted > .mok-lead,
.mok-module--tinted > .mok-muted,
.mok-module--tinted .wp-block-media-text__content :is(h1, h2, h3, p) {
	color: var(--mok-module-ink, #ffffff);
}

.mok-module--tinted .mok-section__head .mok-eyebrow {
	color: var(--mok-module-ink, #ffffff);
}

.mok-module--bg-image {
	background-image:
		linear-gradient(rgba(10, 16, 28, 0.72), rgba(10, 16, 28, 0.72)),
		var(--mok-module-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* 装饰线 = 眉标左右的色条（纯装饰；关掉不影响文字与对比度）。 */
.mok-section--no-decor .mok-eyebrow::before,
.mok-section--no-decor .mok-eyebrow::after {
	display: none;
	content: none;
}


/*
 * 固定页头（+ 单页模式下的吸顶锚点导航）会把锚点目标挡在下面：
 * 给每个模块根元素留出「页头高度 + 锚点导航高度 + 16px」。
 * --mok-header-total 由 header-offset.js 实测校正；--mok-anchor-nav-reserve 与
 * --mok-header-slack 负责无 JS 时的保守回退，只影响落点，不改布局。
 */
.mok-section[id],
.mok-hero[id],
.mok-banner[id] {
	scroll-margin-top: calc(var(--mok-header-total, 80px) + var(--mok-admin-offset, 0px) + var(--mok-anchor-nav-reserve, 0px) + var(--mok-header-slack, 0px) + 16px);
}
/*
 * 单页模式：页面内锚点导航（页头下方独立一条，不塞进页头主导航，
 * 免得多达 13 个锚点把换行的页头撑到 180–250px 并盖住锚点落点）。
 * 吸顶位置 = 固定页头高度 + admin bar 偏移，两者都由 JS 实测/下发。
 */
.mok-anchor-nav {
	position: sticky;
	top: calc(var(--mok-header-total, 80px) + var(--mok-admin-offset, 0px));
	z-index: 90;
	border-bottom: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
}

.mok-anchor-nav__list {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 0 auto;
	padding: 10px 24px;
	max-width: var(--wp--custom--layout--max-width, 1240px);
	overflow-x: auto;
	list-style: none;
	scrollbar-width: thin;
}

.mok-anchor-nav__item {
	flex: 0 0 auto;
	margin: 0;
}

.mok-anchor-nav__link {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small, 14px);
	text-decoration: none;
	white-space: nowrap;
}

.mok-anchor-nav__link:hover,
.mok-anchor-nav__link:focus-visible {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-dark);
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.mok-anchor-nav) {
		scroll-behavior: smooth;
	}
}


/* ---------------------------------------------------------- 发展历程 */

.mok-timeline {
	display: grid;
	gap: var(--wp--style--block-gap, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mok-timeline__item {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: 24px;
	margin: 0;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.mok-timeline__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.mok-timeline__year {
	margin: 0;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: var(--wp--preset--font-size--x-large, 20px);
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
}

.mok-timeline__title {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--h3, 22px);
	line-height: 1.4;
}

.mok-timeline__details {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.mok-timeline__details > summary {
	cursor: pointer;
	color: var(--wp--preset--color--primary-dark);
	font-size: var(--wp--preset--font-size--small, 14px);
}

.mok-timeline__details > p {
	margin: 8px 0 0;
	font-size: var(--wp--preset--font-size--body, 16px);
	line-height: 1.7;
}

.mok-timeline__link {
	display: inline-block;
	margin-top: 8px;
	font-size: var(--wp--preset--font-size--small, 14px);
}

@media (max-width: 640px) {
	.mok-timeline__item {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}
}

/* ---------------------------------------------------------- 无图卡片的统一图框 */

/*
 * 与 images.php 的 `.mok-featured--empty` 对应：比例、底色与圆角都与真图（含默认图）一致，
 * 内部只放一行「暂无配图」，不再是整块空灰。
 */
.mok-featured--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	aspect-ratio: 3 / 2;
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
	overflow: hidden;
}

.mok-featured--empty > span {
	padding: 0 16px;
	color: var(--wp--preset--color--meta);
	font-size: var(--wp--preset--font-size--small, 14px);
	text-align: center;
}

.mok-post-card .wp-block-post-featured-image.mok-featured--empty {
	width: 100%;
}

/* 上下篇的空态文案（没有下一篇时不再留下空卡） */
.mok-article-nav__empty {
	display: block;
	margin: 0;
	color: var(--wp--preset--color--meta);
	font-size: var(--wp--preset--font-size--small, 14px);
}

.mok-stat__unit {
	font-size: 0.6em;
	font-weight: 500;
	margin-left: 2px;
	color: var(--wp--preset--color--primary-dark);
}

/*
 * 内容查询类模块（产品/案例/新闻）的外观容器：背景由外层 .mok-home-frame
 * 的绘制层（::before，见 assets/css/width.css）承担，内层 section 必须让位，
 * 否则 section 的 base 白底会把模块背景色/背景图整块盖掉。
 *
 * 两条结构都要覆盖：section 根模块（理由/流程/伙伴）是
 * .mok-module--tinted > .mok-section；div 根模块（产品/案例/新闻）经过宽度过滤器
 * 后会多一层内容容器，即 .mok-module--tinted > .mok-width-container > .mok-section，
 * 直接子选择器不会命中，所以显式补上容器这一层。
 */
.mok-module--tinted > .mok-section,
.mok-module--tinted > .wp-block-group.mok-section,
.mok-module--tinted > .mok-width-container > .mok-section,
.mok-module--tinted > .mok-width-container > .wp-block-group.mok-section {
	background-color: transparent;
	background-image: none;
}

.mok-module[id],
.mok-module[id] > .mok-section,
.mok-module[id] > .mok-width-container {
	scroll-margin-top: calc(var(--mok-header-total, 80px) + var(--mok-admin-offset, 0px) + var(--mok-anchor-nav-reserve, 0px) + var(--mok-header-slack, 0px) + 16px);
}

/* ------------------------------------------- 390 移动端密度（参考站实测口径） */

/*
 * 参考站 390（2026-10-28 实测）首页高约 10109，本站改前 12931（+27.9%）。
 * 差距主要不在区块节距（两边移动端都是 32px 上下内边距），而在两个内容查询模块
 * 的卡片形态：参考站「产品」是 350×113 的横排图文卡、「案例」保持 2 列 168px 小卡，
 * 本站这两个模块都渲染成单列 358px 竖卡（每个模块 1575px，共 3150px）。
 * 这里只改移动端这两个模块的排布与卡内边距，不隐藏任何内容、不缩小正文字号。
 */
@media (max-width: 640px) {
	/* 案例模块：2 列（参考站 390 为 2 列 168px），卡片内边距收到 12。 */
	.mok-module--cases .mok-showcase__grid {
		--mok-grid-cols-sm: 2;
	}

	.mok-module--cases .mok-showcase-card__body {
		gap: 6px;
		padding: 12px;
	}

	.mok-module--cases .mok-showcase-card__title {
		min-height: 0;
		font-size: 14px;
	}

	.mok-module--cases .mok-showcase-card__date {
		margin-top: auto;
	}

	/* 产品模块：横排图文卡（图 132 宽固定在左，文字在右），对应参考站 350×113。 */
	.mok-module--products .mok-showcase-card__link {
		flex-direction: row;
		align-items: stretch;
	}

	.mok-module--products .mok-showcase-card__media {
		flex: 0 0 132px;
		width: 132px;
		aspect-ratio: auto;
	}

	.mok-module--products .mok-showcase-card__body {
		gap: 6px;
		padding: 14px 16px;
	}

	.mok-module--products .mok-showcase-card__title {
		min-height: 0;
		font-size: 15px;
	}

	.mok-module--products .mok-showcase-card__excerpt {
		-webkit-line-clamp: 1;
		line-clamp: 1;
	}

	.mok-module--products .mok-showcase-card__date {
		margin-top: 0;
	}
}

/*
 * 390 下的区块节距与卡片内边距：只收留白，不动字号、行高与内容。
 * - 区块标题（.mok-section__head / .mok-showcase__head）到内容 24 → 16；
 * - 流程步骤、评价卡 24 → 20（与参考站移动端卡片内边距同一档）；
 * - FAQ 折叠卡 18/22 → 16/18（正文仍 14px / 行高 1.8，无 JS 仍可展开阅读）。
 */
@media (max-width: 640px) {
	.mok-section__head,
	.mok-showcase__head {
		margin-bottom: 16px;
	}

	.mok-step,
	.mok-testimonial {
		padding: 20px;
	}

	.mok-faq-item {
		padding: 16px 18px;
	}
}

/* ============================================================ rev6 F-028 跨文档视图过渡
 *
 * 渐进增强：支持 @view-transition 的浏览器在站内跳转时做一次淡入淡出，
 * 不支持的浏览器与无 JS 时完全按普通文档加载，页面照样可读可导航。
 * 低动效偏好下关闭，不强制动画。
 */
@view-transition {
	navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none;
	}
}

/*
 * 资源商城插件停用时的简码兜底说明（includes/shop-fallback.php 输出的 .mok-shop-fallback）。
 * 用主题自己的 token，不依赖插件样式表（插件停用时 shop.css 不会加载）。
 */
.mok-shop-fallback {
	max-width: var(--wp--custom--layout--content-size, 760px);
	margin-block: var(--wp--custom--spacing--50, 32px);
	padding: var(--wp--custom--spacing--50, 32px) var(--wp--custom--spacing--40, 24px);
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 6px);
	background: var(--wp--preset--color--white);
}

.mok-shop-fallback__title {
	margin-block: 0 8px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--x-large, 20px);
	font-weight: 600;
}

.mok-shop-fallback__text {
	margin-block: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--body, 16px);
}

/* ------------------------------------------------------------------
 * 区块编辑器：动态区块的说明性占位（只在编辑器画布里出现）
 *
 * 上下文缺失时（新建文章、没有子页面、只在单篇输出的区块等），编辑器不显示
 * 核心的「区块渲染为空。」，而是给一段说明，运营才知道这不是坏块。
 * 颜色/字号全部取 theme.json token，不新增设计值。
 * ------------------------------------------------------------------ */
.mok-block-preview-note {
	margin-block: 0;
	padding: var(--wp--custom--spacing--40, 24px);
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 6px);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small, 14px);
	line-height: 1.7;
}

.mok-block-preview-note > strong {
	display: block;
	margin-block-end: 4px;
	font-size: var(--wp--preset--font-size--body, 16px);
	font-weight: 600;
}

.mok-block-preview-note > p {
	margin-block: 0;
	color: var(--wp--preset--color--muted);
}