/**
 * Ethantheme Header / Footer 样式
 * ----------------------------------------------------
 * 依赖：tokens.css / components.css
 *
 * 结构：
 * .eth-header
 *   .eth-header__inner (eth-container, flex)
 *     .eth-header__logo
 *     .eth-header__nav
 *       .eth-menu (ul)
 *         .eth-menu-item (li)
 *           .eth-menu-link (a)
 *           .eth-menu-toggle (button, has-children 时出现)
 *           .eth-sub-menu (ul, 二级)
 *             .eth-sub-menu--nested (ul, 三级侧展开)
 *           .eth-mega-menu (div, mega menu 预留)
 *     .eth-header__actions
 *       .eth-header__cta (eth-btn)
 *     .eth-header__toggle (移动端汉堡)
 * .eth-modal (FluentForm 模态)
 * .eth-footer
 *   .eth-footer__inner
 *     .eth-footer__main (grid 4 col)
 *     .eth-footer__bottom
 */

/* =========================================================
 * 1. Header 容器
 * ========================================================= */
:root {
	/* 默认与 1350px 容器对齐；Customizer 动态 CSS 会覆盖此半宽。 */
	--eth-mega-content-half: 675px;
}

.eth-header {
	position: relative;
	z-index: var(--eth-z-header);
	background: var(--eth-bg-surface);
	border-bottom: 1px solid var(--eth-border);
	width: 100%;
	--eth-header-mobile-height: 5rem;
	--eth-mega-page-gutter: clamp(1.25rem, 2vw, 2.5rem);
	--eth-mega-column-gap: clamp(1rem, 2vw, 1.75rem);
	--eth-mega-panel-bg: var(--eth-bg-surface);
	--eth-mega-panel-border: color-mix(in srgb, var(--eth-border) 82%, transparent);
	--eth-mega-panel-shadow: 0 22px 55px rgba(15, 23, 42, 0.11);
	--eth-mega-panel-radius: var(--eth-radius-l);
	--eth-mega-mobile-indent: 0.75rem;
	--eth-menu-drawer-submenu-bg: transparent;
	/* 1.3.12：Mega 富单元格 token（cell_type 驱动） */
	--eth-mega-card-pad: var(--eth-space-2xs);    /* 卡片内边距 */
	--eth-mega-card-ratio: 4 / 3;                 /* 卡片图默认比例；变体类可覆盖 */
	--eth-mega-promo-min: 220px;                  /* promo 列最小宽度 */
	--eth-mega-promo-ratio: 16 / 9;               /* promo 图默认比例 */
}

.eth-header--sticky {
	position: sticky;
	top: 0;
	transition: box-shadow var(--eth-transition-m),
		background var(--eth-transition-m);
}

.eth-header--sticky.eth-header--scrolled {
	box-shadow: var(--eth-shadow-m);
}

.eth-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--eth-space-m);
	padding-block: var(--eth-space-xs);
	min-height: 6rem;
}

/* =========================================================
 * 2. Logo
 * ========================================================= */
.eth-header__logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.eth-header__logo img {
	max-height: 4rem;
	width: auto;
}

.eth-header__logo-text {
	font-size: var(--eth-fs-h4);
	font-weight: var(--eth-fw-bold);
	color: var(--eth-text-title);
	text-decoration: none;
}

/* =========================================================
 * 3. 主导航
 * ========================================================= */
.eth-header__nav {
	flex: 1;
	display: flex;
	justify-content: center;
	/* 0.8.1：不再作为 mega 面板的定位上下文。
	   若在此设 position:relative，面板的 left:0/right:0/width:100% 会被限制在
	   nav 自身宽度（flex:1 剩余空间 ≈ 980px），而非全宽。
	   定位上下文改为 .eth-header（全宽），见 .eth-menu-item--mega 面板规则。 */
}

.eth-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--eth-space-xs);
}

.eth-menu-item {
	position: relative;
	display: flex;
	align-items: center;
}

.eth-menu-link {
	display: flex;
	align-items: center;
	padding: 0.6em 0.9em;
	color: var(--eth-text-title);
	font-size: var(--eth-fs-small);
	font-weight: var(--eth-fw-medium);
	text-decoration: none;
	border-radius: var(--eth-radius-s);
	transition: color var(--eth-transition-s),
		background var(--eth-transition-s);
}

.eth-menu-link:hover,
.eth-menu-link[aria-current="page"] {
	color: var(--eth-primary);
	background: var(--eth-primary-5);
}

/* 子菜单展开按钮（桌面隐藏，移动端显示） */
.eth-menu-toggle {
	display: none;
	background: transparent;
	border: 0;
	padding: 0.4em;
	cursor: pointer;
	color: inherit;
}

/* =========================================================
 * 4. 二级菜单（横向下拉）
 * ========================================================= */
.eth-sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: min(15rem, calc(100vw - 2rem));
	max-height: min(70vh, 32rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--eth-bg-surface);
	border: 1px solid var(--eth-mega-panel-border);
	border-radius: 0.9rem;
	box-shadow: var(--eth-mega-panel-shadow);
	padding: 0.5rem;
	margin: 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--eth-transition-s),
		visibility var(--eth-transition-s),
		transform var(--eth-transition-s);
	z-index: var(--eth-z-dropdown);
}

.eth-menu-item--has-children:hover > .eth-sub-menu,
.eth-menu-item--has-children:focus-within > .eth-sub-menu,
.eth-menu-item--has-children.is-expanded > .eth-sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.eth-sub-menu .eth-menu-item {
	width: 100%;
}

.eth-sub-menu .eth-menu-link {
	min-height: 2.75rem;
	padding: 0.6rem 0.75rem;
	width: 100%;
	border-radius: var(--eth-radius-s);
}

/* =========================================================
 * 5. 三级菜单（侧向展开）
 * ========================================================= */
.eth-sub-menu--nested {
	top: 0;
	left: 100%;
	transform: translateX(-8px);
	margin-left: var(--eth-space-2xs);
}

.eth-menu-item--has-children:hover > .eth-sub-menu--nested,
.eth-menu-item--has-children:focus-within > .eth-sub-menu--nested,
.eth-menu-item--has-children.is-expanded > .eth-sub-menu--nested {
	transform: translateX(0);
}

/* =========================================================
 * 6. Mega Menu 预留
 * --------------------------------------------------------
 * 当 .eth-menu-item--mega 存在时，.eth-mega-menu 容器全宽下拉
 * 实际内容由 filter 注入
 * ========================================================= */
.eth-menu-item--mega {
	position: static;
}

/* =========================================================
 * 7. CTA 按钮
 * ========================================================= */
.eth-header__actions {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--eth-space-xs);
}

.eth-header__cta {
	white-space: nowrap;
}

/* ---- Header 搜索图标 + 下拉 ---- */
.eth-header__search {
	position: relative;
	flex-shrink: 0;
}

.eth-header__search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	font-size: 1.05rem;
	line-height: 1;
	color: var(--eth-text-title);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--eth-radius-m);
	cursor: pointer;
	transition: color var(--eth-transition-s), background var(--eth-transition-s), border-color var(--eth-transition-s);
}

.eth-header__search-toggle:hover {
	color: var(--eth-primary);
	background: color-mix(in srgb, var(--eth-primary) 8%, transparent);
}

.eth-header__search-dropdown {
	position: absolute;
	top: calc(100% + 0.75rem);
	right: 0;
	width: min(24rem, 86vw);
	padding: 0.9rem;
	background: var(--eth-bg-surface);
	border: 1px solid var(--eth-border);
	border-radius: var(--eth-radius-l);
	box-shadow: var(--eth-shadow-tinted-md);
	z-index: var(--eth-z-header);
}

.eth-header__search-dropdown[hidden] {
	display: none;
}

/* ---- 移动端抽屉顶部搜索：桌面隐藏，抽屉（≤992px）顶部显示 ---- */
.eth-header__drawer-search {
	display: none;
}

@media (max-width: 992px) {
	/* 桌面图标+下拉在移动端隐藏，改用抽屉顶部搜索 */
	.eth-header__search {
		display: none;
	}

	.eth-header__drawer-search {
		display: block;
		margin-bottom: var(--eth-space-m);
	}
}

/* =========================================================
 * 8. 移动端汉堡按钮
 * ========================================================= */
.eth-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 8px;
}

.eth-header__toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--eth-text-title);
	border-radius: 2px;
	transition: transform var(--eth-transition-s),
		opacity var(--eth-transition-s);
}

.eth-header__toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.eth-header__toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}
.eth-header__toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================
 * 9. 响应式（移动端）
 * --------------------------------------------------------
 * 992px 以下隐藏横向菜单，显示汉堡
 * 导航变为竖向抽屉
 * ========================================================= */
@media (max-width: 992px) {
	.eth-header__toggle {
		display: flex;
	}

	.eth-header__nav {
		position: fixed;
		top: 6rem;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--eth-bg-surface);
		flex-direction: column;
		justify-content: flex-start;
		padding: var(--eth-space-m);
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform var(--eth-transition-m);
		z-index: var(--eth-z-header);
	}

	.eth-header__nav.is-open {
		transform: translateX(0);
	}

	.eth-menu {
		flex-direction: column;
		width: 100%;
		gap: 0;
	}

	.eth-menu-item {
		width: 100%;
		flex-wrap: wrap;
		border-bottom: 1px solid var(--eth-border);
	}

	.eth-menu-link {
		flex: 1;
		padding: var(--eth-space-xs) var(--eth-space-2xs);
		font-size: var(--eth-fs-body);
	}

	.eth-menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		padding: 0;
	}

	.eth-menu-toggle svg {
		transition: transform var(--eth-transition-s);
	}

	.eth-menu-item--has-children.is-expanded > .eth-menu-toggle svg {
		transform: rotate(180deg);
	}

	/* 移动端子菜单不再 absolute，改为展开式 */
	.eth-sub-menu,
	.eth-sub-menu--nested {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		min-width: 0;
		max-height: none;
		overflow: visible;
		padding: 0.25rem 0 0.5rem var(--eth-mega-mobile-indent);
		border-radius: 0;
		display: none;
		width: 100%;
	}

	.eth-sub-menu .eth-menu-item {
		border-bottom: 0;
	}

	.eth-menu-item--has-children.is-expanded > .eth-sub-menu,
	.eth-menu-item--has-children.is-expanded > .eth-sub-menu--nested {
		display: block;
	}

	.eth-mega-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: var(--eth-space-s);
		display: none;
	}

	.eth-menu-item--mega.is-expanded > .eth-mega-menu {
		display: block;
	}

	.eth-header__actions {
		order: -1;
	}
}

@media (max-width: 768px) {
	.eth-header__inner {
		min-height: 5rem;
		padding-block: var(--eth-space-2xs);
	}

	.eth-header__nav {
		top: 5rem;
	}
}

/* =========================================================
 * 10. FluentForm 模态弹窗
 * ========================================================= */
.eth-modal {
	position: fixed;
	inset: 0;
	z-index: var(--eth-z-modal);
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--eth-space-m);
}

.eth-modal.is-open {
	display: flex;
}

.eth-modal__overlay {
	position: absolute;
	inset: 0;
	background: hsla(0, 0%, 0%, 0.6);
	backdrop-filter: blur(4px);
}

.eth-modal__dialog {
	position: relative;
	background: var(--eth-bg-surface);
	border-radius: var(--eth-radius-l);
	box-shadow: var(--eth-shadow-xl);
	max-width: 560px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	padding: var(--eth-space-l);
	animation: eth-modal-in var(--eth-transition-m);
}

@keyframes eth-modal-in {
	from { transform: translateY(20px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

.eth-modal__close {
	position: absolute;
	top: var(--eth-space-s);
	right: var(--eth-space-s);
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: var(--eth-radius-full);
	background: var(--eth-dark-5);
	color: var(--eth-text-title);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--eth-transition-s);
}

.eth-modal__close:hover {
	background: var(--eth-dark-10);
}

.eth-modal__body {
	margin-top: var(--eth-space-s);
}

/* =========================================================
 * 11. Reusable Block 模式下的微调
 * --------------------------------------------------------
 * 当 Header/Footer 用 Reusable Block 时，移除默认 padding
 * 让用户在区块编辑器中完全控制布局
 * ========================================================= */
.eth-header--block .eth-header__inner,
.eth-footer--block {
	padding: 0;
}

.eth-header--block,
.eth-footer--block {
	background: transparent;
	border: 0;
}



/* =========================================================
 * 13. Header 预设样式（classic / split）
 * --------------------------------------------------------
 * .eth-header--classic  : 默认 flex，logo 左 / 菜单中 / CTA 右
 * .eth-header--split    : logo 左 / 菜单+CTA 右
 * ========================================================= */

/* --- Classic（默认，复用 .eth-header__inner 的 flex 布局） --- */
.eth-header--classic .eth-header__inner {
	flex-direction: row;
}

/* --- Split：logo 左 / 菜单+CTA 右 --- */
.eth-header--split .eth-header__inner {
	flex-direction: row;
}

.eth-header--split .eth-header__right {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--eth-space-m);
}

.eth-header--split .eth-header__nav {
	flex: 0 1 auto;
	justify-content: flex-end;
}

/* --- 移动端：split 退化为单行（logo 左 / CTA+汉堡 右） --- */
@media (max-width: 992px) {
	.eth-header--split .eth-header__inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	/* display:contents 让 right 的子项（cta）直接成为 inner 的 flex 项 */
	.eth-header--split .eth-header__right {
		display: contents;
	}

	/* nav 已由上方 @media (max-width:992px) 通用规则处理为 fixed 抽屉 */
}

/**
 * Ethantheme Header 新增预设样式补充
 * ----------------------------------------------------
 * 作为 header.css 的补充，保留 Minimal 预设和透明 Header 修饰状态：
 * 4. Minimal（极简：Logo 左 / 汉堡右）
 * Transparent（首页透明 Header 状态）
 *
 * 另含：进入动画、菜单错峰动画、滚动揭示动画
 * 全部使用 var(--eth-*) CSS 变量，flat 设计
 */

/* ============================================================
 * 预设4：Minimal（极简：Logo 左 / 汉堡右）
 * 无导航无 CTA，导航走抽屉
 * ============================================================ */
.eth-header--minimal .eth-header__inner {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.eth-header--minimal .eth-header__nav {
	display: flex;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(90vw, 380px);
	padding: 6rem var(--eth-space-m) var(--eth-space-m);
	background: var(--eth-bg-surface);
	box-shadow: var(--eth-shadow-xl);
	overflow-y: auto;
	transform: translateX(105%);
	transition: transform var(--eth-transition-m);
	z-index: var(--eth-z-header);
}
.eth-header--minimal .eth-header__nav.is-open {
	transform: translateX(0);
}
.eth-header--minimal .eth-menu {
	width: 100%;
	flex-direction: column;
	align-items: stretch;
}
.eth-header--minimal .eth-header__actions {
	display: none;
}
/* Minimal 始终显示汉堡按钮 */
.eth-header--minimal .eth-header__toggle {
	display: flex;
	position: relative;
	z-index: calc(var(--eth-z-header) + 1);
}

/* ============================================================
 * Transparent：首页透明 Header 状态
 * ------------------------------------------------------------
 * 透明只负责覆盖 Hero 的视觉状态，不重排 inner 的子项。
 * Classic / Split / Minimal / Utility 的布局由各自预设继续负责。
 * ============================================================ */
.eth-header--transparent {
	background: transparent;
	/* 保留边框占位，避免切换透明状态时 Header 高度发生跳动。 */
	border-bottom-color: transparent;
	box-shadow: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--eth-z-header);
}

.eth-header--transparent .eth-header__logo-text,
.eth-header--transparent .eth-menu-link,
.eth-header--transparent .eth-header__search-toggle {
	color: var(--eth-light);
}

.eth-header--transparent .eth-header__toggle {
	/* polish.css 的实色按钮在 Hero 上会形成突兀色块。 */
	background: transparent;
	border-color: transparent;
}

.eth-header--transparent .eth-header__toggle span {
	background: var(--eth-light);
}

/* 滚动后恢复正常 Header 外观；仅启用 sticky 时固定在视口顶部。 */
.eth-header--transparent.eth-header--scrolled {
	background: var(--eth-bg-surface);
	border-bottom-color: var(--eth-border);
}

.eth-header--sticky.eth-header--transparent.eth-header--scrolled {
	position: fixed;
}

.eth-header--transparent.eth-header--scrolled .eth-header__logo-text,
.eth-header--transparent.eth-header--scrolled .eth-menu-link,
.eth-header--transparent.eth-header--scrolled .eth-header__search-toggle {
	color: var(--eth-text-title);
}

.eth-header--transparent.eth-header--scrolled .eth-header__toggle {
	background: var(--eth-bg-surface);
	border-color: var(--eth-premium-border, var(--eth-border));
}

.eth-header--transparent.eth-header--scrolled .eth-header__toggle span {
	background: var(--eth-text-title);
}

/* ============================================================
 * 首页透明 Header 的首屏安全区
 * ------------------------------------------------------------
 * 透明 Header 采用 absolute，不占文档流；首个主题 Hero 或 ETheme Block
 * Hero 的内容容器需要补足 Header 高度，背景舞台仍从页面顶部开始。
 * ============================================================ */
body.eth-transparent-header-home .eth-page__content > .eth-hero:first-child,
body.eth-transparent-header-home .eth-page__content > .etb-hero:first-child .etb-hero__container,
body.eth-transparent-header-home .eth-page__content > .etb-hero-block:first-child .etb-hero__container {
	padding-top: max(var(--eth-space-xl), calc(6rem + var(--eth-space-xs)));
}

body.eth-transparent-header-home.eth-transparent-header-spacing-compact .eth-page__content > .eth-hero:first-child,
body.eth-transparent-header-home.eth-transparent-header-spacing-compact .eth-page__content > .etb-hero:first-child .etb-hero__container,
body.eth-transparent-header-home.eth-transparent-header-spacing-compact .eth-page__content > .etb-hero-block:first-child .etb-hero__container {
	padding-top: max(var(--eth-space-xl), calc(5rem + var(--eth-space-xs)));
}

body.eth-transparent-header-home.eth-transparent-header-spacing-airy .eth-page__content > .eth-hero:first-child,
body.eth-transparent-header-home.eth-transparent-header-spacing-airy .eth-page__content > .etb-hero:first-child .etb-hero__container,
body.eth-transparent-header-home.eth-transparent-header-spacing-airy .eth-page__content > .etb-hero-block:first-child .etb-hero__container {
	padding-top: max(var(--eth-space-xl), calc(7rem + var(--eth-space-xs)));
}

/* Utility bar 在桌面端位于主 Header 之上；移动端会被隐藏。 */
body.eth-transparent-header-home.eth-transparent-header-utility .eth-page__content > .eth-hero:first-child,
body.eth-transparent-header-home.eth-transparent-header-utility .eth-page__content > .etb-hero:first-child .etb-hero__container,
body.eth-transparent-header-home.eth-transparent-header-utility .eth-page__content > .etb-hero-block:first-child .etb-hero__container {
	padding-top: max(var(--eth-space-xl), calc(8.5rem + var(--eth-space-xs)));
}

@media (max-width: 992px) {
	body.eth-transparent-header-home .eth-page__content > .eth-hero:first-child,
	body.eth-transparent-header-home .eth-page__content > .etb-hero:first-child .etb-hero__container,
	body.eth-transparent-header-home .eth-page__content > .etb-hero-block:first-child .etb-hero__container,
	body.eth-transparent-header-home.eth-transparent-header-spacing-compact .eth-page__content > .eth-hero:first-child,
	body.eth-transparent-header-home.eth-transparent-header-spacing-compact .eth-page__content > .etb-hero:first-child .etb-hero__container,
	body.eth-transparent-header-home.eth-transparent-header-spacing-compact .eth-page__content > .etb-hero-block:first-child .etb-hero__container,
	body.eth-transparent-header-home.eth-transparent-header-spacing-airy .eth-page__content > .eth-hero:first-child,
	body.eth-transparent-header-home.eth-transparent-header-spacing-airy .eth-page__content > .etb-hero:first-child .etb-hero__container,
	body.eth-transparent-header-home.eth-transparent-header-spacing-airy .eth-page__content > .etb-hero-block:first-child .etb-hero__container,
	body.eth-transparent-header-home.eth-transparent-header-utility .eth-page__content > .eth-hero:first-child,
	body.eth-transparent-header-home.eth-transparent-header-utility .eth-page__content > .etb-hero:first-child .etb-hero__container,
	body.eth-transparent-header-home.eth-transparent-header-utility .eth-page__content > .etb-hero-block:first-child .etb-hero__container {
		padding-top: max(var(--eth-space-xl), calc(5rem + var(--eth-space-xs)));
	}
}

/* ============================================================
 * Header 进入动画（统一）：fade-in-down
 * ============================================================ */
.eth-header:not(.eth-header--transparent) {
	animation: eth-header-enter 0.4s ease-out;
}
@keyframes eth-header-enter {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 菜单项错峰动画 */
.eth-menu > .eth-menu-item {
	animation: eth-menu-item-enter 0.3s ease-out backwards;
}
.eth-menu > .eth-menu-item:nth-child(1) { animation-delay: 0.05s; }
.eth-menu > .eth-menu-item:nth-child(2) { animation-delay: 0.1s; }
.eth-menu > .eth-menu-item:nth-child(3) { animation-delay: 0.15s; }
.eth-menu > .eth-menu-item:nth-child(4) { animation-delay: 0.2s; }
.eth-menu > .eth-menu-item:nth-child(5) { animation-delay: 0.25s; }
.eth-menu > .eth-menu-item:nth-child(6) { animation-delay: 0.3s; }
.eth-menu > .eth-menu-item:nth-child(n+7) { animation-delay: 0.35s; }

@keyframes eth-menu-item-enter {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 尊重 prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.eth-header,
	.eth-menu > .eth-menu-item {
		animation: none !important;
	}
}

/* ============================================================
 * 滚动揭示动画（通用，用于 section）
 * 配合 header.js 中的 IntersectionObserver 使用
 * ============================================================ */
/* 滚动揭示：元素进入视口时触发 */
.eth-reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.eth-reveal.eth-reveal--visible {
	opacity: 1;
	transform: translateY(0);
}
.eth-reveal--delay-1 { transition-delay: 0.1s; }
.eth-reveal--delay-2 { transition-delay: 0.2s; }
.eth-reveal--delay-3 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
	.eth-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* =========================================================
 * 8. Mega Menu（0.9.9）— 主题容器优先、可选全宽、抽屉手风琴
 * --------------------------------------------------------
 * 顶级菜单项类：
 *   eth-mega                         启用；无列数类时默认 4 列
 *   eth-mega-2 ... eth-mega-6       设置桌面最大列数
 *   eth-mega-full                    内容使用屏幕安全宽度（5/6 列推荐）
 * 面板背景始终全宽；默认内容与 --eth-container（1350px）对齐。
 * ========================================================= */
.eth-menu-item--mega {
	position: static;
	--eth-mega-columns: 4;
}

.eth-mega-2 { --eth-mega-columns: 2; }
.eth-mega-3 { --eth-mega-columns: 3; }
.eth-mega-4 { --eth-mega-columns: 4; }
.eth-mega-5 { --eth-mega-columns: 5; }
.eth-mega-6 { --eth-mega-columns: 6; }

.eth-menu-item--mega > .eth-sub-menu.eth-mega-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(var(--eth-mega-columns), minmax(0, 1fr));
	gap: var(--eth-mega-column-gap);
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
	padding-inline: max(
		var(--eth-mega-page-gutter),
		calc(50% - var(--eth-mega-content-half))
	);
	margin: 0;
	max-height: min(70vh, 42rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	background: var(--eth-mega-panel-bg);
	border: 1px solid var(--eth-mega-panel-border);
	border-radius: 0 0 var(--eth-mega-panel-radius) var(--eth-mega-panel-radius);
	box-shadow: var(--eth-mega-panel-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--eth-transition-m), visibility var(--eth-transition-m), transform var(--eth-transition-m);
	z-index: var(--eth-z-dropdown);
	pointer-events: none;
}

.eth-menu-item--mega.eth-mega-full > .eth-sub-menu.eth-mega-menu {
	padding-inline: var(--eth-mega-page-gutter);
}

.eth-menu-item--mega > .eth-sub-menu.eth-mega-menu::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--eth-primary), var(--eth-tertiary));
	opacity: 0.55;
}

.eth-menu-item--mega.is-mega-active > .eth-sub-menu.eth-mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* 1200–1439px 最多四列；993–1199px 最多三列。 */
@media (min-width: 1200px) and (max-width: 1439px) {
	.eth-mega-5,
	.eth-mega-6 { --eth-mega-columns: 4; }
}

@media (min-width: 993px) and (max-width: 1199px) {
	.eth-menu-item--mega { --eth-mega-columns: 3; }
	.eth-mega-2 { --eth-mega-columns: 2; }
}

.eth-mega-menu > .eth-menu-item {
	width: auto;
	min-width: 0;
	padding: 0;
	flex-direction: column;
	align-items: stretch;
}

.eth-mega-menu > .eth-menu-item > .eth-menu-link {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 2.75rem;
	padding: 0 0 0.75rem;
	margin-bottom: 0.55rem;
	width: auto;
	border-bottom: 1px solid var(--eth-mega-panel-border);
	border-radius: 0;
	color: var(--eth-text-title);
	font-size: 0.9rem;
	font-weight: 650;
	letter-spacing: 0.01em;
	line-height: 1.35;
	text-transform: none;
	white-space: normal;
}

.eth-mega-menu > .eth-menu-item > .eth-menu-link::before {
	content: "";
	flex: 0 0 3px;
	width: 3px;
	height: 1rem;
	border-radius: var(--eth-radius-full);
	background: var(--eth-primary);
	opacity: 0.7;
}

.eth-mega-menu > .eth-menu-item > .eth-menu-link:hover,
.eth-mega-menu > .eth-menu-item > .eth-menu-link[aria-current="page"] {
	color: var(--eth-primary);
	background: transparent;
}

.eth-mega-menu > .eth-menu-item > .eth-sub-menu--nested,
.eth-mega-menu .eth-sub-menu--nested .eth-sub-menu--nested {
	position: static;
	top: auto;
	left: auto;
	width: 100%;
	min-width: 0;
	max-height: none;
	overflow: visible;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.eth-mega-menu > .eth-menu-item > .eth-sub-menu--nested .eth-menu-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 2.75rem;
	padding: 0.55rem 0.65rem;
	margin: 0 0 0.1rem;
	width: 100%;
	border-radius: var(--eth-radius-s);
	color: var(--eth-text-body);
	font-size: 0.9rem;
	font-weight: 500;
	transition: color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.eth-mega-menu > .eth-menu-item > .eth-sub-menu--nested .eth-menu-link::after {
	content: "→";
	flex-shrink: 0;
	margin-left: 0.5rem;
	color: var(--eth-primary);
	font-size: 0.85em;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 200ms ease, transform 220ms ease;
}

.eth-mega-menu > .eth-menu-item > .eth-sub-menu--nested .eth-menu-link:hover,
.eth-mega-menu > .eth-menu-item > .eth-sub-menu--nested .eth-menu-link[aria-current="page"] {
	color: var(--eth-primary);
	background: color-mix(in srgb, var(--eth-primary) 7%, transparent);
}

.eth-mega-menu > .eth-menu-item > .eth-sub-menu--nested .eth-menu-link:hover::after,
.eth-mega-menu > .eth-menu-item > .eth-sub-menu--nested .eth-menu-link:focus-visible::after {
	opacity: 1;
	transform: translateX(0);
}

/* Mega 内链接跟随 Header 的四种 Hover 语言。 */
.eth-header--hover-text .eth-mega-menu .eth-sub-menu--nested .eth-menu-link:hover,
.eth-header--hover-underline .eth-mega-menu .eth-sub-menu--nested .eth-menu-link:hover,
.eth-header--hover-indicator .eth-mega-menu .eth-sub-menu--nested .eth-menu-link:hover {
	background: transparent;
}

.eth-header--hover-underline .eth-mega-menu .eth-sub-menu--nested .eth-menu-link:hover {
	border-radius: 0;
	box-shadow: inset 0 -1px currentColor;
}

.eth-header--hover-indicator .eth-mega-menu .eth-sub-menu--nested .eth-menu-link:hover {
	box-shadow: inset 3px 0 var(--eth-primary);
}

.eth-mega-menu .eth-menu-toggle {
	display: none;
}

@media (min-width: 993px) and (hover: none) {
	.eth-menu--primary > .eth-menu-item--has-children > .eth-menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 40px;
		width: 40px;
		height: 40px;
		padding: 0;
	}
}

/* Drawer 模式：≤992px 以及所有宽度的 Minimal Header。 */
:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-header__nav {
	transform: none;
	clip-path: inset(0 0 0 100%);
	visibility: hidden;
	pointer-events: none;
	transition: clip-path var(--eth-transition-m), visibility var(--eth-transition-m);
}

:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-header__nav.is-open {
	transform: none;
	clip-path: inset(0);
	visibility: visible;
	pointer-events: auto;
}

:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	padding: 0;
}

:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-menu-toggle svg {
	transition: transform var(--eth-transition-s);
}

:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-menu-item--has-children.is-expanded > .eth-menu-toggle svg {
	transform: rotate(180deg);
}

:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-sub-menu,
:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-sub-menu--nested {
	position: static;
	display: none;
	width: 100%;
	min-width: 0;
	max-height: none;
	overflow: visible;
	margin: 0;
	padding: 0.25rem 0 0.5rem var(--eth-mega-mobile-indent);
	border: 0;
	border-radius: var(--eth-radius-m);
	box-shadow: none;
	background: var(--eth-menu-drawer-submenu-bg);
	opacity: 1;
	visibility: visible;
	transform: none;
}

:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-menu-item--has-children.is-expanded > .eth-sub-menu,
:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-menu-item--has-children.is-expanded > .eth-sub-menu--nested {
	display: block;
}

:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-sub-menu .eth-menu-item {
	border-bottom: 0;
}

:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-menu-item--mega > .eth-sub-menu.eth-mega-menu {
	position: static;
	display: none;
	padding: 0.35rem 0.5rem 0.6rem;
	max-height: none;
	background: var(--eth-menu-drawer-submenu-bg);
	border: 0;
	border-radius: var(--eth-radius-m);
	box-shadow: none;
	pointer-events: auto;
}

:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-menu-item--mega.is-expanded > .eth-sub-menu.eth-mega-menu {
	display: block;
}

:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-menu-item--mega > .eth-sub-menu.eth-mega-menu::before {
	display: none;
}

:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-mega-menu > .eth-menu-item {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	padding: 0;
	border: 0;
}

:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-mega-menu > .eth-menu-item + .eth-menu-item {
	border-top: 1px solid var(--eth-mega-panel-border);
	border-left: 0;
}

:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-mega-menu > .eth-menu-item > .eth-menu-link {
	flex: 1;
	min-width: 0;
	min-height: 3rem;
	padding: 0.65rem 0.75rem;
	margin: 0;
	border: 0;
	font-size: 0.95rem;
	font-weight: 620;
	letter-spacing: 0;
}

:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-mega-menu > .eth-menu-item > .eth-menu-link::before {
	display: none;
}

:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-mega-menu > .eth-menu-item > .eth-sub-menu--nested {
	flex-basis: 100%;
	width: 100%;
	padding: 0 0 0.55rem var(--eth-mega-mobile-indent);
}

:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-mega-menu > .eth-menu-item > .eth-sub-menu--nested .eth-menu-link {
	min-height: 2.75rem;
	padding: 0.55rem 0.75rem;
	margin: 0;
	font-size: 0.9rem;
}

:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-mega-menu > .eth-menu-item > .eth-sub-menu--nested .eth-menu-link::after {
	display: none;
}

:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-menu {
	width: 100%;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-menu-item {
	width: 100%;
	flex-wrap: wrap;
}

:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-menu--primary > .eth-menu-item > .eth-menu-link {
	flex: 1;
	min-width: 0;
	min-height: 3.25rem;
	padding: 0.75rem 0.25rem;
	font-size: var(--eth-fs-body);
}

:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-sub-menu .eth-menu-link {
	min-height: 2.75rem;
	padding: 0.55rem 0.75rem;
	font-size: 0.92rem;
}

/* Minimal Header 在桌面同样使用浅色抽屉，透明 Header 的白字不得带入面板。 */
:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal).eth-header--transparent .eth-header__nav .eth-menu-link,
:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal).eth-header--transparent .eth-header__nav .eth-menu-toggle {
	color: var(--eth-text-title);
}

@media (prefers-reduced-motion: reduce) {
	:is(.eth-header.eth-nav-is-drawer, .eth-header--minimal) .eth-header__nav,
	.eth-menu-item--mega > .eth-sub-menu.eth-mega-menu,
	.eth-menu-toggle svg,
	.eth-mega-menu .eth-menu-link::after {
		transition: none;
	}
}

/* =========================================================
 * Header 5, alignment, spacing, and interaction variants.
 * The existing markup remains the source of truth; these modifiers are
 * applied to the built-in presets only and do not affect reusable blocks.
 * ========================================================= */
.eth-header--utility .eth-header__utility {
	background: var(--eth-bg-muted);
	border-bottom: 1px solid var(--eth-border);
	color: var(--eth-text-muted);
	font-size: var(--eth-fs-small);
}

.eth-header__utility-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--eth-space-m);
	min-height: 2.5rem;
	padding-block: var(--eth-space-3xs, 0.35rem);
}

.eth-header__utility-text {
	margin: 0;
}

.eth-header__utility-link {
	color: var(--eth-text-title);
	font-weight: var(--eth-fw-medium);
	text-decoration: none;
}

.eth-header__utility-link:hover {
	color: var(--eth-primary);
}

.eth-header--utility .eth-header__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
}

.eth-header--utility .eth-header__nav {
	min-width: 0;
}

.eth-header--classic.eth-header--nav-left .eth-header__nav,
.eth-header--utility.eth-header--nav-left .eth-header__nav {
	justify-content: flex-start;
}

.eth-header--classic.eth-header--nav-center .eth-header__nav,
.eth-header--utility.eth-header--nav-center .eth-header__nav {
	justify-content: center;
}

.eth-header--classic.eth-header--nav-right .eth-header__nav,
.eth-header--utility.eth-header--nav-right .eth-header__nav {
	justify-content: flex-end;
}

/* 抽屉不继承桌面左/中/右对齐，内容始终从面板顶部开始。 */
.eth-header.eth-nav-is-drawer .eth-header__nav,
.eth-header--minimal .eth-header__nav {
	justify-content: flex-start;
	align-items: stretch;
}

.eth-header--spacing-compact .eth-header__inner {
	min-height: 5rem;
	padding-block: var(--eth-space-3xs, 0.35rem);
}

.eth-header--spacing-airy .eth-header__inner {
	min-height: 7rem;
	padding-block: var(--eth-space-s);
}

.eth-header--hover-soft-fill .eth-menu--primary > .eth-menu-item > .eth-menu-link:hover,
.eth-header--hover-soft-fill .eth-menu--primary > .eth-menu-item > .eth-menu-link[aria-current="page"] {
	color: var(--eth-primary);
	background: var(--eth-primary-5);
}

.eth-header--hover-text .eth-menu--primary > .eth-menu-item > .eth-menu-link:hover,
.eth-header--hover-text .eth-menu--primary > .eth-menu-item > .eth-menu-link[aria-current="page"] {
	color: var(--eth-primary);
	background: transparent;
}

.eth-header--hover-underline .eth-menu--primary > .eth-menu-item > .eth-menu-link,
.eth-header--hover-indicator .eth-menu--primary > .eth-menu-item > .eth-menu-link {
	position: relative;
	background: transparent;
}

.eth-header--hover-underline .eth-menu--primary > .eth-menu-item > .eth-menu-link::after,
.eth-header--hover-indicator .eth-menu--primary > .eth-menu-item > .eth-menu-link::after {
	content: "";
	position: absolute;
	left: 0.9em;
	right: 0.9em;
	bottom: 0.35em;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--eth-transition-s);
}

.eth-header--hover-underline .eth-menu--primary > .eth-menu-item > .eth-menu-link::after {
	height: 1px;
	background: currentColor;
}

.eth-header--hover-indicator .eth-menu--primary > .eth-menu-item > .eth-menu-link::after {
	height: 3px;
	border-radius: var(--eth-radius-full);
	background: var(--eth-primary);
}

.eth-header--hover-underline .eth-menu--primary > .eth-menu-item > .eth-menu-link:hover,
.eth-header--hover-underline .eth-menu--primary > .eth-menu-item > .eth-menu-link[aria-current="page"],
.eth-header--hover-indicator .eth-menu--primary > .eth-menu-item > .eth-menu-link:hover,
.eth-header--hover-indicator .eth-menu--primary > .eth-menu-item > .eth-menu-link[aria-current="page"] {
	color: var(--eth-primary);
}

.eth-header--hover-underline .eth-menu--primary > .eth-menu-item > .eth-menu-link:hover::after,
.eth-header--hover-underline .eth-menu--primary > .eth-menu-item > .eth-menu-link[aria-current="page"]::after,
.eth-header--hover-indicator .eth-menu--primary > .eth-menu-item > .eth-menu-link:hover::after,
.eth-header--hover-indicator .eth-menu--primary > .eth-menu-item > .eth-menu-link[aria-current="page"]::after {
	transform: scaleX(1);
}

.eth-header .eth-menu-link:focus-visible,
.eth-header__utility-link:focus-visible {
	outline: 2px solid var(--eth-primary);
	outline-offset: 3px;
}

.eth-header--transparent .eth-header__utility {
	background: color-mix(in srgb, var(--eth-dark) 34%, transparent);
	border-bottom-color: color-mix(in srgb, var(--eth-light) 20%, transparent);
	color: var(--eth-light);
}

.eth-header--transparent .eth-header__utility-link {
	color: var(--eth-light);
}

.eth-header--transparent.eth-header--scrolled .eth-header__utility {
	background: var(--eth-bg-muted);
	border-bottom-color: var(--eth-border);
	color: var(--eth-text-muted);
}

.eth-header--transparent.eth-header--scrolled .eth-header__utility-link {
	color: var(--eth-text-title);
}

@media (max-width: 992px) {
	.eth-header--utility .eth-header__utility {
		display: none;
	}

	.eth-header--utility .eth-header__inner {
		display: flex;
	}

	.eth-header--utility .eth-header__nav {
		min-width: auto;
	}

	/* Header 1–5 在抽屉断点统一为同一高度，避免 compact/airy 与 fixed top 冲突。 */
	.eth-header .eth-header__inner,
	.eth-header--spacing-compact .eth-header__inner,
	.eth-header--spacing-airy .eth-header__inner {
		min-height: var(--eth-header-mobile-height);
		padding-block: 0.5rem;
	}

	.eth-header:not(.eth-header--minimal) .eth-header__nav {
		top: var(--eth-header-mobile-height);
	}

	/* 透明 Header 的抽屉仍是浅色面板，导航文字不能继续继承白色。 */
	.eth-header--transparent .eth-header__nav .eth-menu-link,
	.eth-header--transparent .eth-header__nav .eth-menu-toggle {
		color: var(--eth-text-title);
	}
}

/* 窄屏优先保留品牌与 44px 菜单入口；CTA 可在抽屉内容中继续提供。 */
@media (max-width: 480px) {
	.eth-header:not(.eth-header--minimal) .eth-header__actions {
		display: none;
	}
}

/* =========================================================
 * 9. Mega 富单元格（1.3.12，cell_type 驱动）
 * --------------------------------------------------------
 * 配套字段：inc/mega-menu-fields.php 的 _eth_mega_cell_type 等。
 * Walker 在 mega 面板内输出 .eth-mega-cell--{type}；普通链接项不受影响。
 * 样式全部走 --eth-* token；新增变体 = 换 token，不写选择器覆盖。
 * ========================================================= */

/* 9.1 单元格基础 */
.eth-mega-cell {
	display: flex;
	min-width: 0;
}

/* 9.2 卡片单元格 */
.eth-mega-cell--card > .eth-mega-card__link {
	display: flex;
	flex-direction: column;
	gap: var(--eth-space-2xs);
	padding: var(--eth-mega-card-pad);
	border-radius: var(--eth-radius-m);
	text-decoration: none;
	color: var(--eth-text-title);
	transition: background-color var(--eth-transition-s), box-shadow var(--eth-transition-s);
}
.eth-mega-cell--card > .eth-mega-card__link:hover {
	background: var(--eth-primary-5);
}

.eth-mega-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: var(--eth-mega-card-ratio);
	object-fit: cover;
	border-radius: var(--eth-radius-m);
}

.eth-mega-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--eth-space-3xs);
}
.eth-mega-card__title {
	font-size: var(--eth-fs-small);
	font-weight: var(--eth-fw-semibold);
	line-height: var(--eth-lh-heading);
	color: var(--eth-text-title);
}
.eth-mega-card__badge {
	display: inline-block;
	margin-left: var(--eth-space-3xs);
	padding: 0.1em 0.5em; /* 相对字号的 em，随字号缩放 */
	border-radius: var(--eth-radius-full);
	background: var(--eth-primary-10);
	color: var(--eth-primary);
	font-size: var(--eth-fs-xs);
	font-weight: var(--eth-fw-bold);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	vertical-align: middle;
}
.eth-mega-card__desc {
	font-size: var(--eth-fs-xs);
	color: var(--eth-text-body);
	line-height: var(--eth-lh-body);
}

/* 9.3 标题块单元格 */
.eth-mega-cell--heading {
	align-items: flex-end;
}
.eth-mega-heading {
	width: 100%;
	padding-bottom: var(--eth-space-3xs);
	margin-bottom: var(--eth-space-3xs);
	border-bottom: 1px solid var(--eth-mega-panel-border);
	color: var(--eth-text-title);
	font-family: var(--eth-font-heading);
	font-size: var(--eth-fs-xs);
	font-weight: var(--eth-fw-bold);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* 9.4 促销位列：父项加 eth-mega--promo 类启用 */
.eth-menu-item--mega.eth-mega--promo > .eth-sub-menu.eth-mega-menu {
	grid-template-columns:
		repeat(var(--eth-mega-columns), minmax(0, 1fr))
		minmax(var(--eth-mega-promo-min), 1fr); /* 追加 promo 轨道 */
	grid-auto-rows: 1fr; /* 行等高，promo 视觉更稳 */
}
.eth-menu-item--mega.eth-mega--promo > .eth-sub-menu.eth-mega-menu > .eth-mega-cell--promo {
	grid-column: -1; /* 永远最后一列 */
	grid-row: 1 / -1; /* 横跨全部行 */
}

.eth-mega-promo {
	height: 100%;
}
.eth-mega-promo__inner {
	display: flex;
	flex-direction: column;
	gap: var(--eth-space-2xs);
	height: 100%;
	padding: var(--eth-space-s);
	border-radius: var(--eth-radius-l);
	background: linear-gradient(160deg, var(--eth-primary-10), var(--eth-mega-panel-bg));
	border: 1px solid var(--eth-mega-panel-border);
	text-decoration: none;
	color: var(--eth-text-title);
	transition: box-shadow var(--eth-transition-m), transform var(--eth-transition-m);
}
.eth-mega-promo__inner:hover {
	box-shadow: var(--eth-mega-panel-shadow);
	transform: translateY(-1px);
}

.eth-mega-promo__media img {
	display: block;
	width: 100%;
	aspect-ratio: var(--eth-mega-promo-ratio);
	object-fit: cover;
	border-radius: var(--eth-radius-m);
}
.eth-mega-promo__title {
	font-family: var(--eth-font-heading);
	font-size: var(--eth-fs-body);
	font-weight: var(--eth-fw-bold);
	line-height: var(--eth-lh-heading);
	color: var(--eth-text-title);
}
.eth-mega-promo__text {
	font-size: var(--eth-fs-xs);
	color: var(--eth-text-body);
	line-height: var(--eth-lh-body);
}
.eth-mega-promo__btn {
	margin-top: auto; /* 按钮沉底，图片文字顶对齐 */
	display: inline-flex;
	align-items: center;
	gap: var(--eth-space-3xs);
	align-self: flex-start;
	padding: var(--eth-space-3xs) var(--eth-space-2xs);
	border-radius: var(--eth-radius-s);
	background: var(--eth-primary);
	color: var(--eth-text-invert);
	font-size: var(--eth-fs-xs);
	font-weight: var(--eth-fw-bold);
	transition: background-color var(--eth-transition-s);
}
.eth-mega-promo__inner:hover .eth-mega-promo__btn {
	background: var(--eth-primary-d-1);
}

/* 9.5 深色变体（皮肤类）：只换 token，不写死 hex */
.eth-menu-item--mega.eth-mega--dark {
	--eth-mega-panel-bg: var(--eth-dark);
	--eth-mega-panel-border: var(--eth-dark-20);
	--eth-mega-panel-shadow: 0 22px 55px var(--eth-dark-40);
	--eth-text-title: var(--eth-light);
	--eth-text-body: var(--eth-light-80);
	--eth-text-muted: var(--eth-light-60);
	--eth-link: var(--eth-primary-l-1);
	--eth-link-hover: var(--eth-primary-l-2);
}
.eth-menu-item--mega.eth-mega--dark .eth-mega-card__link:hover {
	background: var(--eth-light-10);
}
.eth-menu-item--mega.eth-mega--dark .eth-mega-card__badge {
	background: var(--eth-light-10);
}

/* 9.6 紧凑变体 */
.eth-menu-item--mega.eth-mega--compact {
	--eth-mega-panel-bg: transparent;
	--eth-mega-panel-shadow: none;
}
.eth-mega--compact .eth-mega-card__link {
	flex-direction: row; /* 小图 + 文字横排 */
	align-items: center;
	gap: var(--eth-space-2xs);
}
.eth-mega--compact .eth-mega-card__media img {
	width: 3rem;
	aspect-ratio: 1;
	flex-shrink: 0;
}
.eth-mega--compact .eth-mega-card__desc {
	display: none; /* 紧凑模式隐藏描述 */
}

/* 9.7 移动端抽屉适配：promo 重排为通栏卡，卡片保持可读 */
@media (max-width: 992px) {
	.eth-menu-item--mega > .eth-sub-menu.eth-mega-menu > .eth-mega-cell--promo {
		grid-column: auto;
		grid-row: auto;
		margin-top: var(--eth-space-2xs);
	}
	.eth-mega-promo__media img {
		aspect-ratio: var(--eth-mega-promo-ratio);
	}
	.eth-mega-card__media img {
		aspect-ratio: 16 / 9;
	}
	.eth-mega-heading {
		border-bottom: 0;
		text-transform: none;
	}
}