/* --- 1. 基礎重設與變數 --- */
:root {
    --primary-color: #d6336c;
    --text-color: #333;
    --bg-light: #f9f9f9;
}

body {
    margin: 0;
    padding: 0;
    font-family: "PingFang TC", "Microsoft JhengHei", sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    padding-top: 75px; /* 預留導覽列高度 */
}

/* --- 2. 導覽列 (Navbar) --- */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 75px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    z-index: 9999;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

nav.scrolled {
    height: 60px;
    background: rgba(255, 255, 255, 0.95);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.2rem;
}

nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li a {
    text-decoration: none;
    color: #555;
    padding: 10px 15px;
    font-weight: 500;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: var(--primary-color);
}

/* --- 3. Hero Banner --- */
.hero {
    height: 60vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    position: relative;
    transition: background-image 1s ease-in-out;
}

.hero::before {
    content: "";
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    background: rgba(0,0,0,0.3);
}

.hero-content {
    position: relative;
    z-index: 1;
}

.cta-buttons .cta {
    display: inline-block;
    padding: 12px 25px;
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    margin: 10px;
    transition: transform 0.3s;
}

.cta.secondary {
    background: white;
    color: var(--primary-color);
}

/* --- 4. 產品卡片網格 (核心功能) --- */
section {
    padding: 60px 5%;
    transition: background 0.5s ease;
}

h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2rem;
    color: #444;
}

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative;
    transition: transform 0.3s;
    opacity: 0; /* 配合淡入動畫 */
    animation: fadeIn 0.5s forwards;
}

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

.card img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
}

.card-number {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(214, 51, 108, 0.8);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 2;
}

.card-content {
    padding: 15px;
    background: white;
}

.card-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: #333;
}

.card-desc {
    font-size: 0.9rem;
    color: #777;
}

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

/* --- 5. 手機版 RWD --- */
/* 終極方案：強制縮減平板文字佔比 */
@media screen and (max-width: 1366px) {
    /* 1. 強制文字方塊高度縮小，不准遮住照片一半 */
    .card-content {
        height: auto !important;
        max-height: 50px !important; /* 強制限高，不讓字撐大 */
        padding: 4px !important;
        bottom: 0 !important;
        top: auto !important; /* 確保它在底部 */
    }

    /* 2. #數字 縮到最小 */
    .card-number {
        font-size: 10px !important;
        padding: 2px 5px !important;
        transform: scale(0.8); /* 二次縮小 */
        left: 2px !important;
        top: 2px !important;
    }

    /* 3. 標題：強制變小，且不准換行 */
    .card-title {
        font-size: 13px !important;
        line-height: 1.1 !important;
        margin: 0 !important;
        white-space: nowrap !important; /* 強制一行 */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 4. 描述：在平板上幾乎不顯示或極小 */
    .card-desc {
        font-size: 9px !important;
        line-height: 1 !important;
        margin: 0 !important;
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}
/* --- 6. 其他元件 --- */
#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    z-index: 1000;
}

.site-footer {
    background: #333;
    color: #fff;
    padding: 40px 5%;
    text-align: center;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 30px;
}/* --- 4. 產品卡片網格 (桌機 6 欄設定) --- */
.card-container {
    display: grid;
    /* 桌機版強制 6 欄，且每欄等寬 */
    grid-template-columns: repeat(6, 1fr); 
    gap: 15px; /* 卡片之間的間距 */
    padding: 10px 0;
}

/* 針對螢幕較小的平板或小筆電做調整，避免 6 欄太擠 */
@media (max-width: 1200px) {
    .card-container {
        grid-template-columns: repeat(4, 1fr); /* 螢幕中等時改為 4 欄 */
    }
}

@media (max-width: 992px) {
    .card-container {
        grid-template-columns: repeat(3, 1fr); /* 螢幕再小一點改為 3 欄 */
    }
}

@media (max-width: 768px) {
    .card-container {
        grid-template-columns: repeat(2, 1fr); /* 手機版維持 2 欄，方便閱讀 */
        gap: 10px;
    }/* --- 針對平板螢幕 (769px 到 1199px) 的微調 --- */
@media screen and (min-width: 769px) and (max-width: 1199px) {
    /* 1. 導覽列字體縮小 */
    nav ul li a {
        font-size: 14px !important;
        padding: 8px 10px !important;
        white-space: nowrap !important;
    }
    .brand span {
        font-size: 16px !important;
    }

    /* 2. 卡片標題與描述縮小 */
    .card-title {
        font-size: 1rem !important; /* 稍微縮小一點 */
    }
    .card-desc {
        font-size: 0.8rem !important;
    }
    
    /* 3. 調整卡片間距，讓畫面不擁擠 */
    .card-container {
        gap: 12px !important;
        padding: 15px !important;
    }
}
}/* --- 1. 基礎設定與活潑動態 --- */
:root {
    --primary-gradient: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    --gold-glow: 0 0 15px rgba(212, 175, 55, 0.5);
}

body {
    margin: 0;
    font-family: "PingFang TC", "Microsoft JhengHei", sans-serif;
    background-color: #fffafb; /* 淡淡的粉底色 */
}

/* --- 2. 導覽列與子導覽列 (全部置中) --- */
.sub-nav {
    display: flex;
    justify-content: center; /* 置中 */
    flex-wrap: wrap;
    gap: 15px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    border-radius: 50px;
    margin: 20px auto;
    width: fit-content;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.sub-nav a {
    text-decoration: none;
    color: #d6336c;
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 20px;
    transition: all 0.3s;
    border: 1px solid transparent;
}

.sub-nav a:hover {
    background: #d6336c;
    color: white;
    transform: scale(1.1);
}

/* --- 3. 標題特效 --- */
h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #444;
    margin: 40px 0;
    position: relative;
    display: block;
}

h2::after {
    content: "❤";
    display: block;
    font-size: 1rem;
    color: #ff9a9e;
}

/* --- 4. 產品卡片：有色邊框與滑動特效 --- */
.card-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr); 
    gap: 20px;
    padding: 20px;
}

.card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* 預設彩色邊框 */
    border: 3px solid transparent;
    background-image: linear-gradient(white, white), var(--primary-gradient);
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* 滑鼠移上去：變色、放大、發光 */
.card:hover {
    transform: scale(1.05) translateY(-10px);
    box-shadow: 0 15px 30px rgba(214, 51, 108, 0.3);
    border: 3px solid #ff9a9e;
}

.card img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    transition: transform 0.5s;
}

.card:hover img {
    transform: scale(1.1);
}

/* --- 5. 文字浮現特效 --- */
.card-content {
    padding: 12px;
    text-align: center; /* 文字置中 */
    background: white;
}

.card-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #d6336c;
    margin-bottom: 5px;
}

.card-desc {
    font-size: 0.85rem;
    color: #888;
}

/* --- 6. 區塊背景變色 (讓每一區更有特色) --- */
#wedding-trends-section { background: linear-gradient(to bottom, #fff, #fff0f3); }
#mother-dresses-section { background: linear-gradient(to bottom, #fff0f3, #f0f4ff); }
#wedding-services-section { background: linear-gradient(to bottom, #f0f4ff, #f9f0ff); }
#suits-section { background: linear-gradient(to bottom, #f9f0ff, #f5f5f5); }

/* --- 7. 手機版自動調整 --- */
@media (max-width: 1200px) { .card-container { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { 
    .card-container { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    h2 { font-size: 1.8rem; }
}

/* 閃爍動畫：用於卡片編號 */
.card-number {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #d6336c;
    color: white;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    z-index: 10;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}/* --- 圖片容器：加上黑色漸層底色 --- */
.card-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3/4;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* 這裡是關鍵：黑色漸層遮罩 */
.card-image::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%; /* 漸層高度佔圖片的一半以上 */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 100%);
    z-index: 1;
    pointer-events: none; /* 讓滑鼠可以穿透遮罩點擊圖片 */
}

/* --- 文字浮在漸層上方 --- */
.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 15px;
    z-index: 2; /* 確保在漸層(z-index:1)之上 */
    text-align: center;
    background: transparent; /* 移除原本的白色背景 */
    transition: transform 0.3s ease;
}

.card-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffffff; /* 文字改為白色 */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* 增加文字陰影更好讀 */
    margin-bottom: 5px;
}

.card-desc {
    font-size: 0.85rem;
    color: #eeeeee; /* 副標題改為淺灰色 */
    opacity: 0.9;
}

/* --- 懸停時的動態效果 --- */
.card:hover .card-image img {
    transform: scale(1.1);
}

.card:hover .card-content {
    transform: translateY(-5px); /* 懸停時文字向上浮動一點 */
}

/* 修改卡片本體：移除白色背景，讓它更像精品展示 */
.card {
    background: #000; /* 卡片底色改黑，避免圖片未載入時漏白 */
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid rgba(255,255,255,0.1); /* 淡淡的細邊框 */
}/* --- 產品卡片容器 (維持 6 欄) --- */
.card-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr); 
    gap: 15px;
    padding: 20px;
}

/* --- 卡片主體：設定為相對定位的容器 --- */
.card {
    position: relative; /* 讓內容可以疊在上面 */
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s ease;
    border: 2px solid transparent;
    aspect-ratio: 3/4; /* 強制卡片比例統一 */
}

/* 滑鼠移上去的特效：外框發光 */
.card:hover {
    transform: translateY(-10px);
    border-color: #ff9a9e;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

/* --- 圖片設定 --- */
.card a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.card:hover img {
    transform: scale(1.1);
}

/* --- 黑色漸層遮罩 (使用 ::after 偽元素直接加在 <a> 上面) --- */
.card a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%; /* 漸層高度 */
    background: linear-gradient(to top, 
        rgba(0, 0, 0, 0.9) 0%, 
        rgba(0, 0, 0, 0.4) 50%, 
        transparent 100%);
    z-index: 1;
}

/* --- 文字內容：直接定位到卡片底部 --- */
.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    z-index: 2; /* 確保在黑色漸層之上 */
    text-align: center;
    transition: transform 0.3s ease;
}

.card-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffffff; /* 白色文字 */
    text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
    margin-bottom: 4px;
}

.card-desc {
    font-size: 0.85rem;
    color: #ddd; /* 淺灰色描述 */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

/* --- 卡片編號 (左上角小標籤) --- */
.card-number {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #d6336c;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    z-index: 3;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* --- RWD 手機版調整 --- */
@media (max-width: 1200px) { .card-container { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { 
    .card-container { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .card-title { font-size: 0.95rem; }
    .card-desc { font-size: 0.75rem; }
}/* --- 黑色漸層遮罩 (調整為 1/3 高度) --- */
.card a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* 修改這裡：從 70% 改為 35%，大約就是 1/3 高度 */
    height: 35%; 
    background: linear-gradient(to top, 
        rgba(0, 0, 0, 0.85) 0%,   /* 底部最深 */
        rgba(0, 0, 0, 0.4) 50%,   /* 中間過渡 */
        transparent 100%);        /* 頂部完全透明 */
    z-index: 1;
}

/* --- 為了讓文字在 1/3 處更好看，微調文字間距 --- */
.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 10px 15px 10px; /* 稍微縮小內距 */
    z-index: 2;
    text-align: center;
}/* --- 主題切換按鈕區塊 (置中) --- */
.theme-btn-container {
    text-align: center;
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* --- 通用按鈕樣式 --- */
.theme-btn {
    padding: 8px 25px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    color: white;
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.theme-btn:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

.theme-btn:active {
    transform: scale(0.95);
}

/* --- 對應色塊設定 --- */

/* 1. 浪漫 (粉色系) */
.theme-btn:nth-child(1) {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    border: 1px solid #ff80ab;
    color: #fff;
}

/* 2. 優雅 (金橘/大地色系) */
.theme-btn:nth-child(2) {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    border: 1px solid #f9a825;
    color: #fff;
}

/* 3. 清新 (綠色/水藍系) */
.theme-btn:nth-child(3) {
    background: linear-gradient(135deg, #a1ffce 0%, #faffd1 100%);
    color: #2e7d32; /* 清新色字用深綠比較好讀 */
    border: 1px solid #81c784;
}/* --- 卡片編號：初始狀態與消失動畫 --- */
.card-number {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #d6336c;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    z-index: 3;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    
    /* 設定動畫過渡時間，讓它消失得更平滑 */
    transition: opacity 0.4s ease, transform 0.4s ease;
    opacity: 1; /* 初始完全顯示 */
}

/* 當滑鼠移入卡片 (.card) 時，編號 (.card-number) 隱藏 */
.card:hover .card-number {
    opacity: 0; /* 變透明 */
    transform: translateY(-5px); /* 同時稍微往上飄移，視覺更生動 */
    pointer-events: none; /* 確保消失後不會擋到點擊 */
}/* --- 1. 卡片與網格 (桌機 6 欄) --- */
.card-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr); 
    gap: 15px;
    padding: 20px;
}

.card {
    position: relative;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    aspect-ratio: 3/4; /* 保持統一比例 */
}

/* 滑鼠移入卡片整體：向上彈跳 */
.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}

/* --- 2. 數字編號特效：滑鼠靠近隱藏 --- */
.card .card-number {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #d6336c;
    color: white;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    z-index: 10; /* 最上層 */
    transition: opacity 0.4s ease, transform 0.4s ease;
    opacity: 1;
}

/* 核心：滑鼠靠近卡片，數字消失 */
.card:hover .card-number {
    opacity: 0 !important;
    transform: translateY(-10px);
}

/* --- 3. 圖片與 1/3 黑色漸層 --- */
.card a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.card:hover img {
    transform: scale(1.1);
}

/* 黑色漸層：控制在底部 35% (約 1/3) */
.card a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25%; 
    background: linear-gradient(to top, 
        rgba(0, 0, 0, 0.9) 0%, 
        rgba(0, 0, 0, 0.4) 60%, 
        transparent 100%);
    z-index: 1;
}

/* --- 4. 文字內容：對齊您的 HTML 結構 --- */
.card .card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    z-index: 5; /* 確保在漸層之上 */
    text-align: center;
}

.card .card-title {
    font-weight: bold;
    font-size: 1.05rem;
    color: #ffffff; /* 白色文字 */
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

.card .card-desc {
    font-size: 0.8rem;
    color: #ddd; /* 淺灰文字 */
    margin: 5px 0 0 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* --- 5. 手機版調整 --- */
@media (max-width: 1200px) { .card-container { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { 
    .card-container { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}/* --- CTA 按鈕基礎樣式 --- */
.cta {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

/* --- 1. 立即預約：呼吸心跳動態 --- */
.cta:not(.secondary) {
    background: linear-gradient(135deg, #d6336c 0%, #ff4d91 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(214, 51, 108, 0.4);
    /* 啟動呼吸動畫 */
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { transform: scale(1); box-shadow: 0 4px 15px rgba(214, 51, 108, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 6px 25px rgba(214, 51, 108, 0.6); }
    100% { transform: scale(1); box-shadow: 0 4px 15px rgba(214, 51, 108, 0.4); }
}

/* --- 2. 查看更多：光暈動態 --- */
.cta.secondary {
    background: white;
    color: #d6336c;
    border: 2px solid #d6336c;
    margin-left: 10px;
}

.cta.secondary:hover {
    background: #d6336c;
    color: white;
    /* 懸停時閃爍一下 */
    animation: shine 0.5s forwards;
}

@keyframes shine {
    0% { box-shadow: 0 0 0 0 rgba(214, 51, 108, 0.4); }
    100% { box-shadow: 0 0 0 15px rgba(214, 51, 108, 0); }
}

/* 按鈕點擊時的下壓感 */
.cta:active {
    transform: scale(0.95);
}/* 這是保險，確保數字絕對會消失 */
.card .card-number {
    transition: opacity 0.3s ease !important;
}

.card:hover .card-number {
    opacity: 0 !important;
    visibility: hidden !important;
}/* --- 導覽列與 LOGO 生動化 --- */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px); /* 磨砂玻璃效果 */
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

/* LOGO 動態：滑鼠靠近會微微跳動並發光 */
.brand .logo {
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.brand:hover .logo {
    transform: rotate(360deg) scale(1.2); /* 旋轉一圈並放大 */
    filter: drop-shadow(0 0 5px rgba(214, 51, 108, 0.5));
}

.brand:hover {
    color: #d6336c; /* 文字變粉色 */
}

/* 導覽選單樣式 */
nav ul {
    display: flex;
    list-style: none;
    gap: 20px;
}

nav ul li a {
    text-decoration: none;
    color: #555;
    font-size: 0.95rem;
    transition: color 0.3s;
    position: relative;
}

/* 導覽文字底部線條動畫 */
nav ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #d6336c;
    transition: width 0.3s;
}

nav ul li a:hover::after {
    width: 100%;
}

nav ul li a:hover {
    color: #d6336c;
}/* --- 1. 強力解決數字消失與 LOGO 動態 (解決上傳失效) --- */

/* 數字編號強制隱藏 */
.card .card-number {
    position: absolute !important;
    top: 10px;
    left: 10px;
    background: #d6336c !important;
    color: #fff !important;
    z-index: 20 !important;
    transition: all 0.3s ease-in-out !important;
    opacity: 1;
}

.card:hover .card-number {
    opacity: 0 !important;
    transform: translateY(-5px) !important;
}

/* LOGO 旋轉放大 */
.brand .logo {
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.brand:hover .logo {
    transform: rotate(360deg) scale(1.2) !important;
}

/* --- 2. 解決手機版選單太佔空間 (縱列改為隱藏或精簡) --- */

/* 桌機版選單 (預設) */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

nav ul {
    display: flex;
    list-style: none;
    gap: 15px;
    margin: 0;
    padding: 0;
}

/* 手機版 (螢幕小於 768px) 特效 */
@media (max-width: 768px) {
    /* 讓選單文字變小，並橫向排列，避免佔空間 */
    nav {
        padding: 10px;
    }
    
    nav ul {
        gap: 8px; /* 縮小間距 */
    }

    nav ul li a {
        font-size: 13px; /* 縮小字體 */
        padding: 5px 2px;
    }

    /* 隱藏較不重要的選單，或是讓它不換行 */
    nav {
        flex-wrap: nowrap; 
        overflow-x: auto; /* 若選單太長可以左右滑動，不會擠成縱列 */
    }

    .brand {
        font-size: 1rem;
        flex-shrink: 0; /* 防止 LOGO 被擠壓 */
    }
}/* --- 修正手機導覽列佔空間問題 --- */
@media (max-width: 768px) {
    nav {
        flex-direction: row !important; /* 強制橫向 */
        justify-content: space-between !important;
        padding: 8px 10px !important;
    }

    nav ul {
        display: flex !important;
        flex-direction: row !important; /* 確保選單不變縱列 */
        gap: 5px !important; /* 縮小項目間距 */
        margin: 0 !important;
    }

    nav ul li a {
        font-size: 13px !important; /* 縮小字體以符合手機寬度 */
        padding: 4px 6px !important;
        white-space: nowrap !important; /* 禁止換行 */
    }

    .brand {
        font-size: 14px !important; /* 縮小 LOGO 旁文字 */
    }
}/* --- 強力修正版：數字與 LOGO 特效 --- */
.card .card-number {
    opacity: 1 !important;
    transition: all 0.3s ease !important;
}

/* 電腦滑鼠移入 或 手機手指觸碰時 */
.card:hover .card-number, 
.card:active .card-number {
    opacity: 0 !important;
    transform: translateY(-5px) !important;
}

/* LOGO 動態 */
.brand:hover .logo, 
.brand:active .logo {
    transform: rotate(360deg) scale(1.1) !important;
}/* --- 1. 重新梳理導覽列架構 --- */
nav {
    display: flex !important;
    flex-direction: row !important; /* 強制橫向排隊 */
    flex-wrap: nowrap !important;   /* 絕對禁止換行 */
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 讓選單文字區塊也橫向排隊 */
nav ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important; /* 縮小項目間距 */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* --- 2. 針對小螢幕(手機)的微調 --- */
@media (max-width: 480px) {
    .brand {
        font-size: 14px !important; /* 縮小店名 */
    }
    nav ul li a {
        font-size: 12px !important; /* 縮小選單字體 */
        letter-spacing: -1px; /* 稍微擠一下字距 */
    }
}

/* --- 3. 確保數字消失功能權限最高 --- */
.card .card-number {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s ease !important;
}

.card:hover .card-number {
    opacity: 0 !important;
    visibility: hidden !important;
}/* 1. 導覽列：強制橫向排列，不准換行 */
.top-nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 15px !important;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.nav-menu {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px !important;
}

/* 手機版：縮小字體防止擠爆 */
@media (max-width: 768px) {
    .brand span { font-size: 14px !important; }
    .nav-menu li a { font-size: 12px !important; white-space: nowrap !important; }
    .nav-menu { gap: 6px !important; }
}

/* 2. 數字編號：滑鼠移入消失 */
.card .card-number {
    opacity: 1 !important;
    transition: opacity 0.3s ease !important;
}

.card:hover .card-number {
    opacity: 0 !important;
}

/* 3. LOGO：滑鼠移入旋轉 */
.brand .logo {
    transition: transform 0.6s ease !important;
}

.brand:hover .logo {
    transform: rotate(360deg) scale(1.2) !important;
}/* --- 1. 補回：彩色漸層邊框 --- */
.card {
    /* 把原本的黑底改成彩色邊框 */
    border: 3px solid transparent !important;
    background-image: linear-gradient(white, white), linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    background-color: #fff !important; /* 讓卡片本體變白 */
}

/* --- 2. 補回：文字上浮動態 --- */
.card .card-content {
    /* 初始狀態：文字稍微往下一點，且透明 */
    transform: translateY(15px);
    transition: all 0.4s ease-in-out !important;
}

.card:hover .card-content {
    /* 移入時：文字向上浮回原位 */
    transform: translateY(0);
}

.card .card-title {
    color: #d6336c !important; /* 標題換回粉嫩色 */
    text-shadow: none !important; /* 移除黑色陰影，讓畫面清爽 */
}

.card .card-desc {
    color: #666 !important; /* 描述文字換成深灰色 */
}

/* --- 3. 補回：數字編號的「呼吸閃爍」 --- */
.card .card-number {
    animation: pulse-pink 2s infinite;
}

@keyframes pulse-pink {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(214, 51, 108, 0.4); }
    50% { transform: scale(1.1); box-shadow: 0 0 15px rgba(214, 51, 108, 0.6); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(214, 51, 108, 0.4); }
}

/* --- 4. 平板專用：字體縮小 (針對您的需求) --- */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    nav ul li a {
        font-size: 13px !important; /* 平板字體再縮小一點 */
        padding: 5px 8px !important;
    }
    .card .card-title {
        font-size: 14px !important; /* 平板卡片標題縮小 */
    }
}/* --- 強制導覽列固定在最頂端 --- */
nav {
    position: fixed !important; /* 改為 fixed 確保絕對置頂 */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 75px; /* 桌機高度 */
    background: rgba(255, 255, 255, 0.95) !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 5% !important;
    z-index: 99999 !important; /* 確保在所有東西的最前面 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    box-sizing: border-box !important;
}

/* 修正下方內容被導覽列遮住的問題 */
body {
    padding-top: 80px !important; /* 預留高度給固定在頂端的導覽列 */
}

@media (max-width: 768px) {
    nav {
        height: 60px !important; /* 手機版高度縮小一點 */
        padding: 0 10px !important;
    }
    body {
        padding-top: 65px !important; /* 手機版預留高度也要縮小 */
    }
    .brand img {
        height: 35px !important; /* 手機版 LOGO 大小微調 */
    }
}/* 卡片初始狀態：透明且往下掉一點 */
.card {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out; /* 控制滑出的速度與順暢度 */
}

/* 當卡片被加上 .show 類別時，恢復原位並顯示 */
.card.show {
    opacity: 1;
    transform: translateY(0);
}/* 當螢幕寬度在 768px 到 1024px 之間（平板尺寸） */
@media screen and (max-width: 1024px) {
  .card-title {
    font-size: 16px !important; /* 標題縮小 */
    margin-bottom: 5px !important;
  }
  
  .card-desc {
    font-size: 12px !important; /* 描述文字縮小 */
    line-height: 1.4 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 最多只顯示兩行，避免字太多蓋住圖 */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card-content {
    padding: 8px !important; /* 縮減文字框的內距 */
  }
}/* 針對平板與手機的最終瘦身方案 */
@media screen and (max-width: 1024px) {
    /* 1. 縮小 #數字標籤：讓它不擋住圖片轉角 */
    .card-number {
        font-size: 11px !important;  /* 數字縮小 */
        padding: 2px 6px !important; /* 邊框縮減 */
        top: 5px !important;         /* 往角落移一點 */
        left: 5px !important;
        background: rgba(0,0,0,0.6) !important; /* 半透明才不會太突兀 */
    }

    /* 2. 標題與描述再縮小：讓字看起來像「註解」而不是「主角」 */
    .card-title {
        font-size: 13px !important;  /* 標題降到 13px */
        letter-spacing: -0.5px;      /* 字距縮緊 */
        margin: 2px 0 !important;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .card-desc {
        font-size: 10px !important;  /* 描述降到 10px，非常秀氣 */
        line-height: 1.2 !important;
        height: 24px !important;     /* 限制高度 */
        color: #777 !important;
    }

    /* 3. 縮小文字盒子的厚度 */
    .card-content {
        padding: 4px 6px !important;
    }

    /* 4. 關鍵：如果覺得字還是多，可以強制讓卡片變高一點點保護圖片 */
    .card img {
        min-height: 140px !important;
        object-fit: cover;
    }
}/* --- 強制縮小平板與手機文字範圍 --- */
@media screen and (max-width: 1400px) {
    /* 1. 強制卡片容器不被撐開 */
    .card {
        overflow: hidden !important;
    }

    /* 2. 強制縮小 #數字 的大小與位置 */
    .card-number {
        font-size: 10px !important;
        padding: 2px 4px !important;
        top: 3px !important;
        left: 3px !important;
        z-index: 10 !important;
    }

    /* 3. 強制壓低文字方塊高度，不准擋住照片核心 */
    .card-content {
        position: absolute !important;
        bottom: 0 !important;
        height: auto !important;
        max-height: 42px !important; /* 嚴格限制高度 */
        padding: 3px 5px !important;
        background: rgba(0, 0, 0, 0.6) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 4. 標題：強制變小、變細、不准換行 */
    .card-title {
        font-size: 13px !important; /* 強制 13 像素 */
        font-weight: 500 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        display: block !important;
        white-space: nowrap !important; /* 禁止換行 */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: #ffffff !important;
    }

    /* 5. 描述：在平板上縮到極小，甚至只留一行 */
    .card-desc {
        font-size: 9px !important; /* 強制 9 像素 */
        line-height: 1 !important;
        margin: 0 !important;
        opacity: 0.9 !important;
        white-space: nowrap !important; /* 禁止換行 */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: #dddddd !important;
        display: block !important;
    }
}
/* --- 覆蓋結束 --- *//* 解決不同裝置顯示不一的終極方案 */
@media screen and (max-width: 1200px) {
    /* 1. 強制卡片內容高度只佔整張圖的底部 25% */
    .card-content {
        height: auto !important;
        max-height: 25% !important; 
        min-height: 40px !important;
        padding: 2% 4% !important; /* 改用百分比內距，隨裝置縮放 */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        background: rgba(0, 0, 0, 0.6) !important;
    }

    /* 2. 標題字體：根據螢幕寬度自動變小 (vw 代表螢幕寬度的比例) */
    .card-title {
        font-size: clamp(12px, 1.5vw, 16px) !important; 
        line-height: 1.2 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 3. 描述文字：在平板/手機上縮到最小，不佔位 */
    .card-desc {
        font-size: clamp(9px, 1.2vw, 12px) !important;
        line-height: 1 !important;
        margin-top: 2px !important;
        opacity: 0.8 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 4. #數字 標籤同步縮小 */
    .card-number {
        font-size: 10px !important;
        padding: 1px 4px !important;
        top: 4px !important;
        left: 4px !important;
    }
}