/* 前台共用 UX 補丁(2026-11-05 內頁體檢起)
   由 Index/BaseController 在所有店面 HTML 頁尾載入(一頁式商店除外),<html data-oc-page="控制器-動作"> 同時設好。
   只放「所有主題內頁共通」的小修正;單一主題的配色問題請改該主題的皮膚或模板。改完記得 bump BaseController 裡的 ?v=。 */

/* 1. 手機輸入框字級:iOS Safari 在輸入框字級小於 16px 時,點進去會把整頁放大、送出後也不會縮回 */
@media (max-width: 767.98px) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"],
  input[type="search"], input[type="url"], input[type="date"], input:not([type]), select, textarea {
    font-size: 16px !important;
  }
  html .qty-picker input[type="number"], html .wg-quantity input { font-size: 16px !important; }   /* 購物車數量框自己有 !important 的 .95rem,要更高特異度才蓋得過 */
}

/* 2. 社群浮動鈕(手機):44px 一整排壓在畫面右側中央,會蓋住商品圖與表單輸入框的右半。
      一般頁面縮小;購物車/結帳/登入註冊/訂單查詢/會員中心這些要填資料的頁面直接收起來 */
@media (max-width: 767.98px) {
  .tf-social-icon { right: 8px !important; gap: 8px !important; }
  .tf-social-icon .box-icon { width: 36px !important; height: 36px !important; }
  html[data-oc-page="index-cart"] .tf-social-icon,
  html[data-oc-page="index-checkout"] .tf-social-icon,
  html[data-oc-page="index-live_checkout"] .tf-social-icon,
  html[data-oc-page="index-signin"] .tf-social-icon,
  html[data-oc-page="index-register"] .tf-social-icon,
  html[data-oc-page="index-resetpassword"] .tf-social-icon,
  html[data-oc-page="index-orderlookup"] .tf-social-icon,
  html[data-oc-page^="membercenter-"] .tf-social-icon,
  html[data-oc-page^="customer-"] .tf-social-icon { display: none !important; }
}

/* 3. 過淡的輔助文字:原本 #9ca3af~#d1d5db 壓在白底上對比只有 1.5~2.8,幾乎看不到 */
/*    用 :where() 把特異度壓到 0:有皮膚的主題自己指定了這些字色時(深色主題),以皮膚為準 */
:where(.cart-item-remove:not(:hover)) { color: #7b818c !important; }
:where(.cart-empty-desc, .mc-empty-hint, .we-hint) { color: #767b84 !important; }

/* 4. 文章頁/政策頁內文排版:主題的全站標題字級(h2 約 40px)直接套在編輯器內容上,內文卻只有 12~14px,閱讀比例失衡 */
html[data-oc-page="index-article"] .tf-main-area-page,
html[data-oc-page="index-policy"] .tf-main-area-page {
  max-width: 780px; margin-left: auto; margin-right: auto; font-size: 16px; line-height: 1.85; overflow-wrap: anywhere;
}
html[data-oc-page="index-article"] .tf-main-area-page :is(p, li, td, th, blockquote),
html[data-oc-page="index-policy"] .tf-main-area-page :is(p, li, td, th, blockquote) { font-size: 1em; line-height: 1.85; }
html[data-oc-page="index-article"] .tf-main-area-page p,
html[data-oc-page="index-policy"] .tf-main-area-page p { margin-bottom: 1em; }
html[data-oc-page="index-article"] .tf-main-area-page h1,
html[data-oc-page="index-policy"] .tf-main-area-page h1 { font-size: 30px; line-height: 1.35; margin: 1.4em 0 .6em; }
html[data-oc-page="index-article"] .tf-main-area-page h2,
html[data-oc-page="index-policy"] .tf-main-area-page h2 { font-size: 24px; line-height: 1.4; margin: 1.5em 0 .6em; }
html[data-oc-page="index-article"] .tf-main-area-page h3,
html[data-oc-page="index-policy"] .tf-main-area-page h3 { font-size: 20px; line-height: 1.45; margin: 1.4em 0 .5em; }
html[data-oc-page="index-article"] .tf-main-area-page :is(h4, h5, h6),
html[data-oc-page="index-policy"] .tf-main-area-page :is(h4, h5, h6) { font-size: 17px; line-height: 1.5; margin: 1.3em 0 .5em; }
html[data-oc-page="index-article"] .tf-main-area-page :is(ul, ol),
html[data-oc-page="index-policy"] .tf-main-area-page :is(ul, ol) { padding-left: 1.4em; margin-bottom: 1em; }
html[data-oc-page="index-article"] .tf-main-area-page ul > li,
html[data-oc-page="index-policy"] .tf-main-area-page ul > li { list-style: disc; }
html[data-oc-page="index-article"] .tf-main-area-page ol > li,
html[data-oc-page="index-policy"] .tf-main-area-page ol > li { list-style: decimal; }
html[data-oc-page="index-article"] .tf-main-area-page :is(img, video, iframe),
html[data-oc-page="index-policy"] .tf-main-area-page :is(img, video, iframe) { max-width: 100%; height: auto; }
html[data-oc-page="index-article"] .tf-main-area-page table,
html[data-oc-page="index-policy"] .tf-main-area-page table { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 767.98px) {
  html[data-oc-page="index-article"] .tf-main-area-page h1,
  html[data-oc-page="index-policy"] .tf-main-area-page h1 { font-size: 24px; }
  html[data-oc-page="index-article"] .tf-main-area-page h2,
  html[data-oc-page="index-policy"] .tf-main-area-page h2 { font-size: 21px; }
  html[data-oc-page="index-article"] .tf-main-area-page h3,
  html[data-oc-page="index-policy"] .tf-main-area-page h3 { font-size: 18px; }
}

/* 5. 分頁頁碼(手機):純文字頁碼只有一個數字寬,手指很難點準 → 至少 38px 見方的點擊範圍 */
@media (max-width: 767.98px) {
  .wg-pagination .pagination-link, .tf-pagination-list .pagination-link {
    min-width: 38px; min-height: 38px; display: inline-flex !important; align-items: center; justify-content: center;
  }
}

/* 6. 搜尋建議的「找不到相關商品」提示字過淡 */
:where(.sr-sug-empty) { color: #767b84 !important; }

/* 7. 會員中心「登出」與訂單查詢輸入框的字色過淡(同樣用 :where 讓皮膚優先) */
:where(.mc-nav-item-logout:not(:hover), .mc-nav-item-logout:not(:hover) span) { color: #767b84 !important; }
:where(.ol-field input) { color: #1f2328 !important; }

/* 8. 零星的淺灰/淺綠小字(壓在各主題帶色的底上對比只有 2.9~3.1):相關商品副標、搜尋無結果提示、「不限量供應中」 */
:where(.flat-title > p, .sr-empty-hint) { color: #6b7078 !important; }
:where(.flash-mini-text.fs-unlimited) { color: #1c8556 !important; }

/* 9. 文章/政策內文字色:主題把段落預設成 #868686 的淺灰,長篇閱讀吃力 → 跟著頁面正文色(編輯器裡另外上色的字不受影響) */
html[data-oc-page="index-article"] .tf-main-area-page :is(p, li),
html[data-oc-page="index-policy"] .tf-main-area-page :is(p, li) { color: inherit; }