/* Accessories Page Styles — CityGaerGame */

.section-hero {
  padding: var(--space-16) 0 var(--space-10);
  background: linear-gradient(180deg, var(--color-aged-paper) 0%, transparent 60%);
}
.section-hero .subtitle {
  color: var(--color-text-muted);
}

.section-toolbar {
  padding: var(--space-6) 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}
.toolbar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .toolbar-grid {
    grid-template-columns: 1fr 2fr auto;
    align-items: start;
  }
}

.search-form { width: 100%; }

.filters-fieldset { border: 0; margin: 0 0 var(--space-4); padding: 0; }
.filters-legend {
  font-family: var(--font-family-accent);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}
.filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: #7a684f;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-family-ui);
}
.filter-chip input { flex-shrink: 0; }

.sort-wrap { min-width: 220px; }

.results-count {
  margin-top: var(--space-3);
  color: var(--color-text-light);
  font-family: var(--font-family-ui);
}

.section-products { padding: var(--space-10) 0; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}
@media (min-width: 768px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.product-card { display: flex; flex-direction: column; height: 100%; }
.product-media { aspect-ratio: 4/3; border-radius: var(--radius-md); overflow: hidden; background: var(--color-gray-100); }
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-body { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.product-title { font-size: var(--font-size-lg); line-height: var(--line-height-tight); }
.product-price { font-family: var(--font-family-ui); font-weight: var(--font-weight-semibold); color: var(--color-dark-wood); }
.product-meta { font-family: var(--font-family-ui); font-size: var(--font-size-sm); color: var(--color-text-light); }
.product-actions { margin-top: auto; display: flex; gap: var(--space-3); flex-wrap: wrap; }

.section-text { padding: var(--space-10) 0; }
.section-compat { padding: var(--space-10) 0; background: var(--color-surface-secondary); }
.compat-list { padding-left: 1.1rem; }
.compat-list li { list-style: disc; margin-left: 1rem; margin-bottom: var(--space-2); }

.section-reviews { padding: var(--space-10) 0; }
.section-recos { padding: var(--space-10) 0 var(--space-16); }
.recos-list { padding-left: 1.25rem; }
.recos-list li { list-style: decimal; margin-left: 1rem; margin-bottom: var(--space-2); }

/* Focus enhancement for product cards */
.product-card:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }