@charset "utf-8";

/* =========================================
   1. Banner 比例調整 (Swiper)
   ========================================= */
/* 需求：高度減半，將原本 16/9 改為 32/9 */
.mySwiper { aspect-ratio: 32 / 9 !important; }
.mySwiper img, .mySwiper video { object-position: center center; }

/* =========================================
   2. 產品分類標籤 (Categories)
   ========================================= */
/* 沿用 Service Tab 樣式並確保獨立顯示 */
.product-categories { 
    display: flex; justify-content: center; gap: 2rem; 
    margin-bottom: 3rem; border-bottom: 1px solid #eee; padding-bottom: 1px; 
}

/* =========================================
   3. 產品列表網格 (Product Grid)
   ========================================= */
.product { background-color: var(--bg-color); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2rem; }

/* =========================================
   4. 產品卡片主體 (Product Card)
   ========================================= */
.product-card { 
    display: flex; flex-direction: column; background-color: var(--card-bg); 
    border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--card-shadow); 
    transition: all 0.3s ease; border: 1px solid rgba(0,0,0,0.03); 
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--card-shadow-hover); }

/* 圖片與標籤 (Thumb & Badge) */
.product-thumb { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.product-card:hover .product-thumb img { transform: scale(1.05); }

.badge { 
    position: absolute; top: 0.75rem; left: 0.75rem; background-color: var(--primary-color); 
    color: #fff; border-radius: var(--radius-tag); padding: var(--tag-padding); 
    font-size: var(--tag-font-size); font-weight: 600; z-index: 2; box-shadow: 0 2px 5px rgba(0,0,0,0.15); 
}
.badge.new { background-color: var(--badge-bg); }

.badge + .badge.new { left:calc( 5rem - 8px );}

/* 內容區塊 (Body) */
.product-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.product-meta { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.75rem; }
.category { color: var(--primary-color); font-weight: 500; }
.product-title { 
    font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.4; color: var(--text-color); 
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex-grow: 1; 
}

/* 價格與按鈕 (Footer) */
.product-footer { display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px solid #f1f2f6; padding-top: 1rem; margin-top: auto; }
.price-group { display: flex; flex-direction: column; }
.price-original { font-size: 0.8125rem; text-decoration: line-through; color: var(--price-muted); }
.price-sale { font-size: 1.25rem; font-weight: 700; color: var(--price-color); }

.btn-buy { 
    font-size: 0.875rem; font-weight: 600; color: var(--primary-color); 
    background: rgba(9, 132, 227, 0.1); padding: 0.5rem 1rem; border-radius: 2rem; transition: 0.3s; 
}
.product-card:hover .btn-buy { background: var(--primary-color); color: #fff; }


html.Font-Large .badge { font-size:calc( var(--tag-font-size) * 1.1 ); }
html.Font-Small .badge { font-size:calc( var(--tag-font-size) * 0.9 ); }
html.Font-Large .product-meta { font-size:calc( 0.875rem * 1.1 ); }
html.Font-Small .product-meta { font-size:calc( 0.875rem * 0.9 ); }
html.Font-Large .price-original { font-size:calc( 0.8125rem * 1.1 ); }
html.Font-Small .price-original { font-size:calc( 0.8125rem * 0.9 ); }
html.Font-Large .price-sale { font-size:calc( 1.25rem * 1.1 ); }
html.Font-Small .price-sale { font-size:calc( 1.25rem * 0.9 ); }
html.Font-Large .btn-buy { font-size:calc( 0.875rem * 1.1 ); }
html.Font-Small .btn-buy { font-size:calc( 0.875rem * 0.9 ); }

/* =========================================
   5. 產品頁響應式設計 (Product RWD)
   ========================================= */
@media (max-width: 62rem) { /* 992px */
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

@media (max-width: 48rem) { /* 768px */
    .product-grid { grid-template-columns: 1fr; }
    .mySwiper { aspect-ratio: 16 / 9 !important; } /* 手機版還原比例以利閱讀 */
    .product-categories { 
        justify-content: flex-start; overflow-x: auto; 
        white-space: nowrap; padding-bottom: 0.5rem; gap: 1rem; 
    }
}