/* ==========================================================================
   商品單頁 —— 淘寶式雙欄
   ==========================================================================
   規格來源（都是實測值，不是目測）：
     agents/T1-TAOBAO-REFERENCE.md   淘寶線上量測
     agents/T1-CURRENT-LAYOUT.md     本站現況量測 + Blocksy 2.1.56 原始碼
     design/product-single/*.dc.html  設計稿（Main 1600 / Narrow 1280 / Mobile 390）

   ⚠️ 載入順序：子主題 style.css 排在 Blocksy 的 main.min.css /
   woocommerce.min.css **之前**（它以 parent-style 為相依），
   但這一支是在 wp_enqueue_scripts 優先序 20 掛的，排在 Blocksy bundle
   **之後** —— 所以蓋 Blocksy 的規則不需要 !important。
   需要 !important 的只有一種情況：要蓋掉 style.css 裡本身就帶
   !important 的那四條 .ct-media-container 規則。每一處都寫了理由。

   ⚠️ overscroll-behavior 全檔一次都沒有設，這是刻意的。
   右欄捲到底自動接力給頁面是瀏覽器原生行為，條件正是這個屬性維持預設
   auto；設成 contain 會直接把它關掉（T1-TAOBAO-REFERENCE.md 第二節）。

   所有規則收斂在 body.single-product.tz-product-layout 底下。
   .tz-product-layout 只在 is_product() 且 feature flag 開啟時加上，
   flag 關掉整支樣式表不會被 enqueue，也就完全不影響其他頁型。
   ========================================================================== */

body.single-product.tz-product-layout {
	/*
	 * 設計 token：沿用站上現值，沒有新增顏色。
	 *
	 * ⚠️ 2026-09-05 訂正：這兩個值原本是 #2872fa / #1559ed，
	 *    也就是把品牌藍直接拿來當文字色與按鈕底色 —— 那是批次 4 主色
	 *    無障礙修正之前的寫法，這支樣式表寫在那次修正的同一天，
	 *    沒有跟上。線上實測（1600 寬，商品 17975）：
	 *      .tz-product__anchor.is-active  #2872fa on #fafbfc = 4.16
	 *      .tz-product-cta__btn--cart     白字 on #2872fa     = 4.31
	 *      .tz-product-cta__btn--buy      #2872fa on 白       = 4.31
	 *    三項都沒到 16px 的 4.5 門檻。
	 *
	 *    站上既有的作法（corporate.css §1、contact-form.css、brand-color.php）
	 *    是：品牌藍 #2872fa 只留給裝飾，文字／連結／按鈕一律用 #1559ed
	 *    （白底 5.70:1）。這裡改成一致。
	 *      #1559ed on #fafbfc = 5.50   白字 on #1559ed = 5.70
	 *      hover 的 #0f3fb8 配白字 = 8.67
	 */
	--tz-p-primary:      #1559ed;
	--tz-p-primary-dark: #0f3fb8;
	--tz-p-text:         #3a4f66;
	--tz-p-heading:      #192a3d;
	--tz-p-muted:        #8fa1b3;
	--tz-p-line:         #e1e8ed;
	--tz-p-panel:        #f2f5f7;
	--tz-p-page:         #fafbfc;

	/* 版面：左 calc(60% - 48px) / 溝槽 48 / 右 40%，三者相加正好 100% */
	--tz-p-gap:          48px;

	/* 黏附偏移。--tz-header-h 由 product-single.js 依實際頁首高度覆寫
	   （含 admin bar），這裡的 128px 是桌機實測值，也是 JS 失效時的退路。 */
	--tz-header-h:       128px;
	--tz-p-breath:       12px;

	/* 主圖高度：不鎖比例，用固定高度 + object-fit: contain 完整顯示。
	   兩個值分別對應設計稿 Narrow(1280→470) 與 Main(1600→550)。 */
	--tz-main-img-h:     470px;

	/* 縮圖直排（淘寶：76 寬、與主圖間距 16） */
	--tz-thumb-w:        76px;
	--tz-thumb-gap:      16px;
}

/* --------------------------------------------------------------------------
   1. 雙欄容器
   --------------------------------------------------------------------------
   Blocksy 的規則（woocommerce.min.css，min-width:1000px）：
     .product-entry-wrapper:has(...) { display: flex }
     ... .woocommerce-product-gallery { width: var(--product-gallery-width, 50%) }
     ... .entry-summary { margin-inline-start: 40px; width: calc(100% - var(--product-gallery-width, 50%)) }
   相簿現在被包進 .tz-product__media，不再是 flex 子項，所以要把寬度
   還給包裝層、把相簿本身放成 100%。
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
	body.single-product.tz-product-layout .product-entry-wrapper {
		align-items: flex-start;
		gap: var(--tz-p-gap);
	}

	body.single-product.tz-product-layout .tz-product__media {
		flex: 0 0 calc(60% - var(--tz-p-gap));
		width: calc(60% - var(--tz-p-gap));
		min-width: 0;
	}

	body.single-product.tz-product-layout .tz-product__media .woocommerce-product-gallery {
		width: 100%;
	}

	body.single-product.tz-product-layout .product-entry-wrapper .entry-summary {
		flex: 0 0 40%;
		width: 40%;
		min-width: 0;
		/* Blocksy 用 margin 做欄距，這裡改由容器的 gap 負責 */
		margin-inline-start: 0;
	}

	/*
	 * 桌機的視覺順序＝左相簿、右購買面板，但 DOM 順序由 JS 改成
	 * 「購買面板在前、相簿在後」（product-single.js 的 placeSummary()）。
	 *
	 * 為什麼要動 DOM：長描述搬進左欄之後，左欄在 DOM 上排在 .summary
	 * 前面，於是整頁的閱讀順序變成「描述 → 相關商品 → 標題(H1) → 價格
	 * → 購買」。實測 17975：#main 裡的標題序列是
	 *   H2:描述 → H2:相關商品 → H2×3(相關商品名) → H1:商品名
	 * —— H1 落在最後一個，螢幕閱讀器要先聽完 8000px 的描述才聽到價格。
	 * 光靠 CSS order 只會改視覺、不會改朗讀與 Tab 順序（反而讓兩者更不
	 * 一致），所以這裡由 JS 真的搬 DOM，再用 order 把視覺擺回去。
	 *
	 * JS 沒跑時 DOM 仍是 [media, summary]，order 1/2 與 DOM 順序一致，
	 * 這兩條規則等於沒有作用 —— 不會有「JS 掛掉就左右顛倒」的風險。
	 */
	body.single-product.tz-product-layout .product-entry-wrapper .tz-product__media {
		order: 1;
	}

	body.single-product.tz-product-layout .product-entry-wrapper .entry-summary {
		order: 2;
	}
}

/* --------------------------------------------------------------------------
   2. 左欄 —— 相簿
   -------------------------------------------------------------------------- */

/* 主圖：不鎖 1:1，改固定高度 + contain。
   !important 是必要的 —— style.css 的
   `.woocommerce div.product .woocommerce-product-gallery .ct-media-container`
   本身就寫了 `aspect-ratio: 1/1 !important`，不加蓋不掉。

   ⚠️ 選擇器要兩條，因為 Blocksy 的相簿有**兩種**結構
   （2026-09-04 對線上原始 HTML 逐字確認）：
     單張圖（108 個已發布商品中有 85 個）
        .ct-product-gallery-container > figure.ct-media-container
        —— 沒有 .flexy-container、沒有 .flexy-item、沒有 .flexy-pills
     兩張以上
        .ct-product-gallery-container > .flexy-container … .flexy-item > figure.ct-media-container
   只寫 .flexy-item 會漏掉全站八成的商品。
   兩條都用「直接子選擇器」，才不會連 .flexy-pills 裡的縮圖一起改
   （縮圖是 li > span.ct-media-container，同樣帶 .ct-media-container）。 */
body.single-product.tz-product-layout .ct-product-gallery-container > .ct-media-container,
body.single-product.tz-product-layout .flexy-item > .ct-media-container {
	aspect-ratio: auto !important;
	height: var(--tz-main-img-h);
	background-color: #fff;
	border: 1px solid var(--tz-p-line);
	border-radius: 3px;
}

body.single-product.tz-product-layout .ct-product-gallery-container > .ct-media-container img,
body.single-product.tz-product-layout .flexy-item > .ct-media-container img {
	aspect-ratio: auto !important;
	height: 100% !important;
	width: 100% !important;
	object-fit: contain !important;
}

/* 縮圖：白底、細框，選中的用主色 */
body.single-product.tz-product-layout .woocommerce-product-gallery .flexy-pills .ct-media-container {
	background-color: #fff;
	border: 1px solid var(--tz-p-line);
	border-radius: 3px;
}

body.single-product.tz-product-layout .woocommerce-product-gallery .flexy-pills li {
	opacity: 1;
}

body.single-product.tz-product-layout .woocommerce-product-gallery .flexy-pills li.active .ct-media-container {
	border-color: var(--tz-p-primary);
	box-shadow: inset 0 0 0 1px var(--tz-p-primary);
}

/* -----------------------------------------------------------------
   縮圖直排（淘寶式：縮圖在最左邊，主圖右移讓位）
   -----------------------------------------------------------------
   Blocksy 自己有 [data-thumbs="left"] 的完整規則，但那要靠自訂器把
   gallery_style 設成 vertical 才會在 global.css 產生 --thumbs-width，
   單純用 filter 改 theme_mod 不會重新產生 global.css，calc() 會失效。
   所以這裡不動 Blocksy 的設定，自己寫一份等效規則。

   ⚠️ 這一段是本檔最沒有實機驗證的部分。若縮圖排版出問題，
   刪掉這整個 @media 區塊即可退回 Blocksy 原本的「縮圖橫排在下方」，
   其餘版面不受影響。
   ----------------------------------------------------------------- */
@media (min-width: 1025px) {
	body.single-product.tz-product-layout .woocommerce-product-gallery .flexy-container {
		position: relative;
	}

	/* :has() 是必要的：單張圖的商品根本沒有 .flexy-pills，
	   那種情況主圖不該被推開。Blocksy 自己的 woocommerce.min.css
	   也用 :has()，瀏覽器支援度沒有疑慮。 */
	body.single-product.tz-product-layout .flexy-container:has(.flexy-pills) .flexy {
		margin-inline-start: calc(var(--tz-thumb-w) + var(--tz-thumb-gap));
	}

	body.single-product.tz-product-layout .woocommerce-product-gallery .flexy-pills {
		position: absolute;
		inset-inline-start: 0;
		inset-block: 0;
		width: var(--tz-thumb-w);
		overflow-y: auto;
		/* 縮圖多的時候（實測最多 9 張）改成可捲，不要撐破主圖高度。
		   捲軸隱藏，理由與右欄相同。 */
		scrollbar-width: none;
		-ms-overflow-style: none;

		/* Blocksy 的 flexy 用這幾個變數決定 pills 的排法 */
		--pills-direction: column;
		--pills-wrap: nowrap;
		--thumbs-width: 100%;
		--thumbs-spacing: 10px;
		--thumbs-left-spacing: 0;
		--thumbs-right-spacing: 0;
		--thumbs-container-margin: calc(var(--thumbs-spacing, 10px) * -1) 0 0 0;
	}

	body.single-product.tz-product-layout .woocommerce-product-gallery .flexy-pills::-webkit-scrollbar {
		display: none;
	}

	/* 縮圖鎖正方形（style.css 已經是 1/1 !important，這裡只補寬度） */
	body.single-product.tz-product-layout .woocommerce-product-gallery .flexy-pills li {
		width: 100%;
	}
}

@media (min-width: 1441px) {
	body.single-product.tz-product-layout {
		--tz-main-img-h: 550px;
	}
}

/* --------------------------------------------------------------------------
   3. 左欄 —— 黏頂錨點導覽
   --------------------------------------------------------------------------
   這不是 tab：所有區段都串在下面、全部留在 DOM 裡（SEO），
   點一下只是捲過去，高亮由 IntersectionObserver 更新。
   -------------------------------------------------------------------------- */

body.single-product.tz-product-layout .tz-product__anchors {
	position: sticky;
	top: var(--tz-header-h);
	z-index: 20;
	margin-top: 34px;
	display: flex;
	flex-direction: row;
	gap: 30px;
	padding: 14px 0 12px;
	background: var(--tz-p-page);
	border-bottom: 1px solid var(--tz-p-line);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	white-space: nowrap;
	/* 導覽項的觸控目標要 44px 高（見下），上緣的留白改由項目自己出，
	   nav 的總高維持 50px。 */
	padding-top: 6px;
}

body.single-product.tz-product-layout .tz-product__anchors::-webkit-scrollbar {
	display: none;
}

/*
 * ⚠️ hidden 屬性要自己收，瀏覽器預設的 `[hidden] { display: none }` 是
 *    UA 樣式表，權重輸給上面那條 `display: flex`。
 *    實測（390 寬、商品 17975）：JS 已經把 nav.hidden 設成 true，
 *    navHiddenAttr === true，但 computed display 仍是 flex ——
 *    導覽列照樣印出來，只剩一個「商品描述」項目。
 *    .tz-product-cta 同一個毛病：PHP 印的是 <div ... hidden>，
 *    在 JS 接手之前那張卡片會先閃一下。
 */
body.single-product.tz-product-layout .tz-product__anchors[hidden],
body.single-product.tz-product-layout .tz-product-cta[hidden] {
	display: none;
}

/*
 * 觸控目標 ≥ 44×44（WCAG 2.2 SC 2.5.8 / Apple HIG）。
 *
 * 2026-09-05 實測：原本只有 64×36（桌機）與 60×35（≤1024），
 * 兩個寬度都不到 44。文字本身不能再放大（放大會擠掉導覽列），
 * 所以改成 flex + min-height，把可點面積往上長，
 * nav 的 padding-top 相對縮成 6px，導覽列總高仍是 50px、
 * 文字的視覺位置一格都沒動（原本 14 + 0，現在 6 + 8）。
 */
body.single-product.tz-product-layout .tz-product__anchor {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 44px;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	color: var(--tz-p-text);
	text-decoration: none;
	padding-top: 8px;
	padding-bottom: 10px;
	margin-bottom: -13px;
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}

body.single-product.tz-product-layout .tz-product__anchor:hover,
body.single-product.tz-product-layout .tz-product__anchor:focus-visible {
	color: var(--tz-p-primary);
}

body.single-product.tz-product-layout .tz-product__anchor.is-active {
	font-weight: 700;
	color: var(--tz-p-primary);
	border-bottom-color: var(--tz-p-primary);
}

/* --------------------------------------------------------------------------
   4. 左欄 —— 長描述與相關商品
   -------------------------------------------------------------------------- */

body.single-product.tz-product-layout .tz-product__sections {
	padding-top: 30px;
}

/* 25918 那種「一張圖、短描述空、長描述空、也沒有相關商品」的極簡商品，
   這個容器會是空的 —— 不要留下 30px 的空白。 */
body.single-product.tz-product-layout .tz-product__sections:empty {
	display: none;
}

/* 錨點捲動的停靠位置：頁首 + 導覽列 + 一點呼吸。
   用 scroll-margin-top 讓瀏覽器自己算，JS 只要 scrollIntoView 就好。 */
body.single-product.tz-product-layout .tz-product__sections [id^="tab-"],
body.single-product.tz-product-layout .tz-product__related {
	scroll-margin-top: calc(var(--tz-header-h) + 62px);
}

/* 長描述現在住在左欄裡，不再是滿版區塊 */
body.single-product.tz-product-layout .tz-product__sections .woocommerce-tabs {
	width: 100%;
	margin: 0;
	padding: 0;
}

body.single-product.tz-product-layout .tz-product__sections .woocommerce-tabs > article > [id^="tab-"] {
	margin-bottom: 40px;
}

body.single-product.tz-product-layout .tz-product__sections .woocommerce-tabs h2 {
	font-size: 20px;
	line-height: 30px;
	font-weight: 700;
	color: var(--tz-p-heading);
	margin: 0 0 16px;
}

body.single-product.tz-product-layout .tz-product__sections img {
	max-width: 100%;
	height: auto;
}

/* 長描述裡常有寫死寬度的表格與 iframe，收進 726px 的欄位會撐破版面 */
body.single-product.tz-product-layout .tz-product__sections table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

body.single-product.tz-product-layout .tz-product__related {
	margin-top: 10px;
}

body.single-product.tz-product-layout .tz-product__related section.related,
body.single-product.tz-product-layout .tz-product__related section.up-sells {
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
}

/* 相關商品在左欄裡只有 726px 寬，4 欄會太擠，改 2 欄 */
@media (min-width: 1025px) {
	body.single-product.tz-product-layout .tz-product__related ul.products {
		--grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   5. 右欄 —— 黏頂購買面板
   --------------------------------------------------------------------------
   淘寶：.PurchasePanel { position:sticky; top:12px; height:calc(100vh - 12px) }
   我們的 top 要加上自訂 sticky 頁首的高度（128 + 12 = 140），
   高度扣掉上下留白（140 + 12 = 152）。

   ⚠️ 內捲直接做在 .entry-summary 本身，**不要**在裡面再包一層 div。
   Blocksy 的 global.css 用 `.entry-summary-items > .price` 這種直接子
   選擇器決定每一層的間距（實測 35px），中間多一層就整組失配，
   而且不會有任何錯誤訊息。理由詳見 inc/product-single-layout.php §4。
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
	body.single-product.tz-product-layout .product-entry-wrapper .entry-summary {
		position: sticky;
		top: calc(var(--tz-header-h) + var(--tz-p-breath));
		align-self: flex-start;
		/*
		 * ⚠️ 用 max-height，不要用 height。
		 *   height 會讓面板永遠撐成一整個視窗高：內容短的商品（沒有變體、
		 *   沒有短描述）右欄底下就掛著一大塊空白，而且當左欄比它更短時
		 *   （只有一張圖、沒有描述也沒有相關商品），整個 .product-entry-wrapper
		 *   會被這個空盒子撐高。
		 *   max-height 一樣能給 overflow-y:auto 一個上界，短的時候貼著內容收，
		 *   長的時候照樣封頂並在面板內捲。
		 */
		max-height: calc(100vh - var(--tz-header-h) - var(--tz-p-breath) * 2);
		overflow-y: auto;

		/* 使用者明確要求隱藏右欄捲軸 */
		scrollbar-width: none;
		-ms-overflow-style: none;

		/* overscroll-behavior 刻意不設 —— 見檔頭 */
	}

	body.single-product.tz-product-layout .product-entry-wrapper .entry-summary::-webkit-scrollbar {
		display: none;
	}

	/*
	 * 底部 CTA 卡片會蓋住面板最後一段內容，要讓位給它。
	 *
	 * ⚠️ 這裡原本寫 `padding-bottom: 132px`，那是錯的，而且錯了兩次
	 *    （先 100 後 132，往同一個錯方向走）。
	 *
	 *    padding 加在**內捲容器內部**只會撐大 scrollHeight。
	 *    面板本身的可視底緣沒有變 —— 它仍然延伸到 CTA 卡片底下。
	 *    只有在「內容夠長、真的能捲」時，捲到底才會因為那段 padding
	 *    而讓最後一個元素浮上來；一旦商品內容不夠長，
	 *    `scrollHeight === clientHeight`，容器根本捲不動，
	 *    底部內容就**永遠**壓在卡片下面，使用者完全沒有辦法看到。
	 *    實測 16 個取樣商品有 6 個中招，21611 最嚴重
	 *    （右欄 scrollHeight === clientHeight === 848，分類連結永遠看不到）。
	 *
	 * 正解是**把面板的高度縮短**，讓它的底緣停在卡片上方，
	 * 而不是在裡面塞 padding。
	 *
	 * --tz-cta-clearance = 卡片高 + 距底 24 + 呼吸 12。
	 * 卡片高度會隨字級與按鈕數量變，所以由 JS 量實際值寫回這個變數；
	 * 這裡的 118px 是 JS 還沒跑或失效時的退路（82 + 24 + 12）。
	 */
	body.single-product.tz-product-layout.tz-cta-ready .product-entry-wrapper .entry-summary {
		max-height: calc(
			100vh
			- var(--tz-header-h)
			- var(--tz-p-breath) * 2
			- var(--tz-cta-clearance, 118px)
		);
		padding-bottom: 16px;
	}
}

/* --------------------------------------------------------------------------
   6. 底部固定 CTA 卡片
   --------------------------------------------------------------------------
   淘寶是 position:fixed 的圓角卡片，寬度跟著右欄走（他們用 JS 同步一個
   CSS 變數）。我們一樣：JS 量到右欄實際位置後覆寫 --tz-cta-left /
   --tz-cta-width；下面的 calc 是 JS 還沒跑或失效時的退路，
   算法是「容器右緣 + 16，寬 = 40% 容器 + 32」。

   捲到頁尾時由 JS 加上 .is-tucked 收起，避免蓋住頁尾。
   -------------------------------------------------------------------------- */

body.single-product.tz-product-layout {
	--tz-container-w: min(1290px, 90vw);
	--tz-cta-clearance: 118px;   /* 卡片高 82 + 距底 24 + 呼吸 12，JS 會量實際值覆寫 */
	--tz-cta-width: calc(var(--tz-container-w) * .4 + 32px);
	--tz-cta-left: calc(50vw + var(--tz-container-w) * .1 - 16px);
}

body.single-product.tz-product-layout .tz-product-cta {
	position: fixed;
	bottom: 24px;
	left: var(--tz-cta-left);
	width: var(--tz-cta-width);
	z-index: 30;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 16px;
	background: rgba(255, 255, 255, .97);
	border: 1px solid var(--tz-p-line);
	border-radius: 8px;
	box-shadow: 0 12px 36px rgba(31, 31, 51, .12);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

/*
 * CTA 卡片顯示時，把右欄原生的「加入購物車」收起來。
 *
 * 兩顆一模一樣的按鈕同時出現在畫面上（一顆在面板裡、一顆在浮動卡片上）
 * 會讓人不知道該按哪一顆，實測截圖也確認原生按鈕會從卡片上緣露出一截。
 * 淘寶的做法就是面板內只留選項與數量，購買動作全部收在浮動卡片。
 *
 * 只藏按鈕本身，不動 form.cart —— 變體下拉與數量欄要留在面板裡。
 * 條件掛在 .tz-cta-ready 上：JS 沒跑起來就不會套用，原生按鈕照常顯示。
 * 捲到頁尾 CTA 收起（.tz-cta-tucked）時原生按鈕回來，不會出現沒得買的狀態。
 */
body.single-product.tz-product-layout.tz-cta-ready:not(.tz-cta-tucked)
	.product-entry-wrapper .entry-summary .single_add_to_cart_button {
	display: none;
}

body.single-product.tz-product-layout .tz-product-cta.is-tucked {
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	pointer-events: none;
}

body.single-product.tz-product-layout .tz-product-cta__btn {
	flex: 1 1 0;
	min-width: 0;
	height: 48px;
	padding: 0 12px;
	border-radius: 3px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	border: 1px solid var(--tz-p-primary);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

body.single-product.tz-product-layout .tz-product-cta__btn--cart {
	background: var(--tz-p-primary);
	color: #fff;
}

body.single-product.tz-product-layout .tz-product-cta__btn--cart:hover {
	background: var(--tz-p-primary-dark);
	border-color: var(--tz-p-primary-dark);
}

body.single-product.tz-product-layout .tz-product-cta__btn--buy {
	background: #fff;
	color: var(--tz-p-primary);
}

body.single-product.tz-product-layout .tz-product-cta__btn--buy:hover {
	background: #eef4ff;
}

body.single-product.tz-product-layout .tz-product-cta__btn[disabled],
body.single-product.tz-product-layout .tz-product-cta__btn.is-disabled {
	opacity: .45;
	cursor: not-allowed;
}

/* CTA 真的接上去（JS 找得到 form.cart 與加入購物車按鈕）之後，
   才把右欄裡那顆原本的按鈕收起來 —— 設計稿的購買動作只留在 CTA 卡片上。

   兩個保險，兩個都是「壞掉時要還買得到東西」：
     沒有 .tz-cta-ready  → JS 沒接上，原本那顆按鈕照常顯示
     有  .tz-cta-tucked  → CTA 因為捲到頁尾（或商品內容太短、頁尾一開始
                            就在視窗裡）收起來了，把原本那顆放回來 */
@media (min-width: 1025px) {
	body.single-product.tz-product-layout.tz-cta-ready:not(.tz-cta-tucked) .entry-summary .single_add_to_cart_button {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   6b. 浮動聯絡鈕（.tz-fab）不能壓在 CTA 卡片上
   --------------------------------------------------------------------------
   .tz-fab 是 `position: fixed; right: 5%; bottom: 5%`，跟 CTA 卡片
   （fixed; bottom: 24px，寬度對齊右欄）住在同一個角落。

   2026-09-05 實測（商品 17975，flag 開啟）：
     1600 → CTA right=1461、FAB left=1464，只差 **3px**
     1280 → **OVERLAP 56×46**（話筒整顆蓋在「直接結帳」上）
     1024 → **OVERLAP 56×46**
      390 → **OVERLAP 56×17**
   也就是 1600 以外的每一個寬度，浮動鈕都直接坐在 CTA 按鈕上面。

   修法是把 FAB 抬到卡片上方，而不是把卡片縮短 —— 卡片的寬度必須
   對齊右欄（淘寶的 --sku-foot-width 也是這樣同步的），縮它會走樣。
   --tz-cta-h 由 JS 量卡片實際高度寫入（字級／按鈕數／換行都會影響），
   這裡的預設值是量不到時的退路。
   CTA 收起（.tz-cta-tucked，捲到頁尾）時規則自動失效，FAB 回到原位。
   -------------------------------------------------------------------------- */

body.single-product.tz-product-layout.tz-cta-ready:not(.tz-cta-tucked) .tz-fab {
	bottom: calc(24px + var(--tz-cta-h, 82px) + 12px);
	transition: bottom .18s ease;
}

@media (prefers-reduced-motion: reduce) {
	body.single-product.tz-product-layout.tz-cta-ready:not(.tz-cta-tucked) .tz-fab {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   7. ≤1024px：單欄堆疊
   --------------------------------------------------------------------------
   ⚠️ 斷點是 1024.98 / 1025，**不是** Blocksy 原本的 999.98 / 1000。
   1000–1024 這一段照 Blocksy 的規則仍是雙欄，實測 1024 寬時右欄只剩
   369px（淘寶自己的購買面板 min-width 是 400px），變化型商品的下拉選單
   與數量欄擠在一起。2026-09-05 依實測改成這一段也走單欄堆疊。

   Blocksy 在 min-width:1000px 仍會套
   `.woocommerce-product-gallery { width: var(--product-gallery-width, 50%) }`，
   1000–1024 這一段的相簿會變成半寬，所以下面要明確寫回 100%。
   -------------------------------------------------------------------------- */

@media (max-width: 1024.98px) {
	body.single-product.tz-product-layout {
		--tz-main-img-h: clamp(280px, 72vw, 420px);
	}

	/* 1000–1024：蓋掉 Blocksy 的 50% 相簿寬。
	   ⚠️ 選擇器一定要帶 .product-entry-wrapper。Blocksy 那條是
	     .product-entry-wrapper:has(.woocommerce-product-gallery:not([data-gallery=top],[data-gallery=columns-top])) .woocommerce-product-gallery
	   —— :has() 取最具體引數的權重，整條算下來是 (0,4,0)。
	   少了 .product-entry-wrapper 我們只有 (0,3,1)，b 欄 3 < 4 就輸掉，
	   實測 1024 寬時相簿仍是 461px（922 的一半）。 */
	body.single-product.tz-product-layout .product-entry-wrapper .woocommerce-product-gallery {
		width: 100%;
	}

	/* ⚠️ 單純讓 Blocksy 退回 display:block 是**不夠的**。
	   左欄的 DOM 順序是「相簿 → 錨點導覽 → 長描述 → 相關商品」，
	   而 .summary（標題、價格、短描述、加入購物車）是它的兄弟節點，
	   排在後面 —— 直接堆疊的話，使用者要先捲過整段長描述才看得到價格。

	   解法：把包裝層設成 display:contents，讓相簿／導覽／內容區直接
	   變成 .product-entry-wrapper 的 flex 子項，再用 order 插進 .summary。
	   手機順序＝相簿 → 標題價格與購買 → 錨點導覽 → 長描述與相關商品
	   （design/product-single/Mobile.dc.html）。 */
	body.single-product.tz-product-layout .product-entry-wrapper {
		display: flex;
		flex-direction: column;
	}

	body.single-product.tz-product-layout .tz-product__media {
		display: contents;
	}

	body.single-product.tz-product-layout .woocommerce-product-gallery { order: 1; }
	body.single-product.tz-product-layout .entry-summary             { order: 2; }
	body.single-product.tz-product-layout .tz-product__anchors       { order: 3; }
	body.single-product.tz-product-layout .tz-product__sections      { order: 4; }

	body.single-product.tz-product-layout .product-entry-wrapper .entry-summary {
		position: static;
		height: auto;
		overflow: visible;
		margin-inline-start: 0;
		width: 100%;
	}

	body.single-product.tz-product-layout .tz-product__anchors {
		margin-top: 24px;
		gap: 24px;
		padding-inline: 0;
	}

	body.single-product.tz-product-layout .tz-product__anchor {
		font-size: 15px;
	}

	/* 手機：CTA 改成固定在視窗底部的橫條 */
	body.single-product.tz-product-layout .tz-product-cta {
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		gap: 10px;
		padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
		border: 0;
		border-top: 1px solid var(--tz-p-line);
		border-radius: 0;
		box-shadow: 0 -6px 20px rgba(31, 31, 51, .08);
	}

	/* 讓頁尾不要被固定橫條蓋住 */
	body.single-product.tz-product-layout.tz-cta-ready #main {
		padding-bottom: 88px;
	}

	/* 手機的 CTA 是貼底橫條（bottom:0），FAB 要再往上讓一段。 */
	body.single-product.tz-product-layout.tz-cta-ready:not(.tz-cta-tucked) .tz-fab {
		bottom: calc(var(--tz-cta-h, 77px) + 12px);
	}
}

/* --------------------------------------------------------------------------
   8. 觸控目標 —— 右欄的表單控制項
   --------------------------------------------------------------------------
   2026-09-05 在 390 寬實測商品 17975，右欄裡三個可操作元素都不到 44px：

     select（變化型商品的規格下拉）  343 × 40
     input.qty（數量）              100 × 40
     a.reset_variations（清除）      28 × 23

   都是 Blocksy / WooCommerce 的預設高度，不是這次版型造成的，但它們
   現在住在我們負責的購買面板裡，而且淘寶式版型把購買動作集中到浮動
   卡片之後，這幾個控制項就是右欄僅剩的互動點。門檻是 WCAG 2.2
   SC 2.5.8 的 44×44（分類連結那種行內文字連結有 inline 例外，不算）。

   規則收在 .tz-product-layout 底下，購物車／結帳頁不受影響。
   -------------------------------------------------------------------------- */

body.single-product.tz-product-layout .entry-summary .variations select,
body.single-product.tz-product-layout .entry-summary .quantity .qty {
	box-sizing: border-box;
	min-height: 44px;
}

body.single-product.tz-product-layout .entry-summary .reset_variations {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 44px;
	padding-inline: 8px;
}

/*
 * CTA 卡片收起（捲到頁尾，或商品內容太短、頁尾一開始就在視窗裡）之後，
 * 右欄原本那顆「加入購物車」會回來 —— 它是 Blocksy 的預設高度 40px。
 * 2026-09-05 實測 390 寬的 18437 與 25918 兩個商品都是這個狀態，
 * 量到 233×40，不到 44。
 */
body.single-product.tz-product-layout .entry-summary .single_add_to_cart_button {
	box-sizing: border-box;
	min-height: 44px;
}

/*
 * B9（2026-09-06）：相關商品在手機／平板顯示之後，卡片上那顆
 * 「加入購物車」也變成觸控目標了。它是 Blocksy 的預設 min-height:40px
 * ——實測 390 寬的 25371 / 17975 / 25918 都是 115×40，不到 44。
 *
 * 只在 ≤1024px 提高：桌機是滑鼠操作、沒有 44px 的門檻，
 * 而且桌機那一版（2 欄）已經驗收過，不要為了這件事去動它。
 * 這條規則收在 .tz-product__related 底下 ——
 * 商店頁與分類頁的同型按鈕（實測也是 40px）不受影響，那是既有狀況，
 * 屬於另一個範圍，不在 B9 裡順手改。
 */
@media (max-width: 1024px) {
	body.single-product.tz-product-layout .tz-product__related ul.products .button {
		box-sizing: border-box;
		min-height: 44px;
	}
}