/* ✅ catalog.css — shop/product enhancements (on top of main.css tokens.css) */

/* --- shop sidebar --- */
.shop-layout { display: grid; grid-template-columns: 260px 1fr; gap var(--space-6); align-items: start; min-height: 80vh; }
.shop-sidebar { grid-row: 1 / -1; }
.shop-main { grid-row: 1 / -1; margin-left: 0; }
@media (max-width: 880px) { .shop-layout { grid-template-columns: 1fr; } .shop-sidebar { min-width: auto; order: 2; } .shop-main { order: 1; } }

/* --- pills --- */
.pill { display:inline-flex;align-items:center;gap:2px;padding:2px 6px;border-radius:var(--radius-pill);background:var(--color-primary-50);color:var(--color-primary-800);font-size:var(--font-size-xs);margin:2px;margin-bottom:2px;font-weight:var(--font-weight-medium); }
.pill .pill-remove { color:var(--color-text-muted);font-size:0.8rem;margin-left:4px; }
.pill-remove:hover { color:var(--color-error); }

/* --- product grid adjustments --- */
.product-grid { grid-template-columns: repeat(auto-fill, minmax(225px,1fr)); gap var(--space-4); }

/* --- sort select in toolbar --- */
.toolbar .select { margin-left: var(--space-3); }

/* --- breadcrumb in shop --- */
.breadcrumb { background: var(--glass-bg-strong); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:var(--space-3) var(--space-4); margin-bottom:var(--space-4); }