/* =====================================================
   MISSTI CANDLE — CSS AVANÇADO CONSOLIDADO
===================================================== */

:root{
    --missti-vinho:#490909;
    --missti-hover:#A79082;
    /* Newsletter e bloco institucional */
    --missti-cor-1:#EDE5D8;

    /* Pagamentos e selos */
    --missti-cor-2:#C7D1BE;

    /* Rodapé final */
    --missti-cor-3:#EDE5D8;

    --missti-separador:#FFFFFF;
    --missti-bege-claro:#F8F5EF;
    --missti-linha:#EEE9E4;
    --missti-texto:#5C4A42;
    --missti-branco:#FFFFFF;
    --missti-header-mobile:5.125rem;
}

/* =====================================================
   FUNDO GERAL
===================================================== */

html,
body,
.container-principal,
#corpo,
#corpo .conteiner,
#corpo .container{
    background:var(--missti-branco) !important;
}

/* =====================================================
   LOGO
===================================================== */

@media (min-width:768px){
    .g_logo img,
    .logo img{
        max-height:110px !important;
        width:auto !important;
    }
}

/* =====================================================
   HEADER
===================================================== */

header,
#cabecalho,
header .container,
header .conteiner,
#cabecalho .container,
#cabecalho .conteiner{
    background:var(--missti-branco) !important;
    box-shadow:none !important;
}

header,
#cabecalho{
    width:100% !important;
    position:relative !important;
    border-right:none !important;
    border-bottom:1px solid var(--missti-linha) !important;
    border-left:none !important;
}

header .container,
header .conteiner,
#cabecalho .container,
#cabecalho .conteiner{
    border-right:none !important;
    border-bottom:none !important;
    border-left:none !important;
    box-sizing:border-box !important;
}

@media (min-width:768px){
    header .container,
    header .conteiner,
    #cabecalho .container,
    #cabecalho .conteiner{
        padding-right:36px !important;
    }
}

@media (max-width:767px){
    header .container,
    header .conteiner,
    #cabecalho .container,
    #cabecalho .conteiner{
        padding-right:12px !important;
    }
}

/* =====================================================
   MENU SUPERIOR
===================================================== */

.menu.superior,
.menu.superior .container,
.menu.superior .conteiner,
.menu.superior .nivel-um{
    background:var(--missti-branco) !important;
    border:none !important;
    box-shadow:none !important;
}

.menu.superior .nivel-um > li,
.menu.superior .nivel-um > li > a,
.menu.superior .nivel-um > li > a strong{
    background:transparent !important;
    box-shadow:none !important;
}

.menu.superior strong.titulo.cor-secundaria,
.menu.superior .nivel-um > li > a,
.menu.superior .nivel-um > li > a strong{
    color:var(--missti-vinho) !important;
    font-weight:600 !important;
}

.menu.superior .nivel-um > li > a{
    padding:20px 22px !important;
    border-top:none !important;
    border-right:none !important;
    border-bottom:2px solid transparent !important;
    border-left:none !important;
    box-shadow:none !important;
    transition:color .25s ease, border-color .25s ease !important;
}

.menu.superior .nivel-um > li.categoria-id-24357833 > a{
    background:transparent !important;
    border-bottom-color:transparent !important;
    box-shadow:none !important;
}

.menu.superior .nivel-um > li:hover > a{
    color:var(--missti-vinho) !important;
    border-bottom-color:var(--missti-hover) !important;
}

.menu.superior .nivel-um > li::before,
.menu.superior .nivel-um > li::after,
.menu.superior .nivel-um > li > a::before,
.menu.superior .nivel-um > li > a::after{
    content:none !important;
    display:none !important;
    width:0 !important;
    height:0 !important;
    border:none !important;
    background:none !important;
    box-shadow:none !important;
}

/* =====================================================
   BANNERS
===================================================== */

.secao-banners{
    background:var(--missti-branco) !important;
}

.secao-banners img{
    max-width:100% !important;
    height:auto !important;
}

/* Remove textos/labels dos banners */
.secao-banners label,
.secao-banners a > label,
.secao-banners .flexslider label,
.secao-banners .flex-active-slide label,
.secao-banners .info-banner,
.secao-banners [class*="mini-banner"] label,
.secao-banners [class*="mini-banner"] .titulo,
.secao-banners [class*="mini-banner"] .info-banner,
.banner label,
.banner .info-banner,
.mini-banner label,
.mini-banner .info-banner{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}

/* =====================================================
   NEWSLETTER — ISOLADA EM #barraNewsletter
===================================================== */

#barraNewsletter{
    width:100% !important;
    margin:0 0 15px !important;
    padding:22px 0 !important;
    background:#fff !important;
    background-image:none !important;
    border:none !important;
    box-shadow:none !important;
    box-sizing:border-box !important;
}

#barraNewsletter > .conteiner{
    width:auto !important;
    max-width:1180px !important;
    margin:0 auto !important;
    padding:0 24px !important;
    background:#fff !important;
    background-image:none !important;
    box-sizing:border-box !important;
}

#barraNewsletter > .conteiner > .row-fluid{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
    background-image:none !important;
}

#barraNewsletter > .conteiner > .row-fluid > .span{
    width:100% !important;
    float:none !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
    background-image:none !important;
}

#barraNewsletter .componente.newsletter{
    width:100% !important;
    max-width:1040px !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 auto !important;
    padding:0 !important;
    background:var(--missti-cor-1) !important;
    background-image:none !important;
    border:1px solid rgba(73,9,9,.05) !important;
    border-radius:36px !important;
    box-shadow:none !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
}

#barraNewsletter .componente.newsletter > .interno{
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:30px 42px 34px !important;
    background:transparent !important;
    background-image:none !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    box-sizing:border-box !important;
}

#barraNewsletter .componente.newsletter > .interno > .titulo{
    display:none !important;
}

#barraNewsletter .newsletter .interno-conteudo{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:22px !important;
    flex-wrap:wrap !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    background-image:none !important;
    border:none !important;
    box-shadow:none !important;
    box-sizing:border-box !important;
}

#barraNewsletter .newsletter .texto-newsletter{
    flex:0 0 auto !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    color:var(--missti-vinho) !important;
    font-size:16px !important;
    font-weight:500 !important;
    line-height:1.4 !important;
    white-space:nowrap !important;
}

#barraNewsletter .newsletter .input-conteiner{
    position:static !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    background-image:none !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
}

#barraNewsletter .newsletter .input-conteiner input[type="text"]{
    position:static !important;
    float:none !important;
    width:300px !important;
    min-width:300px !important;
    height:48px !important;
    margin:0 !important;
    padding:0 20px !important;
    background:#fff !important;
    background-image:none !important;
    color:var(--missti-texto) !important;
    border:1px solid rgba(73,9,9,.10) !important;
    border-radius:999px !important;
    box-shadow:none !important;
    outline:none !important;
    font-size:14px !important;
    box-sizing:border-box !important;
}

#barraNewsletter .newsletter .input-conteiner input[type="text"]::placeholder{
    color:#B1A7A2 !important;
    opacity:1 !important;
}

/* Botão Assinar — correção completa */
#barraNewsletter .newsletter .newsletter-assinar,
#barraNewsletter .newsletter .newsletter-assinar.botao,
#barraNewsletter .newsletter .newsletter-assinar.botao-input,
#barraNewsletter .newsletter button.newsletter-assinar{
    position:static !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    float:none !important;
    width:auto !important;
    min-width:112px !important;
    max-width:none !important;
    height:48px !important;
    min-height:48px !important;
    margin:0 !important;
    padding:0 26px !important;
    background:var(--missti-vinho) !important;
    background-color:var(--missti-vinho) !important;
    background-image:none !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    border:0 !important;
    border-radius:999px !important;
    box-shadow:none !important;
    text-shadow:none !important;
    font-size:0 !important;
    line-height:1 !important;
    overflow:hidden !important;
    opacity:1 !important;
    transform:none !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    box-sizing:border-box !important;
    cursor:pointer !important;
}

#barraNewsletter .newsletter .newsletter-assinar::after{
    content:"Assinar" !important;
    position:static !important;
    display:block !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    background-image:none !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    border:none !important;
    box-shadow:none !important;
    font-size:14px !important;
    font-weight:600 !important;
    line-height:1 !important;
    text-align:center !important;
}

#barraNewsletter .newsletter .newsletter-assinar::before,
#barraNewsletter .newsletter .icon-chevron-right::before{
    content:none !important;
    display:none !important;
}

#barraNewsletter .newsletter .newsletter-assinar:hover,
#barraNewsletter .newsletter .newsletter-assinar:focus,
#barraNewsletter .newsletter .newsletter-assinar:active{
    background:var(--missti-vinho) !important;
    background-color:var(--missti-vinho) !important;
    background-image:none !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    border:none !important;
    box-shadow:none !important;
    outline:none !important;
    opacity:.94 !important;
    transform:none !important;
}

#barraNewsletter .newsletter .newsletter-confirmacao{
    width:100% !important;
    margin:14px 0 0 !important;
    padding:0 !important;
    color:var(--missti-vinho) !important;
    text-align:center !important;
}

/* =====================================================
   RODAPÉ — BLOCO INSTITUCIONAL
===================================================== */

#rodape .institucional,
#rodape .institucional .conteiner,
#rodape .institucional .container{
    background:var(--missti-cor-1) !important;
}

#rodape .institucional{
    padding-top:34px !important;
    padding-bottom:34px !important;
    border:none !important;
}

#rodape,
#rodape a,
#rodape p,
#rodape li{
    color:var(--missti-vinho) !important;
}

#rodape h5,
#rodape h5 span{
    color:var(--missti-vinho) !important;
    font-family:"The Seasons", Georgia, serif !important;
    font-weight:500 !important;
    font-size:20px !important;
}

/* =====================================================
   RODAPÉ — PAGAMENTOS E SELOS
===================================================== */

.pagamento-selos,
.pagamento-selos .conteiner,
.pagamento-selos .container,
.pagamento-selos .row-fluid{
    background:var(--missti-cor-2) !important;
}

.pagamento-selos{
    padding-top:34px !important;
    padding-bottom:34px !important;
    border-top:2px solid var(--missti-separador) !important;
    border-right:none !important;
    border-bottom:none !important;
    border-left:none !important;
}

.pagamento-selos .titulo,
.pagamento-selos .cor-secundaria{
    color:var(--missti-vinho) !important;
}

/* =====================================================
   RODAPÉ FINAL
===================================================== */

#rodape > div:has(#logo_before){
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding-top:24px !important;
    padding-bottom:24px !important;
    background:var(--missti-cor-3) !important;
    background-color:var(--missti-cor-3) !important;
    border-top:2px solid var(--missti-separador) !important;
    border-right:none !important;
    border-bottom:none !important;
    border-left:none !important;
    box-shadow:none !important;
    box-sizing:border-box !important;
}

#rodape > div:has(#logo_before) > .conteiner,
#rodape > div:has(#logo_before) > .container{
    width:100% !important;
    max-width:1140px !important;
    margin:0 auto !important;
    padding-left:20px !important;
    padding-right:20px !important;
    background:var(--missti-cor-3) !important;
    background-color:var(--missti-cor-3) !important;
    border:none !important;
    box-shadow:none !important;
    box-sizing:border-box !important;
}

#rodape > div:has(#logo_before) .row-fluid,
#rodape > div:has(#logo_before) .span9,
#rodape > div:has(#logo_before) .span12,
#rodape > div:has(#logo_before) div,
#rodape > div:has(#logo_before) p,
#rodape > div:has(#logo_before) span,
#rodape > div:has(#logo_before) a{
    background:var(--missti-cor-3) !important;
    background-color:var(--missti-cor-3) !important;
    box-shadow:none !important;
}

#rodape > div:has(#logo_before) svg,
#rodape > div:has(#logo_before) svg path,
#rodape > div:has(#logo_before) svg rect,
#rodape > div:has(#logo_before) svg g{
    background:transparent !important;
    background-color:transparent !important;
}

#rodape > div:last-child,
#rodape .creditos,
#rodape .rodape-inferior{
    width:100% !important;
    max-width:none !important;
    background:var(--missti-cor-3) !important;
    background-color:var(--missti-cor-3) !important;
    box-shadow:none !important;
}

#rodape > div:last-child .conteiner,
#rodape > div:last-child .container,
#rodape .creditos .conteiner,
#rodape .creditos .container,
#rodape .rodape-inferior .conteiner,
#rodape .rodape-inferior .container{
    background:var(--missti-cor-3) !important;
    background-color:var(--missti-cor-3) !important;
    box-shadow:none !important;
}

/* =====================================================
   CATEGORIA
===================================================== */

.faceta-preco,
.faceta-peso{
    display:none !important;
}

.descricao-resumida{
    display:none !important;
}

.descricao-completa{
    display:block !important;
}

.botao-veja-mais,
.botao-veja-mais.principal,
.botao.botao-veja-mais{
    display:none !important;
}

.icon-file-text,
.icon-file-text::before,
.componente.categoria-descricao i{
    display:none !important;
}

.componente.categoria-descricao .interno{
    background:var(--missti-bege-claro) !important;
    border:1px solid #E7DDD1 !important;
    border-radius:18px !important;
    padding:26px !important;
    box-shadow:0 10px 30px rgba(0,0,0,.05) !important;
}

.componente.categoria-descricao h4{
    color:var(--missti-vinho) !important;
    font-size:36px !important;
    font-weight:500 !important;
    line-height:1.2 !important;
}

.componente.categoria-descricao p{
    color:var(--missti-texto) !important;
    line-height:1.8 !important;
}

.listagem-item strong.titulo{
    color:var(--missti-vinho) !important;
    font-weight:600 !important;
}

/* =====================================================
   IMAGENS DOS PRODUTOS
===================================================== */

.listagem-item img{
    max-width:100% !important;
    height:auto !important;
}

.listagem-item a img{
    transition:opacity .2s ease !important;
}

.listagem-item a:hover img{
    opacity:.96 !important;
}

/* =====================================================
   PÁGINA DE PRODUTO
===================================================== */

.codigo-produto{
    display:none !important;
}

/* =====================================================
   PÁGINAS INSTITUCIONAIS
===================================================== */

.missti-institucional{
    color:var(--missti-texto) !important;
    font-family:Arial, Helvetica, sans-serif !important;
    font-size:15px !important;
    line-height:1.7 !important;
}

.missti-institucional p,
.missti-institucional span,
.missti-institucional li,
.missti-institucional strong,
.missti-institucional a{
    font-family:Arial, Helvetica, sans-serif !important;
    font-size:15px !important;
    line-height:1.7 !important;
}

.missti-institucional h1,
.missti-institucional h2,
.missti-institucional h3,
.missti-institucional h4{
    color:var(--missti-vinho) !important;
    font-family:"The Seasons", Georgia, serif !important;
    line-height:1.3 !important;
}

/* =====================================================
   BLOCO VINHO
===================================================== */

.missti-statement{
    background:var(--missti-vinho) !important;
    color:#fff !important;
    padding:28px 32px !important;
    text-align:center !important;
}

.missti-statement,
.missti-statement p,
.missti-statement span,
.missti-statement strong,
.missti-statement a,
.missti-statement h1,
.missti-statement h2,
.missti-statement h3,
.missti-statement h4,
.missti-statement h5,
.missti-statement h6{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}

/* =====================================================
   RESPONSIVIDADE
===================================================== */

@media (max-width:767px){

    #barraNewsletter{
        padding:14px 0 !important;
        margin-bottom:15px !important;
    }

    #barraNewsletter > .conteiner{
        padding:0 12px !important;
    }

    #barraNewsletter > .conteiner > .row-fluid > .span{
        width:100% !important;
        float:none !important;
    }

    #barraNewsletter .componente.newsletter{
        width:100% !important;
        max-width:none !important;
        border-radius:26px !important;
    }

    #barraNewsletter .componente.newsletter > .interno{
        padding:24px 18px 26px !important;
    }

    #barraNewsletter .newsletter .interno-conteudo{
        flex-direction:column !important;
        gap:14px !important;
    }

    #barraNewsletter .newsletter .texto-newsletter{
        width:100% !important;
        white-space:normal !important;
        text-align:center !important;
    }

    #barraNewsletter .newsletter .input-conteiner{
        width:100% !important;
        gap:10px !important;
    }

    #barraNewsletter .newsletter .input-conteiner input[type="text"]{
        width:100% !important;
        min-width:0 !important;
        height:46px !important;
    }

    #barraNewsletter .newsletter .newsletter-assinar{
        min-width:100px !important;
        height:46px !important;
        min-height:46px !important;
        padding:0 20px !important;
    }

    #rodape > div:has(#logo_before) > .conteiner,
    #rodape > div:has(#logo_before) > .container{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .componente.categoria-descricao .interno{
        padding:20px !important;
        border-radius:14px !important;
    }

    .componente.categoria-descricao h4{
        font-size:28px !important;
    }

    .missti-institucional,
    .missti-institucional p,
    .missti-institucional span,
    .missti-institucional li{
        font-size:14px !important;
        line-height:1.65 !important;
    }

    .missti-statement{
        padding:22px 18px !important;
    }
}

/* =====================================================
   GARANTIAS FINAIS
===================================================== */

header,
#cabecalho{
    border-bottom:1px solid var(--missti-linha) !important;
}

header .container,
header .conteiner,
#cabecalho .container,
#cabecalho .conteiner,
.menu.superior,
.menu.superior .container,
.menu.superior .conteiner,
.menu.superior .nivel-um{
    border-bottom:none !important;
    box-shadow:none !important;
}

.menu.superior .nivel-um > li > a{
    border-bottom:2px solid transparent !important;
}

.menu.superior .nivel-um > li.categoria-id-24357833 > a{
    border-bottom-color:transparent !important;
}

.menu.superior .nivel-um > li:hover > a{
    border-bottom-color:var(--missti-hover) !important;
}

/* =====================================================
   CORREÇÃO MOBILE — CABEÇALHO FIXO REAL DA LOJA
   Mantém o conteúdo abaixo do header e usa REM para
   a altura do cabeçalho mobile.
===================================================== */

@media (max-width:767px){

    html{
        scroll-padding-top:var(--missti-header-mobile) !important;
    }

    /* Reserva exatamente a altura ocupada pelo cabeçalho fixo. */
    .conteiner-principal{
        padding-top:var(--missti-header-mobile) !important;
    }

    /* Cabeçalho fixo real encontrado no HTML */
    header.fix-on-top{
        width:100% !important;
        min-height:var(--missti-header-mobile) !important;
        height:var(--missti-header-mobile) !important;

        margin:0 !important;
        padding:0 !important;

        background:#fff !important;
        border-bottom:1px solid var(--missti-linha) !important;
        box-shadow:none !important;

        z-index:10000 !important;
        box-sizing:border-box !important;
    }

    header.fix-on-top > .container{
        width:100% !important;
        max-width:none !important;

        min-height:var(--missti-header-mobile) !important;
        height:var(--missti-header-mobile) !important;

        margin:0 auto !important;
        padding:0 .75rem !important;

        background:#fff !important;
        box-sizing:border-box !important;
    }

    header.fix-on-top > .container > .row-flex{
        position:relative !important;
        min-height:var(--missti-header-mobile) !important;
        height:var(--missti-header-mobile) !important;

        margin:0 !important;
        padding:0 !important;

        align-items:center !important;
        z-index:10001 !important;
        box-sizing:border-box !important;
    }

    header.fix-on-top .between-mobile{
        min-height:0 !important;
        height:auto !important;

        margin:0 !important;
        padding:0 !important;

        align-items:center !important;
    }

    /* Logo compacta e centralizada */
    header.fix-on-top .g_logo,
    header.fix-on-top .logo{
        min-height:0 !important;
        height:auto !important;

        margin:0 !important;
        padding:0 !important;
    }

    header.fix-on-top .g_logo img,
    header.fix-on-top .logo img{
        display:block !important;

        width:auto !important;
        max-width:4.625rem !important;
        height:auto !important;
        max-height:3.625rem !important;

        margin:0 !important;
    }

    /* Botão do menu sempre acima do conteúdo dos produtos. */
    header.fix-on-top .menu-trigger{
        position:relative !important;
        margin:0 .625rem 0 0 !important;
        z-index:10003 !important;
        pointer-events:auto !important;
        cursor:pointer !important;
    }

    /* Ícones de conta e carrinho */
    header.fix-on-top .theme-functions{
        position:relative !important;
        min-height:0 !important;
        height:auto !important;

        margin:0 !important;
        padding:0 !important;

        align-items:center !important;
        z-index:10003 !important;
    }

    header.fix-on-top .theme-functions > li{
        margin-top:0 !important;
        margin-bottom:0 !important;
    }

    /* Remove qualquer espaço residual antes do primeiro banner */
    .secao-banners{
        margin-top:0 !important;
        padding-top:0 !important;
    }

    .secao-banners > .conteiner{
        margin-top:0 !important;
        padding-top:0 !important;
    }

    .secao-banners .banner.cheio,
    .secao-banners .banner.cheio .flexslider,
    .secao-banners .banner.cheio .slides{
        margin-top:0 !important;
        padding-top:0 !important;
    }
}

/* =====================================================
   CORREÇÕES MOBILE — BUSCA DO CABEÇALHO E IMAGENS
===================================================== */

@media (max-width:768px){

    /* -------------------------------------------------
       BUG 1 — MENU / BUSCA MOBILE
    ------------------------------------------------- */

    /*
       O menu fica fechado por padrão em toda página.
       O JavaScript do cabeçalho controla a classe
       body.missti-menu-aberto ao tocar no hambúrguer.
    */
    header.fix-on-top .menu.superior{
        position:fixed !important;

        top:var(--missti-header-mobile) !important;
        right:auto !important;
        bottom:0 !important;
        left:0 !important;

        display:block !important;

        width:100% !important;
        max-width:none !important;

        height:calc(100dvh - var(--missti-header-mobile)) !important;
        max-height:calc(100dvh - var(--missti-header-mobile)) !important;

        margin:0 !important;

        background:#fff !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        z-index:10002 !important;

        transform:translateX(-105%) !important;
        visibility:hidden !important;
        opacity:0 !important;
        pointer-events:none !important;

        transition:transform .25s ease, opacity .2s ease, visibility .2s ease !important;
        box-sizing:border-box !important;
    }

    body.missti-menu-aberto header.fix-on-top .menu.superior{
        transform:translateX(0) !important;
        visibility:visible !important;
        opacity:1 !important;
        pointer-events:auto !important;
    }

    body.missti-menu-aberto{
        overflow:hidden !important;
    }

    /* Busca organizada dentro do menu lateral */
    header.fix-on-top .menu.superior #search-form{
        position:static !important;

        display:block !important;

        width:100% !important;
        max-width:none !important;

        margin:0 0 18px !important;
        padding:0 !important;

        float:none !important;

        background:transparent !important;

        box-sizing:border-box !important;
    }

    header.fix-on-top .menu.superior #search-form form{
        position:relative !important;

        display:block !important;

        width:100% !important;

        margin:0 !important;
        padding:0 !important;
    }

    header.fix-on-top .menu.superior #search-form input[type="text"]{
        display:block !important;

        width:100% !important;
        height:42px !important;

        margin:0 !important;
        padding:0 44px 0 14px !important;

        background:#fff !important;

        border:1px solid var(--missti-linha) !important;
        border-radius:8px !important;

        box-shadow:none !important;

        box-sizing:border-box !important;
    }

    header.fix-on-top .menu.superior #search-form .botao-busca{
        position:absolute !important;
        top:0 !important;
        right:0 !important;
        bottom:auto !important;
        left:auto !important;

        width:42px !important;
        height:42px !important;

        margin:0 !important;
        padding:0 !important;

        background:transparent !important;

        border:none !important;
        box-shadow:none !important;
    }

    /*
       Garante que a linha principal do cabeçalho exiba
       somente menu, logo, conta e carrinho.
    */
    header.fix-on-top > .container > .row-flex{
        position:relative !important;
        z-index:10001 !important;
    }

    header.fix-on-top .search-desktop-container{
        position:static !important;

        width:auto !important;
        max-width:none !important;

        margin:0 !important;
        padding:0 !important;
    }

    header.fix-on-top .theme-functions{
        position:relative !important;
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;

        gap:.625rem !important;

        width:auto !important;

        margin:0 !important;
        padding:0 !important;

        z-index:10003 !important;
    }

    /* -------------------------------------------------
       BUG 2 — IMAGENS DOS PRODUTOS DESAPARECENDO
    ------------------------------------------------- */

    /*
       O tema posiciona a imagem dentro de um contêiner
       com altura definida. Ao usar height:auto nesse
       contêiner, ele colapsa e a imagem desaparece.
    */
    #listagemProdutos .imagem-produto{
        position:relative !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        width:100% !important;
        height:auto !important;
        min-height:150px !important;
        aspect-ratio:1 / 1 !important;

        margin:0 0 8px !important;
        padding:0 !important;

        overflow:hidden !important;

        background:#fff !important;

        box-sizing:border-box !important;
    }

    #listagemProdutos .imagem-produto img,
    #listagemProdutos .imagem-produto .imagem-principal{
        position:static !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        display:block !important;

        width:100% !important;
        max-width:100% !important;
        height:100% !important;
        max-height:none !important;

        margin:0 auto !important;

        object-fit:contain !important;
        object-position:center !important;

        opacity:1 !important;
        visibility:visible !important;

        transform:none !important;
    }

    /* Mantém o link sobreposto clicável sem ocultar a imagem */
    #listagemProdutos .produto-sobrepor{
        position:absolute !important;
        inset:0 !important;

        display:block !important;

        z-index:3 !important;

        background:transparent !important;
    }

    #listagemProdutos .listagem-item{
        position:relative !important;

        height:auto !important;
        min-height:0 !important;

        overflow:visible !important;
    }

    /* Coração acima da imagem, sem cair sobre o nome */
    #listagemProdutos .add-wishlist{
        position:absolute !important;
        top:8px !important;
        right:10px !important;

        z-index:5 !important;

        margin:0 !important;
    }

    #listagemProdutos .info-produto{
        position:relative !important;

        z-index:4 !important;

        margin-top:0 !important;
    }

    /* Dois produtos por linha */
    #listagemProdutos > ul > li.listagem-linha > ul{
        display:flex !important;
        flex-wrap:wrap !important;
        align-items:flex-start !important;

        width:100% !important;

        margin:0 !important;
        padding:0 !important;
    }

    #listagemProdutos > ul > li.listagem-linha > ul > li{
        width:50% !important;
        max-width:50% !important;

        margin:0 0 24px !important;
        padding:0 7px !important;

        float:none !important;
        clear:none !important;

        box-sizing:border-box !important;
    }

    #listagemProdutos .nome-produto{
        display:block !important;

        min-height:38px !important;

        margin:0 0 8px !important;

        font-size:13px !important;
        line-height:1.35 !important;
        text-align:center !important;
    }

    #listagemProdutos .preco-produto,
    #listagemProdutos .preco-a-partir{
        text-align:center !important;
    }
}

@media (max-width:360px){

    #listagemProdutos .imagem-produto{
        min-height:135px !important;
    }

    #listagemProdutos > ul > li.listagem-linha > ul > li{
        padding-right:5px !important;
        padding-left:5px !important;
    }
}

/* =====================================================
   PRODUTOS — LINK NATIVO SOBRE A IMAGEM
   Correção definitiva sem dependência de JavaScript
===================================================== */

#listagemProdutos .listagem-item{
    position:relative !important;
    overflow:visible !important;
}

/*
   Link nativo existente no HTML:
   <a class="produto-sobrepor" href="..."></a>

   Ele cobre somente a área visual da imagem.
*/
#listagemProdutos .listagem-item > a.produto-sobrepor{
    position:absolute !important;

    top:0 !important;
    right:0 !important;
    bottom:auto !important;
    left:0 !important;

    display:block !important;

    width:100% !important;
    height:247px !important;
    min-height:247px !important;
    max-height:247px !important;

    margin:0 !important;
    padding:0 !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    opacity:1 !important;
    visibility:visible !important;
    overflow:visible !important;

    pointer-events:auto !important;
    cursor:pointer !important;

    z-index:20 !important;
}

/*
   A área da imagem não bloqueia o link sobreposto.
*/
#listagemProdutos .listagem-item > .imagem-produto,
#listagemProdutos .listagem-item > .imagem-produto img,
#listagemProdutos .listagem-item > .imagem-produto .imagem-principal,
#listagemProdutos .listagem-item > .imagem-produto .imagem-zoom{
    pointer-events:none !important;
}

#listagemProdutos .listagem-item > .imagem-produto{
    position:relative !important;
    cursor:pointer !important;
}

/*
   O coração permanece clicável acima do link do produto.
*/
#listagemProdutos .listagem-item > .add-wishlist{
    position:absolute !important;
    pointer-events:auto !important;
    z-index:30 !important;
}

/*
   Os selos ficam visualmente acima do link,
   mas não bloqueiam o clique na imagem.
*/
#listagemProdutos .listagem-item > .bandeiras-produto{
    position:absolute !important;
    pointer-events:none !important;
    z-index:25 !important;
}

/* =====================================================
   PRODUTOS — AJUSTE RESPONSIVO DO LINK
===================================================== */

@media (max-width:768px){

    /*
       No mobile a imagem é quadrada e responsiva.
       O link acompanha a largura real do card.
    */
    #listagemProdutos .listagem-item > a.produto-sobrepor{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        aspect-ratio:1 / 1 !important;
    }

    #listagemProdutos .listagem-item > .imagem-produto{
        position:relative !important;

        width:100% !important;
        height:auto !important;
        min-height:150px !important;

        aspect-ratio:1 / 1 !important;

        overflow:hidden !important;
    }

    /*
       Selo de desconto no canto superior direito.
    */
    #listagemProdutos .listagem-item > .bandeiras-produto{
        top:10px !important;
        right:10px !important;
        bottom:auto !important;
        left:auto !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:flex-end !important;

        width:auto !important;
        max-width:calc(100% - 20px) !important;
        height:auto !important;

        margin:0 !important;
        padding:0 !important;
    }

    #listagemProdutos .listagem-item > .bandeiras-produto > *,
    #listagemProdutos .listagem-item > .bandeiras-produto .bandeira-promocao,
    #listagemProdutos .listagem-item > .bandeiras-produto .bandeira-desconto,
    #listagemProdutos .listagem-item > .bandeiras-produto .desconto{
        position:static !important;

        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;

        width:auto !important;
        min-width:0 !important;
        max-width:100% !important;
        height:auto !important;
        min-height:30px !important;

        margin:0 0 6px !important;
        padding:6px 10px !important;

        border-radius:999px !important;

        white-space:nowrap !important;
        line-height:1.1 !important;

        transform:none !important;
        box-shadow:none !important;
        box-sizing:border-box !important;
    }

    /*
       Coração no canto superior esquerdo.
    */
    #listagemProdutos .listagem-item > .add-wishlist{
        top:10px !important;
        right:auto !important;
        left:10px !important;

        margin:0 !important;
    }
}

@media (max-width:360px){

    #listagemProdutos .listagem-item > .imagem-produto{
        min-height:135px !important;
    }

    #listagemProdutos .listagem-item > .bandeiras-produto{
        top:8px !important;
        right:8px !important;
    }

    #listagemProdutos .listagem-item > .bandeiras-produto > *,
    #listagemProdutos .listagem-item > .bandeiras-produto .bandeira-promocao,
    #listagemProdutos .listagem-item > .bandeiras-produto .bandeira-desconto,
    #listagemProdutos .listagem-item > .bandeiras-produto .desconto{
        min-height:27px !important;
        padding:5px 8px !important;
        font-size:11px !important;
    }

    #listagemProdutos .listagem-item > .add-wishlist{
        top:8px !important;
        left:8px !important;
    }
}

/* =====================================================
   AJUSTES FINAIS — RÉCHAUD / PRODUTOS / TIKTOK
===================================================== */

/* Réchaud — remove os filtros laterais somente nesta categoria */
.missti-rechaud .filtro-coluna,
.missti-rechaud .filtros,
.missti-rechaud .facetas,
.missti-rechaud .coluna.span3:has(.filtro),
.missti-rechaud .coluna.span3:has(.facetas){
    display:none !important;
}

.missti-rechaud .conteudo.span9,
.missti-rechaud .conteudo{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
}

/* Nome dos produtos completo, sem corte ou reticências */
#listagemProdutos .nome-produto,
#listagemProdutos .nome-produto strong,
#listagemProdutos .nome-produto span{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    white-space:normal !important;
    text-overflow:clip !important;
    -webkit-line-clamp:unset !important;
    -webkit-box-orient:initial !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
}

/* Mantém a mesma fonte dos produtos no desktop e mobile */
#listagemProdutos .listagem-item,
#listagemProdutos .nome-produto,
#listagemProdutos .nome-produto strong,
#listagemProdutos .nome-produto span,
#listagemProdutos .preco-produto,
#listagemProdutos .preco-a-partir,
#listagemProdutos .preco-promocional,
#listagemProdutos .preco-venda{
    font-family:Arial, Helvetica, sans-serif !important;
}

/* TikTok — apenas o desenho do ícone.
   O <li> e o <a> herdam o mesmo círculo e espaçamento
   usados por YouTube, Instagram e Pinterest. */
#rodape .missti-tiktok-item .missti-icon-tiktok{
    display:inline-block !important;
    width:16px !important;
    height:16px !important;
    background-color:currentColor !important;
    vertical-align:middle !important;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.53 0h3.91c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-2.11-.07-4.16-.72-5.81-1.9v8.75c-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.72-.18-1.99.49-4.02 1.86-5.49 1.66-1.8 4.2-2.67 6.61-2.22v4.44c-1.1-.35-2.39-.2-3.26.6-1.15.96-1.37 2.75-.5 3.96.83 1.31 2.7 1.72 4 1.02 1.12-.54 1.84-1.75 1.86-3V0z'/%3E%3C/svg%3E") !important;
    -webkit-mask-repeat:no-repeat !important;
    -webkit-mask-position:center !important;
    -webkit-mask-size:contain !important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.53 0h3.91c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-2.11-.07-4.16-.72-5.81-1.9v8.75c-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.72-.18-1.99.49-4.02 1.86-5.49 1.66-1.8 4.2-2.67 6.61-2.22v4.44c-1.1-.35-2.39-.2-3.26.6-1.15.96-1.37 2.75-.5 3.96.83 1.31 2.7 1.72 4 1.02 1.12-.54 1.84-1.75 1.86-3V0z'/%3E%3C/svg%3E") !important;
    mask-repeat:no-repeat !important;
    mask-position:center !important;
    mask-size:contain !important;
}



#rodape .missti-tiktok-item .missti-icon-tiktok::before{
    content:none !important;
}


/* =====================================================
   GARANTIA FINAL — HEADER ACIMA DOS PRODUTOS
===================================================== */

@media (max-width:768px){
    header.fix-on-top{
        z-index:10000 !important;
    }

    header.fix-on-top .menu-trigger{
        z-index:10003 !important;
        pointer-events:auto !important;
    }

    header.fix-on-top .menu.superior{
        z-index:10002 !important;
    }

    #listagemProdutos .listagem-item > a.produto-sobrepor{
        z-index:20 !important;
    }
}

/* =====================================================
   CORREÇÃO DEFINITIVA MOBILE — HEADER / MENU / CONTEÚDO
   Colocar este bloco no FINAL do CSS.
   Ele sobrescreve as regras mobile anteriores.
===================================================== */

@media (max-width:768px){

    :root{
        --missti-header-mobile:5.125rem;
    }

    html{
        scroll-padding-top:var(--missti-header-mobile) !important;
    }

    html,
    body{
        width:100% !important;
        max-width:100% !important;
        overflow-x:hidden !important;
    }

    /*
       O header passa a ser sticky, e não "fixo + compensação manual".
       Assim ele continua visível, mas mantém o próprio espaço no fluxo
       e não cobre filtros, títulos, banners ou produtos.
    */
    header.fix-on-top,
    #cabecalho.fix-on-top{
        position:sticky !important;
        top:0 !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        display:block !important;

        width:100% !important;
        max-width:100% !important;

        height:var(--missti-header-mobile) !important;
        min-height:var(--missti-header-mobile) !important;
        max-height:var(--missti-header-mobile) !important;

        margin:0 !important;
        padding:0 !important;

        background:#fff !important;
        border-bottom:1px solid var(--missti-linha) !important;
        box-shadow:none !important;

        overflow:visible !important;

        z-index:1200 !important;
        isolation:isolate !important;
        box-sizing:border-box !important;
    }

    /*
       Remove a compensação antiga.
       Com position:sticky o próprio header já ocupa espaço no layout.
    */
    .conteiner-principal{
        padding-top:0 !important;
        margin-top:0 !important;
    }

    header.fix-on-top > .container,
    header.fix-on-top > .conteiner,
    #cabecalho.fix-on-top > .container,
    #cabecalho.fix-on-top > .conteiner{
        position:relative !important;

        display:block !important;

        width:100% !important;
        max-width:100% !important;

        height:var(--missti-header-mobile) !important;
        min-height:var(--missti-header-mobile) !important;
        max-height:var(--missti-header-mobile) !important;

        margin:0 auto !important;
        padding:0 .75rem !important;

        background:#fff !important;

        overflow:visible !important;

        box-sizing:border-box !important;
    }

    header.fix-on-top > .container > .row-flex,
    header.fix-on-top > .conteiner > .row-flex,
    #cabecalho.fix-on-top > .container > .row-flex,
    #cabecalho.fix-on-top > .conteiner > .row-flex{
        position:relative !important;

        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:center !important;

        width:100% !important;
        max-width:100% !important;

        height:var(--missti-header-mobile) !important;
        min-height:var(--missti-header-mobile) !important;
        max-height:var(--missti-header-mobile) !important;

        margin:0 !important;
        padding:0 !important;

        overflow:visible !important;

        z-index:1201 !important;
        box-sizing:border-box !important;
    }

    header.fix-on-top .between-mobile,
    #cabecalho.fix-on-top .between-mobile{
        position:relative !important;

        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:center !important;

        width:100% !important;
        max-width:100% !important;

        height:100% !important;
        min-height:0 !important;

        margin:0 !important;
        padding:0 !important;

        overflow:visible !important;
        box-sizing:border-box !important;
    }

    /*
       Busca de desktop não pode ocupar uma segunda linha dentro do header.
       Esse era um dos pontos que faziam o conteúdo escapar da altura declarada.
    */
    header.fix-on-top > .container > .row-flex > .search-desktop-container,
    header.fix-on-top > .conteiner > .row-flex > .search-desktop-container,
    #cabecalho.fix-on-top > .container > .row-flex > .search-desktop-container,
    #cabecalho.fix-on-top > .conteiner > .row-flex > .search-desktop-container{
        display:none !important;
        visibility:hidden !important;

        width:0 !important;
        min-width:0 !important;
        max-width:0 !important;

        height:0 !important;
        min-height:0 !important;
        max-height:0 !important;

        margin:0 !important;
        padding:0 !important;

        overflow:hidden !important;
        pointer-events:none !important;
    }

    /*
       Hambúrguer
    */
    header.fix-on-top .menu-trigger,
    #cabecalho.fix-on-top .menu-trigger{
        position:relative !important;

        flex:0 0 auto !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        margin:0 .625rem 0 0 !important;

        transform:none !important;

        z-index:1203 !important;

        pointer-events:auto !important;
        cursor:pointer !important;
    }

    /*
       Logo
    */
    header.fix-on-top .g_logo,
    header.fix-on-top .logo,
    #cabecalho.fix-on-top .g_logo,
    #cabecalho.fix-on-top .logo{
        position:relative !important;

        flex:0 0 auto !important;

        width:auto !important;
        min-width:0 !important;

        height:auto !important;
        min-height:0 !important;

        margin:0 !important;
        padding:0 !important;

        overflow:visible !important;

        z-index:1202 !important;
    }

    header.fix-on-top .g_logo img,
    header.fix-on-top .logo img,
    #cabecalho.fix-on-top .g_logo img,
    #cabecalho.fix-on-top .logo img{
        display:block !important;

        width:auto !important;
        max-width:4.625rem !important;

        height:auto !important;
        max-height:3.625rem !important;

        margin:0 !important;
        padding:0 !important;

        object-fit:contain !important;
    }

    /*
       Conta e carrinho
    */
    header.fix-on-top .theme-functions,
    #cabecalho.fix-on-top .theme-functions{
        position:relative !important;

        display:flex !important;
        flex:0 0 auto !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:flex-end !important;

        gap:.625rem !important;

        width:auto !important;
        min-width:0 !important;

        height:auto !important;
        min-height:0 !important;

        margin:0 0 0 auto !important;
        padding:0 !important;

        overflow:visible !important;

        z-index:1203 !important;
    }

    header.fix-on-top .theme-functions > li,
    #cabecalho.fix-on-top .theme-functions > li{
        position:relative !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        float:none !important;

        margin:0 !important;
        padding:0 !important;

        z-index:auto !important;
    }

    /*
       MENU MOBILE
       O menu fica abaixo do header e acima de todo o conteúdo da página.
    */
    header.fix-on-top .menu.superior,
    #cabecalho.fix-on-top .menu.superior{
        position:fixed !important;

        top:var(--missti-header-mobile) !important;
        right:0 !important;
        bottom:0 !important;
        left:0 !important;

        display:block !important;

        width:100% !important;
        max-width:100% !important;

        height:calc(100dvh - var(--missti-header-mobile)) !important;
        min-height:0 !important;
        max-height:calc(100dvh - var(--missti-header-mobile)) !important;

        margin:0 !important;
        padding:0 !important;

        background:#fff !important;

        overflow-x:hidden !important;
        overflow-y:auto !important;
        overscroll-behavior:contain !important;
        -webkit-overflow-scrolling:touch !important;

        transform:translate3d(-105%,0,0) !important;
        visibility:hidden !important;
        opacity:0 !important;

        pointer-events:none !important;

        z-index:1190 !important;

        transition:
            transform .25s ease,
            opacity .2s ease,
            visibility .2s ease !important;

        box-sizing:border-box !important;
    }

    body.missti-menu-aberto header.fix-on-top .menu.superior,
    body.missti-menu-aberto #cabecalho.fix-on-top .menu.superior{
        transform:translate3d(0,0,0) !important;
        visibility:visible !important;
        opacity:1 !important;
        pointer-events:auto !important;
    }

    body.missti-menu-aberto{
        overflow:hidden !important;
        touch-action:none !important;
    }

    /*
       Busca dentro do menu.
       Aqui ela pode aparecer normalmente porque já está fora da linha do header.
    */
    header.fix-on-top .menu.superior #search-form,
    #cabecalho.fix-on-top .menu.superior #search-form{
        position:relative !important;

        display:block !important;
        visibility:visible !important;

        width:100% !important;
        max-width:100% !important;

        height:auto !important;

        margin:0 0 1.125rem !important;
        padding:0 !important;

        float:none !important;

        opacity:1 !important;
        pointer-events:auto !important;

        background:transparent !important;

        z-index:auto !important;
        box-sizing:border-box !important;
    }

    header.fix-on-top .menu.superior #search-form form,
    #cabecalho.fix-on-top .menu.superior #search-form form{
        position:relative !important;

        display:block !important;

        width:100% !important;

        margin:0 !important;
        padding:0 !important;
    }

    header.fix-on-top .menu.superior #search-form input[type="text"],
    #cabecalho.fix-on-top .menu.superior #search-form input[type="text"]{
        position:relative !important;

        display:block !important;

        width:100% !important;
        max-width:100% !important;

        height:2.625rem !important;

        margin:0 !important;
        padding:0 2.75rem 0 .875rem !important;

        background:#fff !important;
        color:var(--missti-texto) !important;

        border:1px solid var(--missti-linha) !important;
        border-radius:.5rem !important;

        box-shadow:none !important;
        outline:none !important;

        box-sizing:border-box !important;
    }

    header.fix-on-top .menu.superior #search-form .botao-busca,
    #cabecalho.fix-on-top .menu.superior #search-form .botao-busca{
        position:absolute !important;

        top:0 !important;
        right:0 !important;
        bottom:auto !important;
        left:auto !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        width:2.625rem !important;
        height:2.625rem !important;

        margin:0 !important;
        padding:0 !important;

        background:transparent !important;

        border:0 !important;
        box-shadow:none !important;

        z-index:2 !important;
    }

    /*
       Conteúdo normal sempre abaixo da camada do cabeçalho.
       Não é necessário usar z-index gigantes nos produtos.
    */
    .conteiner-principal,
    #corpo,
    #corpo > .conteiner,
    #corpo > .container,
    .secao-principal,
    .pagina-categoria,
    .pagina-produto,
    .conteudo,
    .listagem,
    #listagemProdutos{
        position:relative !important;
        z-index:auto !important;
    }

    /*
       Ordenação e filtro ficam na camada normal da página.
       Eles podem abrir dropdowns sobre os produtos, mas nunca sobre o header.
    */
    .ordenar-listagem,
    .ordenacao,
    .filtro-mobile,
    .filtros-mobile,
    .filtro{
        position:relative !important;
        z-index:10 !important;
    }

    .ordenar-listagem .dropdown-menu,
    .ordenacao .dropdown-menu,
    .filtro-mobile .dropdown-menu,
    .filtros-mobile .dropdown-menu,
    .filtro .dropdown-menu{
        z-index:30 !important;
    }

    /*
       Produtos
    */
    #listagemProdutos .listagem-item{
        position:relative !important;
        z-index:1 !important;
    }

    #listagemProdutos .listagem-item > a.produto-sobrepor{
        z-index:20 !important;
    }

    #listagemProdutos .listagem-item > .bandeiras-produto{
        z-index:25 !important;
    }

    #listagemProdutos .listagem-item > .add-wishlist{
        z-index:30 !important;
    }

    /*
       Banners e início das páginas não recebem mais espaço artificial.
    */
    .secao-banners,
    .secao-banners > .conteiner,
    .secao-banners > .container,
    .secao-banners .banner.cheio,
    .secao-banners .banner.cheio .flexslider,
    .secao-banners .banner.cheio .slides{
        margin-top:0 !important;
        padding-top:0 !important;
    }
}

/* =====================================================
   AJUSTE V4 — ÍCONE DO MENU MOBILE
   Desktop preservado exatamente como estava antes.
   Fechado: 3 traços horizontais.
   Aberto: 3 traços verticais.
===================================================== */

@media (max-width:768px){

    header.fix-on-top .menu-trigger,
    #cabecalho .menu-trigger{
        position:relative !important;

        display:flex !important;
        flex:0 0 3.25rem !important;
        align-items:center !important;
        justify-content:center !important;

        width:3.25rem !important;
        min-width:3.25rem !important;
        max-width:3.25rem !important;

        height:3.25rem !important;
        min-height:3.25rem !important;
        max-height:3.25rem !important;

        margin:0 .625rem 0 0 !important;
        padding:0 !important;

        background:#fafafa !important;
        border:0 !important;
        border-radius:50% !important;
        box-shadow:none !important;

        color:transparent !important;
        font-size:0 !important;
        line-height:0 !important;

        overflow:hidden !important;

        transform:none !important;

        z-index:1203 !important;

        pointer-events:auto !important;
        cursor:pointer !important;

        box-sizing:border-box !important;
    }

    /*
       Esconde apenas o desenho original do tema.
       O elemento .menu-trigger continua recebendo o clique normalmente.
    */
    header.fix-on-top .menu-trigger > *,
    header.fix-on-top .menu-trigger i,
    header.fix-on-top .menu-trigger span,
    header.fix-on-top .menu-trigger svg,
    #cabecalho .menu-trigger > *,
    #cabecalho .menu-trigger i,
    #cabecalho .menu-trigger span,
    #cabecalho .menu-trigger svg{
        opacity:0 !important;
        visibility:hidden !important;

        font-size:0 !important;
        line-height:0 !important;

        pointer-events:none !important;
    }

    /*
       MENU FECHADO:
       linha central + duas sombras = 3 traços horizontais.
    */
    header.fix-on-top .menu-trigger::before,
    #cabecalho .menu-trigger::before{
        content:"" !important;

        position:absolute !important;
        top:50% !important;
        left:50% !important;

        display:block !important;

        width:1.75rem !important;
        height:.1875rem !important;

        margin:0 !important;
        padding:0 !important;

        background:var(--missti-vinho) !important;
        border:0 !important;
        border-radius:999px !important;

        box-shadow:
            0 -.55rem 0 var(--missti-vinho),
            0 .55rem 0 var(--missti-vinho) !important;

        opacity:1 !important;
        visibility:visible !important;

        transform:translate(-50%,-50%) !important;
        transform-origin:center !important;

        pointer-events:none !important;

        transition:
            width .18s ease,
            height .18s ease,
            box-shadow .18s ease !important;
    }

    header.fix-on-top .menu-trigger::after,
    #cabecalho .menu-trigger::after{
        content:none !important;
        display:none !important;
    }

    /*
       MENU ABERTO:
       os mesmos 3 traços passam para a vertical.
    */
    body.missti-menu-aberto header.fix-on-top .menu-trigger::before,
    body.missti-menu-aberto #cabecalho .menu-trigger::before{
        width:.1875rem !important;
        height:1.75rem !important;

        box-shadow:
            -.55rem 0 0 var(--missti-vinho),
            .55rem 0 0 var(--missti-vinho) !important;

        transform:translate(-50%,-50%) !important;
    }
}

/* =====================================================
   DESKTOP V11 — HEADER BASEADO NO HTML REAL
   Estrutura:
   .row-flex.justify-content-between
     > .col-auto
       > .between-mobile
         > .g_logo
         > .col-auto
           > .menu.superior
     > .col-auto
       > .search-desktop-container
===================================================== */

@media (min-width:769px){

    /*
       Linha principal do header.
       Sem absolute e sem grid: apenas o flex nativo do tema.
    */
    #cabecalho > .container > .row-flex,
    header > .container > .row-flex{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:space-between !important;

        width:100% !important;
        max-width:100% !important;

        min-height:7.5rem !important;

        margin:0 !important;
        padding:0 !important;

        box-sizing:border-box !important;
    }

    /*
       Bloco esquerdo:
       logo + categorias.
    */
    #cabecalho > .container > .row-flex > .col-auto:first-child,
    header > .container > .row-flex > .col-auto:first-child{
        flex:1 1 auto !important;
        min-width:0 !important;

        width:auto !important;
        max-width:none !important;

        margin:0 !important;
        padding:0 !important;
    }

    /*
       Logo e menu ficam obrigatoriamente na MESMA linha.
    */
    #cabecalho .between-mobile,
    header .between-mobile{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:center !important;

        width:100% !important;
        max-width:100% !important;

        margin:0 !important;
        padding:0 !important;
    }

    /*
       Hambúrguer só existe no mobile.
    */
    #cabecalho .between-mobile > .menu-trigger,
    header .between-mobile > .menu-trigger{
        display:none !important;
    }

    /*
       Logo.
    */
    #cabecalho .between-mobile > .g_logo,
    header .between-mobile > .g_logo{
        flex:0 0 7.5rem !important;

        width:7.5rem !important;
        min-width:7.5rem !important;
        max-width:7.5rem !important;

        margin:0 1rem 0 0 !important;
        padding:0 !important;
    }

    #cabecalho .between-mobile > .g_logo img,
    header .between-mobile > .g_logo img{
        display:block !important;

        width:auto !important;
        max-width:6.5rem !important;

        height:auto !important;
        max-height:6.5rem !important;

        margin:0 auto !important;
    }

    /*
       Wrapper real do menu.
    */
    #cabecalho .between-mobile > .col-auto:has(> .menu.superior),
    header .between-mobile > .col-auto:has(> .menu.superior){
        flex:1 1 auto !important;
        min-width:0 !important;

        width:auto !important;
        max-width:none !important;

        margin:0 !important;
        padding:0 !important;
    }

    /*
       Menu desktop no fluxo normal.
    */
    #cabecalho .menu.superior,
    header .menu.superior{
        position:static !important;

        display:block !important;
        visibility:visible !important;

        width:100% !important;
        max-width:100% !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        margin:0 !important;
        padding:0 !important;

        transform:none !important;

        opacity:1 !important;
        pointer-events:auto !important;

        overflow:visible !important;
    }

    /*
       Categorias em uma única linha.
    */
    #cabecalho .menu.superior .nivel-um,
    header .menu.superior .nivel-um{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:space-between !important;

        gap:.35rem !important;

        width:100% !important;
        max-width:100% !important;

        height:auto !important;

        margin:0 !important;
        padding:0 !important;

        overflow:visible !important;
    }

    #cabecalho .menu.superior .nivel-um > li,
    header .menu.superior .nivel-um > li{
        display:block !important;
        flex:0 1 auto !important;

        float:none !important;
        clear:none !important;

        width:auto !important;
        min-width:0 !important;

        margin:0 !important;
        padding:0 !important;
    }

    #cabecalho .menu.superior .nivel-um > li > a,
    header .menu.superior .nivel-um > li > a{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        padding:1rem .55rem !important;

        font-size:.875rem !important;
        line-height:1.2 !important;

        white-space:nowrap !important;
    }

    /*
       Bloco direito REAL.
       Ele permanece na extrema direita da linha principal.
    */
    #cabecalho > .container > .row-flex > .col-auto:has(> .search-desktop-container),
    header > .container > .row-flex > .col-auto:has(> .search-desktop-container){
        flex:0 0 auto !important;

        width:auto !important;
        max-width:none !important;

        margin:0 0 0 1.5rem !important;
        padding:0 !important;

        float:none !important;
    }

    #cabecalho .search-desktop-container,
    header .search-desktop-container{
        position:static !important;

        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:flex-end !important;

        width:auto !important;
        max-width:none !important;

        height:auto !important;

        margin:0 !important;
        padding:0 !important;

        float:none !important;

        transform:none !important;
    }

    /*
       Campo de busca.
    */
    #cabecalho .search-desktop-container > #search-form,
    header .search-desktop-container > #search-form{
        flex:0 0 13.5rem !important;

        width:13.5rem !important;
        min-width:13.5rem !important;
        max-width:13.5rem !important;

        margin:0 1.25rem 0 0 !important;
        padding:0 !important;
    }

    /*
       Conta + carrinho.
    */
    #cabecalho .search-desktop-container > .col-auto,
    header .search-desktop-container > .col-auto{
        flex:0 0 auto !important;

        width:auto !important;

        margin:0 !important;
        padding:0 !important;
    }

    #cabecalho .search-desktop-container .theme-functions,
    header .search-desktop-container .theme-functions{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:flex-end !important;

        gap:1rem !important;

        width:auto !important;

        margin:0 !important;
        padding:0 !important;
    }

    #cabecalho .search-desktop-container .theme-functions > li,
    header .search-desktop-container .theme-functions > li{
        float:none !important;

        margin:0 !important;
        padding:0 !important;

        white-space:nowrap !important;
    }
}


/* Mantém tudo em uma linha em notebooks / desktops menores. */
@media (min-width:769px) and (max-width:1250px){

    #cabecalho .between-mobile > .g_logo,
    header .between-mobile > .g_logo{
        flex-basis:6.5rem !important;

        width:6.5rem !important;
        min-width:6.5rem !important;
        max-width:6.5rem !important;

        margin-right:.5rem !important;
    }

    #cabecalho .menu.superior .nivel-um,
    header .menu.superior .nivel-um{
        gap:.1rem !important;
    }

    #cabecalho .menu.superior .nivel-um > li > a,
    header .menu.superior .nivel-um > li > a{
        padding-right:.3rem !important;
        padding-left:.3rem !important;

        font-size:.75rem !important;
    }

    #cabecalho > .container > .row-flex > .col-auto:has(> .search-desktop-container),
    header > .container > .row-flex > .col-auto:has(> .search-desktop-container){
        margin-left:.75rem !important;
    }

    #cabecalho .search-desktop-container > #search-form,
    header .search-desktop-container > #search-form{
        flex-basis:11rem !important;

        width:11rem !important;
        min-width:11rem !important;
        max-width:11rem !important;

        margin-right:.75rem !important;
    }

    #cabecalho .search-desktop-container .theme-functions,
    header .search-desktop-container .theme-functions{
        gap:.5rem !important;
    }
}

/* =====================================================
   DESKTOP V12 — LUPA ALINHADA DENTRO DO CAMPO DE BUSCA
===================================================== */

@media (min-width:769px){

    #cabecalho .search-desktop-container > #search-form > div,
    header .search-desktop-container > #search-form > div,
    #cabecalho .search-desktop-container > #search-form form,
    header .search-desktop-container > #search-form form{
        position:relative !important;

        display:block !important;

        width:100% !important;
        height:auto !important;

        margin:0 !important;
        padding:0 !important;
    }

    #cabecalho .search-desktop-container #search-form input[type="text"],
    header .search-desktop-container #search-form input[type="text"]{
        display:block !important;

        width:100% !important;
        height:2.625rem !important;

        margin:0 !important;
        padding:0 2.75rem 0 .75rem !important;

        box-sizing:border-box !important;
    }

    #cabecalho .search-desktop-container #search-form .botao-busca,
    header .search-desktop-container #search-form .botao-busca{
        position:absolute !important;

        top:50% !important;
        right:0 !important;
        bottom:auto !important;
        left:auto !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        width:2.625rem !important;
        height:2.625rem !important;

        margin:0 !important;
        padding:0 !important;

        background:transparent !important;

        border:0 !important;
        box-shadow:none !important;

        transform:translateY(-50%) !important;

        float:none !important;

        z-index:2 !important;
    }
}

/* =====================================================
   DESKTOP V13 — BUSCA SEM CORTAR O PLACEHOLDER
   Mantém a lupa fora da área útil do input.
===================================================== */

@media (min-width:769px){

    /*
       O input usa toda a largura disponível para o texto.
       A lupa fica visualmente à direita, fora da área útil
       do campo, portanto não precisamos reservar 2.75rem
       dentro do input.
    */
    #cabecalho .search-desktop-container #search-form input[type="text"],
    header .search-desktop-container #search-form input[type="text"]{
        padding:0 .75rem !important;
    }

    /*
       Reserva espaço externo para a lupa antes de Minha Conta.
    */
    #cabecalho .search-desktop-container > #search-form,
    header .search-desktop-container > #search-form{
        margin-right:3.875rem !important;
    }

    /*
       A lupa sai da área do input, mas continua vinculada
       ao form, que já está com position:relative.
    */
    #cabecalho .search-desktop-container #search-form .botao-busca,
    header .search-desktop-container #search-form .botao-busca{
        right:-2.625rem !important;
    }
}