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

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

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

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

:root {
    --en-brand:      #147486;   /* 主色 */
    --en-brand-dk:   #0e5462;   /* 深：標題、hover */
    --en-brand-lt:   #2593a6;   /* 次要 */
    --en-accent:     #8f5314;   /* 強調：價格、優惠 */
    --en-ground:     #eff4f4;   /* 頁面底 */
    --en-surface:    #ffffff;   /* 卡片 */
    --en-line:       #d8e0e0;   /* 邊框 */
    --en-line-soft:  #e7eded;   /* 內部分隔 */
    --en-text:       #22302f;   /* 內文 */
    --en-text-mid:   #5f6c6e;   /* 次要文字 */
    --en-text-dim:   #6b7676;   /* 弱化文字 */
    --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, 60, 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;
}

/* 標題是空的就不要留一條線 */
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; }

/* 次要動作：同尺寸、外框版，跟主要動作站在一起不會搶 */
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, 116, 134, 0.15);
}

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

body .en-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    padding: 13px 18px;
    margin: 0 0 var(--en-gap);
    background: #e5f0f3;
    border: 1px solid #cfe2e7;
    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, 60, 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: #eef5f6;
    color: var(--en-brand-dk);
    font-size: 13.5px;
    font-weight: 700;
    text-align: left;
    border-bottom: 2px solid #dbe8ea;
    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: #f8fbfb !important; }
body .data_table .odd,
body .data_table tr.odd { background-color: #fff; }
body .data_table tr:hover td { background-color: #f2f8f9; }

/* 金額欄一律靠右、等寬數字，掃過去才對得齊 */
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;
}

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

body .app-user-menu {
    border: 1px solid var(--en-line) !important;
    border-radius: var(--en-radius) !important;
    box-shadow: 0 1px 2px rgba(20, 60, 70, 0.05) !important;
}
body .app-user-menu .app-menu-item {
    color: var(--en-text);
    border-radius: 8px;
}
body .app-user-menu .app-menu-item:hover,
body .app-user-menu .app-menu-item.current {
    background: #e5f0f3;
    color: var(--en-brand-dk);
}

/* 登入／註冊頁 */
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, 60, 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: #52646a !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); }

/* ---------------------------------------------------------------
   訂單列表的「查看」鈕：既有規則寫死深灰 + !important
   --------------------------------------------------------------- */

body .user-order-table td.last.handler a.order_view_btn.button {
    background: transparent !important;
    color: var(--en-brand) !important;
    border: 1px solid var(--en-brand) !important;
    border-radius: 7px !important;
    padding: 6px 14px !important;
}
body .user-order-table td.last.handler a.order_view_btn.button:hover {
    background: var(--en-brand) !important;
    color: #fff !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: #5f6c6e; }

/* 會員頁殘留的淺灰文字（3.5:1 上下，過不了 AA） */
body .verify-hint { color: #5f6c6e !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; }