/* =====================================================================
   共用元件
   ---------------------------------------------------------------------
   在解決什麼問題：
   同一頁上原本會出現 4 種卡片樣式、3 種區塊標題樣式 —— 商品說明是圓角白卡、
   相關文章是沒有邊框的裸區塊、評論又是另一種。內容其實沒問題，
   但每一塊看起來都像從不同網站抄來的，整體就會顯得亂。

   這支檔案只做一件事：把全站共用的 .box（117 處、20 幾個模板都在用）
   統一成同一個卡片元件。改一次，商品頁、會員中心、結帳、文章頁一起變整齊。

   為什麼獨立成一支檔案而不是加在 style.css 檔尾：
   style.css 已經 5,900 行，這種成模組的樣式塞進去以後找不到也不敢刪。
   獨立檔案的話，要整組退掉只要把 html_header.lbi 那一行 link 拿掉就好。

   載入順序在 style.css 之後，所以這裡的規則本來就會贏；
   只有對付既有的 !important 時才跟著用 !important。
   ===================================================================== */

:root {
    --en-brand:      #142f86;   /* 主色 */
    --en-brand-dk:   #0e2262;   /* 深：標題、hover */
    --en-brand-lt:   #2543a6;   /* 次要 */
    --en-accent:     #8f5314;   /* 強調：價格、優惠 */
    --en-ground:     #eff0f4;   /* 頁面底 */
    --en-surface:    #ffffff;   /* 卡片 */
    --en-line:       #d8dae0;   /* 邊框 */
    --en-line-soft:  #e7e8ed;   /* 內部分隔 */
    --en-text:       #222530;   /* 內文 */
    --en-text-mid:   #5f636e;   /* 次要文字 */
    --en-text-dim:   #6b6e76;   /* 弱化文字 */
    --en-radius:     10px;
    --en-gap:        18px;
}

/* ---------------------------------------------------------------
   卡片
   --------------------------------------------------------------- */

body .box {
    background: var(--en-surface);
    border: 1px solid var(--en-line);
    border-radius: var(--en-radius);
    padding: 0;
    margin: 0 0 var(--en-gap);
    box-shadow: 0 1px 2px rgba(20, 32, 70, 0.05);
    overflow: hidden;
}

/* 區塊標題：左邊一條主色細線 + 深青粗體，全站同一種 */
body .box > .hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: auto;
    min-height: 0;
    padding: 13px 18px;
    background: var(--en-surface);
    border-bottom: 1px solid var(--en-line-soft);
    border-radius: 0;
    box-shadow: none;
}
body .box > .hd h2,
body .box > .hd h3 {
    float: none;
    height: auto;
    margin: 0;
    padding: 0 0 0 10px;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 700;
    color: var(--en-brand-dk);
    border-left: 3px solid var(--en-brand);
}
body .box > .hd h2 a,
body .box > .hd h3 a { color: inherit; text-decoration: none; }
body .box > .hd h2 a:hover,
body .box > .hd h3 a:hover { color: var(--en-brand); }

body .box > .hd .extra {
    float: none;
    height: auto;
    padding: 0;
    line-height: 1.5;
    font-size: 13px;
    white-space: nowrap;
}
body .box > .hd .extra a { color: var(--en-brand); text-decoration: none; }
body .box > .hd .extra a:hover { text-decoration: underline; }

body .box > .bd {
    padding: 16px 18px;
    /*
     * 一定要 border-box。
     * 站上有些 .bd 自己寫了 width:100%（例如商品詳情的左圖右文），
     * 不是 border-box 的話「100% + 左右 padding」會比卡片寬 36px，
     * 又剛好被 .box 的 overflow:hidden 裁掉 —— 畫面上就是右邊的按鈕與文字被切一半。
     */
    box-sizing: border-box;
}
body .box > .bd > * { max-width: 100%; }

/* 標題是空的就不要留一條線 */
body .box > .hd:empty,
body .box > .hd:has(> h3:empty) { display: none; }

/* 分頁式區塊（has_tab_box）本來就自己處理標題，不要被上面的規則影響 */
body .has_tab_box .box { padding-top: 0; margin-top: 0; }
body .has_tab_box .box > .bd { padding: 16px 18px; }

/* ---------------------------------------------------------------
   頁面主標題
   --------------------------------------------------------------- */

body #main h1.page-title,
body .article h1,
body .product_details .pd-name {
    font-size: 24px;
    line-height: 1.45;
    font-weight: 700;
    color: var(--en-text);
    margin: 0 0 10px;
}

/* ---------------------------------------------------------------
   按鈕：主要（實心）／次要（外框）
   --------------------------------------------------------------- */

body .button,
body .button:visited,
body a.button,
body input[type="submit"].button {
    display: inline-block;
    padding: 11px 22px;
    border: 1px solid var(--en-brand);
    border-radius: 8px;
    background: var(--en-brand);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
body .button:hover,
body a.button:hover {
    background: var(--en-brand-dk);
    border-color: var(--en-brand-dk);
    color: #fff;
}
body .button span { background: none; padding: 0; }

/* 上面那條把圖示關掉了，但「留給圖示的位子」沒關掉 ——
   style.css 的 .bright_button .cart{padding-left:34px}（還有 .todo/.previous/.card/
   .lock/.next/.download/.bullhorn/.eye/.gift）特異性是 (0,2,0)，
   贏過 body .button span 的 (0,1,2)，所以 padding 一直留著。
   結果就是圖示不見、空位還在，按鈕文字被往右推 17px 看起來歪一邊
   （實測「加入送洗清單」文字中心比按鈕中心右偏 18.5px）。
   全站只有 .cart / .download / .bullhorn 三個 span 用到，且都已經沒有圖示，
   一併清掉不會有按鈕失去還看得見的圖示。 */
body .bright_button span[class] {
    padding-left: 0;
    padding-right: 0;
    margin-right: 0;
}

/* 手機版商品頁按鈕的左右 padding 也是為了圖示才做不對稱（左15右12 / 左12右10），
   圖示沒了就該對稱，否則文字還會再偏 1.5px。
   style.css 那兩條帶 !important，只能同樣用 !important 才蓋得過。 */
@media screen and (max-width: 460px) {
    body .product_details .actions .button,
    body .product_details .actions .bright_button {
        padding: 6px 12px !important;
    }
}
@media screen and (max-width: 360px) {
    body .product_details .actions .button,
    body .product_details .actions .bright_button {
        padding: 5px 10px !important;
    }
}

/* ---------------------------------------------------------------
   商品頁「收藏／LINE 分享／推薦賺獎金」：字太小
   ---------------------------------------------------------------
   兩個問題疊在一起：
   1. 三顆字級不一致 —— 「收藏」是 <button>，被 style.css 的
      「body, input, select, textarea, button, table, div{font-size:16px !important}」
      抓到變 16px；「推薦賺獎金」是 <a>，不在那串清單裡，停在 14px。
      手機（<=800px）則被 .goods-share-btn{font-size:13px !important} 一起壓到 13px，
      而且高度只有 40px，低於 CONTEXT.md 訂的可點目標 44×44。
   2. 中間那顆是 LINE 官方外掛的跨網域 iframe，裡面的字沒辦法用 CSS 改，
      只能整顆放大。它自己的尺寸是 50×20，卻被 style.css 強制拉成 height:36px，
      多出來的 16px 是空白 —— 直接縮放會連空白一起放大，還會撐破容器被裁掉
      （實測 scale(1.3) 就超出 44px 容器 1.4px）。
      所以先還原成 20px 貼齊內容，再放大，90×36 剛好落在 44px 按鈕裡。 */
body .goods-share-bar .goods-share-btn {
    font-size: 16px;
}

body .goods-share-bar .goods-share-line-wrap .line-it-button,
body .goods-share-bar .goods-share-line-wrap iframe {
    height: 20px !important;      /* 還原 LINE 自己的高度，不要留 16px 空白 */
    max-height: none !important;
    transform: scale(1.8);
    transform-origin: center center;
}

@media screen and (max-width: 800px) {
    body .goods-share-bar .goods-share-btn {
        height: 44px !important;
        min-height: 44px !important;
        font-size: 16px !important;
        padding: 0 8px !important;
    }
}

/* ---------------------------------------------------------------
   結帳步驟列（購物車／登入／送出訂單／付款）：手機上佔太高
   ---------------------------------------------------------------
   原本手機的寫法是 li{height:50px;width:63px} 搭配
   li:before{display:block;margin:0 18px 3px} —— 數字圓圈「疊在文字上方」，
   所以每一格是 73×60px 的方塊，光步驟列就吃掉 60px 高。
   改成數字與文字並排的一列，整列 60px → 36px。
   li 原本是 float:left，改 flex 後要把 float 關掉，否則 flex 版面會錯亂。
   360px 時「送出訂單」四個字在 13px 下會被壓縮，所以再降一級到 12px。 */
@media screen and (max-width: 800px) {
    body#page_flow .progress_bar {
        height: auto !important;
    }
    body#page_flow .progress_bar ol {
        display: flex !important;
        gap: 4px;
    }
    body#page_flow .progress_bar li {
        float: none !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 5px;
        flex: 1 1 0;
        min-width: 0;
        width: auto !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 4px !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        white-space: nowrap;
    }
    body#page_flow .progress_bar li:before {
        display: flex !important;
        align-items: center;
        justify-content: center;
        float: none !important;
        flex: 0 0 auto;
        height: 20px !important;
        width: 20px !important;
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1 !important;
        border-width: 2px !important;
    }
}

@media screen and (max-width: 360px) {
    body#page_flow .progress_bar li {
        font-size: 12px !important;
        gap: 3px;
    }
}

/* 次要動作：同尺寸、外框版，跟主要動作站在一起不會搶 */
body .button.dim_button,
body a.button.dim_button,
body .button.en-btn-ghost {
    background: transparent;
    color: var(--en-brand);
}
body .button.dim_button:hover,
body a.button.dim_button:hover,
body .button.en-btn-ghost:hover {
    background: var(--en-brand);
    color: #fff;
}

/* 鍵盤操作要看得見焦點 */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible {
    outline: 2px solid var(--en-brand);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------
   表單欄位
   --------------------------------------------------------------- */

body .form input[type="text"],
body .form input[type="password"],
body .form input[type="email"],
body .form input[type="tel"],
body .form select,
body .form textarea {
    padding: 9px 11px;
    border: 1px solid var(--en-line);
    border-radius: 7px;
    background: #fff;
    font-size: 15px;
    color: var(--en-text);
}
body .form input[type="text"]:focus,
body .form input[type="password"]:focus,
body .form input[type="email"]:focus,
body .form input[type="tel"]:focus,
body .form select:focus,
body .form textarea:focus {
    border-color: var(--en-brand);
    outline: none;
    box-shadow: 0 0 0 3px rgba(20, 47, 134, 0.15);
}

/* ---------------------------------------------------------------
   信任條：全站共用，放在會讓人猶豫的地方（商品頁、結帳、價目表）
   --------------------------------------------------------------- */

body .en-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    padding: 13px 18px;
    margin: 0 0 var(--en-gap);
    background: #e5e8f3;
    border: 1px solid #cfd5e7;
    border-radius: var(--en-radius);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--en-brand-dk);
}
body .en-trust span { display: flex; align-items: center; gap: 6px; }
body .en-trust b { font-weight: 700; }

/* ---------------------------------------------------------------
   手機
   --------------------------------------------------------------- */

@media (max-width: 800px) {
    body .box { border-radius: 8px; margin-bottom: 12px; }
    body .box > .hd { padding: 12px 14px; }
    body .box > .hd h2,
    body .box > .hd h3 { font-size: 15px; }
    body .box > .bd { padding: 14px; }
    body #main h1.page-title,
    body .article h1,
    body .product_details .pd-name { font-size: 20px; }
    /* 手機上按鈕要夠大，店裡跟客人都是單手操作 */
    body .button,
    body a.button { min-height: 44px; padding: 12px 20px; }
    body .en-trust { padding: 12px 14px; gap: 8px 16px; font-size: 13px; }
}

/* ---------------------------------------------------------------
   商品（服務）頁
   --------------------------------------------------------------- */

/* 分頁外掛會用 JS 塞 inline 的 padding-top / 負 margin-top 來讓頁籤列疊上去，
   卡片加了邊框之後那個負值會把邊框拉歪，所以這裡把 inline 值蓋掉。 */
body #goods_info .box[style] {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body #goods_info .tab_wrapper { margin-bottom: 10px; }
body #goods_info .tab_wrapper .tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
body #goods_info .tab_wrapper .tabs a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--en-line);
    border-radius: 8px;
    background: #fff;
    color: var(--en-text-mid);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
body #goods_info .tab_wrapper .tabs a.current {
    background: var(--en-brand);
    border-color: var(--en-brand);
    color: #fff;
}

/* 商品說明區塊：原本自己一套 16px 圓角與大陰影，收回共用卡片 */
body #goods_info .goods_desc.box {
    border-radius: var(--en-radius) !important;
    box-shadow: 0 1px 2px rgba(20, 32, 70, 0.05) !important;
    padding: 0 !important;
}
body #goods_info .goods_desc.box > .bd { padding: 18px !important; }

/* 注意事項：標題一直看得見，內容自己展開 */
body .goods_care_notice .care-notice-details { padding: 0; }
body .goods_care_notice summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    background: #fff8ec;
    border-bottom: 1px solid #f0e2cd;
}
body .goods_care_notice summary::-webkit-details-marker { display: none; }
body .goods_care_notice .care-notice-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--en-accent);
    padding-left: 10px;
    border-left: 3px solid var(--en-accent);
    line-height: 1.5;
}
body .goods_care_notice .care-notice-hint {
    font-size: 13px;
    color: var(--en-text-dim);
    white-space: nowrap;
}
body .goods_care_notice details[open] .care-notice-hint::after { content: '　▲'; }
body .goods_care_notice details:not([open]) .care-notice-hint::after { content: '　▼'; }
body .goods_care_notice .care-notice-body { padding: 16px 18px; font-size: 14.5px; line-height: 1.9; }
body .goods_care_notice .care-notice-body h4 {
    margin: 18px 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--en-brand-dk);
}
body .goods_care_notice .care-notice-body h4:first-child { margin-top: 0; }
body .goods_care_notice .care-notice-lead { color: var(--en-text-mid); }

@media (max-width: 800px) {
    body .goods_care_notice summary { padding: 13px 14px; }
    body .goods_care_notice .care-notice-body { padding: 14px; font-size: 14px; }
    body #goods_info .tab_wrapper .tabs a { padding: 9px 13px; font-size: 13.5px; }
}

/* ---------------------------------------------------------------
   次要按鈕：既有規則帶 !important，這裡要跟著用才壓得過去
   --------------------------------------------------------------- */

body .button.dim_button,
body a.button.dim_button,
body .btn-detail,
body .product_list .actions a.detail {
    background-image: none !important;
    background-color: transparent !important;
    border: 1px solid var(--en-brand) !important;
    color: var(--en-brand) !important;
    text-shadow: none !important;
}
body .button.dim_button:hover,
body a.button.dim_button:hover,
body .btn-detail:hover,
body .product_list .actions a.detail:hover {
    background-color: var(--en-brand) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------
   資料表格（訂單列表、購物車、帳戶明細）
   ---------------------------------------------------------------
   原本儲存格沒有下邊框，一列一列黏在一起，
   訂單多的時候眼睛要自己找行，很容易看錯列。
   --------------------------------------------------------------- */

body .data_table,
body .box table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}
body .data_table th,
body .box table th {
    padding: 11px 12px;
    background: #eef0f6;
    color: var(--en-brand-dk);
    font-size: 13.5px;
    font-weight: 700;
    text-align: left;
    border-bottom: 2px solid #dbdeea;
    white-space: nowrap;
}
body .data_table td,
body .box table td {
    padding: 12px;
    border-bottom: 1px solid var(--en-line-soft);
    font-size: 14px;
    line-height: 1.7;
    vertical-align: middle;
}
body .data_table tr:last-child td,
body .box table tr:last-child td { border-bottom: 0; }

/* 斑馬紋改得更淡 —— 有了行線之後就不需要靠底色分行了 */
body .data_table .even,
body .data_table tr.even { background-color: #f8f9fb !important; }
body .data_table .odd,
body .data_table tr.odd { background-color: #fff; }
body .data_table tr:hover td { background-color: #f2f4f9; }

/* 金額欄一律靠右、等寬數字，掃過去才對得齊 */
body .data_table td.price,
body .data_table td.subtotal,
body .data_table th.price {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
body .data_table td.price { color: var(--en-accent); font-weight: 700; }

/* 訂單編號用等寬字，比對單號時不會看錯 */
body .data_table td.order_id,
body .data_table td.order_sn {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------
   會員中心
   --------------------------------------------------------------- */

/* 會員中心手機版功能選單 —— **唯一來源**
   （user_clips.dwt / user_transaction.dwt 只留 HTML，不再各自寫 <style>）

   2026-08-26 重做。要解的三個問題：
   (a) 同一組選單的樣式散在 user_clips.dwt、user_transaction.dwt、
       以及沒被引用的 library/user_app_menu.lbi，三份還長得不一樣，
       客人在會員中心切換分頁時選單會變樣。
   (b) style.css 有 `body#page_user .app-menu-item{width:25%}`（特異性 1,1,1），
       改模板行內樣式蓋不過去。那邊已經拿掉版面相關的部分。
   (c) 外層 .app-user-menu 自己是張卡片（圓角＋陰影＋邊框），
       裡面再放卡片就變成卡片包卡片。這裡把外層改成純網格容器，
       只有每一格是卡片。

   版面採「圖示絕對定位在左、文字佔滿剩餘寬度」而不是 flex 並排：
   中文每個字之間都可以斷行，當文字是 flex 的匿名項目時無法用 CSS 指定
   flex-shrink，會被壓到只剩一個字寬、變成直排（實測發生過）。
   絕對定位就沒有這個問題，而且兩支模板都不必改 HTML。 */

.app-user-menu-wrapper { display: none; }   /* 桌機隱藏；手機由 style.css 的 media query 打開 */

body#page_user .app-user-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 0 var(--en-gap) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body#page_user .app-user-menu .app-menu-item {
    display: block;
    position: relative;
    width: auto;
    min-height: 60px;
    padding: 0 12px 0 60px;
    line-height: 60px;
    box-sizing: border-box;
    background: var(--en-surface);
    border: 1px solid var(--en-line);
    border-radius: var(--en-radius);
    box-shadow: 0 1px 2px rgba(20, 32, 70, 0.05);
    color: var(--en-text);
    font-size: 16px;          /* 舊版 12px，長輩看不清楚 */
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color .15s ease, border-color .15s ease;
}

body#page_user .app-user-menu .app-menu-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 38px;
    height: 38px;
    margin: 0;
    border-radius: 50%;
    background: #e6e9f2;      /* 舊瀏覽器（LINE 內建）沒有 color-mix 時的退路 */
    background: color-mix(in srgb, var(--en-brand) 10%, var(--en-surface));
    font-size: 18px;
    line-height: 38px;
    text-align: center;
}

body#page_user .app-user-menu .app-menu-item:hover,
body#page_user .app-user-menu .app-menu-item:active,
body#page_user .app-user-menu .app-menu-item.current {
    background: #e5e8f3;
    border-color: var(--en-brand);
    color: var(--en-brand-dk);
}

@media screen and (max-width: 360px) {
    body#page_user .app-user-menu { gap: 8px; }
    body#page_user .app-user-menu .app-menu-item {
        font-size: 15px;
        padding-left: 54px;
        min-height: 54px;
        line-height: 54px;
    }
    body#page_user .app-user-menu .app-menu-icon {
        left: 9px; width: 36px; height: 36px; line-height: 36px;
    }
}

/* 登入／註冊頁 */
body .login-wrapper { background: var(--en-ground) !important; }
body .auth-box {
    border: 1px solid var(--en-line) !important;
    border-radius: var(--en-radius) !important;
    box-shadow: 0 1px 2px rgba(20, 32, 70, 0.05) !important;
}
body .auth-promo-banner {
    border-color: #e2c79b !important;
    background: #fdf7ed !important;
    color: var(--en-accent) !important;
    border-radius: 8px !important;
}

/* ---------------------------------------------------------------
   結帳流程
   --------------------------------------------------------------- */

body .flow_wrapper .box .form h4,
body .user .box .form h4 { color: var(--en-brand-dk); }

/* 目前步驟要一眼看得出來 */
body .flow_step li.current,
body .step_wrapper li.current { color: var(--en-brand); font-weight: 700; }

/* ---------------------------------------------------------------
   文章頁
   --------------------------------------------------------------- */

body .article_content { font-size: 17px; line-height: 1.95; color: var(--en-text); }
body .article_content p { margin-bottom: 1.1em; }
body .article_content h2,
body .article_content h3 {
    margin: 1.6em 0 0.6em;
    padding-left: 10px;
    border-left: 3px solid var(--en-brand);
    font-size: 19px;
    font-weight: 700;
    color: var(--en-brand-dk);
    line-height: 1.5;
}
body .article_content img { max-width: 100%; height: auto; border-radius: 8px; }
/* 文章裡的表格在手機上要能自己捲，不要把整頁撐寬 */
body .article_content table { display: block; overflow-x: auto; max-width: 100%; }

@media (max-width: 800px) {
    body .data_table th,
    body .box table th { padding: 9px 8px; font-size: 12.5px; }
    body .data_table td,
    body .box table td { padding: 10px 8px; font-size: 13.5px; }
    body .article_content { font-size: 16px; }
    body .article_content h2,
    body .article_content h3 { font-size: 17px; }
}

/* ---------------------------------------------------------------
   狀態標籤
   ---------------------------------------------------------------
   原本訂單／付款／出貨狀態全部是灰底白字，只差在灰的深淺 ——
   最淺的那組白字對比只有 1.57:1，等於看不見，而且三種狀態長得一模一樣，
   客人根本分不出「已確認」跟「已取消」。
   改成語意三色：等待中（灰藍）、進行中（品牌青）、已終止（磚紅）。
   --------------------------------------------------------------- */

body .order_list .order_status em,
body .order_list .handler .status,
body .order_detail .status,
body .order_status em {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

/* 等待中 */
body .order_status_0,
body .pay_status_0,
body .shipping_status_0 { color: #fff !important; background-color: #52586a !important; }

/* 進行中／已完成 */
body .order_status_1,
body .order_status_5,
body .order_status_6,
body .pay_status_1,
body .pay_status_2,
body .shipping_status_1,
body .shipping_status_2,
body .shipping_status_3,
body .shipping_status_4,
body .shipping_status_5 { color: #fff !important; background-color: var(--en-brand) !important; }

/* 已取消／無效／退貨 */
body .order_status_2,
body .order_status_3,
body .order_status_4 { color: #fff !important; background-color: #9a3b23 !important; }

/* ---------------------------------------------------------------
   麵包屑
   ---------------------------------------------------------------
   原本用 opacity:0.5 讓它變淡 —— 那會把對比直接砍一半（2.85:1，過不了 AA）。
   要淡就用比較淺的顏色，不要用透明度。
   --------------------------------------------------------------- */

body .breadcrumbs { opacity: 1; color: var(--en-text-mid); font-size: 13px; }
body .breadcrumbs:hover { opacity: 1; }
body .breadcrumbs a { color: var(--en-text-mid); }
body .breadcrumbs a:hover { color: var(--en-brand); }

/* ---------------------------------------------------------------
   訂單列表的操作欄：「查看訂單」跟「取消／付款／確認收貨」一大一小
   ---------------------------------------------------------------
   實際問題：{$item.handler}（取消/付款/確認收貨，來自 lib_transaction.php
   跟 themes/drycleaner/plugins/user_orders.php）吃的是 .button 的
   base padding（11px 22px），而「查看訂單」被舊規則單獨蓋成 6px 14px ——
   兩顆擠在同一格，一大一小、頂端也對不齊。手機版更窄，「取消訂單」
   四個字在放大的框裡被迫換行，看起來像顆蛋，不像按鈕。

   改法：整格用 flex 控制，兩顆通通用同一套尺寸；桌機並排、手機直排
   滿版（順便補到全站 44px 可點目標的規範，這裡原本只有 30 出頭）。
   主／次動作不再靠尺寸分（那正是走樣的原因），改靠實心／外框分，
   取消再用既有的「已取消」磚紅提示一下是要終止訂單，跟純粹查看不同。
   --------------------------------------------------------------- */
body .user-order-table td.last.handler {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
}

/*
 * 這裡全部要 !important，不是圖方便，是這頁的 .button 頭上疊了三層
 * 舊的「通殺」規則，全部帶 !important，而且都比這裡先出現：
 *   input.button,.button,.product_list .actions a,.goodsItem .actions a
 *     → border-radius:50px、padding:8px 20px、margin:5px（取消訂單的圓角
 *       50px、跟查看訂單對不齊的間距就是它）
 *   .button,.button:visited,a.button,...,.product_list .actions a,...
 *     → background-color 硬套品牌色
 *   .dim_button,a.dim_button,...
 *     → background-color:#f1f2f6、color:#333
 * 不改那三條（它們也管著商品列表的按鈕，範圍太廣，動了風險太高），
 * 用更高特異度＋!important 在這裡單獨蓋掉，只影響訂單操作欄。
 */
body .user-order-table td.last.handler a.button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 18px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700;
    white-space: nowrap;
    box-sizing: border-box;
}

/* 次要：查看訂單／取消 —— 外框，不搶付款/確認收貨的視覺重量 */
body .user-order-table td.last.handler a.order_view_btn.button,
body .user-order-table td.last.handler a.button.dim_button {
    background: transparent !important;
    color: var(--en-brand) !important;
    border: 1px solid var(--en-line) !important;
}
body .user-order-table td.last.handler a.order_view_btn.button:hover,
body .user-order-table td.last.handler a.button.dim_button:hover {
    background: var(--en-ground) !important;
    border-color: var(--en-brand) !important;
}

/* 取消：語意上是要終止這筆訂單，跟「查看」用同一顏色會分不出輕重 ——
   借用上面「已取消」狀態同一個磚紅（不跟品牌色掛勾，不管哪個站的
   色相旋轉都不會動到它，主站跟示範站兩邊自然保持一致）。 */
body .user-order-table td.last.handler a.button[href*="act=cancel_order"] {
    color: #9a3b23 !important;
}
body .user-order-table td.last.handler a.button[href*="act=cancel_order"]:hover {
    background: #fbeeea !important;
    border-color: #9a3b23 !important;
}

/* 主要：付款／確認收貨 —— 這一列真正要你做的事，實心 */
body .user-order-table td.last.handler a.button:not(.dim_button):not(.order_view_btn) {
    background: var(--en-brand) !important;
    border: 1px solid var(--en-brand) !important;
    color: #fff !important;
}
body .user-order-table td.last.handler a.button:not(.dim_button):not(.order_view_btn):hover {
    background: var(--en-brand-dk) !important;
    border-color: var(--en-brand-dk) !important;
}

@media screen and (max-width: 767px) {
    body .user-order-table td.last.handler {
        flex-direction: column;
        align-items: stretch;
    }
    body .user-order-table td.last.handler a.button {
        width: 100% !important;
        min-height: 44px;   /* 手機可點目標，比照 docs/CONTEXT.md 3.3 規範 */
        font-size: 15px !important;
    }
}

/* 會員側欄的區塊標題（原本 #999，白底 2.85:1） */
body .user-side-nav .nav-header { color: var(--en-text-mid); }

/* 注意事項的「點此展開」提示：在米色底上 4.44，差一點 */
body .goods_care_notice .care-notice-hint { color: #5f636e; }

/* 會員頁殘留的淺灰文字（3.5:1 上下，過不了 AA） */
body .verify-hint { color: #5f636e !important; }
body .account-tabs a,
body .account-tabs .tab { color: var(--en-text-mid) !important; }
body .account-tabs a.current,
body .account-tabs .tab.current { color: var(--en-brand) !important; font-weight: 700; }

/* 登入頁的外框在 ~900px 寬會超出視窗 5px（自己的左右 padding 沒算進寬度） */
body .login-wrapper { box-sizing: border-box; max-width: 100%; }

/* ---------------------------------------------------------------
   文字段落的閱讀寬度
   ---------------------------------------------------------------
   容器寬度（1360 / 980）是給版面用的，不是給文字用的。
   實測站上的內文一行有 80～88 個中文字 —— 舒適範圍大約是 30～45 字，
   目前是兩倍。行太長時眼睛讀到行尾要往回找下一行開頭，很容易看錯行、
   看漏一段；而「注意事項」那類內容偏偏最不能被看漏。

   做法是只限制「文字元素本身」，不限制容器 ——
   這樣表格、圖片、按鈕列仍然可以用滿整個寬度，只有段落收窄。
   40em 在中文大約就是一行 40 個字。
   --------------------------------------------------------------- */

body .article_content > p,
body .article_content > ul,
body .article_content > ol,
body .article_content > blockquote,
body .article_content > h2,
body .article_content > h3,
body .article_content > h4,
body .faq-a > p,
body .faq-a > ul,
body .faq-a > ol,
body .care-notice-body > p,
body .care-notice-body > ul,
body .care-notice-body > ol,
body .care-notice-body > h4,
body .product_description > p,
body .product_description > ul,
body .product_description > ol,
body .pricelist-note {
    /* 這支站的既有樣式大量使用 !important，不跟著用會被壓過去 */
    max-width: 40em !important;
}

/* 表格、圖片、影片不受限制，該滿版就滿版 */
body .article_content > table,
body .article_content > figure,
body .article_content > img,
body .article_content > iframe,
body .faq-a > table,
body .care-notice-body > table,
body .product_description > table,
body .product_description > img {
    max-width: 100%;
}

/* 手機本來就窄，上限用不到，但字級小的時候 40em 反而會比螢幕寬，明確蓋掉 */
@media (max-width: 800px) {
    body .article_content > p,
    body .article_content > ul,
    body .article_content > ol,
    body .article_content > h2,
    body .article_content > h3,
    body .article_content > h4,
    body .faq-a > p,
    body .faq-a > ul,
    body .care-notice-body > p,
    body .care-notice-body > ul,
    body .care-notice-body > h4,
    body .product_description > p,
    body .product_description > ul,
    body .pricelist-note {
        max-width: 100%;
    }
}

/* ==================================================================
 * 手機底部導覽：送洗清單件數
 *
 * 手機版 #cart 被 display:none 藏掉，客人加了幾件完全沒有回饋。
 * 徽章掛在底部導覽的購物袋圖示上，件數從桌機那顆同步過來。
 * ================================================================== */
#mobile-nav .nav-icon {
    position: relative;
    display: inline-block;
}

#mobile-nav .mobile-cart-badge {
    position: absolute;
    top: -4px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #d93025;
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

#mobile-nav .mobile-cart-badge[hidden] {
    display: none;
}

/* ==================================================================
 * 漢堡鈕觸控目標
 *
 * 原本 40x40，低於行動裝置 44px 的最小可點範圍；
 * 手上拿著衣服單手滑手機時很容易按空。
 * ================================================================== */
@media screen and (max-width: 800px) {
    #header_bar .header-menu-group .header-menu-toggle,
    #header_bar .header-menu-group #mobile-menu-toggle {
        width: 44px !important;
        height: 44px !important;
    }
}

/* ==================================================================
 * 「衣服很多不會算」求助區塊
 *
 * 客人卡住的地方不是價格，是「我這堆到底算幾件、要選哪個品項」。
 * 與其讓他們在價目表上算到放棄，不如直接給一條「別算了，交給我們」的路。
 * 這正好也是店裡本來就在做的事：收件後才報價。
 * ================================================================== */
body .shop-help {
    margin: 22px 0;
    padding: 20px;
    border: 1px solid #d8ebe3;
    border-left: 4px solid #0d9f6e;
    border-radius: 10px;
    background: #f6faf8;
}

body .shop-help h2 {
    margin: 0 0 6px;
    font-size: 18px;
    line-height: 1.5;
    color: #1f2d3d;
}

body .shop-help p {
    margin: 0 0 14px;
    font-size: 14.5px;
    line-height: 1.9;
    color: #4d5b67;
}

body .shop-help .shop-help-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

body .shop-help .shop-help-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 48px;
    padding: 12px 26px;
    border-radius: 26px;
    background: #06c755;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
}

body .shop-help .shop-help-line:hover,
body .shop-help .shop-help-line:focus {
    color: #fff;
    text-decoration: none;
    filter: brightness(1.06);
}

body .shop-help .shop-help-alt {
    font-size: 14px;
    color: #142f86;
    text-decoration: underline;
}

@media screen and (max-width: 768px) {
    body .shop-help { padding: 16px; }
    body .shop-help h2 { font-size: 16.5px; }
    body .shop-help .shop-help-actions { flex-direction: column; align-items: stretch; }
    body .shop-help .shop-help-line { width: 100%; }
    body .shop-help .shop-help-alt { text-align: center; }
}

/* ==================================================================
 * 主選單裡的 LINE 預約
 *
 * 它跟旁邊那些分類不是同一種東西 —— 其他是「去看看」，這個是「開始下單」。
 * 長得一樣客人就會當成第八個分類滑過去。用 href 選中，
 * 不必動選單外掛輸出的 HTML。
 * ================================================================== */
#header_nav a[href*="lin.ee"],
#mobile-nav a[href*="lin.ee"] {
    color: #06c755 !important;
    font-weight: 700;
}

@media screen and (min-width: 801px) {
    /* background 也要 !important：style.css 那邊的 nav 連結背景本來就掛了
       !important，只寫 color 會變成白字配透明底＝整顆看不見 */
    #header_nav.header-nav-inline li > a[href*="lin.ee"] {
        margin-left: 4px;
        padding-left: 14px;
        padding-right: 14px;
        border-radius: 20px;
        background: #06c755 !important;
        color: #fff !important;
    }
    #header_nav.header-nav-inline li > a[href*="lin.ee"]:hover,
    #header_nav.header-nav-inline li > a[href*="lin.ee"]:focus {
        background: #05b34c !important;
        color: #fff !important;
    }
}

/* ==================================================================
 * 分類頁說明
 *
 * 分類頁原本只有一排商品縮圖，第一次來的客人不知道這一類怎麼收費、
 * 怎麼送、有什麼要注意。這塊就是把店員在櫃台會講的那幾句寫上去。
 * ================================================================== */
body .cat-intro {
    margin: 0 0 20px;
    padding: 16px 18px;
    border: 1px solid #d8ebe3;
    border-left: 4px solid #142f86;
    border-radius: 10px;
    background: #f6faf8;
    font-size: 15px;
    line-height: 1.9;
    color: #45535f;
}

body .cat-intro p {
    margin: 0 0 8px;
}

body .cat-intro p:last-child {
    margin-bottom: 0;
}

body .cat-intro strong {
    color: #0e2262;
}

@media screen and (max-width: 768px) {
    body .cat-intro {
        padding: 14px;
        font-size: 14.5px;
    }
}

/* ==================================================================
 * 桌機主選單：不准再被切掉
 *
 * 出了什麼事：
 * style.css 的 #header_nav > ul 是 flex-wrap:nowrap + overflow-x:auto
 * + justify-content:center。三個加在一起，只要項目總寬超過容器，
 * 內容會往「左右兩側」溢出 —— 置中的捲動容器，開頭那幾項會被推到
 * 捲軸起點的左邊，永遠捲不回來。首頁的 body 又是 overflow-x:hidden，
 * 於是「價目表」直接人間蒸發，右邊的 LINE 也被搜尋框壓掉一半。
 *
 * 選單加到 8 項之後就一定會踩到：18px 字 + 左右 14px padding，
 * 一個四字項目就要 100px，八項要 930px，但 logo 與搜尋框吃掉之後
 * 只剩 730px 左右。原本 7 項剛好卡在邊緣，所以之前沒被發現。
 *
 * 修法兩層：
 *   1. 字級與間距收一點，讓八項在一般桌機寬度放得下
 *   2. 真的放不下就換行（wrap），寧可變兩排也不要有項目消失
 * 第 2 點是保險 —— 以後不管誰再加一項、或標籤變長，都不會再切掉。
 * ================================================================== */
/*
 * 只有一組桌機規則，不分寬度 ——
 * .wrapper 的 max-width 是 1360px，螢幕再寬版面也不會變寬，
 * 選單能用的空間永遠是那 690px 上下。原本想在大螢幕放寬字級，
 * 結果 1920 反而換行：螢幕變寬、容器沒變寬，字卻變大了。
 */
@media screen and (min-width: 801px) {
    #header_nav.header-nav-inline {
        margin: 0 12px;
    }

    #header_nav.header-nav-inline > ul {
        flex-wrap: wrap;
        overflow-x: visible;
        row-gap: 2px;
    }

    #header_nav.header-nav-inline li > a {
        padding: 10px 6px !important;
        font-size: 15px !important;
    }
}

/* ==================================================================
 * 首頁註冊彈窗：兩顆按鈕
 *
 * 內文寫「用 LINE 約 30 秒完成」，按鈕卻只有「立即註冊」（跳去填表單）——
 * 講的跟給的不是同一條路。補上 LINE 那顆當主要動作，手機號碼註冊降為次要。
 * ================================================================== */
body .home-reg-promo .home-reg-promo__cta--line {
    background: #06c755 !important;
    color: #fff !important;
    border-color: #06c755 !important;
}

body .home-reg-promo .home-reg-promo__cta--alt {
    margin-top: 10px;
    background: transparent !important;
    color: #6b4a17 !important;
    border: 1px solid rgba(107, 74, 23, .45) !important;
    box-shadow: none !important;
    font-size: 15px !important;
}

body .home-reg-promo .home-reg-promo__cta--alt:hover,
body .home-reg-promo .home-reg-promo__cta--alt:focus {
    background: rgba(107, 74, 23, .08) !important;
    color: #6b4a17 !important;
}

/* 註冊彈窗：把重量從「棕色標語塊」移回真正要按的那顆按鈕。
   那塊棕底本來是放「$100」用的金額徽章（34px 白字 + 6px 硬陰影），
   改放標語之後份量還是最重，客人第一眼看到的是一段標語不是動作。
   降成柔和的底色標籤，讓 LINE 那顆變成畫面上最亮的東西。 */
body .home-reg-promo .home-reg-promo__panel .home-reg-promo__amount--text {
    background: rgba(178, 106, 30, .12) !important;
    color: #7a4510 !important;
    box-shadow: none !important;
    border: 1px solid rgba(178, 106, 30, .3) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 10px 18px !important;
}

body .home-reg-promo .home-reg-promo__panel .home-reg-promo__amount--text .home-reg-promo__amount-label {
    color: #9a5c15 !important;
    opacity: 1 !important;
}

/* ==================================================================
 * 商品頁手機版：懸浮購買鈕 → 底部購買列
 *
 * 原本是 position:fixed; left:15px; top:50% 的 65px 香檳金圓鈕，
 * 也就是「永遠貼在螢幕左緣正中央」。問題不是它醜，是它蓋住內文 ——
 * 商品說明每一行的前四五個字都被壓在圓鈕底下，讀不到。
 * 顏色 #C5A059 也跟全站的青綠主色沒有關係。
 *
 * 改成底部整條購買列：手機電商的標準做法，永遠看得到價格與按鈕，
 * 但不擋任何內容。位置疊在底部導覽（高 61px）正上方。
 * 標記完全不動，只換樣式 —— 原本整塊就是一個 <a>，整條都可以按。
 * ================================================================== */
@media screen and (max-width: 800px) {
    body .mobile-float-buy {
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 61px !important;          /* 剛好坐在底部導覽上方 */
        transform: none !important;
        z-index: 9998 !important;         /* 低於底部導覽的 9999 */
        padding: 8px 12px !important;
        background: rgba(255, 255, 255, .96) !important;
        border-top: 1px solid #e2e6ea !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .06) !important;
    }

    body .mobile-float-buy a {
        flex-direction: row !important;
        gap: 10px !important;
        width: 100% !important;
        height: 48px !important;
        border-radius: 10px !important;
        border: 0 !important;
        background-color: var(--en-brand) !important;
        box-shadow: none !important;
    }

    body .mobile-float-buy a:active {
        transform: scale(.99) !important;  /* 原本帶 translateY(-50%)，改位置後會跳一下 */
        background-color: var(--en-brand-dk) !important;
    }

    body .mobile-float-buy .mini-price {
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    body .mobile-float-buy .btn-text {
        font-size: 16px !important;
    }

    /* 多一條列就多吃 60px，最後一段內容不能被壓在下面 */
    body:has(.mobile-float-buy) {
        padding-bottom: 130px !important;
    }
}

/* ==================================================================
 * 數量加減鈕：手機上放大到可以按
 *
 * 原本 30x30，實測 32x32，低於行動裝置 44px 的最小可點範圍。
 * 這顆偏偏在購物車與商品頁 —— 客人要調數量的地方，
 * 按不準就會多加一件或直接放棄。桌機維持原尺寸，滑鼠不需要那麼大。
 * ================================================================== */
@media screen and (max-width: 800px) {
    body .quantity-selector button {
        width: 44px;
        height: 44px;
        line-height: 44px;
        font-size: 20px;
    }

    body .quantity-selector input[type="text"],
    body .quantity-selector .qty-input,
    body .quantity-selector #goods_number_input {
        height: 44px;
        min-width: 52px;
        font-size: 16px;   /* 低於 16px 時 iOS Safari 聚焦會自動放大整頁 */
        text-align: center;
    }
}

/* 購物車頁的加減鈕另外用了 id + 四層 class 的高特異性選擇器寫死 32px，
   上面那條 body .quantity-selector button 打不過它，這裡照它的層級再寫一次。 */
@media screen and (max-width: 800px) {
    body#page_flow .cart_produst_list .data_table tbody td.quantity .btn-minus,
    body#page_flow .cart_produst_list .data_table tbody td.quantity .btn-plus {
        width: 44px;
        height: 44px;
        line-height: 44px;
        font-size: 20px;
    }

    body#page_flow .cart_produst_list .data_table tbody td.quantity .qty-input {
        height: 44px;
        min-width: 52px;
        font-size: 16px;
    }
}

/* ==================================================================
 * 文章內容的強調語彙
 *
 * 在解決什麼問題：
 * 護理類文章目前只有一種強調方式 —— 把句子改成標題。
 * 實際看到的結果是一篇裡 7 個 h3、5 個 p，標題比內文還多，
 * 而且其中四個「標題」根本是整句話（最長 39 字）：
 *   「有內裡、有襯布的羊毛外套 → 乾洗。水洗會使各層材料以不同幅度收縮…」
 * 每一行都長出一條藍線，全部都在喊，反而看不出重點在哪。
 *
 * 所以這裡不是加裝飾，是補「標題以外的強調方式」：
 *   .a-key   一句話結論 —— 想讓人記住的那句
 *   .a-rule  判斷規則   —— 「什麼情況 → 怎麼做」
 *   .a-warn  注意       —— 不做會出事的
 *   .a-note  補充       —— 想知道細節的人才看，不看也不影響
 *
 * 標題就留給真正的段落標題，一篇 2～4 個就夠。
 * 同時掛在文章、商品說明、FAQ、洗滌說明上，四個地方寫法一致。
 * ================================================================== */

body .article_content .a-key,
body .product_description .a-key,
body .faq-a .a-key,
body .care-notice-body .a-key {
    margin: 1.4em 0;
    padding: 16px 18px;
    background: #f2f4f9;
    border: 1px solid #cfd5e7;
    border-left: 4px solid var(--en-brand);
    border-radius: 10px;
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.75;
    color: var(--en-brand-dk);
}

body .article_content .a-rule,
body .product_description .a-rule,
body .faq-a .a-rule,
body .care-notice-body .a-rule {
    margin: 0.5em 0;
    padding: 12px 14px 12px 16px;
    background: var(--en-surface);
    border: 1px solid var(--en-line);
    border-left: 3px solid var(--en-brand-lt);
    border-radius: 8px;
    font-size: 1em;
    line-height: 1.8;
    color: var(--en-text);
}

/* 規則列裡的箭頭前那段是條件，用粗體讓「條件 → 做法」一眼分得開 */
body .article_content .a-rule strong,
body .product_description .a-rule strong,
body .faq-a .a-rule strong,
body .care-notice-body .a-rule strong {
    color: var(--en-brand-dk);
}

body .article_content .a-warn,
body .product_description .a-warn,
body .faq-a .a-warn,
body .care-notice-body .a-warn {
    margin: 1.4em 0;
    padding: 14px 16px;
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-left: 4px solid #ea8c1a;
    border-radius: 10px;
    font-size: 1em;
    line-height: 1.8;
    color: #8a4b08;
}

/*
 * 補充說明：比內文小、比內文淡，但仍要讀得懂。
 * 原本站上這種灰字對比太低，在手機戶外幾乎看不見 ——
 * #6b6e76 對白底約 4.7:1，過得了 WCAG AA 的 4.5:1。
 */
body .article_content .a-note,
body .product_description .a-note,
body .faq-a .a-note,
body .care-notice-body .a-note {
    margin: 0.9em 0;
    padding-left: 14px;
    border-left: 2px solid var(--en-line);
    font-size: 0.92em;
    line-height: 1.85;
    color: var(--en-text-dim);
}

@media (max-width: 800px) {
    /*
     * 手機版字級要 !important：style.css 有一條
     *   .article_content, .article_content p, … { font-size:18px !important }
     * 把整個內容區的段落一律壓成 18px。不跟著用 !important 的話，
     * 「補充說明」會跟內文一樣大、「重點結論」也不會比較大 ——
     * 四種樣式的層次感在手機上整個消失，而手機正是主要的閱讀裝置。
     */
    body .article_content .a-key,
    body .product_description .a-key,
    body .faq-a .a-key,
    body .care-notice-body .a-key {
        padding: 13px 14px;
        font-size: 18px !important;
    }

    body .article_content .a-rule,
    body .product_description .a-rule,
    body .faq-a .a-rule,
    body .care-notice-body .a-rule { padding: 11px 12px; }

    body .article_content .a-warn,
    body .product_description .a-warn,
    body .faq-a .a-warn,
    body .care-notice-body .a-warn { padding: 12px 13px; }

    /* 補充說明本來就該小一階，這是它跟內文唯一的區別 */
    body .article_content .a-note,
    body .product_description .a-note,
    body .faq-a .a-note,
    body .care-notice-body .a-note {
        font-size: 15.5px !important;
    }
}

/* ==================================================================
 * 商品描述：標題與表格要跟內文對齊
 *
 * 在解決什麼問題：
 * 內文有 max-width 限制（約 560px，這是為了閱讀舒適，一行太長會跳行），
 * 但標題與表格沒有 —— 實測段落 560px、標題 1131px、表格 1131px，
 * 差了整整一倍。畫面上看起來就是「文字會自己斷行，標題跟表格不會」，
 * 整個內容欄是歪的，像沒排版完。
 *
 * 標題本來就屬於閱讀流，一定要跟內文同寬。
 * 表格也收進同一個寬度，欄位多的表格改成內部橫向捲動 ——
 * 寧可讓表格自己捲，也不要為了一張表把整欄拉寬。
 * ================================================================== */
/*
 * 這裡不能用 em ——「40em」是相對各元素自己的字級算的，
 * 實測 h3（20px）算出 800px、內文（14px）560px、表格（16px）640px，
 * 左邊對齊了寬度卻是三種，看起來還是歪的。
 * 用固定值讓整個內容欄真的對齊；560px 是既有內文寬度，維持不變。
 */
body .product_description > h1,
body .product_description > h2,
body .product_description > h3,
body .product_description > h4,
body .product_description > h5,
body .product_description > blockquote {
    max-width: 560px !important;
    box-sizing: border-box;
}

body .product_description > table {
    display: block;
    max-width: 560px !important;
    box-sizing: border-box;
    overflow-x: auto;
    /* iOS 慣性捲動，手指滑得動 */
    -webkit-overflow-scrolling: touch;
}

/*
 * 表格自己捲的時候欄位不要被壓扁成一個字一行。
 *
 * 本來是用 white-space:nowrap，但那是錯的工具：
 * 這站的表格儲存格裡放的是整句話（「織品專用殺菌除臭劑與防霉抗菌劑」），
 * nowrap 讓它們永遠不換行，一個儲存格就 323px，
 * 整張表被撐到要橫捲很久才看得完，而且完全沒有好處。
 * 改成給最小寬度：欄位不會被壓扁，但長句子照樣會換行。
 */
body .product_description > table th,
body .product_description > table td {
    min-width: 5em;
    word-break: break-word;
}

/* 手機本來就窄，上限用不到 */
@media (max-width: 800px) {
    body .product_description > h1,
    body .product_description > h2,
    body .product_description > h3,
    body .product_description > h4,
    body .product_description > h5,
    body .product_description > blockquote,
    body .product_description > table {
        max-width: 100% !important;
    }
}

/* ==================================================================
 * 商品卡片：標題放大
 *
 * 為什麼：客層年紀偏大，16px 的品名在手機上瞇著眼看很吃力，
 * 而品名正是他們要判斷「這個是不是我要的」的唯一依據 ——
 * 看不清楚就不會點，比價格標多大都重要。
 *
 * 顏色也一起加深：原本 #333 對白底 12.6:1 其實夠，
 * 但配上 16px 細字在戶外反光下還是糊；字大一點就清楚很多。
 *
 * 既有規則寫在 li.product-card 上且全帶 !important，這裡照同樣層級覆蓋。
 * ================================================================== */
li.product-card .product-name,
li.product-card .product-name a {
    font-size: 18px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
    color: var(--en-text) !important;
}

/* 手機一排兩張，格子窄，但這正是最需要看清楚的場合 */
@media (max-width: 768px) {
    li.product-card .product-name,
    li.product-card .product-name a {
        font-size: 17px !important;
        line-height: 1.5 !important;
    }
    /* 字放大後品名容易撐成三四行把卡片高度拉歪，限兩行、超出補刪節號 */
    li.product-card .product-name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ==================================================================
 * 商品描述：整欄用同一個閱讀寬度
 *
 * 在解決什麼問題：
 * 前面那組規則限制的是「直接子元素」（> p、> ul…），
 * 但商品描述的內容多半是從別處貼進來的，段落常常包在 <div> 或 <li> 裡，
 * 一包起來就逃出限制。實測同一頁 17 段裡：
 *   2 段是直接子元素 → 560px
 *   15 段包在 <li> 裡 → 720px
 * 同一篇文字忽寬忽窄，往下滑會看到左右邊界在跳 ——
 * 那不像設計，像壞掉。使用者形容成「有個框框」就是這個。
 *
 * 改成限制容器本身：不管內容包了幾層，整欄同寬。
 * 寬度用變數，要調就改這一個數字：
 *   600px ≈ 一行 43 字（窄，最好讀，長輩友善）
 *   680px ≈ 一行 48 字（目前值，介於現有兩種寬度之間）
 *   760px ≈ 一行 54 字（寬，資訊密度高但行尾容易看錯行）
 *   none  = 完全不限制（一行 91 字，不建議）
 * ================================================================== */
/*
 * 商品描述的閱讀寬度。
 *
 * 為什麼是 880 而不是更窄：
 * 純散文最好讀的行長大約 40～45 字，但商品描述不是散文 ——
 * 裡面有標題條、編號步驟、方框、表格，這些結構本身要寬度才排得開。
 * 而且描述卡片是 1310px（跟站上其他區塊一樣寬，不能只縮這一塊，
 * 會破壞整頁的節奏），文字只佔 52% 時那張卡看起來像沒做完。
 *
 * 880px 約一行 62 字：比不限制的 91 字好讀很多，
 * 又能把卡片填到 67%，左右留白看起來像刻意的邊距而不是空洞。
 *
 * 要調就改這一個數字：
 *   680px ≈ 48 字（最好讀，但卡片會空一半）
 *   880px ≈ 62 字（目前）
 *   1040px ≈ 74 字（幾乎填滿，行偏長）
 *   none  = 不限制（91 字，不建議）
 */
:root {
    --en-desc-measure: 880px;
}

/*
 * 這裡必須用 !important：
 * 上面卡片那組有一條 body .box > .bd > * { max-width:100% }，
 * 它有兩個 class（.box + .bd）特異性比 body .product_description 高，
 * 不加就永遠贏不過，容器限制等於沒寫。
 */
body .product_description {
    max-width: var(--en-desc-measure) !important;
    box-sizing: border-box;
    /*
     * 一定要置中。
     *
     * 只收窄文字、不管剩下的空間，結果是 1312px 的卡片裡文字靠左佔 680px，
     * 右邊空掉 612px —— 那不會被看成「刻意的閱讀寬度」，
     * 會被看成「這頁沒做完」。收窄是對的，但收窄之後要讓它看起來是決定，
     * 不是意外：置中之後左右留白對稱，就是常見的閱讀專欄版型。
     */
    margin-left: auto;
    margin-right: auto;
}

/*
 * 容器已經收窄了，裡面的元素就不需要各自再限制一次 ——
 * 留著只會讓巢狀與非巢狀的內容又變成兩種寬度。
 */
body .product_description > p,
body .product_description > ul,
body .product_description > ol,
body .product_description > h1,
body .product_description > h2,
body .product_description > h3,
body .product_description > h4,
body .product_description > h5,
body .product_description > blockquote,
body .product_description > table {
    max-width: 100% !important;
}

@media (max-width: 800px) {
    body .product_description { max-width: 100%; }
}


/* ============================================================
   麵包屑改放最上方工具列（2026-08-10）
   ============================================================
   原本麵包屑在 #main 裡自己佔一整排，商品頁看起來就多一條橫的東西；
   而最上面那條工具列（首頁／會員專區／留言板 ＋ 右邊會員狀態）
   中間一大片是空的。把麵包屑塞進那片空白，等於少掉一整排高度，
   商品內容可以直接從上面開始。

   排版要注意的：#top 原本是 float 排版（#top_nav 寫死 600px、
   #account_area 寫死 350px），那兩個寬度是為了「左右各據一邊」而定的，
   中間要放第三個元素就不能再靠 float，所以桌機改成 flex 並把
   float 與寫死的寬度一起解掉 —— 只加 flex 不解 float 會兩套排版打架。
   ============================================================ */

/* 首頁的麵包屑只有「首頁」兩個字，沒有任何資訊量，不必顯示 */
body#page_index #top .top-breadcrumbs { display: none; }

body #top .top-breadcrumbs {
    margin: 0;
    padding: 12px 0 8px;
    opacity: 1;
    font-size: 13px;
    line-height: 20px;
    color: var(--en-text-mid);
    /* 商品名可能很長，一律壓成一行，不要把工具列撐高 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
body #top .top-breadcrumbs a { color: var(--en-text-mid); }
body #top .top-breadcrumbs a:hover { color: var(--en-brand); }
body #top .top-breadcrumbs code {
    padding: 0 5px;
    opacity: 0.45;
    font-size: 12px;
}

@media screen and (min-width: 801px) {
    #top .wrapper {
        display: flex;
        align-items: center;
        gap: 18px;
    }
    /* DOM 順序是「會員區 → top_nav → 麵包屑」（會員區原本靠 float:right 排到右邊），
       改 flex 後 float 失效，要用 order 把會員區排回最右。
       這裡不能用 margin-left:auto —— 麵包屑有 flex-grow，剩餘空間會先被它吃掉，
       auto margin 拿不到空間就等於沒寫。 */
    #top #top_nav {
        float: none;
        width: auto;
        flex: 0 0 auto;
        order: 1;
    }
    /* #top_nav 原本是 float 建立 BFC 才撐得住裡面 float 的 li；
       解掉 float 後改用 flex 排 li，否則高度會塌成 0 */
    #top #top_nav > ul {
        display: flex;
        align-items: center;
    }
    #top #top_nav li { float: none; }
    #top #account_area {
        float: none;
        width: auto;
        flex: 0 0 auto;
        order: 3;
    }
    #top #account_area p { padding-right: 0; }
    #top .top-breadcrumbs {
        flex: 1 1 auto;      /* 吃掉中間剩下的空間 */
        order: 2;
    }
}

/* 手機：#top_nav 與會員區在這個寬度都已隱藏，整條工具列讓給麵包屑。
   壓成一行會被截掉，改成可橫向滑動，客人還是看得到完整層級。 */
@media screen and (max-width: 800px) {
    body #top .top-breadcrumbs {
        padding: 8px 0;
        overflow-x: auto;
        text-overflow: clip;
        -webkit-overflow-scrolling: touch;
    }
    body #top .top-breadcrumbs::-webkit-scrollbar { display: none; }
}


/* ==================================================================
 * 購物車按鈕文字垂直置中（2026-08-10）
 *
 * 實測「清空購物車」「更新購物車」：按鈕高 44px，但 line-height 只有 15px、
 * 上下各 8px padding —— 文字的行框只有 15px 高，貼在 padding 下緣，
 * 距離按鈕上緣 5px、下緣 19px，整整偏上 14px。看起來就是「字沒有在中間」。
 *
 * 「立即結算」不會歪，因為它是 line-height:48px = height:48px、padding 0，
 * 那才是正確做法。這裡把同一套規則套到另外兩顆。
 *
 * 不用 flex 置中是因為「更新購物車」是 <input type="submit">，
 * input 的內部文字不受 flex 影響；line-height = height 對 a 與 input 都有效。
 * ================================================================== */
body#page_flow a.button.text_button,
body#page_flow a.button.dim_button,
body#page_flow input.button.dim_button,
body#page_flow input[type="submit"].button,
body#page_flow input[type="button"].button {
    height: 44px !important;
    min-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 44px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    /*
     * letter-spacing（.button 是 0.2em）會在最後一個字後面也加一份，
     * 那一份是空的，置中時整串就被推左半格。
     *
     * 原本用 text-indent: 1.5px 補，但那招在寬度由內容決定時無效 ——
     * 盒子會連 indent 一起變寬，補償剛好被抵銷（實測仍偏左 1.5px）。
     * 改成把右內距扣掉那一份，墨水就真的落在中間（實測偏移 0.00px）。
     */
    text-indent: 0 !important;
    /* 要 !important —— style.css 有 `input.button, .button { padding: 8px 20px !important }`，
       簡寫的 !important 會蓋過這裡的長寫 */
    padding-right: calc(20px - 0.2em) !important;
}


/* 三顆主要按鈕改成同寬並置中。
   原本清空／更新是 l=32 r=353、立即結算是 l=27 r=348 —— 寬度都是 321，
   但左右留白不對稱（清空那兩顆整體右偏 5px），看起來就像不一樣大。
   統一往內縮 21px 再置中，三顆的左右邊就會對齊。 */
body#page_flow .cart_action a.button.text_button,
body#page_flow .cart_action input.button.dim_button,
body#page_flow a.button.text_button,
body#page_flow input.button.dim_button,
body#page_flow .flow_action a.next.button,
body#page_flow a.next.button {
    width: calc(100% - 21px) !important;
    max-width: calc(100% - 21px) !important;
    /*
     * 上面那條是給手機版（三顆全寬按鈕）寫的，但沒有包在 media query 裡。
     * 桌機版的 .cart_action 是 float:right、寬度由內容決定，再減 21px
     * 就會比文字還窄 —— 實測按鈕 112.5px、內距各 20px，內容區只剩 72.5px，
     * 而「清空購物車」含 0.2em 字距是 90px，溢出 19.5px。
     * <a> 是 nowrap 的區塊元素，行比容器寬時 text-align:center 完全失效，
     * 文字從左邊界往右溢出，看起來就是沒置中（實測偏右 17.5px）。
     *
     * min-width 讓按鈕永遠不會窄於自己的文字。手機版容器本來就夠寬，
     * 這條不會生效，全寬對齊的原意不受影響。
     */
    min-width: max-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* 加入購物袋成功的彈窗：把「立即結帳」放到正中間。
   原本容器雖然是 text-align:center，但裡面是「按鈕＋繼續瀏覽商品」兩個並排的
   行內元素，置中的是這兩個加起來的整體，所以按鈕本身會偏左（實測 240px 容器裡
   按鈕落在 85～197，中線在 141，容器中線是 188）。
   而且兩者靠基線對齊，60px 高的按鈕跟 19px 的文字看起來一高一低。
   改成上下排列各自置中，按鈕就會正在中間。 */
#cboxLoadedContent .message_box .action {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
#cboxLoadedContent .message_box .action > a {
    margin: 0 !important;
}

/* ---------------------------------------------------------------
   分頁式區塊的工具列（.tab_wrapper）—— 手機版整頁空白的真正原因
   ---------------------------------------------------------------
   style.css 的 .tab_wrapper 寫死 height:39px，裡面的 .tabs（左浮動）與
   .extra（右浮動、裝分頁器）都沒有被包住。
   桌機時分頁器塞得進 39px，看不出問題；
   手機寬度下 .extra 會撐到 337px 寬、85px 高，整個溢出到 wrapper 外面，
   而且浮動還沒結束就進到了下一個兄弟元素 #list.box。

   #list.box 有 overflow:hidden（見上面的卡片樣式）＝ 它是一個 BFC root，
   依規範 BFC root 不能和浮動重疊，只能「縮自己的寬度」去閃避 ——
   實測 355px 的容器被壓成 17.47px，裡面的商品格線剩 15.47px、
   每張商品卡 2.73px，客人看到的就是一片空白（高度其實有 1570px）。

   所以修的是浮動沒被包住，不是寬度。讓 wrapper 自己形成 BFC 包住浮動即可；
   再給 .box 補一道 clear:both 當保險，日後工具列再長高也不會重演。
   影響的頁面：品牌、分類、搜尋、兌換、會員資料、預約、收件地址（共 7 支 .lbi）。 */
body .has_tab_box .tab_wrapper {
    display: flow-root;   /* 包住內部浮動 */
    height: auto;         /* 覆蓋寫死的 39px，手機上工具列本來就會換行變高 */
    min-height: 39px;     /* 桌機維持原本的高度與底線位置 */
}

/* 舊版 LINE 內建瀏覽器若不支援 flow-root，這條 clearfix 一樣能包住浮動 */
body .has_tab_box .tab_wrapper::after {
    content: '';
    display: block;
    clear: both;
}

/* 保險：就算上方還有沒清乾淨的浮動，卡片也是往下掉，不會被壓成一條線 */
body .has_tab_box > .box {
    clear: both;
}

/* ============================================================
   手機可點目標放大（2026-08-14）

   依 docs/CONTEXT.md 3.3「可點目標最小 44×44」。
   用 375px 實際量測出來的、真的按不到的控制項，逐一放大到 44。
   量到的原尺寸寫在每一條旁邊，日後要驗證有沒有被別的規則蓋掉，
   直接在 devtools 量同一個元素即可。

   只在 767px 以下生效：桌機用滑鼠指標，這些尺寸本來就夠按，
   放大反而會撐壞既有版面。

   刻意「沒有」動的兩處（不是漏掉）：
   - #header_nav 主選單（17 個項目、每個 21px 高）
   - footer #links 的網站地圖連結（22 個）
   這兩處是密集的文字連結列表，硬撐到 44 會讓手機版選單變成五排、
   頁尾長一倍。它們正確的解法是改成漢堡選單或橫向捲動，屬於改版，
   不是這一輪的微調。
   ============================================================ */

@media (max-width: 767px) {

    /* 商品頁數量加減鈕：原本 22×30，是這次量到最難按的（而且按錯就是買錯數量） */
    body .quantity-selector .btn-plus,
    body .quantity-selector .btn-minus {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        line-height: 1;
    }

    /* 購物車裡的加減鈕。選擇器層級照 CONTEXT.md 記的那條寫，
       不然會被 style.css 裡的 !important 蓋掉 */
    body#page_flow .cart_produst_list .data_table tbody td.quantity .btn-plus,
    body#page_flow .cart_produst_list .data_table tbody td.quantity .btn-minus {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        line-height: 1;
    }

    /* 搜尋送出鈕：原本 32×32。表單是 id="search" 不是 name="search" */
    body form#search input[type="submit"] {
        min-width: 44px;
        min-height: 44px;
    }

    /* 頁尾的電話與地圖：原本 73×17 與 26×17。
       電話在手機上是直接撥號的連結，這兩個最不該小。
       「地圖」只有兩個字，寬度也要一起撐，不然只有高度夠 */
    body .footer-nap-line a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
        padding: 0 6px;
    }

    /* 麵包屑：原本 26×17。「首頁」同樣是兩個字，寬度要一起撐 */
    body .breadcrumbs a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
        padding: 0 4px;
    }

    /* 首頁區塊右上角的「更多」：原本 32×21 */
    body .extra a {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        min-height: 44px;
        min-width: 44px;
    }

    /* 價目表的跳段按鈕：原本 96×29 */
    body .pricelist-jump a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 價目表 86 個品名連結：原本只有 19px 高。
       改成撐滿整個儲存格，點哪裡都算 —— 這比把文字撐高好，
       表格不會因此變長，可點範圍卻大很多 */
    body .col-name a {
        display: block;
        min-height: 44px;
        padding: 12px 0;
        box-sizing: border-box;
    }

    /* 價目表下方的說明連結：原本 64×21 */
    body .pricelist-note a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 4px;
    }

    /* 商品頁上一個／下一個：原本 91×26 */
    body .pd-nav .pd-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 商品縮圖切換：原本 64×34 */
    body .gallery a.cloud_zoom_gallery {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 商品頁的洗衣需求勾選：原本 114×40，只差一點點。
       這裡刻意「只加 min-height」不改 display —— 改成 inline-flex 會讓
       既有的 padding 疊上來變成 58px，那是多出來的、沒必要的空隙 */
    body .checkbox label {
        min-height: 44px;
    }

    /* 商品卡的品名連結：原本 22px 高。
       卡片上方的圖片本來就是同一個連結、面積也夠大，所以這條不是「按不到」，
       是「用文字點的人不好按」。撐成兩行的高度，順便讓每張卡的品名區
       高度一致，長短名稱不會把下面的價格推得參差不齊 */
    body .product-name a {
        display: block;
        min-height: 44px;
        padding: 4px 0;
        box-sizing: border-box;
    }

    /* 商品卡上的「選購」「詳情」：原本 50×33。
       這兩顆在桌機是滑鼠移過去才出現，但手機沒有 hover，它們是一直看得到的，
       所以在手機上它們是真的按鈕，不是裝飾（第二輪複驗才發現，第一輪只量了首頁沒量到） */
    body .product-hover-actions a,
    body .product-hover-actions button {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 商品頁「新增標籤」的送出鈕：原本 71×30 */
    body #tag_form .dim_button {
        min-height: 44px;
    }

    /* 次要行動呼籲（「或線上填單預約」「我自己選好了，去送洗清單」）：原本 22px 高。
       它們是文字連結但擔的是按鈕的角色，客人真的會去點 */
    body .home-cta .home-cta__alt,
    body .shop-help-actions .shop-help-alt {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* =====================================================================
   案例文章元件（2026-08-23）
   ---------------------------------------------------------------------
   在解決什麼問題：

   案例文章目前是純文字加圖片，最短的只有 160 bytes，看起來像備忘錄不像
   案例。想做成有結構的版面（導言框、BEFORE/AFTER 對照、注意事項、小叮嚀），
   常見做法是叫 AI 產一堆行內 style=" " ——那條路不要走，理由三個：

     1. 每一篇都夾帶一份自己的設計。100 多篇就有 100 多套，改版要改 100 次。
     2. AI 每次產出的數值都不會完全一樣，篇跟篇之間會有微妙的不一致。
     3. 後台編輯器存檔時可能改寫或吃掉部分行內樣式，出來的結果不可預期。

   改成：設計只寫在這裡一次，文章只寫語意化的 class。
   好處是文章 HTML 短、篇篇一致、要改版改這一支就好。

   命名一律 aw-（article widget）開頭，避免跟站內既有的 class 撞名。
   所有規則都限定在 .article_content 底下，不會外溢到其他頁面。

   為什麼很多地方要寫 text-indent: 0：
   style.css:619 給 .article_content p 加了 text-indent: 2em（中文段落首行縮排）。
   那個規則在框框裡面會讓文字歪掉，所以每個元件內的 p 都要重置。
   ===================================================================== */

/* ---------------------------------------------------------------
   段落標題
   --------------------------------------------------------------- */

.article_content .aw-h2 {
    margin: 32px 0 16px;
    padding: 0 0 10px;
    border-bottom: 2px solid var(--en-brand);
    color: var(--en-brand-dk);
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    background: none;
    border-radius: 0;
}

.article_content .aw-h3 {
    margin: 22px 0 12px;
    padding: 0 0 0 12px;
    border-left: 4px solid var(--en-brand-lt);
    color: var(--en-brand-dk);
    font-size: 17px;
    font-weight: bold;
    line-height: 1.5;
}

/* ---------------------------------------------------------------
   導言／案例摘要
   一篇案例的開頭：客人遇到什麼事、我們怎麼處理。
   --------------------------------------------------------------- */

.article_content .aw-lead {
    margin: 0 0 24px;
    padding: 18px 20px;
    border-left: 5px solid var(--en-brand);
    border-radius: 0 var(--en-radius) var(--en-radius) 0;
    background: var(--en-ground);
    color: var(--en-text);
    font-size: 15px;
    line-height: 1.85;
}

.article_content .aw-lead > :first-child {
    margin-top: 0;
}

.article_content .aw-lead > :last-child {
    margin-bottom: 0;
}

.article_content .aw-lead p {
    margin: 0 0 10px;
    padding: 0;
    text-indent: 0;
}

.article_content .aw-lead-title {
    display: block;
    margin: 0 0 10px;
    color: var(--en-brand-dk);
    font-size: 16px;
    font-weight: bold;
}

/* ---------------------------------------------------------------
   三種提示框
     aw-note 一般說明（青）
     aw-warn 警告、千萬不要做的事（紅）
     aw-tip  小訣竅（黃）
   --------------------------------------------------------------- */

.article_content .aw-note,
.article_content .aw-warn,
.article_content .aw-tip {
    margin: 0 0 18px;
    padding: 15px 18px;
    border: 1px solid var(--en-line);
    border-left-width: 5px;
    border-radius: var(--en-radius);
    font-size: 15px;
    line-height: 1.8;
}

.article_content .aw-note p,
.article_content .aw-warn p,
.article_content .aw-tip p {
    margin: 0 0 8px;
    padding: 0;
    text-indent: 0;
}

.article_content .aw-note > :last-child,
.article_content .aw-warn > :last-child,
.article_content .aw-tip > :last-child {
    margin-bottom: 0;
}

.article_content .aw-note {
    border-color: #cfd4e4;
    border-left-color: var(--en-brand);
    background: #f2f4f9;
}

.article_content .aw-warn {
    border-color: #f0d2ce;
    border-left-color: #c0392b;
    background: #fdf4f3;
}

.article_content .aw-tip {
    border-color: #eddfbd;
    border-left-color: #b8860b;
    background: #fdf9ef;
}

.article_content .aw-note-title,
.article_content .aw-warn-title,
.article_content .aw-tip-title {
    display: block;
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: bold;
}

.article_content .aw-note-title { color: var(--en-brand-dk); }
.article_content .aw-warn-title { color: #a5271a; }
.article_content .aw-tip-title  { color: #8a6508; }

/* ---------------------------------------------------------------
   BEFORE / AFTER 對照
   兩張圖並排，窄螢幕自動改上下堆疊。
   角標的文字寫在 data-label，不用另外插 span。
   --------------------------------------------------------------- */

.article_content .aw-ba {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 0 10px;
}

.article_content .aw-ba figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--en-radius);
    background: var(--en-ground);
}

.article_content .aw-ba img {
    display: block;
    width: 100%;
    height: auto;
}

/* 角標。用 ::before + data-label，文章 HTML 少寫一層 */
.article_content .aw-ba figure::before {
    content: attr(data-label);
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 5px 14px;
    border-radius: 6px;
    background: rgba(34, 37, 48, 0.82);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: .06em;
}

.article_content .aw-ba figure.is-after::before {
    background: rgba(21, 115, 71, 0.88);
}

/* 圖說：置中、小字，跟正文區隔開 */
.article_content .aw-cap {
    margin: 0 0 22px;
    padding: 0;
    color: var(--en-brand-dk);
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
    text-indent: 0;
}

/* ---------------------------------------------------------------
   編號步驟／要點
   --------------------------------------------------------------- */

.article_content .aw-steps {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    counter-reset: aw-step;
}

.article_content .aw-steps > li {
    position: relative;
    margin: 0 0 12px;
    padding: 14px 18px 14px 52px;
    border: 1px solid var(--en-line);
    border-radius: var(--en-radius);
    background: var(--en-surface);
    font-size: 15px;
    line-height: 1.8;
    list-style: none;
}

.article_content .aw-steps > li::before {
    counter-increment: aw-step;
    content: counter(aw-step);
    position: absolute;
    top: 14px;
    left: 14px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--en-brand);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 26px;
    text-align: center;
}

.article_content .aw-steps p {
    margin: 0;
    padding: 0;
    text-indent: 0;
}

.article_content .aw-steps strong {
    display: block;
    margin-bottom: 4px;
    color: var(--en-brand-dk);
}

/* ---------------------------------------------------------------
   行內強調
   --------------------------------------------------------------- */

/* 螢光筆。用漸層只塗下半部，比整段換底色乾淨 */
.article_content .aw-hl {
    padding: 0 2px;
    background: linear-gradient(transparent 58%, #ffe9a8 58%);
    font-weight: bold;
}

/* 小標籤，放在標題旁邊標示材質、品牌、處理方式 */
.article_content .aw-tag {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--en-ground);
    color: var(--en-brand-dk);
    font-size: 13px;
    font-weight: bold;
    line-height: 1.6;
}

/* ---------------------------------------------------------------
   手機
   --------------------------------------------------------------- */

@media (max-width: 560px) {
    .article_content .aw-ba {
        grid-template-columns: 1fr;
    }

    .article_content .aw-h2 {
        margin-top: 26px;
        font-size: 18px;
    }

    .article_content .aw-lead,
    .article_content .aw-note,
    .article_content .aw-warn,
    .article_content .aw-tip {
        padding: 14px 15px;
    }

    .article_content .aw-steps > li {
        padding: 12px 14px 12px 46px;
    }
}

/* ==================================================================
   分類頁的常見問題
   後台「商品分類 → 編輯 → 常見問答」填了才會出現。
   放在商品清單之後 —— 客人是先來看服務的，問答是輔助資訊。
   ================================================================== */
.cat-faq {
    margin: 32px 0 8px;
    padding: 20px 22px;
    background: #f7f8fa;
    border: 1px solid #dbdde3;
    border-radius: 12px;
}
.cat-faq__title {
    margin: 0 0 14px;
    font-size: 19px;
    color: #142f86;
}
.cat-faq__list {
    margin: 0;
}
.cat-faq__q {
    margin: 14px 0 4px;
    font-weight: 700;
    color: #222;
    line-height: 1.6;
}
.cat-faq__q:first-child {
    margin-top: 0;
}
.cat-faq__a {
    margin: 0;
    color: #555;
    line-height: 1.8;
}
@media screen and (max-width: 800px) {
    .cat-faq {
        margin: 24px 0 8px;
        padding: 16px 14px;
    }
    .cat-faq__title {
        font-size: 17px;
    }
}

/* =======================================
   頁首選單改成自己占一整排（2026-09-23）
   =======================================
   上面那段「螢幕變寬、容器沒變寬」的註解講的就是這個問題：
   #header_bar 是一列 flex，選單要跟語言切換、logo、搜尋、購物袋搶寬度，
   實測 1440 的視窗底下選單只分到 660px，
   但九個項目的文字加起來就要 621px、加上內距超過 900px ——
   所以才被迫改成 flex-wrap:wrap，結果就是選單疊成好幾列。

   量到的（本機 1440 視窗）：
     改之前  nav 寬 660，9 個項目排成 2 列
     線上長標籤版本更嚴重，排成 4 列以上

   改法：讓 #header_bar 可以換行，選單整個掉到第二排、占滿 1360px，
   這樣 nowrap 也放得下，不用再靠 wrap 遷就。
   其他元件（語言切換／logo／搜尋／購物袋）仍然留在第一排，順序不變。 */
@media screen and (min-width: 801px) {
    #header_bar {
        flex-wrap: wrap;
    }

    #header_nav.header-nav-inline {
        flex: 1 0 100%;
        order: 10;
        margin: 4px 0 0;
        /* style.css:2300 有 max-width:900px !important。
           flex-basis:100% 算出來是 1360，但會被這個上限砍回 900，
           選單就又放不下、被 overflow 切掉。量到的：nav 900 / 版心 1360。 */
        width: auto !important;
        max-width: none !important;
    }

    #header_nav.header-nav-inline > ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: center;
        row-gap: 0;
    }
}

/* =======================================
   鞋包特區跟分類頁同寬（2026-09-24）
   =======================================
   特區頁的 <body id="page_zone">，而 style.css:3455 起的兩份
   「頁首頁尾維持閱讀寬度」「商品列表主內容加寬」白名單列了 11 種頁面，
   唯獨沒有 page_zone —— 所以特區只拿到預設的 .wrapper { width: 980px }。

   量到的（1570px 視窗）：
     分類頁  版心 1360、卡片 314、商品圖 312×312
     特區    版心  980、卡片 231、商品圖 229×229
   字級、顏色、圓角、欄數、間距其實全部一樣，差別只在寬度，
   所以只補寬度與底色，其他不動。

   以後新增用 catalog-layout 的頁面，也要記得進這份名單。 */
body#page_zone {
    overflow-x: hidden;
    background-color: #eff0f4;
}

body#page_zone #top .wrapper,
body#page_zone #header .header-top .wrapper,
body#page_zone #footer .wrapper {
    max-width: var(--catalog-max-width);
    width: calc(100% - var(--catalog-gutter) * 2);
}

body#page_zone #main .wrapper.catalog-layout {
    max-width: var(--catalog-max-width);
    width: calc(100% - var(--catalog-gutter) * 2);
    box-sizing: border-box;
    padding-left: var(--catalog-gutter);
    padding-right: var(--catalog-gutter);
    background-color: #eff0f4;
}