/* ==========================================================================
   版面體檢 —— 批次 1
   來源：2026-09-04 四組全站掃描。計畫與驗收方式見 .agents/REPAIR-PLAN.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   A4　分類頁的 Blocksy 預設標題橫幅

   已改由 PHP 的 blocksy:hero:custom-source filter 從根本上不輸出
   （見 inc/layout-fixes.php 的說明）。原本這裡有一段 display:none 的
   CSS 退路，實測 filter 生效、hero 不再進 DOM 之後就刪掉了 ——
   用 CSS 藏起來只是看不見，兩個 <h1> 仍然在 DOM 裡，對 SEO 沒有好處。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   A1　購物車與結帳頁隱藏第三方浮動按鈕

   實測：Buttonizer 的浮動電話鈕固定在 x=315 / y=746 / 56×56 /
   z-index:99999；購物車「前往結帳」從 x=49 起、寬 291px（到 x=340）。
   水平重疊 25px —— 當按鈕剛好捲到 y 746–802 這一帶，
   右緣 8.6% 的面積點下去會變成撥電話。

   這兩頁的唯一目的就是讓客人按下去，不該有任何東西浮在上面。
   其他頁面照常顯示，那顆按鈕本身是有用的。

   用 visibility 而不是 display，是為了不觸發 Buttonizer 自己的
   重新定位邏輯（它會觀察容器尺寸）。pointer-events 才是關鍵：
   確保它不再吃掉點擊。
   -------------------------------------------------------------------------- */

body.tz-fix-checkout .buttonizer,
body.tz-fix-checkout .buttonizer-group,
body.tz-fix-checkout [class*="buttonizer-group"] {
	visibility: hidden !important;
	pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   B4　「特價」被「售罄」100% 遮住

   實測：兩個 span 的 getBoundingClientRect() 完全重合
   {x:170, y:702.078, w:55, h:28}，z-index 都是 1，
   elementFromPoint 回傳「售罄」。7 件商品 / 6 個分類頁。

   兩個標籤都是絕對定位在商品圖左上角。讓「售罄」留在原位
   （缺貨是更重要的資訊），把「特價」往下錯開一行。
   -------------------------------------------------------------------------- */

.tz-layout-fixes .product .onsale,
.tz-layout-fixes .product .out-of-stock-badge,
.tz-layout-fixes .product .ct-label-out-of-stock {
	z-index: 2;
}

/* 兩個同時存在時，把特價標籤往下推一行 */
.tz-layout-fixes .product:has(.out-of-stock-badge) .onsale,
.tz-layout-fixes .product:has(.ct-label-out-of-stock) .onsale {
	transform: translateY(36px);
}

/* --------------------------------------------------------------------------
   B2　寬表格在手機上被裁掉

   Blocksy 的 body{overflow-x:hidden} 會把超出的部分藏起來，
   而且不出現捲軸 —— 使用者沒有辦法看到。實測 30 頁中招，
   最嚴重是 819px 寬的表格塞在 390px 裡，右邊 52% 永遠看不到。

   JS 會把內容區裡「比容器寬」的 table 包進 .tz-scroll-x。
   純 CSS 做不到：<table> 自己設 overflow 不會建立捲動容器。
   -------------------------------------------------------------------------- */

.tz-scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}

/* 有東西可以往右捲時，右緣給一道漸層提示 */
.tz-scroll-x.is-scrollable {
	background:
		linear-gradient(to right, transparent 85%, rgba(23, 38, 58, .07) 100%);
	background-attachment: local;
}

.tz-scroll-x > table {
	min-width: max-content;
	margin-bottom: 0;
}

/* 捲軸在手機上做細一點，不要吃掉內容空間 */
@media (max-width: 767px) {
	.tz-scroll-x::-webkit-scrollbar {
		height: 4px;
	}
	.tz-scroll-x::-webkit-scrollbar-thumb {
		background: rgba(23, 38, 58, .25);
		border-radius: 2px;
	}
}

/* ==========================================================================
   B6　購物車的觸控目標太小（批次 5 的技術項）
   來源：.agents/SCAN-04-PAGES-CHECKOUT.md

   390 寬實測（購物車放一件商品）：
     a.remove              22×25px   —— 觸控目標下限是 44×44
     .quantity input.qty   80×38px、字級 **12.6px**

   字級才是真正的問題：iOS Safari 聚焦到 font-size < 16px 的欄位時
   會放大整個頁面，使用者得自己縮回去。這不是美觀問題。

   作用域同 A1，掛在 body.tz-fix-checkout 之下（購物車與結帳兩頁），
   不影響其他地方的數量欄。
   -------------------------------------------------------------------------- */

body.tz-fix-checkout .woocommerce a.remove,
body.tz-fix-checkout td.product-remove a.remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	line-height: 1;
	font-size: 20px;
}

body.tz-fix-checkout .quantity input.qty,
body.tz-fix-checkout input[type="number"].qty {
	min-height: 44px;
	/* 16px 是 iOS 不放大頁面的門檻，不能再小 */
	font-size: 16px;
}