/*
Theme Name: Aurorabelle
Theme URI: https://aurorabelle.top
Author: Aurorabelle
Author URI: https://aurorabelle.top
Description: 为草本植物品牌定制的 WooCommerce 区块主题（Block Theme）。基于 theme.json 设计令牌，配套自家插件 Aurorabelle Core 扩展商品字段与结账逻辑。
Version: 1.1.5
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aurorabelle
Tags: e-commerce, block-theme, block-patterns, woocommerce, one-column, wide-blocks
*/

/* =========================================================
   0. 字体（自托管）

   之前走 fonts.googleapis.com，实测在国内网络下整条链路超时，
   浏览器只能落回 Georgia / Palatino，logo 和标题都不是设计里的样子。
   改成随主题分发 woff2 之后：不依赖第三方、不被墙、少两次 DNS/TLS。

   - Fraunces：可变字体，带 opsz（光学尺寸）+ wght 两个轴，
     opsz 越大衬线越锐、笔画对比越强，正适合做 logo 与标题。
   - Inter：可变字体，只带 wght（正文用不到光学尺寸轴，省 25KB）。
   ========================================================= */
@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/fraunces-latin-opsz-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 斜体只给品牌字（页头/页脚的站点标题）用。Fraunces 的斜体带书写体的入笔和收笔，
   是整站唯一「手写感」的地方，也是 logo 的艺术性来源；
   正文标题仍然是竖体，两者对照才有品牌字的效果。81KB，按需下载。 */
@font-face {
	font-family: "Fraunces";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/fraunces-latin-opsz-italic.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   1. 设计令牌与基础
   ========================================================= */
:root {
	--ab-radius-sm: var(--wp--custom--radius--sm, 4px);
	--ab-radius-md: var(--wp--custom--radius--md, 10px);
	--ab-radius-lg: var(--wp--custom--radius--lg, 20px);
	--ab-radius-pill: 999px;
	--ab-hairline: 1px solid var(--wp--preset--color--line, #dcd2bf);
	--ab-shadow-soft: 0 10px 30px -12px rgba(30, 42, 34, 0.18);
	--ab-shadow-lift: 0 24px 60px -24px rgba(30, 42, 34, 0.28);
	--ab-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

::selection {
	background: var(--wp--preset--color--primary, #2f5d46);
	color: var(--wp--preset--color--base, #fbf8f1);
}

/* 焦点可见性（无障碍） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #b4674a);
	outline-offset: 3px;
	border-radius: var(--ab-radius-sm);
}

/* =========================================================
   2. 排版工具类
   ========================================================= */
.ab-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.9rem;
}

.ab-lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
	max-width: 46ch;
}

.ab-rule {
	width: 44px;
	height: 2px;
	background: var(--wp--preset--color--accent);
	border: 0;
	margin: 1.6rem 0;
}

.ab-serif-italic {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
}

/* 章节标题区域 */
.ab-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: var(--wp--preset--spacing--50);
}

.ab-section-head h2 {
	margin: 0;
}

/* =========================================================
   3. 顶部公告条 + 页头
   ========================================================= */
.ab-announce {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	padding: 0.6rem 1rem;
}

.ab-announce p {
	margin: 0;
	color: inherit;
}

.ab-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	backdrop-filter: saturate(160%) blur(12px);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	border-bottom: var(--ab-hairline);
}

.ab-header .wp-block-site-title {
	margin: 0;
}

.ab-header .wp-block-site-title a {
	font-family: var(--wp--preset--font-family--display);
	/* 品牌字用斜体：Fraunces Italic 的 A 有入笔挑尾、b/l 带收笔弧线，
	   在 24px 上下能读出书写感，是全站唯一的手写语气。
	   配合下面的高 opsz，细笔画拉成发丝，粗笔画压重，矛盾感才出来。 */
	font-style: italic;
	/* 光学尺寸推到 display 端。浏览器默认按字号自动取 opsz（24px 字号 → 约 24），
	   结果是「小号正文衬线」的样子：笔画细、对比弱。
	   手动拉到 144 后，Fraunces 的粗笔画变重、细笔画变锐，收笔也更干净，
	   这才是这套字体在 logo 尺寸该有的样子。 */
	font-optical-sizing: none;
	font-variation-settings: "opsz" 144;
	/* 斜体在同等字号下看起来比竖体小一圈，所以比原来的竖体尺寸再放一点。 */
	font-size: clamp(1.5rem, 1.72vw, 1.78rem);
	font-weight: 600;
	/* 斜体本身向右倾、字形内缩，负字间距会挤成一片；这里反而要松开一点，
	   让每个字母的入笔/收笔有落脚处。 */
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: color 0.25s var(--ab-ease);
}

.ab-header .wp-block-site-title a:hover {
	color: var(--wp--preset--color--primary);
}

/* 页脚站名跟页头同一个品牌字，否则上下两个「Aurorabelle」长得不一样。 */
.ab-footer .wp-block-site-title a {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-optical-sizing: none;
	font-variation-settings: "opsz" 144;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.ab-header .wp-block-navigation-item__content {
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.ab-header .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

.ab-header .wp-block-search__input {
	border: var(--ab-hairline);
	background: transparent;
	border-radius: var(--ab-radius-pill);
	padding: 0.5rem 0.9rem;
	font-size: 0.85rem;
	min-width: 160px;
}

.ab-header .wp-block-search__button {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--contrast);
}

/* 导航项间距：空间足够时保持一行，避免换行错位 */
.ab-header .wp-block-navigation__container {
	column-gap: clamp(0.9rem, 1.8vw, 1.8rem);
	row-gap: 0.35rem;
	flex-wrap: wrap;
	justify-content: center;
}

/* 下拉菜单面板 */
.ab-header .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base);
	border: var(--ab-hairline);
	border-radius: var(--ab-radius-md);
	box-shadow: 0 22px 48px -28px rgba(28, 26, 23, 0.4);
	padding: 0.45rem 0.3rem;
	min-width: 230px;
	z-index: 80;
}

.ab-header .wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: 100%;
}

.ab-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 0.6rem 1rem;
	font-size: 0.76rem;
	letter-spacing: 0.08em;
	border-radius: var(--ab-radius-sm);
	white-space: nowrap;
}

.ab-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.ab-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
}

/* 平板及以下：收起搜索框，给导航留出空间 */
@media (max-width: 960px) {
	.ab-header .ab-search {
		display: none;
	}
}

@media (max-width: 781px) {
	.ab-header .wp-block-site-title a {
		font-size: 1.3rem;
		/* 小字号下斜体的细笔画更容易糊，字间距不再额外收紧 */
		letter-spacing: 0.008em;
	}

	.ab-header .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--wp--preset--color--base);
	}

	.ab-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: 0.95rem;
		padding: 0.55rem 0;
		letter-spacing: 0.06em;
	}
}

/* =========================================================
   4. 按钮（经典 + 区块双兼容）
   ========================================================= */
.wp-block-button__link,
.wp-element-button,
a.button,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	border-radius: var(--ab-radius-pill);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.25s var(--ab-ease), color 0.25s var(--ab-ease),
		border-color 0.25s var(--ab-ease), transform 0.25s var(--ab-ease);
}

.wp-block-button__link:active,
.woocommerce a.button:active {
	transform: translateY(1px);
}

/* 次要按钮（描边） */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
}

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

/* =========================================================
   5. 商品列表（短代码 / 经典模板输出）
   ========================================================= */
/* 列数由短代码的 columns-N 类驱动。缺这一段时 grid 只有一列，
   短代码商品与分类卡会全部竖排成一列。 */
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(var(--ab-cols, 4), minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.woocommerce ul.products.columns-1 { --ab-cols: 1; }
.woocommerce ul.products.columns-2 { --ab-cols: 2; }
.woocommerce ul.products.columns-3 { --ab-cols: 3; }
.woocommerce ul.products.columns-5 { --ab-cols: 5; }
.woocommerce ul.products.columns-6 { --ab-cols: 6; }

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none !important;
}

.woocommerce ul.products li.product {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left;
	position: relative;
	transition: transform 0.4s var(--ab-ease);
	/* 纵向弹性布局：标题行数不同的卡片里，按钮仍能对齐到卡片底部 */
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
}

.woocommerce ul.products li.product a img {
	border-radius: var(--ab-radius-md);
	aspect-ratio: 4 / 5;
	width: 100%;
	height: auto;
	object-fit: cover;
	margin-bottom: 1rem;
	background: var(--wp--preset--color--surface);
	transition: filter 0.4s var(--ab-ease);
}

.woocommerce ul.products li.product:hover a img {
	filter: brightness(1.03);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem !important;
	font-weight: 500;
	line-height: 1.35;
	padding: 0 !important;
	margin: 0 0 0.35rem;
	color: var(--wp--preset--color--contrast);
}

.woocommerce ul.products li.product .price {
	font-size: 0.92rem;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.75rem;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.woocommerce ul.products li.product .button {
	display: inline-block;
	padding: 0.6rem 1.3rem;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
	font-size: 0.7rem;
	/* 底部对齐：价格行数不一致时按钮仍落在同一水平线 */
	align-self: flex-start;
	margin-top: auto !important;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.woocommerce ul.products li.product .button:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	right: auto;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 0.3rem 0.7rem;
	border-radius: var(--ab-radius-pill);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* 星标评分 */
.woocommerce .star-rating {
	color: var(--wp--preset--color--accent);
	font-size: 0.72rem;
	margin-bottom: 0.4rem;
}

/* 分页 */
.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	gap: 0.4rem;
	justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: grid;
	place-items: center;
	min-width: 2.4rem;
	height: 2.4rem;
	border-radius: var(--ab-radius-pill);
	border: var(--ab-hairline);
	color: var(--wp--preset--color--contrast);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}

/* =========================================================
   6. 商品详情页
   ========================================================= */
.woocommerce div.product .product_title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.1;
	margin-bottom: 0.6rem;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--wp--preset--color--contrast);
	font-size: 1.35rem;
	font-weight: 500;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--wp--preset--color--muted);
	font-size: 1.02rem;
	line-height: 1.7;
}

.woocommerce div.product form.cart .button {
	padding: 1rem 2.4rem;
}

.woocommerce div.product form.cart div.quantity .qty {
	border: var(--ab-hairline);
	border-radius: var(--ab-radius-pill);
	padding: 0.85rem 0.6rem;
	width: 4.2rem;
	text-align: center;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 2rem;
	border-bottom: var(--ab-hairline);
	display: flex;
	gap: 2rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	padding: 0.9rem 0;
	display: inline-block;
	border-bottom: 2px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--contrast);
	border-bottom-color: var(--wp--preset--color--accent);
}

/* 植物档案表（由插件输出） */
.ab-botanical-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	margin: 0;
}

.ab-botanical-table th,
.ab-botanical-table td {
	text-align: left;
	padding: 0.85rem 0;
	border-bottom: var(--ab-hairline);
	vertical-align: top;
}

.ab-botanical-table th {
	width: 34%;
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.ab-botanical-sci {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	color: var(--wp--preset--color--muted);
	font-size: 1.05rem;
	margin: 0 0 0.25rem;
}

/* =========================================================
   7. 首页专用版块
   ========================================================= */
.ab-trust {
	border-top: var(--ab-hairline);
	border-bottom: var(--ab-hairline);
	padding: 1.5rem 0;
}

.ab-trust p {
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0;
	text-align: center;
}

.ab-card {
	background: var(--wp--preset--color--white);
	border: var(--ab-hairline);
	border-radius: var(--ab-radius-lg);
	padding: var(--wp--preset--spacing--40);
	height: 100%;
}

.ab-card h3 {
	margin-top: 0;
	margin-bottom: 0.6rem;
}

.ab-step-num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.4rem;
	line-height: 1;
	color: var(--wp--preset--color--line);
	margin: 0 0 0.8rem;
}

.ab-quote-card {
	border-left: 2px solid var(--wp--preset--color--accent);
	padding-left: 1.6rem;
	height: 100%;
}

.ab-quote-card p {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.12rem;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 1rem;
}

.ab-quote-card cite {
	font-style: normal;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* 分类网格 */
.woocommerce ul.product-categories {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--wp--preset--spacing--30);
	list-style: none;
	padding: 0;
	margin: 0;
}

.woocommerce ul.product-categories li {
	background: var(--wp--preset--color--surface);
	border-radius: var(--ab-radius-md);
	padding: 1.6rem;
	text-align: center;
	transition: background-color 0.3s var(--ab-ease);
}

.woocommerce ul.product-categories li:hover {
	background: var(--wp--preset--color--line);
}

.woocommerce ul.product-categories li a {
	text-decoration: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	color: var(--wp--preset--color--contrast);
}

.woocommerce ul.product-categories li .count {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-top: 0.35rem;
}

/* =========================================================
   8. 表单 / 结账
   ========================================================= */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__label + select {
	border: var(--ab-hairline);
	border-radius: var(--ab-radius-sm);
	background: var(--wp--preset--color--white);
	padding: 0.8rem 0.95rem;
	font-size: 0.95rem;
	color: var(--wp--preset--color--contrast);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.wc-block-components-text-input input:focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(47, 93, 70, 0.12);
}

.woocommerce form .form-row label,
.wc-block-components-text-input label {
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.wc-block-components-sidebar-layout .wc-block-components-order-summary {
	background: var(--wp--preset--color--surface);
	border-radius: var(--ab-radius-md);
	padding: var(--wp--preset--spacing--30);
}

.wc-block-components-button:not(.is-link) {
	border-radius: var(--ab-radius-pill);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	font-weight: 600;
}

/* 表格与价格 */
.woocommerce table.shop_table {
	border: var(--ab-hairline);
	border-radius: var(--ab-radius-md);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table th {
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--surface);
}

/* 通知 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--ab-radius-md);
	border-top: 0;
	border-left: 3px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-size: 0.92rem;
}

/* =========================================================
   9. 页脚
   ========================================================= */
.ab-footer {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
	margin-top: 0;
}

.ab-footer h2,
.ab-footer h3,
.ab-footer .wp-block-heading {
	color: var(--wp--preset--color--base);
	font-size: 1.05rem;
	letter-spacing: 0.02em;
}

.ab-footer p,
.ab-footer li,
.ab-footer .wp-block-navigation-item__content {
	color: color-mix(in srgb, var(--wp--preset--color--surface) 78%, transparent);
	font-size: 0.9rem;
}

/* 页脚邮箱是单个长 token，0.18em 字距会让它在窄列里被折成「…TO / P」，
   这里单独收紧字距并允许安全断行。 */
.ab-footer .ab-eyebrow {
	letter-spacing: 0.06em;
	overflow-wrap: anywhere;
}

.ab-footer .ab-eyebrow a {
	white-space: nowrap;
}

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

.ab-footer a:hover {
	color: var(--wp--preset--color--secondary);
}

.ab-footer .wp-block-navigation__container {
	display: grid;
	gap: 0.55rem;
}

.ab-footer-bottom {
	border-top: 1px solid rgba(242, 235, 220, 0.16);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
}

.ab-footer-bottom p {
	font-size: 0.78rem;
	color: color-mix(in srgb, var(--wp--preset--color--surface) 60%, transparent);
	margin: 0;
}

/* =========================================================
   10. 响应式
   ========================================================= */
@media (max-width: 1100px) {
	.woocommerce ul.products[class*="columns-"] {
		--ab-cols: 3;
	}

	.woocommerce ul.products.columns-2 {
		--ab-cols: 2;
	}
}

@media (max-width: 900px) {
	.woocommerce ul.products[class*="columns-"] {
		--ab-cols: 2;
	}
}

@media (max-width: 781px) {
	.ab-section-head {
		margin-bottom: var(--wp--preset--spacing--40);
	}
}

@media (max-width: 520px) {
	.woocommerce ul.products[class*="columns-"] {
		--ab-cols: 1;
	}
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* 打印 */
@media print {
	.ab-header,
	.ab-footer,
	.ab-announce {
		display: none !important;
	}
}

/* =========================================================
   11. 首页通栏 banner（轮播）
   ========================================================= */
.ab-banner {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.ab-banner__stage {
	position: relative;
	display: grid;
	min-height: clamp(500px, 72vh, 740px);
}

.ab-banner__slide {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.9s var(--ab-ease), visibility 0.9s var(--ab-ease);
}

.ab-banner__slide.is-active,
.ab-banner.is-single .ab-banner__slide {
	opacity: 1;
	visibility: visible;
}

.ab-banner__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 70% 50%;
	z-index: 0;
}

.ab-banner__img.is-alt {
	object-position: 64% 52%;
}

/* 左侧奶油色渐变：深色文字压在浅色布面上仍然可读，
   右侧保留完整的产品画面，不用整片压暗 */
.ab-banner__wash {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		100deg,
		var(--wp--preset--color--base) 4%,
		color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent) 30%,
		color-mix(in srgb, var(--wp--preset--color--base) 58%, transparent) 48%,
		color-mix(in srgb, var(--wp--preset--color--base) 14%, transparent) 66%,
		transparent 78%
	);
}

.ab-banner__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem) clamp(5rem, 8vw, 6.5rem);
}

.ab-banner__copy {
	max-width: 42rem;
}

.ab-banner__copy .ab-eyebrow {
	color: var(--wp--preset--color--accent);
}

.ab-banner__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.3rem, 4.9vw, 4.3rem);
	font-weight: 400;
	line-height: 1.03;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 1.15rem;
}

.ab-banner__title em {
	font-style: italic;
	font-weight: 300;
}

.ab-banner__lede {
	font-size: clamp(0.98rem, 1.05vw, 1.12rem);
	line-height: 1.65;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 76%, transparent);
	max-width: 40ch;
	margin: 0 0 2rem;
}

.ab-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
}

.ab-banner__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.95rem 1.95rem;
	border-radius: var(--ab-radius-pill);
	border: 1px solid var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.25s var(--ab-ease), color 0.25s var(--ab-ease),
		border-color 0.25s var(--ab-ease), transform 0.25s var(--ab-ease);
}

.ab-banner__btn:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	transform: translateY(-1px);
}

.ab-banner__btn.is-ghost {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 38%, transparent);
}

.ab-banner__btn.is-ghost:hover {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* 左右箭头 */
.ab-banner__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	width: 2.9rem;
	height: 2.9rem;
	display: grid;
	place-items: center;
	padding: 0;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.3s var(--ab-ease), background-color 0.3s var(--ab-ease);
}

.ab-banner__arrow.is-prev {
	left: clamp(0.75rem, 2vw, 1.75rem);
}

.ab-banner__arrow.is-next {
	right: clamp(0.75rem, 2vw, 1.75rem);
}

.ab-banner:hover .ab-banner__arrow,
.ab-banner__arrow:focus-visible {
	opacity: 1;
}

.ab-banner__arrow:hover {
	background: var(--wp--preset--color--base);
}

/* 指示点：与文案左边缘对齐，落在奶油色遮罩上更清晰 */
.ab-banner__dots {
	position: absolute;
	left: max(
		clamp(1.25rem, 4vw, 3rem),
		calc((100vw - 1240px) / 2 + clamp(1.25rem, 4vw, 3rem))
	);
	bottom: 2rem;
	z-index: 7;
	display: flex;
	gap: 0.5rem;
}

.ab-banner__dot {
	width: 2.1rem;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 32%, transparent);
	cursor: pointer;
	transition: background-color 0.3s var(--ab-ease), width 0.3s var(--ab-ease);
}

.ab-banner__dot.is-active {
	width: 3.4rem;
	background: var(--wp--preset--color--contrast);
}

/* =========================================================
   12. 首页分类图块 / 数据 / 引语
   ========================================================= */
/* 分类图块沿用短代码输出的 columns-N 列数，不再单独覆盖，
   否则选择器权重会压过下方的响应式规则，窄屏仍是四列 */
.woocommerce ul.products li.product-category > a {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--ab-radius-lg);
	text-decoration: none;
	background: var(--wp--preset--color--surface);
	box-shadow: var(--ab-shadow-soft);
}

.woocommerce ul.products li.product-category a img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
	margin: 0;
	transition: transform 0.7s var(--ab-ease);
}

.woocommerce ul.products li.product-category:hover a img {
	transform: scale(1.05);
}

.woocommerce ul.products li.product-category > a::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 58%;
	background: linear-gradient(to top, rgba(30, 42, 34, 0.78), rgba(30, 42, 34, 0));
	pointer-events: none;
}

.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
	bottom: 1.1rem;
	z-index: 2;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.12rem !important;
	font-weight: 500;
	line-height: 1.25;
	color: var(--wp--preset--color--base);
}

.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
	margin-top: 0.3rem;
	background: transparent;
}

/* 数字行 */
.ab-stats {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--ab-hairline);
	align-items: flex-start;
}

.ab-stat {
	flex: 1 1 7.5rem;
}

.ab-stat-num {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.9rem, 3.2vw, 2.6rem);
	line-height: 1;
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.4rem;
}

.ab-stat-label {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* 图文区块的配图 */
.ab-story-media {
	margin: 0;
}

.ab-story-media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--ab-shadow-soft);
}

/* 引语署名 */
.ab-quote-card .ab-quote-attrib {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.ab-quote-card .ab-quote-attrib p {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* =========================================================
   13. 首页响应式
   ========================================================= */
@media (max-width: 1000px) {
	.ab-banner__arrow {
		display: none;
	}

	.ab-banner__stage {
		min-height: clamp(440px, 62vh, 620px);
	}

	.ab-banner__wash {
		background: linear-gradient(
			to top,
			var(--wp--preset--color--base) 2%,
			color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent) 40%,
			color-mix(in srgb, var(--wp--preset--color--base) 40%, transparent) 66%,
			transparent 88%
		);
	}

	.ab-banner__img,
	.ab-banner__img.is-alt {
		object-position: 62% 50%;
	}

	.ab-banner__inner {
		padding-top: 4rem;
		padding-bottom: 4.5rem;
		display: flex;
		align-items: flex-end;
	}
}

@media (max-width: 782px) {
	.ab-banner__stage {
		min-height: 0;
	}

	.ab-banner__slide {
		align-items: stretch;
	}

	/* 窄屏图片被裁得更满，文字落点更容易压到细节上，
	   遮罩要更厚，让下半屏接近纯奶油色 */
		.ab-banner__wash {
		background: linear-gradient(
			to top,
			var(--wp--preset--color--base) 48%,
			color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent) 64%,
			color-mix(in srgb, var(--wp--preset--color--base) 62%, transparent) 78%,
			color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent) 93%,
			transparent 100%
		);
	}

	.ab-banner__img,
	.ab-banner__img.is-alt {
		object-position: 58% 30%;
	}

	.ab-banner__inner {
		min-height: clamp(430px, 70vh, 560px);
		padding-top: 7rem;
	}

	.ab-banner__title br {
		display: none;
	}

	.ab-banner__lede {
		font-size: 0.95rem;
		margin-bottom: 1.6rem;
	}

	.ab-banner__btn {
		flex: 1 1 auto;
		padding: 0.9rem 1.4rem;
	}

	.ab-banner__dots {
		bottom: 1.4rem;
	}

	.ab-story-media img {
		aspect-ratio: 4 / 3;
	}

	.ab-stat {
		flex: 1 1 100%;
	}
}

/* =========================================================
   12. 内页版式系统
   参考 oulemei.top 的信息架构：整幅页头 banner 起头，正文用
   「图文行 / 特性卡 / 手风琴 / 信息卡」几种区块拼装。
   配色保持本站自己的 cream + forest 色板。
   ========================================================= */

/* ---- 页头 banner ---- */
.ab-page-hero {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border-bottom: var(--ab-hairline);
	padding-top: clamp(2.6rem, 5.5vw, 4.6rem);
	padding-bottom: clamp(2.2rem, 4.5vw, 3.6rem);
}

/* 共用一张品牌图做底纹：参考站所有内页也是同一张 banner，
   这里压到 0.16 不透明度并向右淡出，只留质感不抢文字。 */
.ab-page-hero::before {
	content: "";
	position: absolute;
	inset: 0 0 0 38%;
	background: url("assets/img/ab-story.jpg") center / cover no-repeat;
	opacity: 0.16;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
	pointer-events: none;
}

.ab-page-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin-inline: auto;
	/* 与正文共用一条栅格：页头标题和第一段正文的左边界必须对齐 */
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	box-sizing: border-box;
}

/* 正文各区块锁在同一条 1240 栅格上 */
.wp-block-post-content > .ab-section,
.wp-block-post-content > .wp-block-query {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	box-sizing: border-box;
}

.ab-page-hero .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.1rem, 4.4vw, 3.4rem) !important;
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--contrast);
	margin: 0;
	max-width: 18ch;
}

.ab-page-hero .wp-block-post-excerpt {
	margin: 1rem 0 0;
	max-width: 48ch;
}

.ab-page-hero .wp-block-post-excerpt__excerpt {
	font-size: clamp(0.98rem, 1.1vw, 1.1rem);
	line-height: 1.6;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 72%, transparent);
	margin: 0;
}

/* ---- 通用区块 ---- */
.ab-section {
	padding-top: clamp(2.6rem, 5.5vw, 4.6rem);
	padding-bottom: clamp(2.6rem, 5.5vw, 4.6rem);
}

.ab-section--tight {
	padding-top: clamp(1.8rem, 3.5vw, 3rem);
	padding-bottom: clamp(1.8rem, 3.5vw, 3rem);
}

/* 沙色块不做通栏：做成圆角面板，避免 100vw + 滚动条造成的横向溢出。
   用同色外发光把背景向外扩一圈，这样面板里的文字仍然落在正文栅格上，
   不会比其他区块多缩进一截。 */
.ab-section--sand {
	background: var(--wp--preset--color--surface);
	border-radius: var(--ab-radius-lg);
	box-shadow: 0 0 0 clamp(1.1rem, 2.6vw, 2.4rem) var(--wp--preset--color--surface);
}

.ab-section--ink {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: var(--ab-radius-lg);
	box-shadow: 0 0 0 clamp(1.1rem, 2.6vw, 2.4rem) var(--wp--preset--color--contrast);
}

.ab-section--rule {
	border-top: var(--ab-hairline);
}

.ab-section__head {
	max-width: 44rem;
	margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}

.ab-lede {
	font-size: clamp(1.02rem, 1.25vw, 1.16rem);
	line-height: 1.68;
	max-width: 46ch;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 82%, transparent);
	margin: 0;
}

.ab-prose {
	max-width: 62ch;
}

.ab-prose p {
	line-height: 1.72;
	margin: 0 0 1.1rem;
}

.ab-prose p:last-child {
	margin-bottom: 0;
}

/* ---- 图文行 ---- */
.ab-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.6rem, 4.5vw, 3.8rem);
	align-items: center;
}

.ab-split__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--ab-radius-lg);
	display: block;
	margin: 0;
}

.ab-split.is-reverse .ab-split__media {
	order: 2;
}

.ab-split__body .ab-eyebrow {
	margin-bottom: 0.7rem;
}

.ab-split__body h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 0.9rem;
}

/* ---- 特性卡 ---- */
.ab-features {
	display: grid;
	grid-template-columns: repeat(var(--ab-cols, 3), minmax(0, 1fr));
	gap: clamp(0.8rem, 1.6vw, 1.2rem);
}

/* 列数用修饰类给，不写行内 style —— 行内自定义属性会盖掉媒体查询，
   窄屏就会继续排成 4 列，字被挤成一列一个字符。 */
.ab-features--2 { --ab-cols: 2; }
.ab-features--3 { --ab-cols: 3; }
.ab-features--4 { --ab-cols: 4; }

.ab-feature {
	background: var(--wp--preset--color--white);
	border: var(--ab-hairline);
	border-radius: var(--ab-radius-lg);
	padding: clamp(1.15rem, 2.2vw, 1.8rem);
}

.ab-feature__num {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0.6rem;
}

.ab-feature h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.1rem, 1.5vw, 1.28rem);
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--contrast);
}

.ab-feature p {
	font-size: 0.92rem;
	line-height: 1.6;
	margin: 0;
	color: var(--wp--preset--color--muted);
}

/* ---- 手风琴 ---- */
.ab-accordion {
	border-top: var(--ab-hairline);
}

.ab-accordion details {
	border-bottom: var(--ab-hairline);
}

.ab-accordion summary {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.2rem;
	padding: 1.05rem 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1rem, 1.3vw, 1.12rem);
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
	list-style: none;
}

.ab-accordion summary::-webkit-details-marker {
	display: none;
}

.ab-accordion summary::after {
	content: "+";
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.15rem;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	transition: transform 0.3s var(--ab-ease);
}

.ab-accordion details[open] summary::after {
	content: "\2212";
}

.ab-accordion summary:hover {
	color: var(--wp--preset--color--primary);
}

.ab-accordion__body {
	padding: 0 0 1.25rem;
	max-width: 64ch;
}

.ab-accordion__body p {
	margin: 0 0 0.8rem;
	font-size: 0.96rem;
	line-height: 1.7;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 78%, transparent);
}

.ab-accordion__body p:last-child {
	margin-bottom: 0;
}

.ab-group-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.15rem, 1.7vw, 1.4rem);
	font-weight: 500;
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--contrast);
}

.ab-group-title:not(:first-child) {
	margin-top: 2.2rem;
}

/* ---- 信息卡（联系方式 / 政策摘要） ---- */
.ab-info {
	display: grid;
	grid-template-columns: repeat(var(--ab-cols, 3), minmax(0, 1fr));
	gap: clamp(0.8rem, 1.6vw, 1.2rem);
}

.ab-info--2 { --ab-cols: 2; }
.ab-info--3 { --ab-cols: 3; }

.ab-info__card {
	background: var(--wp--preset--color--white);
	border: var(--ab-hairline);
	border-radius: var(--ab-radius-lg);
	padding: clamp(1.2rem, 2.2vw, 1.8rem);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.ab-info__card .ab-eyebrow {
	margin: 0;
	font-size: 0.68rem;
}

.ab-info__card a,
.ab-info__card strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.02rem, 1.4vw, 1.18rem);
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.ab-info__card a:hover {
	color: var(--wp--preset--color--primary);
}

.ab-info__card span {
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

/* ---- 政策表格 ---- */
.ab-policy {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.94rem;
}

.ab-policy th,
.ab-policy td {
	text-align: left;
	padding: 0.85rem 0.9rem;
	border-bottom: var(--ab-hairline);
	vertical-align: top;
}

.ab-policy th {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.ab-policy td:first-child {
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
}

/* ---- 收尾 CTA 条 ---- */
.ab-cta-band {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: var(--ab-radius-lg);
	padding: clamp(1.8rem, 4vw, 3rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.4rem;
}

.ab-cta-band h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 0.4rem;
	color: var(--wp--preset--color--base);
}

.ab-cta-band p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: color-mix(in srgb, var(--wp--preset--color--surface) 74%, transparent);
	max-width: 44ch;
}

.ab-cta-band .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-radius: var(--ab-radius-pill);
	padding: 0.85rem 1.7rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ab-cta-band .wp-block-button__link:hover {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--contrast);
}

/* ---- 空状态（日记暂无文章） ---- */
.ab-empty {
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: var(--ab-radius-lg);
	padding: clamp(2rem, 4vw, 3.2rem);
	text-align: center;
	background: var(--wp--preset--color--white);
}

.ab-empty h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.3rem, 2vw, 1.7rem);
	font-weight: 400;
	margin: 0 0 0.6rem;
}

.ab-empty p {
	margin: 0 auto 1.2rem;
	max-width: 46ch;
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
	line-height: 1.65;
}

@media (max-width: 900px) {
	.ab-split {
		grid-template-columns: 1fr;
	}

	.ab-split.is-reverse .ab-split__media {
		order: 0;
	}

	.ab-features,
	.ab-info {
		--ab-cols: 2;
	}
}

@media (max-width: 640px) {
	.ab-page-hero::before {
		inset: 0 0 0 55%;
		opacity: 0.12;
	}

	.ab-page-hero .wp-block-post-title {
		max-width: none;
	}

	.ab-features,
	.ab-info {
		--ab-cols: 1;
	}

	.ab-cta-band {
		flex-direction: column;
		align-items: flex-start;
	}

	.ab-policy td:first-child {
		white-space: normal;
	}
}

/* 内页里的数字条：<span> 是行内元素，必须显式转块级才会竖排，
   否则「5」和「COLLECTIONS…」会挤成一行。 */
.ab-section .ab-stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 3vw, 2.6rem);
	margin: 0;
	padding-top: clamp(1rem, 2vw, 1.6rem);
	border-top: var(--ab-hairline);
}

.ab-section .ab-stat {
	flex: 1 1 12rem;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.ab-section .ab-stat-num,
.ab-section .ab-stat-label {
	display: block;
	margin: 0;
}

/* 内页栅格收口：页头内层与正文区块用同一条规则、同一条宽度，
   并且全部加 !important —— 区块布局的嵌套约束会算出不同宽度，
   这是页头标题和正文左边界对不齐的根因。 */
.ab-page main.wp-block-group,
.ab-page .wp-block-post-content,
.ab-page .ab-page-hero {
	max-width: none !important;
	margin-inline: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.ab-page .ab-page-hero__inner,
.ab-page .wp-block-post-content > .ab-section,
.ab-page .wp-block-post-content > .wp-block-query {
	width: min(1240px, 100%) !important;
	max-width: 1240px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(1.25rem, 4vw, 2.5rem) !important;
	padding-right: clamp(1.25rem, 4vw, 2.5rem) !important;
	box-sizing: border-box;
}

/* 页头内层同样带 is-layout-constrained，标题会被子级规则压到
   content-size（约 620px）并自动居中，于是标题和正文左边界差一大截。
   这里清掉自动居中的 margin，宽度只由我们自己的 max-width 决定。 */
.ab-page .ab-page-hero__inner > .wp-block-post-title,
.ab-page .ab-page-hero__inner > .wp-block-post-excerpt {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
}

.ab-page .ab-page-hero__inner > .wp-block-post-title {
	max-width: 20ch !important;
}

/* 博客索引页（/journal/）用的是 index.html 模板，没有 post-title，
   改用 .ab-page-hero__title / __lede 这两个类，样式与内页页头一致。 */
.ab-page-hero__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.1rem, 4.4vw, 3.4rem) !important;
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 0.9rem !important;
	max-width: 20ch !important;
}

.ab-page-hero__lede {
	font-size: clamp(0.98rem, 1.1vw, 1.1rem);
	line-height: 1.6;
	max-width: 48ch;
	margin: 0 !important;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 72%, transparent);
}

/* 索引页的正文层：main 的直接子元素也走同一条栅格 */
.ab-page .ab-page-hero__inner > .ab-page-hero__title,
.ab-page .ab-page-hero__inner > .ab-page-hero__lede,
.ab-page .ab-page-hero__inner > .ab-eyebrow {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ---- 文章网格 ---- */
.ab-page .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	gap: clamp(1.4rem, 2.6vw, 2.2rem);
}

.ab-page .wp-block-post-template .wp-block-post-featured-image {
	margin: 0 0 0.85rem;
}

.ab-page .wp-block-post-template .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--ab-radius-md);
	display: block;
	transition: transform 0.5s var(--ab-ease);
}

.ab-page .wp-block-post-template li:hover .wp-block-post-featured-image img {
	transform: scale(1.02);
}

.ab-page .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.05rem, 1.4vw, 1.2rem) !important;
	font-weight: 500;
	line-height: 1.3;
	margin: 0 0 0.4rem !important;
}

.ab-page .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.ab-page .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

.ab-page .wp-block-post-date {
	font-size: 0.7rem !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted) !important;
	margin: 0 0 0.5rem !important;
}

.ab-page .wp-block-post-excerpt__excerpt {
	font-size: 0.92rem;
	line-height: 1.62;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 74%, transparent);
	margin: 0 0 0.6rem;
}

.ab-page .wp-block-post-excerpt__more-text {
	margin: 0;
}

.ab-page .wp-block-post-excerpt__more-link {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* 索引页的区块是 main 的直接子元素（不经过 post-content），补上同样的栅格 */
.ab-page main > .ab-section,
.ab-page main > .wp-block-query {
	width: min(1240px, 100%) !important;
	max-width: 1240px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(1.25rem, 4vw, 2.5rem) !important;
	padding-right: clamp(1.25rem, 4vw, 2.5rem) !important;
	box-sizing: border-box;
}

/* =========================================================
   13. 文章（Journal）版式
   ========================================================= */

/* .ab-prose 只管段落；文章要标题、列表、引文、表格一整套 */
.ab-article {
	max-width: 66ch;
}

.ab-article p {
	font-size: 1.02rem;
	line-height: 1.76;
	margin: 0 0 1.15rem;
}

.ab-article h2 {
	font-size: clamp(1.3rem, 2.1vw, 1.58rem);
	line-height: 1.24;
	letter-spacing: -0.012em;
	margin: clamp(2.3rem, 4.4vw, 3.2rem) 0 0.85rem;
}

.ab-article h3 {
	font-size: 1.03rem;
	line-height: 1.4;
	letter-spacing: 0.005em;
	margin: clamp(1.7rem, 3vw, 2.2rem) 0 0.5rem;
}

.ab-article h2 + p,
.ab-article h3 + p {
	margin-top: 0;
}

.ab-article ul,
.ab-article ol {
	margin: 0 0 1.25rem;
	padding-left: 1.15rem;
}

.ab-article li {
	font-size: 1.0rem;
	line-height: 1.72;
	margin-bottom: 0.45rem;
}

.ab-article li:last-child {
	margin-bottom: 0;
}

.ab-article li::marker {
	color: var(--wp--preset--color--accent);
}

.ab-article strong {
	font-weight: 600;
}

.ab-article a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent);
	transition: text-decoration-color 0.2s var(--ab-ease);
}

.ab-article a:hover {
	text-decoration-color: var(--wp--preset--color--primary);
}

.ab-article blockquote {
	margin: clamp(1.6rem, 3vw, 2.2rem) 0;
	padding: 0.15rem 0 0.15rem 1.15rem;
	border-left: 2px solid var(--wp--preset--color--accent);
	font-size: 1.04rem;
	line-height: 1.7;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 78%, transparent);
}

.ab-article blockquote p {
	font-size: inherit;
	margin-bottom: 0.7rem;
}

.ab-article blockquote p:last-child {
	margin-bottom: 0;
}

.ab-article hr {
	border: 0;
	border-top: var(--ab-hairline);
	margin: clamp(2rem, 4vw, 2.8rem) 0;
}

/* 规格表：左边标签、右边内容，行间只用发丝线 */
.ab-glance {
	margin: 0 0 clamp(1.8rem, 3.4vw, 2.4rem);
	border-top: var(--ab-hairline);
}

.ab-glance dl {
	display: grid;
	grid-template-columns: minmax(7.5rem, 24%) minmax(0, 1fr);
	gap: 0;
	margin: 0;
}

.ab-glance dt {
	padding: 0.72rem 0;
	border-bottom: var(--ab-hairline);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.ab-glance dd {
	padding: 0.72rem 0;
	margin: 0;
	border-bottom: var(--ab-hairline);
	font-size: 0.96rem;
	line-height: 1.6;
}

/* 提示框：免责声明、注意事项 */
.ab-note {
	margin: clamp(1.8rem, 3.4vw, 2.4rem) 0 0;
	padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2.2vw, 1.6rem);
	background: var(--wp--preset--color--surface);
	border-radius: var(--ab-radius-md);
	font-size: 0.86rem;
	line-height: 1.68;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 78%, transparent);
}

.ab-note p {
	font-size: inherit;
	margin: 0 0 0.55rem;
}

.ab-note p:last-child {
	margin-bottom: 0;
}

.ab-note strong {
	color: var(--wp--preset--color--contrast);
}

/* 文末相关阅读：胶囊链 */
.ab-article-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: clamp(2rem, 4vw, 2.8rem) 0 0;
}

.ab-article-links a {
	display: inline-flex;
	align-items: center;
	padding: 0.42rem 0.9rem;
	border: var(--ab-hairline);
	border-radius: var(--ab-radius-pill);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: border-color 0.2s var(--ab-ease), background 0.2s var(--ab-ease);
}

.ab-article-links a:hover {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
}

/* 索引页分类筛选条 */
.ab-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 clamp(1.6rem, 3.2vw, 2.4rem);
}

.ab-filter a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45em;
	padding: 0.46rem 0.95rem;
	border: var(--ab-hairline);
	border-radius: var(--ab-radius-pill);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: border-color 0.2s var(--ab-ease), background 0.2s var(--ab-ease), color 0.2s var(--ab-ease);
}

.ab-filter a:hover {
	border-color: var(--wp--preset--color--contrast);
}

.ab-filter a.is-current {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.ab-filter__count {
	font-size: 0.92em;
	opacity: 0.6;
}

/* 卡片上的分类标签 */
main .wp-block-post-template .wp-block-post-terms {
	margin: 0.2rem 0 0;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

main .wp-block-post-template .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

main .wp-block-post-template .wp-block-post-terms a:hover {
	color: var(--wp--preset--color--accent);
}

/* 分类归档页标题区 */
.ab-archive-head {
	max-width: 46rem;
	margin-bottom: clamp(1.8rem, 3.6vw, 2.6rem);
}

/* 索引卡片等高：把「Read」压到底部，避免长短不齐 */
main .wp-block-post-template > li {
	display: flex;
	flex-direction: column;
	height: 100%;
}

main .wp-block-post-template > li .wp-block-post-excerpt {
	margin-top: auto;
}

/* wp:post-content 是 is-layout-constrained，直接子元素会被套上
   max-width + margin auto 自动居中；.ab-lede 的 46ch 上限因此显出向右缩进。
   正文要左边缘对齐，清掉自动外边距。 */
main .wp-block-post-content > .ab-lede,
main .wp-block-post-content > .ab-article {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ---- 分类/Tag 归档页（templates/archive.html） ---- */
/* term-description 渲染成 <div class="…"><p>…</p></div>，
   版式类挂在 div 上，内层 p 的自带外边距和字号要归零，
   否则页头导语会顶出标题下面一大截。 */
.wp-block-term-description p {
	font-size: inherit;
	line-height: inherit;
	margin: 0;
}

/* 筛选胶囊的当前项：静态区块标记里写不死 is-current，
   用 body 上的 category-<slug> 类反选。 */
body.category-how-to-use .ab-filter a[href*="how-to-use"],
body.category-herb-library .ab-filter a[href*="herb-library"] {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* 卡片标题长度不一，会把日期和摘要顶得参差不齐（同一行里三条基线）。
   统一按两行留高，整个栅格的信息就落在同一条基线上。
   窄屏是单列，卡片之间不会并排，不需要这个约束。 */
@media (min-width: 720px) {
	main .wp-block-post-template .wp-block-post-title {
		min-height: 2.6em;
	}
}

/* =========================================================
   5b. 区块商品网格（product-collection 区块：相关产品 / 商店页）
   ========================================================= */
/* product-collection 区块输出的商品卡片此前没有走上方经典模板的
   纵向弹性布局：标题一旦折成两三行，价格和按钮就顺着往下坠，
   同一行卡片里高低不齐。把经典模板的处理搬过来 ——
   li 改纵向 flex，价格组 margin-top:auto 顶到卡片底部，
   标题行数不一时，价格与按钮仍对齐在同一水平线。 */
ul.wc-block-product-template > li.wc-block-product {
	display: flex;
	flex-direction: column;
}

ul.wc-block-product-template > li.wc-block-product > .wp-block-woocommerce-product-price {
	margin-top: auto;
}