/* =====================================================================
   Fábrica de Velas São José — ajustes para celular e tablet
   Carregado DEPOIS de style.css e auth.css, então essas regras vencem.
   ===================================================================== */

/* trava qualquer vazamento horizontal que empurre elementos fixos
   (como o botão de chat) pra fora da área visível da tela */
html, body{
    max-width: 100vw;
    overflow-x: hidden;
}

/* ---------- menu hambúrguer (escondido no desktop) ---------- */
.menu-hamburguer{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:40px;height:40px;
    background:none;border:none;cursor:pointer;
    padding:0;
}
.menu-hamburguer span{
    display:block;width:24px;height:2.5px;background:var(--marrom);border-radius:2px;
    transition:transform .25s ease, opacity .25s ease;
}
.menu-hamburguer.aberto span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.menu-hamburguer.aberto span:nth-child(2){opacity:0;}
.menu-hamburguer.aberto span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

@media (max-width: 860px){
    .header-wrap{flex-wrap:nowrap;}
    .menu-hamburguer{display:flex;}

    .menu{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:4px;
        position:fixed;
        top:0;right:-100%;
        width:78%;
        max-width:320px;
        height:100vh;
        background:#fff;
        padding:90px 28px 28px;
        box-shadow:-10px 0 40px rgba(58,42,30,.18);
        transition:right .3s ease;
        z-index:150;
        overflow-y:auto;
    }
    .menu.aberto{right:0;}

    .menu a{
        width:100%;
        padding:14px 0;
        border-bottom:1px solid rgba(58,42,30,.08);
        font-size:16px;
    }
    .menu a.link-conta{
        margin-top:10px;text-align:center;border-bottom:none;
    }

    /* fundo escurecido atrás do menu aberto */
    .menu.aberto::before{
        content:'';position:fixed;inset:0;
        background:rgba(58,42,30,.35);
        z-index:-1;
        width:100vw;height:100vh;
        left:-100vw;
    }
}

/* ---------- ajustes gerais de espaçamento ---------- */
@media (max-width: 640px){
    .secao{padding:40px 0;}
    .hero-novo{padding:36px 0 24px;}
    .site-footer{margin-top:44px;padding:34px 0;}

    h1{font-size:1.7rem !important;}
    h2{font-size:1.35rem !important;}

    .secao-topo{flex-direction:column;align-items:flex-start;}
}

/* ---------- grids que precisam virar 1 coluna antes ---------- */
@media (max-width: 560px){
    .grid-categorias, .categorias-novas,
    .grid-produtos, .produtos-home{
        grid-template-columns: 1fr !important;
    }

    .diferenciais-grid{grid-template-columns: 1fr 1fr !important;}

    .loja-chamada{
        flex-direction:column;text-align:center;padding:30px 22px;
    }
}

/* ---------- carrinho / checkout ---------- */
@media (max-width: 820px){
    .checkout-grid{grid-template-columns: 1fr !important;}
}
@media (max-width: 480px){
    .item-carrinho{flex-direction:column;align-items:flex-start;gap:10px;}
    .linha-dupla{flex-direction:column;}
    .linha-frete{flex-direction:column;}
    .linha-frete button{width:100%;}
    .box-checkout{padding:22px 18px;}
}

/* ---------- produto individual ---------- */
@media (max-width: 820px){
    .produto-detalhe{grid-template-columns: 1fr !important;}
}

/* ---------- detalhe do pedido / minha conta ---------- */
@media (max-width: 820px){
    .detalhe-grid{grid-template-columns: 1fr !important;}
}
@media (max-width: 480px){
    .conta-topo{flex-direction:column;align-items:flex-start;}
    .card-pedido-topo{flex-direction:column;align-items:flex-start;gap:8px;}
}

/* ---------- rodapé ---------- */
@media (max-width: 620px){
    .rodape-grid{grid-template-columns: 1fr 1fr !important;gap:24px !important;}
    .rodape-base{flex-direction:column;text-align:center;gap:6px;}
}

/* ---------- painel admin ---------- */
@media (max-width: 700px){
    .painel-wrap, .login-box{
        margin:16px !important;
        padding:20px !important;
        border-radius:18px !important;
    }
    .cards-admin{grid-template-columns: 1fr 1fr !important;gap:10px !important;}
    .acoes-admin{flex-direction:column;}
    .acoes-admin a{width:100%;text-align:center;box-sizing:border-box;}
    .tabela-admin th, .tabela-admin td{padding:10px !important;font-size:12.5px !important;}
    .filtro-pedidos{flex-direction:column;align-items:stretch;}
    .filtro-pedidos select, .filtro-pedidos button, .btn-limpar-filtro{width:100%;box-sizing:border-box;}
}
@media (max-width: 420px){
    .cards-admin{grid-template-columns: 1fr !important;}
}

/* ---------- widget de chat ---------- */
@media (max-width: 480px){
    .chat-painel{
        right:12px;left:12px;width:auto;bottom:84px;
        max-height:75vh;
    }
    .chat-fab{right:16px;bottom:16px;width:52px;height:52px;}
    .carrinho-fab{right:16px;bottom:78px;width:46px;height:46px;}
    .chat-sugestoes{overflow-x:auto;flex-wrap:nowrap;}
    .chat-sugestoes button{flex-shrink:0;}
}

/* ---------- filtros do catálogo ---------- */
@media (max-width: 560px){
    .filtros-catalogo{flex-direction:column;align-items:stretch;}
    .filtros-catalogo input, .filtros-catalogo select, .filtros-catalogo button{width:100%;}
}

/* ---------- form de compra do produto ---------- */
@media (max-width: 480px){
    .form-compra{flex-direction:column;align-items:stretch;}
    .form-compra input[type=number]{width:100%;}
}