/* Barra de filtros grudenta + grade de produtos. */

.barra {
  position: sticky; top: var(--topo-total); z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding-block: 14px; margin-bottom: 22px;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  overflow-x: auto; scrollbar-width: none;
}
.barra::-webkit-scrollbar { display: none; }

.pilula {
  flex: none; height: 40px; padding: 0 18px;
  border: 1px solid var(--linha); border-radius: 0;
  background: #fff; color: var(--texto-medio);
  font-variation-settings: "wdth" 118; font-weight: 800;
  font-size: .98rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  transition: border-color .16s, background .16s, color .16s;
}
.pilula:hover { border-color: var(--linha-forte); color: var(--texto); }
.pilula[aria-pressed="true"] { background: var(--grafite); border-color: var(--grafite); color: #fff; }

.barra-conta { flex: none; margin-left: auto; padding-left: 14px; font-size: .84rem; color: var(--texto-fraco); }

/* Fio de 1px no lugar de gap: a grade fica densa e o corte, duro. */
.grade {
  display: grid; gap: 1px;
  /* 176px em vez de 206: mais colunas, card menor. Densidade e o que
     separa a leitura de vitrine da leitura de loja. */
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  background: var(--linha);
  border: 1px solid var(--linha);
}

.nada { grid-column: 1 / -1; padding: 72px 20px; text-align: center; color: var(--texto-fraco); background: var(--papel); }
.nada strong { display: block; font-variation-settings: "wdth" 118; font-weight: 800; font-size: 1.5rem; color: var(--texto); margin-bottom: 6px; }

@media (max-width: 820px) { .barra { top: 0; } }

/* Duas colunas no telefone.

   Com minmax(176px) o celular caía em coluna única, e o card ocupando a
   largura toda devolvia a leitura de vitrine — foto enorme, um produto
   por vez — justamente onde a maior parte do acesso acontece. Loja
   mostra dois por linha no telefone, e é o que se espera ao rolar. */
@media (max-width: 560px) {
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-foto { padding: 8px; }
  .card-corpo { padding: 0 9px 8px; }
  .card-pe { padding: 8px 9px 10px; }
  .card-nome { font-size: .82rem; }
  .card-add { height: 34px; font-size: .72rem; }
}

/* Lista de produtos escrita no HTML da página de linha, que o JavaScript
   substitui pela grade ao carregar.

   Ela existe para o buscador e para quem chega sem JavaScript: sem ela, a
   página de "gesso acartonado" seria um cabeçalho e um <div> vazio. Fica
   visível de propósito — lista escondida que só o robô lê é justamente o
   que ele pune. */
.lista-semjs {
  grid-column: 1 / -1;
  margin: 0; padding: 0 0 0 1.1rem;
  columns: 260px; column-gap: 32px;
}
.lista-semjs li {
  break-inside: avoid;
  margin-bottom: .45rem;
  font-size: .86rem; line-height: 1.4;
}
.lista-semjs a { color: var(--texto); }
.lista-semjs a:hover { color: var(--laranja-forte); }
.lista-semjs span {
  display: block;
  font-size: .7rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto-fraco);
}