/*
Theme Name: 延时优选 Yanchi Youxuan
Theme URI: https://example.com/yanchi-youxuan
Author: Yanchi Studio
Author URI: https://example.com
Description: 面向男士延时喷剂品类的专业内容与产品评测主题。默认文章类型用于博客内容运营，内置「热销排名」与「站长推荐」两大产品模块，支持产品评分、销量、价格、购买跳转等电商化字段。深墨 + 香槟金的高端视觉体系，适合评测站、导购站、品牌内容站使用。
Version: 1.1.0
Requires at least: 5.8
Tested up to: 6.5
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: yanchi-youxuan
Tags: blog, e-commerce, custom-menu, featured-images, translation-ready, two-columns, right-sidebar
*/

/* ==========================================================================
   1. 设计令牌 (Design Tokens)
   ========================================================================== */
:root {
	/*
	 * 配色思路：以「深墨 + 香槟金 + 墨玉青」构成高级感。
	 * 大面积留白配极细分割线，强调靠字重与字距而非色块，
	 * 避免同类站点常见的廉价高饱和配色。
	 */

	/* 中性色：偏冷的墨灰，比纯灰更有质感 */
	--c-ink: #0b1216;
	--c-ink-deep: #070d10;
	--c-ink-soft: #172126;
	--c-body: #4c5a63;
	--c-muted: #8a959c;
	--c-line: #e7e9ea;
	--c-line-strong: #d3d8da;
	--c-bg: #f7f8f8;
	--c-surface: #ffffff;
	--c-surface-alt: #fafbfb;

	/* 品牌色：墨玉青。比原先更深一档，压得住大面积使用 */
	--c-brand: #0d5f6b;
	--c-brand-dark: #084a54;
	--c-brand-deep: #062e34;
	--c-brand-soft: #edf3f4;
	--c-brand-line: #cbdde0;

	/* 香槟金：只用于「站长推荐」与重点强调，克制使用才显贵 */
	--c-gold: #a6803e;
	--c-gold-light: #c9a45c;
	--c-gold-soft: #f8f2e6;
	--c-gold-line: #e8d9b8;

	/* 语义色：绛红比亮红更沉稳 */
	--c-hot: #c53048;
	--c-hot-soft: #fbeeef;
	--c-green: #1a7a5c;
	--c-green-soft: #e8f4ef;

	/*
	 * 排版：标题走衬线体栈。
	 * 中文衬线在大字号下有天然的「印刷品」质感，是高级感最省力的来源；
	 * 各平台都有系统自带衬线（Songti SC / SimSun / Noto Serif CJK），
	 * 无需加载外部字体，回退到无衬线也不会破版。
	 */
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
		"Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
		Helvetica, Arial, sans-serif;
	--font-display: "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC",
		"Noto Serif SC", SimSun, Georgia, "Times New Roman", var(--font-sans);
	--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

	--fs-xs: 12px;
	--fs-sm: 13px;
	--fs-base: 15px;
	--fs-md: 16px;
	--fs-lg: 19px;
	--fs-xl: 23px;
	--fs-2xl: 30px;
	--fs-3xl: 38px;
	--fs-4xl: 52px;

	--lh-tight: 1.28;
	--lh-normal: 1.65;
	--lh-relaxed: 1.9;

	/* 间距：整体加大一档，留白是「大气」最直接的来源 */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-8: 32px;
	--sp-10: 40px;
	--sp-12: 48px;
	--sp-16: 64px;
	--sp-20: 80px;

	/* 圆角：统一收小到 8–14px，比大圆角更有"杂志感" */
	--radius-sm: 5px;
	--radius: 8px;
	--radius-lg: 14px;
	--radius-pill: 999px;

	/* 阴影：低透明度、大扩散，营造"悬浮"而非"边框"的层次 */
	--shadow-xs: 0 1px 2px rgba(11, 18, 22, 0.04);
	--shadow-sm: 0 1px 2px rgba(11, 18, 22, 0.04), 0 4px 12px rgba(11, 18, 22, 0.04);
	--shadow-md: 0 2px 4px rgba(11, 18, 22, 0.04), 0 12px 28px rgba(11, 18, 22, 0.07);
	--shadow-lg: 0 4px 8px rgba(11, 18, 22, 0.05), 0 24px 56px rgba(11, 18, 22, 0.12);
	--shadow-gold: 0 12px 32px rgba(166, 128, 62, 0.18);

	--container: 1220px;
	--container-narrow: 760px;
	--transition: 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   2. 基础重置
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-body);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	word-break: break-word;
	overflow-wrap: anywhere;
}

/*
 * 标题分两级：
 * h1/h2 与区块大标题走衬线体，负责"印刷品"的高级感；
 * h3 及以下（卡片标题、产品名等）留在无衬线体，保证商业信息的清晰利落。
 */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--sp-3);
	color: var(--c-ink);
	font-weight: 700;
	line-height: var(--lh-tight);
	letter-spacing: -0.015em;
}

h1,
h2 {
	font-family: var(--font-display);
	letter-spacing: -0.02em;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); }

p { margin: 0 0 var(--sp-4); }

a {
	color: var(--c-brand);
	text-decoration: none;
	transition: color var(--transition);
}
a:hover { color: var(--c-brand-dark); }

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

ul, ol { padding-left: 1.3em; }
li { margin-bottom: var(--sp-2); }

hr {
	border: 0;
	border-top: 1px solid var(--c-line);
	margin: var(--sp-8) 0;
}

code, pre { font-family: var(--font-mono); font-size: 0.92em; }
code {
	background: var(--c-brand-soft);
	color: var(--c-brand-dark);
	padding: 2px 6px;
	border-radius: 4px;
}
pre {
	background: var(--c-ink);
	color: #e6edf3;
	padding: var(--sp-5);
	border-radius: var(--radius);
	overflow: auto;
}
pre code { background: none; color: inherit; padding: 0; }

blockquote {
	margin: var(--sp-6) 0;
	padding: var(--sp-4) var(--sp-6);
	background: var(--c-brand-soft);
	border-left: 4px solid var(--c-brand);
	border-radius: 0 var(--radius) var(--radius) 0;
	color: var(--c-brand-deep);
}
blockquote p:last-child { margin-bottom: 0; }

table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--sp-6) 0;
	background: var(--c-surface);
	font-size: var(--fs-sm);
}
th, td {
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--c-line);
	text-align: left;
}
th { background: var(--c-surface-alt); font-weight: 600; color: var(--c-ink); }

/* 可访问性 */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.skip-link:focus {
	background: var(--c-surface);
	color: var(--c-brand);
	display: block;
	left: var(--sp-4);
	top: var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
	z-index: 99999;
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
}
:focus-visible {
	outline: 2px solid var(--c-brand);
	outline-offset: 2px;
}

/* ==========================================================================
   3. 布局容器
   ========================================================================== */
.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--sp-5);
}

.site-content { padding: var(--sp-8) 0 var(--sp-16); }

.content-area.has-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--sp-8);
	align-items: start;
}
.content-area.no-sidebar { display: block; }

@media (max-width: 1024px) {
	.content-area.has-sidebar { grid-template-columns: 1fr; }
}

/* ==========================================================================
   4. 顶部通告条
   ========================================================================== */
.topbar {
	background: var(--c-ink-deep);
	color: #9aa9af;
	font-size: var(--fs-xs);
	line-height: 1.5;
	letter-spacing: 0.02em;
	/* 一条极细的香槟金分割线，是整套设计里成本最低的高级感来源 */
	border-bottom: 1px solid rgba(166, 128, 62, 0.32);
}
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-3) 0;
}
.topbar__note { display: flex; align-items: center; gap: var(--sp-3); }
.topbar__note .dot {
	width: 5px; height: 5px; border-radius: 50%;
	background: var(--c-gold-light);
	box-shadow: 0 0 0 3px rgba(201, 164, 92, 0.16);
	flex: none;
}
.topbar__links a { color: #9aa9af; margin-left: var(--sp-5); transition: color var(--transition); }
.topbar__links a:hover { color: var(--c-gold-light); }
.topbar__links .meta-item { color: #9aa9af; }
@media (max-width: 640px) {
	.topbar__links { display: none; }
	.topbar__note { font-size: 11px; }
}

/* ==========================================================================
   5. 站点头部
   ========================================================================== */
.site-header {
	/* 半透明 + 背景模糊，滚动时下方内容透出来，比纯白贴片更精致 */
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--c-line);
	position: sticky;
	top: 0;
	z-index: 100;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
	min-height: 78px;
}

.site-branding { display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.site-branding__mark {
	width: 44px; height: 44px;
	border-radius: 9px;
	/* 墨底 + 香槟金细描边，比彩色渐变稳重得多 */
	background: linear-gradient(150deg, var(--c-ink-soft) 0%, var(--c-ink-deep) 100%);
	color: var(--c-gold-light);
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0;
	flex: none;
	box-shadow: inset 0 0 0 1px rgba(201, 164, 92, 0.34);
}
.site-title {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
}
.site-title a { color: var(--c-ink); }
.site-title a:hover { color: var(--c-brand); }
.site-description {
	margin: 3px 0 0;
	font-size: var(--fs-xs);
	color: var(--c-muted);
	line-height: 1.3;
	letter-spacing: 0.04em;
}

/* 主导航 */
.main-navigation { flex: 1 1 auto; display: flex; justify-content: flex-end; }
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--sp-1);
}
.main-navigation li { position: relative; margin: 0; }
.main-navigation a {
	position: relative;
	display: block;
	padding: var(--sp-3) var(--sp-4);
	color: var(--c-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.03em;
	white-space: nowrap;
}
/* 香槟金下划线，hover 时从左展开——比色块底色克制得多 */
.main-navigation a::after {
	content: "";
	position: absolute;
	left: var(--sp-4);
	right: var(--sp-4);
	bottom: 4px;
	height: 1.5px;
	background: var(--c-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--transition);
}
.main-navigation a:hover { color: var(--c-ink); }
.main-navigation a:hover::after { transform: scaleX(1); }
.main-navigation .current-menu-item > a { color: var(--c-ink); }
.main-navigation .current-menu-item > a::after { transform: scaleX(1); }

/* 下拉子菜单 */
.main-navigation ul ul {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 208px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	padding: var(--sp-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: all var(--transition);
}
.main-navigation ul li:hover > ul,
.main-navigation ul li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
/* 子菜单项不要那条金线 */
.main-navigation ul ul a { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); }
.main-navigation ul ul a::after { display: none; }
.main-navigation ul ul a:hover { background: var(--c-surface-alt); color: var(--c-ink); }

/* 导航右侧动作区 */
.site-header__actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.header-search-toggle {
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border: 1px solid var(--c-line-strong);
	background: transparent;
	border-radius: var(--radius-sm);
	color: var(--c-body);
	cursor: pointer;
	transition: all var(--transition);
}
.header-search-toggle:hover { border-color: var(--c-gold); color: var(--c-gold); }

.nav-toggle {
	display: none;
	width: 42px; height: 42px;
	border: 1px solid var(--c-line-strong);
	background: transparent;
	border-radius: var(--radius-sm);
	cursor: pointer;
	padding: 0;
	place-items: center;
}
.nav-toggle span {
	display: block;
	width: 18px; height: 2px;
	background: var(--c-ink);
	border-radius: 2px;
	position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px; height: 2px;
	background: var(--c-ink);
	border-radius: 2px;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

.header-search {
	display: none;
	border-top: 1px solid var(--c-line);
	background: var(--c-surface-alt);
	padding: var(--sp-4) 0;
}
.header-search.is-open { display: block; }

@media (max-width: 900px) {
	.nav-toggle { display: grid; }
	.main-navigation {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--c-surface);
		border-bottom: 1px solid var(--c-line);
		box-shadow: var(--shadow-md);
		display: none;
		padding: var(--sp-3) var(--sp-5) var(--sp-5);
	}
	.site-header__inner { position: relative; }
	.main-navigation.is-open { display: block; }
	.main-navigation ul { flex-direction: column; align-items: stretch; gap: 0; }
	.main-navigation ul ul {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--c-line);
		border-radius: 0;
		padding: 0 0 0 var(--sp-3);
		margin-left: var(--sp-4);
	}
	.main-navigation a { padding: var(--sp-3) var(--sp-2); }
}

/* ==========================================================================
   6. 通用组件
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: 14px var(--sp-6);
	/* 直角感更强的 8px 圆角 + 字距，比全圆角"胶囊按钮"更接近高端杂志调性 */
	border-radius: var(--radius);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all var(--transition);
	white-space: nowrap;
}
.btn--primary {
	background: linear-gradient(160deg, var(--c-brand) 0%, var(--c-brand-dark) 100%);
	color: #fff;
	box-shadow: 0 6px 18px rgba(13, 95, 107, 0.24);
}
.btn--primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(13, 95, 107, 0.3); }
/* 香槟金按钮：留给"站长推荐"这类需要抬价感的场景 */
.btn--gold {
	background: linear-gradient(160deg, var(--c-gold-light) 0%, var(--c-gold) 100%);
	color: #fff;
	box-shadow: var(--shadow-gold);
}
.btn--gold:hover { color: #fff; transform: translateY(-1px); }
.btn--hot { background: var(--c-hot); color: #fff; box-shadow: 0 6px 18px rgba(197, 48, 72, 0.24); }
.btn--hot:hover { background: #ad2a40; color: #fff; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line-strong); }
.btn--ghost:hover { border-color: var(--c-ink); color: var(--c-ink); background: var(--c-surface); }
.btn--block { width: 100%; }
.btn--sm { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }

/* 徽标：改为细描边 + 淡底，避免大片高饱和色块拉低质感 */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: 4px;
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	white-space: nowrap;
	border: 1px solid transparent;
}
.badge--hot { background: var(--c-hot-soft); color: var(--c-hot); border-color: rgba(197, 48, 72, 0.18); }
.badge--gold { background: var(--c-gold-soft); color: var(--c-gold); border-color: var(--c-gold-line); }
.badge--brand { background: var(--c-brand-soft); color: var(--c-brand); border-color: var(--c-brand-line); }
.badge--green { background: var(--c-green-soft); color: var(--c-green); border-color: rgba(26, 122, 92, 0.18); }
.badge--solid { background: var(--c-hot); color: #fff; }

/* 章节标题 */
.section { margin-bottom: var(--sp-16); }
.section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-8);
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--c-line);
	position: relative;
}
/* 章节线左端压一段香槟金短线，作为视觉锚点 */
.section__head::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 48px;
	height: 2px;
	background: var(--c-gold);
}
.section__title {
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	font-weight: 700;
	letter-spacing: -0.02em;
}
/* 图标不再包色块，只留一个细线图标，更干净 */
.section__title .ico {
	display: inline-flex;
	align-items: center;
	color: var(--c-gold);
	flex: none;
}
.section--hot .section__title .ico { color: var(--c-hot); }
.section--gold .section__title .ico { color: var(--c-gold); }
.section__subtitle {
	margin: 6px 0 0;
	font-size: var(--fs-sm);
	color: var(--c-muted);
	font-weight: 400;
	letter-spacing: 0.02em;
}
.section__more {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-muted);
	flex: none;
	letter-spacing: 0.03em;
	transition: color var(--transition);
}
.section__more:hover { color: var(--c-gold); }

/* 卡片基础 */
.card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: all var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--c-line-strong); }

/*
 * 防御性规则：以下元素都是 <a> 包图片的媒体容器。
 * <a> 默认是 inline，width / aspect-ratio / overflow 都不生效，
 * 一旦它们不是 flex/grid 子项（无法被 blockify）就会出现高度塌陷。
 * 这里统一显式声明为 block，避免以后调整父容器布局时踩坑。
 */
.p-card__media,
.post-card__media,
.mini-card__media,
.reco-card__thumb,
.rank-item__thumb,
.hero-board__thumb,
.side-reco__thumb,
.podium-card__thumb {
	display: block;
}

/*
 * 媒体容器：图片一律绝对定位填充。
 *
 * 为什么不靠 img 自己撑：容器用 aspect-ratio 定高，但 <img> 留在文档流里时，
 * 它的固有尺寸会参与父级内容高度计算。回退到"正文首图"后图片比例不可控，
 * 一张竖构图或超宽图就会把整张卡片撑高——实测竖图会让卡片高出约 25%，
 * 同一列表里卡片高度参差不齐。
 * 绝对定位后图片完全脱离布局，容器高度只由 aspect-ratio 决定，
 * 无论源图什么比例，卡片高度都一致，图片按 object-fit 裁切。
 */
.p-card__media,
.post-card__media,
.mini-card__media,
.reco-card__thumb,
.rank-item__thumb,
.hero-board__thumb,
.side-reco__thumb,
.podium-card__thumb {
	position: relative;
}

.p-card__media img,
.post-card__media img,
.mini-card__media img,
.reco-card__thumb img,
.rank-item__thumb img,
.hero-board__thumb img,
.side-reco__thumb img,
.podium-card__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   7. 产品卡片
   ========================================================================== */
.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--sp-5);
}

.p-card {
	display: flex;
	flex-direction: column;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: all var(--transition);
	position: relative;
}
.p-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
	border-color: var(--c-line-strong);
}

.p-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: linear-gradient(160deg, #eef4f5 0%, #e3ecee 100%);
	overflow: hidden;
}
.p-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.p-card:hover .p-card__media img { transform: scale(1.05); }
.p-card__placeholder {
	width: 100%; height: 100%;
	display: grid; place-items: center;
	color: var(--c-brand-line);
}
.p-card__flag {
	position: absolute;
	top: var(--sp-3);
	left: var(--sp-3);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-1);
	z-index: 2;
}
.p-card__rank {
	position: absolute;
	top: var(--sp-3);
	right: var(--sp-3);
	width: 30px; height: 30px;
	border-radius: 9px;
	display: grid; place-items: center;
	font-size: var(--fs-sm);
	font-weight: 800;
	background: rgba(16, 24, 40, 0.72);
	color: #fff;
	backdrop-filter: blur(4px);
	z-index: 2;
}
.p-card__rank.is-top1 { background: linear-gradient(135deg, #f4b740, #d98a11); box-shadow: 0 4px 10px rgba(217, 138, 17, 0.4); }
.p-card__rank.is-top2 { background: linear-gradient(135deg, #b9c2cc, #8b96a3); }
.p-card__rank.is-top3 { background: linear-gradient(135deg, #d39668, #b1703f); }

.p-card__body {
	padding: var(--sp-5);
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	flex: 1;
}
.p-card__cat {
	font-size: var(--fs-xs);
	color: var(--c-muted);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.p-card__title {
	margin: 0;
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.9em;
}
.p-card__title a { color: var(--c-ink); }
.p-card__title a:hover { color: var(--c-brand); }
.p-card__desc {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--c-muted);
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.p-card__meta {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	font-size: var(--fs-xs);
	color: var(--c-muted);
	flex-wrap: wrap;
}

.p-card__foot {
	margin-top: auto;
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
}
.p-card__price { display: flex; align-items: baseline; gap: var(--sp-2); }
.price-now {
	color: var(--c-hot);
	font-size: var(--fs-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.price-now .unit { font-size: var(--fs-sm); font-weight: 600; }
.price-was {
	color: var(--c-muted);
	font-size: var(--fs-xs);
	text-decoration: line-through;
}
/* 描边按钮，hover 才填色——比实心彩色块克制得多 */
.p-card__buy {
	flex: none;
	padding: 9px var(--sp-4);
	border-radius: var(--radius);
	background: transparent;
	color: var(--c-ink);
	border: 1px solid var(--c-line-strong);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	transition: all var(--transition);
}
.p-card__buy:hover { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

/* 评分：双层叠加实现小数星 */
.rating { display: inline-flex; align-items: center; gap: 3px; }
.rating__stars { position: relative; display: inline-flex; line-height: 0; }
.rating__layer { display: inline-flex; gap: 1px; white-space: nowrap; }
.rating__layer svg { width: 13px; height: 13px; flex: none; }
.rating__layer--bg { color: #dfe4ea; }
.rating__layer--bg svg { fill: #dfe4ea; }
.rating__layer--fg {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: var(--c-gold);
}
.rating__layer--fg svg { fill: var(--c-gold); }
.rating__score { color: var(--c-ink); font-weight: 700; font-size: var(--fs-xs); margin-left: 3px; }

/* ==========================================================================
   8. 热销排行榜
   ========================================================================== */
.rank-board {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-item {
	display: flex;
	gap: var(--sp-4);
	align-items: center;
	padding: var(--sp-4);
	margin: 0;
	border-bottom: 1px solid var(--c-line);
	transition: background var(--transition);
}
.rank-item:last-child { border-bottom: 0; }
.rank-item:hover { background: var(--c-surface-alt); }
/* 前三名用香槟金而非亮红打底：同为"强调"，但金比红更显贵 */
.rank-item--head {
	background: linear-gradient(90deg, rgba(166, 128, 62, 0.07) 0%, rgba(166, 128, 62, 0) 72%);
}
.rank-item__no {
	flex: none;
	width: 34px;
	text-align: center;
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: 700;
	font-style: italic;
	color: var(--c-muted);
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}
.rank-item--head .rank-item__no { color: var(--c-gold); }
.rank-item__thumb {
	flex: none;
	width: 72px; height: 72px;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-surface-alt);
	box-shadow: inset 0 0 0 1px var(--c-line);
}
.rank-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.rank-item__main { flex: 1; min-width: 0; }
.rank-item__title {
	margin: 0 0 5px;
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.45;
}
.rank-item__title a { color: var(--c-ink); }
.rank-item__title a:hover { color: var(--c-brand); }
.rank-item__meta {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	font-size: var(--fs-xs);
	color: var(--c-muted);
	flex-wrap: wrap;
}
.rank-item__hot svg { width: 12px; height: 12px; vertical-align: -1px; }
.rank-item__side { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
@media (max-width: 560px) {
	.rank-item { padding: var(--sp-3); gap: var(--sp-3); }
	.rank-item__thumb { width: 56px; height: 56px; }
	.rank-item__side .price-now { font-size: var(--fs-lg); }
}

/* 排行榜三甲条 */
.rank-podium {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-5);
	padding: var(--sp-8) var(--sp-6) var(--sp-6);
	background: linear-gradient(180deg, rgba(166, 128, 62, 0.05) 0%, var(--c-surface) 78%);
	border-bottom: 1px solid var(--c-line);
}
.podium-card { text-align: center; position: relative; }
.podium-card__crown {
	width: 26px; height: 26px;
	margin: 0 auto var(--sp-3);
	border-radius: 50%;
	display: grid; place-items: center;
	color: #fff;
	font-size: var(--fs-xs);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.podium-card:nth-child(1) .podium-card__crown { background: linear-gradient(135deg, #d9b45f, #a6803e); box-shadow: 0 4px 12px rgba(166, 128, 62, 0.35); }
.podium-card:nth-child(2) .podium-card__crown { background: linear-gradient(135deg, #b3bcc4, #838e97); }
.podium-card:nth-child(3) .podium-card__crown { background: linear-gradient(135deg, #c08d5f, #94643c); }
.podium-card__thumb {
	display: block;
	width: 100%; aspect-ratio: 1; border-radius: var(--radius);
	overflow: hidden; background: var(--c-surface-alt); margin-bottom: var(--sp-3);
	box-shadow: inset 0 0 0 1px var(--c-line);
}
.podium-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.podium-card__title { font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; }
.podium-card__title a { color: var(--c-ink); }
.podium-card__title a:hover { color: var(--c-brand); }
@media (max-width: 560px) { .rank-podium { gap: var(--sp-3); padding: var(--sp-5) var(--sp-4); } }

/* ==========================================================================
   9. 站长推荐
   ========================================================================== */
.reco-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--sp-5);
}
.reco-card {
	display: flex;
	gap: var(--sp-4);
	padding: var(--sp-5);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	position: relative;
	transition: all var(--transition);
}
/* 推荐位是香槟金的主场：hover 才亮出金边框 */
.reco-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--c-gold-line); }
.reco-card__thumb {
	flex: none;
	width: 96px; height: 96px;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-surface-alt);
	box-shadow: inset 0 0 0 1px var(--c-line);
}
.reco-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.reco-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.reco-card__editor {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: var(--fs-xs);
	color: var(--c-gold);
	font-weight: 700;
	letter-spacing: 0.1em;
}
.reco-card__editor svg { width: 13px; height: 13px; }
.reco-card__title { margin: 0; font-size: var(--fs-base); font-weight: 700; line-height: 1.45; }
.reco-card__title a { color: var(--c-ink); }
.reco-card__title a:hover { color: var(--c-gold); }
.reco-card__quote {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--c-body);
	line-height: 1.7;
	border-left: 2px solid var(--c-gold-line);
	padding-left: var(--sp-3);
}
.reco-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: var(--sp-3); }
@media (max-width: 480px) { .reco-card { flex-direction: column; } .reco-card__thumb { width: 100%; height: 150px; } }

/* ==========================================================================
   10. 文章列表 / 博客
   ========================================================================== */
.post-list { display: flex; flex-direction: column; gap: var(--sp-5); }

.post-card {
	display: grid;
	grid-template-columns: 268px 1fr;
	gap: var(--sp-8);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: all var(--transition);
}
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--c-line-strong); }
.post-card__media {
	/*
	 * 这里刻意不用 aspect-ratio，也不要写 height:100%。
	 * 两者同时存在时，height 一旦确定，aspect-ratio 会反推出宽度
	 * （实测：高 267px → 宽 388px），而栅格轨道只有 260px，
	 * 媒体区就会向右溢出并压住正文。这是真实踩过的坑。
	 *
	 * 现在改成：靠 min-height 给一个高度下限，媒体区作为栅格子项
	 * 由 align-self:stretch 拉伸到行高（行高由正文列决定），
	 * 图片绝对定位铺满——既不溢出，也不留白边。
	 */
	min-height: 200px;
	background: linear-gradient(160deg, #eef2f3, #e3e8e9);
	overflow: hidden;
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: var(--sp-6) var(--sp-6) var(--sp-6) 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.post-card__cats { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.post-card__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; }
.post-card__title a { color: var(--c-ink); }
.post-card__title a:hover { color: var(--c-brand); }
.post-card__excerpt { margin: 0; color: var(--c-body); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.post-card__meta {
	display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
	font-size: var(--fs-xs); color: var(--c-muted);
	margin-top: auto; padding-top: var(--sp-2);
}
.post-card__meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--c-line-strong); }
.meta-item { display: inline-flex; align-items: center; gap: 5px; }
.meta-item svg { width: 13px; height: 13px; }

@media (max-width: 720px) {
	.post-card { grid-template-columns: 1fr; }
	/* 单列时图片区独占一行，此时没有行高可拉伸，用比例定高是安全的。 */
	.post-card__media { aspect-ratio: 16 / 9; min-height: 0; }
	.post-card__body { padding: var(--sp-5); }
}

/* 分页 */
.pagination { margin: var(--sp-10) 0 0; }
.pagination .nav-links { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; }
.pagination .page-numbers {
	display: grid; place-items: center;
	min-width: 40px; height: 40px;
	padding: 0 var(--sp-3);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	background: var(--c-surface);
	color: var(--c-body);
	font-size: var(--fs-sm);
	font-weight: 600;
}
.pagination .page-numbers:hover { border-color: var(--c-brand); color: var(--c-brand); }
.pagination .page-numbers.current { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.pagination .next, .pagination .prev { padding: 0 var(--sp-4); }

/* ==========================================================================
   11. 单篇文章 / 产品详情
   ========================================================================== */
.entry-header { margin-bottom: var(--sp-6); }
.entry-cats { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.entry-title {
	margin: 0 0 var(--sp-5);
	font-family: var(--font-display);
	font-size: var(--fs-4xl);
	line-height: 1.25;
	letter-spacing: -0.03em;
}
.entry-meta {
	display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
	font-size: var(--fs-sm); color: var(--c-muted);
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--c-line);
}
.entry-meta__author { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-body); font-weight: 600; }
.entry-meta__avatar { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; }
.entry-meta__avatar img { width: 100%; height: 100%; }

.entry-thumb {
	margin-bottom: var(--sp-8);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--c-surface);
	box-shadow: var(--shadow-sm);
}
.entry-content { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: #344054; }
.entry-content > * { margin-bottom: var(--sp-5); }
.entry-content h2 { margin-top: var(--sp-10); font-size: var(--fs-2xl); padding-left: var(--sp-4); border-left: 4px solid var(--c-brand); }
.entry-content h3 { margin-top: var(--sp-8); font-size: var(--fs-xl); }
.entry-content img { border-radius: var(--radius); box-shadow: var(--shadow-sm); margin: var(--sp-6) auto; }
.entry-content a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--c-brand-line); text-underline-offset: 3px; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content ul li { list-style: none; position: relative; padding-left: var(--sp-2); }
.entry-content ul li::before {
	content: ""; position: absolute; left: -16px; top: 10px;
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--c-brand); opacity: 0.6;
}
.entry-content blockquote { font-size: var(--fs-md); }
.entry-content figure { margin: var(--sp-6) 0; }
.entry-content figcaption, .wp-caption-text {
	font-size: var(--fs-xs); color: var(--c-muted); text-align: center; margin-top: var(--sp-2);
}
.alignleft { float: left; margin: 0 var(--sp-6) var(--sp-4) 0; }
.alignright { float: right; margin: 0 0 var(--sp-4) var(--sp-6); }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.entry-footer { margin-top: var(--sp-10); padding-top: var(--sp-6); border-top: 1px solid var(--c-line); }
.tag-cloud { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.tag-cloud__label { font-size: var(--fs-sm); color: var(--c-muted); }
.tag-link {
	display: inline-block;
	padding: 4px 12px;
	background: var(--c-surface-alt);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
	color: var(--c-body);
}
.tag-link:hover { background: var(--c-brand-soft); border-color: var(--c-brand-line); color: var(--c-brand); }

/* 作者框 */
.author-box {
	display: flex; gap: var(--sp-5);
	margin-top: var(--sp-8);
	padding: var(--sp-6);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
}
.author-box__avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; }
.author-box__avatar img { width: 100%; height: 100%; }
.author-box__name { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.author-box__bio { margin: 0; font-size: var(--fs-sm); color: var(--c-body); }

/* 上下篇 */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-8); }
.post-nav__item {
	padding: var(--sp-5);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	transition: all var(--transition);
}
.post-nav__item:hover { border-color: var(--c-brand-line); box-shadow: var(--shadow-sm); }
.post-nav__item--next { text-align: right; }
.post-nav__label { display: block; font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: var(--sp-2); }
.post-nav__title { font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink); line-height: 1.5; }
@media (max-width: 640px) { .post-nav { grid-template-columns: 1fr; } }

/* 相关文章 */
.related-posts { margin-top: var(--sp-12); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-5); }
.mini-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; transition: all var(--transition); }
.mini-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.mini-card__media { display: block; aspect-ratio: 16 / 10; background: #eef4f5; overflow: hidden; }
.mini-card__media img { width: 100%; height: 100%; object-fit: cover; }
.mini-card__body { padding: var(--sp-4); }
.mini-card__title { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); font-weight: 700; line-height: 1.5; }
.mini-card__title a { color: var(--c-ink); }
.mini-card__date { font-size: var(--fs-xs); color: var(--c-muted); }

/* ==========================================================================
   12. 产品详情页
   ========================================================================== */
.product-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sp-12);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: var(--sp-10);
	margin-bottom: var(--sp-10);
	align-items: start;
	box-shadow: var(--shadow-sm);
}
.product-hero__media {
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-surface-alt);
	aspect-ratio: 1;
	box-shadow: inset 0 0 0 1px var(--c-line);
	/* 详情信息很长时让主图跟随滚动，避免左侧留出大片空白。 */
	position: sticky;
	top: 108px;
}
.product-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.product-hero__title {
	margin: var(--sp-3) 0 var(--sp-5);
	font-family: var(--font-display);
	font-size: var(--fs-3xl);
	line-height: 1.28;
	letter-spacing: -0.025em;
}
.product-hero__subtitle { font-size: var(--fs-md); color: var(--c-body); margin-bottom: var(--sp-6); line-height: 1.8; }
.product-hero__flags { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-5); }

.price-panel {
	/* 淡到几乎只是一层暖色倾向的白，靠价格本身的绛红来承担强调 */
	background: linear-gradient(135deg, #fdf9f9 0%, #f9eff1 100%);
	border: 1px solid rgba(197, 48, 72, 0.14);
	border-radius: var(--radius);
	padding: var(--sp-5) var(--sp-6);
	margin-bottom: var(--sp-6);
	position: relative;
}
.price-panel__row { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.price-panel .price-now { font-size: var(--fs-4xl); font-weight: 700; }
.price-panel__save {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--c-hot);
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(197, 48, 72, 0.18);
	padding: 3px 10px;
	border-radius: 4px;
	letter-spacing: 0.04em;
	margin-left: var(--sp-2);
}
.price-panel__hint { margin: var(--sp-4) 0 0; font-size: var(--fs-xs); color: #9a5b64; }

.spec-list { display: grid; gap: 0; margin-bottom: var(--sp-6); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
.spec-list__row { display: flex; font-size: var(--fs-sm); border-bottom: 1px solid var(--c-line); }
.spec-list__row:last-child { border-bottom: 0; }
.spec-list__key { flex: none; width: 118px; padding: var(--sp-3) var(--sp-4); background: var(--c-surface-alt); color: var(--c-muted); font-weight: 600; letter-spacing: 0.02em; }
.spec-list__val { padding: var(--sp-3) var(--sp-4); color: var(--c-ink); flex: 1; }

.buy-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.buy-actions .btn { flex: 1; min-width: 150px; padding: var(--sp-4) var(--sp-6); font-size: var(--fs-base); }
.product-trust {
	display: flex; gap: var(--sp-6); flex-wrap: wrap;
	margin-top: var(--sp-6); padding-top: var(--sp-5);
	border-top: 1px solid var(--c-line);
}
.product-trust__item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--c-body); }
.product-trust__item svg { width: 15px; height: 15px; color: var(--c-gold); flex: none; }

@media (max-width: 860px) {
	.product-hero { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-5); }
	.product-hero__title { font-size: var(--fs-2xl); }
	.product-hero__media { position: static; }
}

/* 产品评分概览 */
.score-panel {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: var(--sp-6);
	align-items: center;
	background: var(--c-brand-soft);
	border-radius: var(--radius);
	padding: var(--sp-6);
	margin-bottom: var(--sp-8);
}
.score-panel__big { text-align: center; }
.score-panel__num { font-size: 52px; font-weight: 800; color: var(--c-brand); line-height: 1; letter-spacing: -0.03em; }
.score-panel__num small { font-size: var(--fs-md); color: var(--c-muted); font-weight: 600; }
.score-panel__label { font-size: var(--fs-xs); color: var(--c-body); margin-top: var(--sp-2); }
.score-bars { display: grid; gap: var(--sp-3); }
.score-bar { display: grid; grid-template-columns: 72px 1fr 36px; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); }
.score-bar__name { color: var(--c-body); }
.score-bar__track { height: 7px; background: rgba(255,255,255,0.75); border-radius: var(--radius-pill); overflow: hidden; }
.score-bar__fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--c-brand), var(--c-brand-dark)); }
.score-bar__val { text-align: right; font-weight: 700; color: var(--c-ink); }
@media (max-width: 640px) { .score-panel { grid-template-columns: 1fr; } }

/* 产品信息条 */
.product-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-4);
	margin-bottom: var(--sp-8);
}
.strip-item {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: var(--sp-4);
	text-align: center;
}
.strip-item__num { font-size: var(--fs-xl); font-weight: 800; color: var(--c-ink); letter-spacing: -0.02em; }
.strip-item__label { font-size: var(--fs-xs); color: var(--c-muted); margin-top: var(--sp-1); }
@media (max-width: 640px) { .product-strip { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   13. 侧边栏
   ========================================================================== */
.widget-area { display: flex; flex-direction: column; gap: var(--sp-6); position: sticky; top: 88px; }
.widget {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: var(--sp-5);
}
.widget__title {
	margin: 0 0 var(--sp-5);
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--c-line);
	letter-spacing: -0.01em;
}
/* 侧栏标题前压一小段香槟金短线，与主区章节标题同一语言 */
.widget__title::before {
	content: "";
	width: 15px;
	height: 2px;
	background: var(--c-gold);
	flex: none;
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget ul li {
	margin: 0;
	padding: var(--sp-3) 0;
	border-bottom: 1px dashed var(--c-line);
	font-size: var(--fs-sm);
	line-height: 1.6;
	display: flex;
	justify-content: space-between;
	gap: var(--sp-3);
}
.widget ul li:last-child { border-bottom: 0; }
.widget ul li a { color: var(--c-body); font-weight: 500; }
.widget ul li a:hover { color: var(--c-brand); }
.widget .count { color: var(--c-muted); font-size: var(--fs-xs); flex: none; }
.widget select, .widget input[type="text"], .widget input[type="search"], .widget input[type="email"] {
	width: 100%;
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	font-family: inherit;
}
.widget .tagcloud { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.widget .tagcloud a {
	padding: 4px 11px;
	background: var(--c-surface-alt);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs) !important;
	color: var(--c-body);
}
.widget .tagcloud a:hover { background: var(--c-brand-soft); color: var(--c-brand); border-color: var(--c-brand-line); }

/* 侧边产品 mini 榜 */
.side-rank { list-style: none; margin: 0; padding: 0; counter-reset: sr; }
.side-rank li {
	display: flex; gap: var(--sp-3); align-items: center;
	padding: var(--sp-4) 0; margin: 0;
	border-bottom: 1px solid var(--c-line);
}
.side-rank li:last-child { border-bottom: 0; }
.side-rank__no {
	flex: none; width: 22px; height: 22px; border-radius: 5px;
	display: grid; place-items: center;
	background: var(--c-surface-alt); color: var(--c-muted);
	font-size: var(--fs-xs); font-weight: 700;
	font-variant-numeric: tabular-nums;
}
/* 前三名统一走香槟金梯度，不用三套杂色 */
.side-rank li:nth-child(1) .side-rank__no { background: linear-gradient(135deg, #d9b45f, #a6803e); color: #fff; }
.side-rank li:nth-child(2) .side-rank__no { background: linear-gradient(135deg, #b3bcc4, #838e97); color: #fff; }
.side-rank li:nth-child(3) .side-rank__no { background: linear-gradient(135deg, #c08d5f, #94643c); color: #fff; }
.side-rank__main { flex: 1; min-width: 0; }
.side-rank__title { font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.side-rank__title a { color: var(--c-ink); }
.side-rank__title a:hover { color: var(--c-brand); }
.side-rank__price { font-size: var(--fs-xs); color: var(--c-hot); font-weight: 700; }

/* 侧栏推荐位 */
.side-reco { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.side-reco__item { display: flex; gap: var(--sp-3); margin: 0; padding: 0; border: 0; }
.side-reco__thumb {
	flex: none; width: 64px; height: 64px;
	border-radius: var(--radius-sm); overflow: hidden;
	background: #eef4f5; display: block;
}
.side-reco__thumb img { width: 100%; height: 100%; object-fit: cover; }
.side-reco__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.side-reco__title { font-size: var(--fs-sm); font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.side-reco__title a { color: var(--c-ink); }
.side-reco__title a:hover { color: var(--c-gold); }
.side-reco__quote { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.side-reco__price .price-now { font-size: var(--fs-base); }
.side-reco__price .price-was { display: none; }

/* 提示卡 */
.notice-card {
	background: var(--c-gold-soft);
	border: 1px solid var(--c-gold-line);
	border-radius: var(--radius);
	padding: var(--sp-5);
}
.notice-card p { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: #7a5b1d; line-height: 1.8; }
.notice-card p:last-child { margin-bottom: 0; }

/* 优缺点列表 */
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.pros-cons__box { border-radius: var(--radius); padding: var(--sp-5); border: 1px solid var(--c-line); }
.pros-cons__box--pros { background: #f2f8f5; border-color: #d3e7dc; }
.pros-cons__box--cons { background: #fdf5f6; border-color: #f0dade; }
.pros-cons__title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 800; margin-bottom: var(--sp-3); }
.pros-cons__box--pros .pros-cons__title { color: var(--c-green); }
.pros-cons__box--cons .pros-cons__title { color: var(--c-hot); }
.pros-cons__list { list-style: none; margin: 0; padding: 0; }
.pros-cons__list li { font-size: var(--fs-sm); line-height: 1.7; margin-bottom: var(--sp-2); padding-left: var(--sp-5); position: relative; color: var(--c-body); }
.pros-cons__list li::before {
	content: ""; position: absolute; left: 0; top: 9px;
	width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg);
}
.pros-cons__box--pros .pros-cons__list li::before { background: var(--c-green); opacity: 0.55; }
.pros-cons__box--cons .pros-cons__list li::before { background: var(--c-hot); opacity: 0.55; }
@media (max-width: 640px) { .pros-cons { grid-template-columns: 1fr; } }

/* 移动端底部购买栏 */
.buy-bar {
	display: none;
	position: fixed; left: 0; right: 0; bottom: 0;
	background: var(--c-surface);
	border-top: 1px solid var(--c-line);
	box-shadow: 0 -4px 20px rgba(16, 24, 40, 0.08);
	padding: var(--sp-3) var(--sp-4);
	z-index: 95;
	gap: var(--sp-3);
	align-items: center;
}
.buy-bar__price { flex: 1; }
.buy-bar__price .price-now { font-size: var(--fs-xl); }
.buy-bar .btn { flex: none; }
@media (max-width: 768px) {
	.single-product-view .buy-bar { display: flex; }
	.single-product-view .site-footer { padding-bottom: 84px; }
}

/* 搜索框 */
.search-form { display: flex; gap: var(--sp-2); }
.search-form input[type="search"] {
	flex: 1;
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	font-family: inherit;
}
.search-form input[type="submit"] {
	padding: var(--sp-3) var(--sp-5);
	background: var(--c-brand);
	color: #fff;
	border: 0;
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	transition: background var(--transition);
}
.search-form input[type="submit"]:hover { background: var(--c-brand-dark); }

/* ==========================================================================
   14. 归档头 / 空状态 / 404
   ========================================================================== */
.page-header {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: var(--sp-10) var(--sp-8);
	margin-bottom: var(--sp-10);
	position: relative;
	overflow: hidden;
}
/* 左缘一道向下淡出的香槟金竖线，比整块色底更含蓄 */
.page-header::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--c-gold) 0%, rgba(166, 128, 62, 0) 100%);
}
.page-header__eyebrow {
	font-size: 11px;
	font-weight: 700;
	color: var(--c-gold);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: var(--sp-3);
}
.page-header__title {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-display);
	font-size: var(--fs-3xl);
	letter-spacing: -0.025em;
}
.page-header__desc { margin: 0; color: var(--c-body); font-size: var(--fs-sm); max-width: 70ch; line-height: var(--lh-relaxed); }
.archive-taxonomy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); }

.empty-state { text-align: center; padding: var(--sp-16) var(--sp-5); background: var(--c-surface); border: 1px dashed var(--c-line-strong); border-radius: var(--radius-lg); }
.empty-state__icon { width: 64px; height: 64px; margin: 0 auto var(--sp-5); border-radius: 50%; background: var(--c-brand-soft); display: grid; place-items: center; color: var(--c-brand); }
.empty-state__title { margin: 0 0 var(--sp-2); font-size: var(--fs-xl); }
.empty-state__text { color: var(--c-muted); margin: 0 0 var(--sp-5); }

.error-404 { text-align: center; padding: var(--sp-16) var(--sp-5); }
.error-404__code { font-size: 120px; font-weight: 800; line-height: 1; color: var(--c-brand-soft); letter-spacing: -0.04em; margin-bottom: var(--sp-4); }
.error-404__title { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }

/* ==========================================================================
   15. 页脚
   ========================================================================== */
.site-footer {
	background: linear-gradient(180deg, #070d10 0%, #0a1418 100%);
	color: #93a2a8;
	margin-top: var(--sp-20);
	position: relative;
}
/* 页脚顶边同样压一条香槟金细线，与 Hero 呼应 */
.site-footer::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(166,128,62,0) 0%, rgba(201,164,92,0.45) 50%, rgba(166,128,62,0) 100%);
}
.site-footer a { color: #b9c8cd; transition: color var(--transition); }
.site-footer a:hover { color: var(--c-gold-light); }
.footer-main {
	display: grid;
	grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
	gap: var(--sp-10);
	padding: var(--sp-20) 0 var(--sp-12);
}
.footer-brand__mark { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.footer-brand__mark .site-branding__mark { background: rgba(255, 255, 255, 0.06); }
.footer-brand__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.footer-brand__desc { font-size: var(--fs-sm); line-height: 1.9; max-width: 36ch; color: #8c9ba1; }
/* 页脚栏目标题用香槟金，是全站"贵气"最集中的一处 */
.footer-col__title {
	color: var(--c-gold-light);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	margin-bottom: var(--sp-5);
	text-transform: uppercase;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.footer-contact li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); line-height: 1.8; }
.footer-contact svg { width: 15px; height: 15px; margin-top: 5px; flex: none; color: var(--c-gold); opacity: 0.85; }
.footer-disclaimer {
	padding: var(--sp-6) 0;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	font-size: var(--fs-xs);
	line-height: 1.9;
	color: #7c8b91;
}
.copyright {
	padding: var(--sp-6) 0;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
	font-size: var(--fs-xs); color: #7c8b91; flex-wrap: wrap;
	letter-spacing: 0.03em;
}
@media (max-width: 900px) { .footer-main { grid-template-columns: 1fr 1fr; gap: var(--sp-8); padding: var(--sp-12) 0; } }
@media (max-width: 560px) { .footer-main { grid-template-columns: 1fr; } .copyright { flex-direction: column; align-items: flex-start; } }

/* 返回顶部 */
.to-top {
	position: fixed; right: var(--sp-6); bottom: var(--sp-6);
	width: 46px; height: 46px;
	border-radius: var(--radius);
	background: var(--c-ink);
	color: var(--c-gold-light);
	border: 1px solid rgba(201, 164, 92, 0.3);
	display: grid; place-items: center;
	cursor: pointer;
	box-shadow: var(--shadow-lg);
	opacity: 0; visibility: hidden;
	transform: translateY(10px);
	transition: all var(--transition);
	z-index: 90;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--c-ink-deep); border-color: var(--c-gold); }

/* ==========================================================================
   16. 评论
   ========================================================================== */
.comments-area { margin-top: var(--sp-12); padding-top: var(--sp-8); border-top: 1px solid var(--c-line); }
.comments-title { font-size: var(--fs-xl); margin-bottom: var(--sp-6); }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list ul.children { list-style: none; padding-left: var(--sp-8); }
.comment-body {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: var(--sp-5);
	margin-bottom: var(--sp-4);
}
.comment-author { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.comment-author img { border-radius: 50%; }
.comment-author .fn { font-weight: 700; color: var(--c-ink); font-style: normal; }
.comment-metadata { font-size: var(--fs-xs); color: var(--c-muted); }
.comment-content { font-size: var(--fs-sm); }
.comment-content p:last-child { margin-bottom: 0; }
.reply a { font-size: var(--fs-xs); font-weight: 700; }
.comment-form p { margin-bottom: var(--sp-4); }
.comment-form label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-2); color: var(--c-ink); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: var(--fs-sm);
}
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form .submit {
	background: var(--c-brand); color: #fff;
	border: 0; padding: var(--sp-3) var(--sp-8);
	border-radius: var(--radius-pill);
	font-weight: 700; cursor: pointer; font-family: inherit;
	font-size: var(--fs-sm);
	transition: background var(--transition);
}
.comment-form .submit:hover { background: var(--c-brand-dark); }

/* ==========================================================================
   16b. 面包屑 / 分类导航 / 首页小工具
   ========================================================================== */
.breadcrumbs {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	flex-wrap: wrap;
	font-size: var(--fs-xs);
	color: var(--c-muted);
	margin-bottom: var(--sp-6);
	letter-spacing: 0.03em;
}
.breadcrumbs a { color: var(--c-muted); }
.breadcrumbs a:hover { color: var(--c-gold); }
.breadcrumbs__sep { color: var(--c-line-strong); }
.breadcrumbs__current { color: var(--c-body); font-weight: 600; }

.cat-nav {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: var(--sp-4) var(--sp-5);
	margin-bottom: var(--sp-8);
	flex-wrap: wrap;
}
.cat-nav__label {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--c-ink);
	flex: none;
	padding-right: var(--sp-5);
	border-right: 1px solid var(--c-line);
	letter-spacing: 0.03em;
}
.cat-nav__label svg { color: var(--c-gold); }
.cat-nav__list { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cat-nav__item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 14px;
	border-radius: var(--radius);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-body);
	background: transparent;
	border: 1px solid var(--c-line);
	transition: all var(--transition);
}
.cat-nav__item:hover { color: var(--c-ink); border-color: var(--c-line-strong); background: var(--c-surface-alt); }
/* 选中态用墨色而非品牌色，整页只有一个强调色更显克制 */
.cat-nav__item.is-active { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.cat-nav__count { font-size: 11px; opacity: 0.65; font-variant-numeric: tabular-nums; }

.widget-home {
	background:
		radial-gradient(600px 300px at 90% -30%, rgba(13, 95, 107, 0.45) 0%, rgba(13, 95, 107, 0) 70%),
		linear-gradient(120deg, #0e181d 0%, #070d10 100%);
	border: 1px solid rgba(201, 164, 92, 0.24);
	border-radius: var(--radius-lg);
	padding: var(--sp-8) var(--sp-10);
	color: #fff;
	margin-bottom: var(--sp-16);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
	flex-wrap: wrap;
}
.widget-home a { color: var(--c-gold-light); text-decoration: underline; text-underline-offset: 3px; }
.widget-home__title { color: #fff; margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: var(--fs-xl); }
.widget-home p { margin: 0; font-size: var(--fs-sm); color: #a3b0b6; }
.widget-home .widget,
.widget-home .widget__title { background: none; border: 0; color: #fff; }

/* ==========================================================================
   16c. 首页 Hero
   ========================================================================== */
.home-wrap { padding-top: 0; }

/*
 * Hero 用深墨底 + 两处低饱和光晕，是全站视觉重心的来源。
 * 深底让后续的浅色内容区形成强烈对比，是"大气"最直接的表达；
 * 光晕分冷暖两处（墨玉青 + 香槟金），避免大块死黑显得廉价。
 */
.hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(900px 460px at 88% -14%, rgba(13, 95, 107, 0.5) 0%, rgba(13, 95, 107, 0) 62%),
		radial-gradient(760px 420px at 2% 112%, rgba(166, 128, 62, 0.24) 0%, rgba(166, 128, 62, 0) 64%),
		linear-gradient(158deg, #0e181d 0%, #070d10 56%, #0a1418 100%);
	color: #dfe6e8;
	padding: var(--sp-20) 0;
	margin-bottom: var(--sp-16);
}
/* 顶部一条极细的香槟金渐变线 */
.hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		rgba(166, 128, 62, 0) 0%,
		rgba(201, 164, 92, 0.6) 50%,
		rgba(166, 128, 62, 0) 100%
	);
}
.hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
	gap: var(--sp-12);
	align-items: center;
	position: relative;
	z-index: 1;
}
.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 6px 14px;
	border-radius: 4px;
	background: rgba(201, 164, 92, 0.08);
	border: 1px solid rgba(201, 164, 92, 0.32);
	color: var(--c-gold-light);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: var(--sp-6);
}
.hero__title {
	font-family: var(--font-display);
	font-size: var(--fs-4xl);
	line-height: 1.22;
	letter-spacing: -0.03em;
	color: #fff;
	margin-bottom: var(--sp-6);
}
/* 香槟金渐变字，用于副标题行程 */
.hero__title-accent {
	display: inline-block;
	background: linear-gradient(100deg, var(--c-gold-light) 0%, #e8d3a4 48%, var(--c-gold) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--c-gold-light);
}
.hero__desc {
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: #a3b0b6;
	max-width: 50ch;
	margin-bottom: var(--sp-8);
}
.hero__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-10); }
.hero__actions .btn { padding: var(--sp-4) var(--sp-8); font-size: var(--fs-base); }
/* 深底上的幽灵按钮要改用浅色描边，否则几乎看不见 */
.hero__actions .btn--ghost { color: #e8eef0; border-color: rgba(255, 255, 255, 0.22); background: transparent; }
.hero__actions .btn--ghost:hover { color: #fff; border-color: var(--c-gold-light); background: rgba(255, 255, 255, 0.05); }

.hero__stats {
	display: flex;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.hero__stats li {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-right: var(--sp-8);
	margin-right: var(--sp-8);
	/* 细竖线分隔，比横排数字堆叠更有秩序感 */
	border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.hero__stats li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero__stats strong {
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	color: #fff;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.hero__stats span { font-size: var(--fs-xs); color: #7f8f96; letter-spacing: 0.06em; }

/* 右侧榜单做成一整块"深色玻璃"面板，与 Hero 同色系融合而非浮白卡片 */
.hero__board {
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-lg);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 32px 64px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}
.hero-board__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-5);
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.hero-board__title {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--c-gold-light);
	letter-spacing: 0.06em;
}
.hero-board__head a { font-size: var(--fs-xs); font-weight: 600; color: #8b9aa1; letter-spacing: 0.04em; }
.hero-board__head a:hover { color: var(--c-gold-light); }
.hero-board__list { list-style: none; margin: 0; padding: var(--sp-2) 0; }
.hero-board__list li {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-5);
	margin: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	transition: background var(--transition);
}
.hero-board__list li:last-child { border-bottom: 0; }
.hero-board__list li:hover { background: rgba(255, 255, 255, 0.04); }
.hero-board__no {
	flex: none;
	width: 24px; height: 24px;
	border-radius: 6px;
	display: grid; place-items: center;
	font-size: var(--fs-xs);
	font-weight: 800;
	font-style: italic;
	background: rgba(255, 255, 255, 0.07);
	color: #96a4aa;
}
.hero-board__list li:nth-child(1) .hero-board__no { background: linear-gradient(135deg, #d9b45f, #a6803e); color: #fff; }
.hero-board__list li:nth-child(2) .hero-board__no { background: linear-gradient(135deg, #b3bcc4, #838e97); color: #fff; }
.hero-board__list li:nth-child(3) .hero-board__no { background: linear-gradient(135deg, #c08d5f, #94643c); color: #fff; }
.hero-board__thumb {
	flex: none; width: 48px; height: 48px;
	border-radius: var(--radius-sm); overflow: hidden;
	background: rgba(255, 255, 255, 0.06); display: block;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.hero-board__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hero-board__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hero-board__name {
	font-size: var(--fs-sm); font-weight: 600; color: #e9eff1; line-height: 1.4;
	display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-board__name:hover { color: var(--c-gold-light); }
.hero-board__meta { display: flex; align-items: center; gap: var(--sp-2); }
.hero-board__meta em { font-size: var(--fs-xs); color: #7f8f96; font-style: normal; }
.hero-board__price { flex: none; }
/* 深底上用亮红对比度不足，价格改用香槟金更清晰也更贵气 */
.hero-board__price .price-now { font-size: var(--fs-md); color: var(--c-gold-light); }
.hero-board__price .price-was { display: none; }

.home-banner-area { margin-bottom: var(--sp-12); }

@media (max-width: 1024px) {
	.hero__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
	.hero { padding: var(--sp-10) 0; }
	.hero__title { font-size: var(--fs-3xl); }
}
@media (max-width: 560px) {
	.hero__stats { gap: var(--sp-6); }
	.hero__stats strong { font-size: var(--fs-xl); }
	.hero__actions .btn { flex: 1; }
}

/* ==========================================================================
   17. WordPress 核心对齐类
   ========================================================================== */
.wp-caption { max-width: 100%; }
.sticky .post-card { border-color: var(--c-brand-line); box-shadow: var(--shadow-sm); }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.gallery-item { margin: 0; }
.bypostauthor > .comment-body { border-left: 3px solid var(--c-brand); }

/* 打印 */
@media print {
	.site-header, .site-footer, .widget-area, .to-top, .topbar { display: none; }
	body { background: #fff; }
}