/* 1. 分類按鈕的排版與長相 (修正為符合原設計的大按鈕) */
.vibe-main-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px; /* 按鈕之間的間距 */
    margin-bottom: 40px; /* 按鈕與下方商品的距離 */
}
.vibe-cat-btn {
    background-color: #f0f0f0; /* 預設淺灰色背景 */
    border: 2px solid #eaeaea; /* 加上淡淡的邊框 */
    border-radius: 40px; /* 大橢圓形，跟原本的一樣 */
    padding: 12px 35px; /* 增加內距，讓按鈕變大 */
    font-size: 22px; /* 主分類字體大小 */
    font-weight: bold; /* 字體加粗 */
    color: #333; /* 預設字體顏色 */
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 淡淡的陰影 */
}

/* 當游標移過去、或是「選中 (active)」時的深藍色外觀 */
.vibe-cat-btn:hover, .vibe-cat-btn.active {
    background-color: #334d8f; /* 改成深藍色 */
    color: white; 
    border-color: #334d8f; /* 邊框也改成深藍色 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); 
}

/* 2. 下方商品的排版 (電腦版強制一行 6 個) */
.vibe-product-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* ★ 強制切成 6 等份 */
    gap: 20px;
    padding: 0 10px;
    align-items: stretch; /* 確保同一排的所有卡片都一樣高 */
}

/* ★ 針對平板螢幕：自動縮為一行 3 個，避免卡片太擠 */
@media (max-width: 1024px) {
    .vibe-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ★ 針對手機螢幕：自動縮為一行 2 個 */
@media (max-width: 768px) {
    .vibe-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px; /* 手機版間距稍微縮小 */
    }
}

.vibe-product-card {
    background: #fff;
    padding: 20px;
    text-align: center;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    transition: 0.3s;
    display: flex; 
    flex-direction: column; 
    height: 100%;
}
.vibe-product-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.08); 
}

/* ★ 魔法 1：固定圖片區塊的高度，讓文字起點對齊 */
.vibe-product-image {
    height: 220px; /* 給定一個固定的圖片展示高度 */
    display: flex;
    align-items: center; /* 讓圖片垂直置中 */
    justify-content: center; /* 讓圖片水平置中 */
    margin-bottom: 15px;
}
.vibe-product-image img {
    max-width: 100%;
    max-height: 100%; /* 確保圖片再大也不會凸出框框 */
    width: auto;
    height: auto;
    margin-bottom: 0;
}

/* ★ 魔法 2：固定文字高度，讓文字終點對齊 */
.vibe-product-title {
    font-size: 19px; 
    color: #334d8f; 
    margin-bottom: 20px;
    font-weight: bold;
    min-height: 54px; /* 強制預留兩行字的高度 */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 如果字太多超過兩行，會自動變成刪節號... */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ★ 魔法 3：按鈕推到底部對齊 */
.vibe-view-btn {
    display: inline-block;
    background-color: #334d8f;
    color: white;
    padding: 10px 25px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 15px;
    margin-top: auto; /* 將按鈕強制推到卡片最底部 */
}
.vibe-view-btn:hover {
    background-color: #1e3060;
    color: white;
}

/* 3. 子分類選單的排版 */
.vibe-subnav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px; 
    margin-bottom: 30px;
}
.vibe-subcat-link {
    color: #334d8f; 
    text-decoration: none;
    font-size: 20px; 
    padding-bottom: 5px;
    border-bottom: 2px solid transparent; 
    transition: 0.3s;
}
.vibe-subcat-link:hover, .vibe-subcat-link.active {
    border-bottom: 2px solid #334d8f; 
    font-weight: bold;
}

/* ★ 手機版專屬優化：分類按鈕改為橫向滑動與縮小尺寸 */
@media (max-width: 768px) {
    /* 1. 主分類大按鈕：啟動橫向滑動 */
    .vibe-main-nav {
        flex-wrap: nowrap; /* 取消自動換行 */
        justify-content: flex-start; /* 靠左對齊 */
        overflow-x: auto; /* 允許手指橫向滑動 */
        -webkit-overflow-scrolling: touch; /* 讓 iOS 滑動更平順 */
        padding-bottom: 10px; /* 預留底部空間 */
        gap: 10px; /* 縮小按鈕間距 */
        margin-bottom: 25px; /* 縮小與下方的距離 */
    }
    
    /* 隱藏手機版的醜醜捲軸，讓畫面更乾淨 */
    .vibe-main-nav::-webkit-scrollbar {
        display: none;
    }
    
    /* 縮小按鈕本身尺寸 */
    .vibe-cat-btn {
        font-size: 16px; /* 縮小字體 */
        padding: 8px 18px; /* 縮小按鈕內距 */
        white-space: nowrap; /* 強制文字不換行 */
        flex-shrink: 0; /* 防止按鈕被螢幕擠壓變形 */
    }

    /* 2. 子分類文字：同理縮小與調整 */
    .vibe-subnav-list {
        gap: 15px; /* 縮小文字間隔 */
        margin-bottom: 25px;
    }
    .vibe-subcat-link {
        font-size: 16px; /* 縮小字體 */
    }
}