/* =====================================================================
   catalogo.css · listado con filtros (categoría / cases / colección)
   ===================================================================== */

.cat-layout { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .cat-layout { grid-template-columns: 1fr; gap: 1rem; } }

/* --- Sidebar de filtros --- */
.filters {
  position: sticky; top: calc(var(--mc-header-h) + 16px);
  max-height: calc(100vh - var(--mc-header-h) - 32px); overflow-y: auto;
  border: 1px solid var(--mc-gray-200); border-radius: var(--mc-radius); padding: 1.2rem;
}
@media (max-width: 900px) { .filters { position: static; display: none; } .filters.is-open { display: block; } }

.filters__group { padding-block: 1rem; border-bottom: 1px solid var(--mc-gray-200); }
.filters__group:first-child { padding-top: 0; }
.filters__group:last-child { border-bottom: 0; padding-bottom: 0; }
.filters__group h4 { font-size: var(--mc-fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--mc-gray-500); margin-bottom: .8rem; }
.filters__list { display: grid; gap: .4rem; max-height: 280px; overflow-y: auto; }
.filters__list a { font-size: var(--mc-fs-base); color: var(--mc-gray-700); display: flex; justify-content: space-between; }
.filters__list a:hover { color: var(--mc-ink); }
.filters__list a.is-active { color: var(--mc-ink); font-weight: 700; }
.filters__list a.is-active::before { content: "› "; color: var(--mc-lime-700); }
.filters__price { display: flex; gap: .5rem; align-items: center; }
.filters__price input { width: 100%; }

/* --- Toolbar --- */
.cat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.cat-toolbar__count { color: var(--mc-gray-500); font-size: var(--mc-fs-sm); }
.cat-toolbar__count b { color: var(--mc-ink); }
.cat-toolbar__right { display: flex; gap: .6rem; align-items: center; }
.cat-filter-toggle { display: none; }
@media (max-width: 900px) { .cat-filter-toggle { display: inline-flex; } }

.cat-empty { text-align: center; padding: 4rem 1rem; color: var(--mc-gray-400); display: grid; gap: 1rem; place-items: center; }
.cat-empty .bi { font-size: 2.4rem; }

/* Encabezado de sección con banner */
.cat-head { margin-bottom: 1.5rem; }
.cat-head h1 { font-size: var(--mc-fs-3xl); margin-bottom: .3rem; }

/* --- Carga lazy (infinite scroll) --- */
.cat-sentinel { display: flex; justify-content: center; align-items: center; min-height: 90px; padding: 1.4rem 0; }
.cat-spinner { width: 30px; height: 30px; border: 3px solid var(--mc-gray-200); border-top-color: var(--mc-ink); border-radius: 50%; opacity: 0; transition: opacity .2s; }
.cat-sentinel.is-loading .cat-spinner { opacity: 1; animation: cat-spin .7s linear infinite; }
@keyframes cat-spin { to { transform: rotate(360deg); } }