/* grid.css - Rejillas de productos, categorías y paginación.
   Tema oscuro premium: gaps fluidos y paginación en pills. */
.mm-grid-productos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 26px);
}

.mm-grid-categorias {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 26px);
}

.mm-paginacion {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding-block: 34px;
  flex-wrap: wrap;
}

.mm-paginacion a,
.mm-paginacion span {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  background: var(--mm-superficie);
  border: 1.5px solid var(--mm-borde);
  color: var(--mm-texto-suave);
  box-shadow: var(--mm-sombra-xs);
  transition:
    border-color var(--mm-t-rapida) var(--mm-ease),
    background var(--mm-t-rapida) var(--mm-ease),
    color var(--mm-t-rapida) var(--mm-ease),
    box-shadow var(--mm-t-rapida) var(--mm-ease);
}

.mm-paginacion a:hover {
  border-color: var(--mm-primario);
  color: var(--mm-primario);
  background: var(--mm-superficie-hover);
  box-shadow: var(--mm-glow-suave);
}

.mm-paginacion .mm-actual {
  background: var(--mm-primario);
  border-color: var(--mm-primario);
  color: var(--mm-oscuro);
  box-shadow: var(--mm-glow-suave);
}

.mm-paginacion .mm-actual:hover {
  background: var(--mm-primario-claro);
  border-color: var(--mm-primario-claro);
  color: var(--mm-oscuro);
}

.mm-paginacion .mm-saltar {
  border-color: transparent;
  background: none;
  box-shadow: none;
  color: var(--mm-texto-tenue);
}

.mm-paginacion a:focus-visible {
  outline: none;
  border-color: var(--mm-primario);
  box-shadow: 0 0 0 3px var(--mm-anillo);
}

@media (min-width: 640px) {
  .mm-grid-productos {
    grid-template-columns: repeat(3, 1fr);
  }

  .mm-grid-categorias {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .mm-grid-categorias {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .mm-grid-productos {
    grid-template-columns: repeat(4, 1fr);
  }
}