/* Ruta: /public/assets/css/catalog.css
   Estilos propios del Catálogo (Iteración 7). Usa los tokens de theme.css y
   reutiliza .cat-grid / .pcard-grid definidos en shop.css. */

/* (El breadcrumb es un componente compartido; sus estilos viven en shop.css) */

/* ---------- Banner de categoría ---------- */
.cat-banner { background: linear-gradient(135deg, var(--navy), var(--navy-hover)); color: #fff; }
.cat-banner-inner { display: flex; align-items: center; gap: 1rem; padding: 34px 0; }
.cat-banner-icon { font-size: 3rem; line-height: 1; background: rgba(255,255,255,.15); border-radius: 16px; width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; }
.cat-banner-title { font-family: 'Fraunces', serif; margin: 0; font-size: 2rem; }
.cat-banner-sub { margin: .2rem 0 0; opacity: .9; }

/* ---------- Chips de categoría ---------- */
.cat-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.chip { padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: .95rem; transition: all .15s; }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- Filtros ---------- */
.catalog-filters { display: grid; grid-template-columns: 1fr; gap: .6rem; margin-bottom: 1rem; }
.catalog-count { margin: 0 0 1.4rem; }

/* ---------- Paginación ---------- */
.pagination-nav { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 2.2rem; }
.page-btn { min-width: 44px; text-align: center; padding: .6rem .9rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; }
.page-btn:hover { border-color: var(--brand); color: var(--brand); }
.page-btn.is-current { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- Tablet+ ---------- */
@media (min-width: 640px) {
    .catalog-filters { grid-template-columns: 1fr auto auto; align-items: center; }
    .cf-search { min-width: 260px; }
}