/* 引入 Google Fonts：Caveat (狂野手寫風) 與 Noto Sans TC (標準黑體) */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Noto+Sans+TC:wght@400;700&display=swap');

/* 定義全域品牌色系 (森林綠與原木棕) */
:root {
    --primary-green: #2C4C3B;   /* 沉穩森林綠 */
    --accent-wood: #8B5A2B;     /* 溫潤原木棕 */
    --bg-sand: #F9F6F0;         /* 燕麥沙色背景 */
    --text-dark: #333333;
}

body {
    background-color: var(--bg-sand);
    color: var(--text-dark);
    font-family: 'Noto Sans TC', sans-serif;
    margin: 0;
    padding: 0;
}

/* --- 導覽列設計 --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--primary-green);
    padding: 15px 40px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.brand-logo {
    font-family: 'Caveat', cursive;
    font-size: 2.5rem;
    color: #FFFFFF;
    text-decoration: none;
    letter-spacing: 2px;
    
    /* 以下是新增的對齊魔法 */
    display: flex;
    align-items: center;
    gap: 15px; /* 控制圓形 Logo 和文字之間的距離 */
}

.nav-logo-img {
    width: 45px;
    height: 45px;
    border-radius: 50%; /* 裁切成完美圓形 */
    object-fit: cover; /* 確保圖片比例不變形 */
    border: 2px solid #E8C396; /* 加上一圈淺木色的邊框增加質感 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* 加上微微的立體陰影 */
}

/* --- 首頁大 Logo 專屬樣式 --- */
.home-main-logo {
    display: block;        /* 讓圖片變成區塊元素 */
    margin: 0 auto 30px;   /* 左右 auto 達成絕對置中，下方留白 30px */
    max-width: 250px;      /* 控制最大尺寸，避免在電腦螢幕上太大 */
    border-radius: 15px;   /* 稍微導圓角，看起來更柔和天然 */
    box-shadow: 0 8px 16px rgba(0,0,0,0.1); /* 加上柔和的陰影，讓圖片浮起來 */
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
    align-items: center;
}

.nav-links li a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.nav-links li a:hover {
    color: #E8C396; /* 滑過時變成淺木色 */
}

/* --- 語言切換按鈕特製化 --- */
.lang-switch {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
}

.lang-switch a {
    color: #FFFFFF;
    text-decoration: none;
}

.lang-switch a:hover {
    color: #E8C396;
}

/* --- 主內容區塊 --- */
main {
    max-width: 1000px;
    margin: 50px auto;
    padding: 30px;
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    text-align: center;
    border-top: 5px solid var(--accent-wood);
}

/* 讓網頁內的標題也套用狂野字體 */
h1, h2 {
    font-family: 'Caveat', cursive;
    color: var(--primary-green);
}

/* =========================================
   手機版與響應式優化 (Mobile Responsive)
   ========================================= */

/* 1. 確保所有圖片都不會撐爆手機螢幕 */
img {
    max-width: 100%;
    height: auto;
}

/* 2. 修正導覽列連結：強制不准斷行 (解決中文字垂直堆疊的問題) */
.nav-links li a {
    white-space: nowrap;
}

/* 3. 專屬手機螢幕 (寬度小於 768px) 的排版規則 */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column; /* 讓 Logo 和選單從「左右」變成「上下」排列 */
        padding: 15px;
        gap: 15px;
    }

    .nav-links {
        flex-wrap: wrap; /* 空間不夠時允許選單自動換行 */
        justify-content: center; /* 讓選單置中，看起來更整齊 */
        gap: 15px;
        width: 100%;
    }

    .brand-logo {
        font-size: 2rem; /* 在手機上稍微縮小 Logo 字體 */
        text-align: center;
    }

    main {
        margin: 20px 15px; /* 縮小白色卡片在手機上的外邊界 */
        padding: 20px 15px; /* 縮小內邊距，把空間留給內容 */
    }
}

/* --- 聯絡谷主：木製告示牌風格 --- */
.notice-board {
    max-width: 600px;
    margin: 0 auto;
}

.valley-intro {
    color: var(--primary-green);
    font-size: 1.1rem;
    margin-bottom: 30px;
    line-height: 1.6;
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 木頭質感的按鈕 */
.wood-btn {
    display: block;
    background-color: var(--accent-wood);
    color: #FFFFFF;
    text-decoration: none;
    padding: 18px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 4px 0 #5E3A1A; /* 創造木板厚度的 3D 陰影感 */
    transition: all 0.2s ease;
}

.wood-btn:hover {
    background-color: #A06B35;
    transform: translateY(2px); /* 按下去的感覺 */
    box-shadow: 0 2px 0 #5E3A1A;
}

/* =========================================
   頁尾與版權宣告 (Footer)
   ========================================= */
.site-footer {
    text-align: center;
    padding: 30px 20px;
    margin-top: 50px;
    border-top: 1px solid #EAEAEA;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.copyright {
    margin: 0;
    font-size: 0.85rem;
    color: #888888; /* 低調的灰色 */
}

/* --- 小型語言切換器 --- */
.lang-switch-small {
    font-size: 0.8rem;
}

.lang-switch-small a {
    color: #888888;
    text-decoration: none;
    transition: color 0.3s ease;
}

.lang-switch-small a:hover {
    color: var(--primary-green); /* 滑過時變回品牌綠色 */
}

.lang-switch-small span {
    margin: 0 8px;
    color: #CCCCCC;
}

/* =========================================
   商品目錄與卡片排版 (Catalog & Product Cards)
   ========================================= */
.catalog-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.product-grid {
    display: grid;
    /* 響應式魔法：螢幕夠寬就並排，太窄就自動變單排 */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

/* --- 單張商品卡片設計 --- */
.product-card {
    background-color: #FFFFFF;
    border: 1px solid #F0F0F0;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); /* 極度輕柔的陰影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* 卡片懸浮效果：客人滑鼠經過時會微微浮起，帶有互動感 */
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
    border-color: var(--accent-wood); /* 邊框亮起木頭色 */
}

/* --- 標籤區 (Badges) --- */
.product-badges {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.badge {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    color: #FFFFFF;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.badge.best-seller {
    background-color: #E67E22; /* 溫暖的剛出爐橙橘色 */
}

.badge.recommend {
    background-color: var(--primary-green); /* 品牌專屬森林綠 */
}

/* --- 文字排版 --- */
.product-title {
    font-size: 1.4rem;
    color: #333333;
    margin-bottom: 10px;
    font-weight: 700;
    line-height: 1.3;
}

.product-desc {
    font-size: 0.95rem;
    color: #777777;
    line-height: 1.6;
    flex-grow: 1; /* 讓描述區塊自動撐開，確保所有卡片底部的價格表對齊 */
    margin-bottom: 25px;
}

/* --- 款式與價格清單 (Variants List) --- */
.variant-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 2px dashed #EEEEEE; /* 裁切線質感的虛線 */
    padding-top: 15px;
}

.variant-list li {
    display: flex;
    justify-content: space-between; /* 名字靠左，價格靠右 */
    align-items: center;
    font-size: 1rem;
    color: #555555;
    margin-bottom: 12px;
}

.variant-list li:last-child {
    margin-bottom: 0;
}

.variant-list .price {
    font-weight: 700;
    color: var(--accent-wood); /* 用原木色強調價格 */
    font-size: 1.15rem;
}

/* --- 商品卡片圖片區 --- */
.product-image-box {
    width: 100%;
    height: 220px; /* 統一所有圖片的高度，讓卡片看起來整齊 */
    border-radius: 12px;
    overflow: hidden; /* 確保圖片導圓角 */
    margin-bottom: 20px;
    background-color: #F9F9F9; /* 圖片還沒載入時的底色 */
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 神奇屬性：自動裁切填滿，圖片絕對不會變形！ */
    transition: transform 0.5s ease; /* 為滑鼠懸浮準備動畫 */
}

/* 當滑鼠移到整張卡片時，圖片微微放大，增加高級互動感 */
.product-card:hover .product-img {
    transform: scale(1.05);
}

/* --- 缺貨/無圖片的佔位符 --- */
.no-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F0F0F0;
    color: #999999;
    font-weight: bold;
    font-size: 1.1rem;
    border-radius: 12px;
}

/* --- 購物車按鈕排版 --- */
.price-action-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

.add-to-cart-btn {
    background-color: transparent;
    border: 2px solid var(--accent-wood);
    color: var(--accent-wood);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-to-cart-btn:hover {
    background-color: var(--accent-wood);
    color: white;
    transform: translateY(-2px);
}

/* 購物車數字標籤動畫過渡 */
#cart-badge {
    transition: transform 0.2s ease;
}