/**
 * @third-party:WooCommerce — 通知條（notice bar）配色與手機排版
 *
 * 通知條 = 加入購物車 / 恢復上一步 / 登入提示 / 錯誤訊息。
 * 它會在**任何**頁面出現（含自建 landing page），所以本檔全站載入
 * （`WooCommerceIntegration::enqueue_woocommerce_notice_styles()`），
 * 不像 woocommerce.css（結帳頁）/ woocommerce-account.css（會員頁）條件載入。
 *
 * 檔案分兩段：
 *   1. 配色與按鈕外觀 — 桌機 + 手機共用
 *   2. 手機排版修正   — 包在 @media (max-width: 767px) 內
 *
 * ── 為什麼需要第 2 段（2026-08-18）──
 *
 * Blocksy 把通知條做成 flex，並自己備了一個斷點：
 *   @media (max-width: 479.98px) → flex-direction: column（文字一行、按鈕一行）
 *   @media (min-width: 480px)    → 同一行排到底，且 margin-inline-start: auto !important
 *                                  把按鈕死釘在最右邊
 *
 * 480px 這個數字是照**英文**抓的 —— "View cart" 排得下，中文「查看購物車」排不下。
 * 於是 480–767px（大手機、手機橫放、平板直立）落進沒人管的空窗：
 * 商品名一長 → 文字被壓成兩行、按鈕被擠到剩一點寬 → 按鈕文字折成「查看購物／車」。
 *
 * ⚠️ 不是 Canvas 造成的：實測把按鈕尺寸完全交還主題（padding / font-size /
 *    min-height 全用 --theme-button-*），500px 下照樣折行。我們放大按鈕只是
 *    讓它爆得更醜，不是元凶。任何中文的 Blocksy + WC 站都會中。
 *
 * 修法：把 Blocksy 只做到 479.98px 的縱向堆疊，延伸到專案標準斷點 767px。
 *
 * ⚠️ 這與商品頁的「加購按鈕列」是兩個不同的問題，別搞混：
 *    那個在 woocommerce-tokens.css（.ct-cart-actions，AJAX 插入的「查看購物車」
 *    與「加入購物車」擠同一行，375px 一般手機就爆）。本檔管的是頁面頂端的通知條。
 *
 * ── 三個實作前提（動這段前先讀，都是實測結論）──
 *
 * 1. `display: flex` 不能省。看似多餘（Blocksy 早就是 flex），但少了它，
 *    這段規則就只對「剛好也用 flex 的主題」有效 —— 原生 WooCommerce 是 float
 *    排版，flex-direction 對它完全無作用。加上去這條規則才自己站得住。
 *
 * 2. `margin-inline-start: 0 !important` 是被迫的：Blocksy 那條就是 !important
 *    （`margin-inline-start: auto !important`），純靠特異性蓋不掉。這是本段
 *    唯一容許的 !important，其餘一律走 `:root body` 高特異性（家規，
 *    對齊 GapDomain / HoverDomain 全家族的寫法）。
 *
 * 3. `.woocommerce-error` **刻意不納入**。它是 <ul><li> 結構（success / info 是
 *    <div>），按鈕巢在 li 裡走一般行內排版、本來就會自然換行，不會跑版。
 *    實測把它一起改，反而讓按鈕貼死前面的文字（左移 6px）。別「順手補上」。
 *
 * ── 零回歸驗證（2026-08-18 於 fancycollege.net 正式站瀏覽器實測）──
 *
 *   375px 加入購物車通知   改前 110.19px 高 → 改後 110.19px（逐 px 相同）
 *   768px 桌機             全部量測值完全相同
 *   純文字通知（無按鈕）    高 60px → 60px（零變化）
 *   錯誤通知               全部量測值完全相同
 *   500px 跑版案例         按鈕高 70px（折兩行）→ 47px（單行）、移到文字下方靠左
 */

/* ═══════════════════════════════════════════════════════════
   1. 配色與按鈕外觀（桌機 + 手機共用）
   ═══════════════════════════════════════════════════════════ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	font-family: var(--hz-typo-typo-06-ff);
	font-size: var(--hz-typo-typo-06-fs);
	letter-spacing: var(--hz-typo-typo-06-ls);
	background-color: var(--hz-color-02) !important;
	color: var(--hz-color-09) !important;
	border-color: var(--hz-color-20) !important;
}

/* 左側狀態圖示（WC 用 ::before 畫）→ 主色，不用狀態綠 */
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--hz-color-14) !important;
}

.woocommerce-message:focus {
	outline: none;
}

/* Blocksy 用高特異性設定按鈕樣式，需要 !important 覆蓋 */
.woocommerce-message .button,
.woocommerce-message .wc-forward,
.woocommerce-message .restore-item,
.woocommerce-message .showlogin,
.woocommerce-info .button,
.woocommerce-info .wc-forward,
.woocommerce-info .showlogin {
	font-family: var(--hz-typo-typo-10-ff) !important;
	font-size: var(--hz-typo-typo-10-fs) !important;
	font-weight: var(--hz-typo-typo-10-fw) !important;
	letter-spacing: var(--hz-typo-typo-10-ls) !important;
	background-color: var(--hz-color-04) !important;
	color: var(--hz-color-11) !important;
	padding: var(--hz-button-01-padding-y) var(--hz-button-01-padding-x) !important;
	border-radius: var(--hz-button-01-radius) !important;
	text-decoration: none !important;
	transition: opacity 0.2s;
}

.woocommerce-message .button:hover,
.woocommerce-message .wc-forward:hover,
.woocommerce-message .restore-item:hover,
.woocommerce-message .showlogin:hover,
.woocommerce-info .button:hover,
.woocommerce-info .wc-forward:hover,
.woocommerce-info .showlogin:hover {
	opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════
   2. 手機排版修正（≤ 767px）— 文字一行、按鈕自己一行靠左
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

	/* 縱向堆疊。display:flex 不能省 —— 見檔頭前提 1 */
	:root body .woocommerce-message,
	:root body .woocommerce-info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	/* 按鈕掉到下一行、靠左、不被擠扁 */
	:root body .woocommerce-message .button,
	:root body .woocommerce-message .wc-forward,
	:root body .woocommerce-message .restore-item,
	:root body .woocommerce-message .showlogin,
	:root body .woocommerce-info .button,
	:root body .woocommerce-info .wc-forward,
	:root body .woocommerce-info .showlogin {
		float: none;
		flex-shrink: 0;
		white-space: nowrap;

		/* Blocksy 的 margin-inline-start: auto !important 把按鈕釘在右邊 —— 見檔頭前提 2 */
		margin-inline-start: 0 !important;

		/* 與上方文字的間距。對齊 Blocksy 在 ≤479.98px 既有的 10px，避免兩段斷點視覺跳動 */
		margin-top: 10px;
	}
}