/* ==========================================================
   Cardápio Espaço Chico Mendes — Ajustes responsivos
   Mobile-first: base em style.css, aqui apenas os breakpoints.
   ========================================================== */

/* ---------- Tablet (>= 600px): 2 cards por linha ---------- */
@media (min-width: 600px) {
  .produtos-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cabecalho-topo,
  .cabecalho-info,
  .conteudo,
  .barra-fixa > .busca-wrapper,
  .barra-fixa > .categorias-nav,
  .barra-fixa > .subcategorias-nav {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* ---------- Desktop (>= 900px): 3 cards por linha ---------- */
@media (min-width: 900px) {
  .produtos-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cabecalho {
    padding: 1.6rem 1.5rem;
  }

  .barra-fixa {
    padding: 1rem 1.5rem 0.75rem;
  }

  .conteudo {
    padding: 1.5rem 1.5rem 3rem;
  }

  .marca-titulo {
    font-size: 1.6rem;
  }
}

/* ---------- Monitores grandes (>= 1280px): 4 cards por linha ---------- */
@media (min-width: 1280px) {
  .produtos-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Celulares bem pequenos (<= 360px): reduz respiro ---------- */
@media (max-width: 360px) {
  .marca-titulo {
    font-size: 1.15rem;
  }

  .produto-corpo {
    padding: 0.85rem 0.9rem 1rem;
  }
}

/* ---------- Acessibilidade: respeita preferência de menos animação ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .produto-card:hover {
    transform: none;
  }
}