/* Filters page specific styles (keeps consistent with base.css) */
.filters-layout { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-8); }
@media (max-width: 1024px) { .filters-layout { grid-template-columns: 1fr; } }

.filters-sidebar { position: sticky; top: var(--space-8); align-self: start; }
@media (max-width: 1024px) { .filters-sidebar { position: static; } }

.filters-form { display: grid; gap: var(--space-5); }
.filter-group { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-xs); }
.filter-group > summary { cursor: pointer; list-style: none; user-select: none; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.filter-group[open] > summary { border-bottom: 1px solid var(--color-border); }
.filter-group > summary::-webkit-details-marker { display: none; }
.filter-group > summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--color-muted); font-size: 12px; }
.filter-group[open] > summary::after { content: "\f077"; }
.filter-group .field { padding: 14px 16px; }

.checkboxes-grid, .sizes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
@media (min-width: 640px) { .checkboxes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.checkbox-item, .radio-item { display: flex; align-items: center; gap: 10px; }
.checkbox-item input, .radio-item input { width: auto; }

/* Price rows */
.price-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.price-row { display: grid; gap: 6px; }
.range-rows { position: relative; display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 8px; }
.range-rows input[type=range] { width: 100%; }

/* Swatches */
.swatches { display: grid; grid-template-columns: repeat(6, 28px); gap: 10px; }
.swatch { display: inline-flex; align-items: center; justify-content: center; }
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch span[aria-hidden] { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--sw, #eee); box-shadow: inset 0 0 0 1px var(--color-border); }
.swatch input:checked + span[aria-hidden] { outline: 3px solid color-mix(in srgb, var(--color-primary) 40%, transparent); outline-offset: 2px; }

.filters-actions { display: flex; gap: 10px; justify-content: flex-start; padding: 0 2px 2px; }

/* Results */
.filters-results { display: grid; gap: var(--space-6); }
.results-header { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.results-controls select { min-width: 220px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-primary) 6%, transparent); font-size: var(--text-size-sm); }
.chip button { border: 0; background: transparent; color: var(--color-text); cursor: pointer; }

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

/* Product card */
.product-card .product-media { aspect-ratio: 1/1; background: linear-gradient(135deg, var(--gray-100), var(--gray-50)); display: grid; place-items: center; }
.product-card .product-media::after { content: ""; width: 60%; height: 60%; border-radius: var(--radius-md); background: linear-gradient(180deg, #e5e7eb, #cbd5e1); box-shadow: var(--shadow-sm); }
.product-card .card-body { display: grid; gap: 8px; }
.product-card .title { font-weight: 600; }
.product-card .meta { display: flex; justify-content: space-between; align-items: center; }
.product-card .rating { font-size: 14px; }
.product-card .actions { display: flex; gap: 8px; }

/* Tips card */
.tips .card-body p { margin-top: 0; }