.produtos-bg {padding: 85px 0 95px;}
.produtos-bg .lista-produtos {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;}
.produtos-bg .produtos {display: flex; gap: 50px 40px;}

.lista-produtos .produto-img {aspect-ratio: 260 / 280; height: auto; border: 2px solid #5D959E; width: 260px; position: relative; box-sizing: border-box; padding: 20px; display: flex; align-items: center; justify-content: center;}
.lista-produtos .produto-img img {width: 90%; overflow: hidden; height: 90%; object-fit: contain; object-position: center;  transition: opacity .3s ease-in-out;}
.lista-produtos .produto-img img:nth-child(2) {position: absolute; inset: 20px; left: 30px; top: 30px; pointer-events: none;width: calc(90% - 35px); height: calc(90% - 35px); object-fit: contain; object-position: center; opacity: 0; transition: opacity .3s ease-in-out;}
.lista-produtos .produto-item:hover .produto-img img:nth-child(2) {opacity: 1;}
.lista-produtos .produto-item:hover .produto-img img:nth-child(1) {opacity: 0;}
.lista-produtos .produto-item {height: max-content;}
.lista-produtos .produto-link {display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px;}
.lista-produtos .produto-nome {font: 600 15.18px / 31.17px montserrat; text-transform: uppercase; color: var(--cor3); text-align: center; line-clamp: 2; -webkit-line-clamp: 2; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; max-height: 62px; width: 100%; height: 62px;}
.lista-produtos .ver-mais {display: flex; cursor: pointer; align-items: center; justify-content: center; height: 30px; border-radius: 14px; border: none; outline: none; background: var(--cor2); font: 600 11.29px montserrat; color: var(--branco); padding: 0 40px;}


.produtos .filter {flex: 1 1 auto; min-width: 200px; max-width: 250px; max-height: max-content; box-shadow: 1px 1px 73px 0px rgba(140,140,140,0.16);}
.filter-content .input-parent {cursor: pointer; transition: var(--transition2); font: 400 15.03px / 26.75px montserrat;}
.input-parent:has(input[type="checkbox"]:checked){color: var(--cor2);}
.filter .filter-title {text-align: center; background: var(--cor2); padding: 15px 30px; border-radius: 25px 25px 0 0; color: var(--branco); font: 700 26.26px oblivion;}
.filter .filter-option-parent > p {color: var(--cor3); font: 600 14.97px montserrat; cursor: pointer; text-transform: uppercase;}
.filter-content .input-parent label {cursor: pointer;}

.filter .filter-option-parent:has(.input-parent input[type="checkbox"]:checked) > p {color: var(--cor1);}  
.filter .filter-option-parent {border-bottom: 2px solid #FFB996; padding: 20px 30px;}
.filter #btn-submit {width: 100%; border: none; outline: none; background: var(--cor1); text-align: center; font: 19.61px oblivion; color: var(--branco); display: flex; align-items: center; justify-content: center; padding: 15px; border-radius: 0 0 25px 25px;}
.filter .last-filter-option-parent {border-bottom: none;}

.filter-mobile {display: none;}

.filter .close {width: var(--close); font: 400 20px montserrat; color: var(--branco); height: auto; aspect-ratio: 1/1; background: red; position: fixed; right: -200%;top: 0; transition: var(--transition2); display: flex; align-items: center; justify-content: center;}
@media(max-width: 1250px){
    .filter.ativo .close {right: 0;}
    .produtos-bg {padding: 50px 0;}
    .produtos-bg .produtos {flex-direction: column;}
    .produtos .filter {left:-200%;top: 0; transition: var(--transition2); position: fixed; z-index: 9999; height: 100%; width: calc(100% - var(--close)); max-width: none;}
    .produtos .filter.ativo {left: 0;}
    .produtos .filter-mobile {display: block; background: var(--cor1); text-align: center; color: var(--branco); font: 18px montserrat; height: 70px; display: flex; align-items: center; justify-content: center;}
    .produtos .filter .filter-content {background: var(--branco); height: 100%;}
    .produtos .filter .filter-title {display: none;}
    .filter .filter-option-parent {padding: 0;}
    .filter .filter-js {display: flex; flex-direction: column; height: 100%; position: relative;}
    .filter .filter-js #btn-submit {justify-self: flex-end; align-self: flex-end; position: absolute; bottom: -3%; left: 50%; border-radius: 0; transform: translate(-50%, -50%);} 
    .filter .filter-option-parent {border: none;}
    .filter .filter-option-parent > p {background: var(--cor1); color: var(--branco); padding: 20px; text-align: center; font-size: 18px;}
    .filter .filter-option-parent .input-parent {padding: 10px 20px;}
    .filter .filter-option-parent .input-parent label {width: 100%; height: 100%; display: block;}
    .filter .filter-option-parent:has(.input-parent input[type="checkbox"]:checked) > p {color: var(--branco);}

    .produtos-bg .lista-produtos {grid-template-columns: repeat(2, 1fr);}
}


@media(max-width: 650px) {
    .produtos-bg .lista-produtos {grid-template-columns: 1fr;}
}