/* =====================================================================
   NAVEGAÇÃO MOBILE (site público) — visível apenas em telas pequenas.
   Desktop não é afetado por nenhuma regra deste arquivo.
   ===================================================================== */

.mobile-topo,
.mobile-footer-nav,
.mobile-dropdown-overlay {
    display: none !important;
}

@media (max-width: 768px) {

    /* Esconde o header padrão (desktop) e usa a estrutura mobile no lugar */
    .header {
        display: none !important;
    }

    /* O css/style.css global fixa "html, body { height: 100% }". Em página
       CURTA isso não atrapalha, mas em página LONGA (categoria com muitos
       produtos) o body fica com a altura exata da tela e o conteúdo
       transborda pra fora dele - o "padding-bottom" abaixo (que reserva
       o espaço da barra fixa) ficava dentro dessa altura fixa, no lugar
       errado, e o final do footer ficava ATRÁS da barra. Com altura
       automática o body cresce junto com o conteúdo e o espaço da barra
       fica de fato no fim da página. O "min-height: 100vh" do body
       continua valendo, então em página curta o footer segue empurrado
       pro fim da tela como antes. */
    html,
    body {
        height: auto;
    }

    body {
        /* espaço para o rodapé fixo não cobrir o final do conteúdo -
           medido de verdade: a barra (.mobile-footer-nav) tem uns 54px
           de altura real com o conteúdo atual (ícone + texto +
           paddings). Usar 100px aqui deixava uns 46px de vão branco
           sobrando entre o fim do footer escuro e o começo da barra -
           65px cobre a barra real com uma folga pequena, sem sobrar
           vão visível. */
        padding-bottom: 65px;
    }

    /* ============ TOPO (rola normalmente com a página) ============ */
    .mobile-topo {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background-color: var(--cor-branco);
        padding: 10px 14px;
        border-bottom: 1px solid #eee;
    }

    .mobile-topo-logo {
        flex: 1;
        min-width: 0;
    }

    .mobile-topo-logo-img {
        max-height: 48px;
        object-fit: contain;
        display: block;
    }

    .mobile-topo-logo-nome {
        font-size: 18px;
        font-weight: bold;
        color: var(--cor-primaria);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-topo-status {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        font-weight: 600;
        color: var(--cor-texto);
        flex-shrink: 0;
    }

    .mobile-topo-status .status-loja-bolinha {
        width: 9px;
        height: 9px;
    }

    .mobile-topo-usuario {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
        line-height: 1.15;
        gap: 0;
        min-width: 0;
    }

    .mobile-topo-usuario-nome {
        font-size: 12px;
        font-weight: 600;
        color: var(--cor-texto);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .mobile-topo-usuario-tempo {
        font-size: 9px;
        font-weight: 400;
        color: #888;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        cursor: pointer;
    }

    /* ============ RODAPÉ FIXO ============ */
    .mobile-footer-nav {
        display: flex !important;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 900;
        background-color: var(--cor-branco);
        border-top: 1px solid #eee;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
        padding: 6px 4px;
    }

    .mobile-footer-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: none;
        border: none;
        text-decoration: none;
        color: var(--cor-texto);
        cursor: pointer;
        padding: 4px 2px;
        font-family: inherit;
    }

    .mobile-footer-icone {
        font-size: 20px;
        line-height: 1;
    }

    .mobile-footer-icone-carrinho-wrapper {
        position: relative;
        display: inline-flex;
    }

    .mobile-footer-carrinho-badge {
        position: absolute;
        top: -6px;
        right: -10px;
        background-color: var(--cor-primaria);
        color: #fff;
        font-size: 9px;
        font-weight: bold;
        min-width: 15px;
        height: 15px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 2px;
    }

    .mobile-footer-carrinho-valor {
        font-size: 10px;
        font-weight: bold;
        color: var(--cor-primaria);
    }

    .mobile-footer-label {
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
    }

    /* ============ DROPDOWNS (produtos / usuário) ============ */
    .mobile-dropdown-overlay {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1500;
        align-items: flex-end;
        justify-content: center;
    }

    .mobile-dropdown-overlay.show {
        display: flex !important;
    }

    .mobile-dropdown-box {
        background-color: var(--cor-branco);
        width: 100%;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        padding: 15px;
        margin-bottom: 70px;
        animation: mobileDropdownSubir 0.2s ease-out;
    }

    @keyframes mobileDropdownSubir {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .mobile-dropdown-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }

    .mobile-dropdown-header h3 {
        margin: 0;
        font-size: 16px;
        color: var(--cor-primaria);
    }

    .mobile-dropdown-fechar {
        background: none;
        border: none;
        font-size: 24px;
        color: #999;
        cursor: pointer;
        line-height: 1;
        padding: 0;
    }

    .mobile-dropdown-lista {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .mobile-dropdown-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 10px;
        border-radius: 8px;
        text-decoration: none;
        color: var(--cor-texto);
        font-size: 14px;
        font-weight: 500;
    }

    .mobile-dropdown-item:hover,
    .mobile-dropdown-item:active {
        background-color: #f5f5f5;
    }

    .mobile-dropdown-item-icone,
    .mobile-dropdown-item-icone-img {
        font-size: 20px;
        width: 26px;
        text-align: center;
        flex-shrink: 0;
    }

    .mobile-dropdown-item-icone-img {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

    .mobile-dropdown-item-nome {
        flex: 1;
        text-align: center;
    }
}