/*
 * 麥可全站配色（2026-09-26 店主提供的色系）
 *   主色（品牌深藍，跟 Logo 同一個藍） #20486d
 *   輔助背景（奶茶色）              #C9BEB8
 *   文字                            #222222
 *   高光點綴（圖示、標題底線、hover） #5CA8D6
 *   行動按鈕（預約收送、立即聯絡）    #43A047，hover #2D3E50
 *   強調（提醒、優惠、收送時間）      #FBC02D
 *
 * 分工：
 *   - 原本寫死在 style.css／style-components.css／各模板裡的橄欖綠與米黃暖灰，
 *     已經逐處換成上面的色（換色紀錄見 git 的這次 commit）。
 *   - 這支只放「換色換不到、要重新設計」的部分：首頁深藍主視覺、服務卡、
 *     註冊優惠彈窗、搜尋鈕、頁面提醒列。頁尾在 michael-footer-2026.css。
 * 由 themes/drycleaner/library/html_header.lbi 最後載入，所以規則會蓋過前面的檔。
 */
:root {
    --mk-primary: #20486d;
    --mk-primary-dk: #183a58;
    --mk-primary-mid: #3f6d93;
    --mk-primary-tint: #eaf0f6;
    --mk-milk: #c9beb8;
    --mk-milk-soft: #efeae7;
    --mk-milk-faint: #f7f5f4;
    --mk-text: #222222;
    --mk-text-mid: #4d4a48;
    --mk-sky: #5ca8d6;
    --mk-sky-dk: #2e7ab8;
    --mk-cta: #43a047;
    --mk-cta-hv: #2d3e50;
    --mk-yellow: #fbc02d;
    --mk-yellow-tint: #fff6d9;
}

/* ---------------------------------------------------------------
   首頁主視覺：深藍底、白色大字、亮色按鈕
   是一張真的 HTML 投影片（index_ad.lbi 第一張），不是圖：
   字在手機上不會糊，也不會像舊圖那樣被裁掉兩邊。
   --------------------------------------------------------------- */
body#page_index #index_banner .mk-hero-slide {
    height: auto;
}
body#page_index #index_banner .mk-hero {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;                   /* 輪播外框已經固定比例（style.css #index_banner），這張填滿就好 */
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(ellipse at 78% 30%, rgba(92, 168, 214, 0.22) 0%, rgba(92, 168, 214, 0) 55%),
        linear-gradient(135deg, #20486d 0%, #1c4163 55%, #183a58 100%);
    box-sizing: border-box;
}
/* 細細的布紋：兩組斜線疊出織物感，很淡，只是讓深藍不要太平 */
body#page_index #index_banner .mk-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 6px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 6px);
    pointer-events: none;
}
body#page_index #index_banner .mk-hero__art {
    position: absolute;
    right: 3%;
    top: 50%;
    width: min(42%, 620px);
    height: auto;
    transform: translateY(-50%);
    color: #5ca8d6;
    opacity: 0.55;
    pointer-events: none;
}
body#page_index #index_banner .mk-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
    padding: 0 clamp(24px, 7vw, 150px);
}
body#page_index #index_banner .mk-hero__eyebrow {
    margin: 0 0 14px;
    color: #fbc02d;
    font-size: clamp(12px, 0.95vw, 15px);
    font-weight: 700;
    letter-spacing: 0.22em;
}
body#page_index #index_banner .mk-hero__title {
    margin: 0;
    color: #fff;
    font-size: clamp(26px, 2.9vw, 50px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-wrap: balance;
}
body#page_index #index_banner .mk-hero__rule {
    display: block;
    width: 72px;
    height: 3px;
    margin: clamp(14px, 1.6vw, 24px) 0;
    border-radius: 2px;
    background: #fbc02d;
}
body#page_index #index_banner .mk-hero__sub {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(14px, 1.1vw, 18px);
    line-height: 1.7;
}
body#page_index #index_banner .mk-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(16px, 1.8vw, 28px);
}
/* style.css 把輪播裡的每個連結都設成 display:block＋100% 寬高（給整張圖可點用），這裡要蓋回來 */
body#page_index #index_banner .swiper-slide a.mk-hero__btn {
    display: inline-flex;
    width: auto;
    height: auto;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 26px;
    border-radius: 999px;
    border: 2px solid transparent;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body#page_index #index_banner .swiper-slide a.mk-hero__btn--cta {
    background: #43a047;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
body#page_index #index_banner .swiper-slide a.mk-hero__btn--cta:hover,
body#page_index #index_banner .swiper-slide a.mk-hero__btn--cta:focus-visible {
    background: #2d3e50;
    color: #fff;
}
body#page_index #index_banner .swiper-slide a.mk-hero__btn--ghost {
    border-color: rgba(255, 255, 255, 0.75);
    color: #fff;
}
body#page_index #index_banner .swiper-slide a.mk-hero__btn--ghost:hover,
body#page_index #index_banner .swiper-slide a.mk-hero__btn--ghost:focus-visible {
    border-color: #5ca8d6;
    background: rgba(92, 168, 214, 0.18);
    color: #fff;
}
body#page_index #index_banner .swiper-slide a.mk-hero__btn:focus-visible {
    outline: 3px solid #fbc02d;
    outline-offset: 2px;
}
/* 手機：跟手機版輪播圖同比例，字置中，衣架圖退到後面變淡 */
@media screen and (max-width: 800px) {
    body#page_index #index_banner .mk-hero {
        justify-content: center;
        text-align: center;
    }
    body#page_index #index_banner .mk-hero__inner {
        padding: 22px 18px;
    }
    body#page_index #index_banner .mk-hero__rule {
        margin-left: auto;
        margin-right: auto;
    }
    body#page_index #index_banner .mk-hero__actions {
        justify-content: center;
    }
    body#page_index #index_banner .mk-hero__art {
        right: -12%;
        width: 80%;
        opacity: 0.18;
    }
    body#page_index #index_banner .swiper-slide a.mk-hero__btn {
        min-height: 44px;
        padding: 0 20px;
        font-size: 15px;
    }
}
@media screen and (max-width: 420px) {
    body#page_index #index_banner .mk-hero__eyebrow { margin-bottom: 8px; letter-spacing: 0.14em; }
    body#page_index #index_banner .mk-hero__sub { font-size: 13px; }
}

/* ---------------------------------------------------------------
   服務卡（查詢我的衣服／預約收送／服務與價格）：淡灰白底，藍、綠圖示
   --------------------------------------------------------------- */
body .home-actions .home-action {
    background: #f7f8f9;
    border: 1px solid #e3e6ea;
    border-top: 3px solid var(--mk-primary);
}
body .home-actions .home-action:hover,
body .home-actions .home-action:focus-visible {
    background: #fff;
    border-color: var(--mk-sky);
    box-shadow: 0 6px 18px rgba(32, 72, 109, 0.12);
}
body .home-actions .home-action--query { border-top-color: var(--mk-sky); }
body .home-actions .home-action--book  { border-top-color: var(--mk-cta); }
body .home-actions .home-action--price { border-top-color: var(--mk-primary); }
body .home-actions .home-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 0;
}
body .home-actions .home-action-icon svg { width: 24px; height: 24px; }
body .home-actions .home-action--query .home-action-icon { background: #e4f1f9; color: var(--mk-sky-dk); }
body .home-actions .home-action--book .home-action-icon  { background: #e6f4e7; color: #2e7d32; }
body .home-actions .home-action--price .home-action-icon { background: var(--mk-primary-tint); color: var(--mk-primary); }
body .home-actions .home-action-text strong { color: var(--mk-text); }
body .home-actions .home-action-text small { color: var(--mk-text-mid); }

/* ---------------------------------------------------------------
   區塊標題：左邊主色線，標題字主色
   --------------------------------------------------------------- */
body .box > .hd,
body .box .hd h3 {
    color: var(--mk-primary);
}

/* ---------------------------------------------------------------
   頁首搜尋鈕：全站 input[type=submit] 是綠色行動按鈕，
   但搜尋不是「行動呼籲」，用主色藍，放大鏡圖示保留
   --------------------------------------------------------------- */
#search_bar input[type="submit"],
#search input[type="submit"] {
    background-color: var(--mk-primary) !important;
    /* 原本的 magnify_glass.png 是深灰色，放在藍底上看不見，改用白色線條放大鏡 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 16px 16px !important;
    opacity: 1;
}
#search_bar input[type="submit"]:hover,
#search input[type="submit"]:hover {
    background-color: var(--mk-primary-dk) !important;
}

/* ---------------------------------------------------------------
   頁面上方的店家提醒列（後台「商店公告」）：強調黃
   --------------------------------------------------------------- */
body .shop_notice.notice_box {
    background: var(--mk-yellow-tint);
    border: 1px solid #f5d77a;
    border-left: 4px solid var(--mk-yellow);
    color: var(--mk-text);
}

/* ---------------------------------------------------------------
   註冊優惠彈窗：優惠用強調黃；標題與金額用主色；按鈕用行動綠
   --------------------------------------------------------------- */
.home-reg-promo__panel {
    background: linear-gradient(165deg, #fff8dc 0%, #ffe89a 45%, #fbc02d 100%) !important;
    color: var(--mk-text) !important;
}
.home-reg-promo__title {
    color: var(--mk-primary) !important;
    text-shadow: none !important;
}
.home-reg-promo__amount {
    background: linear-gradient(180deg, #2a5a86 0%, #20486d 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 0 #183a58 !important;
}
.home-reg-promo__cta {
    background: var(--mk-cta) !important;
    box-shadow: 0 4px 12px rgba(67, 160, 71, 0.35) !important;
}
.home-reg-promo__cta:hover,
.home-reg-promo__cta:focus-visible {
    background: var(--mk-cta-hv) !important;
}
.home-reg-promo__notes,
.home-reg-promo__notes li {
    color: var(--mk-text-mid) !important;
}
.home-reg-promo__notes li:before {
    color: var(--mk-primary) !important;
}

/* 卡片陰影原本帶一點橄欖綠，換成主色藍的極淡陰影 */
body .box {
    box-shadow: 0 1px 2px rgba(32, 72, 109, 0.06);
}

/* 鍵盤焦點：高光藍外框 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--mk-sky);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------
   右邊懸浮的「留言板」：原本橄欖綠換成主色藍以後，飄到深藍頁尾上面會整顆消失，
   改成白底、主色藍字，淺色頁面與深藍頁尾上都看得到
   --------------------------------------------------------------- */
#floating-buttons a.float-msg {
    background-color: #fff;
    color: var(--mk-primary);
    border: 1px solid #d9e2ec;
    box-shadow: 0 3px 10px rgba(32, 72, 109, 0.28);
}
#floating-buttons a.float-msg:hover {
    background-color: var(--mk-primary-tint);
    color: var(--mk-primary-dk);
}


/* =====================================================================
   2026-09-26 視覺審查後的修正（六位審查員看了 30 頁 × 三種寬度的截圖）
   分三類：換色沒換到的、顏色用錯角色的、本來就壞掉但換色後更明顯的版面
   ===================================================================== */

/* 頁面底色：static/theme10/style.css 還是舊的米黃 #f2f0ea */
body { background-color: #f4f3f1; }

/* ---------- 首頁輪播 ---------- */
/* 箭頭與進度條原本是 Swiper 預設的 iOS 藍，不在色系裡 */
body#page_index #index_banner {
    --swiper-theme-color: #5ca8d6;
    --swiper-navigation-color: #fff;
}
body#page_index #index_banner .swiper-button-prev,
body#page_index #index_banner .swiper-button-next {
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));   /* 米白底的舊輪播圖上也看得到 */
}
body#page_index #index_banner .swiper-pagination-progressbar { background: rgba(255, 255, 255, 0.25); }
body#page_index #index_banner .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #5ca8d6; }
/* 標題底線照色系用高光藍（頁尾標題也是）；小標的強調黃保留當點綴 */
body#page_index #index_banner .mk-hero__rule { background: #5ca8d6; }
/* 801～1100 寬：桌機比例的輪播框只剩 250px 左右高，內容要縮一點才不會貼邊 */
@media screen and (min-width: 801px) and (max-width: 1100px) {
    body#page_index #index_banner .mk-hero__eyebrow { margin-bottom: 8px; }
    body#page_index #index_banner .mk-hero__title { font-size: 24px; }
    body#page_index #index_banner .mk-hero__rule { margin: 10px 0; }
    body#page_index #index_banner .mk-hero__sub { font-size: 13px; line-height: 1.55; }
    body#page_index #index_banner .mk-hero__actions { margin-top: 12px; }
    body#page_index #index_banner .swiper-slide a.mk-hero__btn { min-height: 40px; padding: 0 20px; font-size: 15px; }
}
/* 手機：後台的手機版輪播圖是 3:2，輪播框設定是 3:4，原本兩邊各被裁掉四分之一（標語被切掉）。
   改成整張放進去、上下補主色藍；要滿版的話，手機圖要重做成 3:4 */
@media screen and (max-width: 800px) {
    body#page_index #index_banner .swiper-slide:not(.mk-hero-slide) img {
        object-fit: contain;
        background: #20486d;
    }
}

/* ---------- 首頁影片區標題：跟熱門選項等區塊同一個樣式（模板已改成 .hd 結構） ---------- */
@media (max-width: 900px) {
    body .home-videos .home-videos-grid { padding: 12px 18px; scroll-padding-inline: 18px; }
}
@media (max-width: 640px) {
    body .home-videos .home-videos-grid { padding: 12px 14px; scroll-padding-inline: 14px; }
}

/* ---------- 排序頁籤（分類、搜尋、個人資料頁）：目前頁籤用主色 ---------- */
.tabs a { color: #4d4a48; }
.tabs a:hover { color: #20486d; }
.tabs a.current {
    color: #fff;
    background-color: #20486d !important;
    background-image: none !important;
    border-color: #20486d;
}

/* ---------- 商品卡 ---------- */
/* 圖片下緣的「加入清單／詳情」：加入是行動綠、詳情是白底主色字 */
.product-hover-actions .action-btn:first-child { background-color: #43a047; border-color: #43a047; color: #fff; font-size: 14px; }
.product-hover-actions .action-btn:first-child:hover { background-color: #2d3e50; border-color: #2d3e50; }
.product-hover-actions .action-btn + .action-btn { background-color: #fff; border-color: #fff; color: #20486d; font-size: 14px; }
/* 「特價」屬於優惠：強調黃、深色字 */
.product-badge { background-color: #fbc02d !important; color: #222 !important; }
/* 收藏愛心：原本是舊暖灰 */
.btn-collect-icon { color: #20486d; }
.btn-collect-icon:hover { color: #5ca8d6; }
/* 三種版型的品名、價格顏色統一：品名 #222、價格主色粗體 */
.goods-row-body h3,
.goods-row-body h3 a,
.goods-text-list a { color: #222; }
.goods-text-price { color: #20486d; font-weight: 700; }
.goods-row-actions > a { border-color: #20486d; color: #20486d; font-size: 14px; border-radius: 8px; }
.goods-row-actions > button { background: #43a047; border-color: #43a047; font-size: 14px; border-radius: 8px; }
.goods-row-actions > button:hover { background: #2d3e50; border-color: #2d3e50; }
/* 「清單」「純文字」版型被全站 .product_list li 的四欄卡片規則蓋掉（9/21 做版型時就這樣）：還原成橫列 */
.product_list .goods-row-list > li.goods-row,
.product_list .goods-text-list > li {
    width: auto !important;
    float: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #e8e3e0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    text-align: left !important;
    transform: none !important;
}
.product_list .goods-row-list > li.goods-row { display: grid !important; padding: 18px 0 !important; }
.product_list .goods-text-list > li { display: flex !important; padding: 13px 2px !important; }

/* ---------- 商品頁 ---------- */
/* 手機左邊的圓形購買鈕：原本是香檳金，這頁最主要的行動按鈕 → 行動綠 */
.mobile-float-buy a { background-color: #43a047 !important; }
.mobile-float-buy a:hover,
.mobile-float-buy a:active { background-color: #2d3e50 !important; }
.mobile-float-buy .mini-price { font-size: 12px !important; }
/* 會員價表格：價格原本 float:right 固定寬，平板寬度會掉到下一行、跟等級錯位 */
.price_list dd p.title,
.price_list dd p.item { display: flex; justify-content: space-between; gap: 8px; }
.price_list dd p .price { float: none !important; width: auto !important; flex: 0 0 auto; }
/* 商品說明裡的粗體字不要長成標題（原本跟 h2/h3 共用左邊線樣式） */
.product_description strong { border-left: 0 !important; padding-left: 0 !important; margin: 0 !important; font-size: inherit !important; color: #222 !important; }
/* 「下單」按鈕的字被一個已經不存在的購物車圖示擠偏 */
.bright_button .cart { padding-left: 0 !important; background: none !important; }

/* ---------- 次要按鈕不要吃到行動綠 ---------- */
input[type="submit"].dim_button,
input[type="button"].dim_button,
button.dim_button {
    background-color: #fff !important;
    background-image: none !important;
    color: #20486d !important;
    border: 1px solid #20486d !important;
    box-shadow: none !important;
}
/* 文章搜尋跟頁首搜尋一樣用主色（搜尋不是行動呼籲） */
#article_search input[type="submit"] { background-color: #20486d !important; }
#article_search input[type="submit"]:hover { background-color: #183a58 !important; }
.article_info { color: #6b6461 !important; }
/* 留言板「我要留言」：跟其他頁的膠囊按鈕同一種外型，手機至少 44px 高 */
.message-board-wrapper input.submit-btn { padding: 12px 40px !important; border-radius: 999px !important; min-height: 44px; }

/* ---------- 右邊懸浮鈕 ---------- */
#floating-buttons a.float-line { background-color: #06c755; }        /* 跟頁尾「官方 LINE」同一個 LINE 綠 */
#floating-buttons a.float-line:hover { background-color: #05a948; }
#floating-buttons a.float-top {
    background-color: #fff !important;
    color: #20486d !important;
    border: 1px solid #d9e2ec;
    box-shadow: 0 3px 10px rgba(32, 72, 109, 0.28);
}
#floating-buttons a.float-top:hover { background-color: #eaf0f6 !important; }
#floating-buttons .btn-icon svg { display: block; width: 24px; height: 24px; }
/* 捲到頁尾時懸浮鈕會蓋住門市地址和官方 LINE 鈕（801～1279 寬：平板、iPad 橫放、筆電 125% 縮放）：
   只讓門市那一塊讓位，三家的電話與官方 LINE 一律上下排，三欄才會一樣高。
   手機上門市文字很短碰不到懸浮鈕，只有置中的版權列會被壓到：左右對稱讓位，字維持置中 */
@media (min-width: 801px) and (max-width: 1279px) {
    #footer.michael-site-footer .mcf-info { padding-right: 76px; }
    #footer.michael-site-footer .mcf-store-actions { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 800px) {
    #footer.michael-site-footer .mcf-copyright { padding-left: 66px; padding-right: 66px; font-size: 14px !important; word-break: keep-all; }
}
/* 801～1279：三家門市的「官方 LINE」對齊在同一條線（地址換行的那家不會比較低） */
@media (min-width: 801px) and (max-width: 1279px) {
    #footer.michael-site-footer .mcf-stores > * { display: flex; flex-direction: column; }
    #footer.michael-site-footer .mcf-store-actions { margin-top: auto; }
}

/* ---------- 手機底部選單與會員中心的線條圖示（emoji 換成 SVG 後的尺寸與顏色） ---------- */
#mobile-nav a { color: #4d4a48; }
#mobile-nav a.active { color: #20486d; font-weight: 700; }
#mobile-nav .nav-icon { display: block; line-height: 0; margin-bottom: 3px; }
#mobile-nav .nav-icon svg { width: 24px; height: 24px; }
body .app-menu-icon { color: #20486d; line-height: 0; }
body .app-menu-icon svg { width: 28px; height: 28px; }
body .app-menu-item[href*="act=logout"] .app-menu-icon { color: #6b6461; }
body .mc-act .ico { display: flex; align-items: center; justify-content: center; color: #20486d; line-height: 1; }
body .mc-act .ico svg { width: 24px; height: 24px; }
body .mc-act .ico.mc-ico-line { color: #06c755; }

/* ---------- 會員中心 ---------- */
/* 側欄目前項：原本是 Google 藍圖示＋被蓋回黑色的字 */
#user_nav.user-side-nav li.current a,
.user-side-nav li.current a { color: #20486d !important; background-color: #eef3f8 !important; opacity: 1; }
/* 頁籤（資金管理、紅包、收藏…）統一成同一種 */
body .account-tabs { display: flex; background: #f7f5f4; border-bottom: 1px solid #e8e3e0; }
body .account-tabs a { flex: 1; text-align: center; padding: 14px 0; font-size: 15px; color: #4d4a48; text-decoration: none; font-weight: 500; border-bottom: 3px solid transparent; }
body .account-tabs a.current { background: #fff; color: #20486d; border-bottom-color: #20486d; font-weight: 700; }
body .account-tabs a:hover { color: #20486d; background: #fff; }
/* 等級徽章：強調黃、深色字 */
body .rank-badge { background: #fbc02d !important; color: #222 !important; }
/* Face ID「綁定這支手機」是這頁的主要行動 → 行動綠 */
body .pk-m-bind { background: #43a047; border: 0; color: #fff; }
body .pk-m-bind:hover { background: #2d3e50; }
body .pk-m-bind:disabled { background: #e8e4e1; color: #8a8580; opacity: 1; }
/* 紅包序號輸入框被壓成 23px、按鈕 16px（直向 flex 讓 height 失效） */
body#page_user .user-account-box .add-bonus-input-group input,
body#page_user .user-account-box .add-bonus-input-group .btn-add-bonus { flex: 0 0 auto; height: 44px; }

/* ---------- 購物車與結帳 ---------- */
/* 「清空購物車」是破壞性動作，不要跟「立即結算」一樣是實心綠 */
body .button.text_button {
    background: transparent !important;
    background-image: none !important;
    color: #6b6461 !important;
    border: 1px solid #d9d1cc !important;
    box-shadow: none !important;
}
body .button.text_button:hover { color: #c62828 !important; border-color: #c62828 !important; }
/* 步驟列：目前步驟用主色 */
.progress_bar li { color: #6b6461; background-color: #f4f2f0; }
.progress_bar li:before { color: #6b6461; border-color: #d9d1cc; }
.progress_bar .current { color: #fff; background-color: #20486d; }
.progress_bar .current:before { color: #fff; border-color: #5ca8d6; }
/* 商品列的「刪除」：桌機原本是舊式深灰漸層鈕，跟手機統一成淡框膠囊 */
.cart_produst_list .drop,
a.drop {
    background: #fff !important;
    background-image: none !important;
    color: #6b6461 !important;
    border: 1px solid #d9d1cc !important;
    border-radius: 999px !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
a.drop:hover { color: #c62828 !important; border-color: #c62828 !important; }
/* 小計是這頁最重要的數字 */
.cart_produst_list .info .price { color: #20486d; font-weight: 700; font-size: 20px; margin-left: 6px; }
@media (max-width: 767px) {
    /* 手機：兩顆整排按鈕右側被外框切掉 */
    .cart_produst_list tfoot .button { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; box-sizing: border-box; }
}
/* 收貨地址的下拉選單寫死 354px，手機會被切掉 */
.address_form select,
#building_mgmt_type_0 { max-width: 100%; box-sizing: border-box; }

/* ---------- 版面：本來就有、換色後更明顯的 ---------- */
/* 搜尋／分類／品牌頁：分頁列比 .tab_wrapper 的固定 39px 高，商品格被浮動擠成細條 */
body#page_search #list,
body#page_category #list,
body#page_brand #list { clear: both; }
/* 手機：收起來的側滑選單在畫面外，陰影卻一直透進右邊緣 */
@media screen and (max-width: 800px) {
    body #header_nav.header-nav-inline { box-shadow: none; }
    body.menu-open #header_nav.header-nav-inline { box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18); }
}


/* =====================================================================
   第三輪（第二輪審查後）
   ===================================================================== */

/* ---------- 頁首主選單：原本置中＋可橫捲，放不下時左邊溢出的部分捲不到，
   「乾洗・水洗」在桌機上永遠看不完整（正式站也是）。改成從左排、放得下時仍置中，
   並在 801～1400 寬縮小字級與間距，1280 寬七項剛好放得下 ---------- */
@media (min-width: 801px) {
    #header_nav.header-nav-inline > ul { justify-content: flex-start; }
    #header_nav.header-nav-inline > ul > li:first-child { margin-left: auto; }
    #header_nav.header-nav-inline > ul > li:last-child { margin-right: auto; }
}
@media (min-width: 1401px) {
    #header_nav.header-nav-inline li > a { padding: 10px 10px !important; font-size: 16px !important; }
}
@media (min-width: 801px) and (max-width: 1400px) {
    #header_nav.header-nav-inline li > a { padding: 10px 4px !important; font-size: 15px !important; }
}
/* 選單放不下時可以左右滑：html_footer.lbi 的小程式在「放不下、而且還沒捲到最右邊」時加 .nav-overflow，右邊淡出提示後面還有；捲到底或放得下就不淡 */
@media (min-width: 801px) {
    #header_nav.header-nav-inline > ul.nav-overflow {
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 36px), transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 36px), transparent 100%);
    }
}
/* 頁首版心：原本只有列在白名單裡的頁面（首頁、分類、商品、會員…）是 1280 寬，其他頁（標籤雲、配送、活動、價目表…）是 980，選單在那些頁永遠放不下 */
#header .header-top .wrapper,
#top .wrapper {
    max-width: var(--catalog-max-width, 1280px);
    width: calc(100% - var(--catalog-gutter, 24px) * 2);
}

/* ---------- 排序頁籤：選中的深藍底上，深灰的方向箭頭看不見；滑過時字不要變黑 ---------- */
.tabs a.current:hover { color: #fff; }
.tabs a.current .arrow_up,
.tabs a.current .arrow_down { filter: brightness(0) invert(1); opacity: 0.9; }

/* ---------- 清單／純文字版型 ---------- */
.product_list .goods-row-list > li.goods-row { padding: 18px 16px !important; }
.product_list .goods-text-list > li { padding: 13px 16px !important; }
@media (max-width: 600px) {
    .product_list .goods-row-list > li.goods-row { padding: 16px 12px !important; }
    .product_list .goods-text-list > li { padding: 12px 12px !important; }
}
/* 兩顆按鈕原本 content-box 加 min-height 變成 66px 高的方磚，字級也不一致 */
.goods-row-actions > a,
.goods-row-actions > button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px !important;
    font-size: 16px !important;
    font-weight: 700;
}

/* ---------- 區塊標題右邊的「更多」：手機可點範圍至少 44px 高（不改變標題列高度） ---------- */
body .box .hd .extra a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; margin: -12px 0; }

/* ---------- 商品頁 ---------- */
/* 整段只有一個粗體的段落是後台寫的小標（goods.dwt 的小程式加 class） */
.product_description p.pd-subhead { margin: 22px 0 8px !important; }
.product_description p.pd-subhead > strong {
    display: block;
    padding-left: 10px !important;
    border-left: 4px solid #20486d !important;
    color: #20486d !important;
    font-size: 17px !important;
    line-height: 1.45;
}
.product_description h4 { font-size: 19px !important; color: #20486d !important; border-left: 4px solid #20486d; padding-left: 10px !important; margin: 26px 0 10px !important; }
@media (max-width: 800px) {
    /* 「下單」字偏上（style.css 用 !important 設了 inline-block） */
    body .product_details .actions a.bright_button { display: inline-flex !important; align-items: center; justify-content: center; }
}

/* ---------- 價目表 ---------- */
/* 價格欄固定寬，加入購物車按鈕才會對齊成一直線 */
.price-amt { min-width: 72px; }
/* 懸浮鈕會蓋住右邊的價格：只有表格讓位（標題、搜尋列維持全寬），列印不讓 */
@media screen and (max-width: 1139px) {
    body .pricelist .pricelist-table { width: calc(100% - 64px); }   /* 價目表頁內的 style 寫了 width:100%，要比它重 */
}
@media screen and (max-width: 640px) {
    body .pricelist .pricelist-table { width: calc(100% - 52px); }
}

/* ---------- 文章 ---------- */
#article_search input[type="submit"] { height: 38px; vertical-align: top; box-sizing: border-box; }
@media (pointer: coarse) {
    #article_search input { min-height: 44px; height: 44px; box-sizing: border-box; }
}
.article-click,
.article-time { white-space: nowrap; display: inline-block; }

/* ---------- 懸浮鈕 ---------- */
#floating-buttons a.float-msg,
#floating-buttons a.float-top { box-sizing: border-box; }
@media (max-width: 800px) {
    /* 手機上「留言板」三個字會凸出 50px 的圓 */
    #floating-buttons a .btn-text { font-size: 11px; }
    #floating-buttons .btn-icon svg { width: 20px; height: 20px; }
}

/* ---------- 配送頁「到府收送服務區域」（大圖拿掉後補樣式；原本的 component.css 是 LINE 綠且這頁沒載入） ---------- */
.delivery-service-area-note {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-left: 4px solid #20486d;
    background: #f7f5f4;
    border-radius: 8px;
}
.delivery-service-area-title { margin: 0 0 6px; color: #20486d; font-size: 16px; }
.delivery-service-area-main strong { color: #20486d; }

/* ---------- 留言板類型膠囊：手機至少 44px 高 ---------- */
body .chip-radio span { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; box-sizing: border-box; }

/* ---------- 會員中心 ---------- */
/* 紅包序號輸入框撐滿，跟下面的按鈕同寬 */
body#page_user .user-account-box .add-bonus-input-group input { width: 100%; max-width: none; box-sizing: border-box; }
/* 紅包統計卡：一整句話不要在「價／值」中間斷開 */
body .stat-card.bonus .count { font-size: 17px; word-break: keep-all; line-height: 1.35; text-align: center; }
/* 四張統計卡的圖示對齊在同一高度（原本垂直置中，紅包那張字比較多就比較低） */
body .stat-card { justify-content: flex-start; }
/* 綠色按鈕至少 44px 高 */
body#page_user .user-account-box input[type="submit"],
body#page_user .merge_order input[type="submit"],
body .gen-options .submit-btn { min-height: 44px; }
body .btn-cart-sm { box-sizing: border-box; min-height: 44px; display: inline-flex !important; align-items: center; justify-content: center; }
#search input[type="submit"],
#search_bar input[type="submit"] { min-height: 0 !important; }
/* 推薦碼預覽：炭灰換成主色深藍，提示字看得清楚 */
body .gen-result textarea { background: #183a58 !important; color: #fff !important; }
body .gen-result textarea::placeholder { color: #a9bdd0; }
/* 推薦連結：網址框要能縮，綠色按鈕才不會被推出卡片 */
body .input_share_url { min-width: 0; }
/* 資料頁兩種綠按鈕長得不一樣：統一成膠囊 */
body#page_user input.btn_s3,
body#page_user input.btn_s3_b { border-radius: 999px; min-height: 44px; padding: 0 24px; font-weight: 700; letter-spacing: normal; }
body#page_user #btnSendMobileCode,
body#page_user #btnConfirmMobileCode { border-radius: 999px !important; min-height: 44px; font-size: 16px !important; font-weight: 700; letter-spacing: normal !important; box-sizing: border-box; }

/* ---------- 購物車與結帳 ---------- */
.progress_bar { margin-top: 12px; }
@media (max-width: 480px) {
    .progress_bar li,
    .progress_bar li.current { font-size: 12px !important; white-space: nowrap; padding-left: 2px !important; padding-right: 2px !important; }
}
@media (max-width: 767px) {
    #building_mgmt_type_0 { width: calc(100% - 10px) !important; }
}

/* ---------- 登入／註冊 ---------- */
/* 「線上查餘額查訂單」提示框：優惠提醒用強調黃 */
body .auth-promo-banner {
    background: #fff8e1 !important;
    border: 1px solid #f3e0a0 !important;
    border-left: 4px solid #fbc02d !important;
    color: #222 !important;
}
body .auth-promo-banner strong { color: #20486d !important; }
/* 「填寫表單註冊」原本是實心黑：改成次要按鈕（白底主色框） */
body .btn-register,
body .flow-login-panel .btn-register {
    box-sizing: border-box;
    background: #fff !important;
    color: #20486d !important;
    border: 1px solid #20486d !important;
}
body .btn-register:hover,
body .flow-login-panel .btn-register:hover { background: #20486d !important; color: #fff !important; }
/* 結帳登入步驟：社群登入鈕的字貼底、分隔字與頁籤太淡、輸入框聚焦沒有品牌樣式 */
.login-form-side .btn-social { padding: 0 !important; }
body .login-form-side .flow-social-divider,
body .flow-social-divider { color: #6b6461 !important; }
body .flow-login-tabs button { color: #4d4a48; background: #f4f2f0; }
body .flow-login-panel .input-field:focus { border-color: #20486d; box-shadow: 0 0 0 3px rgba(92, 168, 214, 0.35); outline: none; }

/* ---------- 第四輪 ---------- */
@media (max-width: 480px) {
    .progress_bar li:before { float: none !important; margin: 0 auto 3px !important; }
    .progress_bar li { text-align: center; }
}
/* 影片列的左右內距跟標題列一致（641～800 寬 .hd 已是 14px） */
@media (min-width: 641px) and (max-width: 800px) {
    body .home-videos .home-videos-grid { padding: 12px 14px; scroll-padding-inline: 14px; }
}