/* Utensils page-specific styles (kept minimal, leveraging base.css) */
.section { padding-block: var(--space-16); }
.section.alt { background: var(--gray-50); }
.section__header { margin-bottom: var(--space-8); }

.hero p { margin-top: var(--space-2); }

.toolbar { margin-top: var(--space-6); display: grid; gap: var(--space-4); }
.toolbar__form { display: grid; gap: var(--space-2); }
.toolbar__cta { display: inline-flex; gap: var(--space-3); flex-wrap: wrap; }
.results { margin-top: var(--space-3); color: var(--gray-700); }

.product-card { display: grid; gap: var(--space-4); }
.product-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--gray-100); }
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-info { display: grid; gap: var(--space-2); }
.product-title { margin: 0; }
.product-meta { color: var(--gray-700); }
.price { font-weight: 700; font-size: 1.125rem; }
.rating span { letter-spacing: 0.15em; background: linear-gradient(90deg, var(--color-warning) 0 90%, var(--gray-300) 90% 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.product-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.product-aux { margin-top: var(--space-2); color: var(--gray-700); }
.compare { display: inline-flex; align-items: center; gap: 0.5rem; }

.review .rating span { background: none; color: var(--color-warning); letter-spacing: 0.15em; }

.wishlist { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.wishlist li { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3); border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--color-surface); }
.wishlist .meta { color: var(--gray-700); }

.compare-panel { display: grid; gap: var(--space-4); }
.compare-actions { display: inline-flex; gap: var(--space-3); flex-wrap: wrap; }
.compare-selected { color: var(--gray-800); }
.help-text { color: var(--color-danger); }

.backtop { padding-block: var(--space-10); display: flex; justify-content: flex-end; }

@media (min-width: 768px) {
  .toolbar { grid-template-columns: 1fr auto; align-items: end; }
}