.filtro-js {box-shadow: 0 0 10px 0 rgba(0,0,0, 0.1); box-sizing: border-box; padding: 0 8% 20px; display: flex; flex-direction: column; gap: 30px; height: max-content;}

.filtro-js .titulo {font: 700 30.76px var(--font1); color: var(--cor1); text-align: center; padding: 20px 5px; box-shadow: 0 30px 20px -25px rgba(0,0,0, 0.04); position: relative;}
.filtro-js .btn-filtro {background: var(--cor1); color: var(--branco); font: 500 15.05px var(--font1); border: none;outline: none; width: 100%; height: 45px;}
.filtro-js .filtro-grupo .filtro-titulo {font: 700 27px var(--font1); color: var(--cor2); position: relative; cursor: pointer;}
.filtro-js .filtro-grupo .filtro-titulo::after,
.filtro-js .filtro-grupo .filtro-titulo::before {content: ''; position: absolute; right: 0; top: 50%; transform: translate(-50%, -50%); width: 10px; height: 3px; cursor: pointer; background: var(--cor2); transition: all 0.3s ease;}
.filtro-js .filtro-grupo .filtro-titulo.aberto::after { transform: translate(-50%, -50%) rotate(90deg);}
.filtro-js .filtro-grupo {display: flex; flex-direction: column; gap: 10px;box-shadow: 0 30px 20px -25px rgba(0,0,0, 0.04); padding: 0 0 40px;}
.filtro-js .filtro-opcao-parent {display: flex; flex-direction: column; gap: 5px;}
.filtro-js .filtro-item {display: flex; flex-direction: column;}
.filtro-js .filtro-opcao {display: flex; align-items: center; gap: 10px; color: var(--cor2); font: 400 18px var(--font1); cursor: pointer; position: relative; padding: 0 0 0 10px;}
.filtro-js .filtro-opcao::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; background: var(--cor1); border-radius: 50%;}
.filtro-js .filtro-opcao input {display: none;}
.filtro-js .filtro-opcao:has(input:checked) {color: var(--cor1); font-weight: 700;}

.filtro-js .modelos-toggle {margin-left: 20px; margin-top: 5px; display: none;}
.filtro-js .filtro-item:has(input[name="marcas[]"]):has(input:checked) .modelos-toggle,
.filtro-js .filtro-item:has(input[name="marcas[]"]):has(input:checked) .modelos-lista {display: block;}

.filtro-js .modelos-titulo {font: 600 16px var(--font1); color: var(--cor3); position: relative; cursor: pointer; padding: 5px 0;}
.filtro-js .modelos-titulo::after,
.filtro-js .modelos-titulo::before {content: ''; position: absolute; right: 0; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 2px; cursor: pointer; background: var(--cor3); transition: all 0.3s ease;}
.filtro-js .modelos-titulo.aberto::after {transform: translate(-50%, -50%) rotate(90deg);}
.filtro-js .modelos-lista {display: none; padding: 5px 0;}
.filtro-js .modelo-opcao {font-size: 16px; color: var(--cor3); padding: 0 0 0 15px;}
.filtro-js .modelo-opcao::before {width: 4px; height: 4px;}

.filtro-mobile {display: none;}
.filtro-mobile .titulo {font: 700 25px var(--font1); color: var(--branco); background: var(--cor1); display: flex; align-items: center; justify-content: center; padding: 10px 0;}

.filtro-js .close-btn {display: none; background: var(--cor1); font:700 16px montserrat; color: var(--branco); outline: none; border: none; align-items: center; justify-content: center; width: var(--close); height: auto; aspect-ratio: 1/1; position: absolute; right: 0; top: 0;}
@media(max-width: 990px){
    .filtro-mobile {display: block;}
    .filtro-js .close-btn {display: flex;}
    .filtro-parent {position: fixed; top: 0; left: -200%; width: 100%; height: 100%; background: #00000050; z-index: 9999; transition: var(--transition2);}
    .filtro-js { background: var(--branco); z-index: 9999; background: var(--branco);height: 100%; width: calc(100% - var(--close)); transition: var(--transition2); padding: 0 8% 20px;}
    .filtro-parent:has(.filtro-js.aberto) {left: 0;}
    .filtro-js .titulo,
    .filtro-js .filtro-grupo {box-shadow: 0 30px 20px -25px rgba(0,0,0, 0.04);}
    
    .filtro-js .modelos-lista {padding: 10px 0;}
    .filtro-js .modelo-opcao {font-size: 18px; padding: 5px 0 5px 20px;}
}