@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


*{margin:0;padding:0;box-sizing:border-box;font-family: "Roboto", sans-serif;list-style:none;text-decoration: none;color:inherit;}
body{overflow-x: hidden;}
.container{max-width:1190px;margin:0 auto;}

:root{
    --cor-cinza:#616161;
    --cor-verde:#8cce86;
    --cor-cinzaClaro:#f3f3f3;
}

.desktop{display:block;}
.mobile{display:none;}

header{padding:20px;}
.cabecalho{display:flex;flex-wrap: wrap;justify-content:space-between;align-items:center;width:100%;}
.logo{width:180px;}
.cabecalho form{width:33.33%;position: relative;}
.cabecalho input{width:100%;padding:10px;border-radius:50px;border:1px solid var(--cor-cinza);}
.cabecalho button{position: absolute;right:0;padding:10px;border:none;background:none;font-size:20px;top:50%;transform: translateY(-50%);}
menu{display: flex;flex-wrap: wrap;justify-content:end;align-items: center;gap:10px;color:var(--cor-cinza);}
menu li{transition: all 0.5s ease-in-out;cursor: pointer;}
menu li:hover{color:var(--cor-verde);}

.categorias{width:100%;color:var(--cor-cinza);border-top:1px solid var(--cor-cinza);border-bottom:1px solid var(--cor-cinza);margin-bottom:5px;}
.categorias ul{display:flex;flex-wrap: wrap;justify-content:center;align-items:center;width:100%;gap:10px;}
.categorias a{max-width:25%;padding:10px;transition: all 0.5s ease-in-out;cursor: pointer;}
.categorias a:hover{color:var(--cor-verde);}
#btn-menu, #btn-fechaMenu{display: none;}

/* PRODUTOS */
.titulo_pagina{font-size:25px;color:var(--cor-cinza);font-weight:500;padding:20px;}
.itens{margin:50px auto;}
.item{display:flex;flex-wrap: wrap;justify-content:start;align-items:start;width:100%;}
.item li{width:25%;padding:3px;}
.item li div{padding:20px;background-color:var(--cor-cinzaClaro);position: relative;}
.item span{display: block;margin-bottom: 10px;font-size:12px;}
.item h2{font-size:14px;text-align:left;min-height:70px;}
.item img{width:auto;height:300px;object-fit: cover;margin:0 auto 20px;display: block;}
.vazio{width:100%;height:30vh;display: flex;justify-content: center;align-items: center;}
.item li:hover img{animation: imagem 1s alternate infinite;transition: all 2s ease-in-out;}
@keyframes imagem {
    from{transform:scale(1);}
    to{transform:scale(0.98);}
}

.paginacao{text-align:center;padding:20px 10px;width:100%;display:flex;justify-content: center;align-items: center;margin:20px auto;}
.paginacao a{width:100px;background-color:#808080;padding:10px 20px;color:#F6F6F9;transition: all 0.3s ease-in-out;border-radius:3px;transition: all 0.5s ease-in-out;cursor: pointer;}
.paginacao a:hover{background-color: #38C172;}
.paginacao p{padding:10px 20px;width:100%;}

.detalhes{padding:50px 10px;}
.box-detalhes{display: flex;flex-wrap:wrap;justify-content: space-between;align-items:start;}
.img-detalhes{text-align: center;width:30%;padding:10px;}
.img-detalhes img{width:100%;}
.texto-detalhes{text-align: left;width:70%;padding:20px;}
.texto-detalhes h1{margin:20px auto;}
.texto-detalhes span{display:block;width:100%;padding:5px 0;}
.descricao{padding:50px;margin:10px auto;}
.btn-comprar{padding:10px 30px;background-color: var(--cor-verde);border:none;margin:50px auto 0;}

footer{padding:20px;border-top:1px solid var(--cor-cinza);text-align: center;font-size:14px;}

@media screen and (max-width:720px){
.desktop{display:none;}
.mobile{display:block;}

.cabecalho form{width:100%;padding:10px 0;}
.cabecalho{display:block;text-align: center;border-bottom:1px solid var(--cor-cinza);}
menu{padding:10px 0;justify-content:center;width:100%;}
menu li{padding:10px;width:33.33%;}

.categorias{display:none;flex-direction: column;justify-content: center;align-items: center;position: fixed;top:0;left:0;width:100%;height:100vh;background-color: var(--cor-cinzaClaro);z-index:10;}
.categorias.active-menu{display:flex;}
.categorias ul{width:100%;height:100vh;flex-direction: column;justify-content: center;align-items: start;}
.categorias a{max-width:100%;font-size:20px;padding:20px;}
#btn-menu, #btn-fechaMenu{display:block;}
#btn-menu{position: absolute;top:20px;right:20px;}
#btn-fechaMenu{position: absolute;top:20px;right:20px;}

.item{flex-direction: column;}
.item li{width:100%;padding:5px 10px;}

.num-paginas{display:none;}

.box-detalhes{display:block;}
.img-detalhes{width:80%;display: block;margin:0 auto;}
.texto-detalhes{width:100%;padding:10px;}
.descricao{padding:10px 20px;}
}