/**
 * 产品页面样式
 */

.page-header {
    background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
    padding: var(--spacing-3xl) 0;
    text-align: center;
}

.page-header h1 {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
}

.page-header p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
}

.product-filters {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
}

.filter-buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.filter-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: var(--font-size-base);
    transition: all var(--transition-base);
}

.filter-btn:hover {
    background-color: var(--color-bamboo-light);
    border-color: var(--color-bamboo-dark);
    color: var(--color-bamboo-dark);
}

.filter-btn.active {
    background-color: var(--color-bamboo-dark);
    color: var(--color-cream);
    border-color: var(--color-bamboo-dark);
}

.products-section {
    padding: var(--spacing-3xl) 0;
    background-color: var(--color-bg-secondary);
}