/* ── 結帳頁：白色圓角卡片版面 ────────────────────────────────────
   參考 Woodmart mega-electronics demo 的視覺（卡片圓角 10px、白底、無陰影）。

   左欄用 WooCommerce 現成的四個容器各自成卡，右欄因為訂單摘要整個是一個
   <table>，中間無法插入 div（會破壞表格結構），改用背景與間距做視覺分隔。

   DOM 結構：
     form.checkout
       ├── div.customer-details
       │     ├── .woocommerce-billing-fields      訂購人資訊
       │     ├── .woocommerce-account-fields      建立帳號
       │     ├── .woocommerce-shipping-fields     運送到不同地址
       │     └── .woocommerce-additional-fields   訂單備註
       └── div.checkout-order-review              （本身透明，只負責排列）
             ├── #order_review_heading            訂單摘要 ┐ 卡 1
             ├── #order_review > table            金額明細 ┘
             ├── .lyfh-order-notice               訂購須知   卡 2
             ├── .lyfh-payment-heading            付款方式 ┐ 卡 3
             └── #payment                         金流 + 下單鈕 ┘
   ──────────────────────────────────────────────────────────── */

/* 頁面底色：讓白卡浮起來 */
body.woocommerce-checkout .main-page-wrapper,
body.woocommerce-checkout .site-content {
	background-color: #f6f5f2;
}

/* ── 兩欄版面 ───────────────────────────────────────────
   左欄是訂購人資訊，右欄是訂單摘要 + 付款方式 + 訂購須知。
   付款方式維持 WooCommerce 預設位置（右欄訂單摘要內），不是 form 的直接子層，
   因此這裡只剩「左欄表單／右欄摘要」兩個 grid 項目。
   ─────────────────────────────────────────────────── */

/* 為什麼是 Grid 而不是 flex-wrap
   ────────────────────────────
   flex-wrap 會把左欄（訂購人資訊）與右欄（訂單摘要）放在同一條 flex line。
   同一條 line 的高度取兩者的最大值 —— 右欄的訂購須知手風琴一展開，整條 line
   就變高，於是下一條 line 的付款方式被推到右欄底下，看起來像跑版。

   Grid 的兩欄各自獨立成格，右欄再長也不會影響左欄。
   列距設 0、間距改由各張卡自己的 margin-bottom 負責，空的列才不會產生幽靈間隙。 */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
	grid-template-rows: auto min-content;
	column-gap: 24px;
	row-gap: 0;
	align-items: start;
}

/* Woodmart 給 form.checkout 的子元素設了 order:-1。order 對 Grid 項目一樣有效，
   會打亂自動排版的落點。全部歸零，改由 DOM 順序決定。 */
.woocommerce-checkout form.checkout > * {
	order: 0;
}

.woocommerce-checkout form.checkout > .customer-details {
	grid-column: 1;
	max-width: none;
	width: auto;
}

/* 右欄自成一格（第 1 列是全寬的訂購商品明細）。 */
.woocommerce-checkout form.checkout > .checkout-order-review {
	grid-column: 2;
	grid-row: 2;
	max-width: none;
	width: auto;
}

/* Woodmart 給右欄加了鋸齒狀的上下緣（radial-gradient 做的收據效果），
   跟白色圓角卡的語彙衝突，關掉。 */
.woocommerce-checkout > form.checkout > .checkout-order-review::before,
.woocommerce-checkout > form.checkout > .checkout-order-review::after,
.woocommerce-checkout .checkout-order-review::before,
.woocommerce-checkout .checkout-order-review::after {
	display: none !important;
}

/* ── 左欄：四張獨立卡片 ─────────────────────────────────── */

.woocommerce-checkout .customer-details {
	background-color: transparent;
	padding: 0;
}

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-account-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
	background-color: #fff;
	border-radius: 10px;
	padding: 24px;
	margin-bottom: 16px;
}

/* 左欄白卡與右欄訂單摘要的對齊
   ──────────────────────────
   兩欄的 grid 項本身是對齊的（同樣起於第 2 列），錯開的是卡片自己的外距：

     .woocommerce-checkout>.customer-details .woocommerce-billing-fields{margin-top:30px}

   那是 Woodmart 的規則，3 個 class（0,3,0），權重高過
   `.woocommerce-checkout .woocommerce-billing-fields`（0,2,0）。這裡用 4 個 class
   加元素選擇器蓋過去。

   同一批 Woodmart 規則還有：

     form.woocommerce-checkout>:is(.customer-details,…)>*{margin-bottom:20px}

   `:is()` 取其中最高權重的參數，所以是 (0,2,1) —— 也贏過我們的 16px。
   一併在這裡統一，卡片間距才會跟右欄一致。 */
.woocommerce-checkout form.checkout > .customer-details > .woocommerce-billing-fields {
	margin-top: 0;
}

.woocommerce-checkout form.checkout > .customer-details > .woocommerce-billing-fields,
.woocommerce-checkout form.checkout > .customer-details > .woocommerce-account-fields,
.woocommerce-checkout form.checkout > .customer-details > .woocommerce-shipping-fields,
.woocommerce-checkout form.checkout > .customer-details > .woocommerce-additional-fields {
	margin-bottom: 16px;
}

.woocommerce-checkout form.checkout > .customer-details > *:last-child {
	margin-bottom: 0;
}

/* 區塊標題：卡片內的第一行，用細線與內容分開 */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .lyfh-section-title,
.woocommerce-checkout #ship-to-different-address {
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

/* 「運送到不同的地址」標題本身是 checkbox，維持可點擊的排版 */
.woocommerce-checkout #ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 17px;
	font-weight: 600;
}

/* 「運送到不同的地址」未勾選時，下方欄位區是空的但仍佔高度 */
.woocommerce-checkout .woocommerce-shipping-fields > .shipping_address {
	display: none;
}

.woocommerce-checkout .woocommerce-shipping-fields > .shipping_address[style*="block"] {
	display: block !important;
	margin-top: 18px;
}

/* 未勾選時標題不需要底線（它是卡片內唯一的內容） */
.woocommerce-checkout .woocommerce-shipping-fields:not(:has(.shipping_address[style*="block"])) #ship-to-different-address {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/* 訂單備註：我們補的 h3 已經是標題，欄位自己的 label 就多餘了 */
.woocommerce-checkout .woocommerce-additional-fields #order_comments_field > label {
	display: none;
}

/* ── 右欄：三張獨立卡片 ──────────────────────────────────
   容器本身透明（跟左欄的 .customer-details 一樣），白卡由各區塊自己畫。

   訂單摘要與付款方式的標題都是「內容的前一個兄弟節點」，不是包在裡面
   —— #order_review_heading 是 Woodmart 樣板放的，.lyfh-payment-heading 出自
   payment.php 的 woocommerce_review_order_before_payment。兩者都無法移進去，
   所以改用「標題畫上半張卡、內容畫下半張卡」把它們接成一張。
   ─────────────────────────────────────────────────────── */

.woocommerce-checkout .checkout-order-review {
	background-color: transparent !important;
	border-radius: 0;
	padding: 0 !important;
}

/* 卡片的上半：標題 */
.woocommerce-checkout .checkout-order-review > #order_review_heading,
.woocommerce-checkout .checkout-order-review > .lyfh-payment-heading {
	margin: 0;
	background-color: #fff;
	border-radius: 10px 10px 0 0;
	padding: 24px 24px 12px;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
	font-size: 17px;
	font-weight: 600;
}

/* 卡片的下半：內容。padding-top 18px 讓細線與內容之間有跟左欄一致的呼吸。 */
.woocommerce-checkout .checkout-order-review > #order_review,
.woocommerce-checkout .checkout-order-review > #payment {
	background-color: #fff;
	border-radius: 0 0 10px 10px;
	padding: 18px 24px 24px;
	margin: 0 0 16px;
}

/* 付款是最後一張卡，下面不需要再留白。 */
.woocommerce-checkout .checkout-order-review > #payment {
	margin-bottom: 0;
	border: 0;
}

/* ── 訂單摘要：把 table 的顯示模型換成區塊 ──────────────────
   table / tr / td 的預設顯示模型不支援 border-radius，這是右欄「稜角很多」
   的根本原因。改成 block + flex 之後就能像一般區塊那樣做圓角與卡片，
   而且不必覆寫 review-order.php（少維護一個模板檔）。
   ─────────────────────────────────────────────────────── */

.woocommerce-checkout .woocommerce-checkout-review-order-table,
.woocommerce-checkout .woocommerce-checkout-review-order-table thead,
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr {
	display: block;
	width: 100%;
	border: 0;
}

/* 標題列與金額列改用 flex 維持「左標題、右金額」的對齊。
   商品列（.cart_item）不動 —— Woodmart 已經自訂過它的結構
   （單一 td.wd-checkout-prod，內部用 div 排版），覆蓋會把版面拆散。 */
.woocommerce-checkout .woocommerce-checkout-review-order-table thead tr,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table thead th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
	display: block;
	border: 0;
	padding: 10px 0;
	width: auto;
	text-align: left;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
	flex-shrink: 0;
}

/* 商品列維持主題原本的排版。
   Woodmart 已經定義 .wd-checkout-prod{display:flex} 與
   .wd-checkout-prod-cont{display:flex;justify-content:space-between}，
   這裡只調整外距，**絕對不要覆蓋它們的 display**，否則圖片、品名、數量、
   金額會各自換行散開。 */
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr.cart_item {
	display: block;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td {
	border: 0;
	padding: 12px 0;
	width: auto;
}

/* 商品明細卡 */
.woocommerce-checkout .woocommerce-checkout-review-order-table thead,
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody {
	background-color: #fbfaf8;
	border: 1px solid rgba(0, 0, 0, .06);
	padding: 4px 16px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table thead {
	border-radius: 10px 10px 0 0;
	border-bottom: 0;
	font-size: 13px;
	opacity: .7;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tbody {
	border-radius: 0 0 10px 10px;
	border-top: 0;
	margin-bottom: 16px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr + tr {
	border-top: 1px solid rgba(0, 0, 0, .06);
}

/* 商品列已經移到頁面上方全寬區塊，右欄只剩金額與運送方式。
   這裡原本再套一張圓角底色卡，結果是「白卡裡面又一張卡」，左右還內縮一截。
   直接讓內容貼齊外層白卡的內距。 */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr + tr {
	border-top: 1px solid rgba(0, 0, 0, .06);
}

/* 運送方式那一列：左右各佔一半，選項靠右 */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .shipping td {
	flex: 1 1 auto;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .shipping ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total {
	font-size: 17px;
	padding-top: 4px;
	padding-bottom: 4px;
}

/* 手機（單欄）時付款方式回到流程順序中 */
/* 單欄版面
   ────────
   不能只是 display:block —— DOM 順序是
   商品明細 → 訂購人資訊 → 隱私權說明 → 付款(含下單鈕) → 訂單摘要，
   照著排的話「下單購買」會出現在訂單摘要「之前」，客人按完才看到金額明細。

   用 flex 直排另外指定順序，把訂單摘要提到付款之前、下單鈕留在最後。 */
@media (max-width: 991px) {
	.woocommerce-checkout form.checkout {
		display: flex;
		flex-direction: column;
		/* 桌機版 Grid 設了 align-items:start。改成 flex 直排之後，align-items 換成
		   控制「水平」方向 —— start 會讓卡片縮成內容寬（實測商品明細只有 320px，
		   其他卡片 360px，看起來就像跑版）。這裡要明確改回 stretch。 */
		align-items: stretch;
	}

	.woocommerce-checkout form.checkout > .lyfh-top-products,
	.woocommerce-checkout form.checkout > .customer-details,
	.woocommerce-checkout form.checkout > .checkout-order-review {
		grid-column: auto;
		grid-row: auto;
		width: auto;
	}

	/* 付款方式在 .checkout-order-review 之內，所以右欄整塊就是最後一段。 */
	.woocommerce-checkout form.checkout > .lyfh-top-products     { order: 1; }
	.woocommerce-checkout form.checkout > .customer-details      { order: 2; }
	.woocommerce-checkout form.checkout > .checkout-order-review { order: 3; }

	/* 單欄時訂單摘要就疊在訂單備註卡下面，而 .customer-details 的最後一張卡
	   margin-bottom 是 0（桌機版兩者不同欄，不需要間距），這裡要自己補上方留白。 */
	.woocommerce-checkout form.checkout > .checkout-order-review {
		position: static;
		margin-top: 16px;
		margin-bottom: 14px;
	}
}

/* ── 表單元件 ───────────────────────────────────────────── */

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection {
	border-radius: 6px;
}

/* ── 手機 ───────────────────────────────────────────────── */

@media (max-width: 768px) {
	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout .woocommerce-account-fields,
	.woocommerce-checkout .woocommerce-shipping-fields,
	.woocommerce-checkout .woocommerce-additional-fields,
	.woocommerce-checkout .lyfh-order-notice {
		padding: 20px 18px;
		margin-bottom: 14px;
	}

	/* 右欄那三張卡是「標題 + 內容」兩段式，內距要分開給。 */
	.woocommerce-checkout .checkout-order-review > #order_review_heading,
	.woocommerce-checkout .checkout-order-review > .lyfh-payment-heading {
		padding: 20px 18px 12px;
	}

	.woocommerce-checkout .checkout-order-review > #order_review,
	.woocommerce-checkout .checkout-order-review > #payment {
		padding: 16px 18px 20px;
		margin-bottom: 14px;
	}

	.woocommerce-checkout .checkout-order-review > #payment {
		margin-bottom: 0;
	}
}

/* ══════════════════════════════════════════════════════════
   2026-08-25 追加：手機可用性、商品明細置頂、運送方式卡片
   參考來源：YS CART v2.58.5（dev-yscart 的引擎）
   ══════════════════════════════════════════════════════════ */

/* ── 手機可用性 ───────────────────────────────────────────
   三個實測出來的缺陷，不是品味問題：

   1. 表單欄位字級 14px —— iOS Safari 在欄位字級小於 16px 時，聚焦會自動
      放大整個頁面，且不會自己縮回來。實測結帳頁 25 個欄位全中。
   2. 數量按鈕 25×30px —— 遠低於觸控目標下限（44×44）。
   3. 送出按鈕是靜態的 —— 長表單要一路捲到底才找得到。

   用 (hover:none) and (pointer:coarse) 精準命中觸控裝置，桌面版維持原本的
   密度不受影響。
   ─────────────────────────────────────────────────────── */

@media (hover: none) and (pointer: coarse) {

	/* iOS 聚焦自動放大的成因就是「小於 16px」，只要達到 16 就不會觸發。 */
	.woocommerce-checkout .form-row input.input-text,
	.woocommerce-checkout .form-row textarea,
	.woocommerce-checkout .form-row select,
	.woocommerce-cart .form-row input.input-text,
	.woocommerce-cart .form-row select,
	.woocommerce-checkout .select2-container .select2-selection__rendered,
	.woocommerce-checkout .select2-search__field {
		font-size: 16px;
	}

	/* 觸控目標下限 44×44。 */
	.woocommerce-cart .quantity .minus,
	.woocommerce-cart .quantity .plus,
	.woocommerce-cart .wd-buttons .minus,
	.woocommerce-cart .wd-buttons .plus {
		min-width: 44px;
		min-height: 44px;
		font-size: 18px;
	}

	.woocommerce-cart .quantity input.qty {
		min-width: 56px;
		min-height: 44px;
		font-size: 16px;
	}

	/* 移除商品的 × 也要能點得到。 */
	.woocommerce-cart .product-remove a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}
}

/* 手機版的送出區塊
   ────────────────
   曾經把 .place-order 固定在螢幕底部（參考 YS CART）。實測後拿掉：
   Woodmart 的 header 是 whb-scroll-slide（向上捲時滑入），再加一條固定底列，
   844px 高的手機畫面上下各被吃掉一塊，表單反而更難填。

   付款回到訂單摘要內之後，總計本來就在下單鈕的正上方，
   當初為了固定列而額外同步的「應付總額」那一行也就不需要了。 */
@media (max-width: 991px) {
	.woocommerce-checkout #payment .place-order {
		position: static;
		margin: 0;
		padding: 0;
		background-color: transparent;
		border-top: 0;
		box-shadow: none;
	}

	.woocommerce-checkout #payment .place-order .button {
		width: 100%;
		margin: 0;
	}
}

/* whb-overcontent：header 是覆蓋在內容之上的，行動版的頁面標題因此被蓋掉一半
   （「結帳」兩個字只露出下緣）。桌機版標題區夠高看不出來，手機才會撞到。 */
@media (max-width: 991px) {
	/* Woodmart 自己已經給 75px，但 header 覆蓋的高度就將近 90px，
	   標題文字的上緣還是被切掉。用 3 個 class 蓋過它的預設值。 */
	body.woocommerce-checkout .wd-page-title.page-title,
	body.woocommerce-cart .wd-page-title.page-title {
		padding-top: 115px;
	}
}

/* ── 訂購商品明細：全寬置頂 ──────────────────────────────── */

.woocommerce-checkout form.checkout > .lyfh-top-products {
	grid-column: 1 / -1;
	grid-row: 1;
	background-color: #fff;
	border-radius: 10px;
	padding: 24px;
	margin: 0 0 16px;
}

/* ── 商品明細改用購物車的原生表格 ──────────────────────────
   版面（欄寬、行動版堆疊、data-title 標籤）全部交給 Woodmart 的
   `.shop_table_responsive` 處理，這裡只留下自訂的部分：溫層徽章、移除鈕、
   數量控制、移除確認列。原本那 90 行自訂 grid／flex 排版已刪除。
   ─────────────────────────────────────────────────────── */

.lyfh-top-products-table {
	margin: 0;
}

/* 溫層徽章接在品名後面 */
.lyfh-top-products-table .product-name .lyfh-zone {
	margin-left: 8px;
	vertical-align: middle;
}

/* 移除鈕沿用主題 .remove 的外觀，只把它從 <a> 換成 <button> 的差異補平 */
.lyfh-top-products-table .product-remove .remove {
	border: 0;
	background: transparent;
	cursor: pointer;
	line-height: 1;
}

/* 商品已經在上方列完整了，右欄摘要只留金額與運送方式。 */
.woocommerce-checkout .woocommerce-checkout-review-order-table thead,
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody {
	display: none;
}


/* ── 運送方式：說明文字與免運提示 ──────────────────────────
   這些是「內容」樣式，與卡片外觀無關 —— 卡片停用時仍然需要它們，
   否則說明會跟標題擠在同一行。
   ─────────────────────────────────────────────────────── */

/* 說明文字：自成一行，弱化。 */
.lyfh-ship-desc {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	opacity: .62;
}

/* 免運提示與湊單連結排在說明之後。 */
.lyfh-ship-hint {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	color: rgb(226, 63, 63);
}

.lyfh-ship-hint-done {
	color: #3f7a55;
}

/* ── woomp 搬過來的國家欄位 ────────────────────────────────
   woomp 會把 billing/shipping 的「國家/地區」欄位移進訂單摘要容器。
   WooCommerce 只允許台灣時會自動隱藏 billing 那一個，但 shipping 那個
   仍然可見 —— 右欄的商品列表移到上方之後，它就變得非常顯眼。
   只賣台灣，兩個都不需要出現。
   ─────────────────────────────────────────────────────── */

.woocommerce-checkout .checkout-order-review #billing_country_field,
.woocommerce-checkout .checkout-order-review #shipping_country_field {
	display: none !important;
}

/* ── 隱私權說明 ──────────────────────────────────────────
   已回到 WooCommerce 預設位置：.place-order 內、下單鈕的正上方。
   只把字級壓小、淡一點，讓它是「補充說明」而不是跟按鈕搶注意力。
   ─────────────────────────────────────────────────────── */

.woocommerce-checkout .place-order .woocommerce-privacy-policy-text {
	margin: 0 0 12px;
	font-size: 12px;
	line-height: 1.6;
	opacity: .6;
}

.woocommerce-checkout .place-order .woocommerce-privacy-policy-text p {
	margin: 0;
}

/* ── 訂購須知字卡 ─────────────────────────────────────────
   版面參考 mega-electronics 的 Delivery & Return：訂單摘要下方一張同款白卡。
   用 <details> 做手風琴 —— 五節全部攤開會變成一面法律文字牆，收起來則讓
   客人只讀他當下關心的那一段。原生元素，不需要 JS。
   ─────────────────────────────────────────────────────── */

/* 自己就是一張白卡（右欄三張卡的中間那張）。 */
.lyfh-order-notice {
	background-color: #fff;
	border-radius: 10px;
	padding: 24px;
	margin: 0 0 16px;
}

.lyfh-order-notice-title {
	margin: 0 0 8px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
	font-size: 17px;
	font-weight: 600;
}

.lyfh-order-notice-lead {
	margin: 0 0 6px;
	font-size: 12px;
	line-height: 1.6;
	opacity: .6;
}

.lyfh-notice-item {
	border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.lyfh-notice-item:last-child {
	border-bottom: 0;
}

.lyfh-notice-item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 0;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	list-style: none;
}

/* 隱藏瀏覽器預設的三角形，改用自己的箭號 */
.lyfh-notice-item > summary::-webkit-details-marker {
	display: none;
}

.lyfh-notice-item > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	opacity: .45;
	transition: transform .18s ease;
}

.lyfh-notice-item[open] > summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.lyfh-notice-item > ul {
	margin: 0 0 12px;
	padding: 0 0 0 18px;
	list-style: disc;
}

.lyfh-notice-item > ul li {
	margin-bottom: 7px;
	font-size: 12.5px;
	line-height: 1.7;
	opacity: .78;
}

.lyfh-notice-item > ul li:last-child {
	margin-bottom: 0;
}

.lyfh-notice-item > ul li strong {
	font-weight: 600;
	opacity: 1;
}

@media (max-width: 991px) {
	.lyfh-order-notice {
		margin-top: 18px;
		padding-top: 16px;
	}
}

/* ── 訂購商品明細：數量控制 ───────────────────────────────── */

.lyfh-top-product-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 8px;
	overflow: hidden;
	background-color: #fff;
}

.lyfh-qty-btn {
	flex: 0 0 32px;
	width: 32px;
	min-width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s;
}

.lyfh-qty-btn:hover:not(:disabled) {
	background-color: rgba(0, 0, 0, .05);
}

.lyfh-qty-btn:disabled {
	opacity: .4;
	cursor: default;
}

.lyfh-qty-input {
	flex: 0 0 46px;
	width: 46px;
	min-width: 46px;
	max-width: 46px;
	height: 32px;
	padding: 0;
	border: 0;
	border-left: 1px solid rgba(0, 0, 0, .1);
	border-right: 1px solid rgba(0, 0, 0, .1);
	border-radius: 0;
	text-align: center;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	background: transparent;
	-moz-appearance: textfield;
}

/* 數字欄位的上下小箭頭在這個尺寸下按不準，隱藏。 */
.lyfh-qty-input::-webkit-outer-spin-button,
.lyfh-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* 更新中只把「金額」淡化，數量控制維持可按 —— 鎖住按鈕會讓客人從 1 加到 10
   時按到一半就被打斷，比不做防護更糟。重疊的請求由 JS 的 busy/pending 收斂。 */
.lyfh-top-products.is-updating .lyfh-top-product-total {
	opacity: .35;
	transition: opacity .15s;
}

.lyfh-qty-error {
	display: none;
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	background-color: #fdf0f0;
	color: #8b3a3a;
	font-size: 13px;
	line-height: 1.6;
}

@media (hover: none) and (pointer: coarse) {
	.lyfh-qty-btn {
		flex: 0 0 44px;
		width: 44px;
		min-width: 44px;
		height: 44px;
		font-size: 18px;
	}

	.lyfh-qty-input {
		flex: 0 0 54px;
		width: 54px;
		min-width: 54px;
		max-width: 54px;
		height: 44px;
		font-size: 16px;
	}
}

/* ── 商品左側的移除鈕 ─────────────────────────────────────
   放在圖片左邊、維持低調 —— 它是破壞性動作，不該跟「加入」「結帳」搶注意力，
   但也不能小到按不到（觸控裝置放大到 44×44）。
   ─────────────────────────────────────────────────────── */

/* Woodmart 給 button 一個淺灰底（#f3f3f3），會讓這顆 × 看起來像一塊灰色方塊。
   用 3 個 class 的選擇器蓋掉，維持它「低調的圖示」而不是「按鈕」的樣子。 */
.lyfh-top-products .lyfh-top-product .lyfh-top-product-remove {
	background-color: transparent;
	box-shadow: none;
}

.lyfh-top-product-remove {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	opacity: .3;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: opacity .15s, background-color .15s, color .15s;
}

.lyfh-top-products .lyfh-top-product .lyfh-top-product-remove:hover,
.lyfh-top-products .lyfh-top-product .lyfh-top-product-remove:focus-visible {
	opacity: 1;
	background-color: #fdf0f0;
	color: rgb(226, 63, 63);
}

/* 重算中的訂單摘要：讓客人知道數字還在跑，而不是停在錯的值上。 */
.checkout-order-review.is-recalculating .woocommerce-checkout-review-order-table tfoot {
	opacity: .45;
	transition: opacity .15s;
}

/* 「已移除 X ／ 復原」與確認用的行內按鈕 */
.lyfh-qty-error button {
	margin-left: 4px;
	padding: 5px 12px;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 6px;
	background: #fff;
	color: inherit;
	font-size: 13px;
	cursor: pointer;
}

.lyfh-qty-error button:hover {
	border-color: rgba(0, 0, 0, .4);
}

.lyfh-qty-error .lyfh-confirm-last {
	border-color: transparent;
	background-color: rgb(226, 63, 63);
	color: #fff;
}

.lyfh-qty-error .lyfh-confirm-last:hover {
	background-color: rgb(191, 53, 53);
}

@media (hover: none) and (pointer: coarse) {
	.lyfh-top-product-remove {
		width: 44px;
		height: 44px;
		font-size: 22px;
		opacity: .45;
	}

	.lyfh-qty-error button {
		min-height: 44px;
		padding: 0 16px;
	}
}

/* ── 手機：訂單摘要的運送方式改成堆疊 ─────────────────────
   桌機版把摘要的每一列排成「左標籤、右金額」的 flex。小計與總計沒問題
   （字很短），但運送方式那一列的 td 裝的是整個運送方式清單 —— 在 390px 的
   畫面上，th 只分到 25px，「冷凍」被壓成直排兩個字。

   購物車頁之所以好看，是因為 Woodmart 原生的 .shop_table_responsive 在手機上
   把 th 藏起來、td 佔滿整行。結帳頁的 review table 沒有那個 class，所以吃不到
   那組規則。這裡照同樣的邏輯手動做：標籤自己一行，選項在下方全寬。
   ─────────────────────────────────────────────────────── */

@media (max-width: 991px) {
	.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .shipping {
		display: block;
		padding: 4px 0 10px;
	}

	.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .shipping th,
	.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .shipping td {
		display: block;
		width: 100%;
		max-width: none;
		padding: 0;
		text-align: left;
	}

	.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .shipping th {
		margin-bottom: 8px;
		font-weight: 600;
	}

	/* 圓鈕：Woodmart 在結帳頁的摘要裡把它 float:right（因為那個 td 預設靠右），
	   購物車頁則是 float:left。既然手機版整列已經改成靠左堆疊，圓鈕也跟著回到
	   左邊，跟購物車一致。 */
	.woocommerce-checkout .shipping ul#shipping_method li input[type="radio"],
	.woocommerce-checkout .shipping ul.woocommerce-shipping-methods li input[type="radio"] {
		float: left;
		margin-right: 9px;
		/* 不要再加 margin-top —— Woodmart 已經用 position:relative; top:4px 把圓鈕
		   對到文字中線了。兩者相加會讓圓鈕比第一行文字低 6px，看起來歪歪的。 */
		margin-top: 0;
	}

	/* 包裹內容物（「珍珠鮮肉丸 ×1」）也跟著靠左，不要沿用桌機的靠右。 */
	.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .shipping .wd-shipping-package-items,
	.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .shipping p {
		text-align: left;
	}
}

/* ── 手機：溫層徽章移到左下角 ─────────────────────────────
   行動版的品名列只有 197px 寬，徽章接在品名後面時右緣會逼近移除鈕
   （實測徽章右緣 268px、移除鈕從 275px 開始，只差 7px）——
   品名再長一點就直接撞上。

   縮圖是 100px 高，但整列有 164px，左下角本來就是空的。把徽章絕對定位到
   那塊空白：靠左與縮圖對齊、底部與「小計」那一列切齊（小計距列底 16px）。
   品名列因此拿回完整寬度，不再與移除鈕打架。
   ─────────────────────────────────────────────────────── */

@media (max-width: 991px) {
	.lyfh-top-products-table tr.lyfh-top-product {
		position: relative;
	}

	.lyfh-top-products-table .product-name .lyfh-zone {
		position: absolute;
		left: 0;
		bottom: 16px;
		margin: 0;
	}
}