/* ============================================================
   1. 基礎排版與手機防禦線
   ============================================================ */
h1 {
    font-size: 24px;
    line-height: 36px;
}

h2 {
    font-size: 20px;
    line-height: 30px;
}

h3 {
    font-size: 18px;
    line-height: 28px;
}

/* 防止內容被 fixed 導覽列遮擋 */
.main-content,
.product-grid-fix-container,
.policy-page-wrapper {
    margin-top: 60px !important;
    padding-top: 15px !important;
}
/* ============================================================
   2. 置頂主框架（手機版黑列吧檯）
   ============================================================ */
nav, #main-nav, nav[b-70fxe8u4tb], nav#main-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 44px !important; /* 確保黑色吧檯本身維持 44px 高 */
    background-color: #000000 !important;
    z-index: 999999999 !important; /* 天眼級最高圖層 */
    display: flex !important;
    align-items: center !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    overflow: visible !important; /* 絕對核心：允許肚子裡的選單徹底溢出往下長 */
}

    /* 1. 調整黑色導覽列：強制固定高度，上下寬度就會與公告欄完美對稱 */
    nav#main-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 56px !important; /* 💡 限制黑色列手機版為 56px 高度 */
        line-height: 56px !important;
        z-index: 10000 !important;
        background-color: #000000 !important; /* 確保背景純黑 */
        overflow: visible !important; /* 讓會員下拉選單可以正常彈出 */
    }

        /* 修正黑色列內部元件的置中與對齊，避免被壓扁 */
        nav#main-nav .top-nav,
        nav#main-nav .header-tools {
            height: 56px !important;
            display: flex !important;
            align-items: center !important;
        }

/* 2. 綠色公告欄：精準釘在黑色導覽列（56px）的正下方，高度設為 40px */
.top-announcement {
    position: fixed !important;
    top: 56px !important; /* 💡 緊貼在黑色列下方 */
    left: 0 !important;
    width: 100% !important;
    height: 40px !important; /* 💡 固定公告欄高度，上下寬度一致 */
    z-index: 9999 !important;
    padding: 0 15px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important; /* 讓文字與 X 絕對垂直置中 */
    background-color: #2c4c38 !important;
}

/* 3. 🎯 真正一勞永逸：因為黑列(56px) + 綠列(40px) = 96px。
          所有的商城首頁、詳細頁、通用容器，通通一律往下推 96px！
          公告欄下方就會無縫緊接商品框，絕無黑色區塊！
    */
.container,
.container.product-grid-fix-container,
.container.product-details-container,
main,
.path,
body {
    padding-top: 2 !important;
}

    /* 確保詳細頁內部的麵包屑不重複疊加間距 */
    .container.product-details-container nav[aria-label="breadcrumb"] {
        margin-top: 0 !important;
        padding-top: 15px !important; /* 讓商品頁的文字與公告欄保留一點舒適的內襯距離 */
    }

/* 4. 會員下拉選單維持最高層級 */
nav#main-nav .header-tools {
    position: relative !important;
    z-index: 10005 !important;
}

.header-tools .dropdown-menu,
.header-tools div[class*="dropdown"] {
    z-index: 10006 !important;
}

/* 🎯 終極一勞永逸：取消所有頁面的 margin-top 設定！
       改由下方的 JavaScript 自動計算，這邊只要確保基礎排版即可。
    */
.container, main, .path {
    margin-top: 0 !important;
}

/* 用更具體的選擇器，強制讓商品明細容器往下掉 */
body .container.product-details-container {
    margin-top: 56px !important; /* 保留導覽列的 56px 空間 */
    padding-top: 20px !important; /* 額外再留 20px 的舒適空白 */
    display: block !important; /* 確保它是區塊元素 */
}

/* 徹底隱藏干擾的手機版中間 Logo */
div.top-nav,
.nav-logo,
div.top-nav [b-70fxe8u4tb] {
    display: none !important;
}

/* ============================================================
   3. 漢堡按鈕與右側工具包（順序調配）
   ============================================================ */
/* 🍔 漢堡按鈕空間瘦身 */
label.main-menu-btn,
.main-menu-btn {
/*    position: relative !important;*/
    left: 0 !important;
    margin: 0 !important;
    padding: 0 10px !important;
    width: 40px !important;
    max-width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
}

div.header-tools div.dropdown.d-inline-block {
    /* 取消原本推開空間的設定，改為固定間距（例如 8px，可自行調整） */
    margin-right: 8px !important;
    /* 如果左邊也想跟漢堡選單拉開距離，可以加上 margin-left */
    margin-left: 8px !important;
}

/* 🛠️ 右側工具包主框架：吃滿漢堡右邊剩餘的所有空間 */
div.header-tools {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    height: 100% !important;
    margin-left: 0 !important;
    padding: 0 5px 0 0 !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    width: auto !important;
    z-index: 99999 !important;
}

    /* 統一設定工具列內部子項 */
    div.header-tools > a,
    div.header-tools > div,
    div.header-tools i,
    div.header-tools .bi {
        color: #ffffff !important;
        font-size: 1.15rem !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }

/* 利用 order 由右至左排隊 */
#pwa-install-btn, a[id="pwa-install-btn"] {
    order: 4 !important;
}

a.cart-link, .cart-link {
    order: 3 !important;
}

.search-wrapper, div.search-wrapper, div.search-wrapper.me-3 {
    order: 2 !important;
}

div.header-tools div.dropdown.d-inline-block, div.header-tools .dropdown {
    order: 1 !important;
}

/* 會員中心終極推力：往左靠岸 */
div.header-tools div.dropdown.d-inline-block,
div.header-tools .dropdown {
    margin-right: auto !important;
}

/* 🛒 購物車紅圈圈數字 */
a.cart-link .cart-badge,
span.cart-badge,
#cart-count,
.cart-badge[b-70fxe8u4tb] {
    position: absolute !important;
    top: -6px !important;
    right: -9px !important;
    width: 16px !important;
    height: 16px !important;
    background-color: #ff4d4f !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: bold !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    z-index: 999999 !important;
}

/* ============================================================
   4. 搜尋框與輸入法調配（高階極簡白底深字版）
   ============================================================ */
.search-wrapper,
div.search-wrapper,
div.search-wrapper.me-3 {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 175px !important;
    display: inline-block !important;
    flex-grow: 0 !important;
}

div.header-tools .search-dropdown-form {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    height: 28px !important;
    z-index: 1 !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    box-shadow: none !important;
}

    div.header-tools .search-dropdown-form::before,
    div.header-tools .search-dropdown-form::after {
        display: none !important;
    }

/* 🔍 輸入框本體 (白底深字) */
.search-dropdown-form input,
input[type="search"].form-control,
input.search-input {
    width: 73% !important;
    height: 28px !important;
    border-radius: 4px 0 0 4px !important;
    border: 1px solid #cccccc !important;
    border-right: none !important;
    background-color: #ffffff !important;
    color: #212529 !important;
    font-size: 11px !important;
    padding: 0 0 0 8px !important;
    margin: 0 !important;
    flex-grow: 0 !important;
}

    .search-dropdown-form input::placeholder,
    input[type="search"].form-control::placeholder,
    input.search-input::placeholder {
        color: #888888 !important;
        opacity: 1 !important;
    }

/* 🔍 搜尋送出按鈕 */
.search-dropdown-form button,
.search-dropdown-form button[type="submit"] {
    width: 27% !important;
    height: 28px !important;
    background-color: #333333 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    border: 1px solid #444444 !important;
    border-radius: 0 4px 4px 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   5. 漢堡主選單彈出層（全面優化：滿版高質感黑底白字版 ＆ 支援收合）
   ============================================================ */
#main-menu,
ul[id="main-menu"],
ul.sm-clean,
#main-menu.sm-clean {
    position: fixed !important; /* 改為 fixed 直接鎖定在黑列下方 */
    top: 44px !important; /* 緊貼 44px 黑列下緣 */
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - 44px) !important; /* 完美吃滿黑列到螢幕最底部的空間 */
    max-height: calc(100vh - 44px) !important;
    overflow-y: auto !important; /* 項目多時允許獨立滑動滾動 */
    -webkit-overflow-scrolling: touch;
    background-color: rgba(20, 20, 20, 0.98) !important; /* 核心：改回高質感黑底，98% 微透不穿幫 */
    z-index: 999999999 !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5) !important;
    margin: 0 !important;
    padding: 0 0 40px 0 !important;
    list-style: none !important;
}

    /* 🚫 徹底移除舊有的 Logo 圖片本體，避免佔空間 */
    #main-menu li.pc-logo img,
    #main-menu img,
    .sm-clean img {
        display: none !important;
    }

    /* ✍️ 利用偽元素在空連結中暴力植入「首頁」二字 */
    #main-menu li.pc-logo a::before {
        content: "首頁" !important;
        display: inline-block !important;
    }

    /* ⚙️ 核心收合：配合前端選單套件 JS 動態控制切換，不強行用 display: block 破壞收合 */
    #main-menu[style*="display: none"],
    #main-menu[style*="display: none;"] {
        display: none !important;
    }

    /* 塗黑選單內部所有 li 與標題容器 */
    ul[id="main-menu"] li,
    .sm-clean li,
    ul[id="main-menu"] li h2,
    .sm-clean li h2 {
        width: 100% !important;
        height: auto !important;
        background-color: transparent !important; /* 繼承大背底的黑 */
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        float: none !important;
        display: block !important;
    }

        /* 重塑一級選單選項外觀 (純白字、極深灰分隔線) */
        ul[id="main-menu"] li a,
        .sm-clean li a {
            color: #ffffff !important; /* 核心：文字純白 */
            font-size: 15px !important;
            font-weight: 500 !important;
            display: block !important;
            width: 100% !important;
            height: auto !important;
            padding: 15px 20px !important;
            border-bottom: 1px solid #2d2d2d !important; /* 質感暗色分隔線 */
            text-align: left !important;
            text-decoration: none !important;
            background-color: transparent !important;
            box-sizing: border-box !important;
        }

            /* 選單 Hover / Focus / 展開啟用時的微互動 (經典高亮綠) */
            ul[id="main-menu"] li a:hover,
            .sm-clean li a:hover,
            #main-menu.sm-clean a:focus,
            #main-menu.sm-clean a.highlighted {
                background-color: #2a2a2a !important;
                color: #198754 !important;
            }

    /* 🌿 次級子選單面板修正（支援 JS 收合折疊） */
    ul[id="main-menu"] ul,
    .sm-clean ul {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        background-color: #111111 !important; /* 子選單使用更深的極黑，做出內縮層級感 */
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

        /* ⚙️ 子選單收合機制相容 */
        ul[id="main-menu"] ul[style*="display: none"],
        .sm-clean ul[style*="display: none"] {
            display: none !important;
        }

        /* 子選單連結縮排與字色 */
        ul[id="main-menu"] ul li a,
        .sm-clean ul li a {
            padding-left: 40px !important; /* 向右縮排 40px */
            background-color: #111111 !important;
            color: #dddddd !important; /* 次級文字呈柔和微白 */
            font-size: 14px !important;
        }

/* ============================================================
   6. 頁尾與 GoTop 手機優化
   ============================================================ */
.main-footer {
    padding: 40px 0 20px 0 !important;
    width: 100% !important;
}

.footer-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 30px !important;
    color: #ffffff !important;
    font-weight: 600;
}

.footer-section {
    text-align: center !important;
    align-items: center !important;
}

/* 3. 針對信箱等可點擊的超連結（最重要，因為原本可能被全域 a 標籤染成灰色） */
.footer-section .contact-list a {
    color: #ffffff !important;
    text-decoration: underline; /* 加上底線，讓客戶一眼就知道這是可以點擊寄信的連結 */
    transition: color 0.2s ease;
}

/* 4. 滑鼠移到信箱連結時的互動：漸變為你的品牌「焦糖金」，細節感拉滿 */
.footer-section .contact-list a:hover {
    color: #A67C52 !important;
    text-decoration: none;
}

.main-footer ul li,
.main-footer p {
    text-align: center !important;
}

.footer-title::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.footer-links,
.footer-share {
    display: none !important;
}

.footer-logo {
    display: block !important;
    width: 200px !important;
    height: 120px !important;
    margin: 0 auto 15px auto !important;
    background-image: url('/img/logo-purple-m.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

.copyright {
    color: #ccc;
    font-family: Arial;
    font-size: 12px;
    text-align: center !important;
    width: 100%;
    margin-top: 60px;
}

.gotop {
    bottom: 90px !important; /* 避免擋到或被擋到的安全高度 */
}

/* 使用更長的選擇器路徑與 !important，強制把點點壓回下方 */
#slides .slides-pagination,
nav.slides-pagination {
    position: absolute !important; /* 從 fixed 改回相對大圖定位 */
    top: auto !important; /* 取消鎖定頂部 */
    bottom: 20px !important; /* 重新移回大圖下方邊緣往上 20px 處 */
    height: auto !important; /* 取消 44px 的高度 */
    background-color: transparent !important; /* 拔掉全黑背景，改成透明，才不會擋到樹 */
    z-index: 10 !important; /* 圖層只要比大圖高，但比主導覽列低即可 */
}

/* 1. 🎯 核心修改：將包含選單、購物車、會員中心的最頂部功能列與下拉選單調到最高層級 */
.header-tools,
.top-nav,
.dropdown,
.dropdown-menu,
/* 這裡加上您會員下拉選單實際使用的 class 名稱，確保它萬無一失 */
div[class*="dropdown"] {
    z-index: 10005 !important;
    position: relative; /* 確保 z-index 生效 */
}

/* 1. 固定在手機導覽列下方的公告欄（維持先前完美的設定） */
nav#main-nav .top-announcement {
    position: fixed !important;
    top: 50px !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    z-index: 10000 !important;
    padding: 8px 15px !important;
    box-sizing: border-box !important;
}

/* 2. 💻 商城首頁及其他通用容器：維持原本的推擠距離（不變動） */
.container.product-grid-fix-container,
.path,
main {
    padding-top: 100px !important;
}

/* 3. 🎯 核心微調：單獨對「商品明細頁容器」及其內部的麵包屑進行縮減 */
.container.product-details-container {
    margin-top: 120px !important; /* 稍微調降最外層的推擠，避免疊加 */
}

/* 消除明細頁內部多餘的累加間距，讓標題往上彈回舒適的位置 */
.container.product-details-container nav[aria-label="breadcrumb"],
.container.product-details-container main,
.container.product-details-container .path {
    margin-top: 0px !important; /* 💡 清除內部元件的重複 margin-top 疊加 */
    padding-top: 20px !important; /* 改用微量的 padding 稍微襯托，畫面最精緻 */
}

.global-sticky-header {
    position: -webkit-sticky !important; /* 支援 Safari */
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
}

/*手機版限制公告標題的欄寬，使其不跟關閉紐重疊*/
.announcement-ticker {
    margin-right: 35px !important;
}

.coupon-container {
    margin-top: 100px !important;
}