/* LISTAGEM: categoria, busca, mapa do site */

.titulo-lista { font-family: var(--titulo); font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 6px; }
.sub-lista { color: var(--texto-suave); font-size: 13px; margin: 0 0 4px; }
.contagem { color: var(--texto-fraco); font-size: 12px; margin: 4px 0 0; }

.lista-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--borda); }
.lista-ferramentas { display: flex; align-items: center; gap: 12px; }
.ordenar { font-size: 12px; color: var(--texto-suave); display: flex; align-items: center; gap: 8px; }
.ordenar select { height: 40px; border: 1px solid var(--borda); border-radius: var(--raio); background: #fff; padding: 0 32px 0 12px; font: inherit; font-size: 13px; color: var(--texto); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231e120d' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; cursor: pointer; }
.abre-filtros { display: none; height: 40px; padding: 0 20px; }

.lista-corpo { display: grid; grid-template-columns: 250px 1fr; gap: 40px; align-items: start; padding: 28px 0 0; }

/* ---------- filtros ---------- */
.filtros { position: sticky; top: 130px; }
.filtros-topo { display: none; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--borda); margin-bottom: 12px; }
.filtros-topo button { border: 0; background: none; font-size: 18px; color: var(--texto); }

.filtro { border-bottom: 1px solid var(--borda); }
.filtro summary { list-style: none; cursor: pointer; padding: 14px 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; display: flex; align-items: center; gap: 8px; position: relative; }
.filtro summary::-webkit-details-marker { display: none; }
.filtro summary::after { content: '+'; margin-left: auto; font-size: 16px; font-weight: 400; color: var(--texto-suave); transition: transform var(--transicao); }
.filtro[open] summary::after { content: '−'; }
.filtro summary i { background: var(--texto); color: #fff; font-style: normal; font-size: 10px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; }

.filtro-itens { display: grid; gap: 2px; padding-bottom: 14px; max-height: 260px; overflow-y: auto; }
.filtro-itens a { display: flex; align-items: center; gap: 9px; padding: 5px 4px; border-radius: 5px; font-size: 12.5px; transition: background var(--transicao); }
.filtro-itens a:hover { background: var(--fundo-alt); }
.filtro-itens .caixa { width: 15px; height: 15px; border: 1px solid var(--borda); border-radius: 3px; background: #fff; font-style: normal; font-size: 10px; display: grid; place-items: center; flex: 0 0 auto; }
.filtro-itens .marcado .caixa { background: var(--texto); border-color: var(--texto); color: #fff; }
.filtro-itens span { flex: 1; }
.filtro-itens em { font-style: normal; color: var(--texto-fraco); font-size: 11px; }

.filtro-preco { display: flex; align-items: center; gap: 7px; padding-bottom: 16px; flex-wrap: wrap; }
.filtro-preco input { width: 74px; height: 36px; border: 1px solid var(--borda); border-radius: 5px; padding: 0 9px; font: inherit; font-size: 12px; }
.filtro-preco span { font-size: 12px; color: var(--texto-suave); }
.filtro-preco .btn { height: 36px; padding: 0 14px; font-size: 11px; }

.limpar { display: inline-block; margin-top: 16px; font-size: 12px; text-decoration: underline; color: var(--texto-suave); }
.limpar:hover { color: var(--texto); }

/* ---------- mapa do site ---------- */
.mapa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 28px 0 60px; }
.mapa-col h3 { font-family: var(--corpo); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
.mapa-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.mapa-col a { font-size: 12.5px; color: var(--texto-suave); }
.mapa-col a:hover { color: var(--texto); text-decoration: underline; }
.mapa-col em { font-style: normal; color: var(--texto-fraco); font-size: 11px; }

@media (max-width: 1024px) { .mapa { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 900px) {
  .lista-corpo { grid-template-columns: 1fr; gap: 0; }
  .abre-filtros { display: inline-flex; }
  .filtros {
    position: fixed; inset: 0 auto 0 0; width: min(88vw, 340px); background: var(--fundo);
    z-index: 90; padding: 18px; overflow-y: auto; transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(.22,.61,.36,1); box-shadow: 0 0 40px rgba(0,0,0,.14);
  }
  body.filtros-abertos .filtros { transform: none; }
  body.filtros-abertos::after { content: ''; position: fixed; inset: 0; background: rgba(30,18,13,.35); z-index: 80; }
  .filtros-topo { display: flex; }
  .lista-topo { align-items: center; }
}