/* ==========================
      PRODUTOS
========================== */


.produtos{

    padding:50px 0 90px;

}


/* TÍTULO */

.titulo-produtos{

    text-align:center;

    margin-bottom:40px;

}


.titulo-produtos h1{

    color:#6b3f1d;

    font-size:34px;

    margin-bottom:10px;

}


.titulo-produtos p{

    color:#777;

    font-size:16px;

}



/* GRID */

.grid-produtos{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

    width:100%;

}



/* ==========================
        CARD PRODUTO
========================== */


.produto-card{

    background:#fff4e8;

    border-radius:25px;

    padding:20px;

    overflow:hidden;

    box-shadow:
    0 10px 30px rgba(107,63,29,.12);

    transition:.35s ease;

    border:

    1px solid rgba(214,141,82,.25);

    display:flex;

    flex-direction:column;

    height:100%;

}



.produto-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 18px 45px rgba(107,63,29,.25);

}



/* ==========================
        IMAGEM
========================== */


.produto-imagem{

    width:100%;

    height:230px;

    display:flex;

    align-items:center;

    justify-content:center;

}



.produto-imagem img{

    width:100%;

    height:220px;

    object-fit:contain;

    transition:.4s ease;

}



.produto-card:hover .produto-imagem img{

    transform:scale(1.10);

}



/* ==========================
        INFORMAÇÕES
========================== */


.produto-info{

    text-align:center;

    padding-top:15px;

    display:flex;

    flex-direction:column;

    flex:1;

}



.produto-info h3{

    color:#6b3f1d;

    font-size:22px;

    margin-bottom:10px;

}



.produto-info p{

    color:#777;

    font-size:14px;

    line-height:1.5;

    height:45px;

    overflow:hidden;

}



/* PREÇO */

.preco{

    display:block;

    margin:15px 0;

    font-size:24px;

    font-weight:700;

    color:#28a745;

}



/* ==========================
        BOTÃO
========================== */


.btn-add{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:100%;

    height:45px;

    border-radius:14px;

    background:#d68d52;

    color:white;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

    margin-top:auto;

}



.btn-add:hover{

    background:#be7235;

    transform:scale(1.03);

}



.btn-add i{

    font-size:18px;

}



/* ==========================
        CATEGORIA
========================== */


.categoria-produtos{

    padding:70px 0;

}


.categoria-produtos h2{

    color:#6b3f1d;

    font-size:34px;

    margin-bottom:35px;

    padding-bottom:15px;

    border-bottom:2px solid #f2e2d2;

}



/* ==========================
        MOBILE
========================== */


@media(max-width:768px){


.produtos{

    padding:30px 15px 60px;

}



.grid-produtos{

    grid-template-columns:repeat(2,1fr);

    gap:12px;

}



.produto-card{

    padding:12px;

    border-radius:18px;

}



.produto-imagem{

    height:130px;

}



.produto-imagem img{

    height:120px;

}



.produto-info h3{

    font-size:15px;

}



.produto-info p{

    font-size:12px;

    height:34px;

}



.preco{

    font-size:17px;

    margin:8px 0;

}



.btn-add{

    height:38px;

    font-size:12px;

    border-radius:10px;

}



.btn-add i{

    font-size:14px;

}



}


/* ==========================
        TELAS GRANDES
========================== */


@media(min-width:1400px){


.grid-produtos{

    grid-template-columns:repeat(4,1fr);

}


}