/* Filtro fixo na tela */
#filtroEsq {
  position: sticky;       /* fica grudado ao rolar */
  top: 16px;   
  height: max-content;
  z-index: 1000;
  transform: none;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e7e2e2;
  box-shadow: 0 10px 28px rgba(0,0,0,.2);
  padding: 16px;
  width:500px;
  align-items: center;
  position:absolute;
  top:500px;
}

/* Conteúdo ocupa o resto */
 
/* MUITO IMPORTANTE: nada de overflow/transform no(s) pai(s) do filtro */
main,.wrapper,.content{
  overflow:visible !important;
  transform:none !important;
  filter:none !important;
  perspective:none !important;
}
 

#filtroEsq .filtroEsq__inner{ padding: 14px; display: grid; gap: 10px; }
#filtroEsq h2{ margin:0; font-family:'principal'; font-size: 18pt; }
#filtroEsq .filtroEsq__form{ display:grid; gap:8px; }
#filtroEsq .filtroEsq__opt{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; background:#f7f7f7; border:1px solid #eee; border-radius:10px;
  font-family:'secundaria';
}
#filtroEsq .filtroEsq__hr{ border:none; border-top:1px solid #eee; margin:8px 0; }
#filtroEsq .filtroEsq__acoes{ display:flex; gap:8px; align-items:center; }
#filtroEsq .filtroEsq__btn{
  padding:8px 12px; border-radius:10px; background:#8d4654; color:#fff; border:none; font-weight:700; cursor:pointer;
}
#filtroEsq .filtroEsq__link{
  background:none; border:none; color:#8d4654; text-decoration:underline; cursor:pointer; font:inherit;
}
#filtroEsq .filtroEsq__legend{ font-family:'secundaria'; color:#6b6b6b; }

/* Responsivo: vira bottom-sheet simples */

  @media (max-width: 900px){
  /* Filtro: centralizado e acima */
  #filtroEsq{
    position: static;
    width: 90%;
    max-width: 360px;
    margin: 0 auto 20px auto;  /* espaço abaixo p/ os cards */
    padding: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 12px;
  }

  /* Produtos: centralizados e logo abaixo do filtro */
  #produtos-container{
    position: static !important;
    left: auto !important;
    right: auto !important;
    float: none !important;

    width: 90%;
    max-width: 900px;
    margin: 0 auto 40px auto; /* centraliza e dá respiro até o rodapé */
  }

  /* A grade passa a 1 coluna e centraliza cada card */
  .grid{
    grid-template-columns: 1fr;
    justify-items: center;
  }
}