/* Variáveis de cor e ícones */
:root {
    --cor-principal: #EA8800;
    --cor-secundaria: #964B14;
    --cor-tituloContato: #D97914;
    --cor-textoContato: #D97914;
    --cor-menu: #F28C28;
    --cor-tituloVitrine: #F28C28;
    --cor-barraSuperior: #F28C28;
    --cor-textoBarraSuperior: #FFFFFF;
    --cor-botaoRastreio: #FFFFFF;
    --cor-textoBotaoRastreio: #F28C28;
    --cor-botaoRastreioHover: #F28C28;
    --cor-textoBotaoRastreioHover: #FFFFFF;
    --cor-textoRastreioTitulo: #F28C28;
    --cor-nomeDepoimento: #000000;
    --cor-localDepoimento: #AAAAAA;
    --cor-textoDepoimento: #707070;
    --cor-tituloRodape: #F28C28;
    --cor-textoRodape: #F28C28;
    --cor-textoRodapeHover: #D97914;
    --cor-nomeProduto: #4c4b4b;
    --cor-textoFrete: #666666;
    --icone-menu1: url(https://cdn.awsli.com.br/2847/2847251/arquivos/acessorios-icone.png);
    --icone-menu2: url(https://cdn.awsli.com.br/2847/2847251/arquivos/icone-boca.png);
    --icone-menu3: url(https://cdn.awsli.com.br/2847/2847251/arquivos/icone-olhos.png);
    --icone-menu4: url(https://cdn.awsli.com.br/2847/2847251/arquivos/icone-rosto.png);
    --icone-menu5: url(https://cdn.awsli.com.br/2847/2847251/arquivos/skincare-icone.png);
    --icone-menu6: url(https://cdn.awsli.com.br/2847/2847251/arquivos/r-10.png);
    --icone-menu7: url(https://cdn.awsli.com.br/2258/2258260/arquivos/6-simples.png);
    --icone-menu8: url(https://cdn.awsli.com.br/2258/2258260/arquivos/6-simples.png);
}

/* ------------------------------------------- */
/* ESTILOS GLOBAIS (APLICAM-SE A DESKTOP E MOBILE, a menos que sobrepostos por @media) */
/* ------------------------------------------- */

/* Visibilidade do Contato */
.contato-ev {
    display: block !important;
}

/* Ocultar bloco "Sobre a Loja" */
.sobre-loja-rodape {
    display: none !important;
}

/* Ocultar bloco de Redes Sociais se não for usado */
.redes-sociais {
    display: none !important;
}

/* Rolagem suave */
html {
    scroll-behavior: smooth;
}

/* Estilo para o nome "Vitamina C" abaixo da logo (se estiver em um elemento separado) */
.nome-logo-vitaminac {
    display: block;
    text-align: center;
    margin-top: 5px;
    font-family: Poppins, sans-serif;
    font-size: 16px;
    color: var(--cor-tituloRodape);
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none !important;
}

/* Para remover o sublinhado ao passar o mouse em links dentro da logo */
.logo a {
    text-decoration: none !important;
}

/* Opcional: Se quiser um pequeno espaçamento inferior para o próprio bloco da logo */
.h1.logo {
    margin-bottom: 10px !important;
}

/* Espaçamento abaixo do banner principal "Vitamina C" */
.banner.tarja {
    margin-bottom: 15px !important;
    margin-top: 0px !important; /* Mantenha em 0 para colar no carrossel de categorias */
}

/* Ajuste para o espaçamento acima do título de "Lançamentos" */
.secao-titulo.lancamentos h2,
.listagem-item .titulo,
.listagem-item h2.titulo {
    margin-top: 20px !important;
    margin-bottom: 15px !important;
}


/* ------------------------------------------- */
/* ESTILOS PARA TÍTULOS E LINHAS NO RODAPÉ */
/* ------------------------------------------- */

/* Reseta paddings laterais das colunas do rodapé */
.rodape .span4,
.rodape .span5,
.rodape .span3 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.rodape .titulo {
    font-family: Poppins, sans-serif;
    color: var(--cor-tituloRodape);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 17.5px !important;
    padding-top: 20px !important;
    padding-bottom: 5px !important;
    margin-bottom: 15px !important;
    border-bottom: none !important;
    display: inline-block !important;
    position: relative !important;
    left: auto !important;
    transform: none !important;
    text-align: center !important;
}

.rodape .titulo::after {
    content: "";
    display: block !important;
    height: 1px !important;
    background-color: rgb(76, 75, 75) !important;
    width: 60px !important;
    margin: 0 auto !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* ------------------------------------------- */
/* MEDIA QUERIES (ESTILOS ESPECÍFICOS PARA MOBILE) */
/* ------------------------------------------- */

@media (max-width: 767px) { /* Para telas de celular */

    /* --- ESTILOS DO HEADER MOBILE --- */
    /* Oculta o elemento da logo no cabeçalho em dispositivos móveis */
    .logo {
        display: none !important;
    }

    /* Ajusta o padding da barra laranja superior do cabeçalho */
    .atalho-topo,
    .barra-topo,
    #cabecalho > div.institucional {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* ESTILO CRÍTICO PARA O DIV SPAN3 (onde está o botão de menu) */
    /* Este é o /html/body/div[3]/div[1]/div[2]/div/div[1] */
    body > div:nth-child(3) > div:nth-child(1) > div:nth-child(2) > div > div:nth-child(1),
    #cabecalho > div.conteiner > div > div.span3 {
        width: auto !important;
        flex-grow: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        line-height: 0 !important;
    }


    /* ESTILO CRÍTICO PARA OS CONTAINERS DO CABEÇALHO COM BASE NOS XPATHS */
    /* Este é o /html/body/div[3]/div[1]/div[2]/div */
    body > div:nth-child(3) > div:nth-child(1) > div:nth-child(2) > div {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
        line-height: 0 !important;
    }

    /* Este é o /html/body/div[3]/div[1]/div[2]/div/div[2] - O container da barra de busca em si */
    body > div:nth-child(3) > div:nth-child(1) > div:nth-child(2) > div > div:nth-child(2),
    #cabecalho .conteudo-topo.span9 .inferior.row-fluid {
        margin-top: 0 !important;
        padding-top: 10px !important; /* Ajuste este valor conforme necessário */
        padding-bottom: 10px !important; /* Ajuste este valor conforme necessário */
        margin-bottom: 0 !important;
        min-height: 0 !important;
        line-height: 0 !important;
    }

    /* Força paddings e margins zerados para o formulário de busca */
    .busca-mobile,
    .busca-mobile form {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        line-height: normal !important;
    }

    /* O botão de "3 listras" (atalho-menu) - Estilo do botão */
    .atalho-menu.visible-phone {
        background-color: #ffffff !important;
        border: 1px solid var(--cor-principal) !important;
        box-shadow: none !important;
        height: 40px !important;
        line-height: 40px !important;
        width: 50px !important;
        padding: 0 !important;
        margin-right: 10px !important; /* Espaçamento entre o botão e a barra de busca */
        border-radius: 4px !important;
    }

    /* Estilo dos 3 risquinhos/ */
    .atalho-menu.visible-phone.icon-th::before {
        color: var(--cor-principal) !important;
        font-size: 24px !important;
    }
    .atalho-menu.visible-phone .hamb-1 {
        background-color: var(--cor-principal) !important;
    }

    /* Campo de Busca Mobile */
    .busca-mobile input[type="text"] {
        height: 40px !important;
        line-height: 40px !important;
        padding: 0 10px !important;
    }
    .busca-mobile button[type="submit"] {
        height: 40px !important;
        width: 40px !important;
    }

    /* --- ESTILOS DO MENU LATERAL (quando aberto) --- */
    .cab-nav.fundo-principal {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 15px 20px !important;
    }

    /* Adiciona o texto "CATEGORIAS" antes do botão de fechar */
    .cab-nav.fundo-principal::before {
        content: "CATEGORIAS" !important;
        color: var(--cor-textoBarraSuperior) !important;
        font-family: Poppins, sans-serif !important;
        font-weight: 600 !important;
        font-size: 18px !important;
        text-transform: uppercase !important;
        order: 1;
        flex-grow: 1;
        text-align: left;
    }

    /* Posiciona e estiliza o botão de fechar ('X') */
    .close-nav-full {
        font-size: 24px !important;
        color: var(--cor-textoBarraSuperior) !important;
        order: 2;
        margin-left: 10px;
    }

    .cab-nav .close-nav .category {
        display: none !important;
    }

    /* ESTILOS CRÍTICOS PARA O CARROSSEL DE CATEGORIAS (#menuinsta e .row-categorias) */
    /* Este é o /html/body/div[3]/div[1]/div[2]/div/div[3]/div */
    body > div:nth-child(3) > div:nth-child(1) > div:nth-child(2) > div > div:nth-child(3) > div {
        height: auto !important; /* Permite que a altura se ajuste ao conteúdo */
        margin: 0 !important; /* Zera todas as margens */
        padding-top: 0 !important; /* Zera padding superior */
        padding-bottom: 0 !important; /* Zera padding inferior */
        line-height: 0 !important; /* Evita que o line-height crie espaço */
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #menuinsta,
    .row-categorias {
        width: 100% !important;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: auto !important;
        line-height: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Container visível do Slick */
    #menuinsta > div > div.slick-list.draggable {
        width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        height: auto !important;
    }

    /* Ajusta os itens individuais (os LIs) dentro do slick-track */
    #menuinsta .slick-track li.slick-slide {
        margin: 0 5px !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-direction: column;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: normal !important;
    }

    /* Estiliza o fundo do botão e dimensionamento (o círculo) */
    .box-categorias {
        background-color: var(--cor-principal) !important;
        color: var(--cor-textoBarraSuperior) !important;
        border-radius: 50% !important;
        width: 80px !important;
        height: 80px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    /* Efeito de hover (opcional, mas melhora a experiência) */
    .box-categorias:hover {
        opacity: 0.8 !important;
    }

    /* Estiliza o ícone do botão */
    .box-categorias i {
        color: var(--cor-textoBarraSuperior) !important;
        font-size: 36px !important;
        margin-bottom: 5px !important;
    }

    /* Estiliza o texto da categoria */
    .box-categorias a .titulo {
        color: var(--cor-textoBarraSuperior) !important;
        font-size: 14px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* --- ESTILOS DO RODAPÉ MOBILE --- */
    /* Ajusta padding das colunas para mobile */
    .rodape .span4,
    .rodape .span5,
    .rodape .span3 {
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-bottom: 20px !important;
    }

    /* Ajustes específicos para os títulos no mobile */
    .rodape .titulo {
        font-size: 16px !important;
        padding-top: 15px !important;
        margin-bottom: 10px !important;
    }

    /* Ajustes para links e texto geral do rodapé no mobile */
    .rodape a,
    .rodape p,
    .rodape li {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    .rodape ul li {
        margin-bottom: 8px !important;
    }

    /* Para as listas em colunas (ex: Categorias) no mobile */
    .rodape ul.split {
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
        gap: 15px !important;
        padding-bottom: 10px !important;
    }

    /* Alinhamento e tamanho dos ícones de contato no mobile */
    .rodape .contato-ev li {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .rodape .contato-ev li i {
        font-size: 18px !important;
    }

    /* Oculta o div.span12.visible-phone se você não o estiver usando ou se ele estiver causando duplicação */
    .rodape .span12.visible-phone {
        display: none !important;
    }
}