/* ==========================================================================
   css/catalogo.css — catálogo (productos.php), 2026-10-29.

   Los criterios (categoría, precio, marca, estado, valoración, orden…) están
   en la cabecera de la tienda; aquí solo queda una franja fina con las migas y
   el título de lo que se mira, y la rejilla a todo el ancho. La tarjeta vive en
   tienda.css porque también la usan la ficha (relacionados) y las marcas.
   ========================================================================== */
.page-catalogo {
  --cat-tinta: var(--gc-ink, #171b26);
  --cat-ocre: var(--gc-accent, #826111);
  --cat-suave: var(--gc-muted, #5f6878);
  background: #f7f6f3;
}
/* Mismo ancho que la cabecera de la tienda. */
.page-catalogo .shop-wrap { max-width: 1320px; padding: 22px clamp(1rem, 3vw, 1.5rem) 60px; }

.cat-franja { margin-bottom: 18px; }
.cat-migas {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  margin-bottom: .35rem;
  font-size: .8rem; color: #9aa0ab;
}
.cat-migas a { color: var(--cat-suave); text-decoration: none; }
.cat-migas a:hover { color: var(--cat-ocre); }
.cat-migas [aria-current] { color: var(--cat-tinta); font-weight: 700; }
.cat-franja__titulo {
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(1.45rem, 2.6vw, 1.9rem); font-weight: 800; letter-spacing: -.02em;
  color: var(--cat-tinta);
  overflow-wrap: anywhere;
}

/* Rejilla a todo el ancho: sin barra lateral caben 5 por fila en escritorio. */
.page-catalogo .shop-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.page-catalogo .shop-pager__btn.is-actual { background: var(--cat-tinta); border-color: var(--cat-tinta); }

/* Entrada escalonada de las tarjetas (la añade catalogo.js; sin JS no hay
   animación y todo se ve igual). */
.page-catalogo .shop-grid__item.is-entrando { opacity: 0; transform: translateY(14px); }
.page-catalogo .shop-grid__item.is-dentro {
  opacity: 1; transform: none;
  transition: opacity .45s var(--gc-ease, ease), transform .45s var(--gc-ease, ease);
  transition-delay: var(--retraso, 0ms);
}
@media (max-width: 575.98px) {
  .page-catalogo .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-catalogo .shop-grid__item.is-entrando { opacity: 1; transform: none; }
}
.cat-franja__fila { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; }
.cat-franja__limpiar {
  display: inline-flex; align-items: center; gap: .45rem;
  height: 36px; padding: 0 1rem;
  border: 1px solid #e2dfd6; border-radius: 999px;
  background: #fff; color: var(--cat-tinta);
  font-size: .84rem; font-weight: 700; text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.cat-franja__limpiar:hover { border-color: var(--cat-tinta); color: var(--cat-tinta); }
/* Sin recuento, el pie solo lleva «Ver más productos»: centrado. */
.page-catalogo .shop-pie { justify-content: center; margin-top: 32px; }