/* NOSSO.ELO — tela do catalogo. Carrega depois de base.css. */

.titulo-catalogo { padding: 24px 0 4px; }
.titulo-catalogo h1 { margin: 0; font: 400 28px/1.1 var(--serifa); }
.titulo-catalogo p { margin: 6px 0 0; color: var(--tinta-2); font-size: 14.5px; }

/* ---------- Filtros ---------- */

/* Gruda logo abaixo do cabecalho: quem rola 200 produtos precisa trocar de
   marca sem voltar ao topo. */
.filtros {
  position: sticky; top: var(--topo); z-index: 30;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
}
.filtros .envoltorio { padding-top: 10px; padding-bottom: 8px; }

.chips {
  display: flex; gap: 7px;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 7px;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  min-height: 34px; padding: 0 14px;
  border: 1px solid var(--linha); border-radius: 999px;
  background: var(--carta); color: var(--tinta);
  font: 14px var(--sans); white-space: nowrap; cursor: pointer;
}
.chip[aria-pressed="true"] {
  background: var(--preto); color: var(--ouro-luz); border-color: var(--preto);
}
.chip-favoritos[aria-pressed="true"] {
  background: var(--oferta); border-color: var(--oferta); color: #fff;
}

.chips-categoria .chip { font-size: 13.5px; min-height: 31px; }

/* ---------- Barra de resultado ---------- */

.resultado {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding-top: 16px; padding-bottom: 12px;
}
.contador { margin: 0; font-size: 14px; color: var(--tinta-2); }
.ordenar select {
  height: 38px; padding: 0 32px 0 12px;
  border: 1px solid var(--linha); border-radius: 999px;
  background: var(--carta) no-repeat right 12px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236c6359' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  font: 14px var(--sans); color: var(--tinta);
  -webkit-appearance: none; appearance: none; cursor: pointer;
}

/* ---------- Grade ---------- */

.grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding-bottom: 24px;
}
@media (min-width: 620px) { .grade { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .grade { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (min-width: 1100px) { .grade { grid-template-columns: repeat(5, 1fr); } }