@font-face {
    font-family: AR StdMingti Extra B5;
    src: url(../css/fonts/文鼎中特標準宋體.TTF);
}

html {
    scroll-behavior: smooth; /* 這行能讓所有錨點跳轉變得平滑且一次到位 */
}

html, body {
    max-width: 100%;
    overflow-x: hidden; /* 強制切除所有超出右側的內容 */
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box; /* 確保 padding 不會撐開寬度 */
}

/* ============================================================
   第一層：最底層全網頁大背景（改為深黑色，完美呼應導覽列與 Footer）
   ============================================================ */
body {
    font-family: Arial, SimSun-ExtB, 微軟正黑體, 'Microsoft JhengHei UI', sans-serif;
    letter-spacing: 1.2px;
    overflow-x: hidden;
    padding-right: 0;
    box-sizing: content-box;
    background-color: #0d0d0d !important; /* 🚀 改用極致深邃黑 */
    color: #2D312E;
}

h1 {
    font-size: 38px;
    line-height: 60px;
}

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

h3 {
    font-size: 20px;
    line-height: 42px;
}

h4 {
    font-size: 14px;
    line-height: 36px;
}

p {
/*    font-size: 14px;*/
    color: #555555;
    margin: 0;
}

a:link, a:checked, a:active, a:visited {
    text-decoration: none;
    color: #777;
}

input[type=text], select, textarea {
    background-color: #f8f8f8;
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
    box-sizing: border-box;
}

/* ============================================================
   第二層：置中商城與詳情頁主要容器（維持淺色、暖感大地灰）
   ============================================================ */
.main-content,
.history-container,
.container-fluid,
.row,
.card,
.card-profile,
.container,
.container-content,
.product-details-container {
    /* 🚀 核心優化：更換為清新 professional 的暖感大地灰，並加上圓角與高奢陰影 */
    background-color: #E6F0F3 !important;
}

.product-details-container {
    /* 1. 將 padding-top 調整為 20px，維持麵包屑與下方主圖的緊湊微幅留白 */
    padding-top: 20px !important;
    /* 2. 核心修正：將電腦版的 margin-top 大幅提高到 110px！ */
    margin-top: 110px !important;
    margin-bottom: 80px;
    max-width: 1100px;
    /* 增加高級展示盒層次感 */
    padding-left: 30px !important;
    padding-right: 30px !important;
    padding-bottom: 40px !important;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); /* 讓淺色主區塊在黑底上優雅浮現 */
}

    /* 標題改用內斂專業的「霧面松柏綠」 */
    .shop-title, .product-details-container h2, .product-details-container .product-title {
        color: #3A4F41 !important;
        font-weight: 700;
    }

/* ============================================================
   🔝 萬用 GoTop 按鈕
   ============================================================ */
.gotop {
    position: fixed !important;
    right: 25px !important;
    z-index: 99999 !important;
    display: none;
}

    .gotop a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 50px !important;
        height: 50px !important;
        background-color: #3A4F41 !important; /* 🚀 改用松柏綠背景，呼應全站主色調 */
        color: #ffffff !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
    }

        .gotop a::before {
            content: "\f106" !important;
            font-family: "Font Awesome 6 Free" !important;
            font-weight: 900 !important;
            font-size: 24px !important;
        }

@supports not (content: "\f106") {
    .gotop a::before {
        content: "↑" !important;
        font-family: inherit !important;
        font-weight: bold !important;
        font-size: 20px !important;
    }
}

.gotop a:hover {
    background-color: #28372D !important; /* 更沉穩的深松柏綠 */
    transform: translateY(-5px) !important;
    color: #ffffff !important;
}

/* 商城樹狀選單共同元件 */
.tree-menu {
    list-style: none;
    padding-left: 10px;
}

.l1-item {
    margin-bottom: 8px;
}

.l1-link {
    font-weight: bold;
    color: #3A4F41; /* 🚀 松柏綠 */
    font-size: 16px;
    text-decoration: none;
}

    .l1-link:hover {
        color: #A67C52; /* 🚀 琥珀焦糖金 */
    }

.l2-tree {
    list-style: none;
    padding-left: 15px;
    margin-top: 3px;
}

.l2-item {
    margin-bottom: 4px;
}

.l2-link {
    color: #4A4F4B;
    font-size: 14px;
    text-decoration: none;
}

    .l2-link:hover {
        color: #A67C52; /* 🚀 琥珀焦糖金 */
        padding-left: 3px;
        transition: 0.2s;
    }

.l3-tree {
    list-style: none;
    padding-left: 20px;
    margin-top: 2px;
}

.l3-link {
    color: #7f8c8d;
    font-size: 13px;
    text-decoration: none;
}

    .l3-link:hover {
        color: #A67C52;
    }

/* 購物車 Badge */
a.cart-link {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

span.cart-badge,
.cart-badge {
    position: absolute !important;
    top: -8px !important;
    right: -10px !important;
    width: 18px !important;
    height: 18px !important;
    background-color: #ff4d4f !important;
    color: #ffffff !important;
    font-size: 11px !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;
}

/* 輪播區塊 */
#slides {
    margin-top: 44px !important;
    height: 50vh !important;
    max-height: 50vh !important;
    background-color: #000000 !important;
    overflow: hidden !important;
    position: relative !important;
}

    #slides .slides-control {
        height: 100% !important;
    }

    #slides .slides-container div {
        height: 100% !important;
        background-color: #000000 !important;
        position: absolute !important;
    }

    #slides .slides-container img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        margin: auto !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        display: block !important;
        transform: none !important;
    }

/* ==========================================================================
   下半部內容日式禪風美化
   ========================================================================== */
.top-title {
    text-align: center;
    margin-bottom: 25px;
    position: relative;
}

    .top-title h1 {
        font-size: 1.5rem;
        color: #3A4F41; /* 🚀 沉穩松柏綠 */
        font-weight: 600;
        letter-spacing: 2px;
        margin-bottom: 4px;
    }

    .top-title h2 {
        font-size: 0.85rem;
        color: #A29E9A;
        letter-spacing: 3px;
        font-weight: 400;
    }

    .top-title::after {
        content: '';
        display: block;
        width: 30px;
        height: 1.5px;
        background-color: #3A4F41; /* 🚀 松柏綠線條 */
        margin: 12px auto 0 auto;
        opacity: 0.6;
    }

.main-about, .main-news, .main-location {
    padding: 45px 20px;
    background-color: #E6F0F3; /* 🚀 同步為大地灰 */
}

    .main-about p {
        font-size: 0.98rem;
        line-height: 1.8;
        color: #4A4F4B;
        text-align: justify;
        letter-spacing: 0.5px;
        margin-bottom: 25px;
    }

.main-news {
    background-color: #EBEAE6; /* 🚀 微調深一階的灰米色做出層次 */
    padding: 45px 20px;
}

.main-news-links {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

    .main-news-links li {
        background-color: #FFFFFF;
        padding: 16px;
        border-radius: 8px;
        margin-bottom: 12px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
        display: flex;
        flex-direction: column;
        cursor: pointer;
        transition: transform 0.2s;
    }

        .main-news-links li:active {
            transform: scale(0.98);
        }

        .main-news-links li.tag {
            border-left: 4px solid #3A4F41; /* 🚀 松柏綠置頂標籤 */
        }

.main-news-date {
    font-size: 0.8rem;
    color: #8C8884;
    margin-bottom: 6px;
    font-weight: 500;
    text-decoration: none !important;
}

.main-news-title {
    font-size: 0.98rem;
    color: #2D312E;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none !important;
}

.main-location-content {
    font-size: 0.98rem;
    line-height: 1.8;
    color: #4A4F4B;
    margin-bottom: 25px;
}

    .main-location-content iframe {
        width: 100% !important;
        height: 250px !important;
        border-radius: 8px !important;
        border: none !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        margin-top: 15px;
    }

/* 現代化按鈕美化 */
.modern-more-btn {
    display: block;
    width: 140px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    text-align: center;
    border: 1px solid #3A4F41; /* 🚀 松柏綠 */
    color: #3A4F41 !important;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-decoration: none !important;
    border-radius: 20px;
    font-weight: 500;
    transition: all 0.3s;
}

    .modern-more-btn:active {
        background-color: #3A4F41;
        color: #FFFFFF !important;
    }

.lightbox {
    display: none;
}

/* ============================================================
   第三層：個別商品框與明細元件樣式（精緻美化）
   ============================================================ */
.details-img-wrapper {
    background-color: #fff;
    border: none !important; /* 🚀 拔掉生硬框線 */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); /* 優雅微陰影 */
    overflow: hidden;
}

    .details-img-wrapper img {
        width: 100%;
        height: auto;
        display: block;
    }

.btn-loading {
    pointer-events: none;
    opacity: 0.7;
}

/* 收藏按鈕專屬樣式 */
.btn-outline-wishlist {
    border: 1px solid #dee2e6;
    color: #6c757d;
    background: #fff;
    transition: all 0.3s ease;
}

    .btn-outline-wishlist:hover {
        border-color: #A67C52; /* 🚀 改用焦糖金 */
        color: #A67C52;
        background: #fffaf5;
    }

    .btn-outline-wishlist.active {
        color: #A67C52;
        border-color: #A67C52;
    }

/* 產品 AI 說明區整體文字排版優化 */
.product-description-html-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #4A4F4B; /* 🚀 柔和灰黑 */
    letter-spacing: 0.5px;
}

    .product-description-html-content p {
        margin-bottom: 1.5rem;
    }

    .product-description-html-content h3 {
        font-size: 1.3rem;
        font-weight: 600;
        color: #3A4F41; /* 🚀 同步改用松柏綠 */
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    .product-description-html-content ul {
        list-style-type: none;
        padding-left: 0;
        margin-bottom: 1.5rem;
    }

        .product-description-html-content ul li {
            position: relative;
            padding-left: 24px;
            margin-bottom: 0.5rem;
        }

            .product-description-html-content ul li::before {
                content: "•";
                position: absolute;
                left: 8px;
                color: #3A4F41; /* 🚀 改用松柏綠點綴 */
                font-weight: bold;
                font-size: 1.2rem;
                top: -2px;
            }

    .product-description-html-content strong {
        color: #111;
        font-weight: 600;
    }

/* 🚀 價格字體優化：換掉刺眼亮紅，改用具備人文質感的木質焦糖金 */
.product-price, .text-danger {
    color: #A67C52 !important;
    font-weight: 700 !important;
}

/* ============================================================
   麵包屑解放修正
   ============================================================ */
.product-details-container nav[aria-label="breadcrumb"] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    background-color: transparent !important;
    z-index: 1 !important;
    display: block !important;
}

.product-details-container .breadcrumb-item,
.product-details-container .breadcrumb-item.active {
    color: #686D76 !important; /* 🚀 確保在暖灰背景上清晰好讀 */
}

/* 🚀 商品卡片質感重塑：加強框線與實體立體陰影 */
.card {
    /* 1. 框線優化：稍微加粗，並改用帶有低調質感的深松柏綠（與網頁標題呼應） */
    border: 2px solid #2C3E35 !important;
    /* 2. 圓角微調：讓商品盒線條更內斂 */
    border-radius: 8px !important;
    /* 3. 核心大招：立體環境陰影（Box Shadow） 
       透過一層細微的深色外陰影，讓卡片在淺藍綠底色上「浮」起來，產生實體展覽盒的厚度 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    /* 4. 微動態效果：滑鼠移過去時，卡片會微微浮起，增加高級互動感 */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

    /* 當滑鼠懸停在商品卡片上時的進階視覺 */
    .card:hover {
        transform: translateY(-5px) !important; /* 微微向上浮動 5 像素 */
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important; /* 陰影加深，立體感倍增 */
        border-color: #A67C52 !important; /* 懸停時，框線轉為焦糖金，與價格呼應！ */
    }

/* ==========================================================================
   🎯 精緻定格跑馬燈專用 CSS
   ========================================================================== */
.top-announcement {
    background-color: #2c4c38;
    color: #ffffff;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
    overflow: hidden;
}

.announcement-slider {
    display: flex;
    align-items: center;
    flex-grow: 1;
    height: 100%;
    overflow: hidden;
}

.announcement-icon {
    margin-right: 10px;
    flex-shrink: 0;
    z-index: 5;
    background-color: #2c4c38;
}

.announcement-ticker {
    flex-grow: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.ticker-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

/* 🎯 核心控制：預設所有公告都先隱藏並推到右邊畫面外 */
.ticker-item {
    position: absolute;
    top: 0;
    left: 100%;
    width: auto;
    white-space: nowrap;
    height: 40px;
    line-height: 40px;
    display: none;
    /* 💡 設定向左推移時的流暢速度，如果希望離場滑快一點，可以改成 2s */
    transition: left 3s linear;
}

    /* 🌟 當下正在播放的公告：顯示出來，並且一開始定格在最左邊 */
    .ticker-item.active {
        display: block;
        left: 0;
    }

    .ticker-item a {
        color: #ffffff !important;
        text-decoration: none;
        font-size: 14px;
        display: inline-block;
    }

        .ticker-item a:hover {
            text-decoration: underline;
        }

/* 關閉按鈕 */
.close-announcement {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding-left: 10px;
    flex-shrink: 0;
    z-index: 5;
    background-color: #2c4c38;
}

    .close-announcement:hover {
        opacity: 1;
    }

/* ==========================================================================
   🎯 全新公告欄排版與自適應控制
   ========================================================================== */

/* 公告欄基本樣式 */
.top-announcement {
    background-color: #2c4c38; /* 深植物綠 */
    color: #ffffff;
    text-align: center;
    padding: 10px 40px;
    font-size: 14px;
    letter-spacing: 1px;
    width: 100%;
    box-sizing: border-box;
}

/* 關閉按鈕樣式 */
.close-announcement {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    opacity: 0.7;
    line-height: 1;
}

    .close-announcement:hover {
        opacity: 1;
    }

.announcement-closed .top-announcement {
    display: none !important;
}

.announcement-closed .container,
.announcement-closed .container.product-grid-fix-container,
.announcement-closed .container.product-details-container,
.announcement-closed main,
.announcement-closed .path,
.announcement-closed body {
    margin-top: 56px !important; /* 💡 綠列消失後，自動向上回彈貼齊黑列（56px） */
}

/* ==========================================================================
   🎯 終極最高權重隱藏：不分電腦版、手機版，只要關閉一律強制消失
   ========================================================================== */
body.announcement-closed .top-announcement,
body.announcement-closed #siteAnnouncement,
.announcement-closed .top-announcement,
#siteAnnouncement[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.booking {
    text-align: left
}

/* 🎯 1. 針對 twzipcode 底下的縣市與鄉鎮市區外框（div） */
#twzipcode div[data-role="county"],
#twzipcode div[data-role="district"] {
    /* 🌟 核心修正：拔掉 width: 120px，改用 flex: 1 讓兩個下拉框以 1:1 比例平分並百分之百填滿右側空間 */
    flex: 1 !important;
    height: 40px !important; /* 鎖死外框高度 */
    border: 1px solid #ccc;
    line-height: 40px !important;
    padding: 0 !important; /* 清空外框 padding，交給裡面的 select 處理 */
    margin: 0 !important; /* 清除預設外距 */
    box-sizing: border-box !important;
    overflow: hidden !important; /* 避免套件怪怪的東西撐破 40px */
}

    /* 🎯 2. 針對兩個選單內部真正的下拉元件（select） */
    #twzipcode div[data-role="county"] select,
    #twzipcode div[data-role="district"] select {
        width: 100% !important; /* 寬度百分之百填滿剛剛平分好的外框 */
        height: 100% !important; /* 高度死死固定在 40px */
        line-height: 40px !important; /* 強制文字垂直置中，不切字 */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 8px !important; /* 讓文字往右移一點，維持高質感 */
        margin: 0 !important;
        border: none !important; /* 拔掉內部 select 的重複邊框，才不會看起來重複外框線 */
        background-color: transparent !important; /* 讓背景透明，透出外框的白底 */
        box-sizing: border-box !important;
    }

/* 🎯 針對會員選單的項目進行精準微調 */
.header-tools .dropdown-menu .member-menu-item,
.header-tools .dropdown-menu .dropdown-item {
    /* 1. 強制覆蓋 Bootstrap 預設的變數 padding，上下給 4px 或 2px（數字愈小愈扁） */
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    /* 2. 如果希望更精準，可以直接限制它的最小高度（原本預設可能被撐到 56px） */
    height: 38px !important; /* 👈 可以設定 35px ~ 40px 之間，看你喜歡的緊湊度 */
    /* 3. 確保裡面的彈性盒子垂直置中 */
    display: flex !important;
    align-items: center !important;
}

    /* 🎯 順便檢查：裡面的小箭頭圖示是不是有偷偷帶有 margin 撐開高度 */
    .header-tools .dropdown-menu .member-menu-item i {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

.coupon-container {
    margin-top: 100px; /* 🚀 徹底避開頂部固定導覽列與公告欄重疊 */
    margin-bottom: 80px;
}

/* 精準鎖定 main-menu 底下的所有超連結狀態 */
#main-menu a,
#main-menu a:link,
#main-menu a:visited,
#main-menu a:active,
#main-menu a:focus,
.sm-clean a,
.sm-clean a:visited {
    color: #ffffff !important;
}

/* 💡 貼心小優化：滑鼠移上去 (Hover) 時，如果你希望有一點點亮度的微調（例如變微灰白或維持亮白），可以保留或調整這裡 */
#main-menu a:hover,
.sm-clean a:hover {
    color: #ffffff !important;
    opacity: 0.85; /* 讓滑鼠移上去時有淡淡的互動感，如果不想要也可以刪除這行 */
}