/* Clothing page specific styles - scoped and minimal, leveraging base.css variables */

.hero-section {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary-light));
  padding: var(--space-16) 0 var(--space-12);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--grid-gap);
}
@media (max-width: 768px) {
  .hero-grid { grid-template-columns: 1fr; }
}
.hero-copy p { max-width: 48ch; }
.hero-image { border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); }
.hero-actions { display: flex; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; }

.breadcrumbs ol { display: flex; gap: var(--space-2); font-size: var(--font-size-sm); margin-bottom: var(--space-4); }
.breadcrumbs li+li::before { content: "/"; color: var(--color-text-lighter); margin: 0 var(--space-2); }

.filters-section { padding: var(--space-8) 0; background: var(--color-background-soft); }
.filters-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); align-items: end; }
@media (max-width: 768px) { .filters-grid { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filter-chip { padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: 2px solid var(--color-primary-light); background: var(--color-white); color: var(--color-text); transition: all var(--transition-fast); }
.filter-chip:hover { background: var(--color-primary-light); }
.filter-chip[aria-pressed="true"], .filter-chip.active { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }

.products-section { padding: var(--space-12) 0; }
.section-header { margin-bottom: var(--space-6); }
.products-grid { align-items: stretch; }
.product-media-wrapper { position: relative; border-radius: var(--radius-xl); overflow: hidden; }
.product-media { width: 100%; height: 240px; object-fit: cover; display: block; }
.product-badge { position: absolute; top: var(--space-3); left: var(--space-3); }
.product-title { margin-bottom: var(--space-2); }
.product-meta { color: var(--color-text-light); font-size: var(--font-size-sm); }
.product-price { margin-top: var(--space-2); font-size: var(--font-size-lg); }
.product-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }

.materials-section, .matching-section, .eco-section, .care-section, .reviews-section, .tips-section { padding: var(--space-12) 0; }
.info-grid .card { height: 100%; }

.size-table-wrapper { overflow-x: auto; margin-top: var(--space-4); }
.size-table { width: 100%; background: var(--color-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.size-table th, .size-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 2px solid var(--color-neutral-200); }
.size-table thead th { background: var(--color-neutral-100); font-weight: var(--font-weight-semibold); }

.eco-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--grid-gap); align-items: center; }
@media (max-width: 768px) { .eco-grid { grid-template-columns: 1fr; } }
.eco-figure img { border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); }
.eco-points { display: grid; gap: var(--space-2); }

.review .card-header { border-bottom: 2px solid var(--color-neutral-200); }

.tips-list { display: grid; gap: var(--space-2); list-style: none; }

/* Small spacing utility for local use */
.gap-sm { gap: var(--space-3); }

/* Accessibility helpers */
.filter-chip:focus-visible { outline: 3px solid var(--color-primary-light); outline-offset: 2px; }