/* =========================================================
   ZH OUTFITS — BARRA DE FILTROS E ORDENAÇÃO DO CATÁLOGO
   Visual da barra montada por js/catalogo-filtros.js.
   ========================================================= */

.filtros{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
  padding:14px 16px;
  margin-bottom:22px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}

.filtros__ordem{ display:flex; align-items:center; gap:8px; }
.filtros__ordem span,
.filtros__rotulo{
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}

.filtros__ordem select{
  appearance:none;
  background:var(--surface-2);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:8px 30px 8px 12px;
  font-family:var(--ff-body);
  font-size:.85rem;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23948d84' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
  background-size:14px;
}
.filtros__ordem select:hover,
.filtros__ordem select:focus-visible{ border-color:var(--gold); outline:none; }

.filtros__grupo{ display:flex; align-items:center; gap:10px; }
.filtros__chips{ display:flex; flex-wrap:wrap; gap:6px; }

.chip{
  background:var(--surface-2);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 14px;
  font-family:var(--ff-body);
  font-size:.8rem;
  line-height:1;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.chip:hover{ border-color:var(--gold); color:var(--gold-hi); }
.chip:active{ transform:scale(.95); }
.chip[aria-pressed="true"]{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--ink);
  font-weight:600;
}

.filtros__limpar{
  margin-left:auto;
  background:none;
  border:none;
  color:var(--muted);
  font-family:var(--ff-body);
  font-size:.8rem;
  text-decoration:underline;
  cursor:pointer;
  padding:4px;
}
.filtros__limpar:hover{ color:var(--gold-hi); }

/* celular: a barra vira blocos empilhados e os chips rolam de lado */
@media (max-width:760px){
  .filtros{ gap:12px; padding:12px; }
  .filtros__ordem,
  .filtros__grupo{ width:100%; align-items:flex-start; flex-direction:column; gap:6px; }
  .filtros__ordem select{ width:100%; }
  .filtros__chips{
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:4px;
    scrollbar-width:none;
  }
  .filtros__chips::-webkit-scrollbar{ display:none; }
  .chip{ flex:0 0 auto; }
  .filtros__limpar{ margin-left:0; }
}

/* ---------------------------------------------------------
   BARRA NO TOPO (faixa logo abaixo do banner, antes das peças)
   --------------------------------------------------------- */
.filtros-barra{
  border-bottom:1px solid var(--line);
  background:none; /* mesma cor do fundo do site */
}
.filtros-barra .filtros{
  margin-bottom:0;
  background:none;
  border:none;
  border-radius:0;
  padding:16px 0;
}
@media (max-width:760px){
  .filtros-barra .filtros{ padding:12px 0; }
}