/* ===================================
   CELULAR
=================================== */

@media (max-width: 768px){

    main{

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

        gap:15px;

        padding:0 15px;

    }

    .produto img{

        height:180px;

    }

    .produto h2{

        font-size:16px;

    }

    .descricao{

        font-size:13px;

    }

    .preco{

        font-size:22px;

    }

    .produto button{

        padding:12px;

        font-size:14px;

    }

    .hero{

        background:
            linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)),
            url("../imagens/banner-mobile.png");

        background-size:cover;

        background-position:center;

        min-height:420px;

    }

    .hero-overlay{

        max-width:100%;

        margin:0;

    }

    .hero h1{

        font-size:28px;

    }

    .hero p{

        font-size:15px;

        line-height:1.5;

    }

    .hero-buttons{

        display:flex;

        flex-direction:row;

        justify-content:center;

        gap:12px;

        flex-wrap:wrap;

    }

    .hero-button{

       width:100%;

        text-align:center;

    }

    #finalizar-compra{

    margin-top:14px !important;

    }

    /* ===================================
    HEADER
    =================================== */

    header{

        padding:15px;

        gap:20px;

    }

    .logo-main{

        font-size:26px;

        letter-spacing:4px;

    }

    .logo-sub{

        font-size:10px;

        letter-spacing:5px;

    }

    .menu{

        width:100%;

        display:grid;

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

        gap:10px;

        margin-top:10px;

    }

    .menu a{

        display:flex;

        justify-content:center;

        align-items:center;

        padding:12px;

        background:#171717;

        border:1px solid #2a2a2a;

        border-radius:10px;

        font-size:14px;

        font-weight:600;

        transition:.3s;

    }

    .menu a:hover{


        border-color:#C8A96A;

        color:#C8A96A;

    }

    .search-container{

        width:100%;
        padding:15px;
        display:flex;
        justify-content:center;

    }

    #search{

        width:100%;

        max-width:100px;

        padding:12px 18px;

        font-size:15px;

        border-radius:30px;

    }
        
    /* FOOTER */

    .footer-container{

        display:flex;

        flex-direction:column;

        text-align:center;

        gap:30px;

    }

    .footer-logo,
    .footer-links,
    .footer-info{

        width:100%;

    }

    #carrinho{

        margin:30px 15px;

        padding:20px;

    }

    .carrinho-botoes{
    
    display:flex;
    flex-direction:column;
    align-items:center;
    gap: 10px;

    }

    .carrinho-botoes button{

            width:90%;
            max-width:320px;
    }

}