/* 全站頁首（主選單、帳號選單、購物車圖示）、手機側邊選單、購物車抽屜（mini cart）的品牌樣式。
   _Layout 全站載入，讓每一頁的頁首一致；只調視覺，不改 header 的定位與下拉選單的開關機制
   （hover 展開、帳號選單點擊開關、offcanvas 的 active 切換都維持 _Layout 原本的 CSS／JS）。
   _Layout 後段的 <style> 在這支之後載入，選擇器一律加 body 前綴提高權重。 */

:root {
    --hd-green: #07574e;
    --hd-green-hover: #0b6a5f;
    --hd-ink: #163e38;
    --hd-ink-2: #2f4a43;
    --hd-muted: #62736b;
    --hd-line: #d9e1d5;
    --hd-line-soft: #eef2ea;
    --hd-soft: #edf2e6;
    --hd-citrus: #d4d83d;
}

/* ═══════════════ 頁首 ═══════════════ */
body .header_section {
    background: #fff !important;
    border-bottom: 1px solid #dfe4db;
    box-shadow: none !important;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

    /* 手機版的高度由 _Layout 的 --mobile-header-height 控制（padding 歸零），只調桌機 */
    @media (min-width: 821px) {
        body .header_section .main_header {
            padding-top: 16px !important;
            padding-bottom: 16px !important;
        }

        body .header_section .main_header > .container-fluid {
            padding-left: clamp(16px, 2.5vw, 40px);
            padding-right: clamp(16px, 2.5vw, 40px);
        }
    }

    body .header_section .header_container {
        gap: clamp(16px, 2.5vw, 40px);
        min-height: 48px;
    }

    body .header_section .header_logo img {
        width: auto;
        max-height: 36px;
    }

    body .header_section :is(a, button):focus-visible {
        outline: 3px solid #7d8b17;
        outline-offset: 2px;
        border-radius: 4px;
    }

/* ── 主選單 ── */
/* 選單間距隨視窗寬度放寬：登入後項目最多（7～9 個），1280px 寬仍要排得下一行 */
body .header_section .main_menu nav > ul {
    gap: clamp(2px, .9vw, 16px);
}

    body .header_section .main_menu nav > ul > li,
    body .header_section .main_menu nav ul.d-flex > li.nav-item {
        min-width: 0;
        margin-right: 0;
        padding: 0;
    }

        body .header_section .main_menu nav > ul > li > a {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 44px;
            padding: 10px clamp(10px, .9vw, 16px);
            border-radius: 4px;
            color: var(--hd-ink);
            font-size: 15px;
            font-weight: 500;
            letter-spacing: .06em;
            line-height: 1.5;
            text-transform: none;
            white-space: nowrap;
            transition: color .15s;
        }

            /* 底線指示：滑過或展開時由左往右出現 */
            body .header_section .main_menu nav > ul > li > a::before {
                content: "";
                position: absolute;
                left: clamp(10px, .9vw, 16px);
                right: clamp(10px, .9vw, 16px);
                bottom: 4px;
                height: 2px;
                border-radius: 1px;
                background: var(--hd-green);
                transform: scaleX(0);
                transform-origin: left center;
                transition: transform .2s ease;
            }

            body .header_section .main_menu nav > ul > li > a:hover,
            body .header_section .main_menu nav > ul > li > a:focus-visible,
            body .header_section .main_menu nav > ul > li.nav-dropdown:hover > a {
                color: var(--hd-green);
            }

                body .header_section .main_menu nav > ul > li > a:hover::before,
                body .header_section .main_menu nav > ul > li > a:focus-visible::before,
                body .header_section .main_menu nav > ul > li.nav-dropdown:hover > a::before {
                    transform: scaleX(1);
                }

/* 下拉箭頭：原本的「▾」字元換成細線箭頭，展開時轉向 */
body .header_section .main_menu .nav-dropdown > a::after {
    content: "";
    position: relative;
    top: -2px;
    width: 6px;
    height: 6px;
    margin-left: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    font-size: 0;
    opacity: .55;
    transform: rotate(45deg);
    transition: transform .2s ease, opacity .15s;
}

body .header_section .main_menu .nav-dropdown:hover > a::after {
    top: 1px;
    opacity: 1;
    transform: rotate(-135deg);
}

/* 購物金餘額：選單文字右側的小膠囊（JS 仍以 .shopfund-badge 更新金額） */
body .header_section .shopfund-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--hd-citrus);
    color: var(--hd-ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* ── 下拉面板（主選單／帳號選單共用外觀） ── */
body .header_section .main_menu .nav-dropdown > .dropdown-menu,
body .header_section .header_account .nav-dropdown > .dropdown_account_link {
    min-width: 210px;
    padding: 8px;
    border: 1px solid var(--hd-line);
    border-top: 3px solid var(--hd-green);
    border-radius: 0 0 8px 8px;
    background: #fff;
    box-shadow: 0 16px 36px #1b42381f;
    list-style: none;
    text-align: left;
}

body .header_section .main_menu .dropdown-menu li a,
body .header_section .header_account .dropdown_account_link li a {
    display: block;
    padding: 10px 14px;
    border-radius: 4px;
    color: var(--hd-ink);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .04em;
    line-height: 1.5;
    text-transform: none;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}

    body .header_section .main_menu .dropdown-menu li a:hover,
    body .header_section .header_account .dropdown_account_link li a:hover {
        background: var(--hd-soft);
        color: var(--hd-green);
    }

/* 帳號選單上方的會員姓名與編號 */
body .header_section .jl-acct-menu__head {
    margin-bottom: 6px;
    padding: 8px 14px 12px;
    border-bottom: 1px solid var(--hd-line-soft);
}

    body .header_section .jl-acct-menu__head strong {
        display: block;
        color: var(--hd-ink);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: .04em;
        line-height: 1.5;
    }

    body .header_section .jl-acct-menu__head span {
        display: block;
        color: var(--hd-muted);
        font-size: 12px;
        letter-spacing: .04em;
        font-variant-numeric: tabular-nums;
    }

/* 待辦提醒（入會檢附資料未齊）：頁首選單與手機側邊選單共用 */
body .header_section .dropdown_account_link a.jl-nav-alert {
    background: #fbf3dc;
    color: #7a5f12;
    font-weight: 600;
}

    body .header_section .dropdown_account_link a.jl-nav-alert:hover {
        background: #f6e9c2;
        color: #6b5410;
    }

body .header_section .dropdown_account_link a.jl-nav-logout { color: #9b3b33; }

    body .header_section .dropdown_account_link a.jl-nav-logout:hover {
        background: #fbecea;
        color: #9b3b33;
    }

/* ── 右側圖示（帳號、購物車、語系） ── */
body .header_section .header_account > ul {
    align-items: center;
    gap: 14px;
}

    body .header_section .header_account > ul > li {
        margin-right: 0;
    }

        body .header_section .header_account > ul > li > a {
            display: grid;
            place-items: center;
            width: 42px;
            height: 42px;
            border: 1px solid var(--hd-line);
            border-radius: 50%;
            background: #fff;
            color: var(--hd-ink);
            font-size: 18px;
            line-height: 1;
            transition: background-color .15s, border-color .15s, color .15s;
        }

            body .header_section .header_account > ul > li > a i {
                font-size: 18px !important;
                line-height: 1;
                vertical-align: middle;
            }

            body .header_section .header_account > ul > li > a:hover,
            body .header_section .header_account > ul > li.show > a {
                border-color: var(--hd-green);
                background: var(--hd-soft);
                color: var(--hd-green);
            }

            /* 已登入：帳號圖示改成實心品牌綠（原本是紅色圖示） */
            body .header_section .header_account > ul > li > a.is-auth {
                border-color: var(--hd-green);
                background: var(--hd-green);
                color: #fff;
            }

                body .header_section .header_account > ul > li > a.is-auth:hover,
                body .header_section .header_account > ul > li.show > a.is-auth {
                    border-color: var(--hd-green-hover);
                    background: var(--hd-green-hover);
                    color: #fff;
                }

body .header_section .header_account .shopping_cart {
    position: relative;
}

body .header_section .header_account > ul > li span.item_count {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 20px;
    width: auto;
    height: 20px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--hd-citrus);
    color: var(--hd-ink);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* 小筆電（992～1199px，主選單剛出現的寬度）：登入後 7～9 個項目要擠進一行，
   間距、字級、圖示都收小，避免右側的帳號／購物車被擠出畫面 */
@media (min-width: 992px) and (max-width: 1199.98px) {
    body .header_section .header_container { gap: 12px; }
    body .header_section .header_logo img { max-height: 30px; }

    body .header_section .main_menu nav > ul { gap: 0; }

        body .header_section .main_menu nav > ul > li > a {
            gap: 4px;
            padding: 8px 7px;
            font-size: 14px;
            letter-spacing: .02em;
        }

            body .header_section .main_menu nav > ul > li > a::before {
                left: 7px;
                right: 7px;
            }

    body .header_section .shopfund-badge { padding: 0 6px; font-size: 10px; }

    body .header_section .header_account > ul { gap: 8px; }

        body .header_section .header_account > ul > li > a {
            width: 38px;
            height: 38px;
        }

            body .header_section .header_account > ul > li > a i { font-size: 16px !important; }
}

/* 中間寬度（1200～1319px）：保留 15px 字級，只把選單間距與兩側留白收一點，
   實測 8 個項目在 1200px 時右側購物車會超出畫面約 40px */
@media (min-width: 1200px) and (max-width: 1319.98px) {
    body .header_section .header_container { gap: 20px; }

    body .header_section .main_header > .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }

    body .header_section .main_menu nav > ul { gap: 4px; }
}

/* 手機漢堡鈕 */
body .header_section .canvas_open a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--hd-line);
    border-radius: 50%;
    color: var(--hd-ink);
    font-size: 24px;
    line-height: 1;
}

    body .header_section .canvas_open a:hover {
        border-color: var(--hd-green);
        background: var(--hd-soft);
        color: var(--hd-green);
    }

/* ── 手機側邊選單（_Layout 的樣式多帶 !important，這裡要跟著帶才蓋得過） ── */
body .offcanvas_menu {
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

@media (max-width: 820px) {
    /* 頂部色帶：原本的橄欖綠換成品牌綠 */
    body .offcanvas_menu .offcanvas_menu_wrapper::before {
        background: var(--hd-green);
        border-bottom: 0;
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: .18em;
    }

    body .offcanvas_menu .canvas_close {
        border: 1px solid #ffffff40;
        background: #ffffff14;
    }

    body .offcanvas_menu .offcanvas_main_menu > li {
        border-bottom-color: var(--hd-line-soft);
    }

        /* 項目排緊一點：一列 42px，仍符合手指點擊的最小尺寸 */
        body .offcanvas_menu .offcanvas_main_menu > li > a {
            min-height: 42px;
            padding: 6px 22px !important;
            color: var(--hd-ink) !important;
            font-size: 14px !important;
            letter-spacing: .03em;
            line-height: 1.5 !important;
        }

            body .offcanvas_menu .offcanvas_main_menu > li > a:hover,
            body .offcanvas_menu .offcanvas_main_menu .sub-menu li a:hover {
                background: var(--hd-soft);
                color: var(--hd-green) !important;
            }

    body .offcanvas_menu .offcanvas_main_menu .sub-menu li a {
        color: var(--hd-ink-2) !important;
        font-size: 13px !important;
    }

    body .offcanvas_menu .offcanvas_main_menu {
        padding-top: 6px !important;
    }
}

body .offcanvas_menu .offcanvas_main_menu a.jl-nav-alert {
    background: #fbf3dc;
    color: #7a5f12 !important;
    font-weight: 600;
}

body .offcanvas_menu .offcanvas_main_menu a.jl-nav-logout { color: #9b3b33 !important; }

/* ═══════════════ 購物車抽屜（Cart/SmallCart 由 AJAX 載入） ═══════════════ */
body .mini_cart {
    display: none;
    width: min(400px, 100vw);
    padding: 0;
    overflow: hidden;
    background: #fff;
    box-shadow: -16px 0 40px #0e2d282e;
    transform: none;
    visibility: visible;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    color: var(--hd-ink);
}

body .jl-mc {
    display: flex;
    flex-direction: column;
    height: 100%;
}

body .jl-mc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 16px 24px;
    border-bottom: 1px solid #e3e9de;
}

body .jl-mc__eyebrow {
    margin: 0 0 4px;
    color: var(--hd-green);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    line-height: 1.6;
}

body .jl-mc__title {
    margin: 0;
    color: var(--hd-ink);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1.4;
}

    body .jl-mc__title small {
        margin-left: 6px;
        color: var(--hd-muted);
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0;
    }

body .jl-mc__close {
    position: relative;
    display: block;
    flex: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--hd-line);
    border-radius: 50%;
    background: #fff;
    transition: background-color .15s, border-color .15s;
}

    body .jl-mc__close::before,
    body .jl-mc__close::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 14px;
        height: 1.5px;
        border-radius: 1px;
        background: var(--hd-ink);
        transform: translate(-50%, -50%) rotate(45deg);
    }

    body .jl-mc__close::after { transform: translate(-50%, -50%) rotate(-45deg); }

    body .jl-mc__close:hover {
        border-color: var(--hd-green);
        background: var(--hd-soft);
    }

body .jl-mc__list {
    flex: 1 1 auto;
    margin: 0;
    padding: 4px 24px;
    overflow-y: auto;
    list-style: none;
    overscroll-behavior: contain;
}

body .mini_cart .jl-mc__item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px;
    overflow: visible;
    padding: 16px 0;
    border-bottom: 1px solid var(--hd-line-soft);
}

    body .mini_cart .jl-mc__item:last-child { border-bottom: 0; }

body .jl-mc__img {
    display: block;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border: 1px solid #e3e9de;
    border-radius: 6px;
    background: #f7f9f4;
}

    body .jl-mc__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

body .mini_cart .jl-mc__name {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--hd-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

    body .mini_cart .jl-mc__name:hover {
        color: var(--hd-green);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

body .jl-mc__unit {
    margin: 4px 0 10px;
    color: var(--hd-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

body .jl-mc__qty {
    display: inline-flex;
    align-items: center;
    height: 34px;
    border: 1px solid var(--hd-line);
    border-radius: 4px;
    background: #fff;
}

    body .jl-mc__qty button {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--hd-ink);
        font-size: 14px;
        cursor: pointer;
        transition: background-color .15s, color .15s;
    }

        body .jl-mc__qty button:hover {
            background: var(--hd-soft);
            color: var(--hd-green);
        }

    body .jl-mc__qty span {
        min-width: 32px;
        color: var(--hd-ink);
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        font-variant-numeric: tabular-nums;
    }

body .jl-mc__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    align-self: stretch;
    gap: 8px;
}

body .jl-mc__remove {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #8fa196;
    font-size: 14px;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

    body .jl-mc__remove:hover {
        background: #fbecea;
        color: #9b3b33;
    }

body .jl-mc__subtotal {
    color: var(--hd-green);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

body .jl-mc__foot {
    padding: 16px 24px 20px;
    border-top: 1px solid #e3e9de;
    background: #f7f9f4;
}

body .jl-mc__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 4px;
    color: var(--hd-ink-2);
    font-size: 14px;
}

    body .jl-mc__total strong {
        color: var(--hd-green);
        font-size: 22px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

body .jl-mc__note {
    margin: 0 0 14px;
    color: var(--hd-muted);
    font-size: 12px;
    line-height: 1.6;
}

body .jl-mc__actions {
    display: grid;
    gap: 10px;
}

body .mini_cart .jl-mc__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid var(--hd-green);
    border-radius: 4px;
    background: var(--hd-green);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .1em;
    text-decoration: none;
    transition: background-color .15s;
}

    body .mini_cart .jl-mc__btn span {
        color: var(--hd-citrus);
        font-size: 18px;
        line-height: 1;
    }

    body .mini_cart .jl-mc__btn:hover {
        background: var(--hd-green-hover);
        color: #fff;
    }

body .mini_cart .jl-mc__btn--ghost {
    justify-content: center;
    border-color: var(--hd-line);
    background: #fff;
    color: var(--hd-ink);
}

    body .mini_cart .jl-mc__btn--ghost:hover {
        background: var(--hd-soft);
        color: var(--hd-green);
    }

body .jl-mc__empty {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 40px 32px;
    text-align: center;
}

    body .jl-mc__empty-icon {
        display: grid;
        place-items: center;
        width: 72px;
        height: 72px;
        margin-bottom: 10px;
        border-radius: 50%;
        background: var(--hd-soft);
        color: var(--hd-green);
        font-size: 30px;
    }

    body .jl-mc__empty p {
        margin: 0;
        color: var(--hd-muted);
        font-size: 14px;
        line-height: 1.7;
    }

        body .jl-mc__empty p strong {
            display: block;
            color: var(--hd-ink);
            font-size: 16px;
            font-weight: 600;
        }

    body .mini_cart .jl-mc__empty .jl-mc__btn {
        width: 100%;
        max-width: 260px;
        margin-top: 16px;
    }

:is(body .mini_cart, body .jl-mc) :is(a, button):focus-visible {
    outline: 3px solid #7d8b17;
    outline-offset: 2px;
}

@media (max-width: 575px) {
    body .mini_cart { width: 100vw; }
    body .jl-mc__head { padding: 16px 16px 14px 18px; }
    body .jl-mc__list { padding: 4px 18px; }
    body .jl-mc__foot { padding: 14px 18px 18px; }
    body .mini_cart .jl-mc__item { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; }
    body .jl-mc__img { width: 64px; height: 64px; }
}

/* ═══════════════ 手機底部常用功能列（_Layout 的 .mobile-nav，登入會員才出現） ═══════════════ */
@media (max-width: 820px) {
    html body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

    body .mobile-nav {
        align-items: stretch;
        justify-content: space-around;
        gap: 2px;
        height: auto;
        min-height: 64px;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #dfe4db;
        background: #ffffffeb;
        box-shadow: 0 -8px 24px #0e2d2814;
        -webkit-backdrop-filter: saturate(1.4) blur(12px);
        backdrop-filter: saturate(1.4) blur(12px);
        font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    }

        body .mobile-nav .nav-item {
            position: relative;
            display: flex;
            flex: 1 1 0;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            min-width: 0;
            min-height: 52px;
            padding: 2px 0;
            color: var(--hd-muted);
            font-size: 11px;
            font-weight: 500;
            letter-spacing: .04em;
            line-height: 1.3;
            text-decoration: none;
            -webkit-tap-highlight-color: transparent;
            transition: color .2s ease;
        }

            body .mobile-nav .nav-item i {
                display: block;
                margin: 0;
                font-size: 20px;
                line-height: 1;
            }

    /* 圖示外的膠囊：選中時填上淺綠底 */
    body .mobile-nav__icon {
        position: relative;
        display: grid;
        place-items: center;
        width: 52px;
        height: 30px;
        border-radius: 999px;
        transition: background-color .25s ease, transform .15s ease;
    }

    body .mobile-nav .nav-item:active .mobile-nav__icon { transform: scale(.88); }

    body .mobile-nav .nav-item.is-active {
        color: var(--hd-green);
        font-weight: 600;
    }

        body .mobile-nav .nav-item.is-active .mobile-nav__icon {
            background: #e3eee8;
            animation: jl-nav-pop .35s cubic-bezier(.2, .8, .3, 1.25);
        }

        /* 上緣的檸檬綠指示條 */
        body .mobile-nav .nav-item.is-active::before {
            content: "";
            position: absolute;
            top: -6px;
            left: 50%;
            width: 22px;
            height: 3px;
            border-radius: 0 0 3px 3px;
            background: var(--hd-citrus);
            transform: translateX(-50%);
        }

    /* 會員：已登入顯示姓名首字 */
    body .mobile-nav__avatar {
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--hd-green);
        color: var(--hd-citrus);
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
    }

    body .mobile-nav .nav-item.is-active .mobile-nav__avatar {
        box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--hd-green);
    }

    /* 購物車件數 */
    body .mobile-nav .mobile-nav__badge {
        position: absolute;
        top: -5px;
        right: 4px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border: 2px solid #fff;
        border-radius: 999px;
        background: var(--hd-citrus);
        color: var(--hd-ink);
        font-size: 10px;
        font-weight: 700;
        line-height: 14px;
        text-align: center;
        font-variant-numeric: tabular-nums;
    }

        body .mobile-nav .mobile-nav__badge.is-zero { display: none; }
        body .mobile-nav .mobile-nav__badge.is-bump { animation: jl-nav-bump .45s ease; }

    body .mobile-nav .nav-item:focus-visible {
        outline: 3px solid #7d8b17;
        outline-offset: -3px;
        border-radius: 8px;
    }
}

@keyframes jl-nav-pop {
    0% { transform: scale(.55); opacity: .3; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes jl-nav-bump {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
    body .header_section *,
    body .mini_cart * { transition: none !important; }

    body .mobile-nav *,
    body .mobile-nav .nav-item::before { animation: none !important; transition: none !important; }
}