/* =========================================================
   MOBILE REESTRUTURADO (≤ 960px)
   Header agora é uma linha só (logo+hambúrguer, busca, idioma,
   Entrar/Cadastrar, carrinho — tudo no .auth-corner) — a gaveta de
   menu fica escondida até abrir. A página também ganha uma barra de
   navegação inferior — main precisa de espaço em cima (a barra pode
   quebrar em 2 linhas em telas bem estreitas) e embaixo (não ficar
   atrás da tabbar).
========================================================= */

@media(max-width:960px){

    html{

        scroll-padding-top:130px;

    }

    main{

        padding:130px 6vw 100px;

    }

    /* =====================================================
       HERO — encolhe bastante: os produtos precisam aparecer
       quase imediatamente ao abrir a página no mobile.
    ===================================================== */

    .hero{

        min-height:auto;

        padding:22px;

        margin-top:0;

    }

    /* O card de avaliações some — mais uma tela cheia de rolagem
       antes dos produtos não combina com o objetivo aqui. */
    .hero-card{

        display:none;

    }

    .hero-copy h1{

        font-size:1.5rem;

    }

    .hero-copy p{

        display:none;

    }

    .badge-row{

        margin:10px 0 16px;

    }

    /* Só o badge principal — os outros dois viram ruído numa tela
       pequena, onde o espaço vertical é o recurso mais escasso. */
    .badge-row .badge:nth-child(n+2){

        display:none;

    }

    .btn-row{

        margin-top:4px;

    }

    .btn-row .btn:nth-child(n+2){

        display:none;

    }

}


/* =========================================================
   TABLET (≤ 900px)
========================================================= */

@media(max-width:900px){

    html{

        scroll-padding-top:125px;

    }

    main{

        padding:125px 6vw 100px;

    }

    .hero{

        grid-template-columns:1fr;

        min-height:auto;

        gap:32px;

    }

    .hero-card{

        order:1;

    }

    .categories-grid{

        grid-template-columns:1fr 1fr;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

}


/* =========================================================
   MOBILE (≤ 600px)
========================================================= */

@media(max-width:600px){

    main{

        padding:120px 5vw 90px;

    }

    .panel{

        padding:22px;

    }

    .categories-grid{

        grid-template-columns:1fr;

    }

    .btn-row{

        flex-direction:column;

        align-items:stretch;

    }

    .footer-panel{

        padding:24px;
    }

    .footer-bottom{

        flex-direction:column;

        align-items:flex-start;
    }

}