/**
 * Oberon — main stylesheet
 *
 * 現代簡約風格，沿用 oberonlai.blog 既有設計系統配色。
 * 配色 token 來源：docs/theme-redesign/02-design-system.md（Elementor Kit ID 9）。
 *
 * 1.0  Design tokens (:root)
 * 2.0  Reset & base
 * 3.0  Typography
 * 4.0  Layout / containers
 * 5.0  Buttons & links
 * 6.0  Forms & search
 * 7.0  Header & navigation
 * 8.0  Reading progress
 * 9.0  Hero
 * 10.0 Section heads
 * 11.0 Post grid & cards
 * 12.0 Archive / page heads
 * 13.0 Single post
 * 14.0 Pagination
 * 15.0 Newsletter
 * 16.0 404
 * 17.0 Footer
 * 18.0 WooCommerce
 * 19.0 Utilities & a11y
 */


/**
 * 1.0 Design tokens
 */

:root {

	/* Colors — system (沿用設計系統) */
	--color-primary: #a0b2b9;
	--color-secondary: #757575;
	--color-text: #060606;
	--color-accent: #000000;

	/* Colors — custom */
	--color-divider: #efefef;
	--color-white: #ffffff;
	--color-light-primary: #ffdc73;
	--color-accent-warm: #ffb74d;
	--color-dark-accent: #f57c00;
	--color-gray-1: #f2f2f2;
	--color-gray-2: #f7f9f9;
	--color-divider-02: #dddddd;

	/* Brand — 取自 DailyWP dev logo（黃 + 炭黑） */
	--brand-dark: #293132;            /* logo「WPdev.」炭黑，用於主要動作/頁尾 */
	--accent: #ffdc73;                /* logo「Daily」黃，品牌強調色 */
	--accent-soft: #fff4d6;           /* 黃色淡底：highlighter／標籤底 */
	--accent-line: #ffd24d;           /* 略深黃，細線/底線用，對比較足 */

	/* Region-only — 首頁 hero 點綴 */
	--color-hero-purple: #833ca3;

	/* Surfaces */
	--surface: var(--color-white);
	--surface-alt: var(--color-gray-2);
	--muted: var(--color-secondary);

	/* Typography */
	--font-sans: "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
	--font-serif: "Noto Serif TC", "PingFang TC", serif;
	--font-deco: "Abhaya Libre", Georgia, serif;

	--fs-body: 1rem;
	--lh-body: 1.8;
	--lh-heading: 1.5;

	/* Spacing scale */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-5: 3rem;
	--space-6: 4rem;
	--space-7: 6rem;
	--space-8: 8rem;

	/* Layout */
	--container: 760px;
	--container-wide: 1140px;
	--gutter: 1.25rem;

	/* Radius */
	--radius-sm: 2px;
	--radius: 10px;
	--radius-lg: 20px;

	/* Effects */
	--shadow-sm: 0 1px 2px rgba(6, 6, 6, 0.04);
	--shadow: 0 8px 30px rgba(6, 6, 6, 0.08);
	--ring: 0 0 0 3px rgba(160, 178, 185, 0.35);
	--transition: 0.25s ease;

	/* Breakpoints (參考用，媒體查詢直接寫值) */
	--bp-md: 768px;
	--bp-lg: 1025px;

	/* Header height（主列最小高度）。 */
	--header-h: 72px;

	/* 整個 sticky 標頭的實際高度（topbar + 主列 +（登入時）WP 工具列），
	   由 main.js 量測後覆寫；此為 JS 載入前的後備值。供 sticky 側欄與錨點偏移使用。 */
	--header-offset: 120px;
}


/**
 * 2.0 Reset & base
 */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-offset) + 1rem);
}

body {
	margin: 0;
	background: var(--surface);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
picture,
video,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style-position: inside;
}


/**
 * 3.0 Typography
 */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.6em;
	color: var(--brand-dark);
	font-weight: 700;
	line-height: var(--lh-heading);
}

h1 {
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	letter-spacing: -0.01em;
}

/* h2 為品牌識別關鍵：襯線體 + weight 600 + letter-spacing 3px（沿用） */
h2 {
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);
	font-weight: 600;
	letter-spacing: 3px;
}

h3 {
	font-size: 1.25rem;
	font-weight: 600;
}

h4 {
	font-size: 1rem;
	font-weight: 600;
}

p {
	margin: 0 0 1.4em;
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition);
}

a:hover,
a:focus {
	color: var(--color-dark-accent);
}

hr {
	border: 0;
	border-top: 1px solid var(--color-divider);
	margin: var(--space-5) 0;
}

::selection {
	background: var(--color-light-primary);
	color: var(--color-text);
}


/**
 * 4.0 Layout / containers
 */

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

.container--wide {
	max-width: var(--container-wide);
}

.site-main {
	display: block;
	min-height: 50vh;
}

.home-section {
	padding-block: var(--space-7);
}

.home-section--alt {
	background: var(--surface-alt);
}

.home-section__action {
	margin-top: var(--space-5);
	text-align: center;
}

/* 首頁 — 關於我（權威簡介） */
.home-about {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	align-items: center;
}

.home-about__photo {
	position: relative;
	max-width: 300px;
	margin-inline: auto;
}

.home-about__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: top center;
	border-radius: var(--radius-lg);
	box-shadow: 0 18px 44px rgba(41, 49, 50, 0.16);
}

.home-about__badge {
	position: absolute;
	bottom: -14px;
	right: -6px;
	display: inline-flex;
	align-items: baseline;
	gap: 0.35rem;
	padding: 0.6rem 1rem;
	border-radius: 999px;
	background: var(--brand-dark);
	color: #fff;
	font-size: 0.82rem;
	box-shadow: 0 10px 24px rgba(41, 49, 50, 0.25);
}

.home-about__badge strong {
	font-family: var(--font-deco);
	font-size: 1.2rem;
	color: var(--accent);
}

.home-about__name {
	margin: 0.4rem 0 0.2rem;
	font-size: clamp( 1.6rem, 1.3rem + 1.4vw, 2.2rem );
}

.home-about__role {
	margin: 0 0 var(--space-3);
	color: var(--color-dark-accent);
	font-weight: 600;
}

.home-about__bio {
	margin: 0 0 var(--space-3);
	color: var(--color-secondary);
	line-height: 1.9;
}

.home-about__creds {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.6rem;
	margin: 0 0 var(--space-4);
	padding: 0;
}

.home-about__creds li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.95rem;
}

.home-about__creds span {
	color: var(--color-dark-accent);
	font-weight: 800;
}

@media screen and ( min-width: 600px ) {

	.home-about__creds {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and ( min-width: 860px ) {

	.home-about {
		grid-template-columns: 300px 1fr;
		gap: var(--space-6);
	}

	.home-about__photo {
		margin-inline: 0;
	}
}

/* 首頁 — 你適合我，如果 */
.home-qualify {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.home-qualify__item {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	padding: 1.2rem 1.4rem;
	background: var(--color-white);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
}

.home-qualify__check {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--accent-soft);
	color: var(--color-dark-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
}

.home-qualify__item p {
	margin: 0;
	line-height: 1.6;
}

/* 首頁 — 客戶見證（商品評論） */
/* 客戶見證 carousel */
.home-testi-carousel {
	position: relative;
}

.home-testi__track {
	display: flex;
	gap: 1.2rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 0.5rem;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.home-testi__track::-webkit-scrollbar {
	display: none;
}

.home-testi__track .home-testi__card {
	flex: 0 0 88%;
	scroll-snap-align: start;
}

@media screen and ( min-width: 760px ) {

	.home-testi__track .home-testi__card {
		flex-basis: calc( 50% - 0.6rem );
	}
}

@media screen and ( min-width: 1025px ) {

	.home-testi__track .home-testi__card {
		flex-basis: calc( 33.333% - 0.8rem );
	}
}

.testi-nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--color-divider);
	background: var(--color-white);
	color: var(--brand-dark);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	box-shadow: 0 6px 18px rgba(41, 49, 50, 0.12);
	transition: background var(--transition), color var(--transition), opacity var(--transition);
}

.testi-nav:hover {
	background: var(--brand-dark);
	color: var(--color-white);
}

.testi-nav--prev {
	left: -12px;
}

.testi-nav--next {
	right: -12px;
}

.testi-nav[disabled] {
	opacity: 0.3;
	cursor: default;
}

@media screen and ( max-width: 920px ) {

	.testi-nav--prev {
		left: 2px;
	}

	.testi-nav--next {
		right: 2px;
	}
}

.home-testi {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.2rem;
}

.home-testi__card {
	display: flex;
	flex-direction: column;
	padding: 1.6rem;
	background: var(--color-white);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
}

.home-testi__stars {
	color: var(--accent-line);
	letter-spacing: 2px;
	margin-bottom: 0.6rem;
}

.home-testi__quote {
	margin: 0;
	color: var(--brand-dark);
	line-height: 1.8;
	flex: 1;
}

.home-testi__who {
	margin-top: 1rem;
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.home-testi__av {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient( 135deg, var(--accent), var(--color-dark-accent) );
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

.home-testi__who b {
	display: block;
	font-size: 0.92rem;
}

.home-testi__who span {
	color: var(--color-secondary);
	font-size: 0.8rem;
}

/* 首頁 — 成功案例 */
.home-cases {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

.case-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--color-white);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
	color: var(--color-text);
	transition: transform var(--transition), box-shadow var(--transition);
}

.case-card:hover {
	transform: translateY( -4px );
	box-shadow: 0 18px 40px rgba(41, 49, 50, 0.1);
	color: var(--color-text);
}

.case-card__thumb {
	display: block;
	aspect-ratio: 16 / 10;
}

.case-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.case-card__thumb.is-placeholder {
	background:
		radial-gradient( 60% 80% at 75% 20%, rgba(255, 220, 115, 0.5), transparent 60% ),
		linear-gradient( 135deg, var(--accent-soft), #e6edef );
}

.case-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
	padding: 1.3rem 1.4rem 1.5rem;
}

.case-card__tag {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-dark-accent);
}

.case-card__title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.45;
}

.case-card__excerpt {
	flex: 1;
	margin: 0;
	color: var(--color-secondary);
	font-size: 0.92rem;
	line-height: 1.7;
}

.case-card__more {
	margin-top: 0.3rem;
	color: var(--color-dark-accent);
	font-weight: 600;
	font-size: 0.9rem;
}

@media screen and ( min-width: 760px ) {

	.home-cases {
		grid-template-columns: 1fr 1fr;
	}

	.case-card--featured {
		grid-column: 1 / -1;
		flex-direction: row;
	}

	.case-card--featured .case-card__thumb {
		flex: 0 0 46%;
		aspect-ratio: auto;
		min-height: 260px;
	}

	.case-card--featured .case-card__body {
		justify-content: center;
		padding: var(--space-5);
	}

	.case-card--featured .case-card__title {
		font-size: 1.7rem;
	}

	.case-card--featured .case-card__excerpt {
		flex: 0 1 auto;
		font-size: 1rem;
	}
}

@media screen and ( min-width: 1025px ) {

	.home-cases {
		grid-template-columns: repeat( 3, 1fr );
	}

	.case-card--featured .case-card__thumb {
		flex-basis: 52%;
	}
}

/* 首頁 — 常見問題 FAQ（全寬，與標題齊左） */
.home-faq {
	max-width: none;
}

.home-faq__item {
	border-bottom: 1px solid var(--color-divider);
}

.home-faq__item summary {
	cursor: pointer;
	list-style: none;
	padding: 1.2rem 0;
	font-weight: 700;
	color: var(--brand-dark);
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.home-faq__item summary::-webkit-details-marker {
	display: none;
}

.home-faq__item summary::after {
	content: "＋";
	color: var(--color-dark-accent);
}

.home-faq__item[open] summary::after {
	content: "－";
}

.home-faq__item p {
	margin: 0 0 1.2rem;
	color: var(--color-secondary);
	line-height: 1.8;
}

/* 首頁 — 強 CTA（滿版淺底 + 背景動畫，比照 hero） */
.home-cta {
	position: relative;
	overflow: hidden;
	padding-block: var(--space-7);
	text-align: center;
	background:
		radial-gradient( 55% 85% at 50% 0%, rgba(255, 220, 115, 0.18), transparent 60% ),
		radial-gradient( 40% 60% at 12% 100%, rgba(160, 178, 185, 0.12), transparent 60% ),
		var(--surface);
}

.home-cta__inner {
	max-width: 720px;
	margin-inline: auto;
}

.home-cta h2 {
	margin: 0 0 0.5rem;
}

.home-cta p {
	color: var(--color-secondary);
	margin: 0 0 var(--space-4);
}

.home-cta__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	justify-content: center;
}

.home-cta__btns .btn--solid {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--brand-dark);
}

/* 首頁 — 服務項目介紹 */
.home-services {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

.home-service {
	display: block;
	padding: var(--space-4);
	background: var(--color-white);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
	color: var(--color-text);
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.home-service:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: 0 18px 40px rgba(41, 49, 50, 0.1);
	color: var(--color-text);
}

.home-service__num {
	display: block;
	margin-bottom: var(--space-2);
	font-family: var(--font-deco);
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1;
	color: var(--accent);
	-webkit-text-stroke: 1px var(--accent-line);
}

.home-service__title {
	margin: 0 0 0.6rem;
	font-size: 1.25rem;
	font-weight: 700;
}

.home-service__desc {
	margin: 0 0 var(--space-3);
	color: var(--color-secondary);
	font-size: 0.95rem;
	line-height: 1.8;
}

.home-service__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--brand-dark);
	font-size: 0.9rem;
	font-weight: 600;
}

.home-service:hover .home-service__more {
	color: var(--color-dark-accent);
}

/* 首頁 — 文章分類篩選 */
.post-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: var(--space-5);
}

.post-filter__btn {
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--color-divider-02);
	border-radius: 999px;
	background: transparent;
	color: var(--brand-dark);
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.post-filter__btn:hover {
	border-color: var(--brand-dark);
}

.post-filter__btn.is-active {
	background: var(--brand-dark);
	border-color: var(--brand-dark);
	color: var(--color-white);
}

/* AJAX 篩選載入狀態 */
.js-post-filter-grid {
	transition: opacity 0.2s ease;
}

.js-post-filter-grid.is-loading {
	opacity: 0.35;
	pointer-events: none;
}

.post-filter__empty {
	grid-column: 1 / -1;
	padding: var(--space-5);
	color: var(--color-secondary);
	text-align: center;
}

/* 連結式分類篩選（文章列表 / 分類封存頁，置中於標題下方） */
.post-filter--links {
	justify-content: center;
	margin-bottom: var(--space-6);
}

a.post-filter__btn {
	text-decoration: none;
}

/* 首頁 — 訂閱表單 */
.oberon-subscribe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	max-width: 460px;
	margin-inline: auto;
}

.oberon-subscribe input[type="email"] {
	flex: 1;
}

.oberon-subscribe .btn {
	flex: 0 0 auto;
}

.oberon-subscribe__msg {
	flex: 0 0 100%;
	margin: 0.2rem 0 0;
	font-size: 0.85rem;
	color: var(--accent);
}

.oberon-subscribe__msg.is-error {
	color: #ff9b8a;
}

/* 訂閱電子報頁：ConvertKit 過往廣播列表（[convertkit_broadcasts]）。 */
.convertkit-broadcasts {
	margin-top: var(--space-3);
}

.convertkit-broadcasts-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.convertkit-broadcast {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1.2rem;
	align-items: baseline;
	padding: 0.95rem 0;
	border-bottom: 1px solid var(--color-divider);
}

.convertkit-broadcast time {
	flex: 0 0 8rem;
	color: var(--color-secondary);
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
}

.convertkit-broadcast-title {
	flex: 1 1 60%;
	color: var(--color-text);
	font-weight: 600;
}

.convertkit-broadcast-title:hover {
	color: var(--color-dark-accent);
}

.convertkit-broadcasts-pagination {
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin: var(--space-4) 0 0;
	padding: 0;
	list-style: none;
}

.convertkit-broadcasts-pagination li {
	list-style: none;
	margin: 0;
}

.convertkit-broadcasts-pagination-next {
	margin-left: auto;
}

.convertkit-broadcasts-pagination a,
.convertkit-broadcasts-pagination button {
	display: inline-block;
	padding: 0.5rem 1.3rem;
	border: 1px solid var(--brand-dark);
	border-radius: 999px;
	background: transparent;
	color: var(--brand-dark);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}

.convertkit-broadcasts-pagination a:hover,
.convertkit-broadcasts-pagination button:hover {
	background: var(--brand-dark);
	color: var(--color-white);
}

.newsletter__note {
	margin-top: var(--space-2);
	color: rgba(255, 255, 255, 0.45);
	font-size: 0.8rem;
}


/**
 * 5.0 Buttons & links
 */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.85rem 1.7rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--brand-dark);
	color: var(--color-white);
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	cursor: pointer;
	transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn:hover,
.btn:focus {
	/* 帶回品牌黃：hover 轉鵝黃底 + 炭黑字 */
	background: var(--accent);
	color: var(--brand-dark);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(255, 220, 115, 0.4);
}

.btn--ghost {
	background: transparent;
	border-color: var(--brand-dark);
	color: var(--brand-dark);
}

.btn--ghost:hover,
.btn--ghost:focus {
	background: var(--brand-dark);
	border-color: var(--brand-dark);
	color: var(--color-white);
	transform: translateY(-2px);
}

/* 文字連結＋黃色底線動畫 */
.link-underline {
	background-image: linear-gradient(var(--accent-line), var(--accent-line));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 2px;
	transition: background-size var(--transition);
}

.link-underline:hover {
	background-size: 100% 2px;
}


/**
 * 6.0 Forms & search
 */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--color-divider-02);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-text);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color var(--transition), box-shadow var(--transition);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--color-primary);
	box-shadow: var(--ring);
	outline: none;
}

button,
input[type="button"],
input[type="submit"] {
	cursor: pointer;
}

.search-form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.search-form__field {
	flex: 1;
}

.search-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-primary);
	color: var(--color-white);
}

.search-form__submit:hover {
	background: var(--color-light-primary);
	color: var(--color-text);
}


/**
 * 7.0 Header & navigation
 */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--transition), box-shadow var(--transition);
}

/* 登入後 WP 工具列（桌機 32px / 行動 46px）會占住頂端，sticky header 需下推到工具列下方。
   側欄的 sticky 偏移改用 --header-offset（已由 JS 含入工具列高度），故此處只需處理 header。 */
.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* 螢幕 ≤600px 時 WordPress 會把 #wpadminbar 改成 position: absolute（會隨頁面捲走），
   此時 sticky header 不能再下推 46px，否則捲動後頂端會出現空隙。故重設為 0。 */
@media screen and (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

/* 第一層工具列（方案 2） */
.site-topbar {
	background: var(--brand-dark);
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.82rem;
}

.site-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.5rem;
}

/* 最新文章垂直跑馬燈 */
.site-topbar__ticker {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-width: 0;
}

.site-topbar__ticker-label {
	flex: 0 0 auto;
	color: var(--accent);
	font-weight: 700;
}

.site-topbar__ticker-vp {
	flex: 1 1 auto;
	min-width: 0;
	height: 1.6em;
	overflow: hidden;
}

.site-topbar__ticker-list {
	margin: 0;
	padding: 0;
	list-style: none;
	animation: oberon-ticker 18s infinite;
}

.site-topbar__ticker-list li {
	height: 1.6em;
	line-height: 1.6em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.site-topbar__ticker-list a {
	color: rgba(255, 255, 255, 0.85);
}

.site-topbar__ticker-list a:hover {
	color: var(--accent);
}

@keyframes oberon-ticker {
	0%, 15% { transform: translateY( 0 ); }
	20%, 35% { transform: translateY( -1.6em ); }
	40%, 55% { transform: translateY( -3.2em ); }
	60%, 75% { transform: translateY( -4.8em ); }
	80%, 95% { transform: translateY( -6.4em ); }
	100% { transform: translateY( -8em ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.site-topbar__ticker-list {
		animation: none;
	}
}

.site-topbar__links {
	display: flex;
	gap: 1.3rem;
	flex-shrink: 0;
}

.site-topbar__links a {
	color: rgba(255, 255, 255, 0.78);
}

.site-topbar__links a:hover {
	color: var(--accent);
}

.site-topbar__links a:first-child {
	color: var(--accent);
	font-weight: 600;
}

@media screen and (max-width: 600px) {

	.site-topbar__tag {
		display: none;
	}

	.site-topbar__inner {
		justify-content: center;
	}
}

.site-header.is-scrolled {
	border-bottom-color: var(--color-divider);
	box-shadow: var(--shadow-sm);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-height: var(--header-h);
}

.site-branding .custom-logo-link img,
.site-logo img {
	display: block;
	max-height: 54px;
	width: auto;
}

.site-logo,
.site-branding .custom-logo-link {
	display: inline-flex;
	align-items: center;
	padding-block: 0.55rem; /* logo 上下邊距 */
}

.site-title {
	font-family: var(--font-serif);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--color-text);
}

.site-title:hover {
	color: var(--color-text);
}

/* Primary nav */
.primary-nav {
	display: none;
	flex: 1;
	justify-content: center;
}

.primary-nav .menu {
	display: flex;
	align-items: stretch;
	gap: 0.4rem;
	list-style: none;
}

/* 頂層項目撐滿 header 高度，使 active 黃線落在底部 border 上。 */
.primary-nav > .menu > .menu-item {
	display: flex;
	align-items: stretch;
}

.primary-nav > .menu > .menu-item > .menu-link {
	height: 100%;
}

.menu-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.5rem 0.8rem;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: 0.95rem;
	font-weight: 500;
	cursor: pointer;
	transition: color var(--transition), background var(--transition);
}

.menu-link:hover,
.menu-item--has-children:hover > .menu-link {
	color: var(--color-dark-accent);
	background: var(--color-gray-1);
}

.menu-caret {
	width: 0;
	height: 0;
	border-inline: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform var(--transition);
}

/* Dropdown */
.primary-nav .menu-item--has-children {
	position: relative;
}

.primary-nav .sub-menu {
	position: absolute;
	top: calc(100% + 0.4rem);
	left: 0;
	min-width: 200px;
	padding: 0.5rem;
	list-style: none;
	background: var(--color-white);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

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

.primary-nav .sub-menu .menu-link {
	width: 100%;
	font-weight: 400;
}

/* 目前頁面：黃色下底線 active 樣式 */
.primary-nav .current-menu-item > .menu-link,
.primary-nav .current_page_item > .menu-link,
.primary-nav .current-menu-parent > .menu-link,
.primary-nav .current-menu-ancestor > .menu-link,
.primary-nav .current_page_parent > .menu-link {
	position: relative;
	color: var(--brand-dark);
	font-weight: 600;
}

.primary-nav .menu > .current-menu-item > .menu-link::after,
.primary-nav .menu > .current_page_item > .menu-link::after,
.primary-nav .menu > .current-menu-parent > .menu-link::after,
.primary-nav .menu > .current-menu-ancestor > .menu-link::after,
.primary-nav .menu > .current_page_parent > .menu-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px; /* 落在 header 底部 border 上 */
	height: 3px;
	background: var(--accent-line);
}

/* sub-menu 內的 active 不畫整條底線（避免破版）。 */
.primary-nav .sub-menu .current-menu-item > .menu-link {
	color: var(--color-dark-accent);
}

/* Header actions */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}

.icon-btn:hover {
	background: var(--color-gray-1);
	color: var(--color-dark-accent);
}

.cart-count {
	position: absolute;
	top: 6px;
	right: 4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--color-dark-accent);
	color: var(--color-white);
	font-size: 0.7rem;
	line-height: 18px;
	text-align: center;
}

/* Simple CSS icons */
.icon-search,
.icon-cart {
	display: inline-block;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.icon-search {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E");
}

.icon-cart {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E");
}

/* Hamburger */
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	transition: transform var(--transition), opacity var(--transition);
}

.menu-toggle__bars {
	position: relative;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.menu-toggle__bars::before {
	top: -6px;
}

.menu-toggle__bars::after {
	top: 6px;
}

/* Header search dropdown */
/* Search lightbox */
.search-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(4rem, 12vh, 9rem) var(--space-3) var(--space-3);
}

.search-modal__backdrop {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(6, 6, 6, 0.5);
	opacity: 0;
	transition: opacity var(--transition);
}

.search-modal[hidden] {
	display: none;
}

.search-modal.is-open .search-modal__backdrop {
	opacity: 1;
}

.search-modal__dialog {
	position: relative;
	z-index: 2;
	width: min(100%, 640px);
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: 3rem var(--space-4) var(--space-4);
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity var(--transition), transform var(--transition);
}

.search-modal.is-open .search-modal__dialog {
	opacity: 1;
	transform: translateY(0);
}

.search-modal__close {
	position: absolute;
	top: 0.85rem;
	right: 1rem;
	border: 0;
	background: transparent;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--color-secondary);
	cursor: pointer;
	transition: color var(--transition);
}

.search-modal__close:hover {
	color: var(--brand-dark);
}

.search-modal__form {
	position: relative;
	display: flex;
	align-items: center;
	border: 2px solid var(--brand-dark);
	border-radius: var(--radius);
	padding: 0 1rem;
}

.search-modal__icon {
	flex: none;
	color: var(--brand-dark);
	opacity: 0.7;
}

.search-modal__form .search-modal__field,
.search-modal__form .search-modal__field:focus {
	flex: 1;
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: 0.9rem 0.75rem;
	font-size: 1.05rem;
	color: var(--brand-dark);
	box-shadow: none;
	outline: none;
}

.search-modal__tags {
	margin-top: var(--space-3);
}

.search-modal__tags-label {
	display: block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--color-secondary);
	margin-bottom: 0.6rem;
}

.search-modal__tags-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.search-modal__tag {
	border: 1px solid var(--color-divider-02);
	background: var(--color-white);
	border-radius: 999px;
	padding: 0.35rem 0.85rem;
	font-size: 0.85rem;
	color: var(--brand-dark);
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition);
}

.search-modal__tag:hover {
	background: var(--accent-soft);
	border-color: var(--accent-line);
}

.search-modal__tag.is-active {
	background: var(--accent);
	border-color: var(--accent-line);
	font-weight: 700;
}

.search-modal__results {
	margin-top: var(--space-3);
	overflow-y: auto;
}

.search-modal__results:empty {
	margin-top: 0;
}

.search-modal__results.is-loading {
	opacity: 0.6;
}

.search-modal__loading,
.search-modal__empty {
	color: var(--color-secondary);
	font-size: 0.95rem;
	padding: 0.5rem 0;
}

.search-modal__results-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.search-result + .search-result {
	border-top: 1px solid var(--color-divider);
}

.search-result__link {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 0.85rem 0.5rem;
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition: background var(--transition);
}

.search-result__link:hover {
	background: var(--color-gray-2);
}

.search-result__type {
	flex: none;
	margin-top: 0.15rem;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--brand-dark);
	background: var(--accent-soft);
	border-radius: 999px;
	padding: 0.15rem 0.55rem;
}

.search-result__body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.search-result__title {
	font-weight: 700;
	color: var(--brand-dark);
	line-height: 1.5;
}

.search-result__excerpt {
	font-size: 0.85rem;
	color: var(--color-secondary);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 600px) {
	.search-modal__dialog {
		padding: 3rem var(--space-3) var(--space-3);
	}
}

/* Mobile drawer */
.mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
}

.mobile-drawer__backdrop {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(6, 6, 6, 0.4);
	opacity: 0;
	transition: opacity var(--transition);
}

.mobile-drawer.is-open .mobile-drawer__backdrop {
	opacity: 1;
}

.mobile-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	width: min(86vw, 360px);
	height: 100%;
	padding: var(--space-5) var(--space-3);
	background: var(--color-white);
	box-shadow: var(--shadow);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform var(--transition);
}

.mobile-drawer.is-open .mobile-drawer__panel {
	transform: translateX(0);
}

.mobile-drawer__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	color: var(--color-text);
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
}

.mobile-menu {
	margin-top: var(--space-4);
	list-style: none;
}

.mobile-menu .menu-link {
	width: 100%;
	padding: 0.85rem 0.5rem;
	font-size: 1.05rem;
	border-radius: 0;
	border-bottom: 1px solid var(--color-divider);
}

.mobile-menu .sub-menu {
	list-style: none;
	padding-left: 1rem;
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--transition);
}

.mobile-menu .menu-item--has-children.is-open > .sub-menu {
	max-height: 600px;
}


/**
 * 8.0 Reading progress
 */

.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 60;
	width: 100%;
	height: 3px;
	background: transparent;
	pointer-events: none;
}

.reading-progress__bar {
	display: block;
	width: 0;
	height: 100%;
	background: var(--color-light-primary);
	transition: width 0.1s linear;
}


/**
 * 9.0 Hero
 */

.hero {
	position: relative;
	padding-block: clamp(var(--space-6), 4vw + 2rem, var(--space-8));
	background:
		radial-gradient(45% 55% at 78% 8%, rgba(255, 220, 115, 0.22), transparent 60%),
		radial-gradient(40% 50% at 12% 95%, rgba(160, 178, 185, 0.16), transparent 60%),
		var(--surface);
	overflow: hidden;
}

/* 點陣紋理，邊緣淡出 */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--color-divider-02) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000, transparent 78%);
	mask-image: radial-gradient(70% 60% at 50% 35%, #000, transparent 78%);
	opacity: 0.55;
	pointer-events: none;
}

.hero__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.hero__inner {
	position: relative;
	z-index: 2;
	max-width: 880px;
	text-align: center;
	will-change: transform;
}

.hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: var(--space-3);
	padding: 0.4rem 1rem;
	border: 1px solid var(--color-divider-02);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.7);
	color: var(--brand-dark);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.03em;
}

.hero__kicker::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent-line);
	box-shadow: 0 0 0 3px rgba(255, 220, 115, 0.35);
}

.hero__title {
	margin-bottom: var(--space-3);
	font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.75rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--brand-dark);
}

/* 黃色螢光筆強調 */
.hero__title mark {
	padding: 0 0.08em;
	background: linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 92%, transparent 92%);
	color: inherit;
}

.hero__lead {
	margin-inline: auto;
	max-width: 52ch;
	color: var(--color-secondary);
	font-size: 1.18rem;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-4);
}


/**
 * 10.0 Section heads
 */

.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}

.section-head__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-bottom: 0.55rem;
	color: var(--brand-dark);
	font-family: var(--font-deco);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.section-head__kicker::before {
	content: "";
	width: 18px;
	height: 3px;
	border-radius: 2px;
	background: var(--accent-line);
}

.section-head__title {
	position: relative;
	margin: 0;
	padding-bottom: 0.6rem;
}

/* 標題下方黃色短線 */
.section-head__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 44px;
	height: 4px;
	border-radius: 2px;
	background: var(--accent-line);
}

.section-head__link {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--color-divider-02);
	border-radius: 999px;
	color: var(--brand-dark);
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.section-head__link:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--brand-dark);
}


/**
 * 11.0 Post grid & cards
 */

.post-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

.home-section__grid {
	margin-top: var(--space-4);
}

/* 大版精選文章 */
.featured-post {
	display: grid;
	grid-template-columns: 1fr;
	margin-bottom: var(--space-4);
	overflow: hidden;
	background: var(--color-white);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
	transition: box-shadow var(--transition), border-color var(--transition);
}

.featured-post:hover {
	border-color: transparent;
	box-shadow: 0 24px 50px rgba(41, 49, 50, 0.14);
}

.featured-post__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--color-gray-1);
}

.featured-post__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.featured-post:hover .featured-post__media img {
	transform: scale(1.04);
}

.featured-post__tag {
	position: absolute;
	top: 1rem;
	left: 1rem;
	padding: 0.3rem 0.9rem;
	border-radius: 999px;
	background: var(--accent);
	color: var(--brand-dark);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	box-shadow: 0 6px 16px rgba(255, 220, 115, 0.5);
}

.featured-post__body {
	display: flex;
	flex-direction: column;
	padding: var(--space-4);
}

.featured-post__title {
	margin: 0.5rem 0 0.8rem;
	font-family: var(--font-sans);
	font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.featured-post__title a {
	color: var(--brand-dark);
}

.featured-post__title a:hover {
	color: var(--color-dark-accent);
}

.featured-post__excerpt {
	margin-bottom: var(--space-3);
	color: var(--color-secondary);
	font-size: 1rem;
	line-height: 1.8;
}

.featured-post__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	margin-top: auto;
	padding-top: var(--space-2);
	border-top: 1px solid var(--color-divider);
}

.featured-post__more {
	color: var(--brand-dark);
	font-weight: 600;
	white-space: nowrap;
}

.post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--color-white);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.post-card:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: 0 18px 40px rgba(41, 49, 50, 0.12);
}

.post-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--color-gray-1);
	aspect-ratio: 16 / 9;
}

.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.post-card:hover .post-card__media img {
	transform: scale(1.05);
}

.post-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 30% 30%, rgba(255, 220, 115, 0.35), transparent 60%),
		linear-gradient(135deg, var(--color-gray-1), var(--color-gray-2));
}

.post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.3rem 1.4rem 1.5rem;
}

/* 黃底分類徽章 */
.post-card__cat {
	align-self: flex-start;
	margin-bottom: 0.75rem;
	padding: 0.22rem 0.7rem;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--brand-dark);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.post-card__cat:hover {
	background: var(--accent);
	color: var(--brand-dark);
}

.entry-meta__cat {
	color: var(--brand-dark);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.post-card__title {
	margin-bottom: 0.6rem;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -0.01em;
}

.post-card__title a {
	color: var(--brand-dark);
}

.post-card__title a:hover {
	color: var(--color-dark-accent);
}

.post-card__excerpt {
	margin-bottom: 1.1rem;
	color: var(--color-secondary);
	font-size: 0.93rem;
	line-height: 1.7;
}

.post-card__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.4rem;
	color: var(--color-secondary);
	font-size: 0.8rem;
}

.post-card__meta .dot {
	color: var(--accent-line);
}


/**
 * 12.0 Archive / page heads
 */

.archive-head,
.page-head {
	position: relative;
	overflow: hidden;
	margin-bottom: var(--space-6);
	padding-block: var(--space-7) var(--space-6);
	text-align: center;
	background:
		radial-gradient(45% 70% at 78% 10%, rgba(255, 220, 115, 0.16), transparent 60%),
		radial-gradient(40% 60% at 14% 95%, rgba(160, 178, 185, 0.12), transparent 60%),
		var(--surface);
}

.archive-head > .container,
.page-head > .container {
	max-width: var(--container);
}

/* Hero/標題區 2D 粒子特效容器 */
.has-hero-fx {
	position: relative;
}

.has-hero-fx > .hero-fx {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.has-hero-fx > :not(canvas) {
	position: relative;
	z-index: 1;
}

/* 頁面 hero 不顯示小標 kicker（依站主要求）。 */
.archive-head__kicker,
.services-head .archive-head__kicker {
	display: none;
}

.archive-head__title,
.page-head__title {
	position: relative;
	display: inline-block;
	padding-bottom: 0.7rem;
	color: var(--brand-dark);
	font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.01em;
}

.archive-head__title::after,
.page-head__title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 48px;
	height: 4px;
	border-radius: 2px;
	background: var(--accent-line);
	transform: translateX(-50%);
}

.archive-head__desc {
	margin-top: var(--space-2);
	color: var(--color-secondary);
}

.archive-head__search {
	max-width: 420px;
	margin: var(--space-3) auto 0;
}


/**
 * 13.0 Single post
 */

.entry-header {
	padding-top: var(--space-6);
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: var(--space-2);
	color: var(--color-secondary);
	font-size: 0.85rem;
}

.entry-title {
	margin-bottom: var(--space-4);
	font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem);
	line-height: 1.25;
}

.entry-hero {
	margin-block: var(--space-4) var(--space-6);
}

.entry-hero img {
	width: 100%;
	border-radius: var(--radius-lg);
}

.entry-content {
	font-size: 1.08rem;
	line-height: 1.85;
	/* Break long unbroken strings such as URLs so they never overflow the layout on mobile. */
	overflow-wrap: break-word;
	word-break: break-word;
}

.entry-content > * {
	margin-bottom: 1.5em;
}

.entry-content h2 {
	margin-top: 1.8em;
}

.entry-content h3 {
	margin-top: 1.6em;
}

.entry-content img,
.entry-content figure {
	border-radius: var(--radius);
}

/* 內文超連結：黃色底線，hover 時長高變成文字底色（highlighter）。 */
.entry-content a {
	color: var(--brand-dark);
	font-weight: 500;
	text-decoration: none;
	background-image: linear-gradient( var(--accent-line), var(--accent-line) );
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 0.4em;
	border-radius: 2px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	transition: background-size var(--transition), color var(--transition);
}

.entry-content a:hover {
	color: var(--brand-dark);
	background-size: 100% 100%;
}

/* 圖片連結不加底線/底色。 */
.entry-content a:has( img ) {
	background-image: none;
}

.entry-content blockquote {
	margin: 2em 0;
	padding: 0.5em 0 0.5em 1.5em;
	border-left: 4px solid var(--accent-line);
	color: var(--color-secondary);
	font-style: italic;
}

.entry-content pre {
	padding: 1.2em;
	border-radius: var(--radius);
	background: var(--color-text);
	color: var(--color-gray-1);
	overflow-x: auto;
	font-size: 0.9rem;
	line-height: 1.6;
}

.entry-content :not(pre) > code {
	padding: 0.15em 0.4em;
	border-radius: var(--radius-sm);
	background: var(--color-gray-1);
	font-size: 0.9em;
}

.entry-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: var(--space-5) 0;
	list-style: none;
}

.entry-tags li a {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border: 1px solid var(--color-divider-02);
	border-radius: 999px;
	color: var(--color-secondary);
	font-size: 0.82rem;
}

.entry-tags li a:hover {
	border-color: var(--color-primary);
	color: var(--color-dark-accent);
}

/**
 * 13.5 文章內頁 — 目錄(TOC) + 燈箱 + 延伸閱讀書籤
 */
.single-post__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	padding-top: var(--space-5);
}

.single-post__main {
	min-width: 0;
}

.single-post__layout:not(.has-toc) .single-post__main {
	max-width: 820px;
	margin-inline: auto;
}

/* TOC 切換按鈕（手機版 sidebar toggle） */
.post-toc-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.8rem 1.1rem;
	border: 1px solid var(--color-divider);
	border-radius: var(--radius);
	background: var(--color-gray-2);
	color: var(--brand-dark);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

.post-toc-toggle__icon {
	width: 16px;
	height: 2px;
	position: relative;
	background: currentColor;
	box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
}

.post-toc {
	margin-top: 0.6rem;
	padding: var(--space-3) var(--space-4);
	background: var(--color-gray-2);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
}

.post-toc__title {
	display: block;
	margin-bottom: var(--space-2);
	padding-bottom: 0.6rem;
	border-bottom: 3px solid var(--accent-line);
	font-weight: 700;
	color: var(--brand-dark);
}

.post-toc__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	margin: 0;
	padding: 0;
}

.post-toc__item a {
	display: block;
	padding: 0.4rem 0.6rem;
	border-left: 2px solid transparent;
	border-radius: var(--radius-sm);
	color: var(--color-secondary);
	font-size: 0.9rem;
	line-height: 1.5;
}

.post-toc__item--lvl3 a {
	padding-left: 1.4rem;
	font-size: 0.85rem;
}

.post-toc__item a:hover {
	color: var(--brand-dark);
	background: var(--color-gray-1);
}

.post-toc__item.is-active a {
	color: var(--brand-dark);
	font-weight: 600;
	border-left-color: var(--accent-line);
	background: var(--accent-soft);
}

/* === 文章內頁 方案 4：全幅 Hero（~250px）+ 浮動目錄 === */
.single-hero {
	position: relative;
	min-height: 300px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: linear-gradient( 120deg, #2b2320, #34284a 60%, #1f2526 );
	background-size: cover;
	background-position: center;
}

.single-hero.has-img::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient( 180deg, rgba(18, 18, 18, 0.3), rgba(15, 18, 19, 0.84) );
}

.single-hero__blob {
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	filter: blur( 40px );
	opacity: 0.45;
}

.single-hero__blob--1 {
	width: 280px;
	height: 280px;
	background: var(--accent);
	top: -90px;
	right: 8%;
}

.single-hero__blob--2 {
	width: 220px;
	height: 220px;
	background: var(--color-dark-accent);
	bottom: -80px;
	left: 5%;
}

.single-hero__in {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-block: var(--space-4);
	text-align: center; /* 標題與 meta 置中 */
}

.single-hero .entry-meta {
	justify-content: center;
	color: rgba(255, 255, 255, 0.85);
}

.single-hero .entry-meta__cat {
	color: var(--accent);
}

.single-hero__title {
	margin: 0.6rem auto 0;
	max-width: 920px;
	color: #fff;
	font-size: clamp( 1.6rem, 1.2rem + 2vw, 2.8rem );
	line-height: 1.25;
}

.single-post__body {
	max-width: 920px; /* 內文寬度 920px */
	padding-top: var(--space-6);
}

/* 浮動目錄 FAB */
.toc-fab {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 60;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.toc-fab__panel {
	display: none;
	width: 250px;
	max-height: 60vh;
	overflow-y: auto;
	margin-bottom: 0.7rem;
	padding: 1.1rem 1.3rem;
	background: var(--color-white);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
	box-shadow: 0 18px 40px rgba(41, 49, 50, 0.18);
}

.toc-fab__panel.is-open {
	display: block;
}

.toc-fab__heading {
	display: block;
	margin-bottom: 0.6rem;
	padding-bottom: 0.5rem;
	border-bottom: 3px solid var(--accent-line);
	font-weight: 700;
	color: var(--brand-dark);
}

.toc-fab__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.7rem 1.3rem;
	border: 0;
	border-radius: 999px;
	background: var(--brand-dark);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(41, 49, 50, 0.25);
}

.toc-fab__btn:hover {
	background: #000;
}

/* AI 文章延伸 widget */
.ai-extend {
	margin-top: var(--space-6);
	padding: var(--space-5);
	background: var(--color-gray-2);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
}

.ai-extend__kicker {
	display: block;
	font-family: var(--font-deco);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-dark-accent);
	font-size: 0.82rem;
}

.ai-extend__title {
	margin: 0.3rem 0 0.5rem;
	font-size: 1.3rem;
}

.ai-extend__desc {
	margin: 0 0 var(--space-3);
	color: var(--color-secondary);
}

.ai-extend__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
}

.ai-extend__btn {
	display: inline-flex;
	align-items: center;
	padding: 0.7rem 1.3rem;
	border: 1px solid var(--color-divider-02);
	border-radius: 999px;
	background: var(--color-white);
	color: var(--brand-dark);
	font-weight: 600;
	font-size: 0.95rem;
	transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.ai-extend__btn:hover {
	transform: translateY( -2px );
	box-shadow: 0 10px 22px rgba(41, 49, 50, 0.1);
	color: var(--brand-dark);
}

.ai-extend__btn--chatgpt {
	background: var(--brand-dark);
	border-color: var(--brand-dark);
	color: #fff;
}

.ai-extend__btn--chatgpt:hover {
	background: #000;
	color: #fff;
}

.ai-extend__btn--google {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--brand-dark);
}

/* 燈箱 */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: rgba(6, 6, 6, 0.92);
	opacity: 0;
	transition: opacity 0.25s ease;
}

/* 隱藏時必須真的不顯示，否則透明 overlay 會擋住整頁點擊。 */
.lightbox[hidden] {
	display: none;
}

.lightbox.is-open {
	opacity: 1;
}

.lightbox__img {
	max-width: 92vw;
	max-height: 88vh;
	border-radius: var(--radius);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.lightbox__close {
	position: absolute;
	top: 1.4rem;
	right: 1.6rem;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.entry-content img.is-zoomable {
	cursor: zoom-in;
}

/* 延伸閱讀書籤卡 */
.article-bookmarks {
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-divider);
}

.article-bookmarks__title {
	margin-bottom: var(--space-4);
}

.article-bookmarks__kicker {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--color-primary);
	font-family: var(--font-deco);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.article-bookmarks__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

.bookmark-card {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: var(--space-3) var(--space-4);
	background: var(--color-white);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
	color: var(--color-text);
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.bookmark-card:hover {
	transform: translateY(-3px);
	border-color: transparent;
	box-shadow: 0 16px 36px rgba(41, 49, 50, 0.1);
	color: var(--color-text);
}

.bookmark-card__name {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--brand-dark);
	font-weight: 700;
	line-height: 1.4;
}

.bookmark-card__desc {
	display: block;
	margin-bottom: 0.6rem;
	color: var(--color-secondary);
	font-size: 0.88rem;
	line-height: 1.6;
}

.bookmark-card__site {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--color-secondary);
	font-size: 0.8rem;
}

.bookmark-card__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent-line);
}

.bookmark-card__arrow {
	flex: 0 0 auto;
	color: var(--color-primary);
	font-size: 1.2rem;
}

.bookmark-card:hover .bookmark-card__arrow {
	color: var(--color-dark-accent);
}

/* 留言表單樣式（比照網站風格） */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--color-divider-02);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	font-size: 1rem;
}

.comment-form input:focus,
.comment-form textarea:focus {
	border-color: var(--color-primary);
	box-shadow: var(--ring);
	outline: none;
}

.comment-form .comment-form-comment {
	margin-bottom: var(--space-3);
}

.comment-form .comment-notes,
.comment-form .comment-form-cookies-consent label {
	color: var(--color-secondary);
	font-size: 0.85rem;
}


/**
 * 14.0 Pagination
 */

.pagination {
	margin-top: var(--space-6);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 0.6rem;
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-size: 0.95rem;
}

.pagination .page-numbers:hover {
	border-color: var(--color-primary);
	color: var(--color-dark-accent);
}

.pagination .page-numbers.current {
	background: var(--color-text);
	border-color: var(--color-text);
	color: var(--color-white);
}


/**
 * 15.0 Newsletter
 */

.newsletter {
	position: relative;
	padding-block: var(--space-7);
	background:
		radial-gradient(40% 70% at 85% 10%, rgba(255, 220, 115, 0.18), transparent 60%),
		var(--brand-dark);
	color: var(--color-white);
	overflow: hidden;
}

.newsletter__inner {
	position: relative;
	max-width: 640px;
	text-align: center;
}

.newsletter__kicker {
	display: inline-block;
	margin-bottom: var(--space-2);
	color: var(--accent);
	font-family: var(--font-deco);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.newsletter__title {
	color: var(--color-white);
}

.newsletter__text {
	margin-bottom: var(--space-4);
	color: rgba(255, 255, 255, 0.72);
}

.newsletter__placeholder {
	padding: 1.5rem;
	border: 1px dashed rgba(255, 255, 255, 0.3);
	border-radius: var(--radius);
	color: rgba(255, 255, 255, 0.6);
}

/* ConvertKit / 內嵌訂閱表單容器 */
.oberon-newsletter-embed {
	max-width: 480px;
	margin-inline: auto;
}

.oberon-newsletter-embed input[type="email"],
.oberon-newsletter-embed input[type="text"] {
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.06);
	color: var(--color-white);
}

.oberon-newsletter-embed input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}


/**
 * 16.0 404
 */

.error-404 {
	padding-block: var(--space-8);
	text-align: center;
}

.error-404__code {
	display: block;
	font-family: var(--font-deco);
	font-size: clamp(5rem, 3rem + 12vw, 12rem);
	font-weight: 800;
	line-height: 1;
	color: var(--color-gray-1);
}

.error-404__title {
	margin-top: var(--space-2);
}

.error-404__text {
	color: var(--color-secondary);
}

.error-404__search {
	max-width: 420px;
	margin: var(--space-4) auto;
}


/**
 * 17.0 Footer
 */

.site-footer {
	margin-top: var(--space-7);
	border-top: 4px solid var(--accent);
	background: var(--brand-dark);
	color: rgba(255, 255, 255, 0.72);
}

/* 訂閱電子報帶（方案 1） */
.site-footer__subscribe {
	padding-block: var(--space-5);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__subscribe-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	align-items: center;
}

.site-footer__subscribe-title {
	margin: 0 0 0.4rem;
	color: var(--color-white);
	font-size: 1.4rem;
}

.site-footer__subscribe-desc {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.95rem;
	line-height: 1.7;
}

.site-footer__subscribe .oberon-subscribe,
.site-footer__subscribe .oberon-newsletter-embed {
	max-width: 480px;
	margin-inline: 0;
}

/* 訂閱按鈕：黃色實心，避免在炭黑頁尾被吃掉。 */
.site-footer__subscribe .btn {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--brand-dark);
}

.site-footer__subscribe .btn:hover {
	background: var(--color-dark-accent);
	border-color: var(--color-dark-accent);
	color: var(--color-white);
}

/* 四欄 */
.site-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	padding-block: var(--space-6);
}

.site-footer__logo-text {
	display: inline-block;
	font-family: var(--font-deco);
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--color-white); /* 「Daily」白色。 */
}

.site-footer__logo-text b {
	color: var(--accent); /* 「WPdev.」品牌黃。 */
}

.site-footer__heading {
	margin: 0 0 1rem;
	color: var(--color-white);
	font-family: var(--font-sans);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.site-footer__logo img {
	height: 40px;
	width: auto;
}

.site-footer__desc {
	margin-top: var(--space-2);
	max-width: 38ch;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.95rem;
}

.footer-menu,
.social-menu {
	list-style: none;
}

.footer-menu {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.footer-menu a {
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.95rem;
	transition: color var(--transition), padding-left var(--transition);
}

.footer-menu a:hover {
	color: var(--accent);
	padding-left: 4px;
}

.social-menu {
	display: flex;
	gap: 1rem;
	margin-top: var(--space-3);
}

.social-menu a {
	color: rgba(255, 255, 255, 0.78);
}

.social-menu a:hover {
	color: var(--accent);
}

/* 頁尾小工具區（含預設 Archives／Categories 區塊小工具） */
.site-footer__nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--space-4) var(--space-5);
}

.site-footer__nav h2,
.site-footer__nav h3,
.footer-widget__title {
	margin: 0 0 1rem;
	color: var(--color-white);
	font-family: var(--font-sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.site-footer__nav ul {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	list-style: none;
}

.site-footer__nav li {
	margin: 0;
}

.site-footer__nav a {
	color: rgba(255, 255, 255, 0.74);
	font-size: 0.92rem;
	transition: color var(--transition), padding-left var(--transition);
}

.site-footer__nav a:hover {
	color: var(--accent);
	padding-left: 3px;
}

.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-block: 1.3rem;
}

.copyright {
	margin: 0;
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.85rem;
	text-align: center;
}


/**
 * 18.0 WooCommerce
 */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce 預設給 li.product 套 float + 百分比寬度，會與 grid 衝突；以 !important 中和。 */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	float: none !important;
	clear: none !important;
	width: auto !important;
	margin: 0 !important;
	text-align: left;
	display: flex;
	flex-direction: column;
}

/* 按鈕靠卡片底部對齊（卡片高度不一時仍齊平）。 */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce-page ul.products li.product .button,
.woocommerce-page ul.products li.product .added_to_cart {
	margin-top: auto;
	align-self: flex-start;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none;
}

.woocommerce ul.products li.product a img {
	border-radius: var(--radius);
	margin-bottom: 0.8rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	font-size: 1.05rem;
	font-weight: 600;
}

.woocommerce ul.products li.product .price {
	color: var(--color-text);
	font-weight: 600;
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	padding: 0.7rem 1.4rem;
	border-radius: 999px;
	background: var(--brand-dark);
	color: var(--color-white);
	font-weight: 600;
	transition: background var(--transition), color var(--transition), transform var(--transition);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--accent);
	color: var(--brand-dark);
	transform: translateY(-2px);
}

/* 商品內頁「立即購買」主按鈕：強制套用站台主按鈕風格（黑底膠囊、黃底 hover）。 */
.single-product div.product form.cart .single_add_to_cart_button,
.single-product div.product form.cart .single_add_to_cart_button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.9rem 2.2rem;
	border: 0;
	border-radius: 999px;
	background: var(--brand-dark);
	color: var(--color-white);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
}

.single-product div.product form.cart .single_add_to_cart_button:hover {
	background: var(--accent);
	color: var(--brand-dark);
	transform: translateY(-2px);
}

.wc-wrap {
	padding-block: var(--space-5) var(--space-7);
}

/* WooCommerce 通知：套用品牌風格（取代預設藍/綠橫條） */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: var(--space-3);
	padding: 0.9rem 1.2rem;
	border: 1px solid var(--color-divider);
	border-left: 4px solid var(--accent-line);
	border-radius: var(--radius);
	background: var(--accent-soft);
	color: var(--brand-dark);
	font-size: 0.95rem;
	list-style: none;
}

.woocommerce-error {
	border-left-color: var(--color-dark-accent);
	background: #fff4ed;
}

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
	content: none;
}

.woocommerce-info .button,
.woocommerce-message .button {
	margin-left: auto;
}

/* Appsero 序號下載通知套品牌風格 */
.appsero-notice {
	margin-bottom: var(--space-3);
	padding: 0.9rem 1.2rem;
	border: 1px solid var(--color-divider);
	border-left: 4px solid var(--accent-line);
	border-radius: var(--radius);
	background: var(--accent-soft);
	color: var(--brand-dark);
	font-size: 0.95rem;
}

.appsero-notice.notice-error {
	border-left-color: var(--color-dark-accent);
	background: #fff4ed;
}


/**
 * 19.0 Utilities & a11y
 */

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
	padding: 0.6rem 1rem;
	background: var(--color-text);
	color: var(--color-white);
	border-radius: var(--radius-sm);
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.no-results {
	max-width: 480px;
	margin: var(--space-7) auto;
	text-align: center;
}

/* 捲動進場動畫（無 JS 時不隱藏內容） */
.has-js .reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.has-js .reveal.is-visible {
	opacity: 1;
	transform: none;
}


/**
 * 20.0 Related posts
 */

.related-posts {
	margin-top: var(--space-7);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-divider);
}


/**
 * 21.0 Comments
 */

.comments-area {
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-divider);
}

.comments-title {
	margin-bottom: var(--space-4);
}

.comment-list {
	list-style: none;
	margin-bottom: var(--space-5);
}

.comment-list ol.children {
	list-style: none;
	margin-left: var(--space-4);
}

.comment-body {
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-divider);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.5rem;
}

.comment-author .avatar {
	border-radius: 50%;
}

.comment-author .fn {
	font-weight: 600;
	font-style: normal;
}

.comment-metadata {
	color: var(--color-secondary);
	font-size: 0.82rem;
}

.comment-form {
	display: grid;
	gap: var(--space-3);
}

.comment-form label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--brand-dark);
}

.comment-reply-title {
	margin-bottom: var(--space-2);
}

.comment-form .form-submit {
	margin: 0;
}

/* 送出按鈕：比照網站主要按鈕（炭黑膠囊）。 */
.comment-form .submit,
.comment-form #submit,
.comment-form input[type="submit"],
.comment-respond .form-submit input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	padding: 0.85rem 1.8rem;
	border: 1px solid var(--brand-dark);
	border-radius: 999px;
	background: var(--brand-dark);
	color: var(--color-white);
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.comment-form .submit:hover,
.comment-form #submit:hover,
.comment-form input[type="submit"]:hover,
.comment-respond .form-submit input[type="submit"]:hover {
	background: #000;
	border-color: #000;
	color: var(--color-white);
	transform: translateY( -2px );
	box-shadow: 0 12px 24px rgba(41, 49, 50, 0.2);
}


/**
 * 22.0 WooCommerce single product
 */

.single-product div.product {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

/* 商品圖庫：填滿欄位 + 卡片外框（覆寫 WooCommerce 預設 48% 寬度）。 */
.single-product div.product .woocommerce-product-gallery {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: var(--space-5);
	background: var(--color-gray-2);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image {
	width: 100%;
}

.single-product div.product .woocommerce-product-gallery img {
	width: 100%;
	border-radius: var(--radius);
}

/* 商品摘要（描述）區：覆寫 WooCommerce 預設 48% 寬度 + 放寬間距。 */
.single-product div.product .entry-summary,
.single-product div.product .summary {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.single-product div.product .entry-summary > *,
.single-product div.product .wc-summary-grid__col > * {
	margin-bottom: var(--space-3);
}

/* 商品摘要兩欄：左欄（標題/評價/價格/簡述）＋右欄（購買表單）。手機維持單欄。 */
.single-product div.product .wc-summary-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

.single-product div.product .wc-summary-grid__col--buy {
	align-self: start;
}

@media (min-width: 768px) {
	.single-product div.product .wc-summary-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-6);
		align-items: start;
	}
}

.single-product div.product .product_title {
	margin-bottom: var(--space-3);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
	line-height: 1.3;
}

.single-product div.product .woocommerce-product-details__short-description {
	color: var(--color-secondary);
	font-size: 1.02rem;
	line-height: 1.9;
}

.single-product div.product .woocommerce-product-details__short-description p {
	margin-bottom: 1em;
}

.single-product div.product p.price,
.single-product div.product span.price {
	color: var(--color-text);
	font-size: 1.6rem;
	font-weight: 700;
}

.single-product div.product .product_meta {
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-divider);
	color: var(--color-secondary);
	font-size: 0.9rem;
	line-height: 2;
}

.single-product div.product .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: var(--space-5);
}

.single-product div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 var(--space-4);
	padding: 0;
	border: 0;
}

/* 移除 WooCommerce 預設的斜角邊框與底線裝飾。 */
.single-product div.product .woocommerce-tabs ul.tabs::before,
.single-product div.product .woocommerce-tabs ul.tabs li::before,
.single-product div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
	content: none;
}

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

.single-product div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.5rem 1.2rem;
	border: 1px solid var(--color-divider);
	border-radius: 999px;
	color: var(--color-secondary);
	font-weight: 600;
	font-size: 0.95rem;
	transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.single-product div.product .woocommerce-tabs ul.tabs li a:hover {
	border-color: var(--color-primary);
	color: var(--brand-dark);
}

.single-product div.product .woocommerce-tabs ul.tabs li.active a {
	background: var(--brand-dark);
	border-color: var(--brand-dark);
	color: #fff;
}

/* 內容面板：比照網站內文風格。 */
.single-product div.product .woocommerce-tabs .woocommerce-Tabs-panel {
	color: var(--color-text);
	line-height: 1.85;
}

.single-product div.product .woocommerce-tabs .woocommerce-Tabs-panel > h2 {
	margin: 0 0 var(--space-3);
	font-family: var(--font-base);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--brand-dark);
}

.single-product div.product .woocommerce-tabs .woocommerce-Tabs-panel p {
	margin-bottom: 1em;
}

.single-product div.product .woocommerce-tabs table.shop_attributes {
	border: 1px solid var(--color-divider);
	border-radius: var(--radius);
	overflow: hidden;
}

.single-product div.product .woocommerce-tabs table.shop_attributes th,
.single-product div.product .woocommerce-tabs table.shop_attributes td {
	padding: 0.7rem 1rem;
	border-bottom: 1px solid var(--color-divider);
}

.woocommerce .quantity input.qty {
	width: 72px;
	text-align: center;
}


/**
 * 23.0 Page content (Gutenberg blocks)
 */

.single-page .entry-content {
	font-size: 1.05rem;
	line-height: 1.85;
}

.single-page .entry-content h2 {
	margin-top: 1.8em;
}

.single-page .entry-content .wp-block-columns {
	gap: var(--space-4);
	margin-block: var(--space-4);
}

.single-page .entry-content .wp-block-column {
	padding: var(--space-3);
	background: var(--color-gray-2);
	border-radius: var(--radius);
	border: 1px solid var(--color-divider);
}

.single-page .entry-content .wp-block-column h3 {
	margin-top: 0;
	padding-bottom: 0.5rem;
	border-bottom: 3px solid var(--accent-line);
	display: inline-block;
}


/**
 * 24.0 Contact page
 */

.contact-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	margin-bottom: var(--space-7);
}

.contact-card {
	padding: var(--space-4);
	background: var(--color-gray-2);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
}

.contact-card h3 {
	margin-top: 0;
}

.contact-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

.contact-list__label {
	display: block;
	margin-bottom: 0.2rem;
	color: var(--color-secondary);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* LINE 官方帳號按鈕 */
.contact-line {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-bottom: var(--space-4);
	padding: 0.9rem 1.1rem;
	border-radius: var(--radius);
	background: #06c755;
	color: #fff;
	transition: transform var(--transition), box-shadow var(--transition);
}

.contact-line:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(6, 199, 85, 0.35);
	color: #fff;
}

.contact-line__badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.2);
	font-weight: 800;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
}

.contact-line__text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.contact-line__text small {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.82rem;
}

/* 推廣合作計畫說明 */
.affiliate-intro {
	margin-bottom: var(--space-4);
	padding: var(--space-4);
	background: var(--color-gray-2);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
}

.affiliate-intro__title {
	display: inline-block;
	margin: 0 0 var(--space-2);
	padding-bottom: 0.5rem;
	border-bottom: 3px solid var(--accent-line);
}

.affiliate-intro__lead {
	color: var(--color-secondary);
}

.affiliate-intro__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	margin: var(--space-3) 0 0;
	padding: 0;
}

.affiliate-intro__list li {
	position: relative;
	padding-left: 1.3rem;
	font-size: 0.95rem;
	line-height: 1.7;
}

.affiliate-intro__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent-line);
}

.affiliate-intro__list strong {
	display: block;
	color: var(--brand-dark);
}


/**
 * 25.0 Forms (theme)
 */

.oberon-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.oberon-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

.oberon-form__field label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.9rem;
	font-weight: 600;
}

.oberon-form .btn {
	align-self: flex-start;
	border: 0;
}


/**
 * 26.0 WooCommerce cart / checkout / account
 */

.woocommerce-cart .wc-wrap,
.woocommerce-checkout .wc-wrap,
.woocommerce-account .wc-wrap {
	max-width: var(--container-wide);
}

.woocommerce table.shop_table {
	border-radius: var(--radius);
	border-color: var(--color-divider);
}

.woocommerce table.shop_table th {
	color: var(--brand-dark);
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
	width: 180px;
}

.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	padding: var(--space-4);
	background: var(--color-gray-2);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
}

.woocommerce-checkout #payment {
	background: transparent;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--color-divider-02);
	border-radius: var(--radius-sm);
}

/* My Account 版面：卡片式側欄，寬度比照文章列表頁。 */
.woocommerce-account .single-page .container {
	max-width: var(--container-wide);
}

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	margin-top: var(--space-4);
}

/* 中和 WooCommerce 預設的 float + 百分比寬度 */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	min-width: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	align-self: start;
	padding: 0;
	overflow: hidden;
	background: var(--color-gray-2);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
}

.woocommerce-account .woocommerce-MyAccount-content {
	padding: var(--space-4) var(--space-5);
	overflow: hidden;
	background: var(--color-white);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

/* My account 導覽（一行一個的垂直側欄） */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li + li {
	border-top: 1px solid var(--color-divider);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	width: 100%;
	padding: 0.9rem var(--space-3);
	border-radius: 0;
	background: transparent;
	color: var(--brand-dark);
	font-weight: 500;
	transition: background var(--transition), color var(--transition);
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	background: var(--color-white);
	color: var(--color-dark-accent);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--brand-dark);
	color: var(--color-white);
}

/* 會員中心所有表格：全寬貼齊卡片外框（水平滿出卡片內距） */
.woocommerce-account .woocommerce-MyAccount-content .account-licenses,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	width: calc(100% + 2 * var(--space-5));
	margin-left: calc(-1 * var(--space-5));
	margin-right: calc(-1 * var(--space-5));
	margin-bottom: 0;
}

/* 會員中心：所有表格一律全寬（涵蓋 Solid Affiliate 我的推廣、Appsero 序號下載、
   卡號管理等外掛表格，無論其 class 為何）。 */
.woocommerce-account .woocommerce-MyAccount-content table {
	width: 100%;
}

/* 表格為卡片首/末元素時，連上下留白也貼齊 */
.woocommerce-account .woocommerce-MyAccount-content > .account-licenses:first-child,
.woocommerce-account .woocommerce-MyAccount-content > table.shop_table:first-child {
	margin-top: calc(-1 * var(--space-4));
}

.woocommerce-account .woocommerce-MyAccount-content > .account-licenses:last-child,
.woocommerce-account .woocommerce-MyAccount-content > table.shop_table:last-child {
	margin-bottom: calc(-1 * var(--space-4));
}

/* 一致的表格樣式（不在此設 width，以免覆寫上方 shop_table 的滿版 calc 寬度）。 */
.account-licenses__table,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	table-layout: auto;
	border-collapse: separate;
	border-spacing: 0;
	border: 0;
	border-radius: 0;
}

.account-licenses__table {
	width: 100%;
}

.account-licenses__table thead th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
	padding: 0.85rem 1.4rem;
	border: 0;
	border-bottom: 1px solid var(--color-divider);
	background: var(--color-gray-2);
	color: var(--color-secondary);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.account-licenses__table tbody td,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody th {
	padding: 1rem 1.4rem;
	border: 0;
	border-bottom: 1px solid var(--color-divider);
	vertical-align: middle;
	font-size: 0.95rem;
}

.account-licenses__table tbody tr:last-child td,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child th {
	border-bottom: 0;
}

.account-licenses__table tbody tr,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr {
	transition: background var(--transition);
}

.account-licenses__table tbody tr:hover,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:hover {
	background: var(--color-gray-2);
}

.account-licenses__table tbody td:first-child,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td:first-child {
	font-weight: 600;
	color: var(--brand-dark);
}

/* 序號碼：黑底黃字（高對比，提高 specificity 蓋過 .entry-content code） */
.woocommerce-account .account-licenses__table code {
	display: inline-block;
	padding: 0.32rem 0.7rem;
	border-radius: var(--radius-sm);
	background: #1c1f20;
	color: var(--accent);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.account-licenses__table .btn--ghost,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table .button {
	padding: 0.45rem 1.2rem;
	border-radius: 999px;
	font-size: 0.85rem;
}


/**
 * 會員中心 — 帳號詳細表單（符合網站風格）
 */
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row {
	margin-bottom: var(--space-3);
}

.woocommerce-account .woocommerce-EditAccountForm label {
	display: block;
	margin-bottom: 0.45rem;
	color: var(--brand-dark);
	font-size: 0.9rem;
	font-weight: 600;
}

.woocommerce-account .woocommerce-EditAccountForm .required {
	color: var(--color-dark-accent);
	border: 0;
}

.woocommerce-account .woocommerce-EditAccountForm input.input-text,
.woocommerce-account .woocommerce-EditAccountForm input.woocommerce-Input {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--color-divider-02);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	font-size: 1rem;
	line-height: 1.5;
}

.woocommerce-account .woocommerce-EditAccountForm input.input-text:focus {
	border-color: var(--color-primary);
	box-shadow: var(--ring);
	outline: none;
}

.woocommerce-account .woocommerce-EditAccountForm span.woocommerce-input-wrapper {
	position: relative;
	display: block;
}

/* 顯示密碼眼睛 icon */
.woocommerce-account .woocommerce-EditAccountForm .show-password-input {
	top: 50%;
	transform: translateY(-50%);
	right: 1rem;
}

/* 說明文字 */
.woocommerce-account .woocommerce-EditAccountForm .description,
.woocommerce-account .woocommerce-EditAccountForm em {
	display: block;
	margin-top: 0.35rem;
	color: var(--color-secondary);
	font-size: 0.85rem;
	font-style: normal;
}

/* 密碼變更區：改成乾淨的卡片區塊（取代老式 fieldset 細框） */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
	margin: var(--space-4) 0 0;
	padding: var(--space-4);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
	background: var(--color-gray-2);
}

.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
	padding: 0;
	margin-bottom: var(--space-2);
	color: var(--brand-dark);
	font-size: 1rem;
	font-weight: 700;
}

.woocommerce-account .woocommerce-EditAccountForm fieldset .woocommerce-form-row:last-child {
	margin-bottom: 0;
}

/* Save changes 按鈕間距 */
.woocommerce-account .woocommerce-EditAccountForm button.woocommerce-Button,
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"] {
	margin-top: var(--space-4);
}


/**
 * 關於頁 — 個人檔案
 */
.about-profile {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	padding-block: var(--space-2) var(--space-6);
	align-items: start;
}

.about-profile__photo {
	max-width: 200px;
}

.about-profile__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: top center;
	border-radius: var(--radius-lg);
	box-shadow: 0 16px 36px rgba(41, 49, 50, 0.12);
}

.about-profile__hi {
	margin-bottom: 0.3rem;
	color: var(--color-primary);
	font-family: var(--font-deco);
	font-size: 1.05rem;
	letter-spacing: 0.06em;
}

.about-profile__name {
	margin-bottom: var(--space-3);
	font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
}

.about-profile__main p {
	color: var(--color-secondary);
	line-height: 1.9;
}

.about-profile__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

.about-profile__card {
	padding: var(--space-4);
	background: var(--color-gray-2);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
}

.about-info {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
}

.about-info__label {
	display: block;
	margin-bottom: 0.2rem;
	color: var(--color-secondary);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.about-section {
	padding-block: var(--space-5);
}

.about-h2 {
	margin: 0.3rem 0 var(--space-4);
	font-size: clamp( 1.5rem, 1.2rem + 1.4vw, 2.1rem );
}

.about-h3 {
	margin: var(--space-4) 0 var(--space-2);
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--color-divider);
	font-size: 1.2rem;
}

.about-cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

@media screen and ( min-width: 760px ) {

	.about-cols {
		grid-template-columns: 1fr 1fr;
	}
}

.about-deflist {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
}

.about-deflist li {
	position: relative;
	padding-left: 1.3rem;
	line-height: 1.6;
}

.about-deflist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent-line);
}

.about-deflist strong {
	display: block;
	color: var(--brand-dark);
}

.about-deflist span {
	color: var(--color-secondary);
	font-size: 0.95rem;
}

/* 小標籤（section 上方的英文 eyebrow） */
.about-page .eyebrow {
	display: inline-block;
	margin-bottom: 0.4rem;
	color: var(--color-dark-accent);
	font-family: var(--font-deco);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ===== 社群連結（共用，三種變體） ===== */
.about-socials {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: var(--space-3) 0 0;
	padding: 0;
}

.about-socials__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	width: 42px;
	height: 42px;
	border: 1px solid var(--color-divider-02);
	border-radius: 50%;
	color: var(--brand-dark);
	text-decoration: none;
	transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.about-socials__link:hover {
	background: var(--brand-dark);
	border-color: var(--brand-dark);
	color: var(--color-white);
	transform: translateY(-2px);
}

.about-socials__name {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* pill 變體：圓角膠囊 + 顯示名稱 */
.about-socials--pill .about-socials__link {
	width: auto;
	height: auto;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 600;
}

.about-socials--pill .about-socials__name {
	position: static;
	width: auto;
	height: auto;
	clip: auto;
}

/* stack 變體：整列直向 */
.about-socials--stack {
	flex-direction: column;
	gap: 0.5rem;
}

.about-socials--stack .about-socials__link {
	width: 100%;
	height: auto;
	justify-content: flex-start;
	padding: 0.65rem 0.9rem;
	border-radius: var(--radius);
	font-size: 0.92rem;
	font-weight: 600;
}

.about-socials--stack .about-socials__name {
	position: static;
	width: auto;
	height: auto;
	clip: auto;
}

/* ===== 版型預覽切換器（選定後可移除） ===== */
.about-switcher {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5rem 0.65rem;
	background: var(--brand-dark);
	border-radius: 999px;
	box-shadow: var(--shadow);
}

.about-switcher__label {
	color: var(--color-white);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding-inline: 0.25rem;
}

.about-switcher__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: var(--color-white);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 700;
	transition: background var(--transition), color var(--transition);
}

.about-switcher__btn:hover {
	background: rgba(255, 255, 255, 0.16);
}

.about-switcher__btn.is-active {
	background: var(--accent);
	color: var(--brand-dark);
}

/* ===== Layout 2：置中 Hero ===== */
.about-l2 .about2-hero {
	text-align: center;
	padding-block: var(--space-6) var(--space-5);
	background: linear-gradient(180deg, var(--color-gray-2), var(--color-white));
	border-bottom: 1px solid var(--color-divider);
}

.about2-hero__photo {
	width: 148px;
	height: 148px;
	margin: 0 auto var(--space-3);
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 16px 36px rgba(41, 49, 50, 0.16);
	border: 4px solid var(--color-white);
}

.about2-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.about2-hero__hi {
	color: var(--color-primary);
	font-family: var(--font-deco);
	letter-spacing: 0.06em;
}

.about2-hero__name {
	margin: 0.2rem 0 0.4rem;
	font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem);
}

.about2-hero__role {
	color: var(--color-dark-accent);
	font-weight: 600;
}

.about2-hero__intro {
	max-width: 620px;
	margin: var(--space-3) auto 0;
	color: var(--color-secondary);
	line-height: 1.9;
}

.about2-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: center;
	margin-top: var(--space-3);
}

.about2-hero .about-socials {
	justify-content: center;
}

.about2-body {
	max-width: 760px;
	padding-block: var(--space-4);
}

.about2-h2 {
	text-align: center;
	margin: 0 0 var(--space-4);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
}

.about2-nowgrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

@media screen and (min-width: 760px) {
	.about2-nowgrid {
		grid-template-columns: 1fr 1fr;
	}
}

.about2-card {
	padding: var(--space-4);
	background: var(--color-gray-2);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
}

.about2-card .about-h3 {
	margin-top: 0;
}

/* 頁面 hero 置中副標（page-head 內共用：關於頁、商品頁） */
.page-head__lead {
	max-width: 60ch;
	margin: var(--space-3) auto 0;
	color: var(--color-secondary);
	font-size: 1.1rem;
	line-height: 1.9;
}

/* ===== Layout 3：雜誌雙欄 ===== */
.about3-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	padding-block: var(--space-5);
}

@media screen and (min-width: 960px) {
	.about3-grid {
		grid-template-columns: 320px 1fr;
		gap: var(--space-6);
	}
}

.about3-side__inner {
	position: static;
}

@media screen and (min-width: 960px) {
	.about3-side__inner {
		position: sticky;
		top: calc(var(--header-offset, 90px) + 1rem);
	}
}

.about3-side__photo {
	max-width: 180px;
	margin-bottom: var(--space-3);
}

.about3-side__photo img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: top center;
	border-radius: var(--radius-lg);
	box-shadow: 0 16px 36px rgba(41, 49, 50, 0.12);
}

.about3-side__name {
	margin: 0.2rem 0;
	font-size: 1.5rem;
}

.about3-side__role {
	color: var(--color-dark-accent);
	font-weight: 600;
	margin-bottom: var(--space-3);
}

.about3-side__info {
	gap: var(--space-2);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-divider);
}

.about3-side__actions {
	margin-top: var(--space-3);
}

.about3-lead {
	font-size: 1.2rem;
	line-height: 1.9;
	color: var(--brand-dark);
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-2);
	border-bottom: 2px solid var(--accent);
}

.about3-block {
	padding-block: var(--space-4);
}

/* ===== Layout 4：時間軸 ===== */
.about4-banner {
	background: var(--brand-dark);
	color: var(--color-white);
	padding-block: var(--space-5);
}

.about4-banner__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	align-items: center;
}

@media screen and (min-width: 720px) {
	.about4-banner__inner {
		grid-template-columns: 160px 1fr;
		gap: var(--space-4);
	}
}

.about4-banner__photo {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	overflow: hidden;
	border: 4px solid rgba(255, 255, 255, 0.15);
}

.about4-banner__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.about4-banner .about-profile__hi {
	color: var(--accent);
}

.about4-banner__name {
	margin: 0.2rem 0 0.3rem;
	color: var(--color-white);
	font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.3rem);
}

.about4-banner__role {
	color: var(--accent);
	font-weight: 600;
}

.about4-banner__intro {
	max-width: 640px;
	margin-top: var(--space-2);
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.9;
}

.about4-banner .about-socials__link {
	border-color: rgba(255, 255, 255, 0.3);
	color: var(--color-white);
}

.about4-banner .about-socials__link:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--brand-dark);
}

.about4-timeline {
	max-width: 820px;
	padding-block: var(--space-5);
	position: relative;
}

.about4-node {
	position: relative;
	padding-left: var(--space-4);
	padding-bottom: var(--space-5);
	border-left: 2px solid var(--color-divider);
	margin-left: 6px;
}

.about4-node:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}

.about4-node__dot {
	position: absolute;
	left: -9px;
	top: 4px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--accent);
	border: 3px solid var(--color-white);
	box-shadow: 0 0 0 1px var(--accent-line);
}

.about4-node__body .about-h2 {
	margin-top: 0.2rem;
}

/* ===== Layout 5：Bento 卡片格 ===== */
.about5-bento {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
	padding-bottom: var(--space-6);
}

@media screen and (min-width: 720px) {
	.about5-bento {
		grid-template-columns: repeat(4, 1fr);
	}
}

.about5-cell {
	padding: var(--space-4);
	background: var(--color-white);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
	grid-column: span 2;
}

.about5-cell .eyebrow {
	display: block;
	margin-bottom: 0.4rem;
}

.about5-cell__title {
	margin: 0 0 var(--space-3);
	font-size: 1.2rem;
}

.about5-cell--profile {
	background: var(--color-gray-2);
}

@media screen and (min-width: 720px) {
	.about5-cell--profile {
		grid-column: span 2;
		grid-row: span 2;
	}
	.about5-cell--social,
	.about5-cell--info {
		grid-column: span 2;
	}
	.about5-cell--product,
	.about5-cell--project {
		grid-column: span 2;
	}
	.about5-cell--reading {
		grid-column: span 2;
	}
	.about5-cell--milestone {
		grid-column: span 4;
	}
}

.about5-profile__photo {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: var(--space-3);
	box-shadow: 0 14px 30px rgba(41, 49, 50, 0.14);
}

.about5-profile__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.about5-profile__name {
	margin: 0.2rem 0;
	font-size: 1.5rem;
}

.about5-profile__role {
	color: var(--color-dark-accent);
	font-weight: 600;
}

.about5-profile__intro {
	margin-top: var(--space-2);
	color: var(--color-secondary);
	line-height: 1.85;
}

.about5-milestone__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

@media screen and (min-width: 720px) {
	.about5-milestone__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.about5-sub {
	margin: 0 0 var(--space-2);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--brand-dark);
}

.about5-sub + .about-deflist {
	margin-bottom: var(--space-3);
}

/* 合作方式頁 */
.collab-intro {
	max-width: 860px;
	margin-bottom: var(--space-5);
	color: var(--color-secondary);
	font-size: 1.05rem;
	line-height: 1.9;
}

.collab-section {
	padding-block: var(--space-5);
}

.collab-plans,
.collab-steps,
.collab-features {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

@media screen and ( min-width: 860px ) {

	.collab-plans,
	.collab-steps,
	.collab-features {
		grid-template-columns: repeat( 3, 1fr );
	}

	/* Workflow 功能：一個項目一列。 */
	.collab-features {
		grid-template-columns: 1fr;
	}
}

.collab-plan {
	display: flex;
	flex-direction: column;
	padding: var(--space-4);
	background: var(--color-white);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
	transition: transform var(--transition), box-shadow var(--transition);
}

.collab-plan:hover {
	transform: translateY( -4px );
	box-shadow: 0 18px 40px rgba(41, 49, 50, 0.1);
}

.collab-plan__num {
	font-family: var(--font-deco);
	font-size: 1.4rem;
	color: var(--accent-line);
}

.collab-plan__name {
	margin: 0.3rem 0 0.6rem;
	font-size: 1.3rem;
}

.collab-plan__desc {
	color: var(--color-secondary);
	font-size: 0.95rem;
	line-height: 1.8;
}

.collab-plan__fit {
	display: block;
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-divider);
	font-weight: 700;
	color: var(--brand-dark);
}

.collab-check {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.7rem;
}

.collab-check li {
	position: relative;
	padding-left: 1.5rem;
	color: var(--color-secondary);
	font-size: 0.92rem;
	line-height: 1.5;
}

.collab-check li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--color-dark-accent);
	font-weight: 700;
}

.collab-step {
	padding: var(--space-4);
	background: var(--color-gray-2);
	border-radius: var(--radius-lg);
}

.collab-step__num {
	font-family: var(--font-deco);
	font-size: 1.6rem;
	color: var(--accent-line);
}

.collab-step__title {
	margin: 0.3rem 0 0.5rem;
	font-size: 1.2rem;
}

.collab-step__desc {
	color: var(--color-secondary);
	font-size: 0.93rem;
	line-height: 1.8;
}

.collab-cta-btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.8rem;
}

/* 合作方式 — OnePage 圖片 */
.collab-showcase {
	margin: 0 0 var(--space-5);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-divider);
	box-shadow: 0 16px 40px rgba(41, 49, 50, 0.1);
}

.collab-showcase img {
	display: block;
	width: 100%;
}

/* Workflow 功能：圖｜文 橫向一列，奇偶交錯。 */
.collab-feature {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: center;
	padding: var(--space-4);
	background: var(--color-white);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
}

.collab-feature__img {
	margin: 0;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--color-divider);
	background: var(--color-gray-2);
}

.collab-feature__img img {
	display: block;
	width: 100%;
	height: auto; /* 完整顯示，不裁切。 */
}

.collab-feature__text h3 {
	margin: 0 0 0.6rem;
	font-size: 1.4rem;
}

.collab-feature__text p {
	margin: 0;
	color: var(--color-secondary);
	line-height: 1.9;
}

@media screen and ( min-width: 760px ) {

	.collab-feature {
		grid-template-columns: 1.15fr 1fr;
		gap: var(--space-5);
		padding: var(--space-5);
	}

	.collab-feature:nth-child( even ) .collab-feature__img {
		order: 2;
	}
}

.about-extra {
	max-width: 820px;
}

@media screen and (min-width: 768px) {

	.about-profile {
		grid-template-columns: 200px minmax(0, 1.4fr) minmax(0, 1fr);
		gap: var(--space-5) var(--space-6);
		align-items: center;
	}

	.about-profile__photo {
		max-width: none;
	}
}


/**
 * 服務項目頁
 */
.services-head .services-lead {
	max-width: 60ch;
	margin: var(--space-3) auto 0;
	color: var(--color-secondary);
	font-size: 1.1rem;
}

.services-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding-block: var(--space-4) var(--space-7);
}

.service-card {
	scroll-margin-top: 120px;
	padding: var(--space-5);
	background: var(--color-white);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
	transition: box-shadow var(--transition), border-color var(--transition);
}

.service-card:hover {
	border-color: transparent;
	box-shadow: 0 20px 44px rgba(41, 49, 50, 0.1);
}

.service-card__head {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-divider);
}

.service-card__num {
	flex: 0 0 auto;
	font-family: var(--font-deco);
	font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
	font-weight: 800;
	line-height: 1;
	color: var(--accent);
	-webkit-text-stroke: 1px var(--accent-line);
}

.service-card__title {
	margin: 0 0 0.6rem;
	font-family: var(--font-sans);
	font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.service-card__desc {
	margin: 0;
	color: var(--color-secondary);
	font-size: 1rem;
	line-height: 1.8;
}

.service-card__subtitle {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 var(--space-3);
	color: var(--brand-dark);
	font-family: var(--font-deco);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.service-card__subtitle::before {
	content: "";
	width: 18px;
	height: 3px;
	border-radius: 2px;
	background: var(--accent-line);
}

.service-card__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.7rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.service-item {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.95rem;
	line-height: 1.5;
}

.service-item__check {
	flex: 0 0 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 0.1rem;
	border-radius: 50%;
	background: var(--accent);
	color: var(--brand-dark);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.service-item__check::after {
	content: "\2713";
}

/* CTA */
.services-cta {
	position: relative;
	padding-block: var(--space-7);
	background:
		radial-gradient( 55% 85% at 50% 0%, rgba(255, 220, 115, 0.18), transparent 60% ),
		radial-gradient( 40% 60% at 12% 100%, rgba(160, 178, 185, 0.12), transparent 60% ),
		var(--surface);
	color: var(--color-text);
	overflow: hidden;
}

.services-cta__inner {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

.services-cta__kicker {
	display: inline-block;
	margin-bottom: var(--space-2);
	color: var(--accent);
	font-family: var(--font-deco);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.services-cta__title {
	color: var(--brand-dark);
}

.services-cta__text {
	margin-bottom: var(--space-4);
	color: var(--color-secondary);
}

.services-cta__form {
	max-width: 640px;
	margin: var(--space-4) auto 0;
	padding: var(--space-4) var(--space-5);
	background: var(--color-white);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
	text-align: left;
}

/* 確保表單標籤可見（深色文字）。 */
.services-cta__form label,
.services-cta__form .ff-el-input--label label,
.services-cta__form legend {
	color: var(--color-text);
}

/* 聯絡頁：表單下方 LINE 區塊 */
.contact-form-line {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-divider);
}

.contact-form-line__or {
	display: block;
	margin-bottom: 0.8rem;
	color: var(--color-secondary);
	font-size: 0.9rem;
}

.contact-form-line .contact-line {
	max-width: 360px;
}

/* 文章留言：全版寬度（撐滿內文欄）+ 統一風格 */
.single-post__body .comments-area {
	max-width: none;
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-divider);
}

.single-post__body .comment-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
}

.single-post__body .comment-form-comment,
.single-post__body .comment-form-cookies-consent,
.single-post__body .form-submit,
.single-post__body .comment-notes {
	grid-column: 1 / -1;
}

@media screen and (max-width: 600px) {

	.single-post__body .comment-form {
		grid-template-columns: 1fr;
	}
}


/**
 * 27.0 Docs (CPT)
 */

/* 文件首頁（archive） */
.docs-index {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	padding-block: var(--space-6);
}

@media screen and ( min-width: 760px ) {

	.docs-index {
		grid-template-columns: 1fr 1fr;
	}
}

.docs-index__group {
	padding: var(--space-4);
	background: var(--color-gray-2);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
}

.docs-index__title {
	margin: 0 0 var(--space-3);
	padding-bottom: 0.6rem;
	border-bottom: 3px solid var(--accent-line);
	font-size: 1.25rem;
}

.docs-index__title a,
.docs-index__title a:visited,
.docs-index__title a:hover {
	color: var(--brand-dark);
	-webkit-text-stroke: 0;
	background: none;
}

.docs-index__group .docs-tree {
	list-style: none;
}

.docs-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	padding-block: var(--space-6) var(--space-7);
}

.docs-sidebar {
	align-self: start;
	padding: var(--space-4);
	background: var(--color-gray-2);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
}

.docs-sidebar__title {
	display: block;
	margin: 0 0 var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: 3px solid var(--accent-line);
	color: var(--brand-dark);
	font-size: 1.05rem;
	font-weight: 700;
}

.docs-sidebar__title:hover,
.docs-sidebar__title.is-current {
	color: var(--color-dark-accent);
}

.docs-tree {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

/* 巢狀子層縮排 + 導引線 */
.docs-tree .docs-tree {
	margin: 0.2rem 0 0.2rem 0.6rem;
	padding-left: 0.6rem;
	border-left: 1px solid var(--color-divider-02);
}

.docs-tree__item.is-ancestor > a {
	color: var(--brand-dark);
	font-weight: 600;
}

.docs-tree__item a {
	display: block;
	padding: 0.5rem 0.7rem;
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-size: 0.92rem;
}

.docs-tree__item a:hover {
	background: var(--color-gray-1);
	color: var(--color-dark-accent);
}

.docs-tree__item.is-current a {
	background: var(--accent-soft);
	color: var(--brand-dark);
	font-weight: 600;
}

.docs-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: var(--space-3);
	color: var(--color-secondary);
	font-size: 0.85rem;
}

.docs-content__title {
	margin-bottom: var(--space-4);
	font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem);
}


/**
 * Responsive — Tablet (≥768px)
 */

@media screen and (min-width: 768px) {

	.post-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-5);
	}

	.site-footer__subscribe-inner {
		grid-template-columns: 1.4fr 1fr;
	}

	.site-footer__cols {
		grid-template-columns: 1.7fr 1fr 1fr 1fr;
		gap: var(--space-6);
	}

	.service-card__list {
		grid-template-columns: repeat(2, 1fr);
	}
}


/**
 * Responsive — Desktop (≥1025px)
 */

@media screen and (min-width: 1025px) {

	.primary-nav {
		display: flex;
		align-self: stretch;
	}

	.menu-toggle {
		display: none;
	}

	.post-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.post-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.home-services {
		grid-template-columns: repeat(3, 1fr);
	}

	.home-qualify {
		grid-template-columns: 1fr 1fr;
	}

	.home-testi {
		grid-template-columns: repeat(3, 1fr);
	}

	/* 商品內頁已移除商品圖，摘要區塊改為單欄全版。 */
	.single-product div.product {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-6);
		align-items: start;
	}

	.featured-post {
		grid-template-columns: 1.15fr 1fr;
	}

	.featured-post__media {
		aspect-ratio: auto;
		min-height: 360px;
	}

	.featured-post__body {
		padding: var(--space-5);
	}

	.contact-layout {
		grid-template-columns: 1.6fr 1fr;
		align-items: start;
	}

	.oberon-form__row {
		grid-template-columns: 1fr 1fr;
	}

	.docs-layout {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: var(--space-6);
		align-items: start;
	}

	.docs-sidebar {
		position: sticky;
		top: calc(var(--header-offset) + 0.75rem);
	}

	.woocommerce-account .woocommerce {
		grid-template-columns: 260px minmax(0, 1fr);
		align-items: start;
	}

	/* 通知等其他子元素橫跨整列，避免擠掉欄位排版 */
	.woocommerce-account .woocommerce > *:not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) {
		grid-column: 1 / -1;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		grid-column: 1;
		position: sticky;
		top: calc(var(--header-offset) + 0.75rem);
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		grid-column: 2;
	}

	.single-post__layout.has-toc {
		grid-template-columns: 260px minmax(0, 1fr);
		align-items: start;
	}

	.post-toc-toggle {
		display: none;
	}

	.post-toc-wrap {
		position: sticky;
		top: calc(var(--header-offset) + 0.75rem);
	}

	.post-toc {
		margin-top: 0;
		max-height: calc(100vh - var(--header-offset) - 2rem);
		overflow-y: auto;
	}
}

/* 手機版：TOC 預設收合，由按鈕切換 */
@media screen and (max-width: 1024px) {

	.post-toc {
		display: none;
	}

	.post-toc.is-open {
		display: block;
	}
}


/**
 * Reduced motion
 */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}