/* A listagem — o que no Mercado Livre e a pagina de /lista.

   Duas colunas: filtros a esquerda, resultado a direita. E o arranjo que
   o setor inteiro usa, e por um motivo que vale escrever: num catalogo
   sem preco, o filtro E a navegacao. Quem procura chapa nao busca por
   nome — busca por espessura, por borda, por tipo. A lateral nao e um
   acessorio da grade, e o caminho ate ela.

   Carrega estilo.css antes: tokens, cabecalho, cartao de produto e
   botoes vem de la, e o cartao e exatamente o mesmo da home. */

.listagem { padding-block: 16px 40px; }


/* ── Migalha ──────────────────────────────────────────────────────── */

.migalha {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: .78rem; color: var(--texto-fraco);
}
.migalha a { color: var(--acao); }
.migalha a:hover { text-decoration: underline; }
.migalha b { font-weight: 600; color: var(--texto-medio); }

/* A lateral e a PRIMEIRA coluna, mas o SEGUNDO filho.

   O resultado vem antes no documento para que o h1 da linha preceda o
   "Filtros", e para que o Tab chegue ao produto sem atravessar trinta
   caixas de marcacao. grid-column desfaz isso na tela: ordem de leitura
   e ordem visual nao precisam ser a mesma, e aqui a certa e diferente
   para cada uma. */
.listagem-corpo {
  display: grid; grid-template-columns: 232px 1fr; gap: 26px;
  align-items: start;
}
.listagem-corpo > .lateral { grid-column: 1; grid-row: 1; }
.listagem-corpo > .resultado { grid-column: 2; grid-row: 1; }
/* Linha sem ficha tecnica nao gera filtro nenhum. A lateral vazia, so com
   o titulo "Filtros", parece defeito — some com ela e a grade toma a
   largura inteira. */
.listagem-corpo[data-sem-filtros="true"] { grid-template-columns: 1fr; }
.listagem-corpo[data-sem-filtros="true"] .lateral { display: none; }
.listagem-corpo[data-sem-filtros="true"] > .resultado { grid-column: 1; }


/* ── Lateral ──────────────────────────────────────────────────────── */

/* Grudenta E rolavel por dentro.

   So com "sticky" a lateral da linha Dewalt tem 2.400px de altura: mais
   alta que a tela, entao o sticky nunca prende e o fim da lista de
   filtros so aparece se a pagina inteira rolar ate la — passando da
   grade. O max-height prende a coluna a altura da janela e manda o
   excedente rolar dentro dela.

   O "100vh menos 28" desconta o respiro de cima e de baixo. */
.lateral {
  position: sticky; top: 14px;
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  /* A barra de rolagem interna nao pode encostar nos numeros. */
  padding-right: 4px;
  scrollbar-width: thin;
}
.lateral-topo { display: flex; align-items: center; margin-bottom: 10px; }
.lateral-topo h2 { font-size: .98rem; font-weight: 800; letter-spacing: -.01em; }
.lateral-fechar { display: none; margin-left: auto; padding: 4px; }
.lateral-fechar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

.faceta { border-top: 1px solid var(--linha); padding-block: 4px; }
.faceta:first-child { border-top: 0; }

.faceta-cabeca {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 2px;
  font-size: .82rem; font-weight: 700; text-align: left;
}
.faceta-cabeca svg {
  width: 14px; height: 14px; margin-left: auto; flex: none;
  fill: none; stroke: var(--texto-fraco); stroke-width: 2.2;
  transition: rotate .18s;
}
.faceta-cabeca[aria-expanded="false"] svg { rotate: -90deg; }

/* minmax(0, 1fr), e nao o "auto" implicito.

   Item de grade tem minimo automatico igual ao proprio conteudo: a
   coluna se recusava a ficar menor que "Acessorios & Acessorios para
   Aparadores Grama e Bordas", e a opcao inteira — nome E numero —
   transbordava a lateral de 232px. O ellipsis no nome nao resolvia,
   porque o nome nunca era obrigado a encolher. O minmax e o que
   autoriza a coluna a ser menor que o conteudo dela. */
.faceta-opcoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; padding-bottom: 8px; }
.faceta-opcoes[hidden] { display: none; }

.opcao {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
  padding: 5px 6px;
  border-radius: var(--canto);
  font-size: .81rem; color: var(--texto-medio);
  cursor: pointer;
  transition: background .14s, color .14s;
}
.opcao:hover { background: var(--chao); color: var(--texto); }
.opcao input { width: 15px; height: 15px; flex: none; accent-color: var(--laranja-forte); margin: 0; }

/* min-width: 0 desarma o minimo automatico do item de flex.

   Sem ele, o nome se recusa a encolher abaixo da propria largura:
   "Discos Lixas Abrasivos E Acessorios" empurrava o 38 para fora da
   coluna de 232px, e o numero — que e a informacao que faz decidir se
   vale marcar — ficava cortado pela borda. O ellipsis existia, mas nunca
   era acionado, porque o elemento nunca era obrigado a encolher. */
.opcao span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* flex: none para o numero nunca ser espremido, e um minimo de largura
   para "145" e "7" alinharem a direita em vez de dancarem. */
.opcao i {
  flex: none; margin-left: auto; padding-left: 6px;
  min-width: 2.4ch; text-align: right;
  font-style: normal; font-size: .72rem; color: var(--texto-fraco);
}

/* Opcao que zeraria o resultado continua visivel, mas apagada e sem
   clique. Some-la mudaria a lista a cada marcacao e daria a impressao de
   que o filtro "come" opcoes; apagada, ela ensina que aquela combinacao
   nao existe no estoque. */
.opcao[data-vazia="true"] { opacity: .38; pointer-events: none; }

.faceta-mais {
  padding: 5px 6px;
  font-size: .76rem; font-weight: 700; color: var(--acao);
}
.faceta-mais:hover { text-decoration: underline; }


/* ── Topo do resultado ────────────────────────────────────────────── */

.resultado > h1 {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 800;
  letter-spacing: -.015em; margin-bottom: 4px;
}

.resultado-topo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.resultado-conta { font-size: .82rem; color: var(--texto-medio); }

.ordenar {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; color: var(--texto-medio);
}
.ordenar select {
  font: inherit; font-weight: 700; color: var(--texto);
  padding: 6px 8px;
  background: #fff;
  border: 1px solid var(--linha-forte);
  border-radius: var(--canto);
}

.abrir-filtros {
  display: none;
  align-items: center; gap: 7px;
  height: 34px; padding: 0 13px;
  border: 1px solid var(--linha-forte); border-radius: var(--canto);
  font-size: .8rem; font-weight: 700;
}
.abrir-filtros svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }


/* ── Etiquetas dos filtros marcados ───────────────────────────────── */

.marcados { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.marcados[hidden] { display: none; }
.marcado {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 10px;
  background: var(--laranja-fraco);
  border: 1px solid var(--laranja);
  border-radius: 999px;
  font-size: .76rem; font-weight: 600; color: var(--laranja-forte);
}
.marcado svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.marcado:hover { background: var(--laranja); color: var(--preto); }
.marcado-limpar {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .76rem; font-weight: 700; color: var(--texto-medio);
}
.marcado-limpar:hover { color: var(--texto); text-decoration: underline; }


/* ── Grade ────────────────────────────────────────────────────────── */

.grade {
  display: grid; gap: 12px;
  /* 168px de minimo: o cartao da home tem 182 e a grade aqui divide o
     espaco que sobra da lateral. Com minimo maior, tela de notebook
     cabia tres por fila e a listagem parecia vazia. */
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}

.paginacao {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.pag {
  min-width: 34px; height: 34px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--linha); border-radius: var(--canto);
  font-size: .8rem; font-weight: 600;
  transition: border-color .14s, background .14s;
}
.pag:hover:not(:disabled):not(.atual) { border-color: var(--linha-forte); background: var(--chao); }
.pag.atual { background: var(--laranja); border-color: var(--laranja); color: var(--preto); font-weight: 800; }
.pag:disabled { opacity: .4; cursor: default; }
.pag-gap { padding: 0 4px; color: var(--texto-fraco); }


/* ── Lateral no celular ───────────────────────────────────────────────
   Vira gaveta. Filtro empilhado acima da grade empurra o produto para
   fora da tela, e a pessoa rola trinta opcoes antes de ver o primeiro
   item — que e o motivo de ela ter aberto a pagina. */

/* Acima do cabecalho, que e grudento e tem z-index 90.

   Com 85 a gaveta abria POR BAIXO do topo: as primeiras opcoes e, pior,
   o botao de fechar ficavam escondidos atras da faixa laranja, e so
   sobrava o Escape — que ninguem usa no celular. Gaveta e modal; tem de
   cobrir tudo, inclusive o que estava grudado. */
.veu {
  position: fixed; inset: 0; z-index: 94;
  background: rgba(0, 0, 0, .45);
}
.veu[hidden] { display: none; }

@media (max-width: 860px) {
  /* A lateral vira gaveta fixa: sai do fluxo, e a grade volta a ser
     uma coluna so com o resultado dentro dela. */
  .listagem-corpo { grid-template-columns: 1fr; }
  .listagem-corpo > .resultado { grid-column: 1; }
  .abrir-filtros { display: inline-flex; }
  .lateral-fechar { display: block; }

  .lateral {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 95;
    width: min(320px, 86vw);
    padding: 16px;
    background: #fff;
    box-shadow: var(--sombra-alta);
    overflow-y: auto;
    translate: -100% 0;
    transition: translate .22s cubic-bezier(.3, .8, .3, 1);
  }
  .lateral[data-aberta="true"] { translate: 0 0; }
}

@media (max-width: 520px) {
  .grade { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* O resumo da linha, logo abaixo do titulo. O texto vem de
   js/config.js, onde ja existe para o buscador — escrever de novo aqui
   criaria uma segunda copia para manter desatualizada. */
.resultado-resumo {
  margin: 2px 0 10px;
  max-width: 68ch;
  font-size: .85rem; color: var(--texto-medio);
}


/* ── Grupo de filtros ─────────────────────────────────────────────────
   O segundo nivel da lateral. Existe porque a linha Dewalt tem 71
   subcategorias e sete delas comecam com "Acessorios": na coluna de
   232px todas eram cortadas no mesmo ponto e a lista lia como a mesma
   linha repetida.

   O cabecalho diz a palavra que se repete; as folhas dizem so o que
   sobra. */

.grupo-cabeca {
  width: 100%;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px;
  border-radius: var(--canto);
  font-size: .81rem; font-weight: 600; color: var(--texto-medio);
  text-align: left;
  transition: background .14s, color .14s;
}
.grupo-cabeca:hover { background: var(--chao); color: var(--texto); }
.grupo-cabeca svg {
  width: 13px; height: 13px; flex: none;
  fill: none; stroke: var(--texto-fraco); stroke-width: 2.2;
  transition: rotate .18s;
}
.grupo-cabeca[aria-expanded="false"] svg { rotate: -90deg; }
.grupo-cabeca > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Quantos filhos deste grupo estao marcados. Sem isso, grupo fechado
   com filtro ativo dentro nao da nenhum sinal, e o visitante nao sabe
   por que o resultado encolheu. */
.grupo-cabeca b {
  flex: none;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--laranja); color: var(--preto);
  border-radius: 999px;
  font-size: .62rem; font-weight: 800; line-height: 1;
}
.grupo-cabeca i {
  flex: none; margin-left: auto; padding-left: 6px;
  min-width: 2.4ch; text-align: right;
  font-style: normal; font-size: .72rem; color: var(--texto-fraco);
}

/* As folhas recuam e ganham um fio, que e o que mostra a que grupo
   pertencem sem precisar repetir a palavra em cada uma. */
.grupo-opcoes {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px;
  margin: 1px 0 3px 12px;
  padding-left: 8px;
  border-left: 1px solid var(--linha);
}
.grupo-opcoes[hidden] { display: none; }


/* ── A lista que existe antes do JavaScript ───────────────────────────

   Vem dentro do #grade nas paginas de linha geradas por
   scripts/paginas-linha-v3.mjs, e o linha.js a substitui pela grade ao
   carregar. Mesma regra de css/catalogo.css, com os tokens da v3.

   Existe para o buscador e para quem chega sem JavaScript: sem ela, a
   pagina de "gesso acartonado" seria um cabecalho e uma caixa vazia.
   Fica VISIVEL de proposito — lista escondida que so o robo le e
   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);
}