/**
 * Shop20 Modern CSS
 * 現代化購物網站樣式
 */

/* === CSS 變數定義 === */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    
    --font-family-sans-serif: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --border-radius: 0.375rem;
    --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    
    --transition-base: all 0.3s ease;
}

/* === 基礎樣式重設 === */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-sans-serif);
    line-height: 1.6;
    color: #212529;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
}

.main-content {
    padding-top: 56px; /* Bootstrap navbar 標準高度 */
    min-height: 100vh;
}

/* === Banner 區域樣式 === */
.banner-section {
    padding-top: 1rem; /* 添加小間距讓佈局更自然 */
}

#bannerContainer {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 響應式導航欄間距調整 */
@media (max-width: 768px) {
    .main-content {
        padding-top: 56px; /* 手機版保持標準間距 */
    }
    
    .banner-section {
        padding-top: 0.5rem; /* 手機版減少間距 */
    }
}

/* === 載入畫面 === */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

.loading-spinner {
    text-align: center;
}

.loading-spinner .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

/* === 導航欄樣式 === */
.navbar {
    backdrop-filter: blur(10px);
    transition: var(--transition-base);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar.scrolled {
    background-color: rgba(0, 123, 255, 0.95) !important;
    box-shadow: var(--box-shadow);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
}

.navbar-nav .nav-link {
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    transition: var(--transition-base);
    position: relative;
}

.navbar-nav .nav-link:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background-color: #ffc107;
    border-radius: 1px;
}

/* === 購物車徽章樣式優化 === */
/* 註：Bootstrap utility classes 使用 !important，因此需要強制覆蓋 */
.navbar-nav .nav-link[href="cart.php"] {
    position: relative;
}

.navbar-nav .nav-link[href="cart.php"] .position-absolute.top-0.start-100.translate-middle,
.navbar-nav .nav-link[href="cart.php"] #cartCount {
    position: absolute !important;
    top: -3px !important;
    right: -4px !important;
    left: auto !important;
    transform: none !important;
}

/* === 英雄區域輪播 === */
.hero-section {
    height: 500px;
    overflow: hidden;
    position: relative;
}

.hero-swiper {
    width: 100%;
    height: 100%;
}

.hero-slide {
    height: 500px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    color: white;
    text-align: center;
    width: 100%;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.hero-slide-placeholder {
    height: 500px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

/* === Swiper 自定義樣式 === */
.swiper-button-next,
.swiper-button-prev {
    color: white;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    transition: var(--transition-base);
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: scale(1.1);
}

.swiper-pagination-bullet {
    background: white;
    opacity: 0.5;
    width: 12px;
    height: 12px;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #ffc107;
}

/* === 區塊標題樣式 === */
.section-header {
    margin-bottom: 3rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(45deg, var(--primary-color), var(--info-color));
    border-radius: 2px;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--secondary-color);
    margin: 0;
}

/* === 商品卡片樣式 === */
.product-card {
    background: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition-base);
    box-shadow: var(--box-shadow);
    height: 100%;
    border: none;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-lg);
}

.product-image-container {
    position: relative;
    overflow: hidden;
    height: 250px;
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-base);
}

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

.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition-base);
}

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

.product-info {
    padding: 1.5rem;
}

.product-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.product-title a {
    color: #212529;
    text-decoration: none;
    transition: var(--transition-base);
}

.product-title a:hover {
    color: var(--primary-color);
}

.product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--danger-color);
}

/* === 商品徽章樣式 === */
.flash-sale-badge,
.hot-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 3;
    animation: pulse 2s infinite;
}

.hot-badge {
    background: linear-gradient(45deg, #ff9f43, #ff6348);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* === 倒數計時樣式 === */
.countdown-timer {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    text-align: center;
    z-index: 3;
}

.countdown-display {
    font-size: 0.8rem;
}

.countdown-text {
    display: block;
    margin-bottom: 0.25rem;
    opacity: 0.8;
}

.countdown-numbers {
    font-weight: 700;
    font-size: 0.9rem;
}

.countdown-ended {
    color: var(--warning-color);
    font-weight: 600;
}

.countdown-expired {
    opacity: 0.6;
}

/* 商品卡片倒數計時樣式優化 */
.card .badge {
    font-size: 0.75rem;
    padding: 0.4rem 0.6rem;
    min-width: 35px;
    font-weight: 600;
    border-radius: 6px;
}

/* 天數顯示特殊樣式 */
.card .badge.days {
    background-color: #dc3545 !important;
    animation: pulseCountdown 2s infinite;
}

@keyframes pulseCountdown {
    0% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 1; }
}

/* 確保倒數計時區塊在小螢幕上也能正常顯示 */
@media (max-width: 576px) {
    .card .badge {
        font-size: 0.65rem;
        padding: 0.3rem 0.4rem;
        min-width: 30px;
    }
    
    .countdown-display {
        gap: 0.25rem;
    }
}

/* === 限時搶購區塊整體性樣式（改為精選商品版型）=== */
.flash-sale-section {
    padding: 1rem 0 0.5rem 0; /* 跟精選商品一樣的間距 */
    background: transparent; /* 預設透明背景 */
    position: relative;
    overflow: hidden;
}

/* 當有內容時顯示背景 */
.flash-sale-section.has-content {
    background: transparent; /* 保持簡潔 */
}

/* 限時搶購背景容器 - 不要滿版，限制寬度 */
.flash-sale-bg {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); /* 限時搶購用紅色漸層 */
    border: 2px solid #c82333;
    border-radius: 15px;
    margin: 0 auto;
    max-width: 1000px; /* 縮小最大寬度，不要滿版 */
    padding: 1.5rem 1rem; /* 跟精選商品一樣的padding */
}

/* 限時搶購標題間距調整 */
.flash-sale-header {
    margin-bottom: 0.75rem; /* 跟精選商品一樣的標題下邊界 */
}

.flash-title-wrapper {
    text-align: center;
}

.flash-title {
    margin: 0 0 0.25rem 0; /* 跟精選商品一樣的標題邊界 */
    color: #ffffff; /* 白色標題 */
    font-size: 1.75rem; /* 跟精選商品一樣的字體大小 */
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.flash-icon {
    font-size: 1.75rem; /* 跟標題一樣大小 */
    color: #ffc107;
    animation: flashBolt 2s ease-in-out infinite;
}

@keyframes flashBolt {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1) rotate(0deg);
    }
    25% { 
        opacity: 0.8; 
        transform: scale(1.1) rotate(-5deg);
    }
    50% { 
        opacity: 0.9; 
        transform: scale(1.05) rotate(5deg);
    }
    75% { 
        opacity: 0.8; 
        transform: scale(1.1) rotate(-3deg);
    }
}

.flash-subtitle {
    margin: 0; /* 跟精選商品一樣移除副標題邊界 */
    color: #f8d7da; /* 淡紅色 */
    font-size: 0.95rem; /* 跟精選商品一樣的副標題字體 */
}

/* 限時搶購商品網格 - 增加卡片間距 */
.flash-products-grid {
    margin-top: 1rem;
}

.flash-products-grid .row {
    margin: 0; /* 移除行的外邊距 */
}

.flash-products-grid .col-12,
.flash-products-grid .col-md-6,
.flash-products-grid .col-lg-3 {
    padding: 0.5rem; /* 增加列的內邊距，讓卡片間距更大 */
}

/* 限時搶購專用的商品卡片樣式 - 改為簡潔版型 */
.flash-sale-section .card {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    overflow: hidden;
    height: 100%;
}

.flash-sale-section .card:hover {
    transform: translateY(-3px) scale(1.01); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    border-color: #dc3545;
}

.flash-sale-section .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.flash-sale-section .card:hover::before {
    opacity: 1;
}

/* 限時搶購和商品類別標籤樣式 - 移至專用 CSS 檔案 */
/* 請參考 flash-sale-badges.css */

/* 限時搶購標籤特殊樣式 */
.flash-sale-section .badge.bg-danger {
    background: linear-gradient(45deg, #dc3545, #c82333) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

/* 商品類別標籤特殊樣式 */
.flash-sale-section .badge.bg-primary,
.flash-sale-section .badge.bg-info,
.flash-sale-section .badge.bg-success,
.flash-sale-section .badge.bg-warning,
.flash-sale-section .badge.bg-secondary {
    border: 1px solid rgba(255,255,255,0.2) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* === 全域商品網格間距調整（增加間距）=== */
.row.g-1 {
    --bs-gutter-x: 0.5rem; /* 增加卡片間距 */
    --bs-gutter-y: 0.5rem;
}

.row.g-2 {
    --bs-gutter-x: 0.75rem; /* 增加卡片間距 */
    --bs-gutter-y: 0.75rem;
}

/* 商品卡片外部間距調整 */
.col-lg-3.mb-3,
.col-md-4.mb-3,
.col-sm-6.mb-3 {
    margin-bottom: 0.75rem !important; /* 增加卡片下方外邊距 */
}

/* 商品卡片整體優化（恢復原始內部間距）*/
.card.h-100 {
    min-height: 480px; /* 恢復原始高度 */
}

.card-body {
    padding: 1rem !important; /* 恢復原始內邊距 */
}

/* 商品卡片內容間距（恢復原始設定）*/
.card-title {
    margin-bottom: 1rem !important; /* 恢復原始間距 */
}

.card-text {
    margin-bottom: 1rem !important; /* 恢復原始間距 */
}

/* 商品價格區域間距（恢復原始設定）*/
.price-section {
    margin-bottom: 1rem !important; /* 恢復原始間距 */
}

.original-price-wrapper {
    margin-bottom: 0.5rem; /* 恢復原始間距 */
}

.current-price-wrapper {
    margin-bottom: 0;
}

/* 按鈕間距（恢復原始設定）*/
.btn-view-product {
    margin-top: auto;
    padding: 0.75rem 1rem; /* 恢復原始按鈕大小 */
}

/* 響應式調整（主要針對外部間距）*/
@media (max-width: 768px) {
    .flash-sale-section {
        padding: 0.5rem 0 0.25rem 0; /* 手機版進一步縮小間距 */
    }
    
    .flash-sale-bg {
        padding: 1rem 0.5rem; /* 手機版縮小容器邊距 */
        max-width: 95%; /* 手機版稍微縮小寬度 */
    }
    
    .flash-sale-header {
        margin-bottom: 0.5rem; /* 手機版縮小標題下邊距 */
    }
    
    .flash-title {
        font-size: 1.5rem; /* 手機版縮小標題字體 */
        flex-direction: row; /* 保持水平排列 */
    }
    
    .flash-icon {
        font-size: 1.5rem; /* 跟標題一樣大小 */
    }
    
    .flash-subtitle {
        font-size: 0.85rem; /* 手機版縮小副標題字體 */
    }
    
    /* 手機版標籤稍微縮小 */
    .flash-sale-section .badge {
        font-size: 0.8rem !important; /* 手機版標籤字體 */
        padding: 5px 10px !important; /* 手機版標籤內邊距 */
    }
    
    /* 手機版卡片間距調整 */
    .flash-products-grid .col-12,
    .flash-products-grid .col-md-6,
    .flash-products-grid .col-lg-3 {
        padding: 0.375rem; /* 手機版稍微縮小間距 */
    }
    
    /* 卡片外部間距調整 */
    .row.g-1 {
        --bs-gutter-x: 0.375rem;
        --bs-gutter-y: 0.375rem;
    }
    
    .row.g-2 {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
    }
    
    .col-lg-3.mb-3,
    .col-md-4.mb-3,
    .col-sm-6.mb-3 {
        margin-bottom: 0.5rem !important;
    }
}

@media (max-width: 576px) {
    .flash-sale-section {
        padding: 0.25rem 0 0.125rem 0; /* 最小間距 */
    }
    
    .flash-sale-bg {
        padding: 0.75rem 0.25rem; /* 最小容器邊距 */
        max-width: 98%; /* 小螢幕最大寬度 */
    }
    
    .flash-sale-header {
        margin-bottom: 0.25rem; /* 最小標題下邊距 */
    }
    
    .flash-title {
        font-size: 1.3rem; /* 最小標題字體 */
    }
    
    .flash-icon {
        font-size: 1.3rem; /* 跟標題一樣大小 */
    }
    
    .flash-subtitle {
        font-size: 0.8rem; /* 最小副標題字體 */
    }
    
    /* 小螢幕標籤尺寸 */
    .flash-sale-section .badge {
        font-size: 0.75rem !important; /* 小螢幕標籤字體 */
        padding: 4px 8px !important; /* 小螢幕標籤內邊距 */
    }
    
    /* 小螢幕卡片間距 */
    .flash-products-grid .col-12,
    .flash-products-grid .col-md-6,
    .flash-products-grid .col-lg-3 {
        padding: 0.25rem; /* 小螢幕最小間距 */
    }
    
    /* 最小卡片外部間距 */
    .row.g-1 {
        --bs-gutter-x: 0.25rem;
        --bs-gutter-y: 0.25rem;
    }
    
    .row.g-2 {
        --bs-gutter-x: 0.375rem;
        --bs-gutter-y: 0.375rem;
    }
    
    .col-lg-3.mb-3,
    .col-md-4.mb-3,
    .col-sm-6.mb-3 {
        margin-bottom: 0.375rem !important;
    }
}

/* === 強制套用篩選按鈕樣式（覆蓋Bootstrap預設） === */
.hot-filters .filter-btn,
.hot-products-section .filter-btn,
button.filter-btn {
    padding: 0.75rem 1.5rem !important;
    margin: 0.5rem !important;
    border-radius: 25px !important;
    min-width: 80px !important;
    line-height: normal !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: 2px solid #007bff !important;
    background: white !important;
    color: #007bff !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2) !important;
    position: relative !important;
    overflow: hidden !important;
    display: inline-block !important;
}

.hot-filters .filter-btn::before,
.hot-products-section .filter-btn::before,
button.filter-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent) !important;
    transition: left 0.5s !important;
}

.hot-filters .filter-btn:hover,
.hot-products-section .filter-btn:hover,
button.filter-btn:hover {
    background: #007bff !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4) !important;
    border-color: #007bff !important;
}

.hot-filters .filter-btn:hover::before,
.hot-products-section .filter-btn:hover::before,
button.filter-btn:hover::before {
    left: 100% !important;
}

.hot-filters .filter-btn.active,
.hot-products-section .filter-btn.active,
button.filter-btn.active {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
    color: white !important;
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3) !important;
    border-color: #0056b3 !important;
}

/* 響應式調整（強制套用） */
@media (max-width: 768px) {
    .hot-filters .filter-btn,
    .hot-products-section .filter-btn,
    button.filter-btn {
        padding: 0.5rem 1rem !important;
        margin: 0.25rem !important;
        font-size: 0.8rem !important;
        min-width: 60px !important;
    }
}

@media (max-width: 576px) {
    .hot-filters {
        padding: 0.5rem !important;
    }
    
    .hot-filters .filter-btn,
    .hot-products-section .filter-btn,
    button.filter-btn {
        padding: 0.4rem 0.8rem !important;
        margin: 0.2rem !important;
        font-size: 0.75rem !important;
        min-width: 50px !important;
        border-radius: 20px !important;
    }
}

/* 調試用：如果按鈕仍無法正常顯示，臨時添加背景色測試 */
.filter-btn-debug {
    background: red !important;
    color: white !important;
    border: 2px solid red !important;
}

/* === 商品類型標籤樣式 === */
/* 商品類型標籤基礎樣式 - 確保在右上角但不影響佈局 */
a.tag {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

a.tag::before {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    display: block;
    color: white;
    padding: 0.4rem 0.75rem;
    font-weight: bold;
    font-size: 0.85rem;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
    z-index: 15;
}

/* 各種商品類型標籤樣式 */
a.tag-Eticket::before {
    content: "票券";
    background: #084298;
}

a.tag-Pticket::before {
    content: "紙本票券";
    background: #28a745;
}

a.tag-CoolFood::before {
    content: "冷凍商品";
    background: #F75000;
}

a.tag-Booking::before {
    content: "線上報名";
    background: #ec407a;
}

a.tag-Goods::before {
    content: "實體商品";
    background: #00796e;
}

a.tag-Group::before {
    content: "組合票券";
    background: #50105A;
}

a.tag-External::before {
    content: "導購";
    background: #50545a;
}

a.tag-limited::before {
    content: "限量" attr(data-before) "組";
    background: #C83737;
}

/* 限時搶購標籤樣式 - 確保在左上角 */
.flash-sale-badge-large {
    font-size: 0.85rem !important;
    padding: 0.4rem 0.75rem !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.4) !important;
    letter-spacing: 0.5px !important;
    z-index: 12 !important;
}

/* 一般限時搶購標籤 */
.flash-sale-badge {
    z-index: 12 !important;
}

/* 商品卡片圖片比例優化 */
.card-img-top.card_product {
    height: 280px !important;
    object-fit: cover !important;
    width: 100% !important;
}

/* 商品卡片整體優化 */
.card.h-100 {
    min-height: 400px; /* 減少卡片最小高度 */
}

.card-body {
    padding: 0.75rem !important; /* 縮小內容區域的 padding */
}

/* 商品卡片標題間距調整 */
.card-title {
    margin-bottom: 0.5rem !important;
}

.card-text {
    margin-bottom: 0.75rem !important;
}

/* 商品價格區域間距調整 */
.price-section {
    margin-bottom: 0.75rem !important;
}

.original-price-wrapper {
    margin-bottom: 0.25rem;
}

.current-price-wrapper {
    margin-bottom: 0;
}

/* 按鈕間距調整 */
.btn-view-product {
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
}

/* 響應式調整 */
@media (max-width: 992px) {
    .card.h-100 {
        min-height: 380px;
    }
    }
    
@media (max-width: 768px) {
    .card.h-100 {
        min-height: 360px;
    }
    
    .card-body {
        padding: 0.6rem !important;
    }
    
    .card-title {
        margin-bottom: 0.4rem !important;
    }
    
    .card-text {
        margin-bottom: 0.6rem !important;
    }
}

@media (max-width: 576px) {
    .card.h-100 {
        min-height: 340px;
    }
    
    .card-body {
        padding: 0.5rem !important;
    }
    
    .card-title {
        margin-bottom: 0.3rem !important;
    }
    
    .card-text {
        margin-bottom: 0.5rem !important;
    }
    
    .price-section {
        margin-bottom: 0.5rem !important;
    }
    
    .btn-view-product {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
}

/* === 全域商品網格間距調整 === */
.row.g-3 {
    --bs-gutter-x: 0.75rem; /* 縮小列間距 */
    --bs-gutter-y: 0.75rem; /* 縮小行間距 */
}

.row.g-4 {
    --bs-gutter-x: 1rem; /* 中等間距 */
    --bs-gutter-y: 1rem;
}

/* 商品卡片通用間距調整 */
.col-lg-3.mb-4,
.col-md-4.mb-4,
.col-sm-6.mb-4 {
    margin-bottom: 1rem !important; /* 統一卡片下邊距 */
}

/* 響應式間距調整 */
@media (max-width: 768px) {
    .row.g-3 {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
    }
    
    .col-lg-3.mb-4,
    .col-md-4.mb-4,
    .col-sm-6.mb-4 {
        margin-bottom: 0.75rem !important;
    }
}

@media (max-width: 576px) {
    .row.g-3 {
        --bs-gutter-x: 0.25rem;
        --bs-gutter-y: 0.25rem;
    }
    
    .col-lg-3.mb-4,
    .col-md-4.mb-4,
    .col-sm-6.mb-4 {
        margin-bottom: 0.5rem !important;
    }
}