/* ===== tokens.css ===== */
/**
 * Ethantheme Design Tokens
 * ----------------------------------------------------
 * 设计令牌：颜色派生、间距、字体、圆角、阴影、断点
 *
 * 设计原则：
 * 1. 颜色：用户在 Customizer 中直接选 3 个基色 hex，
 *    其余变体由 color-mix() 自动派生，无重复维护。
 * 2. 尺寸：全部流体 clamp()，跨行业无需调整。
 * 3. 命名：统一 --eth- 前缀，避免与插件/父主题变量冲突。
 * 4. 仅亮色为默认；暗色通过 .theme-inverted 局部反转。
 */

:root {
	/* =========================================================
	 * 1. 基色 hex 输入（用户在 Customizer 配置）
	 * 默认值：蓝紫 primary / 珊瑚红 secondary / 青蓝 tertiary
	 * Customizer 输出 inline CSS 覆盖此处。
	 * ========================================================= */
	--eth-primary: #4f46e5;
	--eth-secondary: #f56565;
	--eth-tertiary: #0ea5e9;

	/* =========================================================
	 * 2. 基色与派生（每色 12 个变体：基 + 6 透明 + 3 暗 + 2 浅）
	 * 透明度阶梯用 color-mix with transparent
	 * 暗色用 color-mix with black
	 * 浅色用 color-mix with white
	 * ========================================================= */

	/* --- Primary --- */
	--eth-primary-5:  color-mix(in srgb, var(--eth-primary) 5%, transparent);
	--eth-primary-10: color-mix(in srgb, var(--eth-primary) 10%, transparent);
	--eth-primary-20: color-mix(in srgb, var(--eth-primary) 20%, transparent);
	--eth-primary-40: color-mix(in srgb, var(--eth-primary) 40%, transparent);
	--eth-primary-60: color-mix(in srgb, var(--eth-primary) 60%, transparent);
	--eth-primary-80: color-mix(in srgb, var(--eth-primary) 80%, transparent);
	--eth-primary-d-1: color-mix(in srgb, var(--eth-primary) 86%, black);
	--eth-primary-d-2: color-mix(in srgb, var(--eth-primary) 65%, black);
	--eth-primary-d-3: color-mix(in srgb, var(--eth-primary) 40%, black);
	--eth-primary-l-1: color-mix(in srgb, var(--eth-primary) 75%, white);
	--eth-primary-l-2: color-mix(in srgb, var(--eth-primary) 40%, white);

	/* --- Secondary --- */
	--eth-secondary-5:  color-mix(in srgb, var(--eth-secondary) 5%, transparent);
	--eth-secondary-10: color-mix(in srgb, var(--eth-secondary) 10%, transparent);
	--eth-secondary-20: color-mix(in srgb, var(--eth-secondary) 20%, transparent);
	--eth-secondary-40: color-mix(in srgb, var(--eth-secondary) 40%, transparent);
	--eth-secondary-60: color-mix(in srgb, var(--eth-secondary) 60%, transparent);
	--eth-secondary-80: color-mix(in srgb, var(--eth-secondary) 80%, transparent);
	--eth-secondary-d-1: color-mix(in srgb, var(--eth-secondary) 86%, black);
	--eth-secondary-d-2: color-mix(in srgb, var(--eth-secondary) 65%, black);
	--eth-secondary-d-3: color-mix(in srgb, var(--eth-secondary) 40%, black);
	--eth-secondary-l-1: color-mix(in srgb, var(--eth-secondary) 75%, white);
	--eth-secondary-l-2: color-mix(in srgb, var(--eth-secondary) 40%, white);

	/* --- Tertiary --- */
	--eth-tertiary-5:  color-mix(in srgb, var(--eth-tertiary) 5%, transparent);
	--eth-tertiary-10: color-mix(in srgb, var(--eth-tertiary) 10%, transparent);
	--eth-tertiary-20: color-mix(in srgb, var(--eth-tertiary) 20%, transparent);
	--eth-tertiary-40: color-mix(in srgb, var(--eth-tertiary) 40%, transparent);
	--eth-tertiary-60: color-mix(in srgb, var(--eth-tertiary) 60%, transparent);
	--eth-tertiary-80: color-mix(in srgb, var(--eth-tertiary) 80%, transparent);
	--eth-tertiary-d-1: color-mix(in srgb, var(--eth-tertiary) 86%, black);
	--eth-tertiary-d-2: color-mix(in srgb, var(--eth-tertiary) 65%, black);
	--eth-tertiary-d-3: color-mix(in srgb, var(--eth-tertiary) 40%, black);
	--eth-tertiary-l-1: color-mix(in srgb, var(--eth-tertiary) 75%, white);
	--eth-tertiary-l-2: color-mix(in srgb, var(--eth-tertiary) 40%, white);

	/* =========================================================
	 * 3. 功能色（固定，不派生）
	 * ========================================================= */
	--eth-success:   hsl(136, 65%, 42%);
	--eth-success-10: color-mix(in srgb, var(--eth-success) 10%, transparent);
	--eth-success-20: color-mix(in srgb, var(--eth-success) 20%, transparent);
	--eth-error:     hsl(351, 75%, 50%);
	--eth-error-10:  color-mix(in srgb, var(--eth-error) 10%, transparent);
	--eth-error-20:  color-mix(in srgb, var(--eth-error) 20%, transparent);
	--eth-warning:   hsl(38, 92%, 50%);
	--eth-info:      hsl(199, 89%, 48%);

	/* =========================================================
	 * 4. 中性色（灰阶）
	 * ========================================================= */
	--eth-light:   hsl(0, 0%, 100%);
	--eth-light-5:  color-mix(in srgb, var(--eth-light) 5%, transparent);
	--eth-light-10: color-mix(in srgb, var(--eth-light) 10%, transparent);
	--eth-light-20: color-mix(in srgb, var(--eth-light) 20%, transparent);
	--eth-light-40: color-mix(in srgb, var(--eth-light) 40%, transparent);
	--eth-light-60: color-mix(in srgb, var(--eth-light) 60%, transparent);
	--eth-light-80: color-mix(in srgb, var(--eth-light) 80%, transparent);

	--eth-dark:   hsl(0, 0%, 8%);
	--eth-dark-5:  color-mix(in srgb, var(--eth-dark) 5%, transparent);
	--eth-dark-10: color-mix(in srgb, var(--eth-dark) 10%, transparent);
	--eth-dark-20: color-mix(in srgb, var(--eth-dark) 20%, transparent);
	--eth-dark-40: color-mix(in srgb, var(--eth-dark) 40%, transparent);
	--eth-dark-60: color-mix(in srgb, var(--eth-dark) 60%, transparent);
	--eth-dark-80: color-mix(in srgb, var(--eth-dark) 80%, transparent);

	/* =========================================================
	 * 5. 语义色（页面级抽象，便于暗色反转）
	 * 组件应引用语义色，而非直接引用 --eth-primary 等。
	 * 这样暗色反转只需切换语义色映射。
	 * ========================================================= */
	--eth-bg-body:     hsl(0, 0%, 96%);
	--eth-bg-surface:  var(--eth-light);
	--eth-bg-muted:    hsl(0, 0%, 92%);
	--eth-text-body:   hsl(0, 0%, 25%);
	--eth-text-title:  hsl(0, 0%, 8%);
	--eth-text-muted:  hsl(0, 0%, 45%);
	--eth-text-invert: var(--eth-light);
	--eth-border:      hsla(0, 0%, 0%, 0.12);
	--eth-border-strong: hsla(0, 0%, 0%, 0.25);
	--eth-link:        var(--eth-primary);
	--eth-link-hover:  var(--eth-primary-d-1);
	--eth-shadow-color: hsla(0, 0%, 0%, 0.12);

	/* =========================================================
	 * 6. 间距（流体 clamp，9 阶）
	 * ========================================================= */
	--eth-space-3xs: clamp(0.4rem, 0.36rem + 0.2vw, 0.5rem);
	--eth-space-2xs: clamp(0.6rem, 0.52rem + 0.4vw, 0.8rem);
	--eth-space-xs:  clamp(0.85rem, 0.7rem + 0.75vw, 1.25rem);
	--eth-space-s:   clamp(1.1rem, 0.85rem + 1.25vw, 1.8rem);
	--eth-space-m:   clamp(1.5rem, 1.1rem + 2vw, 2.6rem);
	--eth-space-l:   clamp(2rem, 1.4rem + 3vw, 3.8rem);
	--eth-space-xl:  clamp(2.6rem, 1.7rem + 4.5vw, 5.4rem);
	--eth-space-2xl: clamp(3.4rem, 2rem + 7vw, 7.6rem);
	--eth-space-3xl: clamp(4.4rem, 2.4rem + 10vw, 10.6rem);

	/* =========================================================
	 * 7. 字号（流体 clamp，8 阶 + 语义化）
	 * ========================================================= */
	--eth-text-xs:  clamp(0.78rem, 0.75rem + 0.15vw, 0.85rem);
	--eth-text-s:   clamp(0.88rem, 0.84rem + 0.2vw, 0.98rem);
	--eth-text-m:   clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
	--eth-text-l:   clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
	--eth-text-xl:  clamp(1.35rem, 1.18rem + 0.85vw, 1.8rem);
	--eth-text-2xl: clamp(1.6rem, 1.32rem + 1.4vw, 2.4rem);
	--eth-text-3xl: clamp(1.95rem, 1.5rem + 2.25vw, 3.2rem);
	--eth-text-4xl: clamp(2.4rem, 1.7rem + 3.5vw, 4.4rem);

	--eth-fs-hero:    var(--eth-text-4xl);
	--eth-fs-h1:      var(--eth-text-3xl);
	--eth-fs-h2:      var(--eth-text-2xl);
	--eth-fs-h3:      var(--eth-text-xl);
	--eth-fs-h4:      var(--eth-text-l);
	--eth-fs-body:    var(--eth-text-m);
	--eth-fs-small:   var(--eth-text-s);
	--eth-fs-xs:      var(--eth-text-xs);

	--eth-lh-tight:   1.1;
	--eth-lh-heading: 1.25;
	--eth-lh-body:    1.6;

	--eth-fw-regular: 400;
	--eth-fw-medium:  500;
	--eth-fw-semibold: 600;
	--eth-fw-bold:    700;

	/* =========================================================
	 * 7.5 字体族（0.6.9）
	 * ----------------------------------------------------
	 * 由 Customizer「字体」决定，覆盖在 tokens.css 之后：
	 * - 跟随 GP（默认）：--eth-font-body/heading 为空字符串，
	 *   base.css 中 font-family: var(--eth-font-body) 因空值失效，
	 *   从而继承 GP 的字体设置（保持向后兼容）
	 * - 系统字体：Customizer 注入 --eth-font-body-system 系统栈
	 * - 本地字体：Customizer 注入用户上传的 woff2 对应 family
	 * ========================================================= */
	--eth-font-body: "";
	--eth-font-heading: var(--eth-font-body);
	--eth-font-body-system: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--eth-font-heading-system: var(--eth-font-body-system);
	--eth-font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

	/* 中文/多语言补充字体（系统栈，避免加载中文 web font） */
	--eth-font-cjk: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", sans-serif;

	/* =========================================================
	 * 8. 圆角（6 阶）
	 * ========================================================= */
	--eth-radius-xs: 0.3rem;
	--eth-radius-s:  0.5rem;
	--eth-radius-m:  0.8rem;
	--eth-radius-l:  1.25rem;
	--eth-radius-xl: 2rem;
	--eth-radius-full: 999rem;

	/* =========================================================
	 * 9. 阴影（5 阶）
	 * ========================================================= */
	--eth-shadow-xs: 0 1px 2px var(--eth-shadow-color);
	--eth-shadow-s:  0 2px 6px var(--eth-shadow-color);
	--eth-shadow-m:  0 4px 12px var(--eth-shadow-color);
	--eth-shadow-l:  0 8px 24px var(--eth-shadow-color);
	--eth-shadow-xl: 0 16px 48px var(--eth-shadow-color);

	/* =========================================================
	 * 10. 布局
	 * ========================================================= */
	/* 容器宽度硬编码 1350px，移除 Customizer 选项 */
	--eth-container: 1350px;
	--eth-container-narrow: 768px;
	--eth-container-wide: 1440px;
	--eth-section-space-y: var(--eth-space-xl);
	--eth-section-space-x: var(--eth-space-m);
	--eth-content-gap: var(--eth-space-m);

	/* =========================================================
	 * 11. 过渡
	 * ========================================================= */
	--eth-transition-s: 0.15s ease;
	--eth-transition-m: 0.25s ease;
	--eth-transition-l: 0.4s ease;

	/* =========================================================
	 * 12. z-index 层级
	 * ========================================================= */
	--eth-z-base: 1;
	--eth-z-sticky: 100;
	--eth-z-header: 200;
	--eth-z-dropdown: 300;
	--eth-z-overlay: 1000;
	--eth-z-modal: 2000;

	/* =========================================================
	 * 13. 断点（仅供 JS 引用，CSS 仍用 @media）
	 * ========================================================= */
	--eth-bp-s: 480px;
	--eth-bp-m: 768px;
	--eth-bp-l: 992px;
	--eth-bp-xl: 1280px;
}

/* =========================================================
 * 局部暗色反转
 * --------------------------------------------------------
 * 在任意 section / 区块加 .theme-inverted 即可暗色显示
 * 仅切换语义色，基色保持不变（按钮等仍然用品牌色）
 * ========================================================= */
.theme-inverted {
	--eth-bg-body:     hsl(0, 0%, 8%);
	--eth-bg-surface:  hsl(0, 0%, 14%);
	--eth-bg-muted:    hsl(0, 0%, 18%);
	--eth-text-body:   hsl(0, 0%, 75%);
	--eth-text-title:  hsl(0, 0%, 100%);
	--eth-text-muted:  hsl(0, 0%, 60%);
	--eth-text-invert: hsl(0, 0%, 8%);
	--eth-border:      hsla(0, 0%, 100%, 0.12);
	--eth-border-strong: hsla(0, 0%, 100%, 0.25);
	--eth-link:        var(--eth-primary-l-1);
	--eth-link-hover:  var(--eth-primary-l-2);
	--eth-shadow-color: hsla(0, 0%, 0%, 0.5);
}

/* ===== base.css ===== */
/**
 * Ethantheme Base
 * ----------------------------------------------------
 * 重置 + 全局基础 + 排版 + 容器
 * 依赖：tokens.css
 */

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

html {
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	scroll-behavior: smooth;
	scroll-padding-top: 80px; /* Fixed header offset for anchor jumps */
}

body {
	background: var(--eth-bg-body);
	color: var(--eth-text-body);
	font-family: var(--eth-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.eth-section img,
.eth-section picture,
.eth-section video,
.eth-header img,
.eth-footer img {
	display: block;
	max-width: 100%;
	height: auto;
}

:where(.eth-header, .eth-footer, .eth-section) :where(input, button, textarea, select) {
	font: inherit;
	color: inherit;
}

:where(.eth-header, .eth-footer, .eth-section) a {
	color: var(--eth-link);
	text-decoration: none;
	transition: color var(--eth-transition-s);
}

:where(.eth-header, .eth-footer, .eth-section) a:hover {
	color: var(--eth-link-hover);
}

.eth-section :where(ul, ol) {
	padding-left: 1.4em;
}

:focus-visible {
	outline: 3px solid var(--eth-primary-l-1);
	outline-offset: 2px;
	border-radius: var(--eth-radius-xs);
}

/* =========================================================
 * 2. 标题排版
 * ========================================================= */
.eth-section :where(h1, h2, h3, h4, h5, h6) {
	color: var(--eth-text-title);
	font-family: var(--eth-font-heading);
	font-weight: var(--eth-fw-semibold);
	line-height: var(--eth-lh-heading);
}

.eth-section h1 { font-size: var(--eth-fs-h1); }
.eth-section h2 { font-size: var(--eth-fs-h2); }
.eth-section h3 { font-size: var(--eth-fs-h3); }
.eth-section h4 { font-size: var(--eth-fs-h4); }
.eth-section h5 { font-size: var(--eth-fs-body); }
.eth-section h6 { font-size: var(--eth-fs-small); }

/* =========================================================
 * 3. 段落与文本
 * ========================================================= */
.eth-section p {
	line-height: var(--eth-lh-body);
}

.eth-section p + p {
	margin-top: var(--eth-space-s);
}

.eth-section :where(strong, b) { font-weight: var(--eth-fw-semibold); }
.eth-section small { font-size: var(--eth-fs-small); }

.eth-section blockquote {
	margin: var(--eth-space-m) 0;
	padding-left: var(--eth-space-m);
	border-left: 3px solid var(--eth-primary);
	color: var(--eth-text-muted);
	font-style: italic;
}

.eth-section hr {
	border: 0;
	border-top: 1px solid var(--eth-border);
	margin: var(--eth-space-l) 0;
}

.eth-section :where(code, kbd, pre) {
	font-family: var(--eth-font-mono);
	font-size: 0.92em;
}

.eth-section code {
	background: var(--eth-dark-5);
	padding: 0.15em 0.4em;
	border-radius: var(--eth-radius-xs);
}

.eth-section pre {
	background: var(--eth-dark-5);
	padding: var(--eth-space-s);
	border-radius: var(--eth-radius-s);
	overflow-x: auto;
}

/* =========================================================
 * * 4. 布局容器
 *  --------------------------------------------------------
 *  .eth-container     标准内容容器（max 1280）
 *  .eth-container-narrow  窄容器（文章正文，768）
 *  .eth-container-wide    宽容器（1440）
 *  .eth-section       区段（垂直 padding）
 * ========================================================= */
.eth-section {
	width: 100%;
	/**padding-inline: var(--eth-section-space-x);**/
	padding-block: var(--eth-section-space-y);
}

.eth-category-main,
.eth-product-main,
.eth-products-archive,
.eth-article-main {
	width: 100%;
	min-width: 0;
}

.eth-section--tight {
	padding-block: var(--eth-space-m);
}

.eth-section--none {
	padding-block: 0;
}

.eth-container {
	width: 100%;
	max-width: var(--eth-container);
	margin-inline: auto;
}

.eth-container-narrow {
	width: 100%;
	max-width: var(--eth-container-narrow);
	margin-inline: auto;
}

.eth-container-wide {
	width: 100%;
	max-width: var(--eth-container-wide);
	margin-inline: auto;
}

/* =========================================================
 * 5. Flow 排版系统
 * --------------------------------------------------------
 * 用于文章正文、卡片内容等需要语义化间距的场景
 * .flow > * + * 自动添加垂直间距
 * ========================================================= */
.flow > * + * {
	margin-top: var(--eth-space-s);
}

.flow h1, .flow h2, .flow h3, .flow h4 {
	margin-top: var(--eth-space-l);
	margin-bottom: var(--eth-space-2xs);
}

.flow h1:first-child,
.flow h2:first-child,
.flow h3:first-child,
.flow h4:first-child {
	margin-top: 0;
}

.flow h2 + p,
.flow h3 + p,
.flow h4 + p {
	margin-top: var(--eth-space-2xs);
}

.flow img {
	margin-top: var(--eth-space-m);
	border-radius: var(--eth-radius-s);
}

.flow ul, .flow ol {
	margin-top: var(--eth-space-s);
}

.flow li + li {
	margin-top: var(--eth-space-2xs);
}

/* =========================================================
 * 6. 表格基础
 * ========================================================= */
.eth-section table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--eth-fs-small);
}

.eth-section :where(th, td) {
	padding: var(--eth-space-2xs) var(--eth-space-xs);
	border-bottom: 1px solid var(--eth-border);
	text-align: left;
}

.eth-section th {
	font-weight: var(--eth-fw-semibold);
	color: var(--eth-text-title);
}

/* =========================================================
 * 7. 选中与滚动条（细节）
 * ========================================================= */
::selection {
	background: var(--eth-primary-20);
	color: var(--eth-text-title);
}

/* =========================================================
 * 8. 古藤堡兼容
 * --------------------------------------------------------
 * 让 GP 默认的 .entry-content 也走 flow 系统
 * 但避免编辑器内被影响
 * ========================================================= */
body:not(.block-editor-page) .entry-content > * + * {
	margin-top: var(--eth-space-s);
}

body:not(.block-editor-page) .entry-content h2,
body:not(.block-editor-page) .entry-content h3,
body:not(.block-editor-page) .entry-content h4 {
	margin-top: var(--eth-space-l);
	margin-bottom: var(--eth-space-2xs);
}

body:not(.block-editor-page) .entry-content h2:first-child,
body:not(.block-editor-page) .entry-content h3:first-child,
body:not(.block-editor-page) .entry-content h4:first-child {
	margin-top: 0;
}

/* align-wide / align-full 支持 */
.alignwide {
	width: calc(100% + var(--eth-section-space-x) * 2);
	max-width: var(--eth-container-wide);
	margin-inline: auto;
}

.alignfull {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* =========================================================
 * Override GeneratePress: .separate-containers .site-main margin
 * --------------------------------------------------------
 * GP adds margin:20px to .site-main under .separate-containers,
 * which adds an unwanted background strip around the category
 * page Hero. Reset to 0 so section backgrounds bleed full-width.
 * ========================================================= */
.separate-containers .site-main {
    margin: 0;
}

/* =========================================================
 * Override GeneratePress: .site-main > * { margin-bottom: 20px }
 * --------------------------------------------------------
 * GP 给 .site-main 的所有直接子元素加 20px 下边距，导致产品/文章
 * 内容区各 section 之间出现背景色缝隙（背景色不一致）。
 * 主题 section 自带垂直间距，此处清零，让背景无缝衔接。
 * ========================================================= */
.separate-containers .site-main > * {
    margin-bottom: 0;
}

/* ===== components.css ===== */
/**
 * Ethantheme Components
 * ----------------------------------------------------
 * 组件类：button / card / input / badge / link / icon / avatar / divider
 *
 * 这些类同时是古藤堡 Block Style 的底层样式。
 * 编辑器内通过 Block Style 切换，HTML 中以 is-style-xxx 形式呈现。
 */

/* =========================================================
 * 1. Button
 * --------------------------------------------------------
 * 基类 .eth-btn + 修饰符
 * Block Style 映射：
 *   is-style-eth-primary    → .eth-btn--primary
 *   is-style-eth-secondary  → .eth-btn--secondary
 *   is-style-eth-outline    → .eth-btn--outline
 *   is-style-eth-ghost      → .eth-btn--ghost
 *   is-style-eth-soft       → .eth-btn--soft
 * ========================================================= */
.eth-btn,
.wp-block-button.is-style-eth-primary .wp-block-button__link,
.wp-block-button.is-style-eth-secondary .wp-block-button__link,
.wp-block-button.is-style-eth-outline .wp-block-button__link,
.wp-block-button.is-style-eth-ghost .wp-block-button__link,
.wp-block-button.is-style-eth-soft .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--eth-space-2xs);
	padding: 0.7em 1.5em;
	font-size: var(--eth-fs-small);
	font-weight: var(--eth-fw-semibold);
	line-height: 1.1;
	border: 1px solid transparent;
	border-radius: var(--eth-radius-m);
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--eth-transition-s),
		background var(--eth-transition-s),
		color var(--eth-transition-s),
		border-color var(--eth-transition-s),
		box-shadow var(--eth-transition-s);
}

.eth-btn:hover,
.wp-block-button.is-style-eth-primary .wp-block-button__link:hover,
.wp-block-button.is-style-eth-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-eth-outline .wp-block-button__link:hover,
.wp-block-button.is-style-eth-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-eth-soft .wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* Primary */
.eth-btn--primary,
.wp-block-button.is-style-eth-primary .wp-block-button__link {
	background: var(--eth-primary);
	color: var(--eth-light);
	box-shadow: var(--eth-shadow-s);
}
.eth-btn--primary:hover,
.wp-block-button.is-style-eth-primary .wp-block-button__link:hover {
	background: var(--eth-primary-d-1);
	color: var(--eth-light);
	box-shadow: var(--eth-shadow-m);
}

/* Secondary */
.eth-btn--secondary,
.wp-block-button.is-style-eth-secondary .wp-block-button__link {
	background: var(--eth-secondary);
	color: var(--eth-light);
	box-shadow: var(--eth-shadow-s);
}
.eth-btn--secondary:hover,
.wp-block-button.is-style-eth-secondary .wp-block-button__link:hover {
	background: var(--eth-secondary-d-1);
}

/* Outline */
.eth-btn--outline,
.wp-block-button.is-style-eth-outline .wp-block-button__link {
	background: transparent;
	border-color: var(--eth-primary);
	color: var(--eth-primary);
}
.eth-btn--outline:hover,
.wp-block-button.is-style-eth-outline .wp-block-button__link:hover {
	background: var(--eth-primary);
	color: var(--eth-light);
}

/* Ghost */
.eth-btn--ghost,
.wp-block-button.is-style-eth-ghost .wp-block-button__link {
	background: var(--eth-primary-5);
	border-color: var(--eth-primary-20);
	color: var(--eth-primary);
}
.eth-btn--ghost:hover,
.wp-block-button.is-style-eth-ghost .wp-block-button__link:hover {
	background: var(--eth-primary-10);
	border-color: var(--eth-primary-40);
}

/* Soft */
.eth-btn--soft,
.wp-block-button.is-style-eth-soft .wp-block-button__link {
	background: var(--eth-primary-10);
	color: var(--eth-primary);
	border-color: var(--eth-primary-10);
}
.eth-btn--soft:hover,
.wp-block-button.is-style-eth-soft .wp-block-button__link:hover {
	background: var(--eth-primary-20);
	box-shadow: var(--eth-shadow-s);
}

/* Size modifiers */
.eth-btn--sm { font-size: var(--eth-fs-xs); padding: 0.5em 1em; }
.eth-btn--lg { font-size: var(--eth-fs-body); padding: 0.9em 2em; }
.eth-btn--block { width: 100%; }
.eth-btn--pill { border-radius: var(--eth-radius-full); }

/* =========================================================
 * 2. Card
 * --------------------------------------------------------
 * 通用卡片容器，用于 loop 项、产品卡、特性卡
 * Block Style 映射：is-style-eth-card
 * ========================================================= */
.eth-card {
	display: grid;
	gap: var(--eth-space-xs);
	padding: var(--eth-space-m);
	background: var(--eth-bg-surface);
	color: var(--eth-text-body);
	border-radius: var(--eth-radius-m);
	box-shadow: var(--eth-shadow-s);
	transition: transform var(--eth-transition-m),
		box-shadow var(--eth-transition-m);
}

.eth-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--eth-shadow-l);
}

.eth-card--flat {
	box-shadow: none;
	border: 1px solid var(--eth-border);
}

.eth-card--primary {
	background: var(--eth-primary);
	color: var(--eth-light);
}

.eth-card--muted {
	background: var(--eth-bg-muted);
}

/* 卡片标题统一处理 */
.eth-card__title {
	color: inherit;
	font-size: var(--eth-fs-h4);
	font-weight: var(--eth-fw-semibold);
}

.eth-card--primary .eth-card__title,
.eth-card--secondary .eth-card__title {
	color: var(--eth-light);
}

/* =========================================================
 * 3. Form Inputs
 * --------------------------------------------------------
 * 注意：Fluent Forms 自带样式，这里仅样式化原生 input/textarea/select
 * 与简短接触表单
 * ========================================================= */
.eth-input,
input[type="text"].eth-input,
input[type="email"].eth-input,
input[type="url"].eth-input,
input[type="tel"].eth-input,
input[type="password"].eth-input,
input[type="search"].eth-input,
textarea.eth-input,
select.eth-input {
	padding: 0.65em 0.9em;
	background: var(--eth-bg-surface);
	color: var(--eth-text-title);
	font-size: var(--eth-fs-body);
	border: 1px solid var(--eth-border);
	border-radius: var(--eth-radius-m);
	box-shadow: var(--eth-shadow-xs);
	transition: border-color var(--eth-transition-s),
		box-shadow var(--eth-transition-s);
	outline: 0;
	width: 100%;
}

.eth-input:focus {
	border-color: var(--eth-primary);
	box-shadow: 0 0 0 3px var(--eth-primary-20);
}

.eth-input::placeholder {
	color: var(--eth-text-muted);
}

.eth-input:invalid {
	border-color: var(--eth-error);
}

/* =========================================================
 * 4. Badge
 * ========================================================= */
.eth-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--eth-space-3xs);
	padding: 0.3em 0.8em;
	background: var(--eth-primary-10);
	color: var(--eth-primary);
	font-size: var(--eth-fs-xs);
	font-weight: var(--eth-fw-medium);
	border-radius: var(--eth-radius-full);
	line-height: 1.2;
}

.eth-badge--secondary { background: var(--eth-secondary-10); color: var(--eth-secondary); }
.eth-badge--tertiary  { background: var(--eth-tertiary-10); color: var(--eth-tertiary); }
.eth-badge--success   { background: var(--eth-success-10); color: var(--eth-success); }
.eth-badge--error     { background: var(--eth-error-10); color: var(--eth-error); }
.eth-badge--neutral   { background: var(--eth-dark-10); color: var(--eth-text-title); }

/* =========================================================
 * 5. Link（语义化链接，带下划线动画）
 * ========================================================= */
.eth-link {
	color: var(--eth-link);
	font-weight: var(--eth-fw-medium);
	box-shadow: inset 0 -2px var(--eth-primary-20);
	transition: box-shadow var(--eth-transition-s),
		color var(--eth-transition-s);
}

.eth-link:hover {
	color: var(--eth-link-hover);
	box-shadow: inset 0 -2px var(--eth-primary);
}

/* =========================================================
 * 6. Divider
 * ========================================================= */
.eth-divider {
	width: 100%;
	height: 1px;
	background: var(--eth-border);
	border: 0;
	margin: var(--eth-space-m) 0;
}

.eth-divider--vertical {
	width: 1px;
	height: 100%;
	margin: 0 var(--eth-space-s);
}

/* =========================================================
 * 7. Avatar
 * ========================================================= */
.eth-avatar {
	width: var(--eth-space-2xl);
	height: var(--eth-space-2xl);
	border-radius: var(--eth-radius-full);
	object-fit: cover;
	box-shadow: var(--eth-shadow-s);
}

.eth-avatar--sm { width: var(--eth-space-l); height: var(--eth-space-l); }
.eth-avatar--lg { width: var(--eth-space-3xl); height: var(--eth-space-3xl); }

/* =========================================================
 * 8. Loop 卡片专用（产品/文章列表）
 * --------------------------------------------------------
 * .eth-loop-item 是循环项基础类
 * 与 template-parts/loops/ 配合使用
 * ========================================================= */
.eth-loop-item {
	display: flex;
	flex-direction: column;
	background: var(--eth-bg-surface);
	border-radius: var(--eth-radius-m);
	overflow: hidden;
	box-shadow: var(--eth-shadow-s);
	transition: transform var(--eth-transition-m),
		box-shadow var(--eth-transition-m);
}

.eth-loop-item:hover {
	transform: translateY(-3px);
	box-shadow: var(--eth-shadow-l);
}

.eth-loop-item__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--eth-bg-muted);
}

.eth-loop-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--eth-transition-l);
}

.eth-loop-item:hover .eth-loop-item__media img {
	transform: scale(1.05);
}

.eth-loop-item__body {
	display: flex;
	flex-direction: column;
	gap: var(--eth-space-2xs);
	padding: var(--eth-space-m);
	flex: 1;
}

.eth-loop-item__title {
	font-size: var(--eth-fs-h4);
	font-weight: var(--eth-fw-semibold);
	color: var(--eth-text-title);
}

.eth-loop-item__title a {
	color: inherit;
}

.eth-loop-item__title a:hover {
	color: var(--eth-primary);
}

.eth-loop-item__meta {
	display: flex;
	gap: var(--eth-space-xs);
	font-size: var(--eth-fs-xs);
	color: var(--eth-text-muted);
}

.eth-loop-item__excerpt {
	color: var(--eth-text-body);
	font-size: var(--eth-fs-small);
	line-height: var(--eth-lh-body);
}

/* 列表式 loop */
.eth-loop-item--list {
	flex-direction: row;
}

.eth-loop-item--list .eth-loop-item__media {
	width: 40%;
	aspect-ratio: 4 / 3;
}

.eth-loop-item--list .eth-loop-item__body {
	width: 60%;
}

@media (max-width: 768px) {
	.eth-loop-item--list {
		flex-direction: column;
	}
	.eth-loop-item--list .eth-loop-item__media,
	.eth-loop-item--list .eth-loop-item__body {
		width: 100%;
	}
}

/* 紧凑式 loop */
.eth-loop-item--compact {
	flex-direction: row;
	align-items: center;
	gap: var(--eth-space-m);
	padding: var(--eth-space-s);
	box-shadow: none;
	border: 1px solid var(--eth-border);
}

.eth-loop-item--compact .eth-loop-item__media {
	width: 80px;
	aspect-ratio: 1;
	border-radius: var(--eth-radius-s);
	flex-shrink: 0;
}

.eth-loop-item--compact .eth-loop-item__body {
	padding: 0;
	flex: 1;
}

.eth-loop-item--compact .eth-loop-item__title {
	font-size: var(--eth-fs-body);
}

/* =========================================================
 * Grid System
 * --------------------------------------------------------
 * Generic grid layout utilities. Used by loop styles and
 * content layouts across all page types.
 * ========================================================= */
.eth-grid {
    display: grid;
    gap: var(--eth-space-l);
}
.eth-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}
.eth-grid--reverse {
    direction: rtl;
}
.eth-grid--reverse > * {
    direction: ltr;
}
.eth-grid--auto {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.eth-grid--cols-3 {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.eth-grid--cols-4 {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.eth-grid--cols-5 {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
@media (max-width: 768px) {
    .eth-grid--2 {
        grid-template-columns: 1fr;
    }
    .eth-grid--reverse {
        direction: ltr;
    }
}

/* ===== utilities.css ===== */
/**
 * Ethantheme Utilities
 * ----------------------------------------------------
 * 精简工具类（仅高频使用）
 * 完整 utility 列表参考设计系统.css，按需扩展
 */

/* =========================================================
 * 1. Display
 * ========================================================= */
.eth-d-block { display: block; }
.eth-d-inline { display: inline; }
.eth-d-inline-block { display: inline-block; }
.eth-d-flex { display: flex; }
.eth-d-grid { display: grid; }
.eth-d-none { display: none; }

@media (max-width: 768px) {
	.eth-d-none\@m { display: none; }
	.eth-d-block\@m { display: block; }
	.eth-d-flex\@m { display: flex; }
}

/* =========================================================
 * 2. Flex 工具
 * ========================================================= */
.eth-flex-row { flex-direction: row; }
.eth-flex-col { flex-direction: column; }
.eth-flex-wrap { flex-wrap: wrap; }
.eth-flex-1 { flex: 1; }
.eth-items-center { align-items: center; }
.eth-items-start { align-items: flex-start; }
.eth-items-end { align-items: flex-end; }
.eth-justify-center { justify-content: center; }
.eth-justify-between { justify-content: space-between; }
.eth-justify-start { justify-content: flex-start; }
.eth-justify-end { justify-content: flex-end; }
.eth-gap-2xs { gap: var(--eth-space-2xs); }
.eth-gap-xs { gap: var(--eth-space-xs); }
.eth-gap-s { gap: var(--eth-space-s); }
.eth-gap-m { gap: var(--eth-space-m); }
.eth-gap-l { gap: var(--eth-space-l); }

/* =========================================================
 * 3. Grid 工具
 * ========================================================= */
.eth-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eth-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eth-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.eth-grid-auto-xs { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.eth-grid-auto-s  { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.eth-grid-auto-m  { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.eth-grid-auto-l  { grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr)); }

@media (max-width: 992px) {
	.eth-grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.eth-grid-cols-2,
	.eth-grid-cols-3,
	.eth-grid-cols-4 { grid-template-columns: 1fr; }
}

/* =========================================================
 * 4. 文字
 * ========================================================= */
.eth-text-left { text-align: left; }
.eth-text-center { text-align: center; }
.eth-text-right { text-align: right; }
.eth-text-xs { font-size: var(--eth-fs-xs); }
.eth-text-s { font-size: var(--eth-fs-small); }
.eth-text-m { font-size: var(--eth-fs-body); }
.eth-text-l { font-size: var(--eth-fs-h4); }
.eth-text-xl { font-size: var(--eth-fs-h3); }
.eth-text-2xl { font-size: var(--eth-fs-h2); }
.eth-text-3xl { font-size: var(--eth-fs-h1); }
.eth-text-4xl { font-size: var(--eth-fs-hero); }

.eth-fw-medium { font-weight: var(--eth-fw-medium); }
.eth-fw-semibold { font-weight: var(--eth-fw-semibold); }
.eth-fw-bold { font-weight: var(--eth-fw-bold); }

.eth-text-muted { color: var(--eth-text-muted); }
.eth-text-title { color: var(--eth-text-title); }
.eth-text-primary { color: var(--eth-primary); }
.eth-text-secondary { color: var(--eth-secondary); }
.eth-text-invert { color: var(--eth-text-invert); }

/* =========================================================
 * 5. 间距（仅常用，完整版按需扩展）
 * ========================================================= */
.eth-mt-2xs { margin-top: var(--eth-space-2xs); }
.eth-mt-xs { margin-top: var(--eth-space-xs); }
.eth-mt-s { margin-top: var(--eth-space-s); }
.eth-mt-m { margin-top: var(--eth-space-m); }
.eth-mt-l { margin-top: var(--eth-space-l); }
.eth-mt-xl { margin-top: var(--eth-space-xl); }
.eth-mt-2xl { margin-top: var(--eth-space-2xl); }
.eth-mt-0 { margin-top: 0; }

.eth-mb-2xs { margin-bottom: var(--eth-space-2xs); }
.eth-mb-xs { margin-bottom: var(--eth-space-xs); }
.eth-mb-s { margin-bottom: var(--eth-space-s); }
.eth-mb-m { margin-bottom: var(--eth-space-m); }
.eth-mb-l { margin-bottom: var(--eth-space-l); }
.eth-mb-xl { margin-bottom: var(--eth-space-xl); }
.eth-mb-0 { margin-bottom: 0; }

.eth-pt-m { padding-top: var(--eth-space-m); }
.eth-pb-m { padding-bottom: var(--eth-space-m); }
.eth-p-m { padding: var(--eth-space-m); }
.eth-p-s { padding: var(--eth-space-s); }
.eth-p-xs { padding: var(--eth-space-xs); }

/* =========================================================
 * 6. 尺寸
 * ========================================================= */
.eth-w-full { width: 100%; }
.eth-w-auto { width: auto; }
.eth-max-w-narrow { max-width: var(--eth-container-narrow); margin-inline: auto; }
.eth-max-w-base { max-width: var(--eth-container); margin-inline: auto; }

/* =========================================================
 * 7. 颜色背景（仅高频）
 * ========================================================= */
.eth-bg-primary { background: var(--eth-primary); color: var(--eth-light); }
.eth-bg-primary-5 { background: var(--eth-primary-5); }
.eth-bg-primary-10 { background: var(--eth-primary-10); }
.eth-bg-surface { background: var(--eth-bg-surface); }
.eth-bg-muted { background: var(--eth-bg-muted); }
.eth-bg-body { background: var(--eth-bg-body); }

/* =========================================================
 * 8. 圆角 / 阴影 / 边框
 * ========================================================= */
.eth-radius-s { border-radius: var(--eth-radius-s); }
.eth-radius-m { border-radius: var(--eth-radius-m); }
.eth-radius-l { border-radius: var(--eth-radius-l); }
.eth-radius-full { border-radius: var(--eth-radius-full); }

.eth-shadow-s { box-shadow: var(--eth-shadow-s); }
.eth-shadow-m { box-shadow: var(--eth-shadow-m); }
.eth-shadow-l { box-shadow: var(--eth-shadow-l); }

.eth-border { border: 1px solid var(--eth-border); }
.eth-border-strong { border: 1px solid var(--eth-border-strong); }
.eth-border-t { border-top: 1px solid var(--eth-border); }
.eth-border-b { border-bottom: 1px solid var(--eth-border); }

/* =========================================================
 * 9. 定位
 * ========================================================= */
.eth-relative { position: relative; }
.eth-absolute { position: absolute; }
.eth-sticky { position: sticky; }
.eth-fixed { position: fixed; }

/* =========================================================
 * 10. 视觉
 * ========================================================= */
.eth-overflow-hidden { overflow: hidden; }
.eth-aspect-1 { aspect-ratio: 1; }
.eth-aspect-video { aspect-ratio: 16 / 9; }
.eth-aspect-4-3 { aspect-ratio: 4 / 3; }
.eth-aspect-3-4 { aspect-ratio: 3 / 4; }
.eth-object-cover { object-fit: cover; }
.eth-object-contain { object-fit: contain; }

/* clickable-parent 模式：让整张卡片可点击 */
.eth-clickable {
	position: relative;
}

.eth-clickable a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* 隐藏标题（SEO 友好） */
.eth-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}