/* ===========================================================================
   style-fontsize.css — 前台字級下限（第一階段）
   ---------------------------------------------------------------------------
   規範：前台文字最少 21px。盤點結果見專案根目錄的 `字級盤點.md`
   —— 全站 base 只有 15px，低於 21px 的宣告數以百計，一次全改等於改版。

   所以這支只做**第一階段：客人真的在「讀」的長文與品名**。
   這些是流式內文，放大只會變高、會自動換行，不會把版面撐破。

   為什麼獨立一支檔而不是加在 style.css / style-components.css：
   要退版時只要把 html_header.lbi 那行 <link> 拿掉就整批還原，
   不必從六千行裡挑出這次加了哪些。

   載入順序是**最後一支**（見 themes/drycleaner/library/html_header.lbi）。

   ⚠ 為什麼整支都用 !important（docs/CONTEXT.md 3.2 說不要無腦加，這裡不是無腦加）：
   實際用 devtools 逐條列出贏家後確認，擋在前面的規則本身就是 !important，
   而 !important 贏不贏跟特異性無關 —— 加多少個 body 前綴都沒用：

     - `style.css:2233`　`body, input, select, textarea, button, table, div
                          { font-size: 16px !important }`
       ← 這條把**每一個 div** 釘死在 16px，`.article_content`、`.cat-intro` 都是 div。
     - `style.css:2986`、`style.css:3214` 兩段 `@media (max-width:800px)` 又各自把
       `.article_content` / `.product_description` 釘在 `18px !important`。
     - `style.css:3243`　`.product_list .name a` 釘在 `16px !important`。

   同樣是 !important 時，比的是特異性與載入順序 —— 這支載入在最後，
   所以這裡的 !important 會贏。

   ⚠ 這一階段**刻意不碰**以下區塊（`字級盤點.md` §4-B 判定「放大就破版」）：
     - 手機底部固定導覽 `app_bottom_nav.lbi`（11px）：4～5 欄等分的功能性圖示標籤，
       放到 21px 必定換行或溢出。這類 icon label 建議直接排除在規範外。
     - 頂部導覽 `#header_nav`（14px）：`.wrapper` 最寬 1360px，選單可用空間永遠約 690px，
       字放大會換行或撐破 header（見 docs/CONTEXT.md 3.4）。
     - 結帳流程 `.checkout_wrapper`：flex 版面 ＋ LINE 內建瀏覽器地雷，
       **必須用 LINE in-app 實機測過才能動**，本機瀏覽器測不出來。
     - 價目表 `.pricelist-table` 的表格本體：多欄固定百分比寬，放大會撐出橫向捲動。
     - 迷你購物車 `#cart`、彈窗類（`order_popup`、`daily_fortune_modal`）：固定寬度小卡，
       字放大直接破框。
     - 按鈕內的文字：固定高度 ＋ line-height 綁死，要放大得連 padding 一起改。

   下一階段要動上面任何一項，都要先在 LINE 內建瀏覽器實機確認。
   =========================================================================== */


/* ---------------------------------------------------------------
   1. 文章內文
   ---------------------------------------------------------------
   line-height 一定要跟著寫。被蓋掉的那幾條原樣式用的是
   `line-height:1.9 !important` 與全域的 `1.6 !important`，
   只改 font-size 的話行高會留在舊值，21px 的字擠在窄行裡。 */

body .article_content,
body .article_content p,
body .article_content li,
body .article_content dd,
body .article_content dt,
body .article_content td,
body .article_content span,
body .article_content blockquote {
    font-size: 21px !important;
    line-height: 1.9 !important;
}

body .article_content h2,
body .article_content h3 {
    font-size: 24px !important;
    line-height: 1.5 !important;
}

body .article_content h4,
body .article_content h5 {
    font-size: 22px !important;
    line-height: 1.5 !important;
}

/* 文章內的表格本來就設成可以自己橫向捲（style-components.css:594），
   所以 td 一起放大不會把整頁撐寬 */


/* ---------------------------------------------------------------
   2. 商品描述
   --------------------------------------------------------------- */

body .product_description,
body .product_description p,
body .product_description li,
body .product_description td,
body .product_description span {
    font-size: 21px !important;
    line-height: 1.85 !important;
}

body .product_description h1 { font-size: 26px !important; line-height: 1.4 !important; }
body .product_description h2 { font-size: 24px !important; line-height: 1.45 !important; }

body .product_description h3,
body .product_description h4,
body .product_description h5 {
    font-size: 22px !important;
    line-height: 1.5 !important;
}


/* ---------------------------------------------------------------
   3. 洗滌注意事項
   --------------------------------------------------------------- */

body .goods_care_notice .care-notice-body,
body .goods_care_notice .care-notice-body p,
body .goods_care_notice .care-notice-body li {
    font-size: 21px !important;
    line-height: 1.9 !important;
}

body .goods_care_notice .care-notice-body h4 {
    font-size: 22px !important;
    line-height: 1.5 !important;
}

body .goods_care_notice .care-notice-title {
    font-size: 21px !important;
}


/* ---------------------------------------------------------------
   4. 分類頁說明（cat_desc）
   ---------------------------------------------------------------
   SEO 與新客判斷「這裡能不能洗我的東西」都靠這塊。 */

body .cat-intro,
body .cat-intro p,
body .cat-intro li {
    font-size: 21px !important;
    line-height: 1.9 !important;
}


/* ---------------------------------------------------------------
   5. 全站公告列
   --------------------------------------------------------------- */

body .shop_notice,
body .shop_notice p,
body .shop_notice a {
    font-size: 21px !important;
    line-height: 1.7 !important;
}


/* ---------------------------------------------------------------
   6. 商品名稱（列表卡片與商品頁標題）
   ---------------------------------------------------------------
   品名會自動換行，放大只是卡片變高。價格不動（多數已達標）。 */

body .product_list .name a,
body .goods_list .name a,
body .goodsItem .name a,
body .product-name,
body .product-name a,
body li.product-card .product-name,
body li.product-card .product-name a {
    font-size: 21px !important;
    line-height: 1.5 !important;
}

body .product_details h1 {
    font-size: 26px !important;
    line-height: 1.4 !important;
}


/* ---------------------------------------------------------------
   7. 價目表的「說明文字」（表格本體不動，理由見檔頭）
   --------------------------------------------------------------- */

body .pricelist-note,
body .pricelist-note p,
body .pricelist-note li {
    font-size: 21px !important;
    line-height: 1.8 !important;
}