@charset "UTF-8";
/* ============================================================================
   香港中醫藥膳專業學會 — 主樣式表
   ----------------------------------------------------------------------------
   Mobile-first。全部顏色走 :root 的 CSS 變數，改主色只改一處。
   目錄：
     01 設計變數
     02 基礎與排版
     03 版面容器
     04 按鈕與連結
     05 頁首 / 導覽 / 語言切換
     06 頁尾
     07 區塊與標題
     08 首頁
     09 認可產品卡片 ★ 全站最重要的視覺元件
     10 篩選列與列表頁
     11 產品詳情頁
     12 合規聲明
     13 內頁元件（步驟、法例、宗旨、會籍…）
     14 表單
     15 Placeholder 標記
     16 進場動畫
     17 工具類與無障礙
   ========================================================================= */

/* == 01 設計變數 ========================================================== */
:root {
	/* 主色：深墨綠 → 玉石綠 */
	--ink:          #0B211B;
	--forest:       #12483A;
	--forest-600:   #175947;
	--jade:         #2E7D63;
	--jade-300:     #7FBFA3;
	--jade-050:     #EDF3F0;

	/* 強調色：溫潤的金 / 琥珀 */
	--gold:         #C8A254;
	--gold-600:     #A6822F;
	--gold-050:     #F8F1E1;
	--amber:        #D08A1E;
	--amber-050:    #FDF2DE;

	/* 中性色：偏暖的紙感 */
	--paper:        #FBFAF7;
	--surface:      #FFFFFF;
	--surface-alt:  #F3F1EB;
	--text:         #1B2621;
	--text-muted:   #62716B;
	--line:         #E2E5E0;
	--line-strong:  #CBD2CC;

	/* 狀態色 */
	--status-valid-bg:    #E4F1EA;
	--status-valid-fg:    #14654A;
	--status-expiring-bg: var(--amber-050);
	--status-expiring-fg: #8A5A08;
	--status-expired-bg:  #ECEDEB;
	--status-expired-fg:  #6B7069;

	/* 字體 */
	--font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-serif: "Noto Serif TC", "Songti TC", "PMingLiU", Georgia, serif;

	/* 尺寸 */
	/* 頁面左右留白：hero、各 section、頁尾、行動版選單共用，改這一個數字全站生效。 */
	--gutter:     28px;
	--container: 1180px;
	--radius:     14px;
	--radius-sm:  8px;
	--radius-lg:  22px;

	/* 陰影 */
	--shadow-sm: 0 1px 2px rgba(11, 33, 27, .06), 0 2px 8px rgba(11, 33, 27, .04);
	--shadow-md: 0 2px 6px rgba(11, 33, 27, .07), 0 12px 28px rgba(11, 33, 27, .08);
	--shadow-lg: 0 6px 14px rgba(11, 33, 27, .09), 0 26px 56px rgba(11, 33, 27, .12);

	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* == 02 基礎與排版 ======================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/*
	 * 錨點跳轉時要讓出 sticky 頁首的高度，否則標題會被蓋住。
	 * --hkpi-header-h 由 assets/js/theme.js 量測實際頁首高度後寫入（載入時與
	 * 視窗改變大小時都會更新），這裡的 72px 只是 JS 還沒跑到時的保守回退值。
	 * 上方那條 topbar 會被捲走，不列入計算。
	 */
	scroll-padding-top: calc(var(--hkpi-header-h, 72px) + 16px);
}
/*
 * 這裡刻意沒有 overflow-x 的夾取規則。
 * 先前為了擋住用 translateX(100%) 藏在畫面外的導覽面板而加過，
 * 現在面板改成相對頁首的 absolute 下拉（見第 05 節），
 * 沒有任何元素被水平移出畫面，量測過各斷點都不會產生水平捲軸，
 * 就不必在根元素上動 overflow（那會連帶影響 sticky 與捲動行為）。
 */

body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.75;
	letter-spacing: .01em;
	-webkit-font-smoothing: antialiased;
}

body.has-nav-open { overflow: hidden; }

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

h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: .01em;
	color: var(--ink);
	margin: 0 0 .6em;
}

/* 英文版標題不用襯線體，避免中文襯線字型 fallback 到不合適的西文字。 */
.hkpi-lang-en h1, .hkpi-lang-en h2, .hkpi-lang-en h3, .hkpi-lang-en h4 {
	font-family: var(--font-sans);
	font-weight: 700;
	letter-spacing: -.01em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--forest-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--jade); }

:focus-visible {
	outline: 2px solid var(--gold-600);
	outline-offset: 3px;
	border-radius: 3px;
}

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* 內文區塊 */
.prose { font-size: 1.0625rem; color: #2C3A34; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 1.5rem; margin-top: 2em; }
.prose h3 { font-size: 1.2rem; margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.35em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .4em; }
.prose blockquote {
	margin: 1.5em 0;
	padding: .2em 0 .2em 1.25em;
	border-left: 3px solid var(--jade-300);
	color: var(--text-muted);
}
.prose img { border-radius: var(--radius); margin: 1.5em 0; }

.prose-block { margin-bottom: 2.75rem; }
.prose-block__title {
	font-size: 1.375rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--jade-050);
	margin-bottom: 1.1rem;
}

/* == 03 版面容器 ========================================================== */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--narrow { max-width: 780px; }
.container--form   { max-width: 900px; }

.section { padding: 56px 0; }
.section--muted { background: var(--surface-alt); }

@media (min-width: 768px) {
	:root { --gutter: 32px; }
	.section { padding: 84px 0; }
}

/* == 04 按鈕與連結 ======================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: .82em 1.6em;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--font-sans);
	font-size: .975rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s var(--ease), color .2s var(--ease),
				border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--sm { padding: .6em 1.15em; font-size: .875rem; }

.btn--primary { background: var(--forest); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--forest-600); color: #fff; box-shadow: var(--shadow-md); }

.btn--gold { background: var(--gold); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn--gold:hover { background: #D8B469; color: var(--ink); box-shadow: var(--shadow-md); }

.btn--outline { background: transparent; border-color: var(--line-strong); color: var(--forest); }
.btn--outline:hover { border-color: var(--forest); background: var(--jade-050); color: var(--forest); }

.btn--ghost { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .38); color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-weight: 500;
	text-decoration: none;
	color: var(--forest-600);
	white-space: nowrap;
}
.link-arrow span { transition: transform .2s var(--ease); }
.link-arrow:hover span { transform: translateX(4px); }
.link-arrow--sm { font-size: .9rem; }

/* == 05 頁首 / 導覽 / 語言切換 ============================================ */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: .75em 1.25em;
	background: var(--forest);
	color: #fff;
}
.skip-link:focus { left: 12px; top: 12px; }

.topbar {
	position: relative;
	/* 疊在遮罩（40）之上，選單開啟時不要連 topbar 一起被壓暗。 */
	z-index: 51;
	background: var(--ink);
	color: rgba(255, 255, 255, .78);
	font-size: .8125rem;
}
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 40px;
}
.topbar__note { margin: 0; letter-spacing: .04em; }
.topbar__meta { display: flex; align-items: center; gap: 16px; }
.topbar__link { color: inherit; text-decoration: none; }
.topbar__link:hover { color: #fff; }

@media (max-width: 599px) {
	.topbar__note { display: none; }
	.topbar__inner { justify-content: flex-end; }
}

.lang-switch { display: inline-flex; gap: 2px; }
.lang-switch__item {
	display: inline-block;
	padding: .15em .6em;
	border-radius: 999px;
	font-size: .8125rem;
	font-weight: 500;
	text-decoration: none;
	color: inherit;
	opacity: .7;
	transition: background-color .2s var(--ease), opacity .2s var(--ease);
}
.lang-switch__item:hover { opacity: 1; color: inherit; }
.lang-switch__item.is-current {
	background: rgba(255, 255, 255, .16);
	color: #fff;
	opacity: 1;
}
.lang-switch--nav .lang-switch__item { color: var(--text-muted); }
.lang-switch--nav .lang-switch__item.is-current { background: var(--jade-050); color: var(--forest); }

/*
 * 行動版選單的遮罩。
 * 蓋住內文（z-index 40），但低於頁首與 topbar（50 / 51），
 * 所以頁首與展開的選單面板維持全對比，一眼看得出哪一層可以點。
 */
.nav-scrim {
	position: fixed;
	inset: 0;
	z-index: 40;
	background: rgba(11, 33, 27, .48);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s var(--ease), visibility .25s var(--ease);
}
body.has-nav-open .nav-scrim {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(251, 250, 247, .94);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid var(--line);
	transition: box-shadow .25s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 72px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
/*
 * logo.png 的圖徽內容是 512×474，上下各有 19px 透明邊（佔 7.4%），
 * 所以可視圖徽只有方框的 92.6%。52px 方框 → 可視 48px，
 * 剛好等於 brand 文字塊（中文名 + 兩行英文）的高度，兩者對齊成一個整體。
 */
.brand__logo { width: 52px; height: 52px; flex: none; }

/*
 * 深色頁尾：圖徽內圈的中文字是暗紅 rgb(127,59,46)，直接壓在 --ink 上幾乎看不見。
 * 給它一個白色圓形底做成徽章 —— 不動圖檔，也不用 filter 轉白
 * （那會把環內的字一起洗掉）。
 * box-sizing 是全域 border-box，所以 64px 扣掉 7px padding 後圖徽畫在 50px 上。
 */
.site-footer .brand__logo {
	width: 64px;
	height: 64px;
	padding: 7px;
	background: #fff;
	border-radius: 50%;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__name {
	font-family: var(--font-serif);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--ink);
	letter-spacing: .02em;
}
.brand__sub {
	font-size: .6875rem;
	color: var(--text-muted);
	letter-spacing: .04em;
	max-width: 22ch;
}

/*
 * 正式英文名比暫代值長（71 字元），頁首的空間有限：
 * 收緊字級與行高、放寬 max-width，讓它穩定落在兩行，不要擠成三行把頁首撐高。
 * 頁尾空間充裕，維持原樣不套這條。
 */
.site-header .brand__sub {
	/* 正式英文名 71 字元，38ch 讓它穩定落在兩行，不會把頁首撐高。 */
	max-width: 38ch;
	font-size: .625rem;
	line-height: 1.4;
}

/* 1024–1199px 的頁首要同時塞下五個選單項與 CTA，這裡先收起英文名。 */
@media (min-width: 1024px) and (max-width: 1199px) {
	.site-header .brand__sub { display: none; }
}

@media (max-width: 700px) {
	.site-header .brand__sub { display: none; }
}
@media (max-width: 480px) {
	.brand__name { font-size: 1rem; }
}

.nav-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 10px;
	background: none;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	cursor: pointer;
}
.nav-toggle__bar {
	display: block;
	height: 2px;
	background: var(--forest);
	border-radius: 2px;
	transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/*
 * 行動版導覽面板。
 *
 * 這裡刻意「不」用 position: fixed —— .site-header 有 backdrop-filter，
 * 依 CSS 規範會成為 fixed 子孫的 containing block，結果面板會被算進
 * 73px 高的頁首裡，只剩一排的高度（內容 418px 被裁到 64px）。
 * 改用相對頁首的 absolute 下拉，高度 auto，選單項目一次完整展開。
 */
.primary-nav {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 16px var(--gutter) 28px;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow-lg);
	/*
	 * 一般手機一定放得下，只有橫置等極端情況才會出現內部捲動。
	 * 這裡是 JS 還沒跑到時的回退值；實際開啟時 theme.js 會依當下頁首底緣
	 * 精確算出可用高度再寫進 style，捲到頁面中段時也不會算錯。
	 */
	max-height: calc(100vh - var(--hkpi-header-h, 72px) - 52px);
	max-height: calc(100dvh - var(--hkpi-header-h, 72px) - 52px);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	pointer-events: none;
	transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s var(--ease);
}
.primary-nav.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.primary-nav__list { list-style: none; margin: 0 0 24px; padding: 0; }
.primary-nav__list li { border-bottom: 1px solid var(--line); }
.primary-nav__list a {
	display: block;
	padding: .85em 0;
	font-size: 1rem;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
}
.primary-nav__list a:hover { color: var(--jade); }
.primary-nav__list .current-menu-item > a { color: var(--forest); }

.primary-nav__list .sub-menu { list-style: none; margin: 0 0 .5em; padding: 0 0 0 1em; }
.primary-nav__list .sub-menu a { font-size: .95rem; font-weight: 400; color: var(--text-muted); }

.primary-nav__actions { display: flex; align-items: center; gap: 14px; }

@media (min-width: 1024px) {
	.nav-toggle { display: none; }

	.primary-nav {
		position: static;
		display: flex;
		align-items: center;
		gap: 28px;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
		max-height: none;
		overflow: visible;
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		transition: none;
	}
	.primary-nav__list { display: flex; align-items: center; gap: 4px; margin: 0; }
	.primary-nav__list > li { position: relative; border: 0; }
	.primary-nav__list > li > a {
		padding: .6em .85em;
		font-size: .95rem;
		border-radius: var(--radius-sm);
	}
	.primary-nav__list > li > a:hover { background: var(--jade-050); }
	.primary-nav__list > .current-menu-item > a,
	.primary-nav__list > .current-menu-parent > a,
	.primary-nav__list > .current-menu-ancestor > a { background: var(--jade-050); color: var(--forest); }

	.primary-nav__list .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		padding: 8px;
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--radius);
		box-shadow: var(--shadow-md);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s var(--ease);
	}
	.primary-nav__list > li:hover .sub-menu,
	.primary-nav__list > li:focus-within .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.primary-nav__list .sub-menu a { padding: .55em .75em; border-radius: var(--radius-sm); }
	.primary-nav__list .sub-menu a:hover { background: var(--jade-050); }

	.lang-switch--nav { display: none; }

	/* 桌機沒有行動版選單，遮罩完全不存在。 */
	.nav-scrim { display: none; }
}

@media (max-width: 1023px) {
	.lang-switch--topbar { display: none; }
}

/* == 06 頁尾 ============================================================== */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, .72); margin-top: 0; }

.site-footer__grid {
	display: grid;
	gap: 40px;
	padding: 56px var(--gutter);
}
@media (min-width: 768px) {
	.site-footer__grid { grid-template-columns: repeat(2, 1fr); padding: 72px var(--gutter); }
}
@media (min-width: 1024px) {
	.site-footer__grid { grid-template-columns: 1.6fr 1fr 1.3fr 1.1fr; gap: 48px; }
}

.brand--footer .brand__name { color: #fff; }
.brand--footer .brand__sub { color: rgba(255, 255, 255, .55); }

.site-footer__blurb {
	margin-top: 18px;
	font-size: .9rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, .62);
	max-width: 38ch;
}

.site-footer__social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.social-link {
	padding: .35em .85em;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	font-size: .8125rem;
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
	transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.social-link:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); color: #fff; }

.footer__heading {
	font-family: var(--font-sans);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 1.1em;
}

.footer-menu { list-style: none; margin: 0; padding: 0; }
.footer-menu li { margin-bottom: .55em; }
.footer-menu a { color: rgba(255, 255, 255, .72); text-decoration: none; font-size: .925rem; }
.footer-menu a:hover { color: #fff; }

.contact-list { list-style: none; margin: 0; padding: 0; font-size: .9rem; line-height: 1.7; }
.contact-list li { margin-bottom: .9em; }
.contact-list__label {
	display: block;
	font-size: .75rem;
	letter-spacing: .08em;
	color: rgba(255, 255, 255, .42);
	margin-bottom: .15em;
}

.site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); }
.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
	padding-block: 20px;
	font-size: .8125rem;
	color: rgba(255, 255, 255, .5);
}
.site-footer__copy, .site-footer__phase { margin: 0; }
.site-footer__phase { color: var(--gold); }

.footer-widget { margin-bottom: 24px; }

/* 內頁的聯絡資料卡是淺色底，標籤要換成深色 */
.side-card .contact-list__label { color: var(--text-muted); }
.contact-list--stacked li { margin-bottom: 1.1em; }
.contact-list--stacked { font-size: .95rem; }

/* == 07 區塊與標題 ======================================================== */
.section-heading { max-width: 62ch; margin-bottom: 36px; }
.section-heading__eyebrow {
	margin: 0 0 .6em;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold-600);
}
.section-heading__title { font-size: clamp(1.5rem, 3.4vw, 2.125rem); margin-bottom: .4em; }
.section-heading__lead { margin: 0; color: var(--text-muted); font-size: 1.0625rem; }

.section-heading-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 36px;
}
.section-heading-row .section-heading { margin-bottom: 0; }

.page-banner {
	background: linear-gradient(140deg, var(--forest) 0%, var(--ink) 100%);
	color: #fff;
	padding: 48px 0 44px;
}
.page-banner__title {
	color: #fff;
	font-size: clamp(1.65rem, 4.4vw, 2.5rem);
	margin-bottom: .3em;
}
.page-banner__lead {
	margin: 0;
	max-width: 62ch;
	color: rgba(255, 255, 255, .78);
	font-size: 1.03rem;
}

.breadcrumbs { background: var(--surface); border-bottom: 1px solid var(--line); font-size: .8125rem; }
.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	list-style: none;
	margin: 0;
	padding: 12px 0;
	color: var(--text-muted);
}
.breadcrumbs__item + .breadcrumbs__item::before { content: "/"; margin-right: .5em; color: var(--line-strong); }
.breadcrumbs__item a { color: var(--text-muted); text-decoration: none; }
.breadcrumbs__item a:hover { color: var(--forest); }

.empty-state {
	padding: 56px 24px;
	text-align: center;
	background: var(--surface);
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius-lg);
}
.empty-state__title { font-size: 1.25rem; }
.empty-state__text { color: var(--text-muted); margin-bottom: 1.5em; }

/* 分頁 */
.pagination { margin-top: 48px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 .85em;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text);
	text-decoration: none;
	font-size: .925rem;
}
.pagination .page-numbers:hover { border-color: var(--forest); color: var(--forest); }
.pagination .page-numbers.current { background: var(--forest); border-color: var(--forest); color: #fff; }
.pagination .page-numbers.dots { border-color: transparent; background: none; }
.screen-reader-text + .nav-links { margin-top: 0; }

/* == 08 首頁 ============================================================== */
.hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(155deg, var(--forest) 0%, var(--ink) 62%, #071812 100%);
	color: #fff;
}
.hero__deco {
	position: absolute;
	inset: auto -20% -55% auto;
	width: 720px;
	height: 720px;
	background:
		radial-gradient(circle at 30% 30%, rgba(200, 162, 84, .22), transparent 62%),
		radial-gradient(circle at 70% 70%, rgba(127, 191, 163, .18), transparent 58%);
	border-radius: 50%;
	pointer-events: none;
}
.hero__inner { position: relative; padding: 64px var(--gutter) 72px; }
.hero__content { max-width: 720px; }

.hero__eyebrow {
	display: inline-block;
	margin: 0 0 1.4em;
	padding: .35em 1em;
	border: 1px solid rgba(200, 162, 84, .5);
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .14em;
	color: var(--gold);
}
.hero__title {
	color: #fff;
	font-size: clamp(1.9rem, 6.2vw, 3.35rem);
	line-height: 1.28;
	margin-bottom: .55em;
}
.hero__title em {
	font-style: normal;
	color: var(--gold);
	position: relative;
}
.hero__lead {
	max-width: 56ch;
	font-size: clamp(1rem, 2.1vw, 1.125rem);
	color: rgba(255, 255, 255, .8);
	margin-bottom: 2em;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 48px;
	margin: 56px 0 0;
	padding-top: 32px;
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.hero__stat { margin: 0; }
.hero__stat-value {
	font-family: var(--font-serif);
	font-size: 2rem;
	font-weight: 600;
	color: var(--gold);
	line-height: 1.1;
}
.hero__stat-label {
	margin: .35em 0 0;
	font-size: .8125rem;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .6);
}

@media (min-width: 768px) {
	.hero__inner { padding: 96px var(--gutter) 104px; }
}

.pillar-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) { .pillar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pillar-grid { grid-template-columns: repeat(4, 1fr); } }

.pillar {
	padding: 28px 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.pillar:hover { border-color: var(--jade-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pillar__no {
	margin: 0 0 .8em;
	font-family: var(--font-serif);
	font-size: 1.5rem;
	color: var(--gold);
	letter-spacing: .04em;
}
.pillar__title { font-size: 1.0625rem; margin-bottom: .5em; }
.pillar__text { margin: 0; font-size: .925rem; color: var(--text-muted); }

.news-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }

.news-card {
	display: flex;
	flex-direction: column;
	gap: .5em;
	padding: 26px 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.news-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.news-card__date { font-size: .8125rem; letter-spacing: .06em; color: var(--gold-600); }
.news-card__title { font-size: 1.125rem; margin: 0; }
.news-card__title a { color: var(--ink); text-decoration: none; }
.news-card__title a:hover { color: var(--jade); }
.news-card__excerpt { margin: 0; font-size: .925rem; color: var(--text-muted); flex: 1; }

.cta-band { background: var(--forest); color: #fff; }
.cta-band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 48px;
}
.cta-band__title { color: #fff; font-size: clamp(1.35rem, 3vw, 1.75rem); margin-bottom: .35em; }
.cta-band__text { margin: 0; max-width: 58ch; color: rgba(255, 255, 255, .78); font-size: .975rem; }

/* == 09 認可產品卡片 ====================================================== */
.product-grid {
	display: grid;
	gap: 22px;
	grid-template-columns: 1fr;
}
@media (min-width: 560px)  { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .product-grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px)  { .product-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.product-card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.product-card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
	border-color: var(--jade-300);
}

.product-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--jade-050);
	overflow: hidden;
}
.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.04); }

/* 認可類別 badge */
.product-card__type {
	position: absolute;
	top: 12px;
	left: 12px;
	display: inline-block;
	padding: .3em .85em;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .02em;
	backdrop-filter: blur(6px);
}
.product-card__type--star    { background: rgba(200, 162, 84, .95); color: #3B2C08; }
.product-card__type--quality { background: rgba(18, 72, 58, .93);  color: #EAF3EE; }

.product-card__body { flex: 1; padding: 20px 22px 8px; }

.product-card__category {
	margin: 0 0 .5em;
	font-size: .75rem;
	letter-spacing: .08em;
	color: var(--text-muted);
}
.product-card__title { font-size: 1.125rem; margin-bottom: .3em; line-height: 1.45; }
.product-card__title a { color: var(--ink); text-decoration: none; }
.product-card__title a:hover { color: var(--jade); }
.product-card__company { margin: 0 0 1.1em; font-size: .875rem; color: var(--text-muted); }

.product-card__meta { margin: 0; font-size: .8125rem; }
.product-card__meta-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: .45em 0;
	border-top: 1px dashed var(--line);
}
.product-card__meta dt { color: var(--text-muted); margin: 0; }
.product-card__meta dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--text); }

.product-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 22px 20px;
}
.product-card__link {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	font-size: .875rem;
	font-weight: 500;
	color: var(--forest-600);
	text-decoration: none;
}
.product-card__link span { transition: transform .2s var(--ease); }
.product-card:hover .product-card__link span { transform: translateX(4px); }

.product-card--compact .product-card__meta-row:first-child { border-top: 0; }

/* 已過期：降彩度 + 降透明度，但仍然照樣列出 */
.product-card--expired { filter: saturate(.35); opacity: .72; }
.product-card--expired:hover { filter: saturate(.6); opacity: .92; }

/* 認證狀態 badge */
.status-badge {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .32em .85em;
	border-radius: 999px;
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}
.status-badge--sm { font-size: .75rem; padding: .28em .7em; }
.status-badge__dot { width: .5em; height: .5em; border-radius: 50%; background: currentColor; flex: none; }

.status-badge--valid    { background: var(--status-valid-bg);    color: var(--status-valid-fg); }
.status-badge--expiring { background: var(--status-expiring-bg); color: var(--status-expiring-fg); }
.status-badge--expired  { background: var(--status-expired-bg);  color: var(--status-expired-fg); }
.status-badge--unknown  { background: #FBE4E4;                   color: #A02222; }

/* == 10 篩選列與列表頁 ==================================================== */
.product-filters {
	display: grid;
	gap: 18px;
	padding: 22px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	margin-bottom: 28px;
}

.product-filters__search { display: flex; gap: 10px; }
.product-filters__search input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: .75em 1em;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	font: inherit;
	font-size: .95rem;
	background: var(--paper);
	color: var(--text);
}
.product-filters__search input[type="search"]:focus { border-color: var(--jade); background: #fff; }

.product-filters__selects {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
}
@media (min-width: 720px) {
	.product-filters__selects { grid-template-columns: repeat(3, 1fr) auto; align-items: end; }
}

.field { display: flex; flex-direction: column; gap: .35em; }
.field__label { font-size: .75rem; letter-spacing: .06em; color: var(--text-muted); }
.field__control {
	padding: .7em .9em;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: var(--paper);
	font: inherit;
	font-size: .925rem;
	color: var(--text);
}
.field__control:focus { border-color: var(--jade); background: #fff; }
.field--actions { flex-direction: row; align-items: center; gap: 12px; }

.product-filters__reset { font-size: .875rem; color: var(--text-muted); }

.product-results {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 24px;
}
.product-results__count { margin: 0; font-size: .95rem; color: var(--text-muted); }
.product-results__count strong { color: var(--ink); font-size: 1.1rem; }
.product-results__legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; font-size: .8125rem; color: var(--text-muted); }
.legend-item { display: inline-flex; align-items: center; gap: .4em; }
.legend-item__dot { width: .55em; height: .55em; border-radius: 50%; }
.legend-item--valid    .legend-item__dot { background: var(--status-valid-fg); }
.legend-item--expiring .legend-item__dot { background: var(--amber); }
.legend-item--expired  .legend-item__dot { background: var(--line-strong); }

/* == 11 產品詳情頁 ======================================================== */
.product-detail__hero { background: var(--surface); border-bottom: 1px solid var(--line); }
.product-detail__hero-inner {
	display: grid;
	gap: 32px;
	padding-block: 40px 48px;
}
@media (min-width: 900px) {
	.product-detail__hero-inner { grid-template-columns: 5fr 6fr; gap: 52px; align-items: start; }
}

.product-detail__gallery { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.product-detail__gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.product-detail--expired .product-detail__gallery { filter: saturate(.35); }
.product-detail__expired-flag {
	position: absolute;
	inset: auto 0 0 0;
	margin: 0;
	padding: .6em 1em;
	background: rgba(27, 38, 33, .88);
	color: #fff;
	font-size: .875rem;
	letter-spacing: .04em;
	text-align: center;
}

.product-detail__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 1em; }
.product-detail__eyebrow .product-card__type { position: static; }
.product-detail__cat { font-size: .8125rem; letter-spacing: .06em; color: var(--text-muted); }

.product-detail__title { font-size: clamp(1.6rem, 4.2vw, 2.35rem); margin-bottom: .2em; }
.product-detail__title-en { margin: 0 0 .9em; color: var(--text-muted); font-size: 1rem; }
.product-detail__company { margin: 0 0 1.4em; font-size: 1.0625rem; font-weight: 500; }
.product-detail__company-en { display: block; font-size: .875rem; font-weight: 400; color: var(--text-muted); }

.product-detail__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-bottom: 24px;
}
.product-detail__status-text { font-size: .9rem; color: var(--text-muted); }

.cert-table { margin: 0; border-top: 1px solid var(--line); }
.cert-table__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: .1em;
	padding: .8em 0;
	border-bottom: 1px solid var(--line);
}
@media (min-width: 480px) {
	.cert-table__row { grid-template-columns: 11em 1fr; gap: 1em; align-items: baseline; }
}
.cert-table dt { margin: 0; font-size: .875rem; color: var(--text-muted); }
.cert-table dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }

.product-detail__body {
	display: grid;
	gap: 40px;
	padding-block: 48px;
}
@media (min-width: 900px) {
	.product-detail__body { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; }
}

.ingredient-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ingredient-list li {
	padding: .4em 1em;
	background: var(--jade-050);
	border: 1px solid #DCE8E2;
	border-radius: 999px;
	font-size: .9rem;
	color: #2C4A3F;
}

.product-detail__aside { display: grid; gap: 20px; align-content: start; }

.side-card {
	padding: 26px 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.side-card__title { font-size: 1.0625rem; margin-bottom: .6em; }
.side-card__text { font-size: .925rem; color: var(--text-muted); margin-bottom: 1.3em; }
.side-card--accent { background: var(--gold-050); border-color: #EADFC4; }
.side-card--accent .side-card__text { color: #6E5A28; }

.map-placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	padding: 20px;
	background:
		repeating-linear-gradient(45deg, #EEF2EF 0 12px, #E7EDE9 12px 24px);
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius-sm);
	color: var(--text-muted);
	font-size: .875rem;
	text-align: center;
}

/* == 12 合規聲明 ========================================================== */
.compliance-notice {
	padding: 20px 22px;
	background: var(--amber-050);
	border: 1px solid #F0DFBC;
	border-left: 4px solid var(--gold);
	border-radius: var(--radius-sm);
	margin: 32px 0 0;
}
.compliance-notice__label {
	display: flex;
	align-items: center;
	gap: .5em;
	margin: 0 0 .4em;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: #7C5A12;
}
.compliance-notice__icon {
	display: inline-grid;
	place-items: center;
	width: 1.4em;
	height: 1.4em;
	border-radius: 50%;
	background: var(--gold);
	color: #fff;
	font-size: .8em;
	font-weight: 700;
}
.compliance-notice__text { margin: 0; font-size: .925rem; line-height: 1.75; color: #5E4A1E; }
.compliance-notice--inline { margin-top: 36px; }

/* == 13 內頁元件 ========================================================== */
.four-grid, .aims-grid, .law-grid, .tier-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.four-grid, .aims-grid, .law-grid { grid-template-columns: repeat(2, 1fr); }
	.tier-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.four-grid { grid-template-columns: repeat(4, 1fr); }
	.aims-grid { grid-template-columns: repeat(3, 1fr); }
	.law-grid  { grid-template-columns: repeat(3, 1fr); }
}

.four-card, .aim-card, .law-card, .tier-card {
	padding: 28px 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.four-card__no {
	margin: 0 0 .7em;
	font-family: var(--font-serif);
	font-size: 1.35rem;
	color: var(--gold);
}
.four-card__title, .aim-card__title, .law-card__title { font-size: 1.0625rem; margin-bottom: .5em; }
.four-card__text, .aim-card__text, .law-card__text { margin: 0; font-size: .925rem; color: var(--text-muted); }

.aim-card { border-left: 3px solid var(--jade-300); }
.aim-card__no {
	margin: 0 0 .5em;
	font-family: var(--font-serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--gold);
	line-height: 1;
}

.law-card__cap {
	display: inline-block;
	margin: 0 0 .8em;
	padding: .25em .7em;
	background: var(--jade-050);
	border-radius: var(--radius-sm);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--forest);
}

.endorsement {
	margin-top: 28px;
	padding: 28px 26px;
	background: var(--forest);
	color: #fff;
	border-radius: var(--radius);
}
.endorsement__title { color: var(--gold); font-size: 1.0625rem; margin-bottom: .5em; }
.endorsement__text { margin: 0; color: rgba(255, 255, 255, .82); font-size: .975rem; }

.tier-card { display: flex; flex-direction: column; gap: 14px; }
.tier-card .product-card__type { position: static; align-self: flex-start; margin: 0; }
.tier-card__lead { margin: 0; font-size: .975rem; }
.tier-card .link-arrow { margin-top: auto; }

.tick-list { list-style: none; margin: 0; padding: 0; font-size: .925rem; }
.tick-list li { position: relative; padding-left: 1.6em; margin-bottom: .6em; color: var(--text-muted); }
.tick-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: -.05em;
	color: var(--jade);
	font-weight: 700;
}

.step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 1024px) { .step-list { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

.step {
	display: flex;
	gap: 16px;
	padding: 26px 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
@media (min-width: 1024px) { .step { flex-direction: column; gap: 14px; } }

.step__marker {
	flex: none;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--forest);
	color: var(--gold);
	font-family: var(--font-serif);
	font-size: 1.05rem;
	font-weight: 600;
}
.step__title { font-size: 1.0625rem; margin-bottom: .25em; }
.step__duration {
	margin: 0 0 .7em;
	font-size: .8125rem;
	letter-spacing: .04em;
	color: var(--gold-600);
}
.step__text { margin: 0; font-size: .9rem; color: var(--text-muted); }

.step-list--compact { display: block; counter-reset: hkpi-step; }
.step-list--compact li {
	position: relative;
	padding: 0 0 .7em 2em;
	background: none;
	border: 0;
	font-size: .925rem;
	color: var(--text-muted);
}
.step-list--compact li::before {
	counter-increment: hkpi-step;
	content: counter(hkpi-step);
	position: absolute;
	left: 0;
	top: .15em;
	display: grid;
	place-items: center;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background: var(--jade-050);
	color: var(--forest);
	font-size: .75rem;
	font-weight: 700;
}

.membership-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 768px)  { .membership-grid { grid-template-columns: repeat(2, 1fr); } }

.membership-block {
	padding: 28px 26px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.membership-block__title {
	font-size: 1.0625rem;
	padding-bottom: .5em;
	margin-bottom: 1em;
	border-bottom: 2px solid var(--jade-050);
}
.membership-block--table { grid-column: 1 / -1; }

.membership-block__label {
	margin: 1.4em 0 .6em;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--gold-600);
}
.membership-block__label:first-of-type { margin-top: 0; }

.membership-block__contact { font-size: .9rem; margin: 1.2em 0; }
.membership-block__contact .contact-list__label { color: var(--text-muted); }

.fee-table { width: 100%; border-collapse: collapse; font-size: .925rem; }
.fee-table th, .fee-table td { padding: .65em .5em; text-align: left; border-bottom: 1px solid var(--line); }
.fee-table thead th {
	font-family: var(--font-sans);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--text-muted);
	text-transform: uppercase;
}
.fee-table tbody th { font-weight: 500; color: var(--text); white-space: nowrap; }
.fee-table td { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }

/* 會董職務表：職務 / 金額 / 學院職務 三欄 */
.fee-table--roles .fee-table__amount { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; }
.fee-table--roles .fee-table__institute { text-align: left; color: var(--text-muted); }
.fee-table--roles thead th:nth-child(2) { text-align: right; }

/* 會董職務表有 13 列三欄，窄螢幕改成每列一張小卡，不要橫向擠爆。 */
@media (max-width: 719px) {
	.fee-table--roles thead { display: none; }
	.fee-table--roles,
	.fee-table--roles tbody,
	.fee-table--roles tr,
	.fee-table--roles th,
	.fee-table--roles td { display: block; }

	.fee-table--roles tr {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: baseline;
		gap: 0 12px;
		padding: .7em 0;
		border-bottom: 1px solid var(--line);
	}
	.fee-table--roles tbody th,
	.fee-table--roles td { padding: 0; border: 0; }
	.fee-table--roles tbody th { font-size: 1rem; }
	.fee-table--roles .fee-table__amount::before {
		content: "HK$ ";
		font-size: .75rem;
		color: var(--text-muted);
	}
	.fee-table--roles .fee-table__institute {
		grid-column: 1 / -1;
		margin-top: .25em;
		font-size: .8125rem;
	}
	.fee-table--roles .fee-table__institute::before {
		content: attr(data-label) "：";
		color: var(--text-muted);
	}
}

/* 感謝頁 */
.section--thanks { padding-block: 72px; }
.thanks-card {
	padding: 44px 32px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	text-align: center;
}
.thanks-card__mark {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	margin: 0 auto 24px;
	border-radius: 50%;
	background: var(--status-valid-bg);
	color: var(--status-valid-fg);
	font-size: 2rem;
}
.thanks-card__title { font-size: clamp(1.4rem, 3.6vw, 1.95rem); }
.thanks-card .prose { text-align: left; }
.thanks-card__next { text-align: left; margin: 28px auto; max-width: 46ch; }
.thanks-card .hero__actions { justify-content: center; }

/* 文章 */
.post-meta { font-size: .875rem; color: var(--text-muted); margin-bottom: 1.5em; }
.post-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	font-size: .925rem;
}

/* 搜尋 */
.search-wrap { margin-bottom: 32px; }
.search-form { display: flex; gap: 10px; }
.search-form__input {
	flex: 1;
	min-width: 0;
	padding: .75em 1em;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	font: inherit;
	background: var(--surface);
	color: var(--text);
}
.search-form__input:focus { border-color: var(--jade); }

.search-results { list-style: none; margin: 0; padding: 0; }
.search-result { padding: 22px 0; border-bottom: 1px solid var(--line); }
.search-result__type { margin: 0 0 .3em; font-size: .75rem; letter-spacing: .08em; color: var(--gold-600); }
.search-result__title { font-size: 1.125rem; margin-bottom: .3em; }
.search-result__title a { color: var(--ink); text-decoration: none; }
.search-result__title a:hover { color: var(--jade); }
.search-result__excerpt { margin: 0; font-size: .925rem; color: var(--text-muted); }

/* 聯絡頁版面 */
.contact-layout { display: grid; gap: 40px; }
@media (min-width: 900px) {
	.contact-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
}
.contact-layout__info { display: grid; gap: 20px; }

/* == 14 表單（Contact Form 7） ============================================ */
.section--form { background: var(--surface-alt); }

.form-shell {
	padding: 28px 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	margin-top: 28px;
}
@media (min-width: 768px) { .form-shell { padding: 40px 38px; } }

.form-section { margin: 0 0 32px; padding: 0; border: 0; }
.form-section__legend {
	display: block;
	width: 100%;
	padding: 0 0 .55em;
	margin-bottom: 1.2em;
	border-bottom: 2px solid var(--jade-050);
	font-family: var(--font-serif);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--ink);
}

.form-grid { display: grid; gap: 0 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, 1fr); } }

.form-row { margin-bottom: 1.15em; }
.form-row > label {
	display: block;
	margin-bottom: .4em;
	font-size: .875rem;
	font-weight: 500;
	color: var(--text);
}
.required { color: #B3261E; margin-left: .25em; }

.form-shell input[type="text"],
.form-shell input[type="email"],
.form-shell input[type="tel"],
.form-shell input[type="url"],
.form-shell input[type="date"],
.form-shell input[type="number"],
.form-shell select,
.form-shell textarea {
	width: 100%;
	padding: .72em .9em;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: var(--paper);
	font: inherit;
	font-size: .95rem;
	color: var(--text);
	transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.form-shell textarea { resize: vertical; min-height: 5em; }
.form-shell input:focus, .form-shell select:focus, .form-shell textarea:focus {
	border-color: var(--jade);
	background: #fff;
}

.form-shell input[type="file"] {
	width: 100%;
	padding: .6em;
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius-sm);
	background: var(--paper);
	font-size: .875rem;
}
.form-row--file > label { color: var(--text-muted); font-weight: 400; }

.form-hint { display: block; margin-top: .45em; font-size: .8125rem; color: var(--text-muted); }
.form-hint--warning { color: #8A5A08; }

.form-row--consent { margin-top: 1.5em; font-size: .9rem; }
.form-row--consent .wpcf7-list-item { margin: 0; }

.form-actions { margin: 1.8em 0 0; }

/* CF7 的複選項目 */
.wpcf7-checkbox, .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.wpcf7-list-item { margin: 0; }
.wpcf7-list-item-label { font-size: .925rem; }
.wpcf7-list-item input { margin-right: .4em; }

/* CF7 的訊息與驗證提示 */
.wpcf7 form .wpcf7-response-output {
	margin: 1.5em 0 0;
	padding: .9em 1.1em;
	border-width: 1px;
	border-radius: var(--radius-sm);
	font-size: .925rem;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--jade); background: var(--status-valid-bg); color: var(--status-valid-fg); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output { border-color: #E0B44A; background: var(--amber-050); color: var(--status-expiring-fg); }
.wpcf7-not-valid-tip { font-size: .8125rem; color: #B3261E; margin-top: .3em; }
.wpcf7-not-valid { border-color: #E39B95 !important; }
.wpcf7-spinner { margin-left: .8em; }

/* == 15 Placeholder 標記 ================================================== */
.hkpi-placeholder {
	border-bottom: 1px dashed var(--gold);
	background: rgba(200, 162, 84, .1);
	padding: 0 .15em;
	cursor: help;
}

.hkpi-placeholder-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6em;
	margin: 20px 0 0;
	padding: .7em 1em;
	background: var(--amber-050);
	border: 1px dashed var(--gold);
	border-radius: var(--radius-sm);
	font-size: .8125rem;
	color: #6E5A28;
}
.hkpi-placeholder-note__tag {
	padding: .15em .6em;
	background: var(--gold);
	border-radius: 999px;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: #fff;
}

/* == 16 進場動畫 ========================================================== */
/*
 * 內容隨捲動逐段浮現（IntersectionObserver，見 assets/js/theme.js）。
 *
 * <html> 上的 .hkpi-anim 由 wp_head 的短腳本加上，而且只在
 *   ① 瀏覽器支援 IntersectionObserver，且
 *   ② 使用者沒有開啟系統的「減少動態效果」
 * 兩個條件同時成立時才加。沒加上去時下面所有規則都不生效，
 * 內容維持原本就完全可見 —— JS 壞掉、被擋掉或關掉都不會有東西看不到。
 *
 * 用 animation 而不是 transition，是為了不覆蓋元件自己的 transition
 * （例如 .product-card 的 hover 位移與陰影）；animation-fill-mode 用
 * backwards：延遲期間維持起始狀態避免閃現，播完就完全交還給元件原本的樣式。
 */
.hkpi-anim [data-animate]:not(.is-visible),
.hkpi-anim [data-animate-children] > *:not(.is-visible) {
	opacity: 0;
}

.hkpi-anim [data-animate].is-visible,
.hkpi-anim [data-animate-children] > *.is-visible {
	animation: hkpi-rise .62s var(--ease) var(--hkpi-delay, 0ms) backwards;
}

@keyframes hkpi-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

/* 保險：腳本載入失敗時，由 wp_head 的 setTimeout 掛上這個 class 把內容放出來。 */
.hkpi-anim-failsafe [data-animate]:not(.is-visible),
.hkpi-anim-failsafe [data-animate-children] > *:not(.is-visible) {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.hkpi-anim [data-animate]:not(.is-visible),
	.hkpi-anim [data-animate-children] > *:not(.is-visible) { opacity: 1; }
	.hkpi-anim [data-animate].is-visible,
	.hkpi-anim [data-animate-children] > *.is-visible { animation: none; }
}

@media print {
	[data-animate]:not(.is-visible),
	[data-animate-children] > *:not(.is-visible) { opacity: 1 !important; }
}

/* == 17 工具類與無障礙 ==================================================== */
.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;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

@media print {
	.topbar, .site-header, .site-footer, .breadcrumbs, .product-filters, .cta-band { display: none !important; }
	body { background: #fff; }
	.product-card { break-inside: avoid; box-shadow: none; }
}