/* 全站樣式 - 質感淡紫色風格 */
body {
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', sans-serif;
    margin: 0;
    line-height: 1.7;
    background: linear-gradient(135deg, #f8f7ff 0%, #f0eeff 25%, #e8e4ff 50%, #f5f3ff 75%, #ffffff 100%);
    color: #4a4a6a;
    letter-spacing: 0.025rem;
}

/* =======================================
   1. Header 基礎樣式與固定定位 (保持不變)
   ======================================= */
.main-header {
    /* 動態背景 - 在 banner 區域時更明顯 */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    
    position: fixed;
    top: 0;
    width: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    
    padding: 15px 0; 
    transition: all 0.4s ease;
}

/* 在 banner 區域時的 header 樣式 */
.main-header.on-banner {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

/* 滾動後的 header 樣式 */
.main-header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    padding: 12px 0;
}

/* Header隱藏狀態 - 向上移動並變透明 */
.main-header.header-hidden {
    transform: translateY(-100%);
    opacity: 0;
}

/* Header半隱藏狀態 - 部分透明 */
.main-header.header-semi-hidden {
    opacity: 0.4;
    background: rgba(108, 99, 255, 0.05);
}

/* 內容容器：使用 Flexbox 劃分左右中三個區塊 (保持不變) */
.header-content-wrapper {
    max-width: 1200px; 
    margin: 0 auto;
    padding: 0 30px; 
    
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* =======================================
   2. Logo 和 Utility 區塊 (保持不變)
   ======================================= */
.logo-area {
    flex-basis: 200px; 
    flex-shrink: 0; 
}

.utility-nav {
    flex-basis: 200px; 
    flex-shrink: 0;
    text-align: right;
}

/* =======================================
   3. 主導航區塊 (保持不變)
   ======================================= */
.main-nav {
    flex-grow: 1; 
    text-align: center;
}

/* =======================================
   4. 連結列表與樣式 (Color & Font) (保持不變)
   ======================================= */

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; 
}

.main-nav li {
    margin: 0 15px; 
}

/* 連結文字樣式 - 適應白色背景 */
.main-nav a {
    color: #4a5568; /* 深灰色，在白色背景上清晰可見 */
    text-decoration: none;
    font-size: 0.95rem; 
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    letter-spacing: 0.025rem;
}

.main-nav a:hover,
.main-nav a.active {
    color: #6c63ff;
    background: rgba(108, 99, 255, 0.1);
    transform: translateY(-1px);
    border-bottom: none;
}

/* Banner 區域時的導覽樣式增強 */
.main-header.on-banner .main-nav a {
    color: #2d3748;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.main-header.on-banner .main-nav a:hover,
.main-header.on-banner .main-nav a.active {
    color: #6c63ff;
    background: rgba(108, 99, 255, 0.15);
    box-shadow: 0 2px 8px rgba(108, 99, 255, 0.2);
}

/* =======================================
   5. Logo 圖片樣式 (新：替換掉舊的文字 Logo 樣式)
   ======================================= */
/* =======================================
   品牌 Logo 區域樣式
   ======================================= */
.brand-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.brand-link:hover {
    transform: scale(1.02);
}

.brand-logo {
    display: block; 
    height: 45px; 
    width: auto;
    max-width: 100%; 
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* Banner 區域時的 LOGO 樣式 */
.main-header.on-banner .brand-logo {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.main-header.scrolled .brand-logo {
    height: 40px;
}

.brand-text {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c2c54;
    background: linear-gradient(45deg, #6c63ff, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: none; /* 預設隱藏，可在需要時顯示 */
}

/* 舊版相容性 */
.brand-name {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: unset; 
    font-size: unset; 
    font-weight: unset; 
    font-family: unset; 
    letter-spacing: unset;
}

.brand-name img {
    display: block; 
    height: 50px; 
    width: auto;
    max-width: 100%; 
    transition: filter 0.3s ease; 
}

/* =======================================
   Product Page Styles
   ======================================= */
.container h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2.5rem;
    color: #433842;
}

.product-list {
    /* 橫向排列為主，在較窄螢幕下提供水平捲軸 */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* 保持同一行（需要時會出現水平滾動） */
    gap: 1.5rem; /* 控制項目之間的間距 */
    align-items: flex-start;
    overflow-x: auto; /* 小螢幕可水平捲動 */
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
}

.product-item {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.35);

    /* 固定寬度卡片，讓多個卡片能在同一行顯示（桌面視窗可顯示多欄） */
    flex: 0 0 300px;
    max-width: 320px;

    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.product-item img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 1rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.product-item h3 {
    font-size: 1.5rem;
    color: #433842;
    margin-bottom: 0.5rem;
}

.product-item p {
    flex-grow: 1; /* 讓 p 元素填滿剩餘空間，使按鈕對齊底部 */
    color: #555;
    margin-bottom: 1.5rem;
}

.product-item .btn {
    /* 與 banner 按鈕樣式一致 */
    display: inline-block;
    background: #f1aed3; /* 與 banner 的主色一致 */
    color: #FDF6F0; /* 與 banner 按鈕文字色一致 */
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 30px;
    margin-top: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    transition: background 0.25s ease, color 0.25s ease, transform 0.12s ease;
    border: none;
}

.product-item .btn:hover {
    background: #ffffff; /* 同 banner hover 行為 */
    color: #7b3e82;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* 響應式：在小螢幕改為可換行（每行 1 張卡片） */
@media (max-width: 768px) {
    .product-list {
        flex-wrap: nowrap; /* 保持可水平滾動 */
    }
    .product-item {
        flex: 0 0 85%;
        max-width: 85%;
    }
}

@media (min-width: 1200px) {
    /* 在寬螢幕上稍微放寬卡片寬度以顯示更多欄 */
    .product-item {
        flex: 0 0 280px;
        max-width: 300px;
    }
}



/* =======================================
   6. 變色狀態：淺色背景 Header (新增：由 JS 控制切換)
   ======================================= */
.main-header.header-light {
    /* 淺色/白色半透明背景 */
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.main-header.header-light .main-nav a {
    color: #333333; /* 導航文字變深 */
}

.main-header.header-light .main-nav a:hover,
.main-header.header-light .main-nav a.active {
    color: #433842; /* 強調色變深 */
    border-bottom: 2px solid #433842;
}

.main-header.header-light .brand-name img {
    /* 將 Logo 變為深色，以適應淺色背景 */
    filter: brightness(0.2) sepia(1) hue-rotate(280deg) saturate(2);
}

/*
.banner {
    height: 150vh;
    background-image: linear-gradient(to bottom, #7b3e82, #934b8b, #aa5994, #c1689c, #d778a5, #e08ab5, #e89cc4, #f1aed3, #efc4e6, #efd9f3, #f4edfb, #ffffff);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
}

.banner-text h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
} */

/* .btn {
    display: inline-block;
    background: #8B4513;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 1rem;
} */
/* =======================================
   Banner 區塊設定 (包含背景圖片與文字置中)
   ======================================= */
.banner {
    /* 確保 Header 固定後，內容不會被 Header 遮擋 */
    padding-top: 80px; /* 根據你的 Header 高度（約 60px 加上下 padding 15px*2）來調整 */
    
    /* 設定 Banner 區塊的最小高度，確保圖片有足夠的顯示空間 */
    /* min-height: 600px;  或者你也可以設定 height: 60vh; 讓它佔據視窗高度的 60% */
    min-height: 100vh; 
    height: auto;
    /* 引用圖片路徑 - 假設你的圖片路徑是 /banner/你的圖片名稱.jpg */
    /* ⚠️ 請將 YOUR_IMAGE_NAME.jpg 替換為你實際的圖片檔名 */
    background-image: url('../images/banner/banner.png');
    
    /* 讓圖片覆蓋整個區域，不留白 */
    background-size: cover; 
    /* 讓圖片內容保持置中，即使視窗大小改變 */
    background-position: center center; 
    /* 讓圖片固定不動，產生視差捲動效果 (Parallax) */
    background-attachment: fixed; 
    
    /* 啟用 Flexbox 讓文字內容置中 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; /* 確保內部文字置中 */

    /* 添加一個黑色半透明的疊層，讓黑白圖片的文字更清晰 */
    /* 這行會與 background-image 疊加，讓文字更好閱讀 */
    background-color: rgba(0, 0, 0, 0.4); 
    background-blend-mode: multiply; /* 混合模式，讓顏色與圖片疊加 */
}

/* Banner 內部文字樣式 */
.banner-text {
    /* 增加文字的對比度，讓它在背景上更清楚 */
    color: #fff;
    /* 增加一點點文字陰影，讓文字從圖片中「跳」出來，更有質感 */
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8); /* 稍微深一點的陰影 */
    /* 讓文字內容有一個最大寬度，避免在超寬螢幕上拉得太開 */
    max-width: 800px;
    padding: 20px;
}

.banner-text h1 {
    font-size: 3rem; /* 標題大一點 */
    margin-bottom: 1rem;
    font-weight: 700;
}

.banner-text p {
    font-size: 1.2rem; /* 內文適中 */
    margin-bottom: 2rem;
}

/* 快速按鈕樣式 - 質感升級 */
.quick-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap; 
    margin-top: 32px;
}

.quick-buttons .btn {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    color: #ffffff; 
    padding: 14px 28px;
    text-decoration: none;
    border-radius: 32px;
    margin: 0;
    font-weight: 500;
    font-size: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.025rem;
}

.quick-buttons .btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}
/* =======================================
   Footer 連結樣式修正
   ======================================= */
footer a {
    /* 設定連結的基礎顏色為柔和的淺色 */
    color: #f4edfb; 
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:visited {
    /* ⚡ 關鍵修正：強制已訪問連結的顏色與未訪問連結一致 */
    color: #f4edfb; 
}

footer a:hover {
    /* Hover 時，使用 Header 的強調粉紫色，提升精緻度 */
    color: #f1aed3; 
}

/* 確保版權文字的顏色一致 */
footer p {
    color: #f4edfb;
    /* 調整版權與連結的間距 */
    margin-top: 10px; 
    margin-bottom: 0;
}

/* =======================================
   5. 響應式設計 (RWD)
   ======================================= */

/* =======================================
   漢堡選單按鈕 - 現代化設計
   ======================================= */
.hamburger-menu {
    display: none;
    background: rgba(108, 99, 255, 0.1);
    border: 2px solid rgba(108, 99, 255, 0.2);
    border-radius: 12px;
    cursor: pointer;
    padding: 12px;
    z-index: 1010;
    transition: all 0.3s ease;
    position: relative;
    width: 48px;
    height: 48px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hamburger-menu:hover {
    background: rgba(108, 99, 255, 0.2);
    border-color: rgba(108, 99, 255, 0.4);
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(108, 99, 255, 0.2);
}

.hamburger-menu:active {
    transform: scale(0.95);
}

.hamburger-bar {
    display: block;
    width: 22px;
    height: 2.5px;
    background: linear-gradient(90deg, #6c63ff, #8b5cf6);
    margin: 4px 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-radius: 2px;
    position: relative;
}

.hamburger-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #6c63ff);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hamburger-menu:hover .hamburger-bar::before {
    opacity: 1;
}

/* 漢堡選單打開時的動畫 (變成 X) */
.hamburger-menu.active {
    background: rgba(108, 99, 255, 0.3);
    border-color: rgba(108, 99, 255, 0.5);
    box-shadow: 0 6px 20px rgba(108, 99, 255, 0.3);
}

.hamburger-menu.active .hamburger-bar:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
    background: linear-gradient(90deg, #ff6b6b, #ee5a52);
}

.hamburger-menu.active .hamburger-bar:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}

.hamburger-menu.active .hamburger-bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
    background: linear-gradient(90deg, #ff6b6b, #ee5a52);
}

/* 漢堡選單的脈衝動畫效果 */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(108, 99, 255, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(108, 99, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(108, 99, 255, 0);
    }
}

.hamburger-menu.pulse {
    animation: pulse 2s infinite;
}

/* 漢堡選單的載入動畫 */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.hamburger-menu {
    animation: fadeInScale 0.5s ease-out;
}

/* 漢堡選單的微互動效果 */
.hamburger-menu:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.3);
}

/* 漢堡線條的個別動畫延遲 */
.hamburger-bar:nth-child(1) {
    transition-delay: 0s;
}

.hamburger-bar:nth-child(2) {
    transition-delay: 0.1s;
}

.hamburger-bar:nth-child(3) {
    transition-delay: 0.2s;
}

.hamburger-menu.active .hamburger-bar:nth-child(1) {
    transition-delay: 0.2s;
}

.hamburger-menu.active .hamburger-bar:nth-child(2) {
    transition-delay: 0.1s;
}

.hamburger-menu.active .hamburger-bar:nth-child(3) {
    transition-delay: 0s;
}

/* 手機版導覽選單項目的進場動畫 */
@media (max-width: 768px) {
    .main-nav.active li {
        animation: slideInUp 0.4s ease-out forwards;
        opacity: 0;
    }
    
    .main-nav.active li:nth-child(1) { animation-delay: 0.1s; }
    .main-nav.active li:nth-child(2) { animation-delay: 0.2s; }
    .main-nav.active li:nth-child(3) { animation-delay: 0.3s; }
    .main-nav.active li:nth-child(4) { animation-delay: 0.4s; }
    .main-nav.active li:nth-child(5) { animation-delay: 0.5s; }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* 中等螢幕斷點：平板 (例如：寬度 <= 992px) */
@media (max-width: 992px) {
    .header-content-wrapper {
        padding: 0 20px;
    }
    .main-nav li {
        margin: 0 10px;
    }
    .brand-name {
        font-size: 1.6rem;
    }
}

/* 小型螢幕斷點：手機 (例如：寬度 <= 768px) */
@media (max-width: 768px) {
    .header-content-wrapper {
        position: relative; /* 為了讓絕對定位的導航有參考點 */
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(25px) saturate(180%);
        -webkit-backdrop-filter: blur(25px) saturate(180%);
        padding: 0;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        animation: slideDown 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        margin: 0;
        transform: translateY(-1px);
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-21px);
        }
        to {
            opacity: 1;
            transform: translateY(-1px);
        }
    }

    .main-nav.active {
        display: block;
    }
    

    .main-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 20px 20px 25px 20px;
        margin: 0;
    }

    .main-nav li {
        margin: 0;
        width: 100%;
        max-width: 280px;
    }

    .main-nav a {
        font-size: 1rem;
        font-weight: 600;
        color: #2d3748;
        text-decoration: none;
        padding: 12px 20px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.8);
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    }
    
    /* 手機版導覽選單圖示 */
    .main-nav a i {
        font-size: 1.1rem;
        opacity: 0.8;
    }

    .main-nav a::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(108, 99, 255, 0.1), transparent);
        transition: left 0.5s ease;
    }

    .main-nav a:hover::before {
        left: 100%;
    }

    .main-nav a:hover {
        background: rgba(255, 255, 255, 0.95);
        border-color: rgba(108, 99, 255, 0.3);
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(108, 99, 255, 0.2);
        color: #6c63ff;
    }

    .main-nav a.active {
        background: rgba(255, 255, 255, 0.95);
        border-color: rgba(108, 99, 255, 0.5);
        box-shadow: 0 4px 20px rgba(108, 99, 255, 0.3);
        color: #6c63ff;
        font-weight: 700;
    }

    .hamburger-menu {
        display: block; /* 手機版顯示漢堡選單 */
    }

    .utility-nav {
        display: none; /* 在手機上隱藏空的 utility-nav */
    }

    .logo-area {
        flex-grow: 1; /* 讓 Logo 佔據左側空間 */
    }

    .banner-text h1 {
        font-size: 2.2rem;
    }
    .brand-name img {
    height: 40px; 
    max-width: 100%;
    }
    .logo-area,
    .utility-nav {
        flex-basis: auto; /* 移除 200px 的限制 */
        flex-shrink: 1;  /* 確保可以縮小 */
    }
}

footer {
    position: relative; /* 建立新的堆疊環境，確保 fixed 子元素參照正確 */
    text-align: center;
    padding: 2rem 0;
    background: #7b3e82;
    color: #f4edfb;
    margin-top: 2rem;
}

/* =======================================
   Partner Page Styles
   ======================================= */

.partner-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 15px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-sizing: border-box;
}

.partner-container h2, .partner-container .intro-text {
    text-align: center;
    color: #433842;
}

.partner-container h2 {
    margin-bottom: 0.5rem;
}

.partner-container .intro-text {
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.tab-nav {
    display: flex;
    justify-content: center;
    border-bottom: 2px solid #ddd;
    margin-bottom: 2rem;
}

.tab-link {
    padding: 10px 20px;
    cursor: pointer;
    background: transparent;
    border: none;
    font-size: 1.2rem;
    color: #666;
    transition: color 0.3s, border-bottom 0.3s;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px; /* Align with the container's border */
}

.tab-link.active {
    color: #7b3e82;
    border-bottom-color: #7b3e82;
    font-weight: 600;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.partner-layout {
    display: block;
    width: 100%;
}

.partner-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.partner-map {
    width: 100%;
    min-height: 300px;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 2rem;
}

.partner-card {
    background: #fff;
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: all 0.3s ease;
    border: 1px solid rgba(108, 99, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.partner-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6c63ff, #8b5cf6);
}

.partner-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(108, 99, 255, 0.2);
    border-color: rgba(108, 99, 255, 0.3);
}

.partner-info {
    flex-grow: 1;
    min-width: 0; /* 防止 flex 項目溢出 */
}

.partner-info h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #2c2c54;
    font-size: 1.3rem;
    font-weight: 600;
    border-bottom: 2px solid rgba(108, 99, 255, 0.2);
    padding-bottom: 0.5rem;
}

.partner-info p {
    margin: 0.8rem 0;
    color: #555;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.5;
}

.partner-info p i {
    color: #6c63ff;
    font-size: 1rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.partner-qrcode {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.partner-qrcode img {
    width: 90px;
    height: 90px;
    border-radius: 8px;
    border: 2px solid rgba(108, 99, 255, 0.2);
    transition: all 0.3s ease;
}

.partner-qrcode img:hover {
    border-color: #6c63ff;
    transform: scale(1.05);
}

.partner-qrcode::after {
    content: '掃描 QR Code';
    font-size: 0.8rem;
    color: #888;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .partner-list {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.2rem;
    }
}

@media (max-width: 768px) {
    /* 頁面整體優化 */
    .container {
        padding-top: 80px !important;
    }
    
    /* 頁面容器優化 */
    .partner-container {
        margin: 0.5rem 15px;
        padding: 1.5rem;
    }
    
    .partner-container h2 {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }
    
    .partner-container .intro-text {
        font-size: 1rem;
        margin-bottom: 1.5rem;
        padding: 0 10px;
    }
    
    /* 分頁導覽優化 */
    .tab-nav {
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }
    
    .tab-link {
        font-size: 0.9rem;
        padding: 10px 16px;
        flex: 1;
        min-width: 100px;
        border-radius: 20px;
    }
    
    /* 卡片列表優化 */
    .partner-list {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    
    /* 卡片設計重新優化 */
    .partner-card {
        flex-direction: column;
        text-align: center;
        padding: 1.2rem;
        border-radius: 12px;
        margin-bottom: 0;
    }
    
    .partner-info {
        order: 2;
        width: 100%;
    }
    
    .partner-qrcode {
        order: 1;
        margin-bottom: 1rem;
        align-self: center;
    }
    
    .partner-info h4 {
        font-size: 1.2rem;
        margin-bottom: 1rem;
        color: #2c2c54;
        text-align: center;
    }
    
    .partner-info p {
        justify-content: center;
        font-size: 0.9rem;
        margin: 0.6rem 0;
        text-align: center;
    }
    
    .partner-qrcode img {
        width: 90px;
        height: 90px;
        border-radius: 10px;
    }
    
    /* 地圖區域 */
    .partner-map {
        margin-top: 1.5rem;
        min-height: 250px;
        border-radius: 12px;
    }
}

@media (max-width: 480px) {
    /* 小螢幕頁面整體 */
    .container {
        padding-top: 70px !important;
    }
    
    /* 小螢幕容器優化 */
    .partner-container {
        margin: 0.5rem 10px;
        padding: 1rem;
        border-radius: 12px;
    }
    
    .partner-container h2 {
        font-size: 1.6rem;
        margin-bottom: 0.4rem;
    }
    
    .partner-container .intro-text {
        font-size: 0.9rem;
        margin-bottom: 1.2rem;
        padding: 0 5px;
    }
    
    /* 分頁按鈕小螢幕 */
    .tab-nav {
        gap: 0.3rem;
        margin-bottom: 1.2rem;
    }
    
    .tab-link {
        font-size: 0.8rem;
        padding: 8px 12px;
        min-width: 80px;
        border-radius: 15px;
    }
    
    /* 卡片列表小螢幕 */
    .partner-list {
        gap: 0.8rem;
        margin-bottom: 1.2rem;
    }
    
    /* 卡片設計小螢幕 */
    .partner-card {
        padding: 1rem;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    }
    
    .partner-info h4 {
        font-size: 1.1rem;
        margin-bottom: 0.8rem;
    }
    
    .partner-info p {
        font-size: 0.85rem;
        margin: 0.5rem 0;
    }
    
    .partner-info p i {
        font-size: 0.9rem;
        width: 16px;
    }
    
    .partner-qrcode {
        margin-bottom: 0.8rem;
    }
    
    .partner-qrcode img {
        width: 75px;
        height: 75px;
        border-radius: 8px;
    }
    
    .partner-qrcode::after {
        font-size: 0.7rem;
    }
    
    /* 地圖區域小螢幕 */
    .partner-map {
        margin-top: 1.2rem;
        min-height: 200px;
        border-radius: 10px;
    }
}

/* =======================================
   Partners Page Styles
   ======================================= */

.container.partners-page {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 120px; /* 確保內容在 Header 下方 */
}

.store-tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid #ddd;
    margin-bottom: 2rem;
}

.store-tabs .tab-link {
    padding: 10px 20px;
    cursor: pointer;
    background: none;
    border: none;
    font-size: 1rem;
    color: #555;
    position: relative;
    transition: color 0.3s ease;
}

.store-tabs .tab-link:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #7b3e82;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.store-tabs .tab-link.active {
    color: #333;
    font-weight: 600;
}

.store-tabs .tab-link.active:after {
    transform: scaleX(1);
}

.store-content-wrapper {
    display: none; /* JS 會控制顯示 */
}

.store-content-wrapper.active {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.store-info {
    flex: 1;
    min-width: 300px;
}

.store-info h3 {
    font-size: 2rem;
    color: #433842;
    margin-bottom: 1.5rem;
}

.info-block {
    margin-bottom: 1.5rem;
}

.info-block h4 {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #555;
}

.info-block p {
    margin: 0;
    color: #333;
    line-height: 1.8;
}

.store-visuals {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.qr-code-container {
    text-align: center;
}

.qr-code-container img {
    max-width: 180px;
    height: auto;
    border: 1px solid #eee;
    padding: 5px;
    border-radius: 8px;
}

.map-container {
    width: 100%;
    height: 400px;
    background-color: #f0f0f0;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .store-content-wrapper.active {
        flex-direction: column;
    }
}

/* =======================================
   Partner Page Styles
   ======================================= */
.partners-container {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 15px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.partners-container h2, .partners-container > p {
    text-align: center;
    color: #433842;
}

.partners-container > p {
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.partner-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    border-bottom: 2px solid #ddd;
    flex-wrap: wrap;
}

.tab-link {
    padding: 10px 25px;
    cursor: pointer;
    background: transparent;
    border: none;
    font-size: 1.1rem;
    color: #666;
    transition: color 0.3s, border-bottom 0.3s;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px; /* Align with container border */
}

.tab-link.active {
    color: #7b3e82;
    font-weight: 600;
    border-bottom-color: #7b3e82;
}

.tab-pane {
    display: none;
    animation: fadeIn 0.5s;
}

.tab-pane.active {
    display: block;
}

.partner-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.partner-info h4 {
    font-size: 1.8rem;
    color: #433842;
    margin-bottom: 1rem;
    border-left: 4px solid #f1aed3;
    padding-left: 10px;
}

.partner-info p {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
}

.partner-info .qr-code {
    max-width: 150px;
    height: auto;
    margin-top: 1rem;
    border: 1px solid #eee;
    padding: 5px;
    border-radius: 8px;
}

.partner-map #map {
    height: 450px;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsive adjustments for partners page */
@media (max-width: 768px) {
    .partner-details-grid {
        grid-template-columns: 1fr;
    }
    .partner-map {
        margin-top: 2rem;
    }
    .tab-link {
        padding: 8px 15px;
    }
}

/* =======================================
   Contact Page Styles
   ======================================= */
.contact-page-container {
    padding-top: 120px;
    text-align: center;
}

.contact-card {
    max-width: 500px;
    margin: 2rem auto;
    padding: 2.5rem;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 15px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.contact-card h2 {
    color: #433842;
    margin-bottom: 1rem;
}

.contact-card p {
    color: #555;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.contact-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.contact-info .qr-code-img {
    width: 180px;
    height: 180px;
    border-radius: 15px;
    border: 3px solid rgba(255, 255, 255, 0.8);
    padding: 10px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.contact-info .qr-code-img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.contact-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.contact-info .btn {
    display: inline-block;
    background: #00C300;
    color: #fff;
    padding: 14px 32px;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: 2px solid #00C300;
    box-shadow: 0 4px 15px rgba(0, 195, 0, 0.3);
}

.contact-info .btn:hover {
    background: #ffffff;
    color: #00C300;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 195, 0, 0.4);
}

@media (max-width: 768px) {
    .contact-card {
        padding: 2rem;
    }
}

/* =======================================
   About Page Styles
   ======================================= */
.about-container {
    padding-top: 140px; /* 增加頂部間距，讓整體內容下移 */
    padding-bottom: 4rem; /* 增加底部間距 */
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.about-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    min-height: 65vh; /* 稍微降低最小高度，讓佈局更緊湊 */
}

.about-image-panel {
    position: relative;
    height: 480px; /* 稍微調整高度 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    perspective: 1000px;
}

.about-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: all 0.6s ease-in-out;
    background-color: #eee; /* Placeholder background */
    border-radius: 15px; /* Rounded corners for images */
    transform: translateX(50%) scale(0.8);
    z-index: 0;
}

.about-image.active {
    opacity: 1;
    transform: translateX(0) scale(1);
    z-index: 2;
}

.about-image.next {
    opacity: 1;
    transform: translateX(15%) scale(0.9);
    z-index: 1; /* Behind active, but visible */
    filter: brightness(0.9);
}


.about-nav {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 30px;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 5; /* Ensure nav is on top */
}

.about-arrow-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0 10px;
    transition: color 0.3s;
}

.about-arrow-btn:hover {
    color: #f1aed3;
}

.story-counter {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    min-width: 40px;
    text-align: center;
}

.about-content-panel {
    position: relative;
    padding: 3rem;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden; /* Ensures content respects border-radius */
}

.about-content {
    position: absolute;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    pointer-events: none;
    /* Ensure it's within the parent's padding */
    top: 3rem;
    left: 3rem;
    right: 3rem;
    bottom: 3rem;
}

.about-content.active {
    position: relative;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    /* Reset position for active state */
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
}

.about-content h3 {
    font-size: 2.2rem; /* Slightly smaller for balance */
    color: #433842;
    margin-bottom: 1.5rem; /* Increased margin */
    position: center;
    padding-bottom: 1rem;
}

.about-content h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: #f1aed3;
}

.about-content p {
    font-size: 1.1rem;
    color: #333; /* Darker for better contrast */
    line-height: 1.9; /* More spacing */
    margin-bottom: 2.5rem; /* More space before button */
}

.about-more-btn {
    display: inline-block;
    background: #f1aed3;
    color: #fff;
    padding: 12px 30px; /* Larger padding */
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    transition: background 0.3s, transform 0.3s;
}

.about-more-btn:hover {
    background: #7b3e82;
    transform: translateY(-2px);
}

@media (max-width: 992px) {
    .about-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .about-image-panel {
        height: 400px; /* Adjust height for smaller screens */
    }
    .about-content-panel {
        text-align: center;
    }
}

/* =======================================
   Back to Top Button Styles - 修正版
   ======================================= */
.back-to-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.25);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.back-to-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(99, 102, 241, 0.35);
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
}

/* 使用純CSS箭頭替代圖片 */
.back-to-top-btn::before {
    content: '↑';
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    line-height: 1;
}

.back-to-top-btn img {
    display: none; /* 隱藏原始圖片 */
}

/* =======================================
   Simple Footer Styles - 簡潔版
   ======================================= */
.simple-footer {
    background: linear-gradient(135deg, #2c2c54, #40407a);
    color: #ffffff;
    margin-top: 60px;
}

.footer-main {
    padding: 40px 0 20px 0;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    text-align: center;
}

/* Footer資訊區塊 */
.footer-info h3 {
    font-size: 1.8rem;
    margin: 0 0 10px 0;
    background: linear-gradient(45deg, #f1aed3, #d778a5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-info p {
    color: #e0e0e0;
    margin: 0 0 20px 0;
    font-size: 1.1rem;
}

.footer-links {
    margin-top: 20px;
}

.footer-links a {
    color: #e0e0e0;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #f1aed3;
}

/* 底部版權 */
.footer-bottom {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.footer-bottom p {
    margin: 0;
    color: #b0b0b0;
    font-size: 0.9rem;
}

/* 響應式設計 */
@media (max-width: 768px) {
    .footer-content {
        padding: 0 20px;
    }
    
    .footer-links {
        margin-top: 15px;
    }
}

/* =======================================
   Enhanced Footer Styles - 豐富版頁尾
   ======================================= */
.enhanced-footer {
    background: linear-gradient(135deg, #2c2c54, #40407a, #2c2c54);
    color: #ffffff;
    margin-top: 60px;
    position: relative;
}

.enhanced-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #6c63ff, transparent);
}

.enhanced-footer .footer-main {
    padding: 50px 0 30px 0;
}

.enhanced-footer .footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    text-align: left;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    align-items: start;
}

/* 品牌資訊區 - 佔用更多空間 (2fr) */
.footer-brand {
    grid-column: span 1;
    padding-right: 20px;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.footer-logo {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.footer-brand h3 {
    font-size: 1.8rem;
    margin: 0;
    background: linear-gradient(45deg, #f1aed3, #d778a5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brand-slogan {
    color: #e0e0e0;
    font-size: 1.2rem;
    margin: 0 0 15px 0;
    font-weight: 500;
}

.brand-description {
    color: #c0c0c0;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 25px 0;
}

/* 社群媒體連結 */
.social-links {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #e0e0e0;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border: 2px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.social-links a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease;
}

.social-links a:hover::before {
    width: 100%;
    height: 100%;
}

/* 個別社群媒體懸停效果 */
.social-line:hover {
    background: #00C300 !important;
    border-color: #00C300 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 195, 0, 0.4);
}

.social-facebook:hover {
    background: #1877F2 !important;
    border-color: #1877F2 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(24, 119, 242, 0.4);
}

.social-instagram:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important;
    border-color: #E4405F !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(228, 64, 95, 0.4);
}

.social-email:hover {
    background: #EA4335 !important;
    border-color: #EA4335 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(234, 67, 53, 0.4);
}

/* 通用懸停效果 */
.social-links a:hover {
    color: #ffffff;
}

/* 社群媒體 icon 特殊樣式 - Font Awesome 版本 */
.social-links a i {
    font-size: 18px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.3s ease;
}

/* 個別社群媒體品牌色彩 */
.social-line i {
    color: #00C300 !important;
}

.social-facebook i {
    color: #1877F2 !important;
}

.social-instagram i {
    color: #E4405F !important;
}

.social-email i {
    color: #EA4335 !important;
}

/* 懸停時統一變白色 */
.social-links a:hover i {
    color: #ffffff !important;
    transform: scale(1.1);
}

/* 特殊的 Instagram 漸層效果 */
.social-instagram i {
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.social-links a:hover .social-instagram i {
    background: none;
    -webkit-text-fill-color: #ffffff;
    color: #ffffff !important;
}

/* 導覽區塊 */
.footer-nav h4,
.footer-services h4,
.footer-contact h4 {
    color: #f1aed3;
    font-size: 1.2rem;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Footer 導覽樣式 */
.footer-nav .nav-list,
.service-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.footer-nav .nav-list li,
.service-list li {
    margin-bottom: 12px;
}

.footer-nav .nav-list a {
    color: #e0e0e0;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
    font-size: 0.95rem;
    padding: 8px 0;
}

.footer-nav .nav-list a:hover {
    color: #f1aed3;
}

.service-list li {
    color: #c0c0c0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}

/* Footer 聯絡資訊區 - 重新設計 */
.footer-contact .contact-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 20px;
    margin-bottom: 25px;
}

.footer-contact .contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e0e0e0;
    font-size: 0.9rem;
    margin-bottom: 0;
}

.footer-contact .contact-item i {
    color: #6c63ff;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

/* QR Code 區塊 */
.qr-section {
    text-align: center;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(108, 99, 255, 0.2);
    max-width: 140px;
    margin: 0 auto;
}

.qr-title {
    color: #f1aed3;
    font-size: 0.85rem;
    margin: 0 0 10px 0;
    font-weight: 500;
}

.qr-code {
    width: 70px;
    height: 70px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.qr-code:hover {
    transform: scale(1.1);
    border-color: #6c63ff;
}

/* Icon 樣式 - 使用 CSS 圖示 */
.enhanced-footer i[class^="icon-"] {
    font-style: normal;
    font-size: 16px;
    width: 16px;
    height: 16px;
    display: inline-block;
    text-align: center;
}

/* 具體圖示內容 */
.icon-menu::before { content: "☰"; }
.icon-home::before { content: "⌂"; }
.icon-info::before { content: "ⓘ"; }
.icon-shopping::before { content: "♦"; }
.icon-partners::before { content: "⚭"; }
.icon-contact::before { content: "✉"; }
.icon-service::before { content: "⚙"; }
.icon-community::before { content: "♦"; }
.icon-event::before { content: "◈"; }
.icon-discount::before { content: "◊"; }
.icon-knowledge::before { content: "◉"; }
.icon-consultation::before { content: "◎"; }
.icon-phone::before { content: "☎"; }
.icon-location::before { content: "◉"; }
.icon-phone-alt::before { content: "☏"; }
.icon-clock::before { content: "◷"; }
.icon-email-alt::before { content: "✉"; }
/* 舊的 emoji icon 已被 Font Awesome 取代 */
.icon-close::before { content: "✕"; }

/* =======================================
   Header 導覽選單增強樣式
   ======================================= */
.main-nav .nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    text-decoration: none;
    color: #4a4a6a;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(108, 99, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.nav-link:hover::before {
    left: 100%;
}

.nav-link:hover {
    color: #6c63ff;
    background: rgba(108, 99, 255, 0.05);
    transform: translateY(-2px);
}

.nav-link.active {
    color: #6c63ff;
    background: rgba(108, 99, 255, 0.1);
    font-weight: 600;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: linear-gradient(90deg, #6c63ff, #8b5cf6);
    border-radius: 2px;
}

.nav-text {
    font-size: 0.95rem;
}

.nav-link i {
    font-size: 1rem;
    color: inherit;
}

/* 行動裝置導覽遮罩 */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-nav-overlay.active {
    display: block;
    opacity: 1;
}

/* 額外功能區域 */
.utility-nav {
    display: flex;
    align-items: center;
}

.utility-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* 響應式導覽 */
@media (max-width: 768px) {
    .main-nav .nav-list {
        position: fixed;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        flex-direction: column;
        padding: 1rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        transform: translateY(-100%);
        transition: transform 0.3s ease;
        z-index: 1000;
        gap: 0.5rem;
    }
    
    .main-nav.active .nav-list {
        transform: translateY(0);
    }
    
    .nav-link {
        justify-content: center;
        padding: 15px 20px;
        border-radius: 12px;
        font-size: 1.1rem;
    }
    
    .nav-link i {
        font-size: 1.2rem;
    }
    
    .brand-text {
        display: inline; /* 在小螢幕顯示品牌文字 */
        font-size: 1.2rem;
    }
    
    .brand-logo {
        height: 35px;
    }
}

/* 新增的 Icon 樣式 */
.icon-wine::before { content: "◈"; }
.icon-gift::before { content: "◊"; }
.icon-celebration::before { content: "◉"; }
.icon-temperature::before { content: "◷"; }
.icon-palette::before { content: "◈"; }
.icon-star::before { content: "★"; }
.icon-heart::before { content: "♥"; }
.icon-design::before { content: "◎"; }
.icon-quality::before { content: "◉"; }
.icon-party::before { content: "◈"; }
.icon-vip::before { content: "◊"; }
.icon-store::before { content: "◉"; }
.icon-box::before { content: "◈"; }
.icon-smile::before { content: "☺"; }
.icon-users::before { content: "♦"; }
.icon-battery::before { content: "◈"; }
.icon-drop::before { content: "◉"; }
.icon-refresh::before { content: "↻"; }
.icon-diamond::before { content: "◊"; }
.icon-dice::before { content: "◈"; }
.icon-mobile::before { content: "◉"; }
.icon-chat::before { content: "◎"; }

/* Feature Icon 樣式 */
.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #6c63ff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature-icon i {
    font-size: 2.5rem;
}

/* Method Icon 樣式 */
.method-icon {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #6c63ff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.method-icon i {
    font-size: 2rem;
}

/* Info Icon 樣式 */
.info-icon {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: #6c63ff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.info-icon i {
    font-size: 1.8rem;
}

/* Product Feature Icon 樣式 */
.feature i {
    margin-right: 5px;
    color: #6c63ff;
}

/* 手機版快速導覽 - 桌面版隱藏 */
.mobile-quick-nav {
    display: none;
}

/* 響應式設計 */
@media (min-width: 1400px) {
    .enhanced-footer .footer-content {
        max-width: 1400px;
        padding: 0 50px;
        gap: 50px;
    }
    
    .footer-brand {
        padding-right: 30px;
    }
}

@media (max-width: 1024px) {
    .enhanced-footer .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    
    .footer-brand {
        grid-column: span 2;
        padding-right: 0;
        max-width: 100%;
        margin-bottom: 20px;
    }
    
    .footer-nav,
    .footer-services {
        padding-right: 20px;
    }
    
    .footer-contact {
        padding-left: 20px;
    }
}

@media (max-width: 768px) {
    .enhanced-footer {
        margin-top: 30px;
        overflow-x: hidden;
    }
    
    .enhanced-footer .footer-content {
        display: block;
        padding: 0 15px;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .enhanced-footer .footer-main {
        padding: 25px 0 15px 0;
        overflow-x: hidden;
    }
    
    /* 品牌區域 - 簡化版 */
    .footer-brand {
        text-align: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .brand-logo {
        justify-content: center;
        margin-bottom: 8px;
    }
    
    .brand-description {
        display: none; /* 手機版隱藏詳細描述 */
    }
    
    .social-links {
        justify-content: center;
        gap: 12px;
        margin-top: 10px;
    }
    
    .social-links a {
        width: 48px;
        height: 48px;
    }
    
    .social-links a i {
        font-size: 20px;
    }
    
    /* 摺疊式導覽區塊 */
    .footer-nav,
    .footer-services {
        display: none; /* 手機版隱藏，保持簡潔 */
    }
    
    /* 手機版快速導覽 */
    .mobile-quick-nav {
        display: block;
        text-align: center;
        margin: 15px 0;
        padding: 12px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .quick-nav-links {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .quick-nav-links a {
        color: #e0e0e0;
        text-decoration: none;
        font-size: 0.85rem;
        padding: 6px 12px;
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
    }
    
    .quick-nav-links a:hover {
        background: rgba(108, 99, 255, 0.3);
        color: #ffffff;
    }
    
    /* 精簡聯絡資訊 */
    .footer-contact {
        text-align: center;
        margin-bottom: 15px;
    }
    
    .footer-contact h4 {
        font-size: 1rem;
        margin-bottom: 12px;
        justify-content: center;
    }
    
    /* 只顯示重要聯絡資訊 */
    .footer-contact .contact-info {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 15px;
        grid-template-columns: none;
    }
    
    .footer-contact .contact-item {
        font-size: 0.85rem;
        justify-content: center;
        margin-bottom: 0;
    }
    
    /* 隱藏部分聯絡資訊，只保留重要的 */
    .contact-item:nth-child(1), /* 服務據點 */
    .contact-item:nth-child(3)  /* 服務時間 */ {
        display: none;
    }
    
    /* QR Code 區塊 - 更緊湊 */
    .qr-section {
        max-width: 140px;
        margin: 0 auto;
        padding: 10px;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 8px;
    }
    
    .qr-code {
        width: 60px;
        height: 60px;
    }
    
    .qr-title {
        font-size: 0.8rem;
        margin-bottom: 8px;
    }
}

@media (max-width: 480px) {
    .enhanced-footer .footer-content {
        padding: 0 10px;
    }
    
    .enhanced-footer .footer-main {
        padding: 20px 0 10px 0;
    }
    
    .footer-brand {
        margin-bottom: 15px;
        padding-bottom: 12px;
    }
    
    .social-links {
        gap: 10px;
    }
    
    .social-links a {
        width: 44px;
        height: 44px;
    }
    
    .social-links a i {
        font-size: 18px;
    }
    
    .footer-contact {
        margin-bottom: 10px;
    }
    
    .footer-contact h4 {
        font-size: 0.9rem;
        margin-bottom: 10px;
    }
    
    .contact-item {
        font-size: 0.8rem;
    }
    
    .qr-section {
        max-width: 120px;
        padding: 8px;
    }
    
    .qr-code {
        width: 50px;
        height: 50px;
    }
    
    .qr-title {
        font-size: 0.75rem;
        margin-bottom: 6px;
    }
    
    .footer-bottom p {
        font-size: 0.75rem;
        padding: 0 10px;
    }
}

/* =======================================
   Products Page Styles - 豐富產品頁面
   ======================================= */
.products-page {
    min-height: 100vh;
    padding-top: 80px;
}

/* 頁面標題區 */
.products-hero {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    padding: 60px 0;
    text-align: center;
    color: white;
}

.hero-content h1 {
    font-size: 2.5rem;
    margin: 0 0 15px 0;
    font-weight: 600;
}

.hero-subtitle {
    font-size: 1.2rem;
    margin: 0;
    opacity: 0.9;
}

/* 產品分類導航 */
.product-categories {
    background: white;
    padding: 30px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.category-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.category-tab {
    background: transparent;
    border: 2px solid #e0e0e0;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #666;
}

.category-tab:hover {
    border-color: #6366f1;
    color: #6366f1;
}

.category-tab.active {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
}

/* 產品網格 */
.products-container {
    padding: 50px 0;
    background: #f8f9fa;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 產品卡片 */
.product-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* 產品圖片區 */
.product-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}

/* 產品標籤 */
.product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    z-index: 2;
}

.product-badge {
    background: #ff6b6b;
}

.product-badge.new {
    background: #4ecdc4;
}

.product-badge.premium {
    background: #ffd93d;
    color: #333;
}

/* 產品懸停層 */
.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(241, 174, 211, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-card:hover .product-overlay {
    opacity: 1;
}

.quick-view-btn {
    background: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.quick-view-btn:hover {
    transform: scale(1.05);
}

/* 產品資訊區 */
.product-info {
    padding: 25px;
}

.product-info h3 {
    font-size: 1.3rem;
    margin: 0 0 10px 0;
    color: #333;
}

.product-desc {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 15px 0;
}

/* 產品特色 */
.product-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 15px 0;
}

.feature {
    background: #f8f9fa;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    color: #666;
}

/* 產品價格 */
.product-price {
    margin: 20px 0;
}

.price {
    font-size: 1.3rem;
    font-weight: 600;
    color: #6366f1;
}

.original-price {
    font-size: 1rem;
    color: #999;
    text-decoration: line-through;
    margin-left: 10px;
}

/* 產品按鈕 */
.product-actions {
    display: flex;
    gap: 10px;
}

.btn-primary {
    flex: 1;
    background: #6366f1;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-primary:hover {
    background: #4f46e5;
}

.btn-secondary {
    width: 45px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
}

/* 購買須知區 */
.purchase-info {
    padding: 60px 0;
    background: white;
}

.purchase-info h3 {
    text-align: center;
    font-size: 2rem;
    margin: 0 0 40px 0;
    color: #333;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.info-item {
    text-align: center;
    padding: 30px 20px;
    border-radius: 15px;
    background: #f8f9fa;
    transition: transform 0.3s ease;
}

.info-item:hover {
    transform: translateY(-5px);
}

.info-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.info-item h4 {
    font-size: 1.2rem;
    margin: 0 0 10px 0;
    color: #333;
}

.info-item p {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

/* 響應式設計 */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .category-tabs {
        gap: 10px;
    }
    
    .category-tab {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 15px;
    }
    
    .product-card {
        max-width: 400px;
        margin: 0 auto;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* =======================================
   Homepage Enhancement Styles
   ======================================= */
/* 特色介紹區 */
.features {
    padding: 80px 0;
    background: linear-gradient(135deg, #faf9ff, #f3f2ff);
}

.features h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 50px;
    color: #333;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.feature-item {
    text-align: center;
    padding: 40px 20px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-10px);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.feature-item h3 {
    font-size: 1.3rem;
    margin: 0 0 15px 0;
    color: #333;
}

.feature-item p {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* 最新動態區 */
.latest-news {
    padding: 80px 0;
    background: #f8f9fa;
}

.latest-news h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 50px;
    color: #333;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.news-item {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.news-item:hover {
    transform: translateY(-5px);
}

.news-date {
    color: #6366f1;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.news-item h3 {
    font-size: 1.2rem;
    margin: 0 0 15px 0;
    color: #333;
}

.news-item p {
    color: #666;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.read-more {
    color: #6366f1;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.read-more:hover {
    color: #4f46e5;
}

/* 社群統計區 */
.stats {
    padding: 80px 0;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
}

.stat-label {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* =======================================
   Contact Page Enhancement Styles
   ======================================= */
.contact-page {
    padding-top: 100px;
    min-height: 100vh;
}

.contact-header {
    text-align: center;
    margin-bottom: 50px;
}

.contact-header h1 {
    font-size: 2.5rem;
    margin: 0 0 15px 0;
    color: #333;
}

.contact-header p {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
}

.contact-content {
    margin-bottom: 60px;
}

.contact-card.primary {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 40px;
}

.contact-card.primary h2 {
    margin: 0 0 10px 0;
    font-size: 1.8rem;
}

.contact-card.primary p {
    margin: 0 0 30px 0;
    opacity: 0.9;
}

.contact-actions {
    margin-top: 20px;
}

.contact-note {
    margin: 15px 0 0 0;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* 舊樣式已整合到上方的 .contact-info .qr-code-img */

/* 聯絡方式 */
.contact-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.method-item {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

.method-item:hover {
    transform: translateY(-5px);
}

.method-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.method-item h3 {
    margin: 0 0 10px 0;
    color: #333;
}

.method-item p {
    margin: 0 0 5px 0;
    color: #6366f1;
    font-weight: 600;
}

.method-item small {
    color: #666;
    font-size: 0.9rem;
}

/* FAQ區塊 */
.faq-section {
    margin-bottom: 60px;
}

.faq-section h2 {
    font-size: 2rem;
    margin-bottom: 30px;
    color: #333;
}

.faq-list {
    display: grid;
    gap: 20px;
}

.faq-item {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
}

.faq-item h3 {
    margin: 0 0 10px 0;
    color: #6366f1;
    font-size: 1.1rem;
}

.faq-item p {
    margin: 0;
    color: #666;
    line-height: 1.6;
}

/* 營業資訊 */
.business-info h2 {
    font-size: 2rem;
    margin-bottom: 30px;
    color: #333;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.info-card {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.info-card h3 {
    margin: 0 0 15px 0;
    color: #6366f1;
    font-size: 1.2rem;
}

.info-card p {
    margin: 0;
    color: #666;
    line-height: 1.8;
}

/* 響應式設計 */
@media (max-width: 768px) {
    .features h2, .latest-news h2 {
        font-size: 1.8rem;
    }
    
    .features-grid, .news-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    /* Contact Page 手機版優化 */
    .contact-page {
        padding-top: 80px;
    }
    
    .contact-header {
        margin-bottom: 30px;
        padding: 0 15px;
    }
    
    .contact-header h1 {
        font-size: 2rem;
        margin-bottom: 10px;
    }
    
    .contact-header p {
        font-size: 1rem;
    }
    
    /* LINE 卡片手機版優化 */
    .contact-card.primary {
        margin: 0 15px 30px 15px;
        padding: 25px 20px;
        border-radius: 15px;
    }
    
    .contact-card.primary h2 {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }
    
    .contact-card.primary p {
        font-size: 0.9rem;
        margin-bottom: 20px;
    }
    
    /* QR Code 手機版優化 */
    .contact-info {
        gap: 15px;
    }
    
    .contact-info .qr-code-img {
        width: 140px;
        height: 140px;
        border-radius: 12px;
        border: 2px solid rgba(255, 255, 255, 0.9);
        padding: 8px;
    }
    
    .contact-actions {
        gap: 10px;
    }
    
    .btn.btn-primary,
    .contact-info .btn {
        padding: 12px 24px;
        font-size: 0.95rem;
        border-radius: 20px;
        min-width: 160px;
    }
    
    .contact-note {
        font-size: 0.85rem;
        margin-top: 10px;
    }
    
    /* 聯絡方式手機版 */
    .contact-methods {
        grid-template-columns: 1fr;
        gap: 15px;
        margin: 0 15px 40px 15px;
    }
    
    .method-item {
        padding: 20px;
        border-radius: 12px;
    }
    
    .method-item h3 {
        font-size: 1.1rem;
        margin-bottom: 8px;
    }
    
    .method-item p {
        font-size: 0.95rem;
    }
    
    .method-item small {
        font-size: 0.8rem;
    }
    
    /* FAQ 手機版 */
    .faq-section {
        margin: 0 15px 40px 15px;
    }
    
    .faq-section h2 {
        font-size: 1.6rem;
        margin-bottom: 20px;
    }
    
    .faq-list {
        gap: 15px;
    }
    
    .faq-item {
        padding: 15px;
        border-radius: 10px;
    }
    
    .faq-item h3 {
        font-size: 1rem;
        margin-bottom: 8px;
    }
    
    .faq-item p {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    /* 營業資訊手機版 */
    .business-info {
        margin: 0 15px 30px 15px;
    }
    
    .business-info h2 {
        font-size: 1.6rem;
        margin-bottom: 20px;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .info-card {
        padding: 15px;
        border-radius: 10px;
    }
    
    .info-card h3 {
        font-size: 1rem;
        margin-bottom: 8px;
    }
    
    .info-card p {
        font-size: 0.85rem;
        line-height: 1.5;
    }
}

/* Contact Page 小螢幕優化 */
@media (max-width: 480px) {
    .contact-page {
        padding-top: 70px;
    }
    
    .contact-header {
        margin-bottom: 20px;
        padding: 0 10px;
    }
    
    .contact-header h1 {
        font-size: 1.8rem;
    }
    
    .contact-header p {
        font-size: 0.9rem;
    }
    
    /* LINE 卡片小螢幕 */
    .contact-card.primary {
        margin: 0 10px 25px 10px;
        padding: 20px 15px;
    }
    
    .contact-card.primary h2 {
        font-size: 1.3rem;
    }
    
    .contact-card.primary p {
        font-size: 0.85rem;
        margin-bottom: 15px;
    }
    
    /* QR Code 小螢幕優化 */
    .contact-info {
        gap: 12px;
    }
    
    .contact-info .qr-code-img {
        width: 120px;
        height: 120px;
        border-radius: 10px;
        border: 2px solid rgba(255, 255, 255, 0.9);
        padding: 6px;
    }
    
    .contact-actions {
        gap: 8px;
    }
    
    .btn.btn-primary,
    .contact-info .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
        border-radius: 18px;
        min-width: 140px;
    }
    
    .contact-note {
        font-size: 0.8rem;
    }
    
    /* 聯絡方式小螢幕 */
    .contact-methods {
        margin: 0 10px 30px 10px;
        gap: 12px;
    }
    
    .method-item {
        padding: 15px;
    }
    
    .method-item h3 {
        font-size: 1rem;
    }
    
    .method-item p {
        font-size: 0.9rem;
    }
    
    .method-item small {
        font-size: 0.75rem;
    }
    
    /* FAQ 小螢幕 */
    .faq-section {
        margin: 0 10px 30px 10px;
    }
    
    .faq-section h2 {
        font-size: 1.4rem;
    }
    
    .faq-list {
        gap: 12px;
    }
    
    .faq-item {
        padding: 12px;
    }
    
    .faq-item h3 {
        font-size: 0.95rem;
    }
    
    .faq-item p {
        font-size: 0.85rem;
    }
    
    /* 營業資訊小螢幕 */
    .business-info {
        margin: 0 10px 25px 10px;
    }
    
    .business-info h2 {
        font-size: 1.4rem;
    }
    
    .info-grid {
        gap: 12px;
    }
    
    .info-card {
        padding: 12px;
    }
    
    .info-card h3 {
        font-size: 0.95rem;
    }
    
    .info-card p {
        font-size: 0.8rem;
    }
}