/*
 * 麥可手機分類選單（2026-09-26 店主：「手機漢堡分類可以用好一點嗎」）
 * 版型照沂恩 9/26 的左側抽屜（參考 wanwantw）：最上面店名＋關閉、搜尋、分類一列一項；
 * 有子分類的那一列右邊才有展開鈕（手風琴，一次只開一個）；最下面放常用捷徑。
 * 顏色用麥可的色系。只在 800px 以下作用，桌機不受影響。
 * 程式在 static/js/mobile-menu.js 最前面那段（加上標題、搜尋、展開鈕、捷徑）。
 *
 * 為什麼到處都是 !important：style.css 的手機選單（右側滑出那一版）每一條都寫了 !important，
 * 另外還有別的規則把子分類排成一顆顆小膠囊；不這樣蓋不過去。
 */
body .customer-menu-heading,
body .customer-menu-search,
body .customer-menu-shortcuts,
body .customer-submenu-toggle { display: none; }

@media screen and (max-width: 800px) {
    body #header_bar .header-menu-group .mobile-menu-label { display: none !important; }
    body #header_bar .header-menu-group #mobile-menu-toggle {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        box-shadow: none;
        background: #eaf0f6;
        border: 1px solid #d9e2ec;
    }
    body #menu-overlay { background-color: rgba(0, 0, 0, 0.6); }
    /* 開著或正在收起時，頁首層級不要蓋過抽屜；底部選單不要擋到抽屜 */
    /* style.css 用 !important 把整個頁首抬到遮罩上面，頁首的搜尋框、購物袋在抽屜旁邊不會變暗；
       抽屜本身層級比遮罩高，頁首降回一般層級就好 */
    body.menu-open #header,
    body.menu-closing #header { z-index: auto !important; }
    body.menu-open #mobile-nav { pointer-events: none; }
    /* 右邊懸浮的 LINE／臉書／留言板在抽屜開著時先收起來 */
    body.menu-open #floating-buttons { visibility: hidden; }

    /* ---------- 抽屜本體：左側滑出 ---------- */
    body #header_nav.header-nav-inline {
        --drawer-line: #e8e3e0;
        --drawer-ink: #222222;
        --drawer-sub: #4d4a48;
        --drawer-brand: #20486d;
        left: 0 !important;
        right: auto !important;
        width: min(300px, 86vw) !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) !important;
        box-sizing: border-box;
        overscroll-behavior: contain;
        background: #fff !important;
        color: var(--drawer-ink) !important;
        border-radius: 0;
        box-shadow: none !important;
        transform: translateX(-100%) !important;
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0s linear 0.3s !important;
    }
    body.menu-open #header_nav.header-nav-inline {
        transform: translateX(0) !important;
        visibility: visible;
        box-shadow: 6px 0 24px rgba(0, 0, 0, 0.18) !important;
        transition: transform 0.3s ease, visibility 0s !important;
    }

    /* ---------- 標題列：店名＋關閉 ---------- */
    body #header_nav .customer-menu-heading {
        position: sticky;
        top: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 54px;
        margin: 0;
        padding: 0 0 0 20px;
        background: #20486d;
        color: #fff;
        font: 700 16px/1.4 "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        letter-spacing: 0.04em;
    }
    body #header_nav .customer-menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 54px;
        width: 54px;
        height: 54px;
        margin: 0;
        padding: 0;
        border: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 0;
        background: transparent;
        color: #fff;
        cursor: pointer;
    }

    /* ---------- 搜尋 ---------- */
    body #header_nav .customer-menu-search {
        display: flex;
        align-items: center;
        min-height: 64px;
        margin: 0;
        padding: 0 0 0 20px;
        background: #fff;
        border-bottom: 1px solid var(--drawer-line);
    }
    body #header_nav .customer-menu-search:focus-within { box-shadow: inset 0 -2px 0 #5ca8d6; }
    body #header_nav .customer-menu-search input {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: var(--drawer-ink);
        font-size: 16px;
        line-height: 44px;
        outline: 0;
        -webkit-appearance: none;
        appearance: none;
    }
    body #header_nav .customer-menu-search input::placeholder { color: #767676; opacity: 1; }
    body #header_nav .customer-menu-search button {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 54px;
        width: 54px;
        height: 54px;
        min-height: 0 !important;
        margin: 0;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--drawer-brand) !important;
        cursor: pointer;
    }
    body #header_nav .customer-menu-close,
    body #header_nav .customer-menu-search button,
    body #header_nav .customer-submenu-toggle { box-shadow: none; text-shadow: none; -webkit-appearance: none; appearance: none; }
    body #header_nav .customer-menu-heading svg,
    body #header_nav .customer-menu-search svg,
    body #header_nav .customer-submenu-toggle svg,
    body #header_nav .customer-menu-shortcuts svg {
        display: block;
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* ---------- 分類列表：一列一項、靠左 ---------- */
    body #header_nav.header-nav-inline > ul {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #fff !important;
        list-style: none;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
    body #header_nav.header-nav-inline > ul > li {
        position: relative;
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid var(--drawer-line) !important;
        background: #fff !important;
        text-align: left !important;
    }
    body #header_nav.header-nav-inline > ul > li > a,
    body #header_nav.header-nav-inline > ul > li:hover > a.has_sub {
        position: relative;
        display: flex !important;
        align-items: center;
        justify-content: flex-start !important;
        float: none !important;
        width: 100% !important;
        min-height: 52px;
        box-sizing: border-box;
        margin: 0 !important;
        padding: 8px 20px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--drawer-ink) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        letter-spacing: 0.03em;
        text-align: left !important;
        white-space: normal !important;
        text-decoration: none;
    }
    /* 桌機版在有子選單的項目後面畫的小箭頭，手機改用右邊的展開鈕 */
    body #header_nav.header-nav-inline > ul > li > a::after { content: none !important; display: none !important; }
    body #header_nav.header-nav-inline > ul > li > a:hover,
    body #header_nav.header-nav-inline > ul > li > a.current { color: var(--drawer-brand) !important; }
    body #header_nav.header-nav-inline > ul > li > a.current { box-shadow: inset 4px 0 0 #5ca8d6; }
    body #header_nav.header-nav-inline > ul > li > a[href*="lin.ee"] { color: #047a36 !important; }
    body #header_nav.header-nav-inline > ul > li.has-customer-submenu > a,
    body #header_nav.header-nav-inline > ul > li.has-customer-submenu:hover > a.has_sub { padding-right: 70px !important; }

    /* ---------- 子分類：右邊展開鈕＋手風琴 ---------- */
    body #header_nav .customer-submenu-toggle {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 52px;
        min-height: 0 !important;
        margin: 0;
        padding: 0 !important;
        border: 0 !important;
        border-left: 1px solid var(--drawer-line) !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--drawer-ink) !important;
        cursor: pointer;
    }
    body #header_nav .customer-submenu-toggle svg { width: 16px; height: 16px; stroke-width: 2; transition: transform 0.2s ease; }
    body #header_nav li.customer-submenu-open > .customer-submenu-toggle {
        background: var(--drawer-brand) !important;
        border-left-color: var(--drawer-brand) !important;
        color: #fff !important;
    }
    body #header_nav li.customer-submenu-open > .customer-submenu-toggle svg { transform: rotate(90deg); }
    body #header_nav.header-nav-inline li .sub_nav {
        position: static !important;
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        border: 0 !important;
        border-top: 1px solid var(--drawer-line) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #f7f5f4 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    body #header_nav.header-nav-inline li.has-customer-submenu > .sub_nav { display: none !important; }
    body #header_nav.header-nav-inline li.customer-submenu-open > .sub_nav { display: block !important; }
    body #header_nav.header-nav-inline li .sub_nav .inner {
        display: block !important;
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }
    body #header_nav.header-nav-inline li .sub_nav a {
        display: flex !important;
        align-items: center;
        float: none !important;
        width: auto !important;
        min-height: 48px;
        box-sizing: border-box;
        margin: 0 !important;
        padding: 8px 20px 8px 34px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--drawer-sub) !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;
        text-align: left !important;
        white-space: normal !important;
        text-decoration: none;
    }
    body #header_nav.header-nav-inline li .sub_nav a + a { border-top: 1px solid #ece7e4 !important; }
    body #header_nav.header-nav-inline li .sub_nav a:hover,
    body #header_nav.header-nav-inline li .sub_nav a.current { color: var(--drawer-brand) !important; }

    /* ---------- 最下面的常用捷徑 ---------- */
    body #header_nav .customer-menu-shortcuts {
        display: block;
        margin: 12px 0 0;
        padding: 0;
        border-top: 6px solid #f4f3f1;
    }
    body #header_nav .customer-menu-shortcuts a {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 50px;
        box-sizing: border-box;
        margin: 0;
        padding: 8px 20px;
        border: 0;
        border-bottom: 1px solid var(--drawer-line);
        border-radius: 0;
        background: transparent;
        color: var(--drawer-ink);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: 0.04em;
        text-align: left;
        text-decoration: none;
    }
    body #header_nav .customer-menu-shortcuts a svg { flex: 0 0 20px; stroke-width: 1.6; color: var(--drawer-brand); }
    body #header_nav .customer-menu-shortcuts a.customer-shortcut-line svg { color: #06c755; }
    body #header_nav .customer-menu-shortcuts a:hover { color: var(--drawer-brand); }

    body #header_nav button:focus-visible,
    body #header_nav.header-nav-inline a:focus-visible,
    body #header_nav .customer-menu-shortcuts a:focus-visible { outline: 3px solid #5ca8d6; outline-offset: -3px; }
}
@media (prefers-reduced-motion: reduce) {
    body #header_nav.header-nav-inline,
    body.menu-open #header_nav.header-nav-inline,
    body #header_nav .customer-submenu-toggle svg { transition: none !important; }
}