/* Products page specific styles (kept lightweight to avoid duplicating base.css) */
.page-hero { padding-block: var(--space-10); }
.products-count { color: var(--gray-600); margin-top: var(--space-4); }

.filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.filters .filter-field { display: grid; gap: var(--space-2); }
@media (max-width: 960px) { .filters { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .filters { grid-template-columns: 1fr; } }

.category-pills { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }
.pill { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border: 1px solid var(--gray-300); border-radius: var(--radius-pill); color: var(--color-heading); background: var(--color-surface); }
.pill:hover { background: var(--gray-100); text-decoration: none; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-7); margin-top: var(--space-6); }
.product-card .product-media { border-radius: var(--radius-lg); overflow: hidden; }
.product-card img { width: 100%; height: 220px; object-fit: cover; }
.product-card .product-content { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.product-card .product-title { margin: 0; font-size: var(--fs-500); }
.product-meta { display: flex; align-items: center; gap: var(--space-6); color: var(--gray-700); }
.price { font-weight: 700; color: var(--color-heading); }
.actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Product detail */
.product-detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-8); margin-top: var(--space-6); }
.detail-media img { border-radius: var(--radius-lg); width: 100%; height: auto; }
.detail-content { display: grid; gap: var(--space-4); align-content: start; }
.price-lg { font-size: var(--fs-600); font-weight: 700; }
.inline-actions { display: flex; gap: var(--space-4); align-items: center; }
@media (max-width: 980px) { .product-detail { grid-template-columns: 1fr; } }

/* Reviews */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.review footer { color: var(--gray-600); margin-top: var(--space-3); }

/* Related */
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-7); margin-top: var(--space-6); }
.related-media img { width: 100%; height: 180px; object-fit: cover; border-radius: var(--radius-lg); }
.related-title { margin: 0 0 var(--space-3) 0; font-size: var(--fs-500); }

/* Offers */
.offer-banners { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.offer strong { font-size: var(--fs-500); }

/* Comparison */
.compare-wrapper { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { border-top: 1px solid var(--gray-200); padding: var(--space-4) var(--space-5); text-align: left; }
.compare-table thead th { background: var(--gray-100); font-weight: 600; }
.compare-table tbody tr:nth-child(even) { background: var(--gray-50); }

/* FAQ */
.faq { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.faq details { background: var(--color-surface); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
.faq summary { cursor: pointer; font-weight: 600; }