/* ============================================================
 * Service Conversion Block — Frontend Styles (Rebuild v4)
 *
 * 設計原則
 *   1. Single Responsibility Containers
 *      每個容器只負責一件事；外距由 gap 或 margin 二擇一，內距用 padding。
 *      子元素不再加同方向 margin，避免「外層 padding + 內層 padding」累積誤差。
 *
 *   2. Design Tokens
 *      所有設計數值集中在 :root scope；除 token 宣告處，本檔禁止裸寫 px 數字
 *      （1px 邊框、特定布局比例外）。
 *
 *   3. Mobile First → Desktop Override
 *      預設 = 堆疊版型；@media (min-width: 1280px) 才啟用 1140×600 卡片版型。
 *      使用者選擇：1280 以下一律 Mobile。
 *
 *   4. 高度繼承鏈僅兩處硬鎖
 *      .scb-path-entry-screen / .scb-path-panels（desktop）= 600px
 *      其餘全部 height: 100% 沿繼承鏈傳遞。
 *
 *   5. 0 個 !important
 *      避免靠權重戰勝；遇衝突一律回頭修結構。
 *
 * 尺寸對齊（desktop）
 *   卡片：1140 × 600
 *   Path A：374 (left) + 766 (right) = 1140
 *   Path B/C 說明頁：295 (left) + 845 (right) = 1140
 *   Item button：280 = 374 − 47×2
 *
 * JS hook 保留清單（class 必須維持，frontend.js 依賴）
 *   data-scb-state, data-scb-active-path, data-scb-path, data-scb-context
 *   .scb-a-item-btn--active, .scb-a-scroll-hint--show, .scb-b-pill--active
 *   .scb-entering, .scb-exiting, .scb-a-fading, .scb-form-no-custom
 * ============================================================ */


/* ────────────────────────────────────────────────────────────
 * 0. Box sizing reset
 * ──────────────────────────────────────────────────────────── */

.scb-block,
.scb-block *,
.scb-editor-preview,
.scb-editor-preview * {
	box-sizing: border-box;
}


/* ────────────────────────────────────────────────────────────
 * 1. Design Tokens
 * ──────────────────────────────────────────────────────────── */

.scb-block,
.scb-editor-preview-inner {
	/* ── Card frame ── */
	--scb-card-w: 1140px;
	--scb-card-h: 600px;
	--scb-card-radius: 10px;

	/* ── Path A 左欄（374 = 47 + 280 + 47） ── */
	--scb-a-left-w: 374px;
	--scb-a-left-pad-x: 47px;
	--scb-a-left-pad-top: 43px;
	--scb-a-list-title-h: 28px;
	--scb-a-list-title-gap: 10px;
	--scb-a-list-bottom-safe: 80px;   /* 列表底部預留：避開絕對定位的返回按鈕 */
	--scb-a-item-w: 280px;
	--scb-a-item-h: 50px;
	--scb-a-item-radius: 10px;
	--scb-a-item-gap: 10px;

	/* ── Path A 右欄（766） ── */
	--scb-a-right-pad-top: 35px;
	--scb-a-right-pad-x: 50px;
	--scb-a-right-pad-bottom: 30px;   /* 30px：使用者確認的「按鈕底到卡片底」距離 */

	/* ── Path B / C 左欄（295） ── */
	--scb-bc-left-w: 295px;
	--scb-bc-card-w: 243px;
	--scb-bc-card-h: 486px;
	--scb-bc-card-top: 35px;
	--scb-bc-label-gap: 12px;

	/* ── Path B 右欄 ── */
	--scb-b-right-pad-top: 35px;
	--scb-b-right-pad-x: 50px;
	--scb-b-right-pad-bottom: 30px;   /* 與 Path A、Path C 統一，讓所有底部按鈕同高 */
	--scb-b-arrow-size: 28px;
	--scb-b-arrow-gap: 12px;          /* 箭頭與 pills 視覺間距 */
	--scb-b-pill-w: 234px;
	--scb-b-pill-h: 50px;
	--scb-b-pill-gap: 22px;
	--scb-b-divider-margin: 12px;
	--scb-b-content-bottom: 16px;     /* buy 按鈕上方留白 */

	/* ── Path C 右欄（靜態頁，使用者指定精確間距） ── */
	--scb-c-right-pad-top: 80px;       /* 標題距卡片頂端 80px */
	--scb-c-right-pad-x: 0;            /* 兩欄各自有 padding，外層不再加 */
	--scb-c-right-pad-bottom: 30px;
	--scb-c-title-to-hours: 15px;      /* 標題到說明文字 */
	--scb-c-hours-to-channels: 50px;   /* 說明文字到 LINE / Messenger 區塊 */
	--scb-c-hours-pad-x: 50px;         /* 說明文字距白色區塊左右邊緣 50px（讓長句自然 wrap 兩行，無需硬 br） */
	--scb-c-name-to-qr: 30px;          /* 「Line官方帳號」/「Messenger」到 QR */
	--scb-c-qr-to-id: 30px;            /* QR 到 ID 文字 */

	/* LINE 欄：QR 150×150，左側 173 右側 100（從灰白交界 → QR → 分隔線） */
	--scb-c-line-qr: 150px;
	--scb-c-line-pad-l: 173px;
	--scb-c-line-pad-r: 100px;

	/* Messenger 欄：QR 170×170，左側 95 右側 157（從分隔線 → QR → 卡片右邊） */
	--scb-c-msg-qr: 170px;
	--scb-c-msg-pad-l: 95px;
	--scb-c-msg-pad-r: 157px;

	/* ── 入口頁 / Path B 分類頁（兩者共用） ── */
	--scb-entry-img-size: 323px;
	--scb-entry-img-top: 114px;
	--scb-entry-label-gap: 11px;
	--scb-entry-foot-bottom: 124px;

	/* ── 返回按鈕（所有頁面同位置，與右側 CTA 按鈕底部對齊） ── */
	--scb-back-bottom: 30px;
	--scb-back-left: 40px;

	/* ── Path A 列表底部漸層遮罩 / scroll hint 定位 ── */
	--scb-a-fade-h: 96px;             /* 漸層高度 */
	--scb-a-hint-bottom: 64px;        /* scroll hint 圖示距 .scb-a-left 底部（在安全區內、不與返回按鈕重疊） */

	/* ── 行動裝置卡片高度 ──
	 * 100dvh 扣除網站 header 大致高度。若你的網站 header 較高（含公告 bar、
	 * sticky nav 等），在主題或 customizer 內覆寫 :root 的 --scb-mobile-page-offset
	 * 即可，本檔案不需動。
	 */
	--scb-mobile-page-offset: 80px;
	--scb-mobile-card-max: 720px;
	--scb-mobile-card-min: 480px;

	/* ── CTA 按鈕 ── */
	--scb-cta-h: 50px;
	--scb-cta-radius: 10px;

	/* ── 間距系統 ── */
	--scb-gap-xs: 4px;
	--scb-gap-sm: 8px;
	--scb-gap-md: 12px;
	--scb-gap-lg: 16px;
	--scb-gap-xl: 24px;
	--scb-gap-2xl: 32px;

	/* ── 字級系統 ── */
	--scb-fs-xs: 12px;
	--scb-fs-sm: 14px;
	--scb-fs-base: 16px;
	--scb-fs-md: 18px;
	--scb-fs-lg: 22px;
	--scb-fs-xl: 28px;
	--scb-fs-detail-title: 30px;       /* 商品標題（Path A 右側）：明確獨立 token，避免被 WP 主題 h3 規則蓋掉 */
	--scb-fs-card-title: 30px;         /* Path B 說明卡標題 */

	/* ── Path A 標題到價格、價格到描述的間距 ── */
	--scb-a-price-to-desc: 20px;       /* 使用者指定：價格到描述 20px */

	/* ── 顏色 ── */
	--scb-bg: #ffffff;
	--scb-text: #2c2922;
	--scb-text-muted: rgba(44, 41, 34, 0.62);
	--scb-text-soft: rgba(44, 41, 34, 0.45);
	--scb-border: rgba(0, 0, 0, 0.1);
	--scb-divider: rgba(0, 0, 0, 0.12);
	--scb-left-bg: rgba(0, 0, 0, 0.04);
	/* 左欄 rgba(0,0,0,0.04) 疊在白色上的「實際渲染色」為 rgb(245,245,245) ＝ #f5f5f5。
	   漸層遮罩必須用這個確切值，否則 gap 處會出現可見的色差條。 */
	--scb-left-bg-solid: #f5f5f5;

	/* Theme accent — 由 .scb-theme-* 覆寫 */
	--scb-primary: #365BB1;
	--scb-primary-strong: #2a4690;
	--scb-primary-soft: rgba(54, 91, 177, 0.10);
	--scb-cta-bg: var(--scb-primary);
	--scb-cta-text: #ffffff;

	/* ── 輸入框 ── */
	--scb-input-h: 40px;
	--scb-input-radius: 8px;
	--scb-input-pad-x: 12px;
	--scb-input-bg: #ffffff;
}

/* Theme variants（顏色覆寫） */
.scb-theme-zhenchen {
	--scb-primary: #365BB1;
	--scb-primary-strong: #2a4690;
	--scb-primary-soft: rgba(54, 91, 177, 0.10);
	--scb-cta-bg: #365BB1;
	--scb-cta-text: #ffffff;
}

.scb-theme-zhenru {
	--scb-primary: #5ab5b8;
	--scb-primary-strong: #468f92;
	--scb-primary-soft: rgba(125, 206, 208, 0.14);
	--scb-cta-bg: #7DCED0;
	--scb-cta-text: #1a3a3c;
}

.scb-theme-xunzi {
	--scb-primary: #F06D16;
	--scb-primary-strong: #cc5a0e;
	--scb-primary-soft: rgba(240, 109, 22, 0.10);
	--scb-cta-bg: #F06D16;
	--scb-cta-text: #ffffff;
}


/* ────────────────────────────────────────────────────────────
 * 2. Block container & list reset（取代既有的 !important 大隊）
 * ──────────────────────────────────────────────────────────── */

.scb-block {
	position: relative;
	isolation: isolate;
	font-size: var(--scb-fs-base);
	line-height: 1.5;
	color: var(--scb-text);
	background: transparent;
}

.scb-block ul,
.scb-block ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.scb-block ul > li,
.scb-block ol > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.scb-block h1,
.scb-block h2,
.scb-block h3,
.scb-block h4,
.scb-block h5 {
	margin: 0;
	font: inherit;
	color: inherit;
}

.scb-block p {
	margin: 0;
}

.scb-block button {
	font: inherit;
	color: inherit;
}

.scb-block [hidden] {
	display: none;
}


/* ────────────────────────────────────────────────────────────
 * 3. Shells & state transitions
 * ──────────────────────────────────────────────────────────── */

.scb-hall-shell,
.scb-article-shell {
	position: relative;
	width: 100%;
}

.scb-hall-inner,
.scb-article-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.scb-hall-inner[data-scb-state="entry"] .scb-path-panels {
	display: none;
}

.scb-hall-inner[data-scb-state="panel"] .scb-path-entry-screen {
	display: none;
}

.scb-path-panels,
.scb-path-panel {
	width: 100%;
}


/* ────────────────────────────────────────────────────────────
 * 4. 入口頁 / Path B 分類頁（共用結構，mobile default）
 * ──────────────────────────────────────────────────────────── */

.scb-path-entry-screen {
	width: 100%;
	background: var(--scb-bg);
}

.scb-path-entry,
.scb-b-path-entry {
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
	height: 100%;
}

.scb-path-entry-item {
	display: flex;
	height: 100%;
}

.scb-path-entry-btn,
.scb-b-cat-btn {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: opacity 0.22s ease;
}

.scb-path-entry-btn:hover,
.scb-b-cat-btn:hover {
	opacity: 0.82;
}

.scb-path-entry-img {
	display: block;
	width: var(--scb-entry-img-size);
	height: var(--scb-entry-img-size);
	max-width: 80%;
	margin: var(--scb-entry-img-top) auto 0;
	flex-shrink: 0;
	overflow: hidden;
}

.scb-path-entry-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.scb-path-entry-img-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.03);
	border-radius: var(--scb-card-radius);
}

.scb-path-entry-foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--scb-gap-sm);
	margin-top: var(--scb-entry-label-gap);
	padding-bottom: var(--scb-entry-foot-bottom);
}

.scb-path-entry-label {
	font-size: var(--scb-fs-base);
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--scb-text);
}

.scb-path-entry-arrow {
	font-size: var(--scb-fs-base);
	color: var(--scb-text);
	transition: transform 0.2s ease;
}

.scb-path-entry-btn:hover .scb-path-entry-arrow,
.scb-b-cat-btn:hover .scb-path-entry-arrow {
	transform: translateX(4px);
}


/* ────────────────────────────────────────────────────────────
 * 5. 共用：左欄灰底容器 / 白色提示卡 / 返回按鈕
 * ──────────────────────────────────────────────────────────── */

.scb-panel-left {
	position: relative;
	background: var(--scb-left-bg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.scb-panel-left-card {
	flex-shrink: 0;
	width: var(--scb-bc-card-w);
	height: var(--scb-bc-card-h);
	margin: var(--scb-bc-card-top) auto 0;
	background: var(--scb-bg);
	border-radius: var(--scb-card-radius);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.scb-panel-left-card > span,
.scb-panel-left-card .scb-b-detail-img {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}

.scb-panel-left-card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 路徑 C 沒有上傳圖片時的 placeholder（取代原本只有 20px 圓點的編輯器樣式） */
.scb-panel-left-card .scb-path-chip__icon-placeholder {
	display: block;
	width: 60%;
	height: 60%;
	margin: auto;
	border-radius: 50%;
	background: var(--scb-primary-soft);
}

.scb-panel-left-label {
	margin: var(--scb-bc-label-gap) 0 0;
	padding: 0 var(--scb-gap-lg);
	text-align: center;
	font-size: var(--scb-fs-base);
	font-weight: 500;
	color: var(--scb-text);
}

/* 返回按鈕：mobile 預設為 flow，desktop @media 改絕對定位 */
.scb-back,
.scb-panel-left-back {
	width: fit-content;
	margin: var(--scb-gap-md) 0 var(--scb-gap-md) var(--scb-gap-lg);
}


/* ────────────────────────────────────────────────────────────
 * 6. Path A
 * ──────────────────────────────────────────────────────────── */

.scb-a {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* ── 左欄 ── */
.scb-a-left {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--scb-left-bg);
	overflow: hidden;
	padding: var(--scb-gap-lg);
}

/* 用 .scb-block 提高權重，避開 WP 主題 p 的預設 margin */
.scb-block .scb-a-list-header,
.scb-block p.scb-a-list-header {
	flex-shrink: 0;
	margin: 0 0 var(--scb-a-list-title-gap);
	padding: 0;
	font-size: var(--scb-fs-base);
	font-weight: 600;
	text-align: center;
	color: var(--scb-text);
	line-height: var(--scb-a-list-title-h);
}

.scb-a-list-wrap {
	position: relative;
	width: 100%;
}

.scb-a-list {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--scb-a-item-gap);
	max-height: 22rem;             /* mobile：限制最大高度 */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.scb-a-list-item {
	flex-shrink: 0;
	width: 100%;
}

/* 用 .scb-block 提高權重：圓角、白底、文字色不被 WP 主題的 button 規則蓋掉 */
.scb-block .scb-a-item-btn,
.scb-block button.scb-a-item-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--scb-a-item-h);
	padding: 0 var(--scb-gap-md);
	border: 0;
	border-radius: var(--scb-a-item-radius);
	background: var(--scb-bg);
	color: var(--scb-text);
	font-size: var(--scb-fs-base);
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	box-shadow: none;
	transition: background 0.18s ease, color 0.18s ease;
}

.scb-block .scb-a-item-btn:hover {
	background: rgba(255, 255, 255, 0.7);
	color: var(--scb-text);
}

.scb-block .scb-a-item-btn--active,
.scb-block button.scb-a-item-btn.scb-a-item-btn--active {
	background: var(--scb-primary);
	color: #ffffff;
}

.scb-block .scb-a-item-btn--active:hover {
	background: var(--scb-primary-strong);
	color: #ffffff;
}

/* 3-stop 漸層遮罩
 * 重要：bottom 設為 var(--scb-a-list-bottom-safe) 而非 0
 * 原因：列表內側用 padding-bottom: 80px 預留安全區避開返回按鈕；如果漸層放
 * 在 list-wrap 的最底（bottom: 0），它會落在那段沒有列表內容的 padding 區
 * （只有純色灰底），視覺上完全看不到 fade。改成距底 80px 後，漸層精準覆蓋
 * 在可視列表的最後一段內容，才會看到「最後幾個項目逐漸淡出」。
 */
.scb-a-list-wrap::after {
	content: '';
	position: absolute;
	bottom: var(--scb-a-list-bottom-safe);
	left: 0;
	right: 0;
	height: var(--scb-a-fade-h);
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	background: linear-gradient(
		to bottom,
		rgba(245, 245, 245, 0) 0%,
		rgba(245, 245, 245, 0.4) 40%,
		rgba(245, 245, 245, 1) 100%
	);
	transition: opacity 0.25s ease;
	display: none;
}

/* scroll hint 圖示：放在 .scb-a-left 的下方安全區（介於可視列表底與返回按鈕之間） */
.scb-a-scroll-hint {
	position: absolute;
	bottom: var(--scb-a-hint-bottom);
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.scb-a-scroll-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--scb-border);
	border-radius: 50%;
	background: var(--scb-bg);
	color: var(--scb-text-muted);
	font-size: var(--scb-fs-sm);
}

/* ── 右欄 ── */
.scb-a-right {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
	min-height: 0;
	padding: var(--scb-gap-lg);
	overflow: hidden;
}

.scb-a-detail {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
}

.scb-a-detail-head {
	flex-shrink: 0;
}

/* 商品標題：用 .scb-block + 元素類型(h3) 雙重提升權重，避免 WP 主題的 h3 規則
   把字級壓回 body 大小。實測：.entry-content h3 = (0,1,1)；本選擇器 = (0,2,1)，必勝。 */
.scb-block h3.scb-a-detail-title,
.scb-block .scb-a-detail-title {
	margin: 0 0 6px;
	padding: 0;
	font-size: var(--scb-fs-detail-title);
	font-weight: 600;
	line-height: 1.3;
	color: var(--scb-text);
}

/* 價格：WooCommerce 主題對 .price / .amount 有自己的顏色（常見是綠色），
   必須把所有可能的子層都用品牌色覆蓋。 */
.scb-block .scb-a-detail-price,
.scb-block .scb-a-detail-price * {
	color: var(--scb-primary);
}

.scb-block .scb-a-detail-price {
	margin: 0 0 var(--scb-a-price-to-desc);
	font-size: var(--scb-fs-lg);
	font-weight: 600;
	line-height: 1.35;
}

.scb-block .scb-a-detail-price *,
.scb-block .scb-a-detail-price .price,
.scb-block .scb-a-detail-price .woocommerce-Price-amount,
.scb-block .scb-a-detail-price .amount {
	display: inline;
	margin: 0;
	padding: 0;
	font: inherit;
}

.scb-block .scb-a-detail-price del {
	margin-right: 6px;
	color: var(--scb-text-muted);
	text-decoration: line-through;
}

/* form 撐滿剩餘高度，內部再分 scroll body + 固定 submit */
.scb-checkout-form[data-scb-context="a"] {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
	gap: 0;
}

.scb-a-detail-body {
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding-right: var(--scb-gap-sm);
}

.scb-a-detail-desc-scroll {
	margin: 0 0 var(--scb-gap-md);
}

.scb-a-detail.scb-a-detail--no-desc .scb-a-detail-desc-scroll {
	display: none;
}

.scb-a-detail-desc {
	color: var(--scb-text-muted);
	font-size: var(--scb-fs-base);
	line-height: 1.85;
}

.scb-a-detail-desc p {
	margin: 0 0 var(--scb-gap-md);
}

.scb-a-detail-desc p:last-child {
	margin-bottom: 0;
}

.scb-a-detail-desc strong,
.scb-a-detail-desc b {
	color: var(--scb-text);
	font-weight: 600;
}

.scb-a-detail-footer {
	display: block;
}

.scb-a-form-divider {
	display: block;
	width: 100%;
	height: 1px;
	margin: var(--scb-gap-lg) 0;
	border: 0;
	background: var(--scb-divider);
}

.scb-a-form-label {
	margin: 0 0 var(--scb-gap-md);
	font-size: var(--scb-fs-base);
	font-weight: 600;
	color: var(--scb-text);
}

.scb-a-form-fields {
	display: flex;
	flex-direction: column;
	gap: var(--scb-gap-md);
}

.scb-dynamic-fields {
	display: flex;
	flex-direction: column;
	gap: var(--scb-gap-md);
}

.scb-checkout-form[data-scb-context="a"].scb-form-no-custom .scb-dynamic-fields {
	display: none;
}

.scb-a-submit {
	flex-shrink: 0;
	width: 100%;
	height: var(--scb-cta-h);
	margin: var(--scb-gap-lg) 0 0;
	border-radius: var(--scb-cta-radius);
}


/* ────────────────────────────────────────────────────────────
 * 7. Path B — 分類頁（layer 2） + 說明頁（layer 3）
 * ──────────────────────────────────────────────────────────── */

.scb-b {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* ── 分類頁 ── */
.scb-b-cats {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* ── 說明頁 ── */
.scb-b-detail {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}

.scb-b-detail-left {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--scb-left-bg);
	overflow: hidden;
}

.scb-b-detail-img-card {
	flex-shrink: 0;
	width: var(--scb-bc-card-w);
	height: var(--scb-bc-card-h);
	margin: var(--scb-bc-card-top) auto 0;
	background: var(--scb-bg);
	border-radius: var(--scb-card-radius);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.scb-b-detail-img {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}

.scb-b-detail-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.scb-b-detail-cat-name {
	margin: var(--scb-bc-label-gap) 0 0;
	padding: 0 var(--scb-gap-lg);
	text-align: center;
	font-size: var(--scb-fs-base);
	font-weight: 500;
	color: var(--scb-text);
}

.scb-b-detail-right {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
	min-height: 0;
	padding: var(--scb-gap-lg);
	overflow: hidden;
}

/* ── 輪播 nav row（mobile 預設）── */
.scb-b-nav-row {
	position: relative;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--scb-gap-sm);
}

.scb-b-nav-arrow {
	flex: 0 0 auto;
	width: var(--scb-b-arrow-size);
	height: var(--scb-b-arrow-size);
	padding: 0;
	border: 1px solid var(--scb-border);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: var(--scb-primary);
	font-size: var(--scb-fs-sm);
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.scb-b-nav-arrow:hover {
	background: var(--scb-bg);
	border-color: var(--scb-text-soft);
}

.scb-b-pills-wrap {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: var(--scb-b-pill-h);
	overflow: hidden;
}

.scb-b-pills-wrap::before,
.scb-b-pills-wrap::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 56px;
	pointer-events: none;
	z-index: 2;
}

.scb-b-pills-wrap::before {
	left: 0;
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 1) 0%,
		rgba(255, 255, 255, 0.6) 40%,
		rgba(255, 255, 255, 0) 100%
	);
}

.scb-b-pills-wrap::after {
	right: 0;
	background: linear-gradient(
		to left,
		rgba(255, 255, 255, 1) 0%,
		rgba(255, 255, 255, 0.6) 40%,
		rgba(255, 255, 255, 0) 100%
	);
}

.scb-b-pills {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--scb-b-pill-gap);
	height: 100%;
	will-change: transform;
}

.scb-b-pill {
	flex: 0 0 var(--scb-b-pill-w);
	width: var(--scb-b-pill-w);
	height: var(--scb-b-pill-h);
	padding: 0 var(--scb-gap-lg);
	border: 1px solid var(--scb-border);
	border-radius: 999px;
	background: var(--scb-bg);
	color: var(--scb-text);
	font-size: var(--scb-fs-base);
	font-weight: 500;
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.scb-b-pill:not(.scb-b-pill--active):hover {
	border-color: var(--scb-text-soft);
}

/* Active pill 用 .scb-block + button 雙層提權重，避免 WP 主題的 button 規則把文字
   壓回深色。同時鎖死背景、邊框、文字色三件套。影響桌機與手機。 */
.scb-block .scb-b-pill--active,
.scb-block button.scb-b-pill.scb-b-pill--active {
	background: var(--scb-primary);
	color: #ffffff;
	border-color: var(--scb-primary);
}

.scb-block .scb-b-pill--active * {
	color: inherit;
}

.scb-b-nav-divider {
	display: block;
	flex-shrink: 0;
	width: 100%;
	height: 1px;
	margin: var(--scb-b-divider-margin) 0;
	border: 0;
	background: var(--scb-divider);
}

.scb-b-card-content {
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	display: flex;
	flex-direction: column;
}

/* Path B 說明卡標題：同 Path A 標題，用 .scb-block + h3 雙提權重 */
.scb-block h3.scb-b-card-title,
.scb-block .scb-b-card-title {
	margin: 0 0 var(--scb-gap-sm);
	padding: 0;
	font-size: var(--scb-fs-card-title);
	font-weight: 600;
	line-height: 1.35;
	color: var(--scb-text);
}

.scb-b-card-subtitle {
	margin: 0 0 var(--scb-gap-md);
	font-size: var(--scb-fs-base);
	font-weight: 500;
	line-height: 1.7;
	color: var(--scb-primary);
}

.scb-b-card-body,
.scb-b-card-summary,
.scb-b-card-detail {
	margin: 0;
	color: var(--scb-text-muted);
	font-size: var(--scb-fs-base);
	line-height: 1.85;
	white-space: pre-wrap;
}

.scb-b-card-body {
	margin-bottom: var(--scb-gap-lg);
}

.scb-b-card-article-wrap {
	margin-top: var(--scb-gap-md);
}

.scb-b-article-divider {
	display: block;
	width: 100%;
	height: 1px;
	margin: 0 0 var(--scb-gap-md);
	border: 0;
	background: var(--scb-divider);
}

.scb-b-article-label {
	margin: 0 0 var(--scb-gap-sm);
	font-size: var(--scb-fs-sm);
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--scb-primary);
}

.scb-b-card-article {
	margin: 0;
	color: var(--scb-text-muted);
	font-size: var(--scb-fs-base);
	line-height: 1.85;
}

.scb-b-card-article a {
	color: var(--scb-primary-strong);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

.scb-b-buy {
	flex-shrink: 0;
	width: 100%;
	height: var(--scb-cta-h);
	margin: var(--scb-b-content-bottom) 0 0;
	border-radius: var(--scb-cta-radius);
}

/* Path B layer 4（legacy form step，目前 buy 直接跳 Path A，此 step 多半用不到） */
.scb-b-form {
	margin-top: var(--scb-gap-lg);
}


/* ────────────────────────────────────────────────────────────
 * 8. Path C
 * ──────────────────────────────────────────────────────────── */

.scb-c {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.scb-c-left {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--scb-left-bg);
	overflow: hidden;
}

/* Path C 不顯示左欄的路徑標籤（使用者要求移除「我需要有人引導」文字）
   Path B 詳細頁仍然顯示分類名稱，因此用 .scb-c-left scope 限定。 */
.scb-c-left .scb-panel-left-label {
	display: none;
}

.scb-c-right {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
	min-height: 0;
	padding: var(--scb-gap-lg);
	overflow: hidden;
}

/* ── Path C 右側區塊（靜態頁，依使用者精確間距） ───────────────── */

.scb-c-heading-wrap {
	flex-shrink: 0;
	text-align: center;
}

.scb-block h4.scb-c-headline,
.scb-block .scb-c-headline {
	margin: 0;
	padding: 0;
	font-size: var(--scb-fs-lg);
	font-weight: 600;
	line-height: 1.5;
	color: var(--scb-text);
}

.scb-block p.scb-c-hours,
.scb-block .scb-c-hours {
	margin: var(--scb-c-title-to-hours) 0 0;
	padding: 0 var(--scb-c-hours-pad-x);
	font-size: var(--scb-fs-sm);
	line-height: 1.8;
	color: var(--scb-text-muted);
}

.scb-c-channels {
	flex-shrink: 0;
	display: flex;
	align-items: stretch;
	margin-top: var(--scb-c-hours-to-channels);
}

/* 通用欄位（mobile 預設）：簡單置中排列 */
.scb-c-channel-col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--scb-c-name-to-qr);
	padding: 0 var(--scb-gap-lg);
	text-align: center;
}

.scb-block p.scb-c-channel-name,
.scb-block .scb-c-channel-name {
	margin: 0;
	padding: 0;
	font-size: var(--scb-fs-base);
	font-weight: 600;
	color: var(--scb-text);
}

.scb-c-qr {
	width: 140px;                /* mobile 預設尺寸；desktop @media 依欄位覆寫 */
	height: 140px;
	margin: 0;
	line-height: 0;              /* 消除 inline 圖片下方殘留 baseline 間隙 */
}

.scb-c-qr img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.scb-block p.scb-c-id,
.scb-block .scb-c-id {
	margin: 0;
	padding: 0;
	color: var(--scb-text-muted);
	font-size: var(--scb-fs-sm);
}

.scb-c-divider {
	flex: 0 0 1px;
	align-self: stretch;
	min-height: 120px;
	background: var(--scb-border);
}


/* ────────────────────────────────────────────────────────────
 * 9. 共用按鈕、表單、Focus
 * ──────────────────────────────────────────────────────────── */

.scb-btn,
.scb-line-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--scb-gap-lg);
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: var(--scb-fs-base);
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* 主要 CTA：用 .scb-block 與多選擇器把背景、文字色、邊框色全部鎖死，
   防止 WP 主題或 WooCommerce 的 .button / .btn-primary 規則把文字變回深色。 */
.scb-block .scb-btn--primary,
.scb-block .scb-line-btn,
.scb-block button.scb-a-submit,
.scb-block button.scb-b-buy,
.scb-block a.scb-c-channel-btn {
	background: var(--scb-cta-bg);
	border-color: var(--scb-cta-bg);
	color: var(--scb-cta-text);
	font-weight: 600;
}

.scb-block .scb-btn--primary *,
.scb-block button.scb-a-submit *,
.scb-block button.scb-b-buy *,
.scb-block a.scb-c-channel-btn * {
	color: inherit;       /* 確保按鈕內的箭頭、icon 跟著繼承白色 */
}

.scb-block .scb-btn--primary:hover,
.scb-block .scb-line-btn:hover,
.scb-block button.scb-a-submit:hover,
.scb-block button.scb-b-buy:hover,
.scb-block a.scb-c-channel-btn:hover {
	background: var(--scb-primary-strong);
	border-color: var(--scb-primary-strong);
	color: var(--scb-cta-text);
}

.scb-btn--ghost {
	min-height: 0;
	padding: var(--scb-gap-xs) 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--scb-text-muted);
	font-size: var(--scb-fs-sm);
}

.scb-btn--ghost:hover {
	color: var(--scb-text);
}

/* 主要 CTA：明確覆寫 .scb-btn 的 border-radius 與 height */
.scb-a-submit,
.scb-b-buy {
	min-height: 0;
	border-radius: var(--scb-cta-radius);
}

.scb-icon-btn {
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--scb-border);
	border-radius: 50%;
	background: var(--scb-bg);
	color: var(--scb-text);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.scb-icon-btn:hover {
	background: rgba(0, 0, 0, 0.04);
}

/* Forms */
.scb-field {
	margin: 0;
}

.scb-label {
	display: flex;
	flex-direction: column;
	gap: var(--scb-gap-xs);
	color: var(--scb-text);
}

.scb-label-text {
	font-size: var(--scb-fs-sm);
	font-weight: 500;
	color: var(--scb-text);
}

.scb-input {
	width: 100%;
	height: var(--scb-input-h);
	padding: 0 var(--scb-input-pad-x);
	border: 1px solid var(--scb-border);
	border-radius: var(--scb-input-radius);
	background: var(--scb-input-bg);
	color: var(--scb-text);
	font: inherit;
	line-height: 1.5;
	transition: border-color 0.2s ease;
}

.scb-input:focus {
	outline: 0;
	border-color: var(--scb-primary);
}

.scb-textarea {
	height: auto;
	min-height: 80px;
	max-height: 160px;
	padding: var(--scb-gap-sm) var(--scb-input-pad-x);
	resize: vertical;
}

.scb-remark-wrap {
	display: flex;
	flex-direction: column;
}

.scb-remark-hint {
	margin: var(--scb-gap-xs) 0 0;
	color: var(--scb-text-muted);
	font-size: var(--scb-fs-sm);
	line-height: 1.6;
}

.scb-form-error {
	margin: var(--scb-gap-xs) 0 0;
	color: #b53c3c;
	font-size: var(--scb-fs-sm);
}

/* Path B legacy form step (layer 4) */
.scb-form-step {
	padding: var(--scb-gap-lg);
	border: 1px solid var(--scb-border);
	border-radius: var(--scb-card-radius);
	background: rgba(255, 255, 255, 0.62);
}

.scb-form-heading {
	margin: 0 0 var(--scb-gap-md);
}

.scb-form-product-title {
	margin: 0;
	font-size: var(--scb-fs-md);
	font-weight: 500;
}

.scb-kicker {
	margin: 0 0 var(--scb-gap-xs);
	font-size: var(--scb-fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--scb-primary);
}

.scb-checkout-form {
	display: grid;
	gap: var(--scb-gap-md);
}

.scb-panel-placeholder {
	margin: 0;
	padding: var(--scb-gap-lg);
	text-align: center;
	color: var(--scb-text-muted);
	font-size: var(--scb-fs-sm);
}

/* Focus ring（統一） */
.scb-btn:focus-visible,
.scb-line-btn:focus-visible,
.scb-icon-btn:focus-visible,
.scb-path-entry-btn:focus-visible,
.scb-b-cat-btn:focus-visible,
.scb-a-item-btn:focus-visible,
.scb-b-pill:focus-visible,
.scb-b-nav-arrow:focus-visible,
.scb-input:focus-visible {
	outline: 2px solid var(--scb-primary);
	outline-offset: 3px;
}


/* ────────────────────────────────────────────────────────────
 * 10. Animations（保留供 JS 觸發）
 * ──────────────────────────────────────────────────────────── */

@keyframes scbEnterFromBelow {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes scbExitToAbove {
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 0; transform: translateY(-12px); }
}

@keyframes scbEnterFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes scbFadeSlideUp {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes scbSlideInRight {
	from { opacity: 0; transform: translateX(16px); }
	to   { opacity: 1; transform: translateX(0); }
}

.scb-path-entry-screen.scb-exiting {
	animation: scbExitToAbove 220ms cubic-bezier(0.4, 0, 1, 1) both;
}

.scb-path-entry-screen.scb-entering {
	animation: scbEnterFade 280ms cubic-bezier(0, 0, 0.2, 1) both;
}

.scb-path-panels.scb-entering {
	animation: scbEnterFromBelow 320ms cubic-bezier(0, 0, 0.2, 1) 60ms both;
}

.scb-path-panels.scb-exiting {
	animation: scbExitToAbove 200ms cubic-bezier(0.4, 0, 1, 1) both;
}

.scb-b-detail.scb-entering {
	animation: scbFadeSlideUp 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.scb-b-detail.scb-entering .scb-b-detail-right {
	animation: scbSlideInRight 280ms cubic-bezier(0.4, 0, 0.2, 1) 100ms both;
}

.scb-b-cats.scb-entering {
	animation: scbFadeSlideUp 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.scb-a-detail-desc-scroll.scb-a-fading {
	animation: scbEnterFade 180ms ease both;
}


/* ════════════════════════════════════════════════════════════
 * 11. DESKTOP — @media (min-width: 1280px)
 *     使用者選擇 C：1280 以下一律 Mobile
 * ════════════════════════════════════════════════════════════ */

@media (min-width: 1280px) {

	/* ── 卡片框架：1140 × 600 ───────────────────────────── */

	.scb-hall-inner[data-scb-state="entry"] .scb-path-entry-screen,
	.scb-hall-inner[data-scb-state="panel"] .scb-path-panels {
		width: var(--scb-card-w);
		height: var(--scb-card-h);
		margin-inline: auto;
		overflow: hidden;
		background: var(--scb-bg);
		border-radius: var(--scb-card-radius);
	}

	.scb-article-inner > .scb-a,
	.scb-article-inner > .scb-b {
		width: var(--scb-card-w);
		height: var(--scb-card-h);
		margin-inline: auto;
		overflow: hidden;
		background: var(--scb-bg);
		border-radius: var(--scb-card-radius);
	}

	.scb-path-panel:not([hidden]) {
		height: 100%;
		overflow: hidden;
	}

	/* ── 入口頁 / Path B 分類頁（3 欄） ── */

	.scb-path-entry,
	.scb-b-path-entry {
		grid-template-columns: repeat(3, 1fr);
		height: 100%;
	}

	.scb-path-entry-item {
		height: 100%;
	}

	.scb-path-entry-item:not(:last-child) > .scb-path-entry-btn,
	.scb-path-entry-item:not(:last-child) > .scb-b-cat-btn {
		border-right: 1px solid var(--scb-border);
	}

	/* 返回按鈕：所有頁面共用絕對定位（x=40, y=560 from card） */
	.scb-a-left .scb-back,
	.scb-b-cats .scb-back,
	.scb-b-detail-left .scb-back,
	.scb-c-left .scb-back,
	.scb-panel-left-back {
		position: absolute;
		bottom: var(--scb-back-bottom);
		left: var(--scb-back-left);
		margin: 0;
		padding: var(--scb-gap-xs) 0;
	}

	/* ── Path A ─────────────────────────────────────────── */

	.scb-a {
		flex-direction: row;
		height: 100%;
		align-items: stretch;
	}

	.scb-a-left {
		flex: 0 0 var(--scb-a-left-w);
		width: var(--scb-a-left-w);
		height: 100%;
		padding: var(--scb-a-left-pad-top) var(--scb-a-left-pad-x) 0;
	}

	.scb-a-list-wrap {
		flex: 1 1 0;
		min-height: 0;
		overflow: hidden;
		padding-bottom: var(--scb-a-list-bottom-safe);
	}

	.scb-a-list {
		align-items: center;
		max-height: none;
		height: 100%;
	}

	.scb-a-list-item {
		width: var(--scb-a-item-w);
	}

	.scb-a-list-wrap::after {
		display: block;
	}

	.scb-a-scroll-hint {
		display: flex;
		justify-content: center;
	}

	.scb-a-left:has(.scb-a-scroll-hint--show) .scb-a-list-wrap::after,
	.scb-a-left:has(.scb-a-scroll-hint--show) .scb-a-scroll-hint {
		opacity: 1;
	}

	.scb-a-right {
		flex: 1 1 0;
		height: 100%;
		padding: var(--scb-a-right-pad-top) var(--scb-a-right-pad-x) var(--scb-a-right-pad-bottom);
	}

	/* ── Path B 分類頁 ──────────────────────────────────── */

	.scb-b,
	.scb-b-cats {
		height: 100%;
		overflow: hidden;
	}

	.scb-b-cats .scb-b-path-entry {
		flex: 1 1 0;
		min-height: 0;
		height: 100%;
		padding-bottom: var(--scb-a-list-bottom-safe);
		align-content: start;
	}

	/* ── Path B 說明頁 ──────────────────────────────────── */

	.scb-b-detail {
		flex-direction: row;
		align-items: stretch;
		height: 100%;
	}

	.scb-b-detail-left {
		flex: 0 0 var(--scb-bc-left-w);
		width: var(--scb-bc-left-w);
		height: 100%;
	}

	.scb-b-detail-right {
		padding: var(--scb-b-right-pad-top) var(--scb-b-right-pad-x) var(--scb-b-right-pad-bottom);
	}

	/* nav row：箭頭絕對定位疊在 pills 兩側，pills wrap 可使用完整內距寬度 */
	.scb-b-nav-row {
		height: var(--scb-b-pill-h);
		gap: 0;
	}

	.scb-b-nav-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 3;
	}

	.scb-b-tab-prev {
		left: 0;
	}

	.scb-b-tab-next {
		right: 0;
	}

	.scb-b-pills-wrap {
		flex: 1 1 100%;
		width: 100%;
		padding: 0 calc(var(--scb-b-arrow-size) + var(--scb-b-arrow-gap));
	}

	/* ── Path C ─────────────────────────────────────────── */

	.scb-c {
		flex-direction: row;
		align-items: stretch;
		height: 100%;
	}

	.scb-c-left {
		flex: 0 0 var(--scb-bc-left-w);
		width: var(--scb-bc-left-w);
		height: 100%;
	}

	.scb-c-right {
		flex: 1 1 0;
		height: 100%;
		padding: var(--scb-c-right-pad-top) var(--scb-c-right-pad-x) var(--scb-c-right-pad-bottom);
		justify-content: flex-start;   /* 靠上對齊（使用者選擇） */
	}

	/* Path C 兩欄不對稱 padding：精確還原設計稿 QR 位置 ─────────────
	   LINE     col 寬 = 173 + 150 + 100 = 423
	   Divider 寬 = 1
	   Msg      col 寬 = 95 + 170 + 157 = 422
	   合計 = 846 ≈ 845（右欄內距為 0 時的精準寬） */

	.scb-c-channel-col--line {
		flex: 0 0 auto;
		padding: 0 var(--scb-c-line-pad-r) 0 var(--scb-c-line-pad-l);
	}

	.scb-c-channel-col--line .scb-c-qr {
		width: var(--scb-c-line-qr);
		height: var(--scb-c-line-qr);
	}

	.scb-c-channel-col--msg {
		flex: 0 0 auto;
		padding: 0 var(--scb-c-msg-pad-r) 0 var(--scb-c-msg-pad-l);
	}

	.scb-c-channel-col--msg .scb-c-qr {
		width: var(--scb-c-msg-qr);
		height: var(--scb-c-msg-qr);
	}

	.scb-c-channel-col--line .scb-c-qr img,
	.scb-c-channel-col--msg .scb-c-qr img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* 整個 channels row 撐滿右欄，中間 divider 用 flex 推到正確位置 */
	.scb-c-channels {
		width: 100%;
		justify-content: flex-start;
	}
}


/* ════════════════════════════════════════════════════════════
 * 11.5. MOBILE — @media (max-width: 1279px)
 *       行動裝置版型：卡片填滿視窗、view stack 切換、
 *       入口頁 3 行圖左文字右、Path B/C 隱藏左灰欄、配合 swipe 手勢
 *
 *  Mobile-only 返回按鈕（.scb-back-mobile-only）預設 display: none，
 *  在本區塊內顯示為 inline-flex。
 * ════════════════════════════════════════════════════════════ */

.scb-back-mobile-only {
	display: none;
}

@media (max-width: 1279px) {

	/* ── 卡片整體：填滿可用視窗 ──────────────────────────── */

	.scb-hall-inner[data-scb-state="entry"] .scb-path-entry-screen,
	.scb-hall-inner[data-scb-state="panel"] .scb-path-panels,
	.scb-article-inner > .scb-a,
	.scb-article-inner > .scb-b {
		width: 100%;
		height: min(
			calc(100dvh - var(--scb-mobile-page-offset)),
			var(--scb-mobile-card-max)
		);
		min-height: var(--scb-mobile-card-min);
		margin: 0;
		overflow: hidden;
		background: var(--scb-bg);
		border-radius: 0;        /* 行動裝置 fullscreen：不需圓角 */
	}

	.scb-path-panel:not([hidden]) {
		height: 100%;
		overflow: hidden;
	}

	/* ── 入口頁 / Path B 分類頁：3 行圖左文字右 ────────────── */

	.scb-path-entry,
	.scb-b-path-entry {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(3, 1fr);
		height: 100%;
	}

	.scb-path-entry-item {
		height: 100%;
	}

	.scb-path-entry-item:not(:last-child) > .scb-path-entry-btn,
	.scb-path-entry-item:not(:last-child) > .scb-b-cat-btn {
		border-right: none;
		border-bottom: 1px solid var(--scb-border);
	}

	.scb-path-entry-btn,
	.scb-b-cat-btn {
		flex-direction: row;
		align-items: center;
		gap: 20px;
		/* 右側 padding 比左側多 4px：與白色詳情頁的 padding-right 4（scrollbar 預留）
		   產生的視覺偏移對齊，讓使用者眼中所有頁面的「左右平衡感」一致。 */
		padding: 12px 28px 12px 24px;
		height: 100%;
		text-align: left;
	}

	.scb-path-entry-img {
		flex: 0 0 110px;
		width: 110px;
		height: 110px;
		max-width: none;
		margin: 0;
	}

	.scb-path-entry-foot {
		flex: 1 1 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--scb-gap-sm);
		margin: 0;
		padding: 0;
		min-width: 0;
	}

	.scb-block .scb-path-entry-label {
		font-size: var(--scb-fs-md);
		font-weight: 500;
		line-height: 1.4;
	}

	.scb-path-entry-arrow {
		flex-shrink: 0;
		font-size: var(--scb-fs-md);
		color: var(--scb-text-muted);
	}

	/* 返回按鈕統一移到 panel 頂端
	 * 原因：左下角會被網站浮動 chat 按鈕遮擋。改用 flex order: -1 把按鈕推到 flex
	 *      column 第一位，不需動 HTML 也不需動桌機行為。
	 * 對象：Path A 列表頁的 .scb-a-back-entry、Path B 分類頁的 .scb-b-back-entry
	 *      （這兩處在 HTML 是 panel 內最後一個子元素，因此預設掉到底部）
	 */
	.scb-a-left .scb-a-back-entry,
	.scb-b-cats .scb-b-back-entry {
		order: -1;
		position: static;
		bottom: auto;
		left: auto;
		align-self: flex-start;
		margin: 0 0 var(--scb-gap-sm);
		padding: var(--scb-gap-xs) 0;
		z-index: auto;
	}

	/* ── Mobile-only 返回按鈕（Path A 詳情、Path B 詳情、Path C） ─ */

	.scb-back-mobile-only {
		display: inline-flex;
		align-items: center;
		align-self: flex-start;
		flex-shrink: 0;
		height: 36px;
		margin: 0 0 12px;
		padding: var(--scb-gap-xs) 0;
		border: 0;
		background: transparent;
		color: var(--scb-text-muted);
		font: inherit;
		font-size: var(--scb-fs-sm);
		cursor: pointer;
	}

	.scb-back-mobile-only:hover {
		color: var(--scb-text);
	}

	.scb-back-mobile-only:focus-visible {
		outline: 2px solid var(--scb-primary);
		outline-offset: 2px;
		color: var(--scb-text);
	}

	/* ── Path A：view stack（list ↔ detail 用 transform 切換） ─── */

	.scb-a {
		position: relative;
		flex-direction: row;
		height: 100%;
		overflow: hidden;
	}

	.scb-a-left,
	.scb-a-right {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		flex: none;
		transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1),
		            opacity 320ms cubic-bezier(0.32, 0.72, 0, 1);
	}

	/* 預設狀態：list 顯示，detail 在右邊外
	 * padding 改成 16/24/16/20：
	 *   - 移除原本 padding-bottom: 80（返回按鈕已改到頂部，不需要底部安全區）
	 *   - 右側比左側多 4px，與白色詳情頁的視覺偏移對齊
	 */
	.scb-a-left {
		transform: translateX(0);
		opacity: 1;
		padding: 16px 24px 16px 20px;
	}

	.scb-a-right {
		transform: translateX(100%);
		background: var(--scb-bg);
		padding: 20px;
		display: flex;
		flex-direction: column;
	}

	/* 切到 detail：list 退到 -30% + 變淡（iOS 風格），detail 進場 */
	.scb-a[data-scb-mobile-view="detail"] .scb-a-left {
		transform: translateX(-30%);
		opacity: 0.4;
		pointer-events: none;
	}

	.scb-a[data-scb-mobile-view="detail"] .scb-a-right {
		transform: translateX(0);
		pointer-events: auto;
	}

	/* Path A list 內容（mobile） */
	.scb-a-list-wrap {
		flex: 1 1 0;
		min-height: 0;
		overflow: hidden;
		padding-bottom: 0;
	}

	.scb-a-list {
		max-height: none;
		height: 100%;
		align-items: stretch;
		/* 底部留白讓最後一項不會被 fade 遮罩完全蓋住，使用者能看到 fade 出現的最後一項 */
		padding-bottom: var(--scb-gap-lg);
	}

	.scb-a-list-item {
		width: 100%;
	}

	.scb-block .scb-a-item-btn {
		height: 56px;          /* mobile 加大方便手指 tap */
		font-size: var(--scb-fs-base);
	}

	/* mobile：fade 漸層與 scroll-hint 重新啟用
	 *   fade 從 list-wrap 底部往上覆蓋 80px，正好落在可見列表的最後一段
	 *   scroll-hint 圖示在 .scb-a-left 底部，提示「可繼續往下捲」
	 *   兩者由 JS 在 :has(.scb-a-scroll-hint--show) 條件下淡入（已有邏輯，不變）
	 */
	.scb-a-list-wrap::after {
		display: block;
		bottom: 0;
		height: 80px;
	}

	.scb-a-scroll-hint {
		display: flex;
		bottom: var(--scb-gap-md);
	}

	/* Path A detail：sticky 三明治結構 */
	.scb-a-detail {
		flex: 1 1 0;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	.scb-a-detail-head {
		flex-shrink: 0;
		padding-bottom: var(--scb-gap-md);
	}

	.scb-block h3.scb-a-detail-title,
	.scb-block .scb-a-detail-title {
		font-size: 24px;
	}

	.scb-checkout-form[data-scb-context="a"] {
		flex: 1 1 0;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	.scb-a-detail-body {
		flex: 1 1 0;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding-right: 4px;
		overscroll-behavior: contain;   /* 防止 pull-to-refresh */
	}

	.scb-block button.scb-a-submit {
		flex-shrink: 0;
		margin-top: var(--scb-gap-lg);
	}

	/* ── Path B（mobile） ────────────────────────────────── */

	.scb-b {
		height: 100%;
	}

	.scb-b-cats {
		height: 100%;
		overflow: hidden;
	}

	.scb-b-cats .scb-b-path-entry {
		flex: 1 1 0;
		min-height: 0;
		height: 100%;
		padding-bottom: 0;
	}

	.scb-b-detail {
		flex-direction: row;
		height: 100%;
		overflow: hidden;
	}

	.scb-b-detail-left {
		display: none;
	}

	.scb-b-detail-right {
		width: 100%;
		flex: 1 1 0;
		padding: 20px;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	/* Carousel：保留輪播但只顯示 active pill（手機寬度不夠 3 顆） */
	.scb-b-nav-row {
		position: relative;
		height: 44px;
		gap: 0;
		flex-shrink: 0;
	}

	.scb-b-nav-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 3;
	}

	.scb-b-tab-prev { left: 0; }
	.scb-b-tab-next { right: 0; }

	.scb-b-pills-wrap {
		flex: 1 1 auto;
		width: 100%;
		height: 100%;
		padding: 0 44px;
		overflow: hidden;
	}

	.scb-b-pills {
		justify-content: center;
		gap: 0;
	}

	.scb-b-pill {
		flex: 0 0 auto;
		width: auto;
		max-width: 100%;
		height: 40px;
		padding: 0 16px;
		font-size: var(--scb-fs-sm);
		border-radius: 999px;
	}

	.scb-b-pill:not(.scb-b-pill--active) {
		display: none;
	}

	.scb-b-nav-divider {
		margin: var(--scb-gap-md) 0;
		flex-shrink: 0;
	}

	.scb-b-card-content {
		flex: 1 1 0;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	.scb-block h3.scb-b-card-title,
	.scb-block .scb-b-card-title {
		font-size: 22px;
	}

	.scb-block button.scb-b-buy {
		flex-shrink: 0;
		margin-top: var(--scb-gap-lg);
	}

	/* ── Path C（mobile） ────────────────────────────────── */

	.scb-c {
		flex-direction: row;
		height: 100%;
		overflow: hidden;
	}

	.scb-c-left {
		display: none;
	}

	.scb-c-right {
		width: 100%;
		flex: 1 1 0;
		padding: 32px 20px 24px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		justify-content: flex-start;
	}

	.scb-block .scb-c-hours {
		padding: 0;
	}

	.scb-c-channels {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		margin-top: var(--scb-gap-xl);
	}

	.scb-c-channel-col {
		width: 100%;
		padding: 0;
		gap: var(--scb-gap-lg);
	}

	.scb-c-divider {
		flex: none;
		width: 100%;
		height: 1px;
		min-height: 0;
		align-self: stretch;
		margin: 0;
	}
}


/* ════════════════════════════════════════════════════════════
 * 12. EDITOR PREVIEW — Gutenberg 編輯器專用最小化樣式
 *     editor.js 渲染與前台不同的 DOM；此區僅保證編輯器可用，
 *     不追求 pixel-perfect。前台與編輯器視覺一致化需另外重構 editor.js。
 * ════════════════════════════════════════════════════════════ */

.scb-editor-preview {
	position: relative;
}

.scb-editor-preview-inner {
	padding: var(--scb-gap-xl);
	border: 1px dashed rgba(0, 0, 0, 0.14);
	border-radius: 18px;
	background: #fafafa;
}

.scb-editor-preview-shell {
	display: flex;
	flex-direction: column;
	gap: var(--scb-gap-lg);
}

/* Guidance head（編輯器入口） */
.scb-guidance-head,
.scb-panel-intro {
	margin-bottom: var(--scb-gap-md);
}

.scb-guidance-title,
.scb-panel-title {
	margin: var(--scb-gap-xs) 0;
	font-size: var(--scb-fs-md);
	font-weight: 500;
	line-height: 1.4;
}

.scb-guidance-copy,
.scb-panel-copy {
	margin: var(--scb-gap-sm) 0 0;
	color: var(--scb-text-muted);
	font-size: var(--scb-fs-sm);
	line-height: 1.7;
}

/* Path chip 列（編輯器三路徑切換） */
.scb-path-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--scb-gap-md);
}

.scb-path-chip {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--scb-gap-lg);
	border: 1px solid var(--scb-border);
	border-radius: 12px;
	background: var(--scb-bg);
	cursor: pointer;
	text-align: left;
	transition: border-color 0.2s ease;
}

.scb-path-chip:hover,
.scb-path-chip[aria-selected="true"] {
	border-color: var(--scb-primary);
}

.scb-path-chip__icon {
	display: flex;
	width: 40px;
	height: 40px;
	margin-bottom: var(--scb-gap-sm);
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--scb-primary-soft);
}

.scb-path-chip__icon-placeholder {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--scb-primary);
}

.scb-path-chip__eyebrow {
	margin: 0 0 var(--scb-gap-xs);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--scb-primary);
}

.scb-path-chip__label {
	display: block;
	font-size: var(--scb-fs-sm);
	font-weight: 500;
	color: var(--scb-text);
}

.scb-path-chip__sub {
	display: block;
	margin-top: var(--scb-gap-xs);
	font-size: var(--scb-fs-xs);
	line-height: 1.5;
	color: var(--scb-text-muted);
}

/* 編輯器 Path A：mega list */
.scb-mega-list {
	display: grid;
	gap: var(--scb-gap-sm);
	margin: var(--scb-gap-lg) 0;
}

.scb-mega-btn {
	position: relative;
	width: 100%;
	padding: var(--scb-gap-md) var(--scb-gap-md) var(--scb-gap-md) var(--scb-gap-xl);
	border: 1px solid var(--scb-border);
	border-radius: var(--scb-card-radius);
	background: var(--scb-bg);
	cursor: pointer;
	text-align: left;
	transition: border-color 0.2s ease;
}

.scb-mega-btn:hover {
	border-color: var(--scb-primary);
}

.scb-mega-mark {
	position: absolute;
	top: 18px;
	left: 10px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--scb-primary);
}

.scb-mega-title {
	display: block;
	font-weight: 500;
	color: var(--scb-text);
}

.scb-mega-pitch {
	display: block;
	margin-top: var(--scb-gap-xs);
	font-size: var(--scb-fs-sm);
	color: var(--scb-text-muted);
}

/* 編輯器 Path B：carousel */
.scb-b-carousel {
	display: flex;
	align-items: center;
	gap: var(--scb-gap-md);
	margin-top: var(--scb-gap-lg);
}

.scb-carousel-card {
	flex: 1 1 0;
	min-width: 0;
	padding: var(--scb-gap-lg);
	border: 1px solid var(--scb-border);
	border-radius: 12px;
	background: var(--scb-bg);
}

/* 編輯器 Path C：grid */
.scb-c-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--scb-gap-md);
	margin-top: var(--scb-gap-lg);
}

.scb-c-card {
	position: relative;
	padding: var(--scb-gap-lg);
	border: 1px solid var(--scb-border);
	border-radius: 12px;
	background: var(--scb-bg);
}

.scb-c-card-mark {
	position: absolute;
	top: 16px;
	left: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--scb-primary);
}

.scb-c-channel {
	margin: 0 0 var(--scb-gap-sm);
	padding-left: var(--scb-gap-md);
	font-weight: 500;
	color: var(--scb-text);
}