/*
================================================================
CÓDIGO COMPLETO E DEFINITIVO - ANDRADINA COMPRESSORES
Versão: Mobile Overhaul + Correção Desktop
================================================================
*/

/*
----------------------------------------------------------------
PARTE 1: CORREÇÕES GERAIS (DESKTOP)
- Remove o espaço acima do banner principal no computador.
----------------------------------------------------------------
*/
.menu.horizontal {
    border-bottom: none !important;
}
.secao-banners {
    margin-top: 0 !important;
}

/* Esconde coluna da esquerda e expande o conteúdo no desktop */
@media (min-width: 768px) {
    .coluna.esquerda {
        display: none !important;
    }
    .conteudo {
        width: 100% !important;
    }
}


/*
----------------------------------------------------------------
PARTE 2: NOVO VISUAL COMPLETO PARA CELULAR (MOBILE)
- Este bloco @media só afeta telas com até 767px de largura.
----------------------------------------------------------------
*/
@media (max-width: 767px) {

    /* 1. ESCONDE O MENU HORIZONTAL NO CELULAR */
    /* Deixa visível apenas o menu hambúrguer padrão */
    .menu.horizontal {
        display: none !important;
    }

    /* 2. FORÇA A LISTA DE PRODUTOS A TER 2 COLUNAS */
    /* Container principal da vitrine de produtos */
    .listagem-vitrine ul.listagem.row-fluid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        padding: 0 5px !important; /* Adiciona um pequeno respiro nas laterais */
    }

    /* Cada item de produto na vitrine */
    .listagem-vitrine ul.listagem.row-fluid li.span3 {
        width: 49% !important; /* Ocupa metade da tela, com um respiro */
        margin: 0 0 10px 0 !important; /* Remove margens laterais e adiciona espaço embaixo */
        float: none !important;
        display: flex !important;
        flex-direction: column;
    }

    /* 3. MELHORA O VISUAL DO CARD DE PRODUTO */
    /* Aplica o estilo do exemplo que você mandou */
    .listagem-vitrine li.box-produto {
        border: 1px solid #e9e9e9 !important; /* Borda cinza clara */
        border-radius: 5px !important;       /* Cantos arredondados */
        padding: 8px !important;             /* Espaçamento interno */
        box-shadow: none !important;         /* Remove qualquer sombra antiga */
        display: flex;
        flex-direction: column;
        justify-content: space-between;      /* Alinha o conteúdo */
        height: 100%;                        /* Garante altura consistente */
        text-align: center;                  /* Centraliza o texto */
    }

    /* Garante que a imagem se ajuste bem */
    .listagem-vitrine .imagem-produto {
        margin-bottom: auto; /* Empurra o nome e preço para baixo */
    }

    /* Ajusta o nome do produto */
    .listagem-vitrine .nome-produto {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin: 10px 0 !important;
        min-height: 52px; /* Altura mínima para alinhar produtos com nomes de 2 ou 3 linhas */
    }
}