/* ============================================================
   FONTES — carregadas via embed (Loja Integrada não suporta @import)
   ============================================================ */
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/cinzel/v23/8vIU7ww63mVu7gtR-kwKxNvkNOjw-tbnTYrvDE5ZdqU.woff2') format('woff2');
}
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 700;
    src: url('https://fonts.gstatic.com/s/cinzel/v23/8vIU7ww63mVu7gtR-kwKxNvkNOjw-n_nTYrvDE5ZdqU.woff2') format('woff2');
}
@font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/ebgaramond/v27/SlGDmQSNjdsmc35JDF1K5E55YMjF_7DPuGi-6_RkC49_S6Y.woff2') format('woff2');
}
@font-face {
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/ebgaramond/v27/SlGFmQSNjdsmc35JDF1K5GRwSDw_ZgPG-lDURGQ.woff2') format('woff2');
}

/* ============================================================
   VERITAS CAELI — CSS COMPLETO
   Identidade: Arte Sacra Barroca Católica
   "A beleza do céu na terra"
   ============================================================ */



/* ============================================================
   VARIÁVEIS — PALETA SAGRADA
   ============================================================ */


/* ============================================================
   RESET E BASE
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box !important;
}

body {
    background-color: #faf6ee !important;
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(201,168,76,0.07) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(201,168,76,0.05) 0%, transparent 60%) !important;
    font-family: 'EB Garamond', Georgia, serif !important;
    color: #3b2b1f !important;
    font-size: 17px !important;
    line-height: 1.75 !important;
}

/* ============================================================
   CONTAINERS
   ============================================================ */
.conteiner-principal,
.container,
.centralize,
#corpo,
#corpo .conteiner {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
}

/* ============================================================
   BARRA SUPERIOR (topo com redes sociais / contato)
   ============================================================ */
.barra-inicial {
    background: #3b2b1f !important;
    border: none !important;
    height: auto !important;
    padding: 7px 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.barra-inicial a,
.barra-inicial span,
.barra-inicial li,
.barra-inicial p {
    color: #e8d5a3 !important;
    font-family: 'Cinzel', Georgia, serif !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    text-decoration: none !important;
}

.barra-inicial a:hover {
    color: #c9a84c !important;
}

/* ============================================================
   CABEÇALHO
   ============================================================ */
#cabecalho {
    background: #fffdf8 !important;
    padding: 0 !important;
    border-bottom: none !important;
    box-shadow: none !important;
    position: relative !important;
}

/* Ornamento dourado topo do cabeçalho */
#cabecalho::before {
    content: '' !important;
    display: block !important;
    width: 100% !important;
    height: 3px !important;
    background: linear-gradient(90deg,
        transparent 0%,
        #8b6914 15%,
        #c9a84c 40%,
        #e8d5a3 50%,
        #c9a84c 60%,
        #8b6914 85%,
        transparent 100%) !important;
}

/* ============================================================
   CABEÇALHO — GRID COM SELETORES REAIS DA LOJA INTEGRADA
   Estrutura HTML real:
   .conteiner > .row-fluid >
     .span3 (logo)
     .conteudo-topo.span9 >
       .superior.row-fluid.hidden-phone (meus pedidos)
       .inferior.row-fluid >
         .span8.busca-mobile (busca)
         .span4.hidden-phone (carrinho)
   ============================================================ */

/* Container principal do cabeçalho */
#cabecalho .conteiner {
    background: #fffdf8 !important;
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Row principal: span3 (logo) + span9 (conteudo-topo) */
#cabecalho .row-fluid {
    background: #fffdf8 !important;
    box-shadow: none !important;
    border: none !important;
    display: flex !important;
    align-items: stretch !important;
    padding: 10px 40px 0 !important;
    gap: 40px !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
}

/* ---- LOGO — span3 ---- */
#cabecalho .span3 {
    float: none !important;
    flex: 0 0 240px !important;
    width: 240px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.logo {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.logo img {
    width: 280px !important;
    max-width: 280px !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
}

/* ---- CONTEÚDO DO TOPO — span9 ---- */
#cabecalho .conteudo-topo {
    float: none !important;
    flex: 1 1 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* Linha superior: Meus Pedidos / Minha Conta */
#cabecalho .superior.row-fluid {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    gap: 20px !important;
    flex: 0 0 auto !important;
}

#cabecalho .superior.row-fluid a,
#cabecalho .superior.row-fluid span,
.bem-vindo a,
.bem-vindo span {
    font-family: 'Cinzel', Georgia, serif !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    color: #5c3d1f !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: color 0.3s !important;
    float: none !important;
}

#cabecalho .superior.row-fluid a:hover,
.bem-vindo a:hover {
    color: #8b6914 !important;
}

/* Linha inferior: busca + carrinho */
#cabecalho .inferior.row-fluid {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* ---- BUSCA — span8.busca-mobile ---- */
#cabecalho .span8,
#cabecalho .busca-mobile,
.busca {
    float: none !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.busca form,
.busca fieldset,
#form-buscar {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
}

.busca input,
#form-buscar input,
input.search-query,
input.ui-autocomplete-input {
    flex: 1 !important;
    width: auto !important;
    max-width: none !important;
    height: 42px !important;
    background: #faf6ee !important;
    border: 1px solid #d4b896 !important;
    border-right: none !important;
    color: #3b2b1f !important;
    font-size: 14px !important;
    font-family: 'EB Garamond', Georgia, serif !important;
    padding: 0 16px !important;
    letter-spacing: 0.5px !important;
    outline: none !important;
    transition: border-color 0.3s, background 0.3s !important;
    border-radius: 0 !important;
}

.busca input:focus,
#form-buscar input:focus,
input.search-query:focus {
    background: #fffdf8 !important;
    border-color: #c9a84c !important;
}

.busca input::placeholder,
#form-buscar input::placeholder {
    color: #8b6347 !important;
    font-style: italic !important;
}

#form-buscar .botao-busca,
.busca .botao-busca,
#form-buscar button,
.busca button {
    width: 46px !important;
    height: 42px !important;
    background: #8b6914 !important;
    color: #faf6ee !important;
    border: 1px solid #8b6914 !important;
    border-left: none !important;
    cursor: pointer !important;
    transition: background 0.3s !important;
    flex-shrink: 0 !important;
    font-size: 16px !important;
    border-radius: 0 !important;
}

#form-buscar .botao-busca:hover,
.busca .botao-busca:hover,
#form-buscar button:hover,
.busca button:hover {
    background: #c9a84c !important;
    border-color: #c9a84c !important;
}

/* ---- CARRINHO — span4.hidden-phone ---- */
#cabecalho .span4,
.carrinho {
    float: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.carrinho a {
    background: #faf6ee !important;
    border: 1px solid #d4b896 !important;
    color: #5c3d1f !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 20px !important;
    font-family: 'Cinzel', Georgia, serif !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
    height: 42px !important;
    box-sizing: border-box !important;
}

.carrinho a:hover {
    background: #8b6914 !important;
    border-color: #8b6914 !important;
    color: #faf6ee !important;
}

/* Esconde bem-vindo duplicado */
.bem-vindo {
    display: none !important;
}

/* ---- MENU PRINCIPAL ---- */
.menu.superior {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    clear: both !important;
    width: 100% !important;
    background: transparent !important;
    margin-top: 24px !important;
    padding: 16px 0 !important;
    border-top: 1px solid #d4b896 !important;
    border-bottom: none !important;
    text-align: center !important;
    box-shadow: none !important;
    position: relative !important;
}

/* Linha ornamental dupla abaixo do menu */
.menu.superior::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: -8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 85% !important;
    height: 3px !important;
    background: linear-gradient(90deg,
        transparent 0%,
        #8b6914 10%,
        #c9a84c 35%,
        #e8d5a3 50%,
        #c9a84c 65%,
        #8b6914 90%,
        transparent 100%) !important;
}

.menu.superior .nivel-um {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.menu.superior .nivel-um > li {
    display: inline-block !important;
    float: none !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    position: relative !important;
}

/* Separador ornamental entre itens */
.menu.superior .nivel-um > li + li::before {
    content: '✦' !important;
    color: #c9a84c !important;
    font-size: 8px !important;
    vertical-align: middle !important;
    padding: 0 20px !important;
    opacity: 0.7 !important;
}

.menu.superior .nivel-um > li > a {
    font-family: 'Cinzel', Georgia, serif !important;
    font-size: 12px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: #3b2b1f !important;
    background: transparent !important;
    padding: 6px 0 !important;
    text-decoration: none !important;
    display: inline-block !important;
    position: relative !important;
    transition: color 0.3s !important;
}

.menu.superior .nivel-um > li > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 1px !important;
    background: #c9a84c !important;
    transition: width 0.4s !important;
}

.menu.superior .nivel-um > li > a:hover {
    color: #8b6914 !important;
}

.menu.superior .nivel-um > li > a:hover::after {
    width: 100% !important;
}

/* Remove menu lateral */
.menu.lateral,
.coluna-esquerda,
.sidebar,
.componente.newsletter,
.newsletter {
    display: none !important;
}

/* ============================================================
   BANNERS — FULL WIDTH (técnica: margin negativa)
   Estrutura real: .secao-banners > .conteiner >
     .row-fluid.banner.cheio  (principal)
     .row-fluid.banner.mini-banner (3 colunas)
   ============================================================ */

.secao-banners {
    position: relative !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

.secao-banners .conteiner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Banner principal */
.row-fluid.banner.cheio {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.row-fluid.banner.cheio img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
}

/* Mini banners — 3 colunas lado a lado */
.row-fluid.banner.mini-banner {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

.row-fluid.banner.mini-banner > div,
.row-fluid.banner.mini-banner > a,
.row-fluid.banner.mini-banner .span4 {
    flex: 1 1 33.333% !important;
    width: 33.333% !important;
    max-width: 33.333% !important;
    float: none !important;
    margin-left: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: block !important;
}

.row-fluid.banner.mini-banner img {
    width: 100% !important;
    height: 100% !important;
    min-height: 220px !important;
    object-fit: cover !important;
    display: block !important;
}

/* ============================================================
   CORPO — REMOVE SIDEBAR, LISTAGEM OCUPA TUDO
   Estrutura real: #corpo > .conteiner > .secao-principal.row-fluid >
     .coluna.span3.esquerda   ← esconder
     .conteudo.span9          ← ocupar 100%
   ============================================================ */

#corpo {
    background: #faf6ee !important;
    padding: 0 !important;
}

/* Esconde sidebar esquerda */
#corpo .coluna.span3.esquerda,
#corpo .coluna-esquerda {
    display: none !important;
}

/* Conteúdo principal ocupa tudo */
#corpo .conteudo.span9 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 32px 40px !important;
    box-sizing: border-box !important;
}

/* Listagem de produtos */
#listagemProdutos ul,
.listagem ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#listagemProdutos li,
.listagem li {
    flex: 0 0 calc(25% - 18px) !important;
    max-width: calc(25% - 18px) !important;
    border: 1px solid #e8d5b8 !important;
    background: #fffdf8 !important;
    transition: all 0.4s !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
}

#listagemProdutos li:hover,
.listagem li:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 40px rgba(59,43,31,0.15) !important;
}

/* ============================================================
   RODAPÉ — IDENTIDADE BARROCA
   ============================================================ */

#rodape {
    background: #3b2b1f !important;
    border-top: 3px solid #c9a84c !important;
    margin-top: 0 !important;
}

#rodape .conteiner {
    background: #3b2b1f !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 48px 40px 32px !important;
    box-sizing: border-box !important;
}

/* Remove a caixa branca "Social" à direita */
#rodape .secao-secundaria,
#rodape .span3.hidden-phone,
#rodape [class*="social-rodape"] {
    background: #3b2b1f !important;
    border: none !important;
}

#rodape h3, #rodape h4, #rodape strong {
    font-family: Georgia, serif !important;
    font-size: 11px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: #e8d5a3 !important;
    border-bottom: 1px solid rgba(201,168,76,0.2) !important;
    padding-bottom: 10px !important;
    margin-bottom: 16px !important;
    display: block !important;
}

#rodape a, #rodape p, #rodape li {
    color: rgba(232,213,163,0.7) !important;
    font-family: Georgia, serif !important;
    font-size: 15px !important;
    text-decoration: none !important;
    line-height: 2.2 !important;
}

#rodape a:hover {
    color: #c9a84c !important;
}

/* ============================================================
   MOBILE — ATÉ 768px
   ============================================================ */
@media (max-width: 768px) {

    #cabecalho .conteiner,
    #cabecalho .row-fluid {
        display: block !important;
        padding: 16px !important;
    }

    #cabecalho .span3 {
        display: flex !important;
        justify-content: center !important;
        flex: none !important;
        width: 100% !important;
    }

    .logo img {
        width: 160px !important;
        margin: 0 auto !important;
    }

    #cabecalho .superior.row-fluid {
        display: none !important;
    }

    #cabecalho .conteudo-topo {
        width: 100% !important;
        flex: none !important;
    }

    #cabecalho .span4,
    .carrinho {
        display: none !important;
    }

    .secao-banners {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .row-fluid.banner.mini-banner {
        flex-direction: column !important;
    }

    .row-fluid.banner.mini-banner > div,
    .row-fluid.banner.mini-banner .span4 {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    #corpo .conteudo.span9 {
        padding: 16px !important;
    }

    #listagemProdutos li,
    .listagem li {
        flex: 0 0 calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    #listagemProdutos li,
    .listagem li {
        flex: 0 0 calc(33.333% - 16px) !important;
        max-width: calc(33.333% - 16px) !important;
    }
}

/* ============================================================
   RODAPÉ — CORRIGIR CAIXA SOCIAL BRANCA
   ============================================================ */

/* Força fundo escuro em TODO o rodapé e seus filhos */
#rodape,
#rodape > *,
#rodape .conteiner,
#rodape .row-fluid,
#rodape .span3,
#rodape .span4,
#rodape .span9,
#rodape [class*="span"],
#rodape .secao-secundaria,
#rodape div {
    background: #3b2b1f !important;
    background-color: #3b2b1f !important;
    border-color: rgba(201,168,76,0.15) !important;
}

/* Mini banners — forçar visibilidade */
.secao-banners .row-fluid.banner.mini-banner,
.banner.mini-banner {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
}

.secao-banners .row-fluid.banner.mini-banner .span4,
.banner.mini-banner .span4,
.banner.mini-banner > div {
    display: block !important;
    visibility: visible !important;
    flex: 1 1 33.333% !important;
    width: 33.333% !important;
    max-width: 33.333% !important;
    margin-left: 0 !important;
    float: none !important;
}

.banner.mini-banner img {
    display: block !important;
    width: 100% !important;
    visibility: visible !important;
}


/* ============================================================
   CORREÇÃO DEFINITIVA — SELETORES REAIS CONFIRMADOS
   
   Estrutura real:
   .secao-banners > .conteiner >
     .row-fluid.banner.cheio > .span12 > .flexslider
   
   #corpo > .conteiner >
     .secao-principal.row-fluid  (listagem produtos)
     .secao-secundaria           (mini banners!)
   ============================================================ */

/* MINI BANNERS estão em .secao-secundaria dentro do #corpo */
#corpo .secao-secundaria {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow: hidden !important;
}

#corpo .secao-secundaria > div,
#corpo .secao-secundaria > a,
#corpo .secao-secundaria [class*="span"],
#corpo .secao-secundaria .componente {
    flex: 1 1 33.333% !important;
    width: 33.333% !important;
    max-width: 33.333% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

#corpo .secao-secundaria img {
    width: 100% !important;
    height: 100% !important;
    min-height: 220px !important;
    object-fit: cover !important;
    display: block !important;
}

/* FLEXSLIDER — banner principal full width */
.secao-banners .span12 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.secao-banners .flexslider,
.secao-banners .flexslider img {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}


/* ============================================================
   AJUSTES FINOS DO CABEÇALHO
   ============================================================ */

/* Reduz espaço entre barra preta e conteúdo do header */
#cabecalho {
    padding-bottom: 0 !important;
}

/* Alinha verticalmente logo com busca e carrinho */
#cabecalho .row-fluid {
    align-items: center !important;
    padding: 10px 40px 0 !important;
}

/* Logo maior e bem alinhado */
#cabecalho .span3 {
    flex: 0 0 300px !important;
    width: 300px !important;
}

.logo img {
    width: 280px !important;
    max-width: 280px !important;
}

/* Busca e carrinho alinhados verticalmente */
#cabecalho .inferior.row-fluid {
    align-items: center !important;
    margin-top: 0 !important;
}

/* Meus pedidos / Minha conta — menor e mais discreto */
#cabecalho .superior.row-fluid {
    padding-bottom: 6px !important;
}

#cabecalho .superior.row-fluid a,
#cabecalho .superior.row-fluid span,
.bem-vindo a,
.bem-vindo span {
    font-size: 10px !important;
    letter-spacing: 2px !important;
    opacity: 0.85 !important;
}

/* Menu — elimina espaço em branco excessivo acima */
.menu.superior {
    margin-top: 8px !important;
    padding: 10px 0 !important;
}

/* Linha ornamental abaixo do cabeçalho mais fina */
#cabecalho::after {
    content: '' !important;
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    background: linear-gradient(90deg,
        transparent 0%,
        #d4b896 20%,
        #c9a84c 50%,
        #d4b896 80%,
        transparent 100%) !important;
}

/* Remove espaço entre menu e banner */
#cabecalho + .secao-banners,
.menu.superior + *,
#delimitadorBarra {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#delimitadorBarra {
    display: none !important;
}


/* ============================================================
   CORRIGIR DUPLICAÇÕES
   ============================================================ */

/* Esconde a barra sticky do topo que duplica busca/carrinho */
#barraTopo {
    display: none !important;
}

/* Esconde segunda barra preta duplicada */
.barra-inicial + .barra-inicial,
#cabecalho .barra-inicial {
    display: none !important;
}


/* ============================================================
   BARRA SUPERIOR — MAIS FINA, TELEFONE AO LADO DO FALE CONOSCO
   ============================================================ */

.barra-inicial {
    padding: 5px 48px !important;
    min-height: 0 !important;
    height: auto !important;
}

/* Coloca todos os itens em linha horizontal */
.barra-inicial .conteiner,
.barra-inicial .row-fluid,
.barra-inicial ul,
.barra-inicial > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 24px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove qualquer quebra de linha entre os itens */
.barra-inicial li,
.barra-inicial p,
.barra-inicial span,
.barra-inicial a {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 6px !important;
}

/* Separador entre fale conosco e telefone */
.barra-inicial .telefone::before,
.barra-inicial [class*="tel"]::before {
    content: '|' !important;
    color: rgba(232,213,163,0.3) !important;
    margin-right: 24px !important;
}


/* ============================================================
   BARRA SUPERIOR — SELETORES REAIS CONFIRMADOS
   Estrutura: .barra-inicial > .conteiner > .row-fluid >
     .lista-redes.span3  (redes sociais)
     .canais-contato.span9 > ul > li (fale conosco + telefone)
   ============================================================ */

/* Row-fluid da barra em linha */
.barra-inicial .row-fluid {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Canais de contato — ul em linha horizontal */
.canais-contato,
.canais-contato.span9 {
    float: none !important;
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: auto !important;
}

.canais-contato ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.canais-contato ul li {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    padding: 0 16px !important;
    border-right: 1px solid rgba(232,213,163,0.2) !important;
}

.canais-contato ul li:last-child {
    border-right: none !important;
}

.canais-contato ul li a,
.canais-contato ul li span,
.canais-contato ul li p {
    color: #e8d5a3 !important;
    font-family: Georgia, serif !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Redes sociais à esquerda */
.lista-redes,
.lista-redes.span3 {
    float: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}


/* ============================================================
   BUSCA E CARRINHO — REFINADOS E MENORES
   ============================================================ */

/* Campo de busca menor e mais elegante */
.busca input,
#form-buscar input,
input.search-query,
input.ui-autocomplete-input {
    height: 36px !important;
    font-size: 13px !important;
    padding: 0 14px !important;
    border: 1px solid #d4b896 !important;
    border-right: none !important;
    background: #faf6ee !important;
    color: #3b2b1f !important;
    font-family: Georgia, serif !important;
    font-style: italic !important;
    letter-spacing: 0.5px !important;
}

/* Botão de busca — ícone de lupa refinado */
#form-buscar .botao-busca,
#form-buscar button,
.busca button,
.busca .botao-busca {
    width: 36px !important;
    height: 36px !important;
    background: #8b6914 !important;
    border: 1px solid #8b6914 !important;
    border-left: none !important;
    color: #faf6ee !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.3s !important;
    padding: 0 !important;
}

#form-buscar button:hover,
.busca button:hover {
    background: #c9a84c !important;
    border-color: #c9a84c !important;
}

/* Carrinho menor e mais elegante */
.carrinho a {
    height: 36px !important;
    padding: 0 16px !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    border: 1px solid #d4b896 !important;
    background: #faf6ee !important;
    color: #5c3d1f !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: Georgia, serif !important;
    transition: all 0.3s !important;
    white-space: nowrap !important;
}

.carrinho a:hover {
    background: #8b6914 !important;
    border-color: #8b6914 !important;
    color: #faf6ee !important;
}

/* Ícone do carrinho */
.carrinho a i,
.carrinho a .icon-shopping-cart,
.carrinho a [class*="icon"] {
    font-size: 15px !important;
    color: #8b6914 !important;
}

.carrinho a:hover i,
.carrinho a:hover [class*="icon"] {
    color: #faf6ee !important;
}

/* Alinha busca e carrinho na mesma altura */
#cabecalho .inferior.row-fluid {
    align-items: center !important;
    gap: 12px !important;
}

/* Meus pedidos / Minha conta — mais compacto */
#cabecalho .superior.row-fluid {
    gap: 20px !important;
    padding-bottom: 8px !important;
}

#cabecalho .superior.row-fluid a {
    font-size: 10px !important;
    letter-spacing: 2px !important;
    gap: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
}

#cabecalho .superior.row-fluid i,
#cabecalho .superior.row-fluid [class*="icon"] {
    font-size: 14px !important;
    color: #8b6914 !important;
}


/* ============================================================
   BUSCA E CARRINHO — ÍCONES MARRONS E ORGANIZADOS
   ============================================================ */

/* Campo busca */
.busca input,
#form-buscar input,
input.search-query {
    height: 36px !important;
    font-size: 13px !important;
    padding: 0 14px !important;
    border: 1px solid #d4b896 !important;
    border-right: none !important;
    background: #faf6ee !important;
    color: #3b2b1f !important;
    font-family: Georgia, serif !important;
    font-style: italic !important;
}

/* Botão busca — fundo marrom dourado, ícone centralizado */
#form-buscar button,
#form-buscar .botao-busca,
.busca button {
    width: 40px !important;
    height: 36px !important;
    background: #8b6914 !important;
    border: 1px solid #8b6914 !important;
    border-left: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

/* Carrinho */
.carrinho a {
    height: 36px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid #d4b896 !important;
    background: #faf6ee !important;
    color: #5c3d1f !important;
    font-family: Georgia, serif !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
    transition: all 0.3s !important;
}

.carrinho a:hover {
    background: #8b6914 !important;
    border-color: #8b6914 !important;
    color: #faf6ee !important;
}

/* Meus Pedidos e Minha Conta — em linha, sem quebra */
#cabecalho .superior.row-fluid {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: nowrap !important;
    padding-bottom: 8px !important;
}

#cabecalho .superior.row-fluid a,
#cabecalho .superior.row-fluid span {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    color: #5c3d1f !important;
    text-transform: uppercase !important;
}

/* Esconde o "Bem-vindo, identifique-se" */
#cabecalho .bem-vindo,
.bem-vindo {
    display: none !important;
}

/* ============================================================
   MOBILE CORRIGIDO — ATÉ 768px
   ============================================================ */
@media (max-width: 768px) {

    /* Cabeçalho mobile em coluna limpa */
    #cabecalho .conteiner {
        padding: 0 !important;
    }

    #cabecalho .row-fluid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 14px 16px 0 !important;
        gap: 10px !important;
    }

    /* Logo centralizado */
    #cabecalho .span3 {
        width: 100% !important;
        flex: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .logo img {
        width: 200px !important;
        max-width: 200px !important;
        margin: 0 auto !important;
    }

    /* Esconde bem-vindo no mobile */
    .bem-vindo,
    #cabecalho .superior.row-fluid {
        display: none !important;
    }

    /* Conteudo-topo ocupa tudo */
    #cabecalho .conteudo-topo {
        width: 100% !important;
        flex: none !important;
        gap: 8px !important;
    }

    /* Busca largura total */
    #cabecalho .inferior.row-fluid {
        width: 100% !important;
        gap: 0 !important;
    }

    #cabecalho .span8,
    #cabecalho .busca-mobile,
    .busca {
        flex: 1 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .busca form,
    #form-buscar {
        width: 100% !important;
        display: flex !important;
    }

    .busca input,
    #form-buscar input {
        flex: 1 !important;
        width: 100% !important;
        height: 40px !important;
    }

    #form-buscar button,
    .busca button {
        height: 40px !important;
        width: 44px !important;
        flex-shrink: 0 !important;
    }

    /* Carrinho — oculto no mobile (já tem ícone nativo no topo) */
    #cabecalho .span4,
    .carrinho {
        display: none !important;
    }

    /* Menu mobile — horizontal com scroll, SEM fundo cinza */
    .menu.superior {
        width: 100% !important;
        background: #fffdf8 !important;
        border-top: 1px solid #d4b896 !important;
        border-bottom: none !important;
        margin-top: 10px !important;
        padding: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .menu.superior .nivel-um {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 0 8px !important;
        margin: 0 !important;
        gap: 0 !important;
        list-style: none !important;
        min-width: max-content !important;
    }

    .menu.superior .nivel-um > li {
        display: inline-block !important;
        float: none !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    /* Remove o separador ✦ entre itens no mobile */
    .menu.superior .nivel-um > li + li::before {
        padding: 0 8px !important;
        font-size: 7px !important;
    }

    .menu.superior .nivel-um > li > a {
        font-size: 10px !important;
        letter-spacing: 2px !important;
        padding: 12px 6px !important;
        white-space: nowrap !important;
        display: block !important;
    }

    /* Barra superior mobile compacta */
    .barra-inicial {
        padding: 5px 12px !important;
        flex-wrap: nowrap !important;
    }

    .canais-contato ul {
        flex-direction: row !important;
        gap: 0 !important;
    }

    .canais-contato ul li {
        padding: 0 8px !important;
        font-size: 10px !important;
    }

    /* Banner mobile full width */
    .secao-banners {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
}


/* ============================================================
   MOBILE — MENU HORIZONTAL E SEM CAIXA CINZA
   ============================================================ */
@media (max-width: 768px) {

    /* Esconde bem-vindo */
    .bem-vindo {
        display: none !important;
    }

    /* Remove fundo cinza do menu mobile */
    .menu.superior,
    .menu.superior .nivel-um,
    .atalhos-mobile,
    #cabecalho .menu {
        background: #fffdf8 !important;
        background-color: #fffdf8 !important;
        box-shadow: none !important;
    }

    /* Menu em linha horizontal com scroll */
    .menu.superior .nivel-um {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 8px 12px !important;
        gap: 4px !important;
        min-width: 0 !important;
        width: 100% !important;
        justify-content: flex-start !important;
        scrollbar-width: none !important;
    }

    /* Esconde scrollbar */
    .menu.superior .nivel-um::-webkit-scrollbar {
        display: none !important;
    }

    .menu.superior .nivel-um > li {
        flex: 0 0 auto !important;
        display: inline-block !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
        background: transparent !important;
        border: none !important;
    }

    /* Remove separador ✦ no mobile */
    .menu.superior .nivel-um > li + li::before {
        content: '' !important;
        padding: 0 6px !important;
        font-size: 6px !important;
        opacity: 0.4 !important;
    }

    .menu.superior .nivel-um > li > a {
        font-size: 9px !important;
        letter-spacing: 1.5px !important;
        padding: 8px 10px !important;
        white-space: nowrap !important;
        display: block !important;
        color: #3b2b1f !important;
        background: transparent !important;
    }

    /* Remove qualquer fundo cinza do container do menu */
    #cabecalho .conteiner > .menu,
    .menu-wrapper,
    [class*="menu-container"] {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
}