/* Catálogo y ficha de producto. Mobile-first. */

.catalog { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; padding-bottom: var(--s-6); }

.filters { display: none; padding: var(--s-4); background: var(--c-gray); border-radius: var(--r-lg); }
.filters.is-open { display: block; }
.filters__form { display: grid; gap: var(--s-5); }
.filters__group { display: grid; gap: var(--s-1); }
.filters__group legend { margin-bottom: var(--s-2); }

.catalog__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.catalog__count { font-weight: 700; margin-right: auto; font-variant-numeric: tabular-nums; }
.catalog__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); width: 100%; }
.field--inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; }
.field--inline label { white-space: nowrap; font-weight: 600; }
.field--inline select { width: auto; min-width: 0; flex: 1 1 11rem; }
.view-toggle { display: inline-flex; gap: var(--s-1); margin-left: auto; padding: 0.2rem; background: var(--c-gray); border-radius: var(--r-pill); }

.catalog .product-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); }
.catalog .product-grid[data-view="list"] { grid-template-columns: 1fr; }

/* Ficha */
.product-detail { display: grid; gap: var(--s-6); padding-block: var(--s-5) var(--s-6); align-items: start; }
.product-detail__media { background: linear-gradient(160deg, var(--c-gray), var(--c-white)); border: 1px solid var(--c-line); border-radius: var(--r-xl); overflow: hidden; }
.product-detail__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: var(--s-4); }
.product-detail__caption { padding: var(--s-3) var(--s-4); font-size: var(--fs-xs); color: var(--c-muted); border-top: 1px solid var(--c-line); background: var(--c-white); }
.product-detail__info { display: grid; gap: var(--s-3); }
.product-detail__info h1 { font-size: var(--fs-xl); font-weight: 760; }
.product-detail__lead { font-size: var(--fs-md); color: var(--c-muted); }
.product-detail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-block: var(--s-3); }
.product-detail .specs { margin-top: var(--s-4); }