/* ============================================================
   categoria-mrcd-v4.css
   Apenas o que é ESPECÍFICO da página de categoria.
   Header, cards, cores e tipografia seguem o home-mrcd-v3.css
   (design unificado com a home). Aqui só resolvemos a GRADE do
   #productsGrid, porque o components define #productsGrid{display:block}
   (especificidade de ID) e precisamos vencer isso nos dois modos.
   ============================================================ */

/* ===== MODO LISTA: o próprio #productsGrid é a grade ===== */
body.category-page #productsGrid:not(.is-catalog){
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
@media (max-width: 1200px){
  body.category-page #productsGrid:not(.is-catalog){
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 900px){
  body.category-page #productsGrid:not(.is-catalog){
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px){
  body.category-page #productsGrid:not(.is-catalog){
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* ===== MODO CATÁLOGO: empilha as seções; a grade interna (.grid)
   é estilizada pelo home-mrcd-v3.css ===== */
body.category-page #productsGrid.is-catalog{
  display: block !important;
}

/* ===== Controles (título + ordenar + somente ofertas) ===== */
.category-page .controls{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.category-page .controls__left{ display: grid; gap: 6px; min-width: 0; }
.category-page #categoryTitle{ margin: 0; }
.category-page #resultHint{ margin: 0; }

@media (max-width: 700px){
  .category-page .controls{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .category-page .controls__right{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
  }
}