/* Products page specific styles (minimal, respecting base.css) */
.page-hero { padding-block: var(--space-14) var(--space-10); background: var(--gray-50); }
.page-hero h1 { font-family: "Playfair Display", serif; }
.toolbar-grid { grid-template-columns: 1.2fr .6fr .6fr; gap: var(--space-4); margin-top: var(--space-6); }
@media (max-width: 900px) { .toolbar-grid { grid-template-columns: 1fr; } }

.filters-section { padding-block: var(--space-8); border-top: 1px solid var(--color-border); background: var(--color-surface); }
.filters-summary { cursor: pointer; font-weight: 600; padding: var(--space-3) 0; }
.filters-form { margin-top: var(--space-3); }
.filters-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 1100px) { .filters-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .filters-grid { grid-template-columns: 1fr; } }
.price-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips label { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-full); cursor: pointer; }
.swatches { display: flex; gap: 10px; align-items: center; }
.swatch { width: 28px; height: 28px; display: inline-flex; border-radius: var(--radius-full); background: var(--sw); cursor: pointer; }
.swatch input { appearance: none; width: 100%; height: 100%; border-radius: inherit; outline: none; }
.swatch input:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent); }
.filters-actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }

.trending-section { padding-block: var(--space-10); }
.products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 1200px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .products-grid { grid-template-columns: 1fr; } }

.product-card .product-media { aspect-ratio: 1 / 1; display: block; }
.product-info { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.product-title { font-size: var(--text-size-lg); }
.product-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.product-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.sizes .btn { padding: 8px 10px; }

.categories-section { padding-block: var(--space-8); border-top: 1px solid var(--color-border); }
.categories-nav { gap: var(--space-3); flex-wrap: wrap; }

.details-section, .pricing-section, .availability-section, .reviews-section, .related-section { padding-block: var(--space-10); }
.details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 800px) { .details-grid { grid-template-columns: 1fr; } }

.reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; } }

.related-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 700px) { .related-list { grid-template-columns: 1fr; } }

.checkout-cta { padding-block: var(--space-10); }

/* Subtle UI enhancements */
.product-card .availability.badge-warning { background: color-mix(in srgb, var(--color-warning) 18%, transparent); }
.product-card .availability.badge-success { background: color-mix(in srgb, var(--color-success) 18%, transparent); }
.rating i { margin-right: 2px; }

/* Utility tweak for small button variant inside toolbar */
.btn-sm { padding: 10px 12px; font-size: var(--text-size-xs); }