/* ============================================================
   pages/catalog.css — listado del catálogo
   ============================================================ */

.catalog-head { max-width: 60ch; margin-bottom: var(--space-xl); }
.catalog-head h1 { margin: 0 0 var(--space-sm); }
.catalog-head__lead { color: var(--color-text-muted); font-size: var(--step-1); margin: 0; }

/* Filtros por categoría y por cultivo (chips)
   El margen inferior lo lleva el grupo y no cada fila: así da igual que el
   catálogo tenga cultivos cargados o no, la separación con la grilla es la
   misma. */
.catalog-filters-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}
.catalog-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}
.catalog-filters__label {
  font-family: var(--font-label);
  font-size: .72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-muted);
  /* Ancho fijo para que «Categoría» y «Cultivo» alineen sus filas de chips. */
  min-width: 5.5rem;
}
@media (max-width: 560px) {
  /* En móvil la etiqueta ocupa su propia línea: forzar la alineación dejaría
     los chips arrancando a media pantalla. */
  .catalog-filters__label { min-width: 100%; }
}
.chip {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .01em;
  color: var(--color-text-body);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: .5em 1.1em;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.chip:hover { border-color: var(--color-brand-green); color: var(--color-brand-green-text); text-decoration: none; }
.chip--on {
  background: var(--color-brand-green);
  border-color: var(--color-brand-green);
  color: #fff;
}
.chip--on:hover { color: #fff; }

.catalog-empty { color: var(--color-text-muted); padding-block: var(--space-xl); }