/* ===============================
   VARIÁVEIS DE CORES
   =============================== */
:root {
    --cor-bg-principal: #121813;
    --cor-bg-secundario: #1f2a22;
    --cor-titulo: #d8b56a;
    --cor-texto: #e8dcc0;
    --cor-hover: #9b7a3c;
    --cor-produto: #3b2f2f;
    --cor-preco: #2b1f12;
    --cor-parcela: #4a3a2a;
    --cor-botao: #9b7a3c;
    --cor-busca-border: #6b4f2a;
}

/* ===============================
   RESET LEVE
   =============================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ===============================
   BODY
   =============================== */
body {
    background-color: #f6f1e7;
    background-image: radial-gradient(circle at top, rgba(0,0,0,0.04), transparent 60%);
    color: var(--cor-produto);
    font-family: "Georgia", serif;
}

/* ===============================
   CABEÇALHO
   =============================== */
#header {
    background: linear-gradient(180deg, #2e3a2f, #1f2a22);
    padding: 24px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    position: relative;
}
#header::after {
    content: "";
    display: block;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--cor-titulo), transparent);
    margin-top: 18px;
}
#logo img {
    max-height: 140px !important;
    width: auto !important;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5));
}

/* ===============================
   BUSCA
   =============================== */
.busca {
    position: relative;
}
.busca input {
    height: 48px;
    border-radius: 20px;
    border: 4px solid var(--cor-busca-border);
    padding: 0 52px 0 28px;
    background-color: #fffdf8;
    font-size: 20px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}
.busca input:focus {
    outline: none;
    border-color: var(--cor-titulo);
    box-shadow: 0 0 0 3px rgba(155,122,60,0.3);
}
.busca button {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(+30%);
    height: 36px;
    width: 38px;
    background: radial-gradient(circle, var(--cor-titulo), var(--cor-busca-border));
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.busca button:hover {
    transform: translateY(+18%) scale(1.08);
    box-shadow: 0 6px 14px rgba(0,0,0,0.6);
}

/* ===============================
   PRODUTOS
   =============================== */
.listagem-item {
    background-color: #9e8b5a;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
}
.listagem-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, rgba(155,122,60,0.12), transparent 60%);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.listagem-item:hover::before {
    opacity: 1;
}
.listagem-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.18);
}
.listagem-item img {
    border-radius: 14px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}
.nome-produto {
    font-size: 18px;
    font-weight: bold;
    color: var(--cor-produto);
    text-align: center;
    margin-top: 12px;
    letter-spacing: 0.5px;
}
.preco-produto {
    color: var(--cor-preco);
    font-size: 20px;
    text-align: center;
    margin: 8px 0 14px;
    font-weight: bold;
}

/* ===============================
   BOTÃO COMPRAR
   =============================== */
.botao-comprar {
    display: block;
    text-align: center;
    background: linear-gradient(90deg, var(--cor-busca-border), var(--cor-titulo));
    border-radius: 30px;
    color: #fff;
    padding: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
    transition: all 0.35s ease;
}
.botao-comprar:hover {
    background: linear-gradient(90deg, var(--cor-titulo), var(--cor-busca-border));
    box-shadow: 0 10px 22px rgba(0,0,0,0.5);
    transform: scale(1.05);
}

/* ===============================
   TOPO DESKTOP – BEM-VINDO / LOGIN
   =============================== */
@media (min-width: 769px) {
    a.bem-vindo {
        color: var(--cor-texto) !important;
        font-weight: 500;
        text-decoration: none;
    }
    a.bem-vindo span.cor-principal {
        color: var(--cor-titulo) !important;
        font-weight: 600;
    }
    a.bem-vindo:hover,
    a.bem-vindo span.cor-principal:hover {
        color: #ffffff !important;
    }
    .acoes-conta > li > a {
        color: var(--cor-titulo) !important;
        font-weight: 600 !important;
        text-decoration: none;
    }
    .acoes-conta > li > a:hover {
        color: var(--cor-hover) !important;
    }
}

/* ===============================
   RODAPÉ COMPLETO
   =============================== */
#rodape, #rodape-secundario {
    background-color: var(--cor-bg-principal);
    color: var(--cor-texto);
    font-family: "Georgia", serif;
}

#rodape .titulo,
#rodape h3,
#rodape h4,
#rodape strong,
#rodape-secundario h3,
#rodape-secundario h4,
#rodape-secundario strong {
    color: var(--cor-titulo) !important;
    font-weight: 800 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

#rodape p,
#rodape span,
#rodape li a,
#rodape-secundario p,
#rodape-secundario span,
#rodape-secundario a {
    color: var(--cor-texto) !important;
    font-size: 14px;
    line-height: 1.6;
    text-decoration: none;
    transition: color 0.3s ease;
}

#rodape li a:hover,
#rodape-secundario a:hover {
    color: var(--cor-titulo) !important;
    text-shadow: 0 0 4px rgba(216,181,106,0.3);
}

#rodape ul li {
    margin-bottom: 6px;
}

/* PAGAMENTOS / SELOS */
#rodape .pagamento,
#rodape .selos {
    background-color: var(--cor-bg-principal);
    padding: 24px 0;
    margin-top: 0;
}

#rodape .pagamento > .titulo.cor-secundaria,
#rodape .selos > .titulo.cor-secundaria {
    color: var(--cor-titulo) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
}

#rodape .pagamento .bandeiras-pagamento li i,
#rodape .pagamento .gateways-rodape img,
#rodape .selos img {
    filter: brightness(1) contrast(1.1);
    opacity: 1;
    transition: transform 0.3s ease, filter 0.3s ease;
}

#rodape .pagamento .bandeiras-pagamento li i:hover,
#rodape .pagamento .gateways-rodape img:hover,
#rodape .selos img:hover {
    transform: scale(1.06);
    filter: brightness(1.2);
}

/* RODAPÉ FINAL / CRÉDITOS */
#rodape .conteiner p,
#rodape .conteiner span {
    text-align: center;
    font-size: 11px;
    color: #d6cbb8 !important;
}

/* MOBILE */
@media (max-width: 768px) {
    #rodape .conteiner,
    #rodape .row-fluid {
        text-align: center;
    }
    #rodape .pagamento,
    #rodape .selos {
        padding: 16px 0;
    }
}
.vazio-text {
    color: #9b7a3c !important; /* Coloque a cor que quiser */
    font-weight: 600; /* opcional, deixa mais visível */
}
/* ===============================
   RODAPÉ – TÍTULOS DESTACADOS
   =============================== */

/* Categorias, Conteúdo e Sobre a loja */
#rodape .links-rodape .titulo,
#rodape .sobre-loja-rodape .titulo {
    color: #ffbb00 !important;       /* Bege claro e visível */
    font-weight: 900 !important;      /* Mais grosso */
    text-transform: uppercase;        /* Letras maiúsculas */
    letter-spacing: 1.5px;           /* Espaçamento entre letras */
    font-size: 18px;                  /* Maior destaque */
    text-shadow: 0 0 4px rgba(216,181,106,0.6); /* Sombra leve dourada */
    margin-bottom: 14px;              /* Espaço antes do conteúdo */
}
/* ===============================
   BARRA INICIAL – FUNDO MARROM UNIFORME
   =============================== */
.barra-inicial,
.barra-inicial .conteiner,
.barra-inicial .row-fluid,
.barra-inicial .lista-redes,
.barra-inicial .canais-contato,
.barra-inicial .lista-redes ul,
.barra-inicial .canais-contato ul,
.barra-inicial .lista-redes ul li,
.barra-inicial .canais-contato ul li,
.barra-inicial .fundo-secundario {
    background-color: #3e2603 !important; /* fundo marrom uniforme */
    color: #f0e4c3 !important; /* texto claro */
}

/* Links "Fale Conosco" */
.barra-inicial a {
    color: #f0e4c3 !important;
    font-weight: 600 !important;
    text-decoration: none;
}

.barra-inicial a:hover {
    color: #d8b56a !important; /* hover dourado suave */
}

/* Ícones dentro da barra */
.barra-inicial i {
    color: #f0e4c3 !important;
}

/* Pequeno espaçamento interno */
.barra-inicial ul li {
    padding: 4px 0;
}

/* MOBILE */
@media (max-width: 768px) {
    .barra-inicial,
    .barra-inicial .conteiner,
    .barra-inicial .row-fluid {
        text-align: center;
    }
    .barra-inicial ul li {
        display: block;
        margin: 6px 0;
    }
}